refactor: replace occurrences of USD with fiat in fee-related approver code

Author: tigranpetrossian

apps/mobile/ios/Podfile.lock

@@ -275,6 +275,8 @@ PODS:
     - Yoga
   - ExpoSecureStore (13.0.2):
     - ExpoModulesCore
+  - ExpoSharing (12.0.1):
+    - ExpoModulesCore
   - ExpoSquircleView (1.1.0):
     - ExpoModulesCore
     - PocketSVG (~> 2.7.3)
@@ -1402,8 +1404,31 @@ PODS:
     - React-debug
   - react-native-get-random-values (1.11.0):
     - React-Core
+  - react-native-keyboard-controller (1.12.7):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-safe-area-context (4.10.1):
     - React-Core
+  - react-native-view-shot (3.8.0):
+    - React-Core
   - react-native-webview (13.8.6):
     - DoubleConversion
     - glog
@@ -1781,6 +1806,7 @@ DEPENDENCIES:
   - "ExpoLocalAuthentication (from `../../../node_modules/.pnpm/[email protected][email protected]/node_modules/expo-local-authentication/ios`)"
   - "ExpoModulesCore (from `../../../node_modules/.pnpm/[email protected]/node_modules/expo-modules-core`)"
   - "ExpoSecureStore (from `../../../node_modules/.pnpm/[email protected]_patch_hash=b2753e05d2293ca1584f223c366d82904c6efe44d9efd76d610b7080fe816754_expo@51.0.26/node_modules/expo-secure-store/ios`)"
+  - "ExpoSharing (from `../../../node_modules/.pnpm/[email protected][email protected]/node_modules/expo-sharing/ios`)"
   - "ExpoSquircleView (from `../../../node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected]_@babel+pre_29058e40f55c91b6ad73a602246f895b/node_modules/expo-squircle-view/ios`)"
   - "ExpoSystemUI (from `../../../node_modules/.pnpm/[email protected][email protected]/node_modules/expo-system-ui/ios`)"
   - "ExpoWebBrowser (from `../../../node_modules/.pnpm/[email protected][email protected]/node_modules/expo-web-browser/ios`)"
