feat: redesign send rpc transfer flow

package.json

@@ -153,7 +153,7 @@
     "@leather.io/query": "2.23.0",
     "@leather.io/stacks": "1.3.5",
     "@leather.io/tokens": "0.12.1",
-    "@leather.io/ui": "1.37.0",
+    "@leather.io/ui": "1.42.2",
     "@leather.io/utils": "0.19.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",
@@ -268,7 +268,7 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "3.2.2",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.5.2",
+    "@leather.io/panda-preset": "0.8.0",
     "@leather.io/prettier-config": "0.6.0",
     "@leather.io/rpc": "2.1.18",
     "@ls-lint/ls-lint": "2.2.3",

src/app/common/fees/use-fees.ts

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import type { MarketData } from '@leather.io/models';
+
+import type { FeesRawData, RawFee } from '@app/components/bitcoin-fees-list/bitcoin-fees.utils';
+
+export type FeeType = 'slow' | 'standard' | 'fast' | 'custom';
+
+export interface FeeDisplayInfo {
+  feeType: FeeType;
+  baseUnitsValue: number;
+  feeRate: number;
+  titleLeft: string;
+  captionLeft: string;
+  titleRight?: string;
+  captionRight?: string;
+}
+
+interface UseFeesProps {
+  defaultFeeType?: FeeType;
+  fees: FeesRawData;
+  getCustomFeeData(rate: number): RawFee;
+  marketData: MarketData;
+  formatFeeForDisplay({
+    rawFee,
+    marketData,
+  }: {
+    rawFee: RawFee;
+    marketData: MarketData;
+  }): FeeDisplayInfo;
+}
+
+export function useFeesHandler({
+  defaultFeeType = 'standard',
+  fees,
+  getCustomFeeData,
+  marketData,
+  formatFeeForDisplay,
+}: UseFeesProps) {
+  const [selectedFeeType, setSelectedFeeType] = useState<FeeType>(defaultFeeType);
+  const [editFeeSelected, setEditFeeSelected] = useState<FeeType>(selectedFeeType);
+  const [customFeeRate, setCustomFeeRate] = useState<string>('');
+
+  const customFeeData = getCustomFeeData(Number(customFeeRate));
+
+  const selectedFeeData = useMemo(() => {
+    if (selectedFeeType === 'custom') {
+      return formatFeeForDisplay({ rawFee: customFeeData, marketData });
+    }
+
+    const rawFee = fees[selectedFeeType];
+
+    if (!rawFee) {
+      return {};
+    }
+
+    return formatFeeForDisplay({ rawFee, marketData });
+  }, [fees, selectedFeeType, customFeeData, marketData, formatFeeForDisplay]);
+
+  useEffect(() => {
+    if (customFeeRate === '' && selectedFeeType !== 'custom') {
+      const data = fees[selectedFeeType];
+      if (data && data.feeRate) {
+        setCustomFeeRate(data.feeRate.toString());
+      }
+    }
+  }, [fees, selectedFeeType, customFeeRate]);
+
+  return {
+    selectedFeeType,
+    setSelectedFeeType,
+    selectedFeeData,
+    editFeeSelected,
+    setEditFeeSelected,
+    customFeeRate,
+    setCustomFeeRate,
+    customFeeData,
+  };
+}

src/app/common/switch-account/use-switch-account-sheet-context.ts

@@ -5,6 +5,7 @@ import type { SwitchAccountOutletContext } from './switch-account';
 export function useSwitchAccountSheet() {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
+
   return {
     isShowingSwitchAccount,
     setIsShowingSwitchAccount,