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/pages/create/escrow.tsx b/packages/dapp/pages/create/escrow.tsx index 0712854b..c44de11a 100644 --- a/packages/dapp/pages/create/escrow.tsx +++ b/packages/dapp/pages/create/escrow.tsx @@ -20,20 +20,22 @@ 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, numberToHex } from 'viem'; import { useChainId } from 'wagmi'; import { useOverlay } from '../../contexts/OverlayContext'; +import { Invoice } from '@smart-invoice/graphql/src'; 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 +52,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 +65,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/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/ui/src/atoms/StepInfo.tsx b/packages/ui/src/atoms/StepInfo.tsx index 8a3ad0fc..88f69853 100644 --- a/packages/ui/src/atoms/StepInfo.tsx +++ b/packages/ui/src/atoms/StepInfo.tsx @@ -38,7 +38,7 @@ export function StepInfo({ return ( - {stepNum !== 1 ? ( + {stepNum !== 1 && stepNum !== 5 ? (