From ba4abb305bf5a278ff731fabde496595e2a37bb2 Mon Sep 17 00:00:00 2001 From: David W3stside Date: Fri, 10 Dec 2021 16:06:23 +0000 Subject: [PATCH 1/5] re-enable fiat impact --- src/custom/hooks/usePriceImpact/index.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/custom/hooks/usePriceImpact/index.ts b/src/custom/hooks/usePriceImpact/index.ts index 7638a96c1..849a48545 100644 --- a/src/custom/hooks/usePriceImpact/index.ts +++ b/src/custom/hooks/usePriceImpact/index.ts @@ -15,16 +15,14 @@ export interface PriceImpact { } export default function usePriceImpact({ abTrade, parsedAmounts, isWrapping }: PriceImpactParams): PriceImpact { - /* const fiatPriceImpact = */ useFiatValuePriceImpact(parsedAmounts) - // TODO: remove this - testing only - forces fallback price impact + const fiatPriceImpact = useFiatValuePriceImpact(parsedAmounts) const { impact: fallbackPriceImpact, error, loading, - } = useFallbackPriceImpact({ abTrade, fiatPriceImpact: undefined, isWrapping }) + } = useFallbackPriceImpact({ abTrade: fiatPriceImpact ? undefined : abTrade, isWrapping }) - const priceImpact = /* fiatPriceImpact || */ fallbackPriceImpact + const priceImpact = fiatPriceImpact || fallbackPriceImpact - // TODO: remove this - testing only - forces fallback return { priceImpact, error, loading } } From 2d3e2b40a45459ebf25a2b70bd1d9dc816454777 Mon Sep 17 00:00:00 2001 From: David W3stside Date: Fri, 10 Dec 2021 16:06:43 +0000 Subject: [PATCH 2/5] pass loader from useFallbackPriceImpact 1. bail out early on do not calc --- src/custom/hooks/usePriceImpact/types.ts | 3 +-- .../usePriceImpact/useFallbackPriceImpact.ts | 23 ++++++++++++------ .../hooks/usePriceImpact/useQuoteAndSwap.ts | 24 +++++-------------- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/src/custom/hooks/usePriceImpact/types.ts b/src/custom/hooks/usePriceImpact/types.ts index 20bc88b3f..cd03e7fe9 100644 --- a/src/custom/hooks/usePriceImpact/types.ts +++ b/src/custom/hooks/usePriceImpact/types.ts @@ -1,5 +1,5 @@ import TradeGp from 'state/swap/TradeGp' -import { CurrencyAmount, Currency, Percent } from '@uniswap/sdk-core' +import { CurrencyAmount, Currency } from '@uniswap/sdk-core' export type ParsedAmounts = { INPUT: CurrencyAmount | undefined @@ -8,6 +8,5 @@ export type ParsedAmounts = { export interface FallbackPriceImpactParams { abTrade?: TradeGp - fiatPriceImpact?: Percent isWrapping: boolean } diff --git a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts index e548f43e7..bb1671714 100644 --- a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts +++ b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts @@ -33,34 +33,43 @@ function _getBaTradeParams({ abTrade, sellToken, buyToken }: SwapParams) { } function _getBaTradeParsedAmount(abTrade: TradeGp | undefined, shouldCalculate: boolean) { - if (!shouldCalculate || !abTrade) return undefined + if (!shouldCalculate) return undefined // return the AB Trade's output amount WITHOUT fee - return abTrade.outputAmountWithoutFee + return abTrade?.outputAmountWithoutFee } -export default function useFallbackPriceImpact({ abTrade, fiatPriceImpact, isWrapping }: FallbackPriceImpactParams) { +export default function useFallbackPriceImpact({ abTrade, isWrapping }: FallbackPriceImpactParams) { const { typedValue, INPUT: { currencyId: sellToken }, OUTPUT: { currencyId: buyToken }, } = useSwapState() + const [loading, setLoading] = useState(false) + // Should we even calc this? Check if fiatPriceImpact exists OR user is wrapping token - const shouldCalculate = !Boolean(fiatPriceImpact) || !isWrapping + const shouldCalculate = Boolean(abTrade && !isWrapping) + + // to bail out early + useEffect(() => { + !shouldCalculate && setLoading(false) + }, [shouldCalculate]) // Calculate the necessary params to get the inverse trade impact const { parsedAmount, outputCurrency, ...swapQuoteParams } = useMemo( () => ({ - parsedAmount: _getBaTradeParsedAmount(abTrade, shouldCalculate), ..._getBaTradeParams({ abTrade, sellToken, buyToken }), + parsedAmount: _getBaTradeParsedAmount(abTrade, shouldCalculate), }), [abTrade, buyToken, sellToken, shouldCalculate] ) - const { quote, loading } = useCalculateQuote({ - amountAtoms: parsedAmount?.quotient.toString(), + const { quote } = useCalculateQuote({ ...swapQuoteParams, + amountAtoms: parsedAmount?.quotient.toString(), + loading, + setLoading, }) // Calculate BA trade diff --git a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts index d50392f2d..f1fc54f1c 100644 --- a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts +++ b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts @@ -17,7 +17,8 @@ import { SupportedChainId } from 'constants/chains' import { DEFAULT_DECIMALS } from 'constants/index' import { QuoteError } from 'state/price/actions' import { isWrappingTrade } from 'state/swap/utils' -import { useSwapState } from 'state/swap/hooks' + +type WithLoading = { loading: boolean; setLoading: React.Dispatch> } type ExactInSwapParams = { parsedAmount: CurrencyAmount | undefined @@ -31,18 +32,10 @@ type GetQuoteParams = { buyToken?: string | null fromDecimals?: number toDecimals?: number -} +} & WithLoading type FeeQuoteParamsWithError = FeeQuoteParams & { error?: QuoteError } -function useOnSwapParamChange({ onChangeCb, predicate }: { predicate: T; onChangeCb: (...params: any[]) => any }) { - const { typedValue, INPUT, OUTPUT, independentField } = useSwapState() - - useEffect(() => { - Boolean(predicate) && onChangeCb - }, [typedValue, INPUT.currencyId, OUTPUT.currencyId, independentField, predicate, onChangeCb]) -} - export function useCalculateQuote(params: GetQuoteParams) { const { amountAtoms: amount, @@ -50,18 +43,13 @@ export function useCalculateQuote(params: GetQuoteParams) { buyToken, fromDecimals = DEFAULT_DECIMALS, toDecimals = DEFAULT_DECIMALS, + loading, + setLoading, } = params const { chainId: preChain } = useActiveWeb3React() const { account } = useWalletInfo() const [quote, setLocalQuote] = useState() - const [loading, setLoading] = useState(false) - - // listens to changed swap params and calls onChangeCb based on predicate Boolean(predicate) - useOnSwapParamChange({ - onChangeCb: () => setLoading(true), - predicate: amount, - }) useEffect(() => { const chainId = supportedChainId(preChain) @@ -116,7 +104,7 @@ export function useCalculateQuote(params: GetQuoteParams) { setLocalQuote(quoteError) }) .finally(() => setLoading(false)) - }, [amount, account, preChain, buyToken, sellToken, toDecimals, fromDecimals]) + }, [amount, account, preChain, buyToken, sellToken, toDecimals, fromDecimals, setLoading]) return { quote, loading, setLoading } } From c2f33750fcfd312e09950c689c1ece041f7eb76e Mon Sep 17 00:00:00 2001 From: David W3stside Date: Mon, 13 Dec 2021 09:04:48 +0000 Subject: [PATCH 3/5] error undefined if fiat impact --- src/custom/hooks/usePriceImpact/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/hooks/usePriceImpact/index.ts b/src/custom/hooks/usePriceImpact/index.ts index 849a48545..28d8b1f4d 100644 --- a/src/custom/hooks/usePriceImpact/index.ts +++ b/src/custom/hooks/usePriceImpact/index.ts @@ -24,5 +24,5 @@ export default function usePriceImpact({ abTrade, parsedAmounts, isWrapping }: P const priceImpact = fiatPriceImpact || fallbackPriceImpact - return { priceImpact, error, loading } + return { priceImpact, error: fiatPriceImpact ? undefined : error, loading } } From 8b17ca2b6f7b1e9a80d19208f9dd2d716731ef13 Mon Sep 17 00:00:00 2001 From: David W3stside Date: Mon, 13 Dec 2021 11:30:48 +0000 Subject: [PATCH 4/5] debounce --- src/custom/components/SwapWarnings/index.tsx | 9 ++++----- src/custom/pages/Swap/SwapMod.tsx | 5 ++++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/custom/components/SwapWarnings/index.tsx b/src/custom/components/SwapWarnings/index.tsx index 9f7c27c96..488f0e2d7 100644 --- a/src/custom/components/SwapWarnings/index.tsx +++ b/src/custom/components/SwapWarnings/index.tsx @@ -8,7 +8,7 @@ import { useHighFeeWarning } from 'state/swap/hooks' import TradeGp from 'state/swap/TradeGp' import { AuxInformationContainer } from '../CurrencyInputPanel' import { darken } from 'polished' -import useDebounceWithForceUpdate from '@src/custom/hooks/useDebounceWithForceUpdate' +import useDebounce from 'hooks/useDebounce' interface HighFeeContainerProps { padding?: string @@ -160,11 +160,10 @@ export const HighFeeWarning = (props: WarningProps) => { } export const NoImpactWarning = (props: WarningProps) => { - const { acceptedStatus, acceptWarningCb, hide, trade } = props + const { acceptedStatus, acceptWarningCb, hide } = props const theme = useContext(ThemeContext) - // TODO: change this - probably not the best way to do this.. - // TODO: should likely make a global flag indiciating ABA impact loading - const debouncedHide = useDebounceWithForceUpdate(hide, 2000, trade) + + const debouncedHide = useDebounce(hide, 2000) const [bgColour, textColour] = [LOW_TIER_FEE.colour, darken(0.7, HIGH_TIER_FEE.colour)] if (!!debouncedHide) return null diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx index 92db290b7..8c2e782e5 100644 --- a/src/custom/pages/Swap/SwapMod.tsx +++ b/src/custom/pages/Swap/SwapMod.tsx @@ -264,6 +264,9 @@ export default function Swap({ const { feeWarningAccepted, setFeeWarningAccepted } = useHighFeeWarning(trade) const { impactWarningAccepted, setImpactWarningAccepted } = useUnknownImpactWarning(priceImpactParams) + // don't show the unknown impact warning on: no trade, wrapping native, no error, or it's loading impact + const hideUnknownImpactWarning = !trade || !!onWrap || !priceImpactError || priceImpactLoading + // const fiatValueInput = useUSDCValue(parsedAmounts[Field.INPUT]) // const fiatValueOutput = useUSDCValue(parsedAmounts[Field.OUTPUT]) const fiatValueInput = useHigherUSDValue(parsedAmounts[Field.INPUT]) @@ -775,7 +778,7 @@ export default function Swap({ /> setImpactWarningAccepted((state) => !state) : undefined} width="99%" From 0b9ee34f2d0440c8eaf8d67901846203e0aca5a8 Mon Sep 17 00:00:00 2001 From: David W3stside Date: Mon, 13 Dec 2021 19:17:08 +0000 Subject: [PATCH 5/5] pr comments --- src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts | 6 ++++-- src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts index bb1671714..4fd9f2b10 100644 --- a/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts +++ b/src/custom/hooks/usePriceImpact/useFallbackPriceImpact.ts @@ -49,11 +49,13 @@ export default function useFallbackPriceImpact({ abTrade, isWrapping }: Fallback const [loading, setLoading] = useState(false) // Should we even calc this? Check if fiatPriceImpact exists OR user is wrapping token - const shouldCalculate = Boolean(abTrade && !isWrapping) + const shouldCalculate = !!abTrade && !isWrapping // to bail out early useEffect(() => { - !shouldCalculate && setLoading(false) + if (!shouldCalculate) { + setLoading(false) + } }, [shouldCalculate]) // Calculate the necessary params to get the inverse trade impact diff --git a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts index f1fc54f1c..a77d0b094 100644 --- a/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts +++ b/src/custom/hooks/usePriceImpact/useQuoteAndSwap.ts @@ -18,7 +18,7 @@ import { DEFAULT_DECIMALS } from 'constants/index' import { QuoteError } from 'state/price/actions' import { isWrappingTrade } from 'state/swap/utils' -type WithLoading = { loading: boolean; setLoading: React.Dispatch> } +type WithLoading = { loading: boolean; setLoading: (state: boolean) => void } type ExactInSwapParams = { parsedAmount: CurrencyAmount | undefined