Feature implementation from commits 2cc3802..c365984

apps/contracts/README.md

@@ -1,3 +1,3 @@
-# @smartinvoicexyz/constracts
+# @smartinvoicexyz/contracts
 
 Solidity smart contracts of the Smart Invoice protocol.

apps/dapp/next.config.js

@@ -1,17 +1,24 @@
 const {
   VERCEL_ENV = 'development',
   VERCEL_URL,
+  VERCEL_GIT_COMMIT_REF,
   VERCEL_PROJECT_PRODUCTION_URL,
 } = process.env;
 
 const protocol = VERCEL_ENV === 'development' ? 'http' : 'https';
-const url = VERCEL_URL ?? 'localhost:3000';
-const productionUrl = VERCEL_PROJECT_PRODUCTION_URL ?? url;
+let url = VERCEL_URL ?? 'localhost:3000';
 
-const baseUrl =
-  VERCEL_ENV === 'production'
-    ? `${protocol}://${productionUrl}`
-    : `${protocol}://${url}`;
+if (VERCEL_GIT_COMMIT_REF === 'main') {
+  url = `app.smartinvoice.xyz`;
+} else if (VERCEL_GIT_COMMIT_REF === 'develop') {
+  url = `dev.smartinvoice.xyz`;
+}
+
+if (VERCEL_ENV === 'production') {
+  url = VERCEL_PROJECT_PRODUCTION_URL ?? url;
+}
+
+const baseUrl = `${protocol}://${url}`;
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

apps/dapp/package.json

@@ -34,7 +34,8 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "viem": "^2.30.2",
-    "wagmi": "^2.15.4"
+    "wagmi": "^2.15.4",
+    "@wagmi/core": "2.17.2"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.7",

apps/dapp/pages/_app.tsx

@@ -13,44 +13,57 @@ import {
   theme,
 } from '@smartinvoicexyz/ui';
 import { wagmiConfig } from '@smartinvoicexyz/utils';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { hashFn } from '@wagmi/core/query';
 import { AppProps } from 'next/app';
-import React from 'react';
+import React, { useState } from 'react';
 import { WagmiProvider } from 'wagmi';
 
 import { OverlayContextProvider } from '../contexts/OverlayContext';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      // With SSR, we usually want to set some default staleTime
-      // above 0 to avoid refetching immediately on the client
-      staleTime: 5000,
-      refetchInterval: 5000,
-    },
-  },
-});
-
 function App({ Component, pageProps }: AppProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            queryKeyHashFn: hashFn,
+            staleTime: 300000,
+            refetchOnMount: false,
+            refetchOnWindowFocus: false,
+            refetchOnReconnect: false,
+          },
+        },
+      }),
+  );
+
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <RainbowKitProvider avatar={AccountAvatar}>
-          <ChakraProvider theme={theme}>
-            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-            <CSSReset />
-            <Global styles={globalStyles} />
-            <ErrorBoundary>
-              <OverlayContextProvider>
-                <Layout>
-                  <Component {...pageProps} />
-                </Layout>
-              </OverlayContextProvider>
-            </ErrorBoundary>
-          </ChakraProvider>
-          <ReactQueryDevtools initialIsOpen={false} />
-        </RainbowKitProvider>
+        <HydrationBoundary state={pageProps.dehydratedState}>
+          <RainbowKitProvider avatar={AccountAvatar}>
+            <ChakraProvider theme={theme}>
+              <ColorModeScript
+                initialColorMode={theme.config.initialColorMode}
+              />
+              <CSSReset />
+              <Global styles={globalStyles} />
+              <ErrorBoundary>
+                <OverlayContextProvider>
+                  <Layout>
+                    <Component {...pageProps} />
+                  </Layout>
+                </OverlayContextProvider>
+              </ErrorBoundary>
+            </ChakraProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+          </RainbowKitProvider>
+        </HydrationBoundary>
       </QueryClientProvider>
     </WagmiProvider>
   );

apps/dapp/pages/create/index.tsx

@@ -11,17 +11,13 @@ import {
   ProjectDetailsForm,
   RegisterSuccess,
 } from '@smartinvoicexyz/forms';
-import {
-  QUERY_KEY_INVOICE_DETAILS,
-  useInvoiceCreate,
-} from '@smartinvoicexyz/hooks';
+import { useInvoiceCreate } from '@smartinvoicexyz/hooks';
 import {
   Container,
   StepInfo,
   useMediaStyles,
   useToast,
 } from '@smartinvoicexyz/ui';
