Merge pull request #189 from SmartInvoiceXYZ/fix-infinite-reload

Fix infinite reload
SmartInvoiceXYZ · Apr 1, 2024 · 85352fd · 85352fd
2 parents 11fe28d + 455aa4a
commit 85352fd
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 194 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
@@ -16,11 +16,10 @@ import {
   useToast,
 } from '@smart-invoice/ui';
 import { useQueryClient } from '@tanstack/react-query';
-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 } from 'viem';
 import { useChainId } from 'wagmi';
 
 import { useOverlay } from '../../contexts/OverlayContext';
@@ -29,11 +28,12 @@ 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 +50,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 +63,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 +149,13 @@ export function CreateInvoiceEscrow() {
                 type={INVOICE_TYPES.Escrow}
               />
             )}
+
+            {currentStep === 5 && (
+              <RegisterSuccess
+                invoiceId={invoiceId as Address}
+                txHash={txHash as Address}
+              />
+            )}
           </Flex>
         </Stack>
       </Stack>

diff --git a/packages/dapp/pages/create/instant.tsx b/packages/dapp/pages/create/instant.tsx
@@ -47,11 +47,7 @@ export function CreateInvoiceInstant() {
   // if (txHash) {
   // eslint-disable-next-line no-constant-condition
   if (false) {
-    return (
-      <Container overlay>
-        <RegisterSuccess />
-      </Container>
-    );
+    return <Container overlay>{/* <RegisterSuccess /> */}</Container>;
   }
 
   const nextStepHandler = () => {