fix: unknown gas should be reflected at confirm screen time too (#8164)

shapeshift · Nov 21, 2024 · 0e9dad8 · 0e9dad8
1 parent 4b260bb
commit 0e9dad8
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 74 deletions.
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx
@@ -21,7 +21,7 @@ import {
   selectConfirmedTradeExecutionState,
   selectLastHopBuyAsset,
   selectQuoteSellAmountUserCurrency,
-  selectTotalNetworkFeeUserCurrencyPrecision,
+  selectTotalNetworkFeeUserCurrency,
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector } from 'state/store'
@@ -36,7 +36,7 @@ export const Footer: FC<FooterProps> = ({ isLoading, handleSubmit }) => {
   const swapperName = useAppSelector(selectActiveSwapperName)
   const lastHopBuyAsset = useAppSelector(selectLastHopBuyAsset)
   const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState)
-  const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
+  const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrency)
   const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
 
   const networkFeeToTradeRatioPercentage = useMemo(

diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx
@@ -27,14 +27,14 @@ import { Amount } from 'components/Amount/Amount'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import { ProtocolIcon } from 'components/Icons/Protocol'
 import { SlippageIcon } from 'components/Icons/Slippage'
-import { RawText } from 'components/Text'
+import { RawText, Text } from 'components/Text'
 import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
 import { fromBaseUnit } from 'lib/math'
 import { assertUnreachable } from 'lib/utils'
 import {
   selectActiveQuote,
   selectHopExecutionMetadata,
-  selectHopNetworkFeeUserCurrencyPrecision,
+  selectHopNetworkFeeUserCurrency,
   selectHopTotalProtocolFeesFiatPrecision,
   selectIsActiveQuoteMultiHop,
 } from 'state/slices/tradeQuoteSlice/selectors'
@@ -75,13 +75,13 @@ export const Hop = ({
     number: { toCrypto },
   } = useLocaleFormatter()
   const translate = useTranslate()
-  const hopTotalProtocolFeesFiatPrecisionFilter = useMemo(() => {
+  const hopTotalProtocolFeesFiatUserCurrencyFilter = useMemo(() => {
     return {
       hopIndex,
     }
   }, [hopIndex])
-  const networkFeeFiatPrecision = useAppSelector(state =>
-    selectHopNetworkFeeUserCurrencyPrecision(state, hopTotalProtocolFeesFiatPrecisionFilter),
+  const networkFeeFiatUserCurrency = useAppSelector(state =>
+    selectHopNetworkFeeUserCurrency(state, hopTotalProtocolFeesFiatUserCurrencyFilter),
   )
   const protocolFeeFiatPrecision = useAppSelector(state =>
     selectHopTotalProtocolFeesFiatPrecision(state, hopIndex),
@@ -298,7 +298,13 @@ export const Hop = ({
               <Flex color='text.subtle'>
                 <FaGasPump />
               </Flex>
-              <Amount.Fiat value={networkFeeFiatPrecision ?? '0'} display='inline' />
+              {!networkFeeFiatUserCurrency ? (
+                <Tooltip label={translate('trade.tooltip.continueSwapping')}>
+                  <Text translation={'trade.unknownGas'} fontSize='sm' />
+                </Tooltip>
+              ) : (
+                <Amount.Fiat value={networkFeeFiatUserCurrency} display='inline' />
+              )}
             </Flex>
           </Tooltip>
 

diff --git a/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx b/src/components/MultiHopTrade/components/TradeInput/components/ConfirmSummary.tsx
@@ -40,7 +40,7 @@ import {
   selectIsAnySwapperQuoteAvailable,
   selectIsAnyTradeQuoteLoading,
   selectShouldShowTradeQuoteOrAwaitInput,
-  selectTotalNetworkFeeUserCurrencyPrecision,
+  selectTotalNetworkFeeUserCurrency,
   selectTotalProtocolFeeByAsset,
   selectTradeQuoteAffiliateFeeAfterDiscountUserCurrency,
   selectTradeQuoteRequestErrors,
@@ -82,7 +82,7 @@ export const ConfirmSummary = ({
   } = useWallet()
 
   const buyAmountAfterFeesCryptoPrecision = useAppSelector(selectBuyAmountAfterFeesCryptoPrecision)
-  const totalNetworkFeeFiatPrecision = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
+  const totalNetworkFeeFiatPrecision = useAppSelector(selectTotalNetworkFeeUserCurrency)
   const isManualReceiveAddressValidating = useAppSelector(selectIsManualReceiveAddressValidating)
   const isManualReceiveAddressEditing = useAppSelector(selectIsManualReceiveAddressEditing)
   const isManualReceiveAddressValid = useAppSelector(selectIsManualReceiveAddressValid)

diff --git a/src/state/slices/tradeQuoteSlice/helpers.ts b/src/state/slices/tradeQuoteSlice/helpers.ts
@@ -12,7 +12,7 @@ import { sumProtocolFeesToDenom } from 'state/slices/tradeQuoteSlice/utils'
 
 import type { ActiveQuoteMeta } from './types'
 
-export const getHopTotalNetworkFeeUserCurrencyPrecision = (
+export const getHopTotalNetworkFeeUserCurrency = (
   networkFeeCryptoBaseUnit: string | undefined,
   feeAsset: Asset,
   getFeeAssetUserCurrencyRate: (feeAssetId: AssetId) => string,
@@ -45,7 +45,7 @@ export const getTotalNetworkFeeUserCurrencyPrecision = (
 
   return quote.steps.reduce((acc, step) => {
     const feeAsset = getFeeAsset(step.sellAsset.assetId)
-    const networkFeeFiatPrecision = getHopTotalNetworkFeeUserCurrencyPrecision(
+    const networkFeeFiatPrecision = getHopTotalNetworkFeeUserCurrency(
       step.feeData.networkFeeCryptoBaseUnit,
       feeAsset,
       getFeeAssetRate,

diff --git a/src/state/slices/tradeQuoteSlice/selectors.ts b/src/state/slices/tradeQuoteSlice/selectors.ts
@@ -41,7 +41,7 @@ import {
 import {
   getActiveQuoteMetaOrDefault,
   getBuyAmountAfterFeesCryptoPrecision,
-  getHopTotalNetworkFeeUserCurrencyPrecision,
+  getHopTotalNetworkFeeUserCurrency,
   getHopTotalProtocolFeesFiatPrecision,
   getTotalProtocolFeeByAsset,
   sortTradeQuotes,
@@ -393,81 +393,75 @@ export const selectSecondHopNetworkFeeCryptoBaseUnit: Selector<ReduxState, strin
 export const selectLastHopNetworkFeeCryptoBaseUnit: Selector<ReduxState, string | undefined> =
   createSelector(selectLastHop, lastHop => lastHop?.feeData.networkFeeCryptoBaseUnit)
 
-export const selectFirstHopNetworkFeeUserCurrencyPrecision: Selector<
-  ReduxState,
-  string | undefined
-> = createSelector(
-  selectFirstHop,
-  selectFirstHopSellFeeAsset,
-  selectMarketDataUserCurrency,
-  (tradeQuoteStep, feeAsset, marketData) => {
-    if (!tradeQuoteStep) return
-
-    if (feeAsset === undefined) {
-      throw Error(`missing fee asset for assetId ${tradeQuoteStep.sellAsset.assetId}`)
-    }
-
-    const getFeeAssetUserCurrencyRate = () => {
-      return marketData[feeAsset?.assetId ?? '']?.price ?? '0'
-    }
+export const selectFirstHopNetworkFeeUserCurrency: Selector<ReduxState, string | undefined> =
+  createSelector(
+    selectFirstHop,
+    selectFirstHopSellFeeAsset,
+    selectMarketDataUserCurrency,
+    (tradeQuoteStep, feeAsset, marketData) => {
+      if (!tradeQuoteStep) return
+
+      if (feeAsset === undefined) {
+        throw Error(`missing fee asset for assetId ${tradeQuoteStep.sellAsset.assetId}`)
+      }
 
-    return getHopTotalNetworkFeeUserCurrencyPrecision(
-      tradeQuoteStep.feeData.networkFeeCryptoBaseUnit,
-      feeAsset,
-      getFeeAssetUserCurrencyRate,
-    )?.toString()
-  },
-)
+      const getFeeAssetUserCurrencyRate = () => {
+        return marketData[feeAsset?.assetId ?? '']?.price ?? '0'
+      }
 
-export const selectSecondHopNetworkFeeUserCurrencyPrecision: Selector<
-  ReduxState,
-  string | undefined
-> = createSelector(
-  selectSecondHop,
-  selectSecondHopSellFeeAsset,
-  selectMarketDataUserCurrency,
-  (tradeQuoteStep, feeAsset, marketData) => {
-    if (!tradeQuoteStep) return
+      return getHopTotalNetworkFeeUserCurrency(
+        tradeQuoteStep.feeData.networkFeeCryptoBaseUnit,
+        feeAsset,
+        getFeeAssetUserCurrencyRate,
+      )?.toString()
+    },
+  )
 
-    if (feeAsset === undefined) {
-      throw Error(`missing fee asset for assetId ${tradeQuoteStep.sellAsset.assetId}`)
-    }
-    const getFeeAssetUserCurrencyRate = () => {
-      return marketData[feeAsset?.assetId ?? '']?.price ?? '0'
-    }
+export const selectSecondHopNetworkFeeUserCurrency: Selector<ReduxState, string | undefined> =
+  createSelector(
+    selectSecondHop,
+    selectSecondHopSellFeeAsset,
+    selectMarketDataUserCurrency,
+    (tradeQuoteStep, feeAsset, marketData) => {
+      if (!tradeQuoteStep) return
+
+      if (feeAsset === undefined) {
+        throw Error(`missing fee asset for assetId ${tradeQuoteStep.sellAsset.assetId}`)
+      }
+      const getFeeAssetUserCurrencyRate = () => {
+        return marketData[feeAsset?.assetId ?? '']?.price ?? '0'
+      }
 
-    return getHopTotalNetworkFeeUserCurrencyPrecision(
-      tradeQuoteStep.feeData.networkFeeCryptoBaseUnit,
-      feeAsset,
-      getFeeAssetUserCurrencyRate,
-    )?.toString()
-  },
-)
+      return getHopTotalNetworkFeeUserCurrency(
+        tradeQuoteStep.feeData.networkFeeCryptoBaseUnit,
+        feeAsset,
+        getFeeAssetUserCurrencyRate,
+      )?.toString()
+    },
+  )
 
-export const selectHopNetworkFeeUserCurrencyPrecision = createDeepEqualOutputSelector(
-  selectFirstHopNetworkFeeUserCurrencyPrecision,
-  selectSecondHopNetworkFeeUserCurrencyPrecision,
+export const selectHopNetworkFeeUserCurrency = createDeepEqualOutputSelector(
+  selectFirstHopNetworkFeeUserCurrency,
+  selectSecondHopNetworkFeeUserCurrency,
   selectHopIndexParamFromRequiredFilter,
-  (firstHopNetworkFeeUserCurrencyPrecision, secondHopNetworkFeeUserCurrencyPrecision, hopIndex) => {
-    return hopIndex === 0
-      ? firstHopNetworkFeeUserCurrencyPrecision
-      : secondHopNetworkFeeUserCurrencyPrecision
+  (firstHopNetworkFeeUserCurrency, secondHopNetworkFeeUserCurrency, hopIndex) => {
+    return hopIndex === 0 ? firstHopNetworkFeeUserCurrency : secondHopNetworkFeeUserCurrency
   },
 )
 
-export const selectTotalNetworkFeeUserCurrencyPrecision: Selector<ReduxState, string | undefined> =
+export const selectTotalNetworkFeeUserCurrency: Selector<ReduxState, string | undefined> =
   createSelector(
-    selectFirstHopNetworkFeeUserCurrencyPrecision,
-    selectSecondHopNetworkFeeUserCurrencyPrecision,
-    (firstHopNetworkFeeUserCurrencyPrecision, secondHopNetworkFeeUserCurrencyPrecision) => {
+    selectFirstHopNetworkFeeUserCurrency,
+    selectSecondHopNetworkFeeUserCurrency,
+    (firstHopNetworkFeeUserCurrency, secondHopNetworkFeeUserCurrency) => {
       if (
-        firstHopNetworkFeeUserCurrencyPrecision === undefined &&
-        secondHopNetworkFeeUserCurrencyPrecision === undefined
+        firstHopNetworkFeeUserCurrency === undefined &&
+        secondHopNetworkFeeUserCurrency === undefined
       )
         return
 
-      return bnOrZero(firstHopNetworkFeeUserCurrencyPrecision)
-        .plus(secondHopNetworkFeeUserCurrencyPrecision ?? 0)
+      return bnOrZero(firstHopNetworkFeeUserCurrency)
+        .plus(secondHopNetworkFeeUserCurrency ?? 0)
         .toString()
     },
   )