@@ -1822,7 +1848,9 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - react-native-keyboard-controller (from `../node_modules/react-native-keyboard-controller`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-view-shot (from `../node_modules/react-native-view-shot`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1940,6 +1968,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/.pnpm/[email protected]/node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../../../node_modules/.pnpm/[email protected]_patch_hash=b2753e05d2293ca1584f223c366d82904c6efe44d9efd76d610b7080fe816754_expo@51.0.26/node_modules/expo-secure-store/ios"
+  ExpoSharing:
+    :path: "../../../node_modules/.pnpm/[email protected][email protected]/node_modules/expo-sharing/ios"
   ExpoSquircleView:
     :path: "../../../node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected]_@babel+pre_29058e40f55c91b6ad73a602246f895b/node_modules/expo-squircle-view/ios"
   ExpoSystemUI:
@@ -2011,8 +2041,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-keyboard-controller:
+    :path: "../node_modules/react-native-keyboard-controller"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-view-shot:
+    :path: "../node_modules/react-native-view-shot"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-nativeconfig:
@@ -2114,6 +2148,7 @@ SPEC CHECKSUMS:
   ExpoLocalAuthentication: 9e02a56a4cf9868f0052656a93d4c94101a42ed7
   ExpoModulesCore: 5440e96a8ee014f4fd88e77264985fd0a65f5f8c
   ExpoSecureStore: 060cebcb956b80ddae09821610ac1aa9e1ac74cd
+  ExpoSharing: 8db05dd85081219f75989a3db2c92fe5e9741033
   ExpoSquircleView: ab74c87a366c8058b846a91de679331159cc64ae
   ExpoSystemUI: d4f065a016cae6721b324eb659cdee4d4cf0cb26
   ExpoWebBrowser: 7595ccac6938eb65b076385fd23d035db9ecdc8e
@@ -2166,7 +2201,9 @@ SPEC CHECKSUMS:
   React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
   React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
+  react-native-keyboard-controller: 07a457e3a882f85591f98034e6fcc930df9a8865
   react-native-safe-area-context: dcab599c527c2d7de2d76507a523d20a0b83823d
+  react-native-view-shot: 6b7ed61d77d88580fed10954d45fad0eb2d47688
   react-native-webview: 05bae3a03a1e4f59568dfc05286c0ebf8954106c
   React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
   React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f

apps/mobile/src/features/approver/components/fees/base-fee-card.tsx

@@ -18,7 +18,7 @@ interface BaseFeeCardProps {
 }
 
 export function BaseFeeCard({ amount, onPress, marketData, icon, title, time }: BaseFeeCardProps) {
-  const fiatBalance = baseCurrencyAmountInQuoteWithFallback(amount, marketData);
+  const fiatAmount = baseCurrencyAmountInQuoteWithFallback(amount, marketData);
 
   return (
     <>
@@ -44,7 +44,7 @@ export function BaseFeeCard({ amount, onPress, marketData, icon, title, time }:
             <Box flexDirection="row" alignItems="center" gap="2">
               <Box alignItems="flex-end">
                 <Balance balance={amount} variant="label02" />
-                <Balance balance={fiatBalance} variant="label02" color="ink.text-subdued" />
+                <Balance balance={fiatAmount} variant="label02" color="ink.text-subdued" />
               </Box>
               <ChevronRightIcon variant="small" />
             </Box>

apps/mobile/src/features/approver/components/fees/base-fee-option.tsx

@@ -9,8 +9,8 @@ interface BaseFeeOptionProps {
   icon: ReactElement;
   title: string;
   time: string;
-  balance: string;
-  balanceUsd: string;
+  formattedFeeAmount: string;
+  formattedFiatFeeAmount: string;
 }
 
 export function BaseFeeOption({
@@ -20,8 +20,8 @@ export function BaseFeeOption({
   icon,
   title,
   time,
-  balance,
-  balanceUsd,
+  formattedFeeAmount,
+  formattedFiatFeeAmount,
 }: BaseFeeOptionProps) {
   return (
     <>
@@ -40,8 +40,8 @@ export function BaseFeeOption({
         <ItemLayout
           titleLeft={title}
           captionLeft={time}
-          titleRight={balance}
-          captionRight={balanceUsd}
+          titleRight={formattedFeeAmount}
+          captionRight={formattedFiatFeeAmount}
         />
         {disabled && (
           <Box

apps/mobile/src/features/approver/components/fees/bitcoin-fee-option.tsx

@@ -11,7 +11,7 @@ interface BitcoinFeeOptionProps {
   feeType: FeeTypes;
   fee: number;
   feeRate: number;
-  usd: Money;
+  fiatFee: Money;
   onPress(): void;
   isSelected: boolean;
   disabled: boolean;
@@ -21,7 +21,7 @@ export function BitcoinFeeOption({
   feeType,
   fee,
   feeRate,
-  usd,
+  fiatFee,
   onPress,
   isSelected,
   disabled,
@@ -36,11 +36,11 @@ export function BitcoinFeeOption({
       time={getBitcoinFeeData(feeType).time}
       isSelected={isSelected}
       disabled={disabled}
-      balance={formatBalance({ balance: sats, isFiat: false })}
-      balanceUsd={i18n._({
+      formattedFeeAmount={formatBalance({ balance: sats, isFiat: false })}
+      formattedFiatFeeAmount={i18n._({
         id: 'fees-sheet.fee-rate-caption',
-        message: '{feeRate} sats/B · {balanceUsd}',
-        values: { feeRate, balanceUsd: formatBalance({ balance: usd, isFiat: true }) },
+        message: '{feeRate} sats/B · {fiatFee}',
+        values: { feeRate, fiatFee: formatBalance({ balance: fiatFee, isFiat: true }) },
       })}
     />
   );

apps/mobile/src/features/approver/components/fees/bitcoin-fee-sheet.tsx

@@ -33,10 +33,8 @@ export function FeesSheet({
 }: FeesSheetProps) {
   const { data: btcMarketData } = useBtcMarketDataQuery();
 
-  function getUsd(fee: number) {
-    if (!fee) return createMoney(0, 'USD');
-    const btcBalance = createMoney(fee, 'BTC');
-    return baseCurrencyAmountInQuoteWithFallback(btcBalance, btcMarketData);
+  function convertFeeToFiat(fee: number) {
+    return baseCurrencyAmountInQuoteWithFallback(createMoney(fee, 'BTC'), btcMarketData);
   }
 
   function getFee(feeType: FeeTypes) {
@@ -67,7 +65,7 @@ export function FeesSheet({
             feeType={feeType}
             feeRate={feeRate.toNumber()}
             fee={fee}
-            usd={getUsd(fee)}
+            fiatFee={convertFeeToFiat(fee)}
           />
         );
       })}

apps/mobile/src/features/approver/components/fees/stacks-fee-option.tsx

@@ -8,7 +8,7 @@ import { BaseFeeOption } from './base-fee-option';
 interface StacksFeeOptionProps {
   feeType: FeeTypes;
   fee: Money;
-  usd: Money;
+  fiatFee: Money;
   onPress(): void;
   isSelected: boolean;
   disabled: boolean;
@@ -17,7 +17,7 @@ interface StacksFeeOptionProps {
 export function StacksFeeOption({
   feeType,
   fee,
-  usd,
+  fiatFee,
   onPress,
   isSelected,
   disabled,
@@ -30,8 +30,8 @@ export function StacksFeeOption({
       icon={getStacksFeeData(feeType).icon}
       title={getStacksFeeData(feeType).title}
       time={getStacksFeeData(feeType).time}
-      balance={formatBalance({ balance: fee, isFiat: false })}
-      balanceUsd={formatBalance({ balance: usd, isFiat: true })}
+      formattedFeeAmount={formatBalance({ balance: fee, isFiat: false })}
+      formattedFiatFeeAmount={formatBalance({ balance: fiatFee, isFiat: true })}
     />
   );
 }

apps/mobile/src/features/approver/components/fees/stacks-fee-sheet.tsx

@@ -30,9 +30,8 @@ export function StacksFeesSheet({
 }: FeesSheetProps) {
   const { data: stxMarketData } = useStxMarketDataQuery();
 
-  function getUsd(fee: Money) {
-    const usdBalance = baseCurrencyAmountInQuoteWithFallback(fee, stxMarketData);
-    return usdBalance;
+  function convertFeeToFiat(fee: Money) {
+    return baseCurrencyAmountInQuoteWithFallback(fee, stxMarketData);
   }
 
   return (
@@ -50,7 +49,7 @@ export function StacksFeesSheet({
             key={feeType}
             feeType={feeType}
             fee={fee}
-            usd={getUsd(fee)}
+            fiatFee={convertFeeToFiat(fee)}
           />
         );
       })}

apps/mobile/src/features/approver/components/inputs-outputs-card.tsx

@@ -15,19 +15,19 @@ interface InputsAndOutputsCardProps {
 export function InputsAndOutputsCard({ inputs, outputs }: InputsAndOutputsCardProps) {
   const { data: btcMarketData } = useBtcMarketDataQuery();
 
-  function addBalance<T extends PsbtInput | PsbtOutput>(inputOutput: T) {
-    const btcBalance = createMoney(Number(inputOutput.value), 'BTC');
-    const usdBalance = baseCurrencyAmountInQuoteWithFallback(btcBalance, btcMarketData);
+  function annotateWithMoney<T extends PsbtInput | PsbtOutput>(inputOutput: T) {
+    const btcAmount = createMoney(Number(inputOutput.value), 'BTC');
+    const fiatAmount = baseCurrencyAmountInQuoteWithFallback(btcAmount, btcMarketData);
     return {
       ...inputOutput,
-      btcBalance,
-      usdBalance,
+      btcAmount,
+      fiatAmount,
     };
   }
 
-  const inputsWithBalance = inputs.map(addBalance);
+  const inputsWithMoney = inputs.map(annotateWithMoney);
+  const outputsWithMoney = outputs.map(annotateWithMoney);
 
-  const outputsWithBalance = outputs.map(addBalance);
   return (
     <Box gap="5">
       <Text variant="label02">
@@ -44,13 +44,13 @@ export function InputsAndOutputsCard({ inputs, outputs }: InputsAndOutputsCardPr
           })}
         </Text>
         <Box mx="-5">
-          {inputsWithBalance.map(input => (
+          {inputsWithMoney.map(annotateWithMoney).map(input => (
             <UtxoRow
-              key={input.txid + input.address + input.btcBalance.amount.valueOf()}
+              key={input.txid + input.address + input.btcAmount.amount.valueOf()}
               txid={input.txid}
               address={input.address}
-              btcBalance={input.btcBalance}
-              usdBalance={input.usdBalance}
+              btcAmount={input.btcAmount}
+              fiatAmount={input.fiatAmount}
               isLocked
             />
           ))}
@@ -64,12 +64,12 @@ export function InputsAndOutputsCard({ inputs, outputs }: InputsAndOutputsCardPr
           })}
         </Text>
         <Box mx="-5">
-          {outputsWithBalance.map(output => (
+          {outputsWithMoney.map(output => (
             <UtxoRow
-              key={output.address + output.btcBalance.amount.valueOf()}
+              key={output.address + output.btcAmount.amount.valueOf()}
               address={output.address}
-              btcBalance={output.btcBalance}
-              usdBalance={output.usdBalance}
+              btcAmount={output.btcAmount}
+              fiatAmount={output.fiatAmount}
               isLocked
             />
           ))}

apps/mobile/src/features/approver/components/utxo-row.tsx

@@ -7,12 +7,12 @@ import { truncateMiddle } from '@leather.io/utils';
 interface UtxoRowProps {
   isLocked: boolean;
   address: string;
-  btcBalance: Money;
-  usdBalance: Money;
+  btcAmount: Money;
+  fiatAmount: Money;
   txid?: string;
 }
 
-export function UtxoRow({ isLocked, address, btcBalance, usdBalance, txid }: UtxoRowProps) {
+export function UtxoRow({ isLocked, address, btcAmount, fiatAmount, txid }: UtxoRowProps) {
   const icon = isLocked ? <LockIcon /> : <UnlockIcon color="red.action-primary-default" />;
 
   return (
@@ -25,8 +25,8 @@ export function UtxoRow({ isLocked, address, btcBalance, usdBalance, txid }: Utx
         {txid && <Cell.Label variant="secondary">{truncateMiddle(txid)}</Cell.Label>}
       </Cell.Content>
       <Cell.Aside>
-        <Balance balance={btcBalance} variant="label02" />
-        <Balance balance={usdBalance} variant="label02" color="ink.text-subdued" />
+        <Balance balance={btcAmount} variant="label02" />
+        <Balance balance={fiatAmount} variant="label02" color="ink.text-subdued" />
       </Cell.Aside>
     </Cell.Root>
   );