fix: don't reset on new data

sushiswap · Apr 14, 2022 · cf1d63d · cf1d63d
1 parent ff3cddc
commit cf1d63d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 53 deletions.
diff --git a/src/features/trident/pools/useAllPools.ts b/src/features/trident/pools/useAllPools.ts
@@ -3,11 +3,13 @@ import { Fee } from '@sushiswap/trident-sdk'
 import { getApy } from 'app/functions'
 import { TridentPool, useOneWeekBlock, useSushiPairs } from 'app/services/graph'
 import { useGetAllTridentPools } from 'app/services/graph/hooks/pools'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 import { AllPoolType } from '../types'
 
 export default function useAllPools({ chainId }: { chainId: number | undefined }) {
+  const [isDataChanged, setDataChanged] = useState<boolean>(false)
+
   const {
     data: tridentPools,
     error: tridentError,
@@ -31,48 +33,44 @@ export default function useAllPools({ chainId }: { chainId: number | undefined }
     variables: { block: block1w, where: { id_in: legacyPools?.map((legacyPool: any) => legacyPool.id) } },
   })
 
-  return useMemo(
-    () => ({
-      data: [
-        ...(tridentPools || []),
-        ...((legacyPools as []) || []).map(
-          (legacyPool: any) =>
-            ({
-              address: legacyPool.id,
-              type: AllPoolType.Legacy,
-              volumeUSD: Number(legacyPool.volumeUSD),
-              liquidityUSD: Number(legacyPool.reserveUSD),
-              transactionCount: Number(legacyPool.txCount),
-              apy: getApy({
-                volume:
-                  legacyPool.volumeUSD -
-                    legacyPools1w?.find((legacyPool1w: any) => legacyPool.id === legacyPool1w.id)?.volumeUSD ?? 0,
-                liquidity: legacyPool.reserveUSD,
-                days: 7,
-              }),
-              assets: [legacyPool.token0, legacyPool.token1].map(
-                (token: any) => new Token(chainId!, token.id, Number(token.decimals), token.symbol, token.name)
-              ),
-              swapFee: Fee.DEFAULT,
-              twapEnabled: true,
-              legacy: true,
-            } as TridentPool)
-        ),
-      ],
-      error: tridentError || legacyError || legacyError1w,
-      isValidating: tridentIsValidating || legacyIsValidating || legacyIsValidating1w,
-    }),
-    [
-      tridentPools,
-      legacyPools,
-      tridentError,
-      legacyError,
-      legacyError1w,
-      tridentIsValidating,
-      legacyIsValidating,
-      legacyIsValidating1w,
-      legacyPools1w,
-      chainId,
-    ]
-  )
+  const data = useMemo(() => {
+    setDataChanged(true)
+    setTimeout(() => setDataChanged(false), 10)
+
+    return tridentPools && legacyPools
+      ? [
+          ...tridentPools,
+          ...(legacyPools as []).map(
+            (legacyPool: any) =>
+              ({
+                address: legacyPool.id,
+                type: AllPoolType.Legacy,
+                volumeUSD: Number(legacyPool.volumeUSD),
+                liquidityUSD: Number(legacyPool.reserveUSD),
+                transactionCount: Number(legacyPool.txCount),
+                apy: getApy({
+                  volume:
+                    legacyPool.volumeUSD -
+                      legacyPools1w?.find((legacyPool1w: any) => legacyPool.id === legacyPool1w.id)?.volumeUSD ?? 0,
+                  liquidity: legacyPool.reserveUSD,
+                  days: 7,
+                }),
+                assets: [legacyPool.token0, legacyPool.token1].map(
+                  (token: any) => new Token(chainId!, token.id, Number(token.decimals), token.symbol, token.name)
+                ),
+                swapFee: Fee.DEFAULT,
+                twapEnabled: true,
+                legacy: true,
+              } as TridentPool)
+          ),
+        ]
+      : []
+  }, [tridentPools, legacyPools, legacyPools1w, chainId])
+
+  return {
+    data,
+    isDataChanged,
+    error: tridentError || legacyError || legacyError1w,
+    isValidating: tridentIsValidating || legacyIsValidating || legacyIsValidating1w,
+  }
 }
diff --git a/src/features/trident/pools/usePoolsTableData.tsx b/src/features/trident/pools/usePoolsTableData.tsx
@@ -5,6 +5,7 @@ import { TridentPool } from 'app/services/graph/fetchers/pools'
 import { useRollingPoolStats } from 'app/services/graph/hooks/pools'
 import { useActiveWeb3React } from 'app/services/web3'
 import React, { ReactNode, useMemo } from 'react'
+import { UseFiltersOptions, UsePaginationOptions, UseTableOptions } from 'react-table'
 
 import { AllPoolType, chipPoolColorMapper, poolTypeNameMapper } from '../types'
 import { PoolCell } from './PoolCell'
@@ -19,9 +20,15 @@ export interface DiscoverPoolsTableColumn {
   maxWidth?: number
 }
 
-export const usePoolsTableData = () => {
+type usePoolsTableData = () => {
+  config: UseTableOptions<TridentPool> & UsePaginationOptions<any> & UseFiltersOptions<any>
+  loading: boolean
+  error: any
+}
+
+export const usePoolsTableData: usePoolsTableData = () => {
   const { chainId } = useActiveWeb3React()
-  const { data, error, isValidating } = useAllPools({ chainId })
+  const { data, error, isValidating, isDataChanged } = useAllPools({ chainId })
 
   const columns: DiscoverPoolsTableColumn[] = useMemo(() => {
     return [
@@ -109,20 +116,22 @@ export const usePoolsTableData = () => {
   return useMemo(
     () => ({
       config: {
-        columns: columns,
-        data: data ?? [],
+        columns: columns as any,
+        data: data ? data : [],
         initialState: {
           pageSize: 15,
           sortBy: [
-            { id: 'liquidityUSD' as DiscoverPoolsTableColumn['accessor'], desc: true },
-            { id: 'volumeUSD' as DiscoverPoolsTableColumn['accessor'], desc: true },
-          ],
+            { id: 'liquidityUSD', desc: true },
+            { id: 'volumeUSD', desc: true },
+          ] as { id: DiscoverPoolsTableColumn['accessor']; desc: boolean }[],
         },
+        getRowId: (original) => original.address,
         autoResetFilters: false,
+        autoResetPage: !isDataChanged,
       },
       loading: isValidating,
       error,
     }),
-    [columns, data, error, isValidating]
+    [columns, data, error, isDataChanged, isValidating]
   )
 }