load pool data for each tier to determine state (#2026)

src/components/FeeSelector/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { Token } from '@uniswap/sdk-core'
+import { Currency } from '@uniswap/sdk-core'
 import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'
 import { DynamicSection } from 'pages/AddLiquidity/styled'
@@ -62,7 +62,7 @@ const FeeTierPercentageBadge = ({ percentage }: { percentage: number | undefined
   return (
     <Badge>
       <TYPE.label fontSize={12}>
-        {Boolean(percentage) ? <Trans>{percentage?.toFixed(0)}% select</Trans> : <Trans>Not created</Trans>}
+        {percentage !== undefined ? <Trans>{percentage?.toFixed(0)}% select</Trans> : <Trans>Not created</Trans>}
       </TYPE.label>
     </Badge>
   )
@@ -72,16 +72,16 @@ export default function FeeSelector({
   disabled = false,
   feeAmount,
   handleFeePoolSelect,
-  token0,
-  token1,
+  currencyA,
+  currencyB,
 }: {
   disabled?: boolean
   feeAmount?: FeeAmount
   handleFeePoolSelect: (feeAmount: FeeAmount) => void
-  token0?: Token | undefined
-  token1?: Token | undefined
+  currencyA?: Currency | undefined
+  currencyB?: Currency | undefined
 }) {
-  const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(token0, token1)
+  const { isLoading, isError, largestUsageFeeTier, distributions } = useFeeTierDistribution(currencyA, currencyB)
 
   const [showOptions, setShowOptions] = useState(false)
   const [pulsing, setPulsing] = useState(false)

src/hooks/useFeeTierDistribution.ts

@@ -1,5 +1,5 @@
 import { FeeAmount } from '@uniswap/v3-sdk'
-import { Token } from '@uniswap/sdk-core'
+import { Token, Currency } from '@uniswap/sdk-core'
 import { useFeeTierDistributionQuery } from 'state/data/enhanced'
 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { reduce } from 'lodash'
@@ -8,6 +8,7 @@ import ReactGA from 'react-ga'
 import { useMemo } from 'react'
 import { FeeTierDistributionQuery } from 'state/data/generated'
 import ms from 'ms.macro'
+import { PoolState, usePool } from './usePools'
 
 // maximum number of blocks past which we consider the data stale
 const MAX_DATA_BLOCK_AGE = 10
@@ -25,8 +26,19 @@ interface FeeTierDistribution {
   }
 }
 
-export function useFeeTierDistribution(token0: Token | undefined, token1: Token | undefined): FeeTierDistribution {
-  const { isFetching, isLoading, isUninitialized, isError, distributions } = usePoolTVL(token0, token1)
+export function useFeeTierDistribution(
+  currencyA: Currency | undefined,
+  currencyB: Currency | undefined
+): FeeTierDistribution {
+  const { isFetching, isLoading, isUninitialized, isError, distributions } = usePoolTVL(
+    currencyA?.wrapped,
+    currencyB?.wrapped
+  )
+
+  // fetch all pool states to determine pool state
+  const [poolStateLow] = usePool(currencyA, currencyB, FeeAmount.LOW)
+  const [poolStateMedium] = usePool(currencyA, currencyB, FeeAmount.MEDIUM)
+  const [poolStateHigh] = usePool(currencyA, currencyB, FeeAmount.HIGH)
 
   return useMemo(() => {
     if (isLoading || isFetching || isUninitialized || isError || !distributions) {
@@ -43,13 +55,18 @@ export function useFeeTierDistribution(token0: Token | undefined, token1: Token
       .reduce((a: FeeAmount, b: FeeAmount) => ((distributions[a] ?? 0) > (distributions[b] ?? 0) ? a : b), -1)
 
     const percentages =
-      !isLoading && !isError && distributions
+      !isLoading &&
+      !isError &&
+      distributions &&
+      poolStateLow !== PoolState.LOADING &&
+      poolStateMedium !== PoolState.LOADING &&
+      poolStateHigh !== PoolState.LOADING
         ? {
-            [FeeAmount.LOW]: distributions[FeeAmount.LOW] ? (distributions[FeeAmount.LOW] ?? 0) * 100 : undefined,
-            [FeeAmount.MEDIUM]: distributions[FeeAmount.MEDIUM]
-              ? (distributions[FeeAmount.MEDIUM] ?? 0) * 100
-              : undefined,
-            [FeeAmount.HIGH]: distributions[FeeAmount.HIGH] ? (distributions[FeeAmount.HIGH] ?? 0) * 100 : undefined,
+            [FeeAmount.LOW]: poolStateLow === PoolState.EXISTS ? (distributions[FeeAmount.LOW] ?? 0) * 100 : undefined,
+            [FeeAmount.MEDIUM]:
+              poolStateMedium === PoolState.EXISTS ? (distributions[FeeAmount.MEDIUM] ?? 0) * 100 : undefined,
+            [FeeAmount.HIGH]:
+              poolStateHigh === PoolState.EXISTS ? (distributions[FeeAmount.HIGH] ?? 0) * 100 : undefined,
           }
         : undefined
 
@@ -59,7 +76,7 @@ export function useFeeTierDistribution(token0: Token | undefined, token1: Token
       distributions: percentages,
       largestUsageFeeTier: largestUsageFeeTier === -1 ? undefined : largestUsageFeeTier,
     }
-  }, [isLoading, isFetching, isUninitialized, isError, distributions])
+  }, [isLoading, isFetching, isUninitialized, isError, distributions, poolStateLow, poolStateMedium, poolStateHigh])
 }
 
 function usePoolTVL(token0: Token | undefined, token1: Token | undefined) {

src/pages/AddLiquidity/index.tsx

@@ -652,8 +652,8 @@ export default function AddLiquidity({
                         disabled={!currencyB || !currencyA}
                         feeAmount={feeAmount}
                         handleFeePoolSelect={handleFeePoolSelect}
-                        token0={currencyA?.wrapped}
-                        token1={currencyB?.wrapped}
+                        currencyA={currencyA ?? undefined}
+                        currencyB={currencyB ?? undefined}
                       />
                     </AutoColumn>{' '}
                   </>