fix(mobile): collapse the sheet and show toast on fee selection in approver

Author: tigranpetrossian

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { Avatar, Box, ItemLayout, Pressable } from '@leather.io/ui/native';
+import { Avatar, ItemLayout, Pressable } from '@leather.io/ui/native';
 
 interface BaseFeeOptionProps {
   onPress(): void;
@@ -23,10 +23,15 @@ export function BaseFeeOption({
   formattedFeeAmount,
   formattedFiatFeeAmount,
 }: BaseFeeOptionProps) {
+  const borderColor = {
+    default: isSelected ? 'ink.text-primary' : 'ink.border-default',
+    pressed: 'ink.action-primary-hover',
+  } as const;
+
   return (
     <>
       <Pressable
-        borderColor={isSelected ? 'ink.text-primary' : 'ink.border-default'}
+        borderColor={borderColor.default}
         borderWidth={1}
         borderRadius="xs"
         flexDirection="row"
@@ -35,6 +40,14 @@ export function BaseFeeOption({
         gap="3"
         onPress={onPress}
         disabled={disabled}
+        opacity={disabled ? 0.5 : 1}
+        pressEffects={{
+          borderColor: {
+            from: borderColor.default,
+            to: borderColor.pressed,
+            settings: { type: 'timing' },
+          },
+        }}
       >
         <Avatar icon={icon} />
         <ItemLayout
@@ -43,17 +56,6 @@ export function BaseFeeOption({
           titleRight={formattedFeeAmount}
           captionRight={formattedFiatFeeAmount}
         />
-        {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-sheet.tsx

@@ -15,17 +15,15 @@ const feeTypes = [FeeTypes.Low, FeeTypes.Middle, FeeTypes.High, FeeTypes.Custom]
 interface FeesSheetProps {
   sheetRef: RefObject<SheetRef>;
   selectedFeeType: FeeTypes;
-  setSelectedFeeType(feeType: FeeTypes): void;
   fees: AverageBitcoinFeeRates | undefined;
   txSize: number;
   currentFeeRate: number;
   onChangeFee(feeType: FeeTypes): void;
 }
 
-export function FeesSheet({
+export function BitcoinFeesSheet({
   sheetRef,
   selectedFeeType,
-  setSelectedFeeType,
   fees,
   txSize,
   currentFeeRate,
@@ -49,6 +47,11 @@ export function FeesSheet({
     return { feeRate, fee };
   }
 
+  function handleFeeChange(feeType: FeeTypes) {
+    onChangeFee(feeType);
+    sheetRef.current?.close();
+  }
+
   return (
     <FeeSheetLayout sheetRef={sheetRef}>
       {feeTypes.map(feeType => {
@@ -57,10 +60,7 @@ export function FeesSheet({
           <BitcoinFeeOption
             isSelected={selectedFeeType === feeType}
             disabled={feeType === FeeTypes.Custom}
-            onPress={() => {
-              setSelectedFeeType(feeType);
-              onChangeFee(feeType);
-            }}
+            onPress={() => handleFeeChange(feeType)}
             key={feeType}
             feeType={feeType}
             feeRate={feeRate.toNumber()}

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

@@ -21,7 +21,7 @@ export function FeeSheetLayout({ sheetRef, children }: FeeSheetLayoutProps) {
       <Box
         style={{
           paddingBottom: theme.spacing[5] + bottom,
-          paddingTop: theme.spacing[4],
+          paddingTop: theme.spacing[5],
         }}
         gap="3"
         p="3"

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

@@ -9,12 +9,11 @@ import { baseCurrencyAmountInQuoteWithFallback } from '@leather.io/utils';
 import { FeeSheetLayout } from './fee-sheet.layout';
 import { StacksFeeOption } from './stacks-fee-option';
 
-const feeTypeArr = [FeeTypes.Low, FeeTypes.Middle, FeeTypes.High, FeeTypes.Custom];
+const feeTypes = [FeeTypes.Low, FeeTypes.Middle, FeeTypes.High, FeeTypes.Custom];
 
 interface FeesSheetProps {
   sheetRef: RefObject<SheetRef>;
   selectedFeeType: FeeTypes;
-  setSelectedFeeType(feeType: FeeTypes): void;
   fees: Record<FeeTypes, Money>;
   currentFee: Money;
   onChangeFee(feeType: FeeTypes): void;
@@ -23,7 +22,6 @@ interface FeesSheetProps {
 export function StacksFeesSheet({
   sheetRef,
   selectedFeeType,
-  setSelectedFeeType,
   fees,
   currentFee,
   onChangeFee,
@@ -34,18 +32,20 @@ export function StacksFeesSheet({
     return baseCurrencyAmountInQuoteWithFallback(fee, stxMarketData);
   }
 
+  function handleChangeFee(feeType: FeeTypes) {
+    sheetRef.current?.close();
+    onChangeFee(feeType);
+  }
+
   return (
     <FeeSheetLayout sheetRef={sheetRef}>
-      {feeTypeArr.map(feeType => {
+      {feeTypes.map(feeType => {
         const fee = feeType !== FeeTypes.Custom ? fees[feeType] : currentFee;
         return (
           <StacksFeeOption
             isSelected={selectedFeeType === feeType}
             disabled={feeType === FeeTypes.Custom}
-            onPress={() => {
-              setSelectedFeeType(feeType);
-              onChangeFee(feeType);
-            }}
+            onPress={() => handleChangeFee(feeType)}
             key={feeType}
             feeType={feeType}
             fee={fee}

apps/mobile/src/features/psbt-signer/psbt-signer.tsx

@@ -44,7 +44,7 @@ import {
 } from '@leather.io/utils';
 
 import { ApproverButtons } from '../approver/components/approver-buttons';
-import { FeesSheet } from '../approver/components/fees/bitcoin-fee-sheet';
+import { BitcoinFeesSheet } from '../approver/components/fees/bitcoin-fee-sheet';
 import { ApproverState } from '../approver/utils';
 import { usePsbtAccounts } from './use-psbt-accounts';
 import { usePsbtPayers } from './use-psbt-payers';
@@ -196,7 +196,15 @@ export function BasePsbtSigner({
       if (!tx) throw new Error('No tx');
       const psbtHex = bytesToHex(tx.psbt);
 
+      setSelectedFeeType(feeType);
       setPsbtHex(psbtHex);
+      displayToast({
+        title: t({
+          id: 'approver.send.btc.success.change-fee',
+          message: 'Fee updated',
+        }),
+        type: 'success',
+      });
     }
   }
 
@@ -275,9 +283,7 @@ export function BasePsbtSigner({
             <BitcoinFeeCard
               feeType={selectedFeeType}
               amount={psbtDetails.fee}
-              onPress={() => {
-                feeSheetRef.current?.present();
-              }}
+              onPress={() => feeSheetRef.current?.present()}
             />
           </Approver.Section>
           <Approver.Advanced
@@ -327,10 +333,9 @@ export function BasePsbtSigner({
           />
         )}
       </Approver>
-      <FeesSheet
+      <BitcoinFeesSheet
         sheetRef={feeSheetRef}
         selectedFeeType={selectedFeeType}
-        setSelectedFeeType={setSelectedFeeType}
         onChangeFee={onChangeFee}
         fees={feeRates}
         txSize={txVBytes}

apps/mobile/src/features/stacks-tx-signer/stacks-tx-signer.tsx

@@ -147,6 +147,13 @@ export function StacksTxSigner({
         const newTxHex = newTx.serialize();
         setTxHex(newTxHex);
         setSelectedFeeType(feeType);
+        displayToast({
+          title: t({
+            id: 'approver.send.stx.success.change-fee',
+            message: 'Fee updated',
+          }),
+          type: 'success',
+        });
       }
     } catch {
       displayToast({
@@ -324,7 +331,6 @@ export function StacksTxSigner({
       <StacksFeesSheet
         sheetRef={feeSheetRef}
         selectedFeeType={selectedFeeType}
-        setSelectedFeeType={setSelectedFeeType}
         onChangeFee={onChangeFee}
         fees={fees}
         currentFee={createMoney(tx.auth.spendingCondition.fee, 'STX')}