feat: stacks fee selection

apps/mobile/ios/Podfile.lock

@@ -248,7 +248,7 @@ PODS:
     - ExpoModulesCore
   - ExpoLocalAuthentication (14.0.1):
     - ExpoModulesCore
-  - ExpoModulesCore (1.12.26):
+  - ExpoModulesCore (1.12.20):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1643,7 +1643,7 @@ DEPENDENCIES:
   - "ExpoImage (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@[email protected]_pqycbzooiimpwcftmzylw6b6ue/node_modules/expo-image/ios`)"
   - "ExpoKeepAwake (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@babel+core@7_w5fcokd4xqykouihhq65zfvhwu/node_modules/expo-keep-awake/ios`)"
   - "ExpoLocalAuthentication (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@ba_bcvjridgatxs26fiu2o33lgbby/node_modules/expo-local-authentication/ios`)"
-  - "ExpoModulesCore (from `../../../node_modules/.pnpm/[email protected].26/node_modules/expo-modules-core`)"
+  - "ExpoModulesCore (from `../../../node_modules/.pnpm/[email protected].20/node_modules/expo-modules-core`)"
   - "ExpoSecureStore (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]._qblhklgyytdrqryzqbjo45ylay/node_modules/expo-secure-store/ios`)"
   - "ExpoSystemUI (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@[email protected]_36opljfl2csscygkp6xjaz2hv4/node_modules/expo-system-ui/ios`)"
   - "ExpoWebBrowser (from `../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@babel+core@_rn7tpmwskp4kjoe2dtluysnlry/node_modules/expo-web-browser/ios`)"
@@ -1778,7 +1778,7 @@ EXTERNAL SOURCES:
   ExpoLocalAuthentication:
     :path: "../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected]_@ba_bcvjridgatxs26fiu2o33lgbby/node_modules/expo-local-authentication/ios"
   ExpoModulesCore:
-    :path: "../../../node_modules/.pnpm/[email protected].26/node_modules/expo-modules-core"
+    :path: "../../../node_modules/.pnpm/[email protected].20/node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../../../node_modules/.pnpm/[email protected][email protected]_@[email protected]._qblhklgyytdrqryzqbjo45ylay/node_modules/expo-secure-store/ios"
   ExpoSystemUI:
@@ -1944,7 +1944,7 @@ SPEC CHECKSUMS:
   ExpoImage: eab004b9363e388d3f6a118f18716de6dcfb8e8d
   ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
   ExpoLocalAuthentication: 9e02a56a4cf9868f0052656a93d4c94101a42ed7
-  ExpoModulesCore: 831ece8311a489418746925820bbffdda587d6f4
+  ExpoModulesCore: 5440e96a8ee014f4fd88e77264985fd0a65f5f8c
   ExpoSecureStore: 060cebcb956b80ddae09821610ac1aa9e1ac74cd
   ExpoSystemUI: d4f065a016cae6721b324eb659cdee4d4cf0cb26
   ExpoWebBrowser: 7595ccac6938eb65b076385fd23d035db9ecdc8e

apps/mobile/src/components/action-bar/action-bar-container.tsx

@@ -3,12 +3,10 @@ import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 import { useSheetNavigatorContext } from '@/common/sheet-navigator/sheet-navigator-provider';
 import { ActionBar, ActionBarMethods } from '@/components/action-bar/action-bar';
-import { AppRoutes } from '@/routes';
 import { TestId } from '@/shared/test-id';
 import { useWallets } from '@/store/wallets/wallets.read';
 import { isFeatureEnabled } from '@/utils/feature-flag';
 import { t } from '@lingui/macro';
