From 30b662987feca64c4e44194e56427b2b6f178066 Mon Sep 17 00:00:00 2001 From: Ian Lapham Date: Thu, 1 Dec 2022 11:29:41 -0500 Subject: [PATCH] redo tvl and chart fixes (#272) --- src/components/Search/index.tsx | 6 +-- src/components/pools/PoolTable.tsx | 6 ++- src/components/tokens/TokenTable.tsx | 7 ++- src/constants/index.ts | 44 +++++++++++------- src/data/pools/topPools.ts | 7 +-- src/data/protocol/chart.ts | 11 +++-- src/data/protocol/derived.ts | 68 ++++++++++++++++------------ src/data/protocol/overview.ts | 2 +- src/state/pools/updater.ts | 6 ++- 9 files changed, 93 insertions(+), 64 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 6b877f6d..f470a0cb 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -32,7 +32,7 @@ const Wrapper = styled(Row)` width: 500px; height: 38px; border-radius: 20px; - positon: relative; + position: relative; z-index: 9999; @media (max-width: 1080px) { @@ -277,7 +277,7 @@ const Search = ({ ...rest }: React.HTMLAttributes) => { {tokensForList - .filter((t) => !TOKEN_HIDE.includes(t.address)) + .filter((t) => !TOKEN_HIDE[activeNetwork.id].includes(t.address)) .slice(0, tokensShown) .map((t, i) => { return ( @@ -344,7 +344,7 @@ const Search = ({ ...rest }: React.HTMLAttributes) => { {poolForList - .filter((p) => !POOL_HIDE.includes(p.address)) + .filter((p) => !POOL_HIDE[activeNetwork.id].includes(p.address)) .slice(0, poolsShown) .map((p, i) => { return ( diff --git a/src/components/pools/PoolTable.tsx b/src/components/pools/PoolTable.tsx index 6d218c48..c1e9c1cd 100644 --- a/src/components/pools/PoolTable.tsx +++ b/src/components/pools/PoolTable.tsx @@ -100,6 +100,8 @@ const DataRow = ({ poolData, index }: { poolData: PoolData; index: number }) => const MAX_ITEMS = 10 export default function PoolTable({ poolDatas, maxItems = MAX_ITEMS }: { poolDatas: PoolData[]; maxItems?: number }) { + const [currentNetwork] = useActiveNetworkVersion() + // theming const theme = useTheme() @@ -121,7 +123,7 @@ export default function PoolTable({ poolDatas, maxItems = MAX_ITEMS }: { poolDat const sortedPools = useMemo(() => { return poolDatas ? poolDatas - .filter((x) => !!x && !POOL_HIDE.includes(x.address)) + .filter((x) => !!x && !POOL_HIDE[currentNetwork.id].includes(x.address)) .sort((a, b) => { if (a && b) { return a[sortField as keyof PoolData] > b[sortField as keyof PoolData] @@ -133,7 +135,7 @@ export default function PoolTable({ poolDatas, maxItems = MAX_ITEMS }: { poolDat }) .slice(maxItems * (page - 1), page * maxItems) : [] - }, [maxItems, page, poolDatas, sortDirection, sortField]) + }, [currentNetwork.id, maxItems, page, poolDatas, sortDirection, sortField]) const handleSort = useCallback( (newField: string) => { diff --git a/src/components/tokens/TokenTable.tsx b/src/components/tokens/TokenTable.tsx index 2be96525..042db1b9 100644 --- a/src/components/tokens/TokenTable.tsx +++ b/src/components/tokens/TokenTable.tsx @@ -15,6 +15,7 @@ import { PageButtons, Arrow, Break } from 'components/shared' import HoverInlineText from '../HoverInlineText' import useTheme from 'hooks/useTheme' import { TOKEN_HIDE } from '../../constants/index' +import { useActiveNetworkVersion } from 'state/application/hooks' const Wrapper = styled(DarkGreyCard)` width: 100%; @@ -124,6 +125,8 @@ export default function TokenTable({ tokenDatas: TokenData[] | undefined maxItems?: number }) { + const [currentNetwork] = useActiveNetworkVersion() + // theming const theme = useTheme() @@ -147,7 +150,7 @@ export default function TokenTable({ const sortedTokens = useMemo(() => { return tokenDatas ? tokenDatas - .filter((x) => !!x && !TOKEN_HIDE.includes(x.address)) + .filter((x) => !!x && !TOKEN_HIDE[currentNetwork.id].includes(x.address)) .sort((a, b) => { if (a && b) { return a[sortField as keyof TokenData] > b[sortField as keyof TokenData] @@ -159,7 +162,7 @@ export default function TokenTable({ }) .slice(maxItems * (page - 1), page * maxItems) : [] - }, [tokenDatas, maxItems, page, sortDirection, sortField]) + }, [tokenDatas, maxItems, page, currentNetwork.id, sortField, sortDirection]) const handleSort = useCallback( (newField: string) => { diff --git a/src/constants/index.ts b/src/constants/index.ts index 35d81bf0..0d944154 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -2,6 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber' import { AbstractConnector } from '@web3-react/abstract-connector' import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors' +import { SupportedNetwork } from './networks' export const MAX_UINT128 = BigNumber.from(2).pow(128).sub(1) @@ -13,23 +14,34 @@ const ARBITRUM_WETH_ADDRESS = '0x82af49447d8a07e3bd95bd0d56f35241523fbab1' export const WETH_ADDRESSES = [WETH_ADDRESS, ARBITRUM_WETH_ADDRESS] -// temporary! fixing USD accounting on subgraph - open issue if urgent -export const TOKEN_HIDE = [ - '0xd46ba6d942050d489dbd938a2c909a5d5039a161', - '0x7dfb72a2aad08c937706f21421b15bfc34cba9ca', - '0x12b32f10a499bf40db334efe04226cca00bf2d9b', - '0x160de4468586b6b2f8a92feb0c260fc6cfc743b1', -] -export const POOL_HIDE = [ - '0x86d257cdb7bc9c0df10e84c8709697f92770b335', - '0xf8dbd52488978a79dfe6ffbd81a01fc5948bf9ee', - '0x8fe8d9bb8eeba3ed688069c3d6b556c9ca258248', - '0xa850478adaace4c08fc61de44d8cf3b64f359bec', - '0x277667eb3e34f134adf870be9550e9f323d0dc24', - '0x8c0411f2ad5470a66cb2e9c64536cfb8dcd54d51', - '0x055284a4ca6532ecc219ac06b577d540c686669d', -] +export const TOKEN_HIDE: { [key: string]: string[] } = { + [SupportedNetwork.ETHEREUM]: [ + '0xd46ba6d942050d489dbd938a2c909a5d5039a161', + '0x7dfb72a2aad08c937706f21421b15bfc34cba9ca', + '0x12b32f10a499bf40db334efe04226cca00bf2d9b', + '0x160de4468586b6b2f8a92feb0c260fc6cfc743b1', + ], + [SupportedNetwork.POLYGON]: ['0x8d52c2d70a7c28a9daac2ff12ad9bfbf041cd318'], + [SupportedNetwork.ARBITRUM]: [], + [SupportedNetwork.OPTIMISM]: [], + [SupportedNetwork.CELO]: [], +} +export const POOL_HIDE: { [key: string]: string[] } = { + [SupportedNetwork.ETHEREUM]: [ + '0x86d257cdb7bc9c0df10e84c8709697f92770b335', + '0xf8dbd52488978a79dfe6ffbd81a01fc5948bf9ee', + '0x8fe8d9bb8eeba3ed688069c3d6b556c9ca258248', + '0xa850478adaace4c08fc61de44d8cf3b64f359bec', + '0x277667eb3e34f134adf870be9550e9f323d0dc24', + '0x8c0411f2ad5470a66cb2e9c64536cfb8dcd54d51', + '0x055284a4ca6532ecc219ac06b577d540c686669d', + ], + [SupportedNetwork.POLYGON]: ['0x5f616541c801e2b9556027076b730e0197974f6a'], + [SupportedNetwork.ARBITRUM]: [], + [SupportedNetwork.OPTIMISM]: [], + [SupportedNetwork.CELO]: [], +} export interface WalletInfo { connector?: AbstractConnector name: string diff --git a/src/data/pools/topPools.ts b/src/data/pools/topPools.ts index 7cb45bd0..9322c503 100644 --- a/src/data/pools/topPools.ts +++ b/src/data/pools/topPools.ts @@ -1,7 +1,7 @@ import { useMemo } from 'react' import { useQuery } from '@apollo/client' import gql from 'graphql-tag' -import { useClients } from 'state/application/hooks' +import { useActiveNetworkVersion, useClients } from 'state/application/hooks' import { notEmpty } from 'utils' import { POOL_HIDE } from '../../constants' @@ -27,6 +27,7 @@ export function useTopPoolAddresses(): { error: boolean addresses: string[] | undefined } { + const [currentNetwork] = useActiveNetworkVersion() const { dataClient } = useClients() const { loading, error, data } = useQuery(TOP_POOLS, { client: dataClient, @@ -37,7 +38,7 @@ export function useTopPoolAddresses(): { if (data) { return data.pools .map((p) => { - if (POOL_HIDE.includes(p.id.toLocaleLowerCase())) { + if (POOL_HIDE[currentNetwork.id].includes(p.id.toLocaleLowerCase())) { return undefined } return p.id @@ -46,7 +47,7 @@ export function useTopPoolAddresses(): { } else { return undefined } - }, [data]) + }, [currentNetwork.id, data]) return { loading: loading, diff --git a/src/data/protocol/chart.ts b/src/data/protocol/chart.ts index b77e58ad..b337a5cc 100644 --- a/src/data/protocol/chart.ts +++ b/src/data/protocol/chart.ts @@ -7,7 +7,7 @@ import gql from 'graphql-tag' import { ApolloClient, NormalizedCacheObject } from '@apollo/client' import { useActiveNetworkVersion, useClients } from 'state/application/hooks' import { arbitrumClient, optimismClient } from 'apollo/client' -import { EthereumNetworkInfo } from 'constants/networks' +import { SupportedNetwork } from 'constants/networks' import { useDerivedProtocolTVLHistory } from './derived' // format dayjs with the libraries that we need @@ -146,11 +146,12 @@ export function useFetchGlobalChartData(): { const derivedData = useDerivedProtocolTVLHistory() const [activeNetworkVersion] = useActiveNetworkVersion() - const onEthereum = activeNetworkVersion === EthereumNetworkInfo + const shouldUserDerivedData = + activeNetworkVersion.id === SupportedNetwork.ETHEREUM || activeNetworkVersion.id === SupportedNetwork.POLYGON const indexedData = data?.[activeNetworkVersion.id] // @TODO: remove this once we have fix for mainnet TVL issue - const formattedData = onEthereum ? derivedData : indexedData + const formattedData = shouldUserDerivedData ? derivedData : indexedData useEffect(() => { async function fetch() { @@ -163,10 +164,10 @@ export function useFetchGlobalChartData(): { setError(true) } } - if (!indexedData && !error && !onEthereum) { + if (!indexedData && !error && !shouldUserDerivedData) { fetch() } - }, [data, error, dataClient, indexedData, activeNetworkVersion.id, onEthereum]) + }, [data, error, dataClient, indexedData, activeNetworkVersion.id, shouldUserDerivedData]) return { error, diff --git a/src/data/protocol/derived.ts b/src/data/protocol/derived.ts index 708e42b8..f4e65314 100644 --- a/src/data/protocol/derived.ts +++ b/src/data/protocol/derived.ts @@ -5,7 +5,7 @@ import { useTopPoolAddresses } from 'data/pools/topPools' import { useEffect, useMemo, useState } from 'react' import { useDispatch } from 'react-redux' import { AppDispatch } from 'state' -import { useDataClient } from 'state/application/hooks' +import { useActiveNetworkVersion, useDataClient } from 'state/application/hooks' import { updatePoolChartData } from 'state/pools/actions' import { PoolChartEntry, PoolData } from 'state/pools/reducer' import { ChartDayData } from 'types' @@ -16,7 +16,8 @@ import { POOL_HIDE } from '../../constants' * @returns TVL value in USD */ export function useTVLOffset() { - const { data } = usePoolDatas(POOL_HIDE) + const [currentNetwork] = useActiveNetworkVersion() + const { data } = usePoolDatas(POOL_HIDE[currentNetwork.id]) const tvlOffset = useMemo(() => { if (!data) return 0 return Object.keys(data).reduce((accum: number, poolAddress) => { @@ -39,29 +40,34 @@ export function useDerivedOffsetTVLHistory() { const [chartData, setChartData] = useState<{ [key: number]: ChartDayData } | undefined>(undefined) const dispatch = useDispatch() + const [currentNetwork] = useActiveNetworkVersion() + useEffect(() => { async function fetchAll() { // fetch all data for each pool - const data = await POOL_HIDE.reduce(async (accumP: Promise<{ [key: number]: ChartDayData }>, address) => { - const accum = await accumP - const { data } = await fetchPoolChartData(address, dataClient) - if (!data) return accum - dispatch(updatePoolChartData({ poolAddress: address, chartData: data, networkId: SupportedNetwork.ETHEREUM })) - data.map((poolDayData: PoolChartEntry) => { - const { date, totalValueLockedUSD, volumeUSD } = poolDayData - const roundedDate = date - if (!accum[roundedDate]) { - accum[roundedDate] = { - tvlUSD: 0, - date: roundedDate, - volumeUSD: 0, + const data = await POOL_HIDE[currentNetwork.id].reduce( + async (accumP: Promise<{ [key: number]: ChartDayData }>, address) => { + const accum = await accumP + const { data } = await fetchPoolChartData(address, dataClient) + if (!data) return accum + dispatch(updatePoolChartData({ poolAddress: address, chartData: data, networkId: SupportedNetwork.ETHEREUM })) + data.map((poolDayData: PoolChartEntry) => { + const { date, totalValueLockedUSD, volumeUSD } = poolDayData + const roundedDate = date + if (!accum[roundedDate]) { + accum[roundedDate] = { + tvlUSD: 0, + date: roundedDate, + volumeUSD: 0, + } } - } - accum[roundedDate].tvlUSD = accum[roundedDate].tvlUSD + totalValueLockedUSD - accum[roundedDate].volumeUSD = accum[roundedDate].volumeUSD + volumeUSD - }) - return accum - }, Promise.resolve({} as { [key: number]: ChartDayData })) + accum[roundedDate].tvlUSD = accum[roundedDate].tvlUSD + totalValueLockedUSD + accum[roundedDate].volumeUSD = accum[roundedDate].volumeUSD + volumeUSD + }) + return accum + }, + Promise.resolve({} as { [key: number]: ChartDayData }) + ) // Format as array setChartData(data) @@ -70,13 +76,13 @@ export function useDerivedOffsetTVLHistory() { if (!chartData) { fetchAll() } - }, [chartData, dataClient, dispatch]) + }, [chartData, currentNetwork.id, dataClient, dispatch]) return chartData } // # of pools to include in historical chart volume and TVL data -const PoolCountAggregate = 20 +const POOL_COUNT_FOR_AGGREGATE = 20 /** * Derives historical TVL data for top 50 pools. @@ -87,7 +93,9 @@ export function useDerivedProtocolTVLHistory() { const { addresses } = useTopPoolAddresses() const dispatch = useDispatch() - const [chartData, setChartData] = useState(undefined) + const [currentNetwork] = useActiveNetworkVersion() + + const [chartData, setChartData] = useState<{ [key: string]: ChartDayData[] } | undefined>(undefined) useEffect(() => { async function fetchAll() { @@ -96,15 +104,15 @@ export function useDerivedProtocolTVLHistory() { } // fetch all data for each pool const data = await addresses - .slice(0, PoolCountAggregate) // @TODO: must be replaced with aggregate with subgraph data fixed. + .slice(0, POOL_COUNT_FOR_AGGREGATE) // @TODO: must be replaced with aggregate with subgraph data fixed. .reduce(async (accumP: Promise<{ [key: number]: ChartDayData }>, address) => { const accum = await accumP - if (POOL_HIDE.includes(address)) { + if (POOL_HIDE[currentNetwork.id].includes(address)) { return accum } const { data } = await fetchPoolChartData(address, dataClient) if (!data) return accum - dispatch(updatePoolChartData({ poolAddress: address, chartData: data, networkId: SupportedNetwork.ETHEREUM })) + dispatch(updatePoolChartData({ poolAddress: address, chartData: data, networkId: currentNetwork.id })) data.map((poolDayData: PoolChartEntry) => { const { date, totalValueLockedUSD, volumeUSD } = poolDayData const roundedDate = date @@ -122,13 +130,13 @@ export function useDerivedProtocolTVLHistory() { }, Promise.resolve({} as { [key: number]: ChartDayData })) // Format as array - setChartData(Object.values(data)) + setChartData({ ...chartData, [currentNetwork.id]: Object.values(data) }) } if (!chartData) { fetchAll() } - }, [addresses, chartData, dataClient, dispatch]) + }, [addresses, chartData, currentNetwork.id, dataClient, dispatch]) - return chartData + return chartData?.[currentNetwork.id] } diff --git a/src/data/protocol/overview.ts b/src/data/protocol/overview.ts index 40c795fc..08d2d7fd 100644 --- a/src/data/protocol/overview.ts +++ b/src/data/protocol/overview.ts @@ -73,7 +73,7 @@ export function useFetchProtocolData( const parsed48 = data48?.factories?.[0] const formattedData: ProtocolData | undefined = useMemo(() => { - if (anyError || anyLoading || !parsed || !blocks || !tvlOffset) { + if (anyError || anyLoading || !parsed || !blocks || tvlOffset === undefined) { return undefined } diff --git a/src/state/pools/updater.ts b/src/state/pools/updater.ts index 0721f4c3..b7e2ce2c 100644 --- a/src/state/pools/updater.ts +++ b/src/state/pools/updater.ts @@ -3,9 +3,11 @@ import { useEffect, useMemo } from 'react' import { useTopPoolAddresses } from 'data/pools/topPools' import { usePoolDatas } from 'data/pools/poolData' import { POOL_HIDE } from '../../constants' +import { useActiveNetworkVersion } from 'state/application/hooks' export default function Updater(): null { // updaters + const [currentNetwork] = useActiveNetworkVersion() const updatePoolData = useUpdatePoolData() const addPoolKeys = useAddPoolKeys() @@ -22,8 +24,8 @@ export default function Updater(): null { // load data for pools we need to hide useEffect(() => { - addPoolKeys(POOL_HIDE) - }, [addPoolKeys]) + addPoolKeys(POOL_HIDE[currentNetwork.id]) + }, [addPoolKeys, currentNetwork.id]) // detect for which addresses we havent loaded pool data yet const unfetchedPoolAddresses = useMemo(() => {