Share the swap price-impact calculation and display

Extract the swap confirmation scene's price-impact computation and the
quote card's colored percentage text into PriceImpactText, so the send
scene's quote row can reuse the same delta UI.

Author: j0ntz

src/components/scenes/SwapConfirmationScene.tsx

@@ -1,5 +1,5 @@
 import { useIsFocused } from '@react-navigation/native'
-import { add, div, gt, gte, lte, sub, toFixed } from 'biggystring'
+import { add, div, gt, gte, toFixed } from 'biggystring'
 import type { EdgeSwapQuote, EdgeSwapResult } from 'edge-core-js'
 import React, { useState } from 'react'
 import { SectionList, type ViewStyle } from 'react-native'
@@ -51,11 +51,13 @@ import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { ExchangeQuote } from '../themed/ExchangeQuoteComponent'
 import { LineTextDivider } from '../themed/LineTextDivider'
 import { ModalFooter } from '../themed/ModalParts'
+import {
+  calculateQuotePriceImpact,
+  PRICE_IMPACT_WARNING_THRESHOLD
+} from '../themed/PriceImpactText'
 import { SafeSlider } from '../themed/SafeSlider'
 import { WalletListSectionHeader } from '../themed/WalletListSectionHeader'
 
-const PRICE_IMPACT_WARNING_THRESHOLD = 0.05
-
 export interface SwapConfirmationParams {
   selectedQuote: EdgeSwapQuote
   quotes: EdgeSwapQuote[]
@@ -126,48 +128,11 @@ export const SwapConfirmationScene: React.FC<Props> = (props: Props) => {
   const { request } = selectedQuote
   const { quoteFor } = request
 
-  const priceImpact = React.useMemo(() => {
-    const { fromWallet, fromTokenId, toTokenId } = request
-    const toWallet = request.toWallet
-    if (toWallet == null) {
-      throw new Error('Swap quote is missing a destination wallet')
-    }
-
-    const fromExchangeDenom = getExchangeDenom(
-      fromWallet.currencyConfig,
-      fromTokenId
-    )
-    const toExchangeDenom = getExchangeDenom(toWallet.currencyConfig, toTokenId)
-
-    const fromExchangeAmount = convertNativeToExchange(
-      fromExchangeDenom.multiplier
-    )(selectedQuote.fromNativeAmount)
-    const toExchangeAmount = convertNativeToExchange(
-      toExchangeDenom.multiplier
-    )(selectedQuote.toNativeAmount)
-
-    const fromFiatValue = convertCurrency(
-      exchangeRates,
-      fromWallet.currencyInfo.pluginId,
-      fromTokenId,
-      defaultIsoFiat,
-      fromExchangeAmount
-    )
-    const toFiatValue = convertCurrency(
-      exchangeRates,
-      toWallet.currencyInfo.pluginId,
-      toTokenId,
-      defaultIsoFiat,
-      toExchangeAmount
-    )
-
-    if (lte(fromFiatValue, '0')) return undefined
-
-    const impact = parseFloat(
-      div(sub(fromFiatValue, toFiatValue), fromFiatValue, 8)
-    )
-    return impact > 0 ? impact : undefined
-  }, [selectedQuote, exchangeRates, defaultIsoFiat, request])
+  const priceImpact = React.useMemo(
+    () =>
+      calculateQuotePriceImpact(selectedQuote, exchangeRates, defaultIsoFiat),
+    [selectedQuote, exchangeRates, defaultIsoFiat]
+  )
 
   const showPriceImpact =
     priceImpact != null && priceImpact >= PRICE_IMPACT_WARNING_THRESHOLD

src/components/themed/ExchangeQuoteComponent.tsx

@@ -6,7 +6,6 @@ import { View } from 'react-native'
 import { useCryptoText } from '../../hooks/useCryptoText'
 import { formatFiatString, useFiatText } from '../../hooks/useFiatText'
 import { useTokenDisplayData } from '../../hooks/useTokenDisplayData'
-import { formatNumber } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { convertCurrency } from '../../selectors/WalletSelectors'
 import { useSelector } from '../../types/reactRedux'
@@ -16,6 +15,7 @@ import { EdgeCard } from '../cards/EdgeCard'
 import { CurrencyRow } from '../rows/CurrencyRow'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { EdgeText } from './EdgeText'
+import { PriceImpactText } from './PriceImpactText'
 
 interface Props {
   fromTo: 'from' | 'to'
@@ -194,17 +194,7 @@ export const ExchangeQuote: React.FC<Props> = props => {
 
   const priceImpactNode =
     !isFrom && priceImpact != null && priceImpact > 0 ? (
-      <EdgeText
-        style={
-          priceImpact >= 0.15
-            ? styles.priceImpactHigh
-            : priceImpact >= 0.05
-            ? styles.priceImpactMedium
-            : styles.priceImpactLow
-        }
-      >
-        {` (${formatNumber(priceImpact * 100, { toFixed: 2 })}%)`}
-      </EdgeText>
+      <PriceImpactText priceImpact={priceImpact} />
     ) : undefined
 
   return (
@@ -247,17 +237,5 @@ const getStyles = cacheStyles((theme: Theme) => ({
   bottomWarningText: {
     fontSize: theme.rem(0.75),
     color: theme.warningText
-  },
-  priceImpactLow: {
-    fontSize: theme.rem(0.75),
-    color: theme.deactivatedText
-  },
-  priceImpactMedium: {
-    fontSize: theme.rem(0.75),
-    color: theme.warningText
-  },
-  priceImpactHigh: {
-    fontSize: theme.rem(0.75),
-    color: theme.dangerText
   }
 }))

src/components/themed/PriceImpactText.tsx

@@ -0,0 +1,111 @@
+import { div, lte, sub } from 'biggystring'
+import type { EdgeSwapQuote } from 'edge-core-js'
+import * as React from 'react'
+
+import type { GuiExchangeRates } from '../../actions/ExchangeRateActions'
+import { formatNumber } from '../../locales/intl'
+import { getExchangeDenom } from '../../selectors/DenominationSelectors'
+import { convertCurrency } from '../../selectors/WalletSelectors'
+import { convertNativeToExchange } from '../../util/utils'
+import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
+import { EdgeText } from './EdgeText'
+
+/** Price impacts at or above this warrant a warning. */
+export const PRICE_IMPACT_WARNING_THRESHOLD = 0.05
+
+/**
+ * The fiat-value fraction a swap quote loses between its from and to sides
+ * (0.05 = 5%), or undefined when it cannot be computed or is not a loss.
+ * Works for wallet-to-wallet and swap-to-address quotes alike: the quote's
+ * destination wallet (synthetic for swap-to-address) carries the real
+ * `currencyConfig`.
+ */
+export function calculateQuotePriceImpact(
+  quote: EdgeSwapQuote,
+  exchangeRates: GuiExchangeRates,
+  defaultIsoFiat: string
+): number | undefined {
+  const { request, fromNativeAmount, toNativeAmount } = quote
+  const { fromWallet, fromTokenId, toWallet, toTokenId } = request
+  if (toWallet == null) return undefined
+
+  const fromExchangeDenom = getExchangeDenom(
+    fromWallet.currencyConfig,
+    fromTokenId
+  )
+  const toExchangeDenom = getExchangeDenom(toWallet.currencyConfig, toTokenId)
+
+  const fromExchangeAmount = convertNativeToExchange(
+    fromExchangeDenom.multiplier
+  )(fromNativeAmount)
+  const toExchangeAmount = convertNativeToExchange(toExchangeDenom.multiplier)(
+    toNativeAmount
+  )
+
+  const fromFiatValue = convertCurrency(
+    exchangeRates,
+    fromWallet.currencyInfo.pluginId,
+    fromTokenId,
+    defaultIsoFiat,
+    fromExchangeAmount
+  )
+  const toFiatValue = convertCurrency(
+    exchangeRates,
+    toWallet.currencyInfo.pluginId,
+    toTokenId,
+    defaultIsoFiat,
+    toExchangeAmount
+  )
+
+  if (lte(fromFiatValue, '0')) return undefined
+
+  const impact = parseFloat(
+    div(sub(fromFiatValue, toFiatValue), fromFiatValue, 8)
+  )
+  return impact > 0 ? impact : undefined
+}
+
+interface Props {
+  priceImpact: number | undefined
+}
+
+/**
+ * The colored ` (x.xx%)` price-delta suffix shared by the swap confirmation
+ * quote card and the send scene's quote row.
+ */
+export const PriceImpactText: React.FC<Props> = props => {
+  const { priceImpact } = props
+  const theme = useTheme()
+  const styles = getStyles(theme)
+
+  if (priceImpact == null || priceImpact <= 0) return null
+
+  return (
+    <EdgeText
+      style={
+        priceImpact >= 0.15
+          ? styles.priceImpactHigh
+          : priceImpact >= PRICE_IMPACT_WARNING_THRESHOLD
+          ? styles.priceImpactMedium
+          : styles.priceImpactLow
+      }
+    >
+      {` (${formatNumber(priceImpact * 100, { toFixed: 2 })}%)`}
+    </EdgeText>
+  )
+}
+
+const getStyles = cacheStyles((theme: Theme) => ({
+  priceImpactLow: {
+    color: theme.deactivatedText,
+    fontSize: theme.rem(0.75)
+  },
+  priceImpactMedium: {
+    color: theme.warningText,
+    fontSize: theme.rem(0.75)
+  },
+  priceImpactHigh: {
+    color: theme.dangerText,
+    fontSize: theme.rem(0.75)
+  }
+}))