From 28bf95123e5dc6a6b2629f607ca204478a086b25 Mon Sep 17 00:00:00 2001 From: Justin Domingue Date: Mon, 12 Jul 2021 15:56:55 -0700 Subject: [PATCH] load pool data for each tier to determine state (#2026) --- src/components/FeeSelector/index.tsx | 14 +++++------ src/hooks/useFeeTierDistribution.ts | 37 ++++++++++++++++++++-------- src/pages/AddLiquidity/index.tsx | 4 +-- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx index 685dd3aff..0294ce66c 100644 --- a/src/components/FeeSelector/index.tsx +++ b/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 ( - {Boolean(percentage) ? {percentage?.toFixed(0)}% select : Not created} + {percentage !== undefined ? {percentage?.toFixed(0)}% select : Not created} ) @@ -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) diff --git a/src/hooks/useFeeTierDistribution.ts b/src/hooks/useFeeTierDistribution.ts index 73ca8bee4..e5e29830c 100644 --- a/src/hooks/useFeeTierDistribution.ts +++ b/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) { diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 62e0fb7f0..092b1b955 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/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} /> {' '}