Merge pull request #25 from dhedge/refactor/wagmi-reactivity

Refactor/wagmi reactivity

package.json

@@ -11,6 +11,7 @@
     "storybook": "pnpx nx run trading-widget:storybook"
   },
   "dependencies": {
+    "@tanstack/react-query-devtools": "^5.24.0",
     "erc7412": "^0.2.2",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",

packages/core-ui-kit/.eslintrc.json

@@ -39,7 +39,8 @@
               "@testing-library/jest-dom",
               "@testing-library/dom",
               "@testing-library/react",
-              "erc7412"
+              "erc7412",
+              "@tanstack/react-query-devtools"
             ]
           }
         ]

packages/core-ui-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhedge/core-ui-kit",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Core UI Kit",
   "type": "module",
   "main": "dist/index.js",

packages/core-ui-kit/src/const/default-data.ts

@@ -9,8 +9,8 @@ import { AddressZero } from './web3'
 
 export const DEFAULT_PRECISION = 18
 
-export const DEFAULT_POLLING_INTERVAL = 23_000
-export const SHORTEN_POLLING_INTERVAL = 15_000
+export const DEFAULT_POLLING_INTERVAL = 59_000
+export const SHORTEN_POLLING_INTERVAL = 30_000
 
 export const DEFAULT_LOCK_TIME = formatDuration({ hours: 24 })
 export const CUSTOM_LOCK_TIME = formatDuration({ minutes: 15 })

packages/core-ui-kit/src/hooks/trading/deposit/use-deposit-quote.ts

