dont merge- just testing vercel build

packages/constants/package.json

@@ -11,8 +11,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@tanstack/react-query": "^5.18.1",
+    "@web3modal/wagmi": "^4.1.3",
     "lodash": "^4.17.21",
-    "viem": "^1.21.4"
+    "viem": "^2.8.18",
+    "wagmi": "^2.5.12"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",

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/package.json

@@ -40,8 +40,9 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
     "styled-components": "^6.1.8",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13"
+    "viem": "^2.8.18",
+    "wagmi": "^2.5.12",
+    "@web3modal/wagmi": "^4.1.1"
   },
   "scripts": {
     "dev": "next dev",
@@ -75,9 +76,6 @@
     "ts-node": "^10.9.2"
   },
   "eslintConfig": {
-    "extends": [
-      "next",
-      "next/core-web-vitals"
-    ]
+    "extends": ["next", "next/core-web-vitals"]
   }
 }

packages/dapp/pages/_app.tsx

@@ -1,20 +1,19 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import 'focus-visible/dist/focus-visible';
-import '@rainbow-me/rainbowkit/styles.css';
+import { AppProps } from 'next/app';
 
 import { ChakraProvider, ColorModeScript, CSSReset } from '@chakra-ui/react';
 import { Global } from '@emotion/react';
-import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { ErrorBoundary, globalStyles, Layout, theme } from '@smart-invoice/ui';
-import { chains, wagmiConfig } from '@smart-invoice/utils';
+import { wagmiConfig, createWeb3ModalThing } from '@smart-invoice/utils';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { AppProps } from 'next/app';
-import React from 'react';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 
 import { OverlayContextProvider } from '../contexts/OverlayContext';
 
+const PROJECT_ID = process.env.NEXT_PUBLIC_WALLETCONNECT_ID || '';
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -27,25 +26,23 @@ const queryClient = new QueryClient({
 
 function App({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider chains={chains}>
-        <QueryClientProvider client={queryClient}>
-          <ChakraProvider theme={theme}>
-            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-            <CSSReset />
-            <Global styles={globalStyles} />
-            <ErrorBoundary>
-              <OverlayContextProvider>
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
-              </OverlayContextProvider>
-            </ErrorBoundary>
-          </ChakraProvider>
-          <ReactQueryDevtools initialIsOpen={false} />
-        </QueryClientProvider>
-      </RainbowKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ChakraProvider theme={theme}>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <CSSReset />
+          <Global styles={globalStyles} />
+          <ErrorBoundary>
+            <OverlayContextProvider>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
+            </OverlayContextProvider>
+          </ErrorBoundary>
+        </ChakraProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 

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/forms/package.json

@@ -25,8 +25,8 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-hook-form": "^7.49.3",
-    "viem": "^1.21.4",
-    "wagmi": "^1.4.13",
+    "viem": "^2.8.18",
+    "wagmi": "^2.5.12",
     "yup": "^1.3.3"
   },
   "devDependencies": {