fix: onSuccess; handle infinite reload

1. Have put small intermediate state of confirmation after invoice is created 2. also is mobile friendly :)
SmartInvoiceXYZ · Mar 16, 2024 · 4904830 · 4904830
1 parent 5e96d87
commit 4904830
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 188 deletions.
diff --git a/packages/constants/src/form.ts b/packages/constants/src/form.ts
@@ -35,6 +35,11 @@ export const ESCROW_STEPS: { [key: number]: EscrowStep } = {
     step_details: [],
     next: 'create invoice',
   },
+  5: {
+    step_title: 'Invoice Created',
+    step_details: [],
+    next: 'invoice created',
+  },
 };
 
 export const INSTANT_STEPS: { [key: number]: EscrowStep } = {

diff --git a/packages/dapp/pages/create/escrow.tsx b/packages/dapp/pages/create/escrow.tsx
@@ -20,20 +20,22 @@ import { useRouter } from 'next/router';
 // import _ from 'lodash';
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { Hex, numberToHex } from 'viem';
+import { Address, Hex, numberToHex } from 'viem';
 import { useChainId } from 'wagmi';
 
 import { useOverlay } from '../../contexts/OverlayContext';
+import { Invoice } from '@smart-invoice/graphql/src';
 
 export function CreateInvoiceEscrow() {
   const chainId = useChainId();
   const invoiceForm = useForm();
   const toast = useToast();
-  const router = useRouter();
   const queryClient = useQueryClient();
   const { modals, setModals } = useOverlay();
   const [currentStep, setCurrentStep] = useState<number>(1);
+  const [txHash, setTxHash] = useState<Address>();
 
+  const [invoiceId, setInvoiceId] = useState<Address>();
   const { headingSize, columnWidth } = useMediaStyles();
 
   const nextStepHandler = () => {
@@ -50,10 +52,10 @@ export function CreateInvoiceEscrow() {
     queryClient.invalidateQueries({ queryKey: ['invoiceDetails'] });
     queryClient.invalidateQueries({ queryKey: ['invoiceList'] });
 
-    // redirect
-    setTimeout(() => {
-      router.push(`/invoice/${numberToHex(chainId)}/${result}`);
-    }, 500);
+    setInvoiceId(result as Address);
+
+    // Send to Success step
+    nextStepHandler();
   };
 
   const { writeAsync, isLoading } = useInvoiceCreate({
@@ -63,19 +65,10 @@ export function CreateInvoiceEscrow() {
   });
 
   const handleSubmit = async () => {
-    await writeAsync?.();
+    const data = await writeAsync?.();
+    setTxHash(data?.hash);
   };
 
-  // if (txHash) {
-  // eslint-disable-next-line no-constant-condition
-  if (false) {
-    return (
-      <Container overlay>
-        <RegisterSuccess />
-      </Container>
-    );
-  }
-
   return (
     <Container overlay>
       <Stack
@@ -158,6 +151,13 @@ export function CreateInvoiceEscrow() {
                 type={INVOICE_TYPES.Escrow}
               />
             )}
+
+            {currentStep === 5 && (
+              <RegisterSuccess
+                invoiceId={invoiceId as Address}
+                txHash={txHash as Address}
+              />
+            )}
           </Flex>
         </Stack>
       </Stack>