From cf1d63da79819e745eb8af454c35d70278c6103c Mon Sep 17 00:00:00 2001 From: LufyCZ Date: Thu, 14 Apr 2022 12:34:49 +0000 Subject: [PATCH] fix: don't reset on new data --- src/features/trident/pools/useAllPools.ts | 88 +++++++++---------- .../trident/pools/usePoolsTableData.tsx | 25 ++++-- 2 files changed, 60 insertions(+), 53 deletions(-) diff --git a/src/features/trident/pools/useAllPools.ts b/src/features/trident/pools/useAllPools.ts index 26ea5fb73b..be98406afc 100644 --- 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(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 index 23992fa3f6..20ab58cb4f 100644 --- 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 & UsePaginationOptions & UseFiltersOptions + 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] ) }