-import { useRouter } from 'expo-router';
 
 import {
   ArrowsRepeatLeftRightIcon,
@@ -152,7 +150,6 @@ function ActionBarButton({ onPress, icon, label, testID }: ActionBarButtonProps)
 
 export const ActionBarContainer = forwardRef<ActionBarMethods>((_, ref) => {
   const { sendSheetRef, receiveSheetRef } = useSheetNavigatorContext();
-  const router = useRouter();
   const wallets = useWallets();
   const addWalletSheetRef = useRef<SheetRef>(null);
 
@@ -197,7 +194,10 @@ export const ActionBarContainer = forwardRef<ActionBarMethods>((_, ref) => {
       right={
         isFeatureEnabled() && (
           <ActionBarButton
-            onPress={() => router.navigate(AppRoutes.Swap)}
+            onPress={() => {
+              // TODO: do nothing for now
+              //router.navigate(AppRoutes.Swap)
+            }}
             icon={<ArrowsRepeatLeftRightIcon />}
             label={t({
               id: 'action_bar.swap_label',

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

@@ -1,25 +1,25 @@
+import { ReactNode } from 'react';
+
 import { Balance } from '@/components/balance/balance';
 import { FeeBadge } from '@/features/send/fee-badge';
-import { useBtcMarketDataQuery } from '@/queries/market-data/btc-market-data.query';
 import { t } from '@lingui/macro';
 
-import { FeeTypes, Money } from '@leather.io/models';
+import { MarketData, Money } from '@leather.io/models';
 import { Avatar, Box, Cell, ChevronRightIcon, Text } from '@leather.io/ui/native';
 import { baseCurrencyAmountInQuoteWithFallback } from '@leather.io/utils';
 
-import { getFeeData } from '../utils';
-
-interface FeeCardProps {
-  feeType: FeeTypes;
+interface BaseFeeCardProps {
   amount: Money;
   onPress(): void;
+  marketData: MarketData | undefined;
+  icon: ReactNode;
+  title: string;
+  time: string;
 }
 
-export function BitcoinFeeCard({ feeType, amount, onPress }: FeeCardProps) {
-  const { data: btcMarketData } = useBtcMarketDataQuery();
-  const { icon, title, time } = getFeeData(feeType);
+export function BaseFeeCard({ amount, onPress, marketData, icon, title, time }: BaseFeeCardProps) {
+  const fiatBalance = baseCurrencyAmountInQuoteWithFallback(amount, marketData);
 
-  const fiatBalance = baseCurrencyAmountInQuoteWithFallback(amount, btcMarketData);
   return (
     <>
       <Box flexDirection="row">

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { Avatar, Box, ItemLayout, Pressable } from '@leather.io/ui/native';
+
+interface BaseFeeOptionProps {
+  onPress(): void;
+  isSelected: boolean;
+  disabled: boolean;
+  icon: ReactNode;
+  title: string;
+  time: string;
+  balance: string;
+  balanceUsd: string;
+}
+
+export function BaseFeeOption({
+  onPress,
+  isSelected,
+  disabled,
+  icon,
+  title,
+  time,
+  balance,
+  balanceUsd,
+}: BaseFeeOptionProps) {
+  return (
+    <>
+      <Pressable
+        borderColor={isSelected ? 'ink.text-primary' : 'ink.border-default'}
+        borderWidth={1}
+        borderRadius="xs"
+        flexDirection="row"
+        alignItems="center"
+        p="3"
+        gap="3"
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <Avatar>{icon}</Avatar>
+        <ItemLayout
+          titleLeft={title}
+          captionLeft={time}
+          titleRight={balance}
+          captionRight={balanceUsd}
+        />
+        {disabled && (
+          <Box
+            top={0}
+            bottom={0}
+            right={0}
+            left={0}
+            position="absolute"
+            backgroundColor="ink.background-overlay"
+            opacity={0.1}
+          />
+        )}
+      </Pressable>
+    </>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { useBtcMarketDataQuery } from '@/queries/market-data/btc-market-data.query';
+
+import { FeeTypes, Money } from '@leather.io/models';
+
+import { getBitcoinFeeData } from '../../utils';
+import { BaseFeeCard } from './base-fee-card';
+
+interface FeeCardProps {
+  feeType: FeeTypes;
+  amount: Money;
+  onPress(): void;
+}
+
+export function BitcoinFeeCard({ feeType, amount, onPress }: FeeCardProps) {
+  const { data: btcMarketData } = useBtcMarketDataQuery();
+  const { icon, title, time } = getBitcoinFeeData(feeType);
+
+  return (
+    <BaseFeeCard
+      amount={amount}
+      onPress={onPress}
+      marketData={btcMarketData}
+      icon={icon}
+      title={title}
+      time={time}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+import { formatBalance } from '@/components/balance/balance';
+import { useLingui } from '@lingui/react';
+
+import { FeeTypes, Money } from '@leather.io/models';
+import { createMoney } from '@leather.io/utils';
+
+import { getBitcoinFeeData } from '../../utils';
+import { BaseFeeOption } from './base-fee-option';
+
+interface BitcoinFeeOptionProps {
+  feeType: FeeTypes;
+  fee: number;
+  feeRate: number;
+  usd: Money;
+  onPress(): void;
+  isSelected: boolean;
+  disabled: boolean;
+}
+
+export function BitcoinFeeOption({
+  feeType,
+  fee,
+  feeRate,
+  usd,
+  onPress,
+  isSelected,
+  disabled,
+}: BitcoinFeeOptionProps) {
+  const { i18n } = useLingui();
+  const sats = createMoney(fee, 'BTC');
+  return (
+    <BaseFeeOption
+      onPress={onPress}
+      icon={getBitcoinFeeData(feeType).icon}
+      title={getBitcoinFeeData(feeType).title}
+      time={getBitcoinFeeData(feeType).time}
+      isSelected={isSelected}
+      disabled={disabled}
+      balance={formatBalance(sats, false)}
+      balanceUsd={i18n._({
+        id: 'fees-sheet.fee-rate-caption',
+        message: '{feeRate} sats/B · {balanceUsd}',
+        values: { feeRate, balanceUsd: formatBalance(usd, true) },
+      })}
+    />
+  );
+}

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

@@ -1,16 +1,14 @@
 import { RefObject } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useBtcMarketDataQuery } from '@/queries/market-data/btc-market-data.query';
-import { useSettings } from '@/store/settings/settings';
-import { useTheme } from '@shopify/restyle';
 import BigNumber from 'bignumber.js';
 
 import { AverageBitcoinFeeRates, FeeTypes } from '@leather.io/models';
-import { Box, Sheet, SheetRef, Theme } from '@leather.io/ui/native';
+import { SheetRef } from '@leather.io/ui/native';
 import { baseCurrencyAmountInQuoteWithFallback, createMoney, match } from '@leather.io/utils';
 
-import { FeeOption } from './fee-options';
+import { BitcoinFeeOption } from './bitcoin-fee-option';
+import { FeeSheetLayout } from './fee-sheet.layout';
 
 const feeTypeArr = [FeeTypes.Low, FeeTypes.Middle, FeeTypes.High, FeeTypes.Custom];
 
@@ -33,9 +31,6 @@ export function FeesSheet({
   currentFeeRate,
   onChangeFee,
 }: FeesSheetProps) {
-  const { bottom } = useSafeAreaInsets();
-  const { themeDerivedFromThemePreference } = useSettings();
-  const theme = useTheme<Theme>();
   const { data: btcMarketData } = useBtcMarketDataQuery();
 
   function getUsd(fee: number) {
@@ -58,34 +53,25 @@ export function FeesSheet({
   }
 
   return (
-    <Sheet isScrollView ref={sheetRef} themeVariant={themeDerivedFromThemePreference}>
-      <Box
-        style={{
-          paddingBottom: theme.spacing[5] + bottom,
-          paddingTop: theme.spacing[4],
-        }}
-        gap="3"
-        p="3"
-      >
-        {feeTypeArr.map(feeType => {
-          const { feeRate, fee } = getFee(feeType);
-          return (
-            <FeeOption
-              isSelected={selectedFeeType === feeType}
-              disabled={feeType === FeeTypes.Custom}
-              onPress={() => {
-                setSelectedFeeType(feeType);
-                onChangeFee(feeType);
-              }}
-              key={feeType}
-              feeType={feeType}
-              feeRate={feeRate.toNumber()}
-              fee={fee}
-              usd={getUsd(fee)}
-            />
-          );
-        })}
-      </Box>
-    </Sheet>
+    <FeeSheetLayout sheetRef={sheetRef}>
+      {feeTypeArr.map(feeType => {
+        const { feeRate, fee } = getFee(feeType);
+        return (
+          <BitcoinFeeOption
+            isSelected={selectedFeeType === feeType}
+            disabled={feeType === FeeTypes.Custom}
+            onPress={() => {
+              setSelectedFeeType(feeType);
+              onChangeFee(feeType);
+            }}
+            key={feeType}
+            feeType={feeType}
+            feeRate={feeRate.toNumber()}
+            fee={fee}
+            usd={getUsd(fee)}
+          />
+        );
+      })}
+    </FeeSheetLayout>
   );
 }