wallet-stack 1.0.0-alpha.121

package/src/swap/SwapScreenV2.tsx

@@ -0,0 +1,1201 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import BigNumber from 'bignumber.js'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { TextInput as RNTextInput, StyleSheet, Text, View } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { showError } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SwapEvents } from 'src/analytics/Events'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import BackButton from 'src/components/BackButton'
+import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
+import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import FeeInfoBottomSheet from 'src/components/FeeInfoBottomSheet'
+import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
+import Toast from 'src/components/Toast'
+import TokenBottomSheet, { TokenPickerOrigin } from 'src/components/TokenBottomSheet'
+import TokenEnterAmount, {
+  FETCH_UPDATED_TRANSACTIONS_DEBOUNCE_TIME_MS,
+  useEnterAmount,
+} from 'src/components/TokenEnterAmount'
+import Touchable from 'src/components/Touchable'
+import CustomHeader from 'src/components/header/CustomHeader'
+import ArrowDown from 'src/icons/ArrowDown'
+import CircledIcon from 'src/icons/CircledIcon'
+import CrossChainIndicator from 'src/icons/CrossChainIndicator'
+import { getLocalCurrencyCode } from 'src/localCurrency/selectors'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+import EnterAmountOptions from 'src/send/EnterAmountOptions'
+import { NETWORK_NAMES } from 'src/shared/conts'
+import { getDynamicConfigParams, getFeatureGate } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs, StatsigFeatureGates } from 'src/statsig/types'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import variables from 'src/styles/variables'
+import SwapTransactionDetails from 'src/swap/SwapTransactionDetails'
+import UnfavorableRateBottomSheet from 'src/swap/UnfavorableRateBottomSheet'
+import getCrossChainFee from 'src/swap/getCrossChainFee'
+import { getSwapTxsAnalyticsProperties } from 'src/swap/getSwapTxsAnalyticsProperties'
+import { currentSwapSelector } from 'src/swap/selectors'
+import { swapStart } from 'src/swap/slice'
+import { AppFeeAmount, Field, SwapFeeAmount } from 'src/swap/types'
+import useFilterChips from 'src/swap/useFilterChips'
+import useSwapQuote, { NO_QUOTE_ERROR_MESSAGE, QuoteResult } from 'src/swap/useSwapQuote'
+import { useSwappableTokens } from 'src/tokens/hooks'
+import {
+  feeCurrenciesSelector,
+  feeCurrenciesWithPositiveBalancesSelector,
+  tokensByIdSelector,
+} from 'src/tokens/selectors'
+import { TokenBalance } from 'src/tokens/slice'
+import { NetworkId } from 'src/transactions/types'
+import Logger from 'src/utils/Logger'
+import { getFeeCurrencyAndAmounts } from 'src/viem/prepareTransactions'
+import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization'
+import networkConfig from 'src/web3/networkConfig'
+import { v4 as uuidv4 } from 'uuid'
+
+const TAG = 'SwapScreen'
+
+function getNetworkFee(quote: QuoteResult | null): SwapFeeAmount | undefined {
+  const { feeCurrency, maxFeeAmount, estimatedFeeAmount } = getFeeCurrencyAndAmounts(
+    quote?.preparedTransactions
+  )
+  return feeCurrency && estimatedFeeAmount
+    ? {
+        token: feeCurrency,
+        maxAmount: maxFeeAmount,
+        amount: estimatedFeeAmount,
+      }
+    : undefined
+}
+
+type Props = NativeStackScreenProps<StackParamList, Screens.SwapScreenWithBack>
+
+export default function SwapScreenV2({ route }: Props) {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const allowCrossChainSwaps = getFeatureGate(StatsigFeatureGates.ALLOW_CROSS_CHAIN_SWAPS)
+  const showUKCompliantVariant = getFeatureGate(StatsigFeatureGates.SHOW_UK_COMPLIANT_VARIANT)
+  const { swappableFromTokens, swappableToTokens, areSwapTokensShuffled } = useSwappableTokens()
+  const { links } = getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.APP_CONFIG])
+  const {
+    maxSlippagePercentage,
+    enableAppFee,
+    priceImpactWarningThreshold,
+    minReceivedFiatWarningPercent,
+  } = getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.SWAP_CONFIG])
+
+  const inputFromRef = useRef<RNTextInput>(null)
+  const inputToRef = useRef<RNTextInput>(null)
+  const tokenBottomSheetFromRef = useRef<BottomSheetModalRefType>(null)
+  const tokenBottomSheetToRef = useRef<BottomSheetModalRefType>(null)
+  const exchangeRateInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const feeInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const slippageInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const estimatedDurationBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const unfavorableSwapBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+
+  const [noUsdPriceToken, setNoUsdPriceToken] = useState<
+    { token: TokenBalance; tokenPositionInList: number } | undefined
+  >(undefined)
+  const [selectedPercentage, setSelectedPercentage] = useState<number | null>(null)
+  const [startedSwapId, setStartedSwapId] = useState<string | undefined>(undefined)
+  const [switchedToNetworkId, setSwitchedToNetworkId] = useState<{
+    networkId: NetworkId
+    field: Field
+  } | null>(null)
+  const [fromToken, setFromToken] = useState(() => {
+    if (!route.params?.fromTokenId) return undefined
+    return swappableFromTokens.find((token) => token.tokenId === route.params!.fromTokenId)
+  })
+  const [toToken, setToToken] = useState(() => {
+    if (!route.params?.toTokenId) return undefined
+    return swappableToTokens.find((token) => token.tokenId === route.params!.toTokenId)
+  })
+
+  const currentSwap = useSelector(currentSwapSelector)
+  const localCurrency = useSelector(getLocalCurrencyCode)
+  const tokensById = useSelector(tokensByIdSelector)
+  const crossChainFeeCurrency = useSelector((state) =>
+    feeCurrenciesSelector(state, fromToken?.networkId || networkConfig.defaultNetworkId)
+  ).find((token) => token.isNative)
+  const feeCurrenciesWithPositiveBalances = useSelector((state) =>
+    feeCurrenciesWithPositiveBalancesSelector(
+      state,
+      fromToken?.networkId || networkConfig.defaultNetworkId
+    )
+  )
+
+  const { quote, refreshQuote, fetchSwapQuoteError, fetchingSwapQuote, clearQuote } = useSwapQuote({
+    networkId: fromToken?.networkId || networkConfig.defaultNetworkId,
+    slippagePercentage: maxSlippagePercentage,
+    enableAppFee: enableAppFee,
+    onError: (error) => {
+      if (!error.message.includes(NO_QUOTE_ERROR_MESSAGE)) {
+        dispatch(showError(ErrorMessages.FETCH_SWAP_QUOTE_FAILED))
+      }
+    },
+    onSuccess: (newQuote) => {
+      if (!newQuote) {
+        replaceAmountTo('')
+        return
+      }
+
+      if (!processedAmountsFrom.token.bignum) {
+        return
+      }
+
+      const newAmount = processedAmountsFrom.token.bignum
+        .multipliedBy(new BigNumber(newQuote.price))
+        .toString()
+
+      replaceAmountTo(newAmount)
+    },
+  })
+
+  const {
+    amount: amountFrom,
+    amountType: amountTypeFrom,
+    processedAmounts: processedAmountsFrom,
+    handleAmountInputChange,
+    handleToggleAmountType: handleToggleAmountTypeFrom,
+    handleSelectPercentageAmount,
+  } = useEnterAmount({
+    inputRef: inputFromRef,
+    token: fromToken,
+    onHandleAmountInputChange: () => {
+      setSelectedPercentage(null)
+    },
+  })
+
+  const {
+    amount: amountTo,
+    amountType: amountTypeTo,
+    processedAmounts: processedAmountsTo,
+    replaceAmount: replaceAmountTo,
+    handleToggleAmountType: handleToggleAmountTypeTo,
+  } = useEnterAmount({ token: toToken, inputRef: inputToRef })
+
+  const filterChipsFrom = useFilterChips(Field.FROM)
+  const filterChipsTo = useFilterChips(Field.TO, route.params?.toTokenNetworkId)
+  const parsedSlippagePercentage = new BigNumber(maxSlippagePercentage).toFormat()
+  const crossChainFee =
+    quote?.swapType === 'cross-chain'
+      ? getCrossChainFee({
+          feeCurrency: crossChainFeeCurrency,
+          preparedTransactions: quote.preparedTransactions,
+          fromTokenId: quote.fromTokenId,
+          sellAmount: quote.sellAmount,
+          estimatedCrossChainFee: quote.estimatedCrossChainFee,
+          maxCrossChainFee: quote.maxCrossChainFee,
+        })
+      : undefined
+  const swapStatus = startedSwapId === currentSwap?.id ? currentSwap?.status : null
+  const confirmSwapIsLoading = swapStatus === 'started'
+  const confirmSwapFailed = swapStatus === 'error'
+  const switchedToNetworkName = switchedToNetworkId && NETWORK_NAMES[switchedToNetworkId.networkId]
+  const showCrossChainSwapNotification =
+    toToken && fromToken && toToken.networkId !== fromToken.networkId && allowCrossChainSwaps
+  const feeCurrencies =
+    quote && quote.preparedTransactions.type === 'not-enough-balance-for-gas'
+      ? quote.preparedTransactions.feeCurrencies.map((feeCurrency) => feeCurrency.symbol).join(', ')
+      : ''
+
+  const networkFee = useMemo(() => getNetworkFee(quote), [fromToken, quote])
+  const feeToken = networkFee?.token ? tokensById[networkFee.token.tokenId] : undefined
+
+  const appFee: AppFeeAmount | undefined = useMemo(() => {
+    if (!quote || !fromToken || !processedAmountsFrom.token.bignum) {
+      return undefined
+    }
+
+    const percentage = new BigNumber(quote.appFeePercentageIncludedInPrice || 0)
+
+    return {
+      amount: processedAmountsFrom.token.bignum.multipliedBy(percentage).dividedBy(100),
+      token: fromToken,
+      percentage,
+    }
+  }, [quote, processedAmountsFrom.token.bignum, fromToken])
+
+  const shouldShowSkeletons = useMemo(() => {
+    if (fetchingSwapQuote) return true
+
+    if (
+      quote &&
+      (quote.fromTokenId !== fromToken?.tokenId || quote.toTokenId !== toToken?.tokenId)
+    ) {
+      return true
+    }
+
+    if (
+      quote &&
+      processedAmountsFrom.token.bignum &&
+      !quote.swapAmount.eq(processedAmountsFrom.token.bignum)
+    ) {
+      return true
+    }
+
+    return false
+  }, [fetchingSwapQuote, quote, fromToken, toToken, processedAmountsFrom])
+
+  const warnings = useMemo(() => {
+    const shouldShowMaxSwapAmountWarning =
+      feeCurrenciesWithPositiveBalances.length === 1 &&
+      fromToken &&
+      fromToken.tokenId === feeCurrenciesWithPositiveBalances[0].tokenId &&
+      fromToken.balance.gt(0) &&
+      processedAmountsFrom.token.bignum &&
+      processedAmountsFrom.token.bignum.gte(fromToken.balance)
+
+    // NOTE: If a new condition is added here, make sure to update `allowSwap` below if
+    // the condition should prevent the user from swapping.
+    const checks = {
+      showSwitchedToNetworkWarning: !!switchedToNetworkId,
+      showUnsupportedTokensWarning:
+        !shouldShowSkeletons && fetchSwapQuoteError?.message.includes(NO_QUOTE_ERROR_MESSAGE),
+      showInsufficientBalanceWarning:
+        fromToken &&
+        processedAmountsFrom.token.bignum &&
+        processedAmountsFrom.token.bignum.gt(fromToken.balance),
+      showCrossChainFeeWarning:
+        !shouldShowSkeletons && crossChainFee?.nativeTokenBalanceDeficit.lt(0),
+      showDecreaseSpendForGasWarning:
+        !shouldShowSkeletons &&
+        quote?.preparedTransactions.type === 'need-decrease-spend-amount-for-gas',
+      showNotEnoughBalanceForGasWarning:
+        !shouldShowSkeletons && quote?.preparedTransactions.type === 'not-enough-balance-for-gas',
+      showMaxSwapAmountWarning: shouldShowMaxSwapAmountWarning && !confirmSwapFailed,
+      showNoUsdPriceWarning:
+        !confirmSwapFailed && !shouldShowSkeletons && toToken && !toToken.priceUsd,
+      showPriceImpactWarning:
+        !confirmSwapFailed &&
+        !shouldShowSkeletons &&
+        (quote?.estimatedPriceImpact
+          ? new BigNumber(quote.estimatedPriceImpact).gte(priceImpactWarningThreshold)
+          : false),
+      showMissingPriceImpactWarning: !shouldShowSkeletons && quote && !quote.estimatedPriceImpact,
+    }
+
+    // Only ever show a single warning, according to precedence as above.
+    // Warnings that prevent the user from confirming the swap should
+    // take higher priority over others.
+    return Object.entries(checks).reduce(
+      (acc, [name, status]) => {
+        acc[name] = Object.values(acc).some(Boolean) ? false : !!status
+        return acc
+      },
+      {} as Record<string, boolean>
+    )
+  }, [
+    feeCurrenciesWithPositiveBalances,
+    fromToken,
+    toToken,
+    processedAmountsFrom,
+    switchedToNetworkId,
+    shouldShowSkeletons,
+    fetchSwapQuoteError,
+    crossChainFee,
+    quote,
+    confirmSwapFailed,
+    priceImpactWarningThreshold,
+  ])
+
+  const allowSwap = useMemo(
+    () =>
+      !warnings.showDecreaseSpendForGasWarning &&
+      !warnings.showNotEnoughBalanceForGasWarning &&
+      !warnings.showInsufficientBalanceWarning &&
+      !warnings.showCrossChainFeeWarning &&
+      !confirmSwapIsLoading &&
+      !shouldShowSkeletons &&
+      processedAmountsFrom.token.bignum &&
+      processedAmountsFrom.token.bignum.gt(0) &&
+      processedAmountsTo.token.bignum &&
+      processedAmountsTo.token.bignum.gt(0),
+    [
+      processedAmountsFrom.token.bignum,
+      processedAmountsTo.token.bignum,
+      shouldShowSkeletons,
+      confirmSwapIsLoading,
+      warnings.showInsufficientBalanceWarning,
+      warnings.showDecreaseSpendForGasWarning,
+      warnings.showNotEnoughBalanceForGasWarning,
+      warnings.showCrossChainFeeWarning,
+    ]
+  )
+
+  const showUnfavorableRateConfirmation = useMemo(() => {
+    if (!quote || !processedAmountsFrom.local.bignum || !processedAmountsTo.local.bignum) {
+      return false
+    }
+
+    return (
+      processedAmountsTo.local.bignum
+        .div(processedAmountsFrom.local.bignum)
+        .multipliedBy(100)
+        .lt(minReceivedFiatWarningPercent) || warnings.showPriceImpactWarning
+    )
+  }, [quote, processedAmountsFrom, processedAmountsTo, warnings.showPriceImpactWarning])
+
+  useEffect(
+    function refreshTransactionQuote() {
+      setStartedSwapId(undefined)
+      if (!processedAmountsFrom.token.bignum) {
+        clearQuote()
+        replaceAmountTo('')
+        return
+      }
+
+      const debounceTimeout = setTimeout(() => {
+        const bothTokensPresent = !!(fromToken && toToken)
+        const amountIsTooSmall =
+          !processedAmountsFrom.token.bignum || processedAmountsFrom.token.bignum.lte(0)
+
+        if (!bothTokensPresent || amountIsTooSmall) {
+          return
+        }
+
+        // This variable prevents the quote from needlessly being fetched again.
+        const quoteIsTheSameAsTheLastOne =
+          quote &&
+          quote.toTokenId === toToken.tokenId &&
+          quote.fromTokenId === fromToken.tokenId &&
+          processedAmountsFrom.token.bignum &&
+          quote.swapAmount.eq(processedAmountsFrom.token.bignum)
+
+        if (!quoteIsTheSameAsTheLastOne) {
+          replaceAmountTo('')
+          void refreshQuote(
+            fromToken,
+            toToken,
+            { FROM: processedAmountsFrom.token.bignum, TO: null },
+            Field.FROM
+          )
+        }
+      }, FETCH_UPDATED_TRANSACTIONS_DEBOUNCE_TIME_MS)
+
+      return () => {
+        clearTimeout(debounceTimeout)
+      }
+    },
+    [
+      processedAmountsFrom.token.bignum?.toString(),
+      fromToken,
+      toToken,
+      quote,
+      refreshQuote,
+      /**
+       * TODO
+       * This useEffect doesn't follow the rules of hooks which can introduce unnecessary bugs.
+       * Functions below should be optimized to not cause unnecessary re-runs. Once that's done -
+       * they should be uncommented.
+       */
+      // clearQuote,
+      // replaceAmountTo,
+    ]
+  )
+
+  useEffect(function trackSwapScreenOpen() {
+    AppAnalytics.track(SwapEvents.swap_screen_open)
+  }, [])
+
+  useEffect(
+    function trackImpactWarningDisplayed() {
+      if (warnings.showPriceImpactWarning || warnings.showMissingPriceImpactWarning) {
+        if (!quote) {
+          return
+        }
+        const fromToken = tokensById[quote.fromTokenId]
+        const toToken = tokensById[quote.toTokenId]
+
+        if (!fromToken || !toToken) {
+          // Should never happen
+          Logger.error(TAG, 'fromToken or toToken not found')
+          return
+        }
+
+        AppAnalytics.track(SwapEvents.swap_price_impact_warning_displayed, {
+          toToken: toToken.address,
+          toTokenId: toToken.tokenId,
+          toTokenNetworkId: toToken.networkId,
+          toTokenIsImported: !!toToken.isManuallyImported,
+          fromToken: fromToken.address,
+          fromTokenId: fromToken.tokenId,
+          fromTokenNetworkId: fromToken?.networkId,
+          fromTokenIsImported: !!fromToken.isManuallyImported,
+          amount: processedAmountsFrom.token.bignum
+            ? processedAmountsFrom.token.bignum.toString()
+            : '',
+          amountType: 'sellAmount',
+          priceImpact: quote.estimatedPriceImpact,
+          provider: quote.provider,
+        })
+      }
+    },
+    [warnings.showPriceImpactWarning || warnings.showMissingPriceImpactWarning]
+  )
+
+  function handleOpenTokenPicker(field: Field) {
+    AppAnalytics.track(SwapEvents.swap_screen_select_token, { fieldType: field })
+    // use requestAnimationFrame so that the bottom sheet open animation is done
+    // after the selectingField value is updated, so that the title of the
+    // bottom sheet (which depends on selectingField) does not change on the
+    // screen
+    requestAnimationFrame(() => {
+      const ref = field === Field.FROM ? tokenBottomSheetFromRef : tokenBottomSheetToRef
+      ref.current?.snapToIndex(0)
+    })
+  }
+
+  const submitSwap = useCallback(() => {
+    if (!quote) {
+      return // this should never happen, because the button must be disabled in that cases
+    }
+
+    const fromToken = tokensById[quote.fromTokenId]
+    const toToken = tokensById[quote.toTokenId]
+
+    if (!fromToken || !toToken) {
+      // Should never happen
+      return
+    }
+
+    const userInput = {
+      toTokenId: toToken.tokenId,
+      fromTokenId: fromToken.tokenId,
+      swapAmount: {
+        [Field.FROM]: processedAmountsFrom.token.bignum?.toString() ?? '',
+        [Field.TO]: processedAmountsTo.token.bignum?.toString() ?? '',
+      },
+      updatedField: Field.FROM,
+    }
+
+    const { estimatedPriceImpact, price, allowanceTarget, appFeePercentageIncludedInPrice } = quote
+
+    const resultType = quote.preparedTransactions.type
+    switch (resultType) {
+      case 'need-decrease-spend-amount-for-gas': // fallthrough on purpose
+      case 'not-enough-balance-for-gas':
+        // This should never actually happen, since the user should not be able
+        // to confirm the swap in this case.
+        break
+      case 'possible':
+        const swapId = uuidv4()
+
+        AppAnalytics.track(SwapEvents.swap_review_submit, {
+          swapId,
+          toToken: toToken.address,
+          toTokenId: toToken.tokenId,
+          toTokenNetworkId: toToken.networkId,
+          toTokenIsImported: !!toToken.isManuallyImported,
+          fromToken: fromToken.address,
+          fromTokenId: fromToken.tokenId,
+          fromTokenNetworkId: fromToken.networkId,
+          fromTokenIsImported: !!fromToken.isManuallyImported,
+          amount: processedAmountsFrom.token.bignum?.toString() || '',
+          amountType: 'sellAmount',
+          allowanceTarget,
+          estimatedPriceImpact,
+          price,
+          appFeePercentageIncludedInPrice,
+          provider: quote.provider,
+          swapType: quote.swapType,
+          web3Library: 'viem',
+          ...getSwapTxsAnalyticsProperties(
+            quote.preparedTransactions.transactions,
+            fromToken.networkId,
+            tokensById
+          ),
+          isUnfavorableRate: showUnfavorableRateConfirmation,
+        })
+
+        setStartedSwapId(swapId)
+        dispatch(
+          swapStart({
+            swapId,
+            quote: {
+              preparedTransactions: getSerializablePreparedTransactions(
+                quote.preparedTransactions.transactions
+              ),
+              receivedAt: quote.receivedAt,
+              price: quote.price,
+              appFeePercentageIncludedInPrice,
+              provider: quote.provider,
+              estimatedPriceImpact,
+              allowanceTarget,
+              swapType: quote.swapType,
+            },
+            userInput,
+            areSwapTokensShuffled,
+          })
+        )
+        break
+      default:
+        // To catch any missing cases at compile time
+        const assertNever: never = resultType
+        return assertNever
+    }
+  }, [quote, processedAmountsFrom, processedAmountsTo, showUnfavorableRateConfirmation, tokensById])
+
+  function handleConfirmSwap() {
+    if (!quote) {
+      return // this should never happen, because the button must be disabled in that cases
+    }
+
+    const fromToken = tokensById[quote.fromTokenId]
+    const toToken = tokensById[quote.toTokenId]
+
+    if (!fromToken || !toToken) {
+      // Should never happen
+      return
+    }
+
+    if (showUnfavorableRateConfirmation) {
+      AppAnalytics.track(SwapEvents.swap_unfavorable_rate_warning_displayed, {
+        toTokenId: toToken.tokenId,
+        toTokenNetworkId: toToken.networkId,
+        toTokenIsImported: !!toToken.isManuallyImported,
+        toToken: toToken.address,
+        fromTokenId: fromToken.tokenId,
+        fromTokenNetworkId: fromToken.networkId,
+        fromTokenIsImported: !!fromToken?.isManuallyImported,
+        fromToken: fromToken.address,
+        amount: processedAmountsFrom.token.bignum?.toString() || '',
+        amountType: 'sellAmount',
+        estimatedPriceImpact: quote.estimatedPriceImpact,
+        price: quote.price,
+        appFeePercentageIncludedInPrice: quote.appFeePercentageIncludedInPrice,
+        provider: quote.provider,
+        swapType: quote.swapType,
+      })
+      unfavorableSwapBottomSheetRef.current?.snapToIndex(0)
+      return
+    }
+
+    submitSwap()
+  }
+
+  const handleUnfavorableRateBottomSheetCancel = useCallback(() => {
+    if (!quote) {
+      return // this should never happen, because swap confirmation button is disabled in that case
+    }
+
+    const fromToken = tokensById[quote.fromTokenId]
+    const toToken = tokensById[quote.toTokenId]
+
+    if (!fromToken || !toToken) {
+      // Should never happen
+      return
+    }
+    AppAnalytics.track(SwapEvents.swap_unfavorable_rate_warning_cancelled, {
+      toTokenId: toToken.tokenId,
+      toTokenNetworkId: toToken.networkId,
+      toTokenIsImported: !!toToken.isManuallyImported,
+      toToken: toToken.address,
+      fromTokenId: fromToken.tokenId,
+      fromTokenNetworkId: fromToken.networkId,
+      fromTokenIsImported: !!fromToken?.isManuallyImported,
+      fromToken: fromToken.address,
+      amount: processedAmountsFrom.token.bignum?.toString() || '',
+      amountType: 'sellAmount',
+      estimatedPriceImpact: quote.estimatedPriceImpact,
+      price: quote.price,
+      appFeePercentageIncludedInPrice: quote.appFeePercentageIncludedInPrice,
+      provider: quote.provider,
+      swapType: quote.swapType,
+    })
+  }, [quote, processedAmountsFrom, processedAmountsTo, tokensById])
+
+  function handleSwitchTokens() {
+    AppAnalytics.track(SwapEvents.swap_switch_tokens, {
+      fromTokenId: fromToken?.tokenId,
+      toTokenId: toToken?.tokenId,
+    })
+
+    setFromToken(toToken)
+    setToToken(fromToken)
+    replaceAmountTo('')
+  }
+
+  function handleConfirmSelectTokenNoUsdPrice() {
+    if (noUsdPriceToken) {
+      handleConfirmSelectToken({
+        field: Field.TO,
+        selectedToken: noUsdPriceToken.token,
+        tokenPositionInList: noUsdPriceToken.tokenPositionInList,
+      })
+      setNoUsdPriceToken(undefined)
+    }
+  }
+
+  function handleDismissSelectTokenNoUsdPrice() {
+    setNoUsdPriceToken(undefined)
+  }
+
+  const handleConfirmSelectToken = ({
+    field,
+    selectedToken,
+    tokenPositionInList,
+  }: {
+    field: Field
+    selectedToken: TokenBalance
+    tokenPositionInList: number
+  }) => {
+    if (!field) {
+      // Should never happen
+      Logger.error(TAG, 'handleConfirmSelectToken called without field')
+      return
+    }
+
+    let newFromToken = fromToken
+    let newToToken = toToken
+    let newSwitchedToNetwork: typeof switchedToNetworkId | null = null
+
+    switch (true) {
+      // If we're selecting a field that was already selected in the other input then switch inputs
+      case (field === Field.FROM && toToken?.tokenId === selectedToken.tokenId) ||
+        (field === Field.TO && fromToken?.tokenId === selectedToken.tokenId): {
+        newFromToken = toToken
+        newToToken = fromToken
+        break
+      }
+
+      case field === Field.FROM: {
+        newFromToken = selectedToken
+        newSwitchedToNetwork =
+          toToken && toToken.networkId !== newFromToken.networkId && !allowCrossChainSwaps
+            ? { networkId: newFromToken.networkId, field: Field.FROM }
+            : null
+        if (newSwitchedToNetwork) {
+          // reset the toToken if the user is switching networks
+          newToToken = undefined
+        }
+        break
+      }
+
+      case field === Field.TO: {
+        if (!selectedToken.priceUsd && !noUsdPriceToken) {
+          setNoUsdPriceToken({ token: selectedToken, tokenPositionInList })
+          return
+        }
+
+        newToToken = selectedToken
+        newSwitchedToNetwork =
+          fromToken && fromToken.networkId !== newToToken.networkId && !allowCrossChainSwaps
+            ? { networkId: newToToken.networkId, field: Field.TO }
+            : null
+        if (newSwitchedToNetwork) {
+          // reset the fromToken if the user is switching networks
+          newFromToken = undefined
+        }
+      }
+    }
+
+    AppAnalytics.track(SwapEvents.swap_screen_confirm_token, {
+      fieldType: field,
+      tokenSymbol: selectedToken.symbol,
+      tokenId: selectedToken.tokenId,
+      tokenNetworkId: selectedToken.networkId,
+      fromTokenSymbol: newFromToken?.symbol,
+      fromTokenId: newFromToken?.tokenId,
+      fromTokenNetworkId: newFromToken?.networkId,
+      toTokenSymbol: newToToken?.symbol,
+      toTokenId: newToToken?.tokenId,
+      toTokenNetworkId: newToToken?.networkId,
+      switchedNetworkId: !!newSwitchedToNetwork,
+      areSwapTokensShuffled,
+      tokenPositionInList,
+    })
+
+    setFromToken(newFromToken)
+    setToToken(newToToken)
+    setSwitchedToNetworkId(allowCrossChainSwaps ? null : newSwitchedToNetwork)
+    setStartedSwapId(undefined)
+    replaceAmountTo('')
+
+    if (newSwitchedToNetwork) {
+      clearQuote()
+    }
+
+    // use requestAnimationFrame so that the bottom sheet and keyboard dismiss
+    // animation can be synchronised and starts after the state changes above.
+    // without this, the keyboard animation lags behind the state updates while
+    // the bottom sheet does not
+    requestAnimationFrame(() => {
+      const ref = field === Field.FROM ? tokenBottomSheetFromRef : tokenBottomSheetToRef
+      ref.current?.close()
+    })
+  }
+
+  function handleToggleAmountType() {
+    const newAmountType = handleToggleAmountTypeFrom()
+    handleToggleAmountTypeTo(newAmountType)
+  }
+
+  function handleSelectAmountPercentage(percentage: number) {
+    handleSelectPercentageAmount(percentage)
+    setSelectedPercentage(percentage)
+
+    if (!fromToken) {
+      // Should never happen
+      return
+    }
+    AppAnalytics.track(SwapEvents.swap_screen_percentage_selected, {
+      tokenSymbol: fromToken.symbol,
+      tokenId: fromToken.tokenId,
+      tokenNetworkId: fromToken.networkId,
+      percentage,
+    })
+  }
+
+  function handlePressLearnMore() {
+    AppAnalytics.track(SwapEvents.swap_learn_more)
+    navigate(Screens.WebViewScreen, { uri: links.swapLearnMore })
+  }
+
+  function handlePressLearnMoreFees() {
+    AppAnalytics.track(SwapEvents.swap_gas_fees_learn_more)
+    navigate(Screens.WebViewScreen, { uri: links.transactionFeesLearnMore })
+  }
+
+  return (
+    <SafeAreaView style={styles.safeAreaContainer} testID="SwapScreen">
+      <CustomHeader
+        style={{ paddingHorizontal: variables.contentPadding }}
+        left={<BackButton />}
+        title={t('swapScreen.title')}
+      />
+      <ScrollView
+        contentContainerStyle={styles.contentContainer}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.inputsAndWarningsContainer}>
+          <View>
+            <View style={styles.inputsContainer}>
+              <TokenEnterAmount
+                autoFocus
+                token={fromToken}
+                inputValue={amountFrom}
+                inputRef={inputFromRef}
+                tokenAmount={processedAmountsFrom.token.displayAmount}
+                localAmount={processedAmountsFrom.local.displayAmount}
+                onInputChange={handleAmountInputChange}
+                amountType={amountTypeFrom}
+                toggleAmountType={handleToggleAmountType}
+                onOpenTokenPicker={() => handleOpenTokenPicker(Field.FROM)}
+                testID="SwapAmountInput"
+              />
+              <View style={styles.switchTokensContainer}>
+                <Touchable
+                  borderless
+                  borderRadius={Spacing.Regular16}
+                  shouldRenderRippleAbove
+                  style={styles.switchTokens}
+                  onPress={handleSwitchTokens}
+                  testID="SwapScreen/SwitchTokens"
+                >
+                  <CircledIcon radius={Spacing.Large32} backgroundColor={colors.contentPrimary}>
+                    <ArrowDown color={colors.backgroundPrimary} />
+                  </CircledIcon>
+                </Touchable>
+              </View>
+              <TokenEnterAmount
+                token={toToken}
+                inputValue={amountTo}
+                inputRef={inputToRef}
+                tokenAmount={processedAmountsTo.token.displayAmount}
+                localAmount={processedAmountsTo.local.displayAmount}
+                amountType={amountTypeTo}
+                onOpenTokenPicker={() => handleOpenTokenPicker(Field.TO)}
+                loading={shouldShowSkeletons}
+                testID="SwapAmountInput"
+              />
+            </View>
+
+            {showCrossChainSwapNotification && (
+              <View style={styles.crossChainNotificationWrapper}>
+                <CrossChainIndicator backgroundColor={colors.contentSecondary} />
+                <Text style={styles.crossChainNotification}>
+                  {t('swapScreen.crossChainNotification')}
+                </Text>
+              </View>
+            )}
+            <SwapTransactionDetails
+              feeInfoBottomSheetRef={feeInfoBottomSheetRef}
+              slippageInfoBottomSheetRef={slippageInfoBottomSheetRef}
+              estimatedDurationBottomSheetRef={estimatedDurationBottomSheetRef}
+              slippagePercentage={parsedSlippagePercentage}
+              fromToken={fromToken}
+              toToken={toToken}
+              exchangeRatePrice={quote?.price}
+              exchangeRateInfoBottomSheetRef={exchangeRateInfoBottomSheetRef}
+              swapAmount={processedAmountsFrom.token.bignum ?? undefined}
+              fetchingSwapQuote={shouldShowSkeletons}
+              appFee={appFee}
+              estimatedDurationInSeconds={
+                quote?.swapType === 'cross-chain' ? quote.estimatedDurationInSeconds : undefined
+              }
+              crossChainFee={crossChainFee}
+              networkFee={networkFee}
+            />
+          </View>
+
+          <View style={styles.warningsContainer}>
+            {warnings.showCrossChainFeeWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.crossChainFeeWarning.title', {
+                  tokenSymbol: crossChainFeeCurrency?.symbol,
+                })}
+                description={t('swapScreen.crossChainFeeWarning.body', {
+                  networkName:
+                    NETWORK_NAMES[
+                      crossChainFeeCurrency?.networkId || networkConfig.defaultNetworkId
+                    ],
+                  tokenSymbol: crossChainFeeCurrency?.symbol,
+                  tokenAmount: crossChainFee?.nativeTokenBalanceDeficit.abs().toFormat(),
+                })}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showDecreaseSpendForGasWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.decreaseSwapAmountForGasWarning.title', {
+                  feeTokenSymbol: feeToken?.symbol,
+                })}
+                description={t('swapScreen.decreaseSwapAmountForGasWarning.body', {
+                  feeTokenSymbol: feeToken?.symbol,
+                })}
+                onPressCta={() => {
+                  if (
+                    !quote ||
+                    quote.preparedTransactions.type !== 'need-decrease-spend-amount-for-gas'
+                  )
+                    return
+                  handleAmountInputChange(
+                    quote.preparedTransactions.decreasedSpendAmount.toString()
+                  )
+                }}
+                ctaLabel={t('swapScreen.decreaseSwapAmountForGasWarning.cta')}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showNotEnoughBalanceForGasWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.notEnoughBalanceForGas.title')}
+                description={t('swapScreen.notEnoughBalanceForGas.description', {
+                  feeCurrencies,
+                })}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showInsufficientBalanceWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.insufficientBalanceWarning.title', {
+                  tokenSymbol: fromToken?.symbol,
+                })}
+                description={t('swapScreen.insufficientBalanceWarning.body', {
+                  tokenSymbol: fromToken?.symbol,
+                })}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showUnsupportedTokensWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Info}
+                title={t('swapScreen.unsupportedTokensWarning.title')}
+                description={t('swapScreen.unsupportedTokensWarning.body')}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showSwitchedToNetworkWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Info}
+                title={t('swapScreen.switchedToNetworkWarning.title', {
+                  networkName: switchedToNetworkName,
+                })}
+                description={t('swapScreen.switchedToNetworkWarning.body', {
+                  networkName: switchedToNetworkName,
+                  context: switchedToNetworkId?.field === Field.FROM ? 'swapTo' : 'swapFrom',
+                })}
+                style={styles.warning}
+                testID="SwitchedToNetworkWarning"
+              />
+            )}
+            {warnings.showMaxSwapAmountWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.maxSwapAmountWarning.titleV1_74', {
+                  tokenSymbol: fromToken?.symbol,
+                })}
+                description={t('swapScreen.maxSwapAmountWarning.bodyV1_74', {
+                  tokenSymbol: fromToken?.symbol,
+                })}
+                ctaLabel={t('swapScreen.maxSwapAmountWarning.learnMore')}
+                style={styles.warning}
+                onPressCta={handlePressLearnMoreFees}
+                testID="MaxSwapAmountWarning"
+              />
+            )}
+            {warnings.showPriceImpactWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.priceImpactWarning.title')}
+                description={t('swapScreen.priceImpactWarning.body')}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showNoUsdPriceWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.noUsdPriceWarning.title', { localCurrency })}
+                description={t('swapScreen.noUsdPriceWarning.description', {
+                  localCurrency,
+                  tokenSymbol: toToken?.symbol,
+                })}
+                style={styles.warning}
+              />
+            )}
+            {warnings.showMissingPriceImpactWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.missingSwapImpactWarning.title')}
+                description={t('swapScreen.missingSwapImpactWarning.body')}
+                style={styles.warning}
+              />
+            )}
+            {confirmSwapFailed && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('swapScreen.confirmSwapFailedWarning.title')}
+                description={t('swapScreen.confirmSwapFailedWarning.body')}
+                style={styles.warning}
+              />
+            )}
+          </View>
+        </View>
+
+        <View>
+          <Text style={styles.disclaimerText}>
+            <Trans
+              i18nKey="swapScreen.disclaimer"
+              context={showUKCompliantVariant ? 'UK' : undefined}
+            >
+              <Text style={styles.disclaimerLink} onPress={handlePressLearnMore}></Text>
+            </Trans>
+          </Text>
+          <Button
+            testID="ConfirmSwapButton"
+            onPress={handleConfirmSwap}
+            text={t('swapScreen.confirmSwap', {
+              context: showUKCompliantVariant ? 'UK' : undefined,
+            })}
+            size={BtnSizes.FULL}
+            disabled={!allowSwap}
+            showLoading={confirmSwapIsLoading}
+          />
+        </View>
+      </ScrollView>
+
+      <EnterAmountOptions
+        onPressAmount={handleSelectAmountPercentage}
+        selectedAmount={selectedPercentage}
+        testID="SwapEnterAmount/AmountOptions"
+      />
+
+      <TokenBottomSheet
+        searchEnabled
+        showPriceUsdUnavailableWarning
+        key="TokenBottomSheet/From"
+        snapPoints={['90%']}
+        title={t('swapScreen.tokenBottomSheetTitle')}
+        origin={TokenPickerOrigin.SwapFrom}
+        forwardedRef={tokenBottomSheetFromRef}
+        tokens={swappableFromTokens}
+        filterChips={filterChipsFrom}
+        onTokenSelected={(token, tokenPositionInList) => {
+          handleConfirmSelectToken({ field: Field.FROM, selectedToken: token, tokenPositionInList })
+        }}
+        areSwapTokensShuffled={areSwapTokensShuffled}
+      />
+      <TokenBottomSheet
+        searchEnabled
+        showPriceUsdUnavailableWarning
+        key="TokenBottomSheet/To"
+        snapPoints={['90%']}
+        title={t('swapScreen.tokenBottomSheetTitle')}
+        origin={TokenPickerOrigin.SwapTo}
+        forwardedRef={tokenBottomSheetToRef}
+        tokens={swappableToTokens}
+        filterChips={filterChipsTo}
+        onTokenSelected={(token, tokenPositionInList) => {
+          handleConfirmSelectToken({ field: Field.TO, selectedToken: token, tokenPositionInList })
+        }}
+        areSwapTokensShuffled={areSwapTokensShuffled}
+      />
+      <BottomSheet
+        forwardedRef={exchangeRateInfoBottomSheetRef}
+        title={t('swapScreen.transactionDetails.exchangeRate')}
+        description={t('swapScreen.transactionDetails.exchangeRateInfoV1_90', {
+          context: appFee?.percentage?.isGreaterThan(0) ? 'withAppFee' : '',
+          networkName: NETWORK_NAMES[fromToken?.networkId || networkConfig.defaultNetworkId],
+          slippagePercentage: parsedSlippagePercentage,
+          appFeePercentage: appFee?.percentage?.toFormat(),
+        })}
+        testId="ExchangeRateInfoBottomSheet"
+      >
+        <Button
+          type={BtnTypes.SECONDARY}
+          size={BtnSizes.FULL}
+          style={styles.bottomSheetButton}
+          onPress={() => {
+            exchangeRateInfoBottomSheetRef.current?.close()
+          }}
+          text={t('swapScreen.transactionDetails.infoDismissButton')}
+        />
+      </BottomSheet>
+      <BottomSheet
+        forwardedRef={estimatedDurationBottomSheetRef}
+        title={t('swapScreen.transactionDetails.estimatedTransactionTime')}
+        description={t('swapScreen.transactionDetails.estimatedTransactionTimeInfo')}
+        testId="EstimatedDurationBottomSheet"
+      >
+        <Button
+          type={BtnTypes.SECONDARY}
+          size={BtnSizes.FULL}
+          style={styles.bottomSheetButton}
+          onPress={() => {
+            estimatedDurationBottomSheetRef.current?.close()
+          }}
+          text={t('swapScreen.transactionDetails.infoDismissButton')}
+        />
+      </BottomSheet>
+      <BottomSheet
+        forwardedRef={slippageInfoBottomSheetRef}
+        title={t('swapScreen.transactionDetails.slippagePercentage')}
+        description={t('swapScreen.transactionDetails.slippageToleranceInfoV1_90')}
+        testId="SlippageInfoBottomSheet"
+      >
+        <Button
+          type={BtnTypes.SECONDARY}
+          size={BtnSizes.FULL}
+          style={styles.bottomSheetButton}
+          onPress={() => {
+            slippageInfoBottomSheetRef.current?.close()
+          }}
+          text={t('swapScreen.transactionDetails.infoDismissButton')}
+        />
+      </BottomSheet>
+      <FeeInfoBottomSheet
+        forwardedRef={feeInfoBottomSheetRef}
+        crossChainFee={crossChainFee}
+        networkFee={networkFee}
+        appFee={appFee}
+      />
+      <Toast
+        withBackdrop
+        showToast={!!noUsdPriceToken}
+        variant={NotificationVariant.Warning}
+        title={t('swapScreen.noUsdPriceWarning.title', { localCurrency })}
+        description={t('swapScreen.noUsdPriceWarning.description', {
+          localCurrency,
+          tokenSymbol: noUsdPriceToken?.token.symbol,
+        })}
+        ctaLabel2={t('swapScreen.noUsdPriceWarning.ctaConfirm')}
+        onPressCta2={handleConfirmSelectTokenNoUsdPrice}
+        ctaLabel={t('swapScreen.noUsdPriceWarning.ctaDismiss')}
+        onPressCta={handleDismissSelectTokenNoUsdPrice}
+        onDismiss={handleDismissSelectTokenNoUsdPrice}
+      />
+
+      <UnfavorableRateBottomSheet
+        forwardedRef={unfavorableSwapBottomSheetRef}
+        onConfirm={submitSwap}
+        onCancel={handleUnfavorableRateBottomSheetCancel}
+        fromTokenAmount={processedAmountsFrom.token.bignum}
+        fromLocalAmount={processedAmountsFrom.local.bignum}
+        toTokenAmount={processedAmountsTo.token.bignum}
+        toLocalAmount={processedAmountsTo.local.bignum}
+        fromTokenInfo={fromToken}
+        toTokenInfo={toToken}
+      />
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  safeAreaContainer: {
+    flex: 1,
+  },
+  contentContainer: {
+    padding: Spacing.Regular16,
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  inputsAndWarningsContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+  },
+  inputsContainer: {
+    paddingBottom: Spacing.Small12,
+    flex: 1,
+    gap: 4,
+  },
+  warningsContainer: {
+    paddingBottom: Spacing.Thick24,
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  disclaimerText: {
+    ...typeScale.labelXXSmall,
+    paddingBottom: Spacing.Smallest8,
+    flexWrap: 'wrap',
+    color: colors.contentSecondary,
+    textAlign: 'center',
+  },
+  disclaimerLink: {
+    ...typeScale.labelXXSmall,
+  },
+  warning: {
+    marginTop: Spacing.Thick24,
+  },
+  bottomSheetButton: {
+    marginTop: Spacing.Thick24,
+  },
+  switchTokens: {
+    position: 'absolute',
+    top: -20,
+    left: -Spacing.Regular16,
+    zIndex: 1,
+  },
+  switchTokensContainer: {
+    zIndex: 1,
+    alignItems: 'center',
+  },
+  crossChainNotificationWrapper: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: Spacing.Thick24,
+  },
+  crossChainNotification: {
+    ...typeScale.labelXSmall,
+    paddingLeft: Spacing.Tiny4,
+    color: colors.contentSecondary,
+  },
+})