@@ -7,6 +7,7 @@ import {
   DEPOSIT_QUOTE_MULTIPLIER_CUSTOM,
   DEPOSIT_QUOTE_MULTIPLIER_DEFAULT,
   DEPOSIT_QUOTE_POOL_LOGIC_MULTIPLIER,
+  SHORTEN_POLLING_INTERVAL,
 } from 'const'
 import { usePoolTokenPrice } from 'hooks/pool'
 import {
@@ -17,11 +18,7 @@ import {
 } from 'hooks/state'
 import { usePoolDepositAssetAddress } from 'hooks/trading/deposit'
 import { useDebounce } from 'hooks/utils'
-import {
-  useContractReadsErrorLogging,
-  useInvalidateOnBlock,
-  useReadContracts,
-} from 'hooks/web3'
+import { useContractReadsErrorLogging, useReadContracts } from 'hooks/web3'
 import type { PoolConfig } from 'types/config.types'
 import { getContractAddressById } from 'utils'
 
@@ -65,7 +62,7 @@ export const useDepositQuote = ({
     .shiftedBy(sendToken.decimals)
     .toFixed(0)
 
-  const { data, queryKey } = useReadContracts({
+  const { data } = useReadContracts({
     contracts: [
       {
         address: getContractAddressById('easySwapper', chainId),
@@ -87,11 +84,10 @@ export const useDepositQuote = ({
         !!sendToken.address &&
         !!poolDepositAssetAddress &&
         isEasySwapperTrading,
+      refetchInterval: SHORTEN_POLLING_INTERVAL,
     },
   })
 
-  useInvalidateOnBlock({ queryKey })
-
   const depositQuote = data?.[0]?.result
   useContractReadsErrorLogging(data)
 

packages/core-ui-kit/src/hooks/trading/use-synthetix-v3-oracles-update.ts

@@ -2,11 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { usePublicClient } from 'wagmi'
 
-import {
-  AddressZero,
-  DEFAULT_POLLING_INTERVAL,
-  SHORTEN_POLLING_INTERVAL,
-} from 'const'
+import { AddressZero, DEFAULT_POLLING_INTERVAL } from 'const'
 import { useTradingPanelModal, useTradingPanelPoolConfig } from 'hooks/state'
 import type { Address, TransactionRequest } from 'types'
 import {
@@ -97,8 +93,7 @@ export const useSynthetixV3OraclesUpdate = ({
   const publicClient = usePublicClient({ chainId })
   const [txData, setTxData] = useState<TransactionRequest | null>(null)
   const { data: blockNumber } = useBlockNumber({
-    query: { enabled: !disabled, staleTime: SHORTEN_POLLING_INTERVAL },
-    watch: { enabled: !disabled, pollingInterval: DEFAULT_POLLING_INTERVAL },
+    query: { enabled: !disabled, refetchInterval: DEFAULT_POLLING_INTERVAL },
   })
   const updateTradingModal = useTradingPanelModal()[1]
   const { sendTransaction } = useSendUpdateTransaction({ chainId })

packages/core-ui-kit/src/hooks/trading/use-trading-result-handling.test.ts

@@ -21,6 +21,10 @@ vi.mock('hooks/web3', () => ({
     data: {},
     error: null,
   })),
+  useInvalidateTradingQueries: vi.fn(() => ({
+    invalidateAllowanceQueries: vi.fn(),
+    invalidateTradingQueries: vi.fn(),
+  })),
 }))
 
 describe('useTradingResultHandling', () => {

packages/core-ui-kit/src/hooks/trading/use-trading-result-handling.ts

@@ -7,7 +7,10 @@ import {
   useTradingPanelModal,
   useTradingPanelTransactions,
 } from 'hooks/state'
-import { useWaitForTransactionReceipt } from 'hooks/web3'
+import {
+  useInvalidateTradingQueries,
+  useWaitForTransactionReceipt,
+} from 'hooks/web3'
 import type { Address } from 'types/web3.types'
 import { getExplorerLink } from 'utils'
 
@@ -24,10 +27,13 @@ export const useTradingResultHandling = () => {
   const action = pendingTransaction?.action
   const isTokenApproveTransaction = action === 'approve'
   const chainId = pendingTransaction?.chainId
+  const { invalidateTradingQueries, invalidateAllowanceQueries } =
+    useInvalidateTradingQueries()
 
   const { data, error } = useWaitForTransactionReceipt({
     hash: txHash,
     chainId,
+    pollingInterval: 15_000,
   })
 
   useEffect(() => {
@@ -43,6 +49,10 @@ export const useTradingResultHandling = () => {
         updatePendingTransactions({ type: 'remove', status: 'success', txHash })
         onTransactionSuccess?.(data, action, link)
       }
+
+      isTokenApproveTransaction
+        ? invalidateAllowanceQueries()
+        : invalidateTradingQueries()
     }
   }, [
     data,
@@ -53,6 +63,8 @@ export const useTradingResultHandling = () => {
     updatePendingTransactions,
     updateTradingModal,
     updateTradingMeta,
+    invalidateAllowanceQueries,
+    invalidateTradingQueries,
   ])
 
   useEffect(() => {

packages/core-ui-kit/src/hooks/trading/withdraw/use-withdraw-slippage.ts

@@ -36,8 +36,7 @@ export const useWithdrawSlippage = ({
   const isApproved = approvingStatus === 'success'
   const insufficientBalance = useIsInsufficientBalance()
   const { data: blockNumber } = useBlockNumber({
-    watch: { enabled: true, pollingInterval: SHORTEN_POLLING_INTERVAL },
-    query: { staleTime: SHORTEN_POLLING_INTERVAL },
+    query: { refetchInterval: SHORTEN_POLLING_INTERVAL },
   })
 
   const debouncedEstimateSell = useRef(noop)

packages/core-ui-kit/src/hooks/web3/index.ts

@@ -21,3 +21,4 @@ export { useContractReadsErrorLogging } from './use-contract-reads-error-logging
 export { useContractReadErrorLogging } from './use-contract-read-error-logging'
 export { useStaticCallQuery } from './use-static-call-query'
 export { useInvalidateOnBlock } from './use-invalidate-on-block'
+export { useInvalidateTradingQueries } from './use-invalidate-trading-queries'

packages/core-ui-kit/src/hooks/web3/use-invalidate-on-block.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import type { UseReadContractsReturnType } from 'wagmi'
 import { useBlockNumber } from 'wagmi'
 
-import { DEFAULT_POLLING_INTERVAL, SHORTEN_POLLING_INTERVAL } from 'const'
+import { SHORTEN_POLLING_INTERVAL } from 'const'
 
 export interface InvalidateOnBlockConfig {
   queryKey: UseReadContractsReturnType['queryKey']
@@ -17,11 +17,9 @@ export const useInvalidateOnBlock = ({
   const queryClient = useQueryClient()
 
   const { data: blockNumber } = useBlockNumber({
-    watch: {
-      enabled: watch,
-      pollingInterval: DEFAULT_POLLING_INTERVAL,
+    query: {
+      refetchInterval: SHORTEN_POLLING_INTERVAL,
     },
-    query: { staleTime: SHORTEN_POLLING_INTERVAL },
   })
 
   useEffect(() => {

packages/core-ui-kit/src/hooks/web3/use-invalidate-trading-queries.ts

@@ -0,0 +1,54 @@
+import type { QueryKey } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+
+type ContractReadQueryKey = ['readContract', { functionName?: string }]
+type ContractReadsQueryKey = [
+  'readContracts',
+  { contracts?: { functionName?: string }[] },
+]
+
+const tradingContractCalls = [
+  'balanceOf',
+  'getFundSummary',
+  'getFundComposition',
+]
+const allowanceContractCalls = ['allowance']
+
+const filterQueries = (
+  queryKey: QueryKey,
+  contractCalls: string[],
+): boolean => {
+  if (queryKey[0] === 'readContract') {
+    return contractCalls.includes(
+      (queryKey as ContractReadQueryKey)?.[1]?.functionName ?? '',
+    )
+  }
+  if (queryKey[0] === 'readContracts') {
+    const contracts = (queryKey as ContractReadsQueryKey)[1]?.contracts
+    return !!contracts?.some(({ functionName }) =>
+      contractCalls.includes(functionName ?? ''),
+    )
+  }
+  return false
+}
+
+export const useInvalidateTradingQueries = () => {
+  const queryClient = useQueryClient()
+
+  const invalidateAllowanceQueries = useCallback(() => {
+    queryClient.invalidateQueries({
+      predicate: ({ queryKey }) =>
+        filterQueries(queryKey, allowanceContractCalls),
+    })
+  }, [queryClient])
+
+  const invalidateTradingQueries = useCallback(() => {
+    queryClient.invalidateQueries({
+      predicate: ({ queryKey }) =>
+        filterQueries(queryKey, tradingContractCalls),
+    })
+  }, [queryClient])
+
+  return { invalidateAllowanceQueries, invalidateTradingQueries }
+}

packages/core-ui-kit/src/hooks/web3/use-token-allowance.test.ts

@@ -1,5 +1,5 @@
 import { erc20Abi } from 'abi'
-import { optimism } from 'const'
+import { DEFAULT_POLLING_INTERVAL, optimism } from 'const'
 import * as web3Hooks from 'hooks/web3'
 import { renderHook } from 'test-utils'
 
@@ -30,13 +30,13 @@ describe('useTokenAllowance', () => {
       ),
     )
 
-    expect(web3Hooks.useInvalidateOnBlock).toHaveBeenCalledTimes(1)
-    expect(web3Hooks.useInvalidateOnBlock).toHaveBeenCalledWith({
-      queryKey: ['query'],
-    })
     expect(web3Hooks.useReadContract).toHaveBeenCalledTimes(1)
     expect(web3Hooks.useReadContract).toHaveBeenCalledWith(
-      expect.objectContaining({ functionName: 'allowance', abi: erc20Abi }),
+      expect.objectContaining({
+        functionName: 'allowance',
+        abi: erc20Abi,
+        query: { enabled: true, refetchInterval: DEFAULT_POLLING_INTERVAL },
+      }),
     )
   })
 })

packages/core-ui-kit/src/hooks/web3/use-token-allowance.ts

@@ -1,6 +1,6 @@
 import { erc20Abi } from 'abi'
-import { SHORTEN_POLLING_INTERVAL } from 'const'
-import { useInvalidateOnBlock, useReadContract } from 'hooks/web3'
+import { DEFAULT_POLLING_INTERVAL } from 'const'
+import { useReadContract } from 'hooks/web3'
 import type { Address, ChainId } from 'types/web3.types'
 
 export const useTokenAllowance = (
@@ -10,19 +10,15 @@ export const useTokenAllowance = (
   chainId: ChainId,
   skip: boolean,
 ): ReturnType<typeof useReadContract> => {
-  const query = useReadContract({
+  return useReadContract({
     address: tokenAddress,
     abi: erc20Abi,
     functionName: 'allowance',
     args: [ownerAddress, spenderAddress],
     chainId,
     query: {
       enabled: !skip,
-      staleTime: SHORTEN_POLLING_INTERVAL,
+      refetchInterval: DEFAULT_POLLING_INTERVAL,
     },
   })
-
-  useInvalidateOnBlock({ queryKey: query.queryKey })
-
-  return query
 }

packages/core-ui-kit/src/providers/wagmi-provider.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import type { FC, PropsWithChildren } from 'react'
 import { createClient } from 'viem'
 import { WagmiProvider as Provider, createConfig, http } from 'wagmi'
@@ -38,6 +39,9 @@ const queryClient = new QueryClient({
 
 export const WagmiProvider: FC<PropsWithChildren> = ({ children }) => (
   <Provider config={config}>
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   </Provider>
 )