-import { useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Address, Hex } from 'viem';
@@ -30,7 +26,6 @@ import { useChainId } from 'wagmi';
 export function CreateInvoiceEscrow() {
   const invoiceForm = useForm();
   const toast = useToast();
-  const queryClient = useQueryClient();
   const [currentStep, setCurrentStep] = useState<number>(1);
   const [txHash, setTxHash] = useState<Hex>();
 
@@ -57,8 +52,6 @@ export function CreateInvoiceEscrow() {
   const onTxSuccess = (result: Address) => {
     toast.success(TOASTS.useInvoiceCreate.success);
     // invalidate cache
-    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_INVOICE_DETAILS] });
-    queryClient.invalidateQueries({ queryKey: ['invoiceList'] });
 
     setInvoiceId(result as Address);
 

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

@@ -6,7 +6,10 @@ import {
   InvoiceButtonManager,
   InvoicePaymentDetails,
 } from '@smartinvoicexyz/forms';
-import { useInvoiceDetails } from '@smartinvoicexyz/hooks';
+import {
+  prefetchInvoiceDetails,
+  useInvoiceDetails,
+} from '@smartinvoicexyz/hooks';
 import {
   Container,
   InvoiceMetaDetails,
@@ -19,32 +22,58 @@ import {
   parseChainId,
 } from '@smartinvoicexyz/utils';
 import _ from 'lodash';
+import { GetServerSidePropsContext } from 'next';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
 import { Hex, isAddress } from 'viem';
 import { useAccount, useChainId, useSwitchChain } from 'wagmi';
 
 import { useOverlay } from '../../../../contexts/OverlayContext';
 
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { invoiceId: invId, chainId: urlChainId } = context.params as {
+    invoiceId: string;
+    chainId: string;
+  };
+
+  const invoiceId = _.toLower(String(invId)) as Hex;
+  const chainId = parseChainId(urlChainId);
+
+  // If chainId is undefined, return 404
+  if (!chainId) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const chainLabel = chainLabelFromId(chainId);
+
+  // If the chain label doesn't match the URL chain ID, redirect to the correct URL
+  if (chainLabel !== urlChainId) {
+    return {
+      redirect: {
+        destination: `/invoice/${chainLabel}/${invoiceId}`,
+        permanent: false,
+      },
+    };
+  }
+
+  // Prefetch all invoice details
+  const dehydratedState = await prefetchInvoiceDetails(invoiceId, chainId);
+
+  return {
+    props: {
+      dehydratedState,
+    },
+  };
+}
+
 function ViewInvoice() {
   const router = useRouter();
   const { invoiceId: invId, chainId: urlChainId } = router.query;
 
   const invoiceId = _.toLower(String(invId)) as Hex;
   const invoiceChainId = parseChainId(urlChainId);
 
-  useEffect(() => {
-    if (invoiceId && invoiceChainId) {
-      const chainLabel = chainLabelFromId(invoiceChainId);
-      if (chainLabel !== urlChainId) {
-        router.replace({
-          pathname: `/invoice/${chainLabelFromId(invoiceChainId)}/${invoiceId}`,
-          query: undefined,
-        });
-      }
-    }
-  }, [invoiceId, urlChainId, invoiceChainId, router]);
-
   const { invoiceDetails, isLoading } = useInvoiceDetails({
     chainId: invoiceChainId,
     address: invoiceId,

packages/forms/src/AddMilestones.tsx

@@ -19,7 +19,7 @@ import {
 } from '@chakra-ui/react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import {
-  QUERY_KEY_INVOICE_DETAILS,
+  createInvoiceDetailsQueryKey,
   useAddMilestones,
 } from '@smartinvoicexyz/hooks';
 import { FormInvoice, InvoiceDetails } from '@smartinvoicexyz/types';
@@ -59,15 +59,23 @@ export function AddMilestones({
   onClose: () => void;
 }) {
   const toast = useToast();
-  const { address, tokenMetadata, resolutionRate, total, deposited, amounts } =
-    _.pick(invoice, [
-      'address',
-      'tokenMetadata',
-      'resolutionRate',
-      'total',
-      'deposited',
-      'amounts',
-    ]);
+  const {
+    address,
+    tokenMetadata,
+    resolutionRate,
+    total,
+    deposited,
+    amounts,
+    chainId,
+  } = _.pick(invoice, [
+    'address',
+    'tokenMetadata',
+    'resolutionRate',
+    'total',
+    'deposited',
+    'amounts',
+    'chainId',
+  ]);
 
   const localForm = useForm<Partial<FormInvoice>>({
     resolver: yupResolver(addMilestonesSchema),
@@ -106,7 +114,7 @@ export function AddMilestones({
   const onTxSuccess = () => {
     // invalidate cache
     queryClient.invalidateQueries({
-      queryKey: [QUERY_KEY_INVOICE_DETAILS],
+      queryKey: createInvoiceDetailsQueryKey(chainId, address),
     });
     // close modal
     onClose();

packages/forms/src/DepositFunds.tsx

@@ -17,7 +17,7 @@ import {
 } from '@chakra-ui/react';
 import { PAYMENT_TYPES, TOASTS } from '@smartinvoicexyz/constants';
 import {
-  QUERY_KEY_INVOICE_DETAILS,
+  createInvoiceDetailsQueryKey,
   useDeposit,
   useTokenBalance,
 } from '@smartinvoicexyz/hooks';
@@ -120,7 +120,7 @@ export function DepositFunds({
     onClose();
     // invalidate cache
     queryClient.invalidateQueries({
-      queryKey: [QUERY_KEY_INVOICE_DETAILS],
+      queryKey: createInvoiceDetailsQueryKey(chainId, address),
     });
   };
 

packages/forms/src/DepositTip.tsx

@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react';
 import { PAYMENT_TYPES, TOASTS } from '@smartinvoicexyz/constants';
 import {
-  QUERY_KEY_INVOICE_DETAILS,
+  createInvoiceDetailsQueryKey,
   useDeposit,
   useTokenBalance,
 } from '@smartinvoicexyz/hooks';
@@ -114,7 +114,7 @@ export function DepositTip({
     toast.success(TOASTS.useDeposit.success);
     // invalidate cache
     queryClient.invalidateQueries({
-      queryKey: [QUERY_KEY_INVOICE_DETAILS],
+      queryKey: createInvoiceDetailsQueryKey(chainId, address),
     });
     // close modal
     onClose();

packages/forms/src/InvoicePaymentDetails.tsx

@@ -59,7 +59,7 @@ const getDisputesWithResolution = (
     return { dispute, resolution, resolutionDetails };
   });
 
-  return _.reverse([...parsed]);
+  return [...parsed].reverse();
 };
 
 export function InvoicePaymentDetails({

packages/forms/src/LockFunds.tsx

@@ -10,8 +10,8 @@ import {
 import { yupResolver } from '@hookform/resolvers/yup';
 import { KLEROS_GOOGLE_FORM } from '@smartinvoicexyz/constants';
 import {
+  createInvoiceDetailsQueryKey,
   FormLock,
-  QUERY_KEY_INVOICE_DETAILS,
   useLock,
 } from '@smartinvoicexyz/hooks';
 import { InvoiceDetails } from '@smartinvoicexyz/types';
@@ -39,16 +39,22 @@ export function LockFunds({
   const toast = useToast();
   const queryClient = useQueryClient();
 
-  const { resolver, resolverFee, resolverInfo, tokenBalance } = _.pick(
-    invoice,
-    [
-      'resolver',
-      'resolverFee',
-      'resolverInfo',
-      'tokenBalance',
-      'resolutionRate',
-    ],
-  );
+  const {
+    resolver,
+    resolverFee,
+    resolverInfo,
+    tokenBalance,
+    address,
+    chainId: invoiceChainId,
+  } = _.pick(invoice, [
+    'resolver',
+    'resolverFee',
+    'resolverInfo',
+    'tokenBalance',
+    'resolutionRate',
+    'address',
+    'chainId',
+  ]);
   const localForm = useForm<FormLock>({
     resolver: yupResolver(lockFundsSchema),
   });
@@ -58,7 +64,7 @@ export function LockFunds({
 
   const onTxSuccess = () => {
     queryClient.invalidateQueries({
-      queryKey: [QUERY_KEY_INVOICE_DETAILS],
+      queryKey: createInvoiceDetailsQueryKey(invoiceChainId, address),
     });
 
     onClose();