From 49048307873cfb023c770bf33b64257f2f5198d1 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Sat, 16 Mar 2024 18:51:14 +0530 Subject: [PATCH 01/13] fix: onSuccess; handle infinite reload 1. Have put small intermediate state of confirmation after invoice is created 2. also is mobile friendly :) --- packages/constants/src/form.ts | 5 + packages/dapp/pages/create/escrow.tsx | 34 +-- packages/forms/src/RegisterSuccess.tsx | 291 ++++++++++--------------- packages/ui/src/atoms/StepInfo.tsx | 2 +- 4 files changed, 144 insertions(+), 188 deletions(-) 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 ? ( Date: Sat, 16 Mar 2024 18:54:19 +0530 Subject: [PATCH 02/13] fix for build Backlog: fix instant invoice --- packages/dapp/pages/create/escrow.tsx | 4 +--- packages/dapp/pages/create/instant.tsx | 6 +----- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/dapp/pages/create/escrow.tsx b/packages/dapp/pages/create/escrow.tsx index c44de11a..860cab49 100644 --- a/packages/dapp/pages/create/escrow.tsx +++ b/packages/dapp/pages/create/escrow.tsx @@ -16,15 +16,13 @@ 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 { Address, Hex, numberToHex } from 'viem'; +import { Address, Hex } from 'viem'; import { useChainId } from 'wagmi'; import { useOverlay } from '../../contexts/OverlayContext'; -import { Invoice } from '@smart-invoice/graphql/src'; export function CreateInvoiceEscrow() { const chainId = useChainId(); 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 = () => { From 3da6dc791f3e27c0c7fa9463028c7b7b618b47b2 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Mon, 1 Apr 2024 19:30:23 +0530 Subject: [PATCH 03/13] try swr maybe!! --- packages/hooks/package.json | 1 + packages/hooks/src/useInvoiceDetails.ts | 96 +++++++++++-------------- pnpm-lock.yaml | 13 ++++ 3 files changed, 54 insertions(+), 56 deletions(-) diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 607235b9..420f17bf 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -16,6 +16,7 @@ "lodash": "^4.17.21", "react": "^18.2.0", "react-hook-form": "^7.49.3", + "swr": "^2.2.5", "viem": "^1.21.4", "wagmi": "^1.4.13" }, diff --git a/packages/hooks/src/useInvoiceDetails.ts b/packages/hooks/src/useInvoiceDetails.ts index 3388439c..0de25bac 100644 --- a/packages/hooks/src/useInvoiceDetails.ts +++ b/packages/hooks/src/useInvoiceDetails.ts @@ -1,42 +1,38 @@ -import { INVOICE_TYPES } from '@smart-invoice/constants'; +import useSWR from 'swr'; import { fetchInvoice, Invoice, InvoiceDetails } from '@smart-invoice/graphql'; import { getInvoiceDetails } from '@smart-invoice/utils'; -import { useQuery } from '@tanstack/react-query'; import _ from 'lodash'; import { Hex } from 'viem'; -import { useBalance, useToken } from 'wagmi'; +import { useToken, useBalance } from 'wagmi'; +import { INVOICE_TYPES } from '@smart-invoice/constants'; import { useInstantDetails } from '.'; -export const useInvoiceDetails = ({ - address, - chainId, -}: { - address: Hex; - chainId: number; -}) => { - const { - data: invoice, - isLoading, - error, - } = useQuery({ - queryKey: ['invoiceDetails', { address, chainId }], - queryFn: () => fetchInvoice(chainId, address), - enabled: !!address && !!chainId, - staleTime: 1000 * 60 * 15, - }); - // console.log(invoice); +// Define a fetcher function that calls your fetchInvoice method. +const fetcher = (chainId, address) => fetchInvoice(chainId, address); + +export const useInvoiceDetails = ({ address, chainId }: { address: Hex; chainId: number }) => { + // Replace useQuery with useSWR for fetching invoice details. + const { data: invoice, error } = useSWR( + address && chainId ? ['invoiceDetails', chainId, address] : null, + () => fetcher(chainId, address), + { + shouldRetryOnError: false, + revalidateOnFocus: false, + revalidateOnReconnect: false, + dedupingInterval: 1000 * 60 * 15 // 15 minutes + } + ); const { invoiceType: type } = _.pick(invoice, ['invoiceType']); - // fetch data about the invoice's token + // Use existing hooks for token metadata and balances. const { data: tokenMetadata } = useToken({ address: invoice?.token as Hex, chainId, enabled: !!address && !!chainId, }); - // fetch the invoice's balances const { data: nativeBalance } = useBalance({ address }); const { data: tokenBalance } = useBalance({ address, @@ -45,50 +41,38 @@ export const useInvoiceDetails = ({ enabled: !!invoice?.token && !!chainId, }); - // fetch the invoice's instant details, if applicable const { data: instantDetails } = useInstantDetails({ address, chainId, enabled: !!address && !!chainId && type === INVOICE_TYPES.Instant, }); - // enhance the invoice with assorted computed values - const { data: invoiceDetails, isLoading: isInvoiceDetailsLoading } = - useQuery({ - queryKey: [ + // Enhanced invoice details are fetched with SWR as well. + const { data: invoiceDetails, isValidating: isInvoiceDetailsLoading } = useSWR( + invoice && tokenMetadata && tokenBalance && nativeBalance && (type !== INVOICE_TYPES.Instant || instantDetails) + ? [ 'extendedInvoiceDetails', - { - invoiceId: _.get(invoice, 'id'), - token: tokenMetadata?.name, - tokenBalance: tokenBalance?.formatted, - nativeBalance: nativeBalance?.formatted, - instantDetails: _.mapValues(instantDetails, v => v?.toString()), - }, - ], - queryFn: () => - getInvoiceDetails( - invoice, - tokenMetadata, - tokenBalance, - nativeBalance, - instantDetails, - ), - enabled: - !!invoice && - !!tokenMetadata && - !!tokenBalance && - !!nativeBalance && - type === INVOICE_TYPES.Instant - ? !!instantDetails - : true, - - staleTime: 1000 * 60 * 15, - }); + invoice?.id, + tokenMetadata?.name, + tokenBalance?.formatted, + nativeBalance?.formatted, + _.mapValues(instantDetails, v => v?.toString()) + ] + : null, + () => getInvoiceDetails(invoice, tokenMetadata, tokenBalance, nativeBalance, instantDetails), + { + shouldRetryOnError: false, + revalidateOnFocus: false, + revalidateOnReconnect: false, + dedupingInterval: 1000 * 60 * 15 // 15 minutes + } + ); return { data: invoice, invoiceDetails, - isLoading: isLoading || isInvoiceDetailsLoading, + isLoading: !invoice && !error, + isInvoiceDetailsLoading, error, }; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 972b3e2f..9b2fd723 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -491,6 +491,9 @@ importers: react-hook-form: specifier: ^7.49.3 version: 7.49.3(react@18.2.0) + swr: + specifier: ^2.2.5 + version: 2.2.5(react@18.2.0) viem: specifier: ^1.21.4 version: 1.21.4(typescript@5.3.3) @@ -24207,6 +24210,16 @@ packages: - utf-8-validate dev: false + /swr@2.2.5(react@18.2.0): + resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==} + peerDependencies: + react: ^16.11.0 || ^17.0.0 || ^18.0.0 + dependencies: + client-only: 0.0.1 + react: 18.2.0 + use-sync-external-store: 1.2.0(react@18.2.0) + dev: false + /symbol-observable@4.0.0: resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==} engines: {node: '>=0.10'} From 44ae2a5ded69b6a5160545a0ef1e40e0bb90657b Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Mon, 1 Apr 2024 23:44:09 +0530 Subject: [PATCH 04/13] Revert "try swr maybe!!" This reverts commit 3da6dc791f3e27c0c7fa9463028c7b7b618b47b2. --- packages/hooks/package.json | 1 - packages/hooks/src/useInvoiceDetails.ts | 96 ++++++++++++++----------- pnpm-lock.yaml | 13 ---- 3 files changed, 56 insertions(+), 54 deletions(-) diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 420f17bf..607235b9 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -16,7 +16,6 @@ "lodash": "^4.17.21", "react": "^18.2.0", "react-hook-form": "^7.49.3", - "swr": "^2.2.5", "viem": "^1.21.4", "wagmi": "^1.4.13" }, diff --git a/packages/hooks/src/useInvoiceDetails.ts b/packages/hooks/src/useInvoiceDetails.ts index 0de25bac..3388439c 100644 --- a/packages/hooks/src/useInvoiceDetails.ts +++ b/packages/hooks/src/useInvoiceDetails.ts @@ -1,38 +1,42 @@ -import useSWR from 'swr'; +import { INVOICE_TYPES } from '@smart-invoice/constants'; import { fetchInvoice, Invoice, InvoiceDetails } from '@smart-invoice/graphql'; import { getInvoiceDetails } from '@smart-invoice/utils'; +import { useQuery } from '@tanstack/react-query'; import _ from 'lodash'; import { Hex } from 'viem'; -import { useToken, useBalance } from 'wagmi'; -import { INVOICE_TYPES } from '@smart-invoice/constants'; +import { useBalance, useToken } from 'wagmi'; import { useInstantDetails } from '.'; -// Define a fetcher function that calls your fetchInvoice method. -const fetcher = (chainId, address) => fetchInvoice(chainId, address); - -export const useInvoiceDetails = ({ address, chainId }: { address: Hex; chainId: number }) => { - // Replace useQuery with useSWR for fetching invoice details. - const { data: invoice, error } = useSWR( - address && chainId ? ['invoiceDetails', chainId, address] : null, - () => fetcher(chainId, address), - { - shouldRetryOnError: false, - revalidateOnFocus: false, - revalidateOnReconnect: false, - dedupingInterval: 1000 * 60 * 15 // 15 minutes - } - ); +export const useInvoiceDetails = ({ + address, + chainId, +}: { + address: Hex; + chainId: number; +}) => { + const { + data: invoice, + isLoading, + error, + } = useQuery({ + queryKey: ['invoiceDetails', { address, chainId }], + queryFn: () => fetchInvoice(chainId, address), + enabled: !!address && !!chainId, + staleTime: 1000 * 60 * 15, + }); + // console.log(invoice); const { invoiceType: type } = _.pick(invoice, ['invoiceType']); - // Use existing hooks for token metadata and balances. + // fetch data about the invoice's token const { data: tokenMetadata } = useToken({ address: invoice?.token as Hex, chainId, enabled: !!address && !!chainId, }); + // fetch the invoice's balances const { data: nativeBalance } = useBalance({ address }); const { data: tokenBalance } = useBalance({ address, @@ -41,38 +45,50 @@ export const useInvoiceDetails = ({ address, chainId }: { address: Hex; chainId: enabled: !!invoice?.token && !!chainId, }); + // fetch the invoice's instant details, if applicable const { data: instantDetails } = useInstantDetails({ address, chainId, enabled: !!address && !!chainId && type === INVOICE_TYPES.Instant, }); - // Enhanced invoice details are fetched with SWR as well. - const { data: invoiceDetails, isValidating: isInvoiceDetailsLoading } = useSWR( - invoice && tokenMetadata && tokenBalance && nativeBalance && (type !== INVOICE_TYPES.Instant || instantDetails) - ? [ + // enhance the invoice with assorted computed values + const { data: invoiceDetails, isLoading: isInvoiceDetailsLoading } = + useQuery({ + queryKey: [ 'extendedInvoiceDetails', - invoice?.id, - tokenMetadata?.name, - tokenBalance?.formatted, - nativeBalance?.formatted, - _.mapValues(instantDetails, v => v?.toString()) - ] - : null, - () => getInvoiceDetails(invoice, tokenMetadata, tokenBalance, nativeBalance, instantDetails), - { - shouldRetryOnError: false, - revalidateOnFocus: false, - revalidateOnReconnect: false, - dedupingInterval: 1000 * 60 * 15 // 15 minutes - } - ); + { + invoiceId: _.get(invoice, 'id'), + token: tokenMetadata?.name, + tokenBalance: tokenBalance?.formatted, + nativeBalance: nativeBalance?.formatted, + instantDetails: _.mapValues(instantDetails, v => v?.toString()), + }, + ], + queryFn: () => + getInvoiceDetails( + invoice, + tokenMetadata, + tokenBalance, + nativeBalance, + instantDetails, + ), + enabled: + !!invoice && + !!tokenMetadata && + !!tokenBalance && + !!nativeBalance && + type === INVOICE_TYPES.Instant + ? !!instantDetails + : true, + + staleTime: 1000 * 60 * 15, + }); return { data: invoice, invoiceDetails, - isLoading: !invoice && !error, - isInvoiceDetailsLoading, + isLoading: isLoading || isInvoiceDetailsLoading, error, }; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b2fd723..972b3e2f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -491,9 +491,6 @@ importers: react-hook-form: specifier: ^7.49.3 version: 7.49.3(react@18.2.0) - swr: - specifier: ^2.2.5 - version: 2.2.5(react@18.2.0) viem: specifier: ^1.21.4 version: 1.21.4(typescript@5.3.3) @@ -24210,16 +24207,6 @@ packages: - utf-8-validate dev: false - /swr@2.2.5(react@18.2.0): - resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==} - peerDependencies: - react: ^16.11.0 || ^17.0.0 || ^18.0.0 - dependencies: - client-only: 0.0.1 - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) - dev: false - /symbol-observable@4.0.0: resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==} engines: {node: '>=0.10'} From 0870c29c9422e37bd34d578168261c4edba85c30 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 07:10:09 +0530 Subject: [PATCH 05/13] added revalidate hook --- packages/hooks/src/index.ts | 1 + packages/hooks/src/usePollSubgraph.ts | 4 ++++ packages/hooks/src/useRevalidateInvoice.ts | 7 +++++++ 3 files changed, 12 insertions(+) create mode 100644 packages/hooks/src/useRevalidateInvoice.ts diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index deadda1f..1fb8f168 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -14,5 +14,6 @@ export * from './usePollSubgraph'; export * from './useRateForResolver'; export * from './useRelease'; export * from './useResolve'; +export * from './useRevalidateInvoice'; export * from './useVerify'; export * from './useWithdraw'; diff --git a/packages/hooks/src/usePollSubgraph.ts b/packages/hooks/src/usePollSubgraph.ts index 9d0c600c..b0232465 100644 --- a/packages/hooks/src/usePollSubgraph.ts +++ b/packages/hooks/src/usePollSubgraph.ts @@ -1,3 +1,5 @@ +import { useRevalidateInvoice } from './useRevalidateInvoice'; + export const usePollSubgraph = ({ label, fetchHelper, @@ -11,6 +13,7 @@ export const usePollSubgraph = ({ checkResult: (value: any) => boolean; interval?: number; }) => { + const { setShouldRevalidate } = useRevalidateInvoice(); const waitForResult = async () => new Promise(resolve => { const checkResultHandler = async () => { @@ -21,6 +24,7 @@ export const usePollSubgraph = ({ // eslint-disable-next-line no-use-before-define clearInterval(intervalId); console.log(result); + setShouldRevalidate(true); return Promise.resolve(result); } // eslint-disable-next-line no-console diff --git a/packages/hooks/src/useRevalidateInvoice.ts b/packages/hooks/src/useRevalidateInvoice.ts new file mode 100644 index 00000000..b7c1ee66 --- /dev/null +++ b/packages/hooks/src/useRevalidateInvoice.ts @@ -0,0 +1,7 @@ +import { useState } from 'react'; + +export const useRevalidateInvoice = () => { + const [shouldRevalidate, setShouldRevalidate] = useState(false); + + return { shouldRevalidate, setShouldRevalidate }; +}; From e54a20c52f961e905d4d37fcd6b0dceb44ec1ee9 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 07:28:24 +0530 Subject: [PATCH 06/13] Revert "added revalidate hook" This reverts commit 0870c29c9422e37bd34d578168261c4edba85c30. --- packages/hooks/src/index.ts | 1 - packages/hooks/src/usePollSubgraph.ts | 4 ---- packages/hooks/src/useRevalidateInvoice.ts | 7 ------- 3 files changed, 12 deletions(-) delete mode 100644 packages/hooks/src/useRevalidateInvoice.ts diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 1fb8f168..deadda1f 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -14,6 +14,5 @@ export * from './usePollSubgraph'; export * from './useRateForResolver'; export * from './useRelease'; export * from './useResolve'; -export * from './useRevalidateInvoice'; export * from './useVerify'; export * from './useWithdraw'; diff --git a/packages/hooks/src/usePollSubgraph.ts b/packages/hooks/src/usePollSubgraph.ts index b0232465..9d0c600c 100644 --- a/packages/hooks/src/usePollSubgraph.ts +++ b/packages/hooks/src/usePollSubgraph.ts @@ -1,5 +1,3 @@ -import { useRevalidateInvoice } from './useRevalidateInvoice'; - export const usePollSubgraph = ({ label, fetchHelper, @@ -13,7 +11,6 @@ export const usePollSubgraph = ({ checkResult: (value: any) => boolean; interval?: number; }) => { - const { setShouldRevalidate } = useRevalidateInvoice(); const waitForResult = async () => new Promise(resolve => { const checkResultHandler = async () => { @@ -24,7 +21,6 @@ export const usePollSubgraph = ({ // eslint-disable-next-line no-use-before-define clearInterval(intervalId); console.log(result); - setShouldRevalidate(true); return Promise.resolve(result); } // eslint-disable-next-line no-console diff --git a/packages/hooks/src/useRevalidateInvoice.ts b/packages/hooks/src/useRevalidateInvoice.ts deleted file mode 100644 index b7c1ee66..00000000 --- a/packages/hooks/src/useRevalidateInvoice.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useState } from 'react'; - -export const useRevalidateInvoice = () => { - const [shouldRevalidate, setShouldRevalidate] = useState(false); - - return { shouldRevalidate, setShouldRevalidate }; -}; From 941ddc42dd5c9edc98dbbc70f0717dc82a6e0913 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 07:56:14 +0530 Subject: [PATCH 07/13] Revert "Revert "added revalidate hook"" --- packages/hooks/src/index.ts | 1 + packages/hooks/src/usePollSubgraph.ts | 4 ++++ packages/hooks/src/useRevalidateInvoice.ts | 7 +++++++ 3 files changed, 12 insertions(+) create mode 100644 packages/hooks/src/useRevalidateInvoice.ts diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index deadda1f..1fb8f168 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -14,5 +14,6 @@ export * from './usePollSubgraph'; export * from './useRateForResolver'; export * from './useRelease'; export * from './useResolve'; +export * from './useRevalidateInvoice'; export * from './useVerify'; export * from './useWithdraw'; diff --git a/packages/hooks/src/usePollSubgraph.ts b/packages/hooks/src/usePollSubgraph.ts index 9d0c600c..b0232465 100644 --- a/packages/hooks/src/usePollSubgraph.ts +++ b/packages/hooks/src/usePollSubgraph.ts @@ -1,3 +1,5 @@ +import { useRevalidateInvoice } from './useRevalidateInvoice'; + export const usePollSubgraph = ({ label, fetchHelper, @@ -11,6 +13,7 @@ export const usePollSubgraph = ({ checkResult: (value: any) => boolean; interval?: number; }) => { + const { setShouldRevalidate } = useRevalidateInvoice(); const waitForResult = async () => new Promise(resolve => { const checkResultHandler = async () => { @@ -21,6 +24,7 @@ export const usePollSubgraph = ({ // eslint-disable-next-line no-use-before-define clearInterval(intervalId); console.log(result); + setShouldRevalidate(true); return Promise.resolve(result); } // eslint-disable-next-line no-console diff --git a/packages/hooks/src/useRevalidateInvoice.ts b/packages/hooks/src/useRevalidateInvoice.ts new file mode 100644 index 00000000..b7c1ee66 --- /dev/null +++ b/packages/hooks/src/useRevalidateInvoice.ts @@ -0,0 +1,7 @@ +import { useState } from 'react'; + +export const useRevalidateInvoice = () => { + const [shouldRevalidate, setShouldRevalidate] = useState(false); + + return { shouldRevalidate, setShouldRevalidate }; +}; From 75f97fbc68271a688e69966760988ec5bf2ddaf5 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 09:04:43 +0530 Subject: [PATCH 08/13] found the culprit: maybe TODO: return to old age of gql! --- packages/graphql/src/client.ts | 22 +--- packages/graphql/src/invoice.ts | 16 +-- packages/graphql/src/invoices.ts | 18 ++- packages/graphql/src/zeus/index.ts | 181 ++++++++++++++--------------- 4 files changed, 108 insertions(+), 129 deletions(-) diff --git a/packages/graphql/src/client.ts b/packages/graphql/src/client.ts index 12199606..8b6099ab 100644 --- a/packages/graphql/src/client.ts +++ b/packages/graphql/src/client.ts @@ -1,20 +1,8 @@ -import { - ApolloClient, - InMemoryCache, - NormalizedCacheObject, -} from '@apollo/client'; import { SUPPORTED_NETWORKS } from '@smart-invoice/constants'; import { getGraphUrl } from '@smart-invoice/shared'; +import { GraphQLClient } from 'graphql-request'; -const cache = new InMemoryCache(); - -export const clients = SUPPORTED_NETWORKS.reduce( - (o, chainId) => ({ - ...o, - [chainId]: new ApolloClient({ - uri: getGraphUrl(chainId), - cache, - }), - }), - {} as Record>, -); +export const clients = SUPPORTED_NETWORKS.map((network: number) => ({ + network, + client: new GraphQLClient(getGraphUrl(network)), +})); diff --git a/packages/graphql/src/invoice.ts b/packages/graphql/src/invoice.ts index 95120ef7..2602c307 100644 --- a/packages/graphql/src/invoice.ts +++ b/packages/graphql/src/invoice.ts @@ -1,7 +1,7 @@ /* eslint-disable camelcase */ import { logDebug } from '@smart-invoice/shared'; import { Address, Hex, isAddress } from 'viem'; - +import _ from 'lodash'; import { clients } from './client'; import { scalars } from './scalars'; import { @@ -140,18 +140,14 @@ export const fetchInvoice = async (chainId: number, queryAddress: Address) => { if (!address) return null; const query = invoiceQuery(address); - const { data, error } = await clients[chainId].query({ query }); - logDebug({ data, error, address }); + const { client } = _.find(clients, { network: chainId })!; + + const result = await client.request(query); - if (!data) { - if (error) { - throw error; - } - return null; - } + logDebug({ result, address }); - return data.invoice; + return result.invoice; }; export type TokenMetadata = { diff --git a/packages/graphql/src/invoices.ts b/packages/graphql/src/invoices.ts index d0a0dfb2..f386ed76 100644 --- a/packages/graphql/src/invoices.ts +++ b/packages/graphql/src/invoices.ts @@ -4,6 +4,8 @@ import { logDebug } from '@smart-invoice/shared'; import { Address, isAddress } from 'viem'; +import _ from 'lodash'; + import { clients } from './client'; import { scalars } from './scalars'; import { _SubgraphErrorPolicy_, Invoice_orderBy, OrderDirection } from './zeus'; @@ -80,11 +82,12 @@ export const fetchInvoices = async ( sortDirection, where, ); - const { data, error } = await clients[chainId].query({ query }); + + const { client } = _.find(clients, { network: chainId })!; + const result = await client.request(query); logDebug({ - data, - error, + result, chainId, searchInput, pageIndex, @@ -93,14 +96,7 @@ export const fetchInvoices = async ( sortDesc, }); - if (!data) { - if (error) { - throw error; - } - return null; - } - - return data.invoices; + return result.invoices; }; // type GetElementType = T extends (infer U)[] diff --git a/packages/graphql/src/zeus/index.ts b/packages/graphql/src/zeus/index.ts index e01d00e2..ed44b04b 100644 --- a/packages/graphql/src/zeus/index.ts +++ b/packages/graphql/src/zeus/index.ts @@ -799,9 +799,8 @@ type IsScalar = S extends 'scalar' & { : unknown : unknown : S; -type IsArray = T extends Array - ? InputType[] - : InputType; +type IsArray = + T extends Array ? InputType[] : InputType; type FlattenArray = T extends Array ? R : T; type BaseZeusResolver = boolean | 1 | string | Variable; @@ -809,61 +808,60 @@ type IsInterfaced< SRC extends DeepAnify, DST, SCLR extends ScalarDefinition, -> = FlattenArray extends ZEUS_INTERFACES | ZEUS_UNIONS - ? { - [P in keyof SRC]: SRC[P] extends '__union' & infer R - ? P extends keyof DST - ? IsArray< - R, - '__typename' extends keyof DST - ? DST[P] & { __typename: true } - : DST[P], - SCLR - > - : IsArray< - R, - '__typename' extends keyof DST - ? { __typename: true } - : Record, - SCLR - > - : never; - }[keyof SRC] & { - [P in keyof Omit< - Pick< - SRC, - { - [P in keyof DST]: SRC[P] extends '__union' & infer R ? never : P; - }[keyof DST] - >, - '__typename' - >]: IsPayLoad extends BaseZeusResolver - ? IsScalar - : IsArray; - } - : { - [P in keyof Pick]: IsPayLoad< - DST[P] - > extends BaseZeusResolver - ? IsScalar - : IsArray; - }; +> = + FlattenArray extends ZEUS_INTERFACES | ZEUS_UNIONS + ? { + [P in keyof SRC]: SRC[P] extends '__union' & infer R + ? P extends keyof DST + ? IsArray< + R, + '__typename' extends keyof DST + ? DST[P] & { __typename: true } + : DST[P], + SCLR + > + : IsArray< + R, + '__typename' extends keyof DST + ? { __typename: true } + : Record, + SCLR + > + : never; + }[keyof SRC] & { + [P in keyof Omit< + Pick< + SRC, + { + [P in keyof DST]: SRC[P] extends '__union' & infer R ? never : P; + }[keyof DST] + >, + '__typename' + >]: IsPayLoad extends BaseZeusResolver + ? IsScalar + : IsArray; + } + : { + [P in keyof Pick]: IsPayLoad< + DST[P] + > extends BaseZeusResolver + ? IsScalar + : IsArray; + }; -export type MapType< - SRC, - DST, - SCLR extends ScalarDefinition, -> = SRC extends DeepAnify ? IsInterfaced : never; +export type MapType = + SRC extends DeepAnify ? IsInterfaced : never; // eslint-disable-next-line @typescript-eslint/ban-types -export type InputType< - SRC, - DST, - SCLR extends ScalarDefinition = {}, -> = IsPayLoad extends { __alias: infer R } - ? { - [P in keyof R]: MapType[keyof MapType]; - } & MapType, '__alias'>, SCLR> - : MapType, SCLR>; +export type InputType = + IsPayLoad extends { __alias: infer R } + ? { + [P in keyof R]: MapType[keyof MapType< + SRC, + R[P], + SCLR + >]; + } & MapType, '__alias'>, SCLR> + : MapType, SCLR>; export type SubscriptionToGraphQL = { ws: WebSocket; on: (fn: (args: InputType) => void) => void; @@ -914,17 +912,18 @@ type VR = VariableRequired>; export type GraphQLVariableType = VR; -type ExtractVariableTypeString = T extends VR - ? R1 extends VR - ? R2 extends VR - ? R3 extends VR - ? R4 extends VR - ? R5 - : R4 - : R3 - : R2 - : R1 - : T; +type ExtractVariableTypeString = + T extends VR + ? R1 extends VR + ? R2 extends VR + ? R3 extends VR + ? R4 extends VR + ? R5 + : R4 + : R3 + : R2 + : R1 + : T; type DecomposeType = T extends `[${infer R}]` ? Array> | undefined @@ -963,40 +962,40 @@ export type Variable = { ' __zeus_type': T; }; -export type ExtractVariablesDeep = Query extends Variable< - infer VType, - infer VName -> - ? { [key in VName]: GetVariableType } - : Query extends string | number | boolean | Array - ? // eslint-disable-next-line @typescript-eslint/ban-types - {} - : UnionToIntersection< - { - [K in keyof Query]: WithOptionalNullables< - ExtractVariablesDeep - >; - }[keyof Query] - >; - -export type ExtractVariables = Query extends Variable< - infer VType, - infer VName -> - ? { [key in VName]: GetVariableType } - : Query extends [infer Inputs, infer Outputs] - ? ExtractVariablesDeep & ExtractVariables +export type ExtractVariablesDeep = + Query extends Variable + ? { [key in VName]: GetVariableType } : Query extends string | number | boolean | Array ? // eslint-disable-next-line @typescript-eslint/ban-types {} : UnionToIntersection< { [K in keyof Query]: WithOptionalNullables< - ExtractVariables + ExtractVariablesDeep >; }[keyof Query] >; +export type ExtractVariables = + Query extends Variable + ? { [key in VName]: GetVariableType } + : Query extends [infer Inputs, infer Outputs] + ? ExtractVariablesDeep & ExtractVariables + : Query extends + | string + | number + | boolean + | Array + ? // eslint-disable-next-line @typescript-eslint/ban-types + {} + : UnionToIntersection< + { + [K in keyof Query]: WithOptionalNullables< + ExtractVariables + >; + }[keyof Query] + >; + type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ( k: infer I, ) => void From 96fe08af52b56c389c3ba9a3934d3f6397ebb309 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:03:09 +0530 Subject: [PATCH 09/13] Revert "found the culprit: maybe" This reverts commit 75f97fbc68271a688e69966760988ec5bf2ddaf5. --- packages/graphql/src/client.ts | 22 +++- packages/graphql/src/invoice.ts | 16 ++- packages/graphql/src/invoices.ts | 18 +-- packages/graphql/src/zeus/index.ts | 181 +++++++++++++++-------------- 4 files changed, 129 insertions(+), 108 deletions(-) diff --git a/packages/graphql/src/client.ts b/packages/graphql/src/client.ts index 8b6099ab..12199606 100644 --- a/packages/graphql/src/client.ts +++ b/packages/graphql/src/client.ts @@ -1,8 +1,20 @@ +import { + ApolloClient, + InMemoryCache, + NormalizedCacheObject, +} from '@apollo/client'; import { SUPPORTED_NETWORKS } from '@smart-invoice/constants'; import { getGraphUrl } from '@smart-invoice/shared'; -import { GraphQLClient } from 'graphql-request'; -export const clients = SUPPORTED_NETWORKS.map((network: number) => ({ - network, - client: new GraphQLClient(getGraphUrl(network)), -})); +const cache = new InMemoryCache(); + +export const clients = SUPPORTED_NETWORKS.reduce( + (o, chainId) => ({ + ...o, + [chainId]: new ApolloClient({ + uri: getGraphUrl(chainId), + cache, + }), + }), + {} as Record>, +); diff --git a/packages/graphql/src/invoice.ts b/packages/graphql/src/invoice.ts index 2602c307..95120ef7 100644 --- a/packages/graphql/src/invoice.ts +++ b/packages/graphql/src/invoice.ts @@ -1,7 +1,7 @@ /* eslint-disable camelcase */ import { logDebug } from '@smart-invoice/shared'; import { Address, Hex, isAddress } from 'viem'; -import _ from 'lodash'; + import { clients } from './client'; import { scalars } from './scalars'; import { @@ -140,14 +140,18 @@ export const fetchInvoice = async (chainId: number, queryAddress: Address) => { if (!address) return null; const query = invoiceQuery(address); + const { data, error } = await clients[chainId].query({ query }); - const { client } = _.find(clients, { network: chainId })!; - - const result = await client.request(query); + logDebug({ data, error, address }); - logDebug({ result, address }); + if (!data) { + if (error) { + throw error; + } + return null; + } - return result.invoice; + return data.invoice; }; export type TokenMetadata = { diff --git a/packages/graphql/src/invoices.ts b/packages/graphql/src/invoices.ts index f386ed76..d0a0dfb2 100644 --- a/packages/graphql/src/invoices.ts +++ b/packages/graphql/src/invoices.ts @@ -4,8 +4,6 @@ import { logDebug } from '@smart-invoice/shared'; import { Address, isAddress } from 'viem'; -import _ from 'lodash'; - import { clients } from './client'; import { scalars } from './scalars'; import { _SubgraphErrorPolicy_, Invoice_orderBy, OrderDirection } from './zeus'; @@ -82,12 +80,11 @@ export const fetchInvoices = async ( sortDirection, where, ); - - const { client } = _.find(clients, { network: chainId })!; - const result = await client.request(query); + const { data, error } = await clients[chainId].query({ query }); logDebug({ - result, + data, + error, chainId, searchInput, pageIndex, @@ -96,7 +93,14 @@ export const fetchInvoices = async ( sortDesc, }); - return result.invoices; + if (!data) { + if (error) { + throw error; + } + return null; + } + + return data.invoices; }; // type GetElementType = T extends (infer U)[] diff --git a/packages/graphql/src/zeus/index.ts b/packages/graphql/src/zeus/index.ts index ed44b04b..e01d00e2 100644 --- a/packages/graphql/src/zeus/index.ts +++ b/packages/graphql/src/zeus/index.ts @@ -799,8 +799,9 @@ type IsScalar = S extends 'scalar' & { : unknown : unknown : S; -type IsArray = - T extends Array ? InputType[] : InputType; +type IsArray = T extends Array + ? InputType[] + : InputType; type FlattenArray = T extends Array ? R : T; type BaseZeusResolver = boolean | 1 | string | Variable; @@ -808,60 +809,61 @@ type IsInterfaced< SRC extends DeepAnify, DST, SCLR extends ScalarDefinition, -> = - FlattenArray extends ZEUS_INTERFACES | ZEUS_UNIONS - ? { - [P in keyof SRC]: SRC[P] extends '__union' & infer R - ? P extends keyof DST - ? IsArray< - R, - '__typename' extends keyof DST - ? DST[P] & { __typename: true } - : DST[P], - SCLR - > - : IsArray< - R, - '__typename' extends keyof DST - ? { __typename: true } - : Record, - SCLR - > - : never; - }[keyof SRC] & { - [P in keyof Omit< - Pick< - SRC, - { - [P in keyof DST]: SRC[P] extends '__union' & infer R ? never : P; - }[keyof DST] - >, - '__typename' - >]: IsPayLoad extends BaseZeusResolver - ? IsScalar - : IsArray; - } - : { - [P in keyof Pick]: IsPayLoad< - DST[P] - > extends BaseZeusResolver - ? IsScalar - : IsArray; - }; +> = FlattenArray extends ZEUS_INTERFACES | ZEUS_UNIONS + ? { + [P in keyof SRC]: SRC[P] extends '__union' & infer R + ? P extends keyof DST + ? IsArray< + R, + '__typename' extends keyof DST + ? DST[P] & { __typename: true } + : DST[P], + SCLR + > + : IsArray< + R, + '__typename' extends keyof DST + ? { __typename: true } + : Record, + SCLR + > + : never; + }[keyof SRC] & { + [P in keyof Omit< + Pick< + SRC, + { + [P in keyof DST]: SRC[P] extends '__union' & infer R ? never : P; + }[keyof DST] + >, + '__typename' + >]: IsPayLoad extends BaseZeusResolver + ? IsScalar + : IsArray; + } + : { + [P in keyof Pick]: IsPayLoad< + DST[P] + > extends BaseZeusResolver + ? IsScalar + : IsArray; + }; -export type MapType = - SRC extends DeepAnify ? IsInterfaced : never; +export type MapType< + SRC, + DST, + SCLR extends ScalarDefinition, +> = SRC extends DeepAnify ? IsInterfaced : never; // eslint-disable-next-line @typescript-eslint/ban-types -export type InputType = - IsPayLoad extends { __alias: infer R } - ? { - [P in keyof R]: MapType[keyof MapType< - SRC, - R[P], - SCLR - >]; - } & MapType, '__alias'>, SCLR> - : MapType, SCLR>; +export type InputType< + SRC, + DST, + SCLR extends ScalarDefinition = {}, +> = IsPayLoad extends { __alias: infer R } + ? { + [P in keyof R]: MapType[keyof MapType]; + } & MapType, '__alias'>, SCLR> + : MapType, SCLR>; export type SubscriptionToGraphQL = { ws: WebSocket; on: (fn: (args: InputType) => void) => void; @@ -912,18 +914,17 @@ type VR = VariableRequired>; export type GraphQLVariableType = VR; -type ExtractVariableTypeString = - T extends VR - ? R1 extends VR - ? R2 extends VR - ? R3 extends VR - ? R4 extends VR - ? R5 - : R4 - : R3 - : R2 - : R1 - : T; +type ExtractVariableTypeString = T extends VR + ? R1 extends VR + ? R2 extends VR + ? R3 extends VR + ? R4 extends VR + ? R5 + : R4 + : R3 + : R2 + : R1 + : T; type DecomposeType = T extends `[${infer R}]` ? Array> | undefined @@ -962,40 +963,40 @@ export type Variable = { ' __zeus_type': T; }; -export type ExtractVariablesDeep = - Query extends Variable - ? { [key in VName]: GetVariableType } +export type ExtractVariablesDeep = Query extends Variable< + infer VType, + infer VName +> + ? { [key in VName]: GetVariableType } + : Query extends string | number | boolean | Array + ? // eslint-disable-next-line @typescript-eslint/ban-types + {} + : UnionToIntersection< + { + [K in keyof Query]: WithOptionalNullables< + ExtractVariablesDeep + >; + }[keyof Query] + >; + +export type ExtractVariables = Query extends Variable< + infer VType, + infer VName +> + ? { [key in VName]: GetVariableType } + : Query extends [infer Inputs, infer Outputs] + ? ExtractVariablesDeep & ExtractVariables : Query extends string | number | boolean | Array ? // eslint-disable-next-line @typescript-eslint/ban-types {} : UnionToIntersection< { [K in keyof Query]: WithOptionalNullables< - ExtractVariablesDeep + ExtractVariables >; }[keyof Query] >; -export type ExtractVariables = - Query extends Variable - ? { [key in VName]: GetVariableType } - : Query extends [infer Inputs, infer Outputs] - ? ExtractVariablesDeep & ExtractVariables - : Query extends - | string - | number - | boolean - | Array - ? // eslint-disable-next-line @typescript-eslint/ban-types - {} - : UnionToIntersection< - { - [K in keyof Query]: WithOptionalNullables< - ExtractVariables - >; - }[keyof Query] - >; - type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ( k: infer I, ) => void From 87ddce21070b712ae4d6fdf72bb598e055c48706 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:23:53 +0530 Subject: [PATCH 10/13] solved!! --- packages/dapp/pages/_app.tsx | 2 +- packages/graphql/src/client.ts | 2 +- packages/hooks/src/index.ts | 1 - packages/hooks/src/useInvoiceDetails.ts | 9 +++++++-- packages/hooks/src/usePollSubgraph.ts | 7 ++----- packages/hooks/src/useRevalidateInvoice.ts | 7 ------- 6 files changed, 11 insertions(+), 17 deletions(-) delete mode 100644 packages/hooks/src/useRevalidateInvoice.ts diff --git a/packages/dapp/pages/_app.tsx b/packages/dapp/pages/_app.tsx index b07a7c5b..414961dd 100644 --- a/packages/dapp/pages/_app.tsx +++ b/packages/dapp/pages/_app.tsx @@ -20,7 +20,7 @@ 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 + refetchInterval: 5000, }, }, }); diff --git a/packages/graphql/src/client.ts b/packages/graphql/src/client.ts index 12199606..0d9cce70 100644 --- a/packages/graphql/src/client.ts +++ b/packages/graphql/src/client.ts @@ -6,7 +6,7 @@ import { import { SUPPORTED_NETWORKS } from '@smart-invoice/constants'; import { getGraphUrl } from '@smart-invoice/shared'; -const cache = new InMemoryCache(); +export const cache = new InMemoryCache(); export const clients = SUPPORTED_NETWORKS.reduce( (o, chainId) => ({ diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 1fb8f168..deadda1f 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -14,6 +14,5 @@ export * from './usePollSubgraph'; export * from './useRateForResolver'; export * from './useRelease'; export * from './useResolve'; -export * from './useRevalidateInvoice'; export * from './useVerify'; export * from './useWithdraw'; diff --git a/packages/hooks/src/useInvoiceDetails.ts b/packages/hooks/src/useInvoiceDetails.ts index 3388439c..ac8c3ad7 100644 --- a/packages/hooks/src/useInvoiceDetails.ts +++ b/packages/hooks/src/useInvoiceDetails.ts @@ -1,5 +1,10 @@ import { INVOICE_TYPES } from '@smart-invoice/constants'; -import { fetchInvoice, Invoice, InvoiceDetails } from '@smart-invoice/graphql'; +import { + cache, + fetchInvoice, + Invoice, + InvoiceDetails, +} from '@smart-invoice/graphql'; import { getInvoiceDetails } from '@smart-invoice/utils'; import { useQuery } from '@tanstack/react-query'; import _ from 'lodash'; @@ -15,6 +20,7 @@ export const useInvoiceDetails = ({ address: Hex; chainId: number; }) => { + cache.reset(); const { data: invoice, isLoading, @@ -23,7 +29,6 @@ export const useInvoiceDetails = ({ queryKey: ['invoiceDetails', { address, chainId }], queryFn: () => fetchInvoice(chainId, address), enabled: !!address && !!chainId, - staleTime: 1000 * 60 * 15, }); // console.log(invoice); diff --git a/packages/hooks/src/usePollSubgraph.ts b/packages/hooks/src/usePollSubgraph.ts index b0232465..8cd97c53 100644 --- a/packages/hooks/src/usePollSubgraph.ts +++ b/packages/hooks/src/usePollSubgraph.ts @@ -1,5 +1,4 @@ -import { useRevalidateInvoice } from './useRevalidateInvoice'; - +import { cache } from '@smart-invoice/graphql/'; export const usePollSubgraph = ({ label, fetchHelper, @@ -13,7 +12,6 @@ export const usePollSubgraph = ({ checkResult: (value: any) => boolean; interval?: number; }) => { - const { setShouldRevalidate } = useRevalidateInvoice(); const waitForResult = async () => new Promise(resolve => { const checkResultHandler = async () => { @@ -23,8 +21,7 @@ export const usePollSubgraph = ({ if (result && checkResult(result)) { // eslint-disable-next-line no-use-before-define clearInterval(intervalId); - console.log(result); - setShouldRevalidate(true); + cache.reset(); return Promise.resolve(result); } // eslint-disable-next-line no-console diff --git a/packages/hooks/src/useRevalidateInvoice.ts b/packages/hooks/src/useRevalidateInvoice.ts deleted file mode 100644 index b7c1ee66..00000000 --- a/packages/hooks/src/useRevalidateInvoice.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useState } from 'react'; - -export const useRevalidateInvoice = () => { - const [shouldRevalidate, setShouldRevalidate] = useState(false); - - return { shouldRevalidate, setShouldRevalidate }; -}; From 15882abc7a8bf249079e99bd2acf7514aa6fa489 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Mon, 1 Apr 2024 19:30:23 +0530 Subject: [PATCH 11/13] try swr maybe!! Revert "try swr maybe!!" This reverts commit 3da6dc791f3e27c0c7fa9463028c7b7b618b47b2. added revalidate hook Revert "added revalidate hook" This reverts commit 0870c29c9422e37bd34d578168261c4edba85c30. Revert "Revert "added revalidate hook"" found the culprit: maybe TODO: return to old age of gql! Revert "found the culprit: maybe" This reverts commit 75f97fbc68271a688e69966760988ec5bf2ddaf5. solved!! --- packages/dapp/pages/_app.tsx | 2 +- packages/graphql/src/client.ts | 2 +- packages/hooks/src/useInvoiceDetails.ts | 9 +++++++-- packages/hooks/src/usePollSubgraph.ts | 3 ++- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/dapp/pages/_app.tsx b/packages/dapp/pages/_app.tsx index b07a7c5b..414961dd 100644 --- a/packages/dapp/pages/_app.tsx +++ b/packages/dapp/pages/_app.tsx @@ -20,7 +20,7 @@ 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 + refetchInterval: 5000, }, }, }); diff --git a/packages/graphql/src/client.ts b/packages/graphql/src/client.ts index 12199606..0d9cce70 100644 --- a/packages/graphql/src/client.ts +++ b/packages/graphql/src/client.ts @@ -6,7 +6,7 @@ import { import { SUPPORTED_NETWORKS } from '@smart-invoice/constants'; import { getGraphUrl } from '@smart-invoice/shared'; -const cache = new InMemoryCache(); +export const cache = new InMemoryCache(); export const clients = SUPPORTED_NETWORKS.reduce( (o, chainId) => ({ diff --git a/packages/hooks/src/useInvoiceDetails.ts b/packages/hooks/src/useInvoiceDetails.ts index 3388439c..ac8c3ad7 100644 --- a/packages/hooks/src/useInvoiceDetails.ts +++ b/packages/hooks/src/useInvoiceDetails.ts @@ -1,5 +1,10 @@ import { INVOICE_TYPES } from '@smart-invoice/constants'; -import { fetchInvoice, Invoice, InvoiceDetails } from '@smart-invoice/graphql'; +import { + cache, + fetchInvoice, + Invoice, + InvoiceDetails, +} from '@smart-invoice/graphql'; import { getInvoiceDetails } from '@smart-invoice/utils'; import { useQuery } from '@tanstack/react-query'; import _ from 'lodash'; @@ -15,6 +20,7 @@ export const useInvoiceDetails = ({ address: Hex; chainId: number; }) => { + cache.reset(); const { data: invoice, isLoading, @@ -23,7 +29,6 @@ export const useInvoiceDetails = ({ queryKey: ['invoiceDetails', { address, chainId }], queryFn: () => fetchInvoice(chainId, address), enabled: !!address && !!chainId, - staleTime: 1000 * 60 * 15, }); // console.log(invoice); diff --git a/packages/hooks/src/usePollSubgraph.ts b/packages/hooks/src/usePollSubgraph.ts index 9d0c600c..8cd97c53 100644 --- a/packages/hooks/src/usePollSubgraph.ts +++ b/packages/hooks/src/usePollSubgraph.ts @@ -1,3 +1,4 @@ +import { cache } from '@smart-invoice/graphql/'; export const usePollSubgraph = ({ label, fetchHelper, @@ -20,7 +21,7 @@ export const usePollSubgraph = ({ if (result && checkResult(result)) { // eslint-disable-next-line no-use-before-define clearInterval(intervalId); - console.log(result); + cache.reset(); return Promise.resolve(result); } // eslint-disable-next-line no-console From 9ac286fa2273e5dd0276cef5320accde2e656836 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:39:18 +0530 Subject: [PATCH 12/13] fix action stuff --- packages/dapp/pages/_app.tsx | 4 +++- packages/hooks/src/useInvoiceDetails.ts | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/dapp/pages/_app.tsx b/packages/dapp/pages/_app.tsx index 414961dd..1189b8c0 100644 --- a/packages/dapp/pages/_app.tsx +++ b/packages/dapp/pages/_app.tsx @@ -20,7 +20,9 @@ const queryClient = new QueryClient({ queries: { // With SSR, we usually want to set some default staleTime // above 0 to avoid refetching immediately on the client - refetchInterval: 5000, + + staleTime: 5 * 1000, // 5 seconds + refetchInterval: 6 * 1000, // 6 seconds }, }, }); diff --git a/packages/hooks/src/useInvoiceDetails.ts b/packages/hooks/src/useInvoiceDetails.ts index ac8c3ad7..7222b9ef 100644 --- a/packages/hooks/src/useInvoiceDetails.ts +++ b/packages/hooks/src/useInvoiceDetails.ts @@ -10,7 +10,6 @@ import { useQuery } from '@tanstack/react-query'; import _ from 'lodash'; import { Hex } from 'viem'; import { useBalance, useToken } from 'wagmi'; - import { useInstantDetails } from '.'; export const useInvoiceDetails = ({ @@ -86,8 +85,6 @@ export const useInvoiceDetails = ({ type === INVOICE_TYPES.Instant ? !!instantDetails : true, - - staleTime: 1000 * 60 * 15, }); return { From 537d3c7c854e49655159c239f15c7be4c4e982b6 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 2 Apr 2024 11:52:38 +0530 Subject: [PATCH 13/13] things working better --- packages/dapp/pages/_app.tsx | 5 ++--- packages/dapp/pages/invoice/[chainId]/[invoiceId]/index.tsx | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/dapp/pages/_app.tsx b/packages/dapp/pages/_app.tsx index 1189b8c0..a1849b0e 100644 --- a/packages/dapp/pages/_app.tsx +++ b/packages/dapp/pages/_app.tsx @@ -20,9 +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: 5 * 1000, // 5 seconds - refetchInterval: 6 * 1000, // 6 seconds + staleTime: 5000, + refetchInterval: 5000, }, }, }); diff --git a/packages/dapp/pages/invoice/[chainId]/[invoiceId]/index.tsx b/packages/dapp/pages/invoice/[chainId]/[invoiceId]/index.tsx index 85f0e4f8..fcc06a2c 100644 --- a/packages/dapp/pages/invoice/[chainId]/[invoiceId]/index.tsx +++ b/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();