diff --git a/packages/constants/package.json b/packages/constants/package.json
index bb9adbe3..2db8e2eb 100644
--- a/packages/constants/package.json
+++ b/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",
diff --git a/packages/constants/src/form.ts b/packages/constants/src/form.ts
index eb91590b..87b1d254 100644
--- 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/package.json b/packages/dapp/package.json
index 2a3dd671..26cddd60 100644
--- a/packages/dapp/package.json
+++ b/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"]
}
}
diff --git a/packages/dapp/pages/_app.tsx b/packages/dapp/pages/_app.tsx
index b07a7c5b..510825cd 100644
--- a/packages/dapp/pages/_app.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/dapp/pages/create/escrow.tsx b/packages/dapp/pages/create/escrow.tsx
index 0712854b..860cab49 100644
--- 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(1);
+ const [txHash, setTxHash] = useState();
+ const [invoiceId, setInvoiceId] = useState();
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 (
-
-
-
- );
- }
-
return (
)}
+
+ {currentStep === 5 && (
+
+ )}
diff --git a/packages/dapp/pages/create/instant.tsx b/packages/dapp/pages/create/instant.tsx
index 27514412..80adc05a 100644
--- 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 (
-
-
-
- );
+ return {/* */};
}
const nextStepHandler = () => {
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 8e102a21..86e8162b 100644
--- a/packages/forms/package.json
+++ b/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": {
diff --git a/packages/forms/src/RegisterSuccess.tsx b/packages/forms/src/RegisterSuccess.tsx
index 48481994..9cbbb174 100644
--- a/packages/forms/src/RegisterSuccess.tsx
+++ b/packages/forms/src/RegisterSuccess.tsx
@@ -1,9 +1,11 @@
+import { CheckCircleIcon } from '@chakra-ui/icons';
import {
Button,
Flex,
Heading,
HStack,
Link,
+ Spacer,
Stack,
Text,
useClipboard,
@@ -11,192 +13,141 @@ import {
import { fetchInvoice, Invoice } from '@smart-invoice/graphql';
import { Network } from '@smart-invoice/types';
import { ChakraNextLink, CopyIcon, Loader } from '@smart-invoice/ui';
+import { Checkbox } from '@smart-invoice/ui/src/theme/components';
import { chainByName, getTxLink } from '@smart-invoice/utils';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
-import { Address, isAddress } from 'viem';
-import { useChainId } from 'wagmi';
-
-const POLL_INTERVAL = 5000;
-
-export function RegisterSuccess() {
+import { Address, useChainId } from 'wagmi';
+import { Icon } from '@chakra-ui/react';
+
+export function RegisterSuccess({
+ invoiceId,
+ txHash,
+}: {
+ invoiceId: Address;
+ txHash: Address;
+}) {
const chainId = useChainId();
- const txHash = '0x';
- const [invoiceId, setInvoiceID] = useState();
- const [invoice, setInvoice] = useState();
-
- // useEffect(() => {
- // if (txHash && chainId) {
- // awaitInvoiceAddress(chainId, txHash).then(id => {
- // setInvoiceID(id);
- // });
- // }
- // }, [txHash, chainId]);
-
- // useEffect(() => {
- // if (!chainId || !invoiceId || !isAddress(invoiceId) || !!invoice)
- // return () => undefined;
-
- // let isSubscribed = true;
-
- // const interval = setInterval(() => {
- // fetchInvoice(chainId, invoiceId).then(inv => {
- // if (isSubscribed && !!inv) {
- // setInvoice(inv as unknown as Invoice);
- // }
- // });
- // }, POLL_INTERVAL);
- // return () => {
- // isSubscribed = false;
- // clearInterval(interval);
- // };
- // }, [chainId, invoiceId, invoice]);
+ const chainHex = chainByName(String('gnosis') as Network)?.id?.toString(16);
- const chainHex = chainByName(
- String(invoice?.network) as Network,
- )?.id?.toString(16);
-
- const { onCopy: copyId } = useClipboard(_.toLower(invoice?.id));
+ const { onCopy: copyId } = useClipboard(_.toLower(invoiceId));
const { onCopy: copyLink } = useClipboard(
- `${window.location.origin}/invoice/${chainHex}/${invoice?.id}/${
- String(invoice?.invoiceType) === 'escrow' ? '' : invoice?.invoiceType
- }`,
+ `${window.location.origin}/invoice/${chainHex}/${invoiceId}`,
);
return (
-
-
- {invoice ? 'Invoice Registered' : 'Invoice Registration Received'}
-
-
- {chainId && txHash && (
-
- {invoice
- ? 'You can view your transaction '
- : 'You can check the progress of your transaction '}
-
-
+
+
+
+ You can view your transaction
+
+ here
+
+
+
+
+ Your Invoice ID
+
+
+
- here
-
-
- )}
-
- {invoice ? (
- <>
-
- Your Invoice ID
-
-
-
-
- {invoice.id}
-
-
-
-
-
-
-
- Link to Invoice
-
-
-
- {`${window.location.origin}/invoice/${chainHex}/${invoice.id}/${
- String(invoice.invoiceType) === 'escrow'
- ? ''
- : invoice.invoiceType
- }`}
-
-
-
-
- >
- ) : (
-
-
+ {invoiceId}
+
+
+
- )}
-
-
-
-
+
+
+ {_.truncate(
+ `${window.location.origin}/invoice/${chainHex}/${invoiceId}`,
+ {
+ length: 60,
+ omission: '...',
+ },
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/packages/graphql/package.json b/packages/graphql/package.json
index 759f76bd..e7833692 100644
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -16,7 +16,7 @@
"graphql-tag": "^2.12.6",
"graphql-zeus": "^5.3.3",
"lodash": "^4.17.21",
- "viem": "^1.21.4"
+ "viem": "^2.8.18"
},
"devDependencies": {
"@types/lodash": "^4.14.202"
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 607235b9..99979f8f 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -16,8 +16,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"
},
"devDependencies": {
"@types/lodash": "^4.14.202",
diff --git a/packages/types/package.json b/packages/types/package.json
index 85c8b5db..66ba30dc 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -16,6 +16,6 @@
"@chakra-ui/react": "^2.8.2",
"@smart-invoice/graphql": "*",
"react": "^18.2.0",
- "viem": "^1.21.4"
+ "viem": "^2.8.18"
}
}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 05556d17..03368d6f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -31,8 +31,8 @@
"react-datepicker": "^4.25.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"
},
"devDependencies": {
"@types/jest": "^29.5.11",
diff --git a/packages/ui/src/atoms/ConnectWeb3.tsx b/packages/ui/src/atoms/ConnectWeb3.tsx
index 1bf6ea23..20e53baf 100644
--- a/packages/ui/src/atoms/ConnectWeb3.tsx
+++ b/packages/ui/src/atoms/ConnectWeb3.tsx
@@ -1,18 +1,18 @@
import { Button, Flex, Text } from '@chakra-ui/react';
-import { useConnectModal } from '@rainbow-me/rainbowkit';
+import { useWeb3Modal } from '@web3modal/wagmi/react';
import { SUPPORTED_NETWORKS } from '@smart-invoice/constants';
import { useIsClient } from '@smart-invoice/hooks';
import { chainsMap } from '@smart-invoice/utils';
import _ from 'lodash';
import React from 'react';
import { useAccount } from 'wagmi';
-
+import { createWeb3ModalThing } from '@smart-invoice/utils';
import { WalletFilledIcon } from '../icons/WalletFilledIcon';
import { Container } from './Container';
import { Loader } from './Loader';
export function ConnectWeb3() {
- const { openConnectModal } = useConnectModal();
+ const { open, close } = useWeb3Modal();
const { address, isConnecting } = useAccount();
const isClient = useIsClient();
@@ -73,7 +73,7 @@ export function ConnectWeb3() {
)}
{isClient && !address && (
-