From 1ee1e62d7ceeef9887c722ebeb053117c45f0870 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 14:03:11 +0000
Subject: [PATCH 1/2] fix(card-deposit): render WalletTokenButton inline inside
 amount input

Drop the separate "Token" row and surface the wallet token selector in
the same flex-row as the amount input, matching the savings deposit
modal layout.

AmountInput now accepts an optional rightSlot prop; CardDepositInternalForm
passes WalletTokenButton as the slot when the WALLET source is active on
production, replacing the static USDC/USDC.e image + label.

https://claude.ai/code/session_01TDpHy9uTrVX3PTRp9xS9S5
---
 components/Card/CardDepositInternalForm.tsx | 41 ++++++++++++---------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/Card/CardDepositInternalForm.tsx b/components/Card/CardDepositInternalForm.tsx
index b3a0e6b04..011ed7512 100644
--- a/components/Card/CardDepositInternalForm.tsx
+++ b/components/Card/CardDepositInternalForm.tsx
@@ -306,6 +306,8 @@ type AmountInputProps = {
   onAmountEntry?: () => void;
   /** Symbol for Wallet source (e.g. USDC.e or rUSD). */
   walletTokenSymbol: string;
+  /** Optional override for the right-hand token cell (e.g. WalletTokenButton). */
+  rightSlot?: React.ReactNode;
 };
 
 function AmountInput({
@@ -314,6 +316,7 @@ function AmountInput({
   from,
   onAmountEntry,
   walletTokenSymbol,
+  rightSlot,
 }: AmountInputProps) {
   const getTokenImage = () => {
     if (from === CardDepositSource.WALLET) return getAsset('images/usdc-4x.png');
@@ -358,14 +361,18 @@ function AmountInput({
             />
           )}
         />
-        <View className="native:shrink-0 flex-row items-center gap-2">
-          <Image
-            source={getTokenImage()}
-            alt={getTokenSymbol()}
-            style={{ width: 34, height: 34 }}
-          />
-          <Text className="text-lg font-semibold text-white">{getTokenSymbol()}</Text>
-        </View>
+        {rightSlot ? (
+          rightSlot
+        ) : (
+          <View className="native:shrink-0 flex-row items-center gap-2">
+            <Image
+              source={getTokenImage()}
+              alt={getTokenSymbol()}
+              style={{ width: 34, height: 34 }}
+            />
+            <Text className="text-lg font-semibold text-white">{getTokenSymbol()}</Text>
+          </View>
+        )}
       </View>
     </View>
   );
@@ -1198,16 +1205,6 @@ export default function CardDepositInternalForm() {
         walletTokenSymbol={walletTokenSymbol}
       />
 
-      {isWalletSourceGaslessGated && (
-        <View className="gap-2">
-          <Text className="font-medium opacity-50">Token</Text>
-          <WalletTokenButton
-            selectedToken={selectedCardWalletToken}
-            onPress={() => setModal(CARD_DEPOSIT_MODAL.OPEN_TOKEN_SELECTOR)}
-          />
-        </View>
-      )}
-
       {watchedFrom === CardDepositSource.BORROW ? (
         <View className="gap-4 px-2">
           <BorrowSlider
@@ -1225,6 +1222,14 @@ export default function CardDepositInternalForm() {
             from={watchedFrom}
             onAmountEntry={trackAmountEntry}
             walletTokenSymbol={walletTokenSymbol}
+            rightSlot={
+              isWalletSourceGaslessGated ? (
+                <WalletTokenButton
+                  selectedToken={selectedCardWalletToken}
+                  onPress={() => setModal(CARD_DEPOSIT_MODAL.OPEN_TOKEN_SELECTOR)}
+                />
+              ) : undefined
+            }
           />
           <BalanceDisplay
             balanceAmount={balanceAmount}

From adb3f3f1ac3a800cf6b5877b7ebc5d474153911c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Apr 2026 14:10:05 +0000
Subject: [PATCH 2/2] fix(card-deposit): route token selection back to card
 modal, preserve WALLET source

- CardDepositTokenSelector was calling useDepositStore.setModal (the savings
  modal store) when a token was selected, which routed the user to the
  savings-flow's Add Funds screen instead of the card deposit internal form.
  Switch to useCardDepositStore.setModal so the card modal transitions back
  to OPEN_INTERNAL_FORM, and set CardDepositSource.WALLET on select so the
  form re-mounts on the Wallet option.
- CardDepositModalProvider's back button from the token selector also now
  explicitly sets source=WALLET before navigating back, so the internal
  form's defaultValues.from reads WALLET (not the BORROW default).

https://claude.ai/code/session_01TDpHy9uTrVX3PTRp9xS9S5
---
 components/Card/CardDepositModalProvider.tsx |  7 ++++++-
 components/Card/CardDepositTokenSelector.tsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/Card/CardDepositModalProvider.tsx b/components/Card/CardDepositModalProvider.tsx
index b20c79693..8da560d25 100644
--- a/components/Card/CardDepositModalProvider.tsx
+++ b/components/Card/CardDepositModalProvider.tsx
@@ -11,6 +11,8 @@ import { track } from '@/lib/analytics';
 import getTokenIcon from '@/lib/getTokenIcon';
 import { useCardDepositStore } from '@/store/useCardDepositStore';
 
+import { CardDepositSource } from '@/store/useCardDepositStore';
+
 import CardDepositExternal from './CardDepositExternal';
 import CardDepositInternalForm from './CardDepositInternalForm';
 import CardDepositOptions from './CardDepositOptions';
@@ -151,11 +153,14 @@ const CardDepositModalProvider = () => {
 
   const handleBackPress = useCallback(() => {
     if (isTokenSelector) {
+      // Preserve the Wallet source so the internal form re-mounts on the
+      // wallet option (the only path that opens the token selector).
+      setSource(CardDepositSource.WALLET);
       setModal(CARD_DEPOSIT_MODAL.OPEN_INTERNAL_FORM);
       return;
     }
     setModal(CARD_DEPOSIT_MODAL.CLOSE);
-  }, [isTokenSelector, setModal]);
+  }, [isTokenSelector, setSource, setModal]);
 
   return (
     <ResponsiveModal
diff --git a/components/Card/CardDepositTokenSelector.tsx b/components/Card/CardDepositTokenSelector.tsx
index b84ca40ef..8add14d63 100644
--- a/components/Card/CardDepositTokenSelector.tsx
+++ b/components/Card/CardDepositTokenSelector.tsx
@@ -5,6 +5,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { WalletTokenSelectorScreen } from '@/components/WalletTokenSelector';
 import { CARD_DEPOSIT_MODAL } from '@/constants/modals';
 import { TokenBalance } from '@/lib/types';
+import { useCardDepositStore, CardDepositSource } from '@/store/useCardDepositStore';
 import { useDepositStore } from '@/store/useDepositStore';
 
 const SUPPORTED_CHAIN_IDS = [mainnet.id, polygon.id, base.id, arbitrum.id, fuse.id];
@@ -17,11 +18,16 @@ const SUPPORTED_TOKEN_SYMBOLS = ['USDC'];
  * deposit internal form on selection.
  */
 const CardDepositTokenSelector: React.FC = () => {
-  const { setSrcChainId, setPrincipalToken, setModal } = useDepositStore(
+  const { setSrcChainId, setPrincipalToken } = useDepositStore(
     useShallow(state => ({
       setSrcChainId: state.setSrcChainId,
       setPrincipalToken: state.setPrincipalToken,
+    })),
+  );
+  const { setModal, setSource } = useCardDepositStore(
+    useShallow(state => ({
       setModal: state.setModal,
+      setSource: state.setSource,
     })),
   );
 
@@ -29,9 +35,10 @@ const CardDepositTokenSelector: React.FC = () => {
     (token: TokenBalance) => {
       setSrcChainId(token.chainId);
       setPrincipalToken(token.contractTickerSymbol?.toUpperCase() || 'USDC');
+      setSource(CardDepositSource.WALLET);
       setModal(CARD_DEPOSIT_MODAL.OPEN_INTERNAL_FORM);
     },
-    [setSrcChainId, setPrincipalToken, setModal],
+    [setSrcChainId, setPrincipalToken, setSource, setModal],
   );
 
   const supportedChainIds = useMemo(() => SUPPORTED_CHAIN_IDS, []);