Merge pull request #5758 from EdgeApp/william/fiat-auto-precision

Default auto-precision to true in `useFiatText`

Author: swansontec

eslint.config.mjs

@@ -344,7 +344,6 @@ export default [
       'src/components/themed/DividerLine.tsx',
       'src/components/themed/EdgeProviderComponent.tsx',
       'src/components/themed/EdgeText.tsx',
-      'src/components/themed/ExchangeQuoteComponent.tsx',
       'src/components/themed/ExplorerCard.tsx',
       'src/components/themed/Fade.tsx',
 
@@ -399,7 +398,6 @@ export default [
       'src/components/tiles/FiatAmountTile.tsx',
       'src/components/tiles/InterestRateChangeTile.tsx',
       'src/components/tiles/LtvRatioTile.tsx',
-      'src/components/tiles/NetworkFeeTile.tsx',
       'src/components/tiles/PercentageChangeArrowTile.tsx',
       'src/components/tiles/TotalDebtCollateralTile.tsx',
       'src/constants/WalletAndCurrencyConstants.ts',
@@ -423,7 +421,6 @@ export default [
       'src/hooks/useBackButtonToast.tsx',
       'src/hooks/useCryptoText.ts',
       'src/hooks/useExperimentConfig.ts',
-      'src/hooks/useFiatText.ts',
       'src/hooks/useFilter.ts',
       'src/hooks/useHistoricalRate.ts',
       'src/hooks/useIconColor.ts',

src/__tests__/scenes/__snapshots__/SwapConfirmationScene.test.tsx.snap

@@ -1421,7 +1421,7 @@ exports[`SwapConfirmationScene should render with loading props 1`] = `
                       ]
                     }
                   >
-                    €0.00
+                    €0.000000
                   </Text>
                 </View>
               </View>

src/components/themed/ExchangeQuoteComponent.tsx

@@ -9,7 +9,6 @@ import { useTokenDisplayData } from '../../hooks/useTokenDisplayData'
 import { lstrings } from '../../locales/strings'
 import { convertCurrency } from '../../selectors/WalletSelectors'
 import { useSelector } from '../../types/reactRedux'
-import { getWalletTokenId } from '../../util/CurrencyInfoHelpers'
 import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
 import { DECIMAL_PRECISION, removeIsoPrefix } from '../../util/utils'
 import { EdgeCard } from '../cards/EdgeCard'
@@ -24,7 +23,7 @@ interface Props {
   showFeeWarning?: boolean | null
 }
 
-export const ExchangeQuote = (props: Props) => {
+export const ExchangeQuote: React.FC<Props> = props => {
   const { fromTo, quote, showFeeWarning } = props
   const { request, fromNativeAmount, toNativeAmount, networkFee } = quote
   const { fromWallet, fromTokenId, toWallet, toTokenId } = request
@@ -37,7 +36,7 @@ export const ExchangeQuote = (props: Props) => {
 
   // Fees are assumed to be denominated in the native currency
   const feeNativeAmount = networkFee.nativeAmount
-  const feeTokenId = getWalletTokenId(fromWallet, networkFee.currencyCode)
+  const feeTokenId = networkFee.tokenId
   const feeCryptoText = useCryptoText({
     wallet: fromWallet,
     nativeAmount: feeNativeAmount,
@@ -56,14 +55,16 @@ export const ExchangeQuote = (props: Props) => {
   })
 
   const feeFiatText = useFiatText({
-    autoPrecision: true,
-    pluginId: fromWallet.currencyInfo.pluginId,
-    tokenId: feeTokenId,
     cryptoExchangeMultiplier: feeDenomination.multiplier,
     isoFiatCurrencyCode,
     nativeCryptoAmount: feeNativeAmount,
+    pluginId: fromWallet.currencyInfo.pluginId,
+    tokenId: feeTokenId,
+
+    autoPrecision: true,
     hideFiatSymbol: true,
-    subCentTruncation: true
+    subCentTruncation: true,
+    displayZeroAsInteger: false
   })
 
   const feeFiatAmount = useSelector(state => {
@@ -121,7 +122,7 @@ export const ExchangeQuote = (props: Props) => {
     label: React.ReactNode,
     value: React.ReactNode,
     style: any = {}
-  ) => {
+  ): React.ReactNode => {
     return (
       <View style={[styles.row, style]}>
         <View style={styles.label}>{label}</View>
@@ -130,11 +131,10 @@ export const ExchangeQuote = (props: Props) => {
     )
   }
 
-  const renderBottom = () => {
+  const renderBottom = (): React.ReactNode => {
     if (fromTo === 'from') {
-      const feeTextStyle = showFeeWarning
-        ? styles.bottomWarningText
-        : styles.bottomText
+      const feeTextStyle =
+        showFeeWarning === true ? styles.bottomWarningText : styles.bottomText
 
       return (
         <View style={styles.bottomContainer}>

src/components/tiles/NetworkFeeTile.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 // TODO: Integrate into SendScene, FlipInputModal, and AdvancedDetailsModal
-export const NetworkFeeTile = (props: Props) => {
+export const NetworkFeeTile: React.FC<Props> = props => {
   const { wallet, nativeAmount } = props
   const { currencyConfig } = wallet
 
@@ -66,14 +66,16 @@ export const NetworkFeeTile = (props: Props) => {
   })
 
   const feeFiatAmount = useFiatText({
-    appendFiatCurrencyCode: false,
-    autoPrecision: true,
+    cryptoExchangeMultiplier: exchangeDenominationMultiplier,
+    isoFiatCurrencyCode: defaultIsoFiat,
+    nativeCryptoAmount: nativeAmount,
     pluginId: wallet.currencyInfo.pluginId,
     tokenId: null,
-    cryptoExchangeMultiplier: exchangeDenominationMultiplier,
+
+    appendFiatCurrencyCode: false,
+    autoPrecision: true,
     fiatSymbolSpace: true,
-    isoFiatCurrencyCode: defaultIsoFiat,
-    nativeCryptoAmount: nativeAmount
+    displayZeroAsInteger: false
   })
 
   const title = lstrings.loan_estimate_fee

src/hooks/useFiatText.ts

@@ -12,39 +12,63 @@ import { useSelector } from '../types/reactRedux'
 import { DECIMAL_PRECISION, removeIsoPrefix, zeroString } from '../util/utils'
 
 const defaultMultiplier = Math.pow(10, DECIMAL_PRECISION).toString()
+
 interface Props {
-  appendFiatCurrencyCode?: boolean
-  autoPrecision?: boolean
-  pluginId: string
-  tokenId: EdgeTokenId
   cryptoExchangeMultiplier?: string
-  fiatSymbolSpace?: boolean
-  hideFiatSymbol?: boolean
+  nativeCryptoAmount?: string
   isoFiatCurrencyCode?: string
+  pluginId: string
+  tokenId: EdgeTokenId
+
   maxPrecision?: number
   minPrecision?: number
-  nativeCryptoAmount?: string
+
+  /** Show the fiat name after the number, like "USD" */
+  appendFiatCurrencyCode?: boolean
+
+  /**
+   * Automatically add more decimal places to show small numbers.
+   * Defaults to true.
+   */
+  autoPrecision?: boolean
+
+  /** Show 0 as "0" without any decimals. Defaults to true. */
+  displayZeroAsInteger?: boolean
+
+  /** Put a space after the fiat symbol, like "$ 1.00" */
+  fiatSymbolSpace?: boolean
+
+  /** Show a placeholder instead of the value */
+  hideBalance?: boolean
+
+  /** Remove the fiat symbol (no $) */
+  hideFiatSymbol?: boolean
+
+  /** Don't group digits for long numbers */
   noGrouping?: boolean
+
+  /** Round small values to "0.01" */
   subCentTruncation?: boolean
-  hideBalance?: boolean
 }
 
 export const useFiatText = (props: Props): string => {
   const {
-    appendFiatCurrencyCode,
-    autoPrecision = false,
-    pluginId,
-    tokenId,
     cryptoExchangeMultiplier = defaultMultiplier,
-    fiatSymbolSpace = false,
-    hideFiatSymbol,
+    nativeCryptoAmount = cryptoExchangeMultiplier,
     isoFiatCurrencyCode = USD_FIAT,
+    pluginId,
+    tokenId,
     maxPrecision,
     minPrecision,
-    nativeCryptoAmount = cryptoExchangeMultiplier,
-    noGrouping,
-    subCentTruncation,
-    hideBalance = false
+
+    appendFiatCurrencyCode = false,
+    autoPrecision = true,
+    displayZeroAsInteger = true,
+    fiatSymbolSpace = false,
+    hideBalance = false,
+    hideFiatSymbol = false,
+    noGrouping = false,
+    subCentTruncation = false
   } = props
 
   // Convert native to fiat amount.
@@ -68,18 +92,20 @@ export const useFiatText = (props: Props): string => {
   const isSubCentTruncationActive =
     subCentTruncation && lt(abs(fiatAmount), '0.01')
 
-  // Convert the amount to an internationalized string or '0'
+  // Use a placeholder if we are hidding the balance:
   const fiatString = hideBalance
     ? lstrings.redacted_placeholder
-    : autoPrecision || !zeroString(fiatAmount)
-    ? formatFiatString({
+    : // Flatten 0's:
+    displayZeroAsInteger && zeroString(fiatAmount)
+    ? '0'
+    : // Normal decimal formatting:
+      formatFiatString({
         fiatAmount: isSubCentTruncationActive ? '0.01' : fiatAmount,
         autoPrecision,
         minPrecision,
         maxPrecision: isSubCentTruncationActive ? 2 : maxPrecision,
         noGrouping
       })
-    : '0'
 
   const lessThanSymbol = isSubCentTruncationActive ? '<' : ''
   const fiatSymbol = hideFiatSymbol
@@ -101,10 +127,10 @@ export const formatFiatString = (props: {
   maxPrecision?: number
 }): string => {
   const {
+    autoPrecision = true,
     fiatAmount,
-    minPrecision = 2,
     maxPrecision = 6,
-    autoPrecision = true,
+    minPrecision = 2,
     noGrouping = false
   } = props
 
@@ -142,10 +168,11 @@ export const displayFiatAmount = (
   fiatAmount?: number | string,
   precision: number = 2,
   noGrouping: boolean = true
-) => {
+): string => {
   const fiatAmountBns = fiatAmount != null ? add(fiatAmount, '0') : undefined
-  if (fiatAmountBns == null || fiatAmountBns === '0')
+  if (fiatAmountBns == null || fiatAmountBns === '0') {
     return precision > 0 ? formatNumber('0.' + '0'.repeat(precision)) : '0'
+  }
   const absoluteAmount = abs(fiatAmountBns)
   return formatNumber(toFixed(absoluteAmount, precision, precision), {
     noGrouping