chart clean up

src/components/Search/index.tsx

@@ -157,6 +157,8 @@ const Search = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
   const history = useHistory()
   const [activeNetwork] = useActiveNetworkVersion()
 
+  const [currentNetwork] = useActiveNetworkVersion()
+
   const ref = useRef<HTMLInputElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const textRef = useRef<HTMLDivElement>(null)
@@ -277,7 +279,7 @@ const Search = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
               </HideSmall>
             </ResponsiveGrid>
             {tokensForList
-              .filter((t) => !TOKEN_HIDE.includes(t.address))
+              .filter((t) => !TOKEN_HIDE[currentNetwork.id].includes(t.address))
               .slice(0, tokensShown)
               .map((t, i) => {
                 return (
@@ -344,7 +346,7 @@ const Search = ({ ...rest }: React.HTMLAttributes<HTMLDivElement>) => {
               </HideSmall>
             </ResponsiveGrid>
             {poolForList
-              .filter((p) => !POOL_HIDE.includes(p.address))
+              .filter((p) => !POOL_HIDE[currentNetwork.id].includes(p.address))
               .slice(0, poolsShown)
               .map((p, i) => {
                 return (

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) => {

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%;
@@ -127,6 +128,8 @@ export default function TokenTable({
   // theming
   const theme = useTheme()
 
+  const [currentNetwork] = useActiveNetworkVersion()
+
   // for sorting
   const [sortField, setSortField] = useState(SORT_FIELD.tvlUSD)
   const [sortDirection, setSortDirection] = useState<boolean>(true)
@@ -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) => {

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)
 
@@ -14,21 +15,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

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<TopPoolsResponse>(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,

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,

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) => {
@@ -36,32 +37,36 @@ export function useTVLOffset() {
  */
 export function useDerivedOffsetTVLHistory() {
   const dataClient = useDataClient()
+  const [currentNetwork] = useActiveNetworkVersion()
   const [chartData, setChartData] = useState<{ [key: number]: ChartDayData } | undefined>(undefined)
   const dispatch = useDispatch<AppDispatch>()
 
   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,24 +75,25 @@ 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 = 30
 
 /**
  * Derives historical TVL data for top 50 pools.
  * @returns Chart data for aggregate Uniswap TVL over time.
  */
 export function useDerivedProtocolTVLHistory() {
   const dataClient = useDataClient()
+  const [currentNetwork] = useActiveNetworkVersion()
   const { addresses } = useTopPoolAddresses()
   const dispatch = useDispatch<AppDispatch>()
 
-  const [chartData, setChartData] = useState<ChartDayData[] | undefined>(undefined)
+  const [chartData, setChartData] = useState<{ [key: string]: ChartDayData[] } | undefined>(undefined)
 
   useEffect(() => {
     async function fetchAll() {
@@ -96,15 +102,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 +128,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) {
+    if (!chartData?.[currentNetwork.id]) {
       fetchAll()
     }
-  }, [addresses, chartData, dataClient, dispatch])
+  }, [addresses, chartData, currentNetwork.id, dataClient, dispatch])
 
-  return chartData
+  return chartData?.[currentNetwork.id]
 }

src/state/pools/updater.ts

@@ -3,8 +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 {
+  const [currentNetwork] = useActiveNetworkVersion()
+
   // updaters
   const updatePoolData = useUpdatePoolData()
   const addPoolKeys = useAddPoolKeys()
@@ -22,8 +25,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(() => {