fix: onSuccess; handle infinite reload

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 } = {

packages/dapp/pages/_app.tsx

@@ -20,7 +20,8 @@ const queryClient = new QueryClient({
     queries: {
       // With SSR, we usually want to set some default staleTime
       // above 0 to avoid refetching immediately on the client
-      staleTime: 15 * 60 * 1000, // 15 minutes
+      staleTime: 5000,
+      refetchInterval: 5000,
     },
   },
 });

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>

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 = () => {

packages/dapp/pages/invoice/[chainId]/[invoiceId]/index.tsx

@@ -16,6 +16,7 @@ import { Hex, isAddress } from 'viem';
 import { useChainId } from 'wagmi';
 
 import { useOverlay } from '../../../../contexts/OverlayContext';
+import { useEffect } from 'react';
 
 function ViewInvoice() {
   const chainId = useChainId();