From b3e0a645b1b9c60f26f24bd3c3bd5cff97fffe16 Mon Sep 17 00:00:00 2001
From: Bruno Nascimento <brunonascimentodev@gmail.com>
Date: Sat, 8 Nov 2025 09:57:59 -0300
Subject: [PATCH 1/2] fix(card): UI issues on Authentication/Delegation
 (#22352)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR fixes several issues affecting the Card feature to improve
stability and UI consistency:
- Fixed negative allowance values displayed on CardHome
- Fixed token priority not updating correctly after delegation
- Fixed text clipping in the Asset BottomSheet
- Ensured all addresses are properly checksummed
- Fixed BottomSheet layering issue where it appeared below the header

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Negative allowance values displayed on CardHome
CHANGELOG entry: Token priority not updating after delegation
CHANGELOG entry: Text clipping in Asset BottomSheet
CHANGELOG entry: Missing address checksum formatting
CHANGELOG entry: BottomSheet not appearing above header

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Moves add-funds and asset-selection to dedicated modal routes, adds a
spending limit progress bar with latest-allowance fetching, improves OTP
error UX, and introduces a reusable priority-update hook.
>
> - **Navigation/Architecture**:
> - Add `CardModals` stack with `CardAddFundsModal` and
`CardAssetSelectionModal`; migrate CardHome/SpendingLimit to navigate to
these modals.
> - **CardHome**:
> - Replace inline bottom sheets with modal navigation for Add Funds and
Asset Selection.
> - Add Spending Limit progress bar (with skeleton) when
`AllowanceState.Limited`; hide for unsupported tokens (e.g., `aUSDC`).
> - Gate "close to limit" warning by token support; minor style
additions.
> - **SpendingLimit**:
> - Open Asset Selection as a modal (selection-only flow returning via
`callerRoute`).
> - Block back navigation while delegating; update token priority after
successful delegation; clear cache when needed.
> - **Bottom Sheets**:
> - Refactor `AddFundsBottomSheet` and `AssetSelectionBottomSheet` to
modal components using `navUtils` params; show balances, filter by
network/location; close-on-navigate behavior.
> - **Hooks**:
> - New `useUpdateTokenPriority` to reorder wallet priorities and update
Redux/cache.
> - New `useGetLatestAllowanceForPriorityToken` to read latest approval
from logs; integrated in `useLoadCardData` to populate `totalAllowance`.
> - `useAssetBalances`: improved fiat fallbacks and proportional/zero
handling.
> - `useGetCardExternalWalletDetails`: stop bulk `totalAllowance` fetch;
map details without it.
> - **SDK**:
> - Implement `getLatestAllowanceFromLogs` (ethers log scan); make some
helpers sync; include tenant ID in `createOnboardingConsent` using API
key.
> - **Auth UX**:
>   - OTP error shown below fields; clear on input; tests updated.
> - **Utils**:
>   - `truncateAddress` now checksums hex addresses.
> - **Tests**:
> - Extensive updates/new tests across views, hooks, SDK, and
components.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
327555d1ab1b771399e2a55209de5874d93aec59. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 .../CardAuthentication.test.tsx               | 105 ++++
 .../CardAuthentication/CardAuthentication.tsx |  20 +-
 .../UI/Card/Views/CardHome/CardHome.styles.ts |   3 +
 .../UI/Card/Views/CardHome/CardHome.test.tsx  | 242 ++++++++-
 .../UI/Card/Views/CardHome/CardHome.tsx       |  88 ++--
 .../SpendingLimit/SpendingLimit.test.tsx      | 289 ++++++++++-
 .../Views/SpendingLimit/SpendingLimit.tsx     |  98 +++-
 .../AddFundsBottomSheet.test.tsx              | 116 ++---
 .../AddFundsBottomSheet.tsx                   |  45 +-
 .../components/AddFundsBottomSheet/index.ts   |   5 +-
 .../AssetSelectionBottomSheet.styles.ts       | 102 ----
 .../AssetSelectionBottomSheet.test.tsx        | 485 +++++++-----------
 .../AssetSelectionBottomSheet.tsx             | 201 +++-----
 .../AssetSelectionBottomSheet/index.ts        |   4 +
 .../SpendingLimitProgressBar.styles.ts        |   3 +
 .../SpendingLimitProgressBar.test.tsx         |  14 +
 .../SpendingLimitProgressBar.tsx              |  18 +
 app/components/UI/Card/constants.ts           |   8 +
 .../UI/Card/hooks/useAssetBalances.test.ts    |  10 +-
 .../UI/Card/hooks/useAssetBalances.tsx        |  79 ++-
 .../UI/Card/hooks/useCardDelegation.test.ts   | 105 +++-
 .../UI/Card/hooks/useCardDelegation.ts        |  12 +
 .../useGetCardExternalWalletDetails.test.ts   | 139 -----
 .../hooks/useGetCardExternalWalletDetails.ts  |  37 +-
 ...GetLatestAllowanceForPriorityToken.test.ts | 448 ++++++++++++++++
 .../useGetLatestAllowanceForPriorityToken.ts  | 120 +++++
 .../UI/Card/hooks/useLoadCardData.test.ts     | 186 ++++++-
 .../UI/Card/hooks/useLoadCardData.ts          |  31 +-
 .../Card/hooks/useRegisterUserConsent.test.ts |   2 -
 .../UI/Card/hooks/useRegisterUserConsent.ts   |   1 -
 .../Card/hooks/useUpdateTokenPriority.test.ts | 378 ++++++++++++++
 .../UI/Card/hooks/useUpdateTokenPriority.ts   | 139 +++++
 app/components/UI/Card/routes/index.tsx       |  42 +-
 app/components/UI/Card/sdk/CardSDK.test.ts    | 393 +++++++++++++-
 app/components/UI/Card/sdk/CardSDK.ts         | 143 +++---
 app/components/UI/Card/types.ts               |   2 +-
 .../UI/Card/util/truncateAddress.test.ts      | 161 ++++--
 .../UI/Card/util/truncateAddress.ts           |  11 +-
 app/constants/navigation/Routes.ts            |   5 +
 e2e/selectors/Card/CardHome.selectors.ts      |   1 +
 40 files changed, 3273 insertions(+), 1018 deletions(-)
 delete mode 100644 app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.styles.ts
 create mode 100644 app/components/UI/Card/components/AssetSelectionBottomSheet/index.ts
 create mode 100644 app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.test.ts
 create mode 100644 app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.ts
 create mode 100644 app/components/UI/Card/hooks/useUpdateTokenPriority.test.ts
 create mode 100644 app/components/UI/Card/hooks/useUpdateTokenPriority.ts

diff --git a/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx b/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx
index 74f3a3418c5..398acddd68d 100644
--- a/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx
+++ b/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react-native';
+import { TextInput } from 'react-native';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import CardAuthentication from './CardAuthentication';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -973,6 +974,50 @@ describe('CardAuthentication Component', () => {
       });
     });
 
+    it('displays error below OTP input fields', async () => {
+      mockLogin.mockResolvedValue({
+        isOtpRequired: true,
+        userId: 'user-123',
+        phoneNumber: '+1 (555) 123-****',
+      });
+
+      render();
+      const emailInput = screen.getByPlaceholderText(
+        'Enter your email address',
+      );
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const loginButton = screen.getByTestId(
+        CardAuthenticationSelectors.VERIFY_ACCOUNT_BUTTON,
+      );
+
+      fireEvent.changeText(emailInput, 'test@example.com');
+      fireEvent.changeText(passwordInput, 'password123');
+      fireEvent.press(loginButton);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText('Enter your verification code'),
+        ).toBeOnTheScreen();
+      });
+
+      mockUseCardProviderAuthentication.mockReturnValue({
+        login: mockLogin,
+        loading: false,
+        error: null,
+        clearError: mockClearError,
+        sendOtpLogin: mockSendOtpLogin,
+        otpLoading: false,
+        otpError: 'The code you entered is incorrect',
+        clearOtpError: mockClearOtpError,
+      });
+
+      await waitFor(() => {
+        const errorText = screen.getByText('The code you entered is incorrect');
+        expect(errorText).toBeOnTheScreen();
+        expect(screen.getByText('Verification Code')).toBeOnTheScreen();
+      });
+    });
+
     it('does not display OTP error box when no error exists in OTP step', async () => {
       mockLogin.mockResolvedValue({
         isOtpRequired: true,
@@ -1002,6 +1047,66 @@ describe('CardAuthentication Component', () => {
         screen.queryByText('Invalid verification code'),
       ).not.toBeOnTheScreen();
     });
+
+    it('calls clearOtpError when user types in OTP field', async () => {
+      mockLogin.mockResolvedValue({
+        isOtpRequired: true,
+        userId: 'user-123',
+      });
+
+      render();
+      const emailInput = screen.getByPlaceholderText(
+        'Enter your email address',
+      );
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
+      const loginButton = screen.getByTestId(
+        CardAuthenticationSelectors.VERIFY_ACCOUNT_BUTTON,
+      );
+
+      fireEvent.changeText(emailInput, 'test@example.com');
+      fireEvent.changeText(passwordInput, 'password123');
+      fireEvent.press(loginButton);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText('Enter your verification code'),
+        ).toBeOnTheScreen();
+      });
+
+      // Update mock to include OTP error after entering OTP step
+      mockUseCardProviderAuthentication.mockReturnValue({
+        login: mockLogin,
+        loading: false,
+        error: null,
+        clearError: mockClearError,
+        sendOtpLogin: mockSendOtpLogin,
+        otpLoading: false,
+        otpError: 'Invalid verification code',
+        clearOtpError: mockClearOtpError,
+      });
+
+      // Wait for error to appear
+      await waitFor(() => {
+        expect(screen.getByText('Invalid verification code')).toBeOnTheScreen();
+      });
+
+      // Clear the mock to track new calls
+      mockClearOtpError.mockClear();
+
+      // Find the OTP input (CodeField renders as TextInput with number-pad keyboard)
+      const allInputs = screen.UNSAFE_queryAllByType(TextInput);
+      const otpInput = allInputs.find(
+        (input) => input.props.keyboardType === 'number-pad',
+      );
+
+      expect(otpInput).toBeDefined();
+
+      if (otpInput) {
+        fireEvent.changeText(otpInput, '1');
+
+        expect(mockClearOtpError).toHaveBeenCalled();
+      }
+    });
   });
 
   describe('OTP Step - Loading States', () => {
diff --git a/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx b/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx
index 1cda9679553..c56c605c934 100644
--- a/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx
+++ b/app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx
@@ -388,6 +388,16 @@ const CardAuthentication = () => {
                       )}
                     />
                   </Box>
+                  {otpError && (
+                    <Box style={styles.errorBox}>
+                      <Text
+                        variant={TextVariant.BodySm}
+                        style={{ color: theme.colors.error.default }}
+                      >
+                        {otpError}
+                      </Text>
+                    </Box>
+                  )}
                   <Box twClassName="mt-4 items-center">
                     {resendCountdown > 0 ? (
                       <Text
@@ -413,16 +423,6 @@ const CardAuthentication = () => {
                     )}
                   </Box>
                 </Box>
-                {otpError && (
-                  <Box style={styles.errorBox}>
-                    <Text
-                      variant={TextVariant.BodySm}
-                      style={{ color: theme.colors.error.default }}
-                    >
-                      {otpError}
-                    </Text>
-                  </Box>
-                )}
               </Box>
               <Box twClassName="gap-2">
                 <Button
diff --git a/app/components/UI/Card/Views/CardHome/CardHome.styles.ts b/app/components/UI/Card/Views/CardHome/CardHome.styles.ts
index 42d50163c70..8db77a58321 100644
--- a/app/components/UI/Card/Views/CardHome/CardHome.styles.ts
+++ b/app/components/UI/Card/Views/CardHome/CardHome.styles.ts
@@ -40,6 +40,9 @@ const createStyles = (theme: Theme) =>
     defaultHorizontalPadding: {
       paddingHorizontal: 16,
     },
+    defaultMarginBottom: {
+      marginBottom: 16,
+    },
     cardBalanceContainer: {
       marginTop: 16,
       backgroundColor: theme.colors.background.muted,
diff --git a/app/components/UI/Card/Views/CardHome/CardHome.test.tsx b/app/components/UI/Card/Views/CardHome/CardHome.test.tsx
index ece6aab1cbf..f9aee33a798 100644
--- a/app/components/UI/Card/Views/CardHome/CardHome.test.tsx
+++ b/app/components/UI/Card/Views/CardHome/CardHome.test.tsx
@@ -198,9 +198,28 @@ jest.mock('../../../../hooks/useMetrics', () => ({
   MetaMetricsEvents: {
     CARD_ADD_FUNDS_CLICKED: 'card_add_funds_clicked',
     CARD_HOME_VIEWED: 'card_home_viewed',
+    CARD_BUTTON_CLICKED: 'card_button_clicked',
   },
 }));
 
+// Mock navigation helper functions
+jest.mock('../../components/AddFundsBottomSheet/AddFundsBottomSheet', () => ({
+  createAddFundsModalNavigationDetails: jest.fn((params) => [
+    'CardModals',
+    { screen: 'CardAddFundsModal', params },
+  ]),
+}));
+
+jest.mock(
+  '../../components/AssetSelectionBottomSheet/AssetSelectionBottomSheet',
+  () => ({
+    createAssetSelectionModalNavigationDetails: jest.fn((params) => [
+      'CardModals',
+      { screen: 'CardAssetSelectionModal', params },
+    ]),
+  }),
+);
+
 // Mock react-native-device-info
 jest.mock('react-native-device-info', () => ({
   getVersion: jest.fn(() => '1.0.0'),
@@ -580,7 +599,7 @@ describe('CardHome Component', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('opens AddFundsBottomSheet when add funds button is pressed with USDC token', async () => {
+  it('navigates to add funds modal when add funds button is pressed with USDC token', async () => {
     // Given: priority token is USDC (default)
     // When: user presses add funds button
     render();
@@ -590,15 +609,23 @@ describe('CardHome Component', () => {
     );
     fireEvent.press(addFundsButton);
 
-    // Then: should open bottom sheet, not swaps
+    // Then: should navigate to add funds modal, not swaps
     await waitFor(() => {
-      expect(screen.getByTestId('add-funds-bottom-sheet')).toBeTruthy();
+      expect(mockNavigate).toHaveBeenCalledWith(
+        'CardModals',
+        expect.objectContaining({
+          screen: 'CardAddFundsModal',
+          params: expect.objectContaining({
+            priorityToken: mockPriorityToken,
+          }),
+        }),
+      );
     });
 
     expect(mockOpenSwaps).not.toHaveBeenCalled();
   });
 
-  it('opens AddFundsBottomSheet when add funds button is pressed with USDT token', async () => {
+  it('navigates to add funds modal when add funds button is pressed with USDT token', async () => {
     // Given: priority token is USDT
     const usdtToken = {
       ...mockPriorityToken,
@@ -614,9 +641,17 @@ describe('CardHome Component', () => {
     );
     fireEvent.press(addFundsButton);
 
-    // Then: should open bottom sheet for supported token
+    // Then: should navigate to add funds modal for supported token
     await waitFor(() => {
-      expect(screen.getByTestId('add-funds-bottom-sheet')).toBeTruthy();
+      expect(mockNavigate).toHaveBeenCalledWith(
+        'CardModals',
+        expect.objectContaining({
+          screen: 'CardAddFundsModal',
+          params: expect.objectContaining({
+            priorityToken: usdtToken,
+          }),
+        }),
+      );
     });
 
     expect(mockOpenSwaps).not.toHaveBeenCalled();
@@ -1245,6 +1280,30 @@ describe('CardHome Component', () => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.WELCOME);
     });
 
+    it('navigates to asset selection modal when change asset pressed and authenticated', () => {
+      // Given: user is authenticated
+      setupMockSelectors({ isAuthenticated: true });
+      setupLoadCardDataMock({ isAuthenticated: true });
+
+      // When: user presses change asset button
+      render();
+      const changeAssetButton = screen.getByTestId(
+        CardHomeSelectors.CHANGE_ASSET_BUTTON,
+      );
+      fireEvent.press(changeAssetButton);
+
+      // Then: should navigate to asset selection modal
+      expect(mockNavigate).toHaveBeenCalledWith(
+        'CardModals',
+        expect.objectContaining({
+          screen: 'CardAssetSelectionModal',
+          params: expect.objectContaining({
+            tokensWithAllowances: [mockPriorityToken],
+          }),
+        }),
+      );
+    });
+
     it('shows manage spending limit button when Baanx login is enabled', () => {
       // Given: Baanx login is enabled
       // When: component renders
@@ -1863,6 +1922,177 @@ describe('CardHome Component', () => {
     });
   });
 
+  describe('Unsupported Tokens for Spending Limit', () => {
+    it('hides progress bar for unsupported token (aUSDC)', () => {
+      // Given: authenticated with aUSDC (unsupported token) and limited allowance
+      setupMockSelectors({ isAuthenticated: true });
+      const aUSDCToken = {
+        ...mockPriorityToken,
+        symbol: 'aUSDC',
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '500',
+      };
+      setupLoadCardDataMock({
+        priorityToken: aUSDCToken,
+        allTokens: [aUSDCToken],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not display spending limit progress bar
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+
+    it('shows progress bar for supported token (USDC)', () => {
+      // Given: authenticated with USDC (supported token) and limited allowance
+      setupMockSelectors({ isAuthenticated: true });
+      const usdcToken = {
+        ...mockPriorityToken,
+        symbol: 'USDC',
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '500',
+      };
+      setupLoadCardDataMock({
+        priorityToken: usdcToken,
+        allTokens: [usdcToken],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should display spending limit progress bar
+      expect(screen.getByText('Spending Limit')).toBeOnTheScreen();
+      expect(screen.getByText('500/1000 USDC')).toBeOnTheScreen();
+    });
+
+    it('hides progress bar when symbol is undefined', () => {
+      // Given: authenticated with undefined symbol and limited allowance
+      setupMockSelectors({ isAuthenticated: true });
+      const tokenWithoutSymbol = {
+        ...mockPriorityToken,
+        symbol: undefined as unknown as string,
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '500',
+      };
+      setupLoadCardDataMock({
+        priorityToken: tokenWithoutSymbol,
+        allTokens: [tokenWithoutSymbol],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not display spending limit progress bar
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+
+    it('hides close spending limit warning for unsupported token (aUSDC)', () => {
+      // Given: authenticated with aUSDC and close to limit (20% remaining)
+      setupMockSelectors({ isAuthenticated: true });
+      const aUSDCToken = {
+        ...mockPriorityToken,
+        symbol: 'aUSDC',
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '150', // 15% remaining (below 20% threshold)
+      };
+      setupLoadCardDataMock({
+        priorityToken: aUSDCToken,
+        allTokens: [aUSDCToken],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not show close spending limit warning
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+
+    it('hides close spending limit warning when symbol is undefined', () => {
+      // Given: authenticated with undefined symbol and close to limit
+      setupMockSelectors({ isAuthenticated: true });
+      const tokenWithoutSymbol = {
+        ...mockPriorityToken,
+        symbol: undefined as unknown as string,
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '150',
+      };
+      setupLoadCardDataMock({
+        priorityToken: tokenWithoutSymbol,
+        allTokens: [tokenWithoutSymbol],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not show close spending limit warning
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+
+    it('treats lowercase unsupported token symbol case-insensitively', () => {
+      // Given: authenticated with lowercase ausdc and limited allowance
+      setupMockSelectors({ isAuthenticated: true });
+      const aUSDCTokenLower = {
+        ...mockPriorityToken,
+        symbol: 'ausdc',
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '500',
+      };
+      setupLoadCardDataMock({
+        priorityToken: aUSDCTokenLower,
+        allTokens: [aUSDCTokenLower],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not display spending limit progress bar
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+
+    it('treats mixed case unsupported token symbol case-insensitively', () => {
+      // Given: authenticated with mixed case AuSdC and limited allowance
+      setupMockSelectors({ isAuthenticated: true });
+      const aUSDCTokenMixed = {
+        ...mockPriorityToken,
+        symbol: 'AuSdC',
+        allowanceState: AllowanceState.Limited,
+        totalAllowance: '1000',
+        allowance: '500',
+      };
+      setupLoadCardDataMock({
+        priorityToken: aUSDCTokenMixed,
+        allTokens: [aUSDCTokenMixed],
+        isAuthenticated: true,
+        warning: null,
+      });
+
+      // When: component renders
+      render();
+
+      // Then: should not display spending limit progress bar
+      expect(screen.queryByText('Spending Limit')).not.toBeOnTheScreen();
+    });
+  });
+
   describe('SpendingLimitProgressBar', () => {
     it('renders when authenticated and allowance is limited', () => {
       // Given: authenticated with limited allowance
diff --git a/app/components/UI/Card/Views/CardHome/CardHome.tsx b/app/components/UI/Card/Views/CardHome/CardHome.tsx
index f89b00fb9dd..2e66c1931e4 100644
--- a/app/components/UI/Card/Views/CardHome/CardHome.tsx
+++ b/app/components/UI/Card/Views/CardHome/CardHome.tsx
@@ -48,12 +48,13 @@ import {
   TOKEN_BALANCE_LOADING_UPPERCASE,
   TOKEN_RATE_UNDEFINED,
 } from '../../../Tokens/constants';
-import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import AddFundsBottomSheet from '../../components/AddFundsBottomSheet';
 import { useOpenSwaps } from '../../hooks/useOpenSwaps';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
-import { DEPOSIT_SUPPORTED_TOKENS } from '../../constants';
+import {
+  DEPOSIT_SUPPORTED_TOKENS,
+  SPENDING_LIMIT_UNSUPPORTED_TOKENS,
+} from '../../constants';
 import { useCardSDK } from '../../sdk';
 import Routes from '../../../../../constants/navigation/Routes';
 import {
@@ -70,7 +71,6 @@ import { isAuthenticationError } from '../../util/isAuthenticationError';
 import { removeCardBaanxToken } from '../../util/cardTokenVault';
 import Logger from '../../../../../util/Logger';
 import useLoadCardData from '../../hooks/useLoadCardData';
-import AssetSelectionBottomSheet from '../../components/AssetSelectionBottomSheet/AssetSelectionBottomSheet';
 import { CardActions } from '../../util/metrics';
 import { isSolanaChainId } from '@metamask/bridge-controller';
 import { useAssetBalances } from '../../hooks/useAssetBalances';
@@ -79,6 +79,8 @@ import {
   ToastVariants,
 } from '../../../../../component-library/components/Toast';
 import SpendingLimitProgressBar from '../../components/SpendingLimitProgressBar/SpendingLimitProgressBar';
+import { createAddFundsModalNavigationDetails } from '../../components/AddFundsBottomSheet/AddFundsBottomSheet';
+import { createAssetSelectionModalNavigationDetails } from '../../components/AssetSelectionBottomSheet/AssetSelectionBottomSheet';
 
 /**
  * CardHome Component
@@ -93,13 +95,8 @@ import SpendingLimitProgressBar from '../../components/SpendingLimitProgressBar/
  */
 const CardHome = () => {
   const { PreferencesController } = Engine.context;
-  const [openAddFundsBottomSheet, setOpenAddFundsBottomSheet] = useState(false);
-  const [openAssetSelectionBottomSheet, setOpenAssetSelectionBottomSheet] =
-    useState(false);
   const [retries, setRetries] = useState(0);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const addFundsSheetRef = useRef<BottomSheetRef>(null);
-  const assetSelectionSheetRef = useRef<BottomSheetRef>(null);
   const { toastRef } = useContext(ToastContext);
   const { logoutFromProvider, isLoading: isSDKLoading } = useCardSDK();
   const [
@@ -184,31 +181,6 @@ const CardHome = () => {
     return balanceFiat;
   }, [balanceFiat, balanceFormatted]);
 
-  const renderAddFundsBottomSheet = useCallback(
-    () => (
-      <AddFundsBottomSheet
-        sheetRef={addFundsSheetRef}
-        setOpenAddFundsBottomSheet={setOpenAddFundsBottomSheet}
-        priorityToken={priorityToken ?? undefined}
-        navigate={navigation.navigate}
-      />
-    ),
-    [priorityToken, navigation],
-  );
-
-  const renderAssetSelectionBottomSheet = useCallback(
-    () => (
-      <AssetSelectionBottomSheet
-        sheetRef={assetSelectionSheetRef}
-        setOpenAssetSelectionBottomSheet={setOpenAssetSelectionBottomSheet}
-        tokensWithAllowances={allTokens}
-        delegationSettings={delegationSettings}
-        cardExternalWalletDetails={externalWalletDetailsData}
-      />
-    ),
-    [allTokens, delegationSettings, externalWalletDetailsData],
-  );
-
   const handleRefresh = useCallback(async () => {
     setIsRefreshing(true);
     try {
@@ -286,11 +258,15 @@ const CardHome = () => {
     );
 
     if (isPriorityTokenSupportedDeposit) {
-      setOpenAddFundsBottomSheet(true);
+      navigation.navigate(
+        ...createAddFundsModalNavigationDetails({
+          priorityToken: priorityToken ?? undefined,
+        }),
+      );
     } else if (priorityToken) {
       openSwaps({});
     }
-  }, [trackEvent, createEventBuilder, priorityToken, openSwaps]);
+  }, [trackEvent, createEventBuilder, priorityToken, openSwaps, navigation]);
 
   const changeAssetAction = useCallback(() => {
     trackEvent(
@@ -302,11 +278,25 @@ const CardHome = () => {
     );
 
     if (isAuthenticated) {
-      setOpenAssetSelectionBottomSheet(true);
+      navigation.navigate(
+        ...createAssetSelectionModalNavigationDetails({
+          tokensWithAllowances: allTokens,
+          delegationSettings,
+          cardExternalWalletDetails: externalWalletDetailsData,
+        }),
+      );
     } else {
       navigation.navigate(Routes.CARD.WELCOME);
     }
-  }, [isAuthenticated, navigation, trackEvent, createEventBuilder]);
+  }, [
+    isAuthenticated,
+    navigation,
+    trackEvent,
+    createEventBuilder,
+    allTokens,
+    delegationSettings,
+    externalWalletDetailsData,
+  ]);
 
   const manageSpendingLimitAction = useCallback(() => {
     trackEvent(
@@ -533,13 +523,26 @@ const CardHome = () => {
     handleAuthenticationError();
   }, [cardError, isAuthenticated, dispatch, navigation]);
 
+  /**
+   * Check if the current token supports the spending limit progress bar feature.
+   * Some tokens (e.g., aUSDC) have different allowance behavior and are unsupported.
+   */
+  const isSpendingLimitSupported = useMemo(() => {
+    if (!priorityToken?.symbol) {
+      return false;
+    }
+    return !SPENDING_LIMIT_UNSUPPORTED_TOKENS.includes(
+      priorityToken.symbol.toUpperCase(),
+    );
+  }, [priorityToken?.symbol]);
+
   /**
    * This warning is shown when the user is close to their spending limit.
    * We should show when the user has consumed 80% or more of their total allowance.
    * This matches the progress bar color change threshold.
    */
   const isCloseSpendingLimitWarning = useMemo(() => {
-    if (!isAuthenticated) {
+    if (!isAuthenticated || !isSpendingLimitSupported) {
       return false;
     }
 
@@ -551,7 +554,7 @@ const CardHome = () => {
       priorityToken?.allowanceState === AllowanceState.Limited &&
       remainingAllowance <= totalAllowance * 0.2
     );
-  }, [isAuthenticated, priorityToken]);
+  }, [isAuthenticated, isSpendingLimitSupported, priorityToken]);
 
   if (cardError) {
     return (
@@ -729,8 +732,10 @@ const CardHome = () => {
         </View>
 
         {isAuthenticated &&
+          isSpendingLimitSupported &&
           priorityToken?.allowanceState === AllowanceState.Limited && (
             <SpendingLimitProgressBar
+              isLoading={isLoading}
               decimals={priorityToken?.decimals ?? 6}
               totalAllowance={priorityToken?.totalAllowance ?? '0'}
               remainingAllowance={priorityToken?.allowance ?? '0'}
@@ -786,9 +791,6 @@ const CardHome = () => {
           onPress={logoutAction}
         />
       )}
-
-      {openAddFundsBottomSheet && renderAddFundsBottomSheet()}
-      {openAssetSelectionBottomSheet && renderAssetSelectionBottomSheet()}
     </ScrollView>
   );
 };
diff --git a/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.test.tsx b/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.test.tsx
index f70da115967..ce0301e83e5 100644
--- a/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.test.tsx
+++ b/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.test.tsx
@@ -2,9 +2,12 @@
 const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();
 const mockAddListener = jest.fn();
+const mockSetParams = jest.fn();
 const mockSubmitDelegation = jest.fn();
 const mockShowToast = jest.fn();
 const mockDispatch = jest.fn();
+const mockUpdateTokenPriority = jest.fn();
+const mockUseFocusEffect = jest.fn();
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
@@ -12,7 +15,9 @@ jest.mock('@react-navigation/native', () => ({
     goBack: mockGoBack,
     navigate: mockNavigate,
     addListener: mockAddListener,
+    setParams: mockSetParams,
   }),
+  useFocusEffect: (callback: () => void) => mockUseFocusEffect(callback),
 }));
 
 jest.mock('react-redux', () => ({
@@ -83,6 +88,12 @@ jest.mock('../../hooks/useCardDelegation', () => ({
   UserCancelledError: MockUserCancelledError,
 }));
 
+jest.mock('../../hooks/useUpdateTokenPriority', () => ({
+  useUpdateTokenPriority: jest.fn(() => ({
+    updateTokenPriority: mockUpdateTokenPriority,
+  })),
+}));
+
 jest.mock('../../sdk', () => ({
   useCardSDK: jest.fn(() => ({
     sdk: mockSdk,
@@ -147,6 +158,13 @@ jest.mock('../../util/buildTokenIconUrl', () => ({
   ),
 }));
 
+jest.mock('../../components/AssetSelectionBottomSheet', () => ({
+  createAssetSelectionModalNavigationDetails: jest.fn((params) => [
+    'CardModals',
+    { screen: 'CardAssetSelectionModal', params },
+  ]),
+}));
+
 import React from 'react';
 import { ActivityIndicator } from 'react-native';
 import { fireEvent, screen, waitFor } from '@testing-library/react-native';
@@ -156,6 +174,7 @@ import { useCardDelegation } from '../../hooks/useCardDelegation';
 import { IconName } from '../../../../../component-library/components/Icons/Icon';
 import Logger from '../../../../../util/Logger';
 import { ToastContext } from '../../../../../component-library/components/Toast';
+import Routes from '../../../../../constants/navigation/Routes';
 
 jest.spyOn(Logger, 'error').mockImplementation(() => undefined);
 
@@ -178,6 +197,7 @@ interface MockRoute {
           priorityWalletDetail: CardTokenAllowance | undefined;
         }
       | null;
+    returnedSelectedToken?: CardTokenAllowance;
   };
 }
 
@@ -225,10 +245,17 @@ describe('SpendingLimit Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockSubmitDelegation.mockResolvedValue(undefined);
+    mockUpdateTokenPriority.mockResolvedValue(true);
 
     // Mock addListener to return an unsubscribe function
     mockAddListener.mockReturnValue(jest.fn());
 
+    // Mock useFocusEffect - store the callback but don't execute automatically
+    // to avoid infinite render loops in tests
+    mockUseFocusEffect.mockImplementation(() => {
+      // No-op in tests - the hook will be called but won't execute the callback
+    });
+
     // Reset useCardDelegation mock to default state
     (useCardDelegation as jest.Mock).mockReturnValue({
       submitDelegation: mockSubmitDelegation,
@@ -784,6 +811,219 @@ describe('SpendingLimit Component', () => {
     });
   });
 
+  describe('Token Priority Update', () => {
+    it('calls updateTokenPriority after successful delegation with external wallet details', async () => {
+      const mockExternalWalletDetails = {
+        walletDetails: [
+          {
+            id: 1,
+            walletAddress: '0xwallet123',
+            currency: 'USDC',
+            balance: '1000',
+            allowance: '1000000',
+            priority: 1,
+            tokenDetails: {
+              address: '0x123',
+              symbol: 'USDC',
+              name: 'USD Coin',
+              decimals: 6,
+            },
+            caipChainId: 'eip155:59144' as `${string}:${string}`,
+            network: 'linea' as const,
+          },
+        ] as unknown as CardExternalWalletDetailsResponse,
+        mappedWalletDetails: [mockPriorityToken],
+        priorityWalletDetail: mockPriorityToken,
+      };
+
+      const routeWithWalletDetails: MockRoute = {
+        params: {
+          ...mockRoute.params,
+          externalWalletDetailsData: mockExternalWalletDetails,
+        },
+      };
+
+      render(routeWithWalletDetails);
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockUpdateTokenPriority).toHaveBeenCalledWith(
+          expect.objectContaining({
+            address: mockPriorityToken.address,
+            symbol: mockPriorityToken.symbol,
+            caipChainId: mockPriorityToken.caipChainId,
+          }),
+          mockExternalWalletDetails.walletDetails,
+        );
+      });
+    });
+
+    it('does not call updateTokenPriority when external wallet details are not available', async () => {
+      render();
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockSubmitDelegation).toHaveBeenCalled();
+      });
+
+      expect(mockUpdateTokenPriority).not.toHaveBeenCalled();
+    });
+
+    it('clears cache when external wallet details are not available', async () => {
+      render();
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockDispatch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: expect.stringContaining('clearCacheData'),
+            payload: 'card-external-wallet-details',
+          }),
+        );
+      });
+    });
+
+    it('does not call updateTokenPriority when wallet details array is empty', async () => {
+      const emptyWalletDetails = {
+        walletDetails: [],
+        mappedWalletDetails: [],
+        priorityWalletDetail: null,
+      };
+
+      const routeWithEmptyDetails: MockRoute = {
+        params: {
+          ...mockRoute.params,
+          externalWalletDetailsData: emptyWalletDetails,
+        },
+      };
+
+      render(routeWithEmptyDetails);
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockSubmitDelegation).toHaveBeenCalled();
+      });
+
+      expect(mockUpdateTokenPriority).not.toHaveBeenCalled();
+    });
+
+    it('calls updateTokenPriority with selected token when available', async () => {
+      const mockExternalWalletDetails = {
+        walletDetails: [
+          {
+            id: 1,
+            walletAddress: '0xwallet123',
+            currency: 'mUSD',
+            balance: '2000',
+            allowance: '2000000',
+            priority: 2,
+            tokenDetails: {
+              address: '0xmusd',
+              symbol: 'mUSD',
+              name: 'Meta USD',
+              decimals: 18,
+            },
+            caipChainId: 'eip155:59144' as `${string}:${string}`,
+            network: 'linea' as const,
+          },
+        ] as unknown as CardExternalWalletDetailsResponse,
+        mappedWalletDetails: [mockMUSDToken],
+        priorityWalletDetail: undefined,
+      };
+
+      const routeWithSelectedToken: MockRoute = {
+        params: {
+          flow: 'enable' as const,
+          selectedToken: mockMUSDToken,
+          priorityToken: mockPriorityToken,
+          allTokens: [mockPriorityToken, mockMUSDToken],
+          delegationSettings: null,
+          externalWalletDetailsData: mockExternalWalletDetails,
+        },
+      };
+
+      render(routeWithSelectedToken);
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockUpdateTokenPriority).toHaveBeenCalledWith(
+          expect.objectContaining({
+            address: mockMUSDToken.address,
+            symbol: mockMUSDToken.symbol,
+            caipChainId: mockMUSDToken.caipChainId,
+          }),
+          mockExternalWalletDetails.walletDetails,
+        );
+      });
+    });
+
+    it('updates priority after delegation in restricted mode', async () => {
+      const mockExternalWalletDetails = {
+        walletDetails: [
+          {
+            id: 1,
+            walletAddress: '0xwallet123',
+            currency: 'USDC',
+            balance: '1000',
+            allowance: '500',
+            priority: 1,
+            tokenDetails: {
+              address: '0x123',
+              symbol: 'USDC',
+              name: 'USD Coin',
+              decimals: 6,
+            },
+            caipChainId: 'eip155:59144' as `${string}:${string}`,
+            network: 'linea' as const,
+          },
+        ] as unknown as CardExternalWalletDetailsResponse,
+        mappedWalletDetails: [mockPriorityToken],
+        priorityWalletDetail: mockPriorityToken,
+      };
+
+      const routeWithWalletDetails: MockRoute = {
+        params: {
+          ...mockRoute.params,
+          externalWalletDetailsData: mockExternalWalletDetails,
+        },
+      };
+
+      render(routeWithWalletDetails);
+
+      const setLimitButton = screen.getByText('Set a limit');
+      fireEvent.press(setLimitButton);
+
+      const restrictedOption = screen.getByText('Restricted');
+      fireEvent.press(restrictedOption);
+
+      const input = screen.getByPlaceholderText('0');
+      fireEvent.changeText(input, '5000');
+
+      const confirmButton = screen.getByText('Confirm');
+      fireEvent.press(confirmButton);
+
+      await waitFor(() => {
+        expect(mockUpdateTokenPriority).toHaveBeenCalledWith(
+          expect.objectContaining({
+            address: mockPriorityToken.address,
+            symbol: mockPriorityToken.symbol,
+          }),
+          mockExternalWalletDetails.walletDetails,
+        );
+      });
+    });
+  });
+
   describe('Cancel Behavior', () => {
     it('calls navigation goBack when cancel is pressed in initial view', () => {
       render();
@@ -886,12 +1126,53 @@ describe('SpendingLimit Component', () => {
     });
   });
 
-  describe('Asset Selection Bottom Sheet', () => {
-    it('opens asset selection bottom sheet when token selector is pressed', () => {
+  describe('Asset Selection Navigation', () => {
+    it('navigates to asset selection modal when token selector is pressed', () => {
       render();
 
-      // Token selector should be rendered
-      expect(screen.getByText('USDC')).toBeOnTheScreen();
+      const tokenSelector = screen.getByText('USDC');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      fireEvent.press(tokenSelector.parent?.parent as any);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        'CardModals',
+        expect.objectContaining({
+          screen: 'CardAssetSelectionModal',
+          params: expect.objectContaining({
+            tokensWithAllowances: expect.any(Array),
+            selectionOnly: true,
+            hideSolanaAssets: true,
+            callerRoute: Routes.CARD.SPENDING_LIMIT,
+          }),
+        }),
+      );
+    });
+
+    it('passes caller route and params to asset selection modal', () => {
+      const routeWithCustomParams: MockRoute = {
+        params: {
+          ...mockRoute.params,
+          customField: 'customValue',
+        } as MockRoute['params'] & { customField: string },
+      };
+
+      render(routeWithCustomParams);
+
+      const tokenSelector = screen.getByText('USDC');
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      fireEvent.press(tokenSelector.parent?.parent as any);
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        'CardModals',
+        expect.objectContaining({
+          params: expect.objectContaining({
+            callerRoute: Routes.CARD.SPENDING_LIMIT,
+            callerParams: expect.objectContaining({
+              customField: 'customValue',
+            }),
+          }),
+        }),
+      );
     });
   });
 
diff --git a/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.tsx b/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.tsx
index e617fcd1c9c..68eb3b4d80a 100644
--- a/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.tsx
+++ b/app/components/UI/Card/Views/SpendingLimit/SpendingLimit.tsx
@@ -6,13 +6,14 @@ import React, {
   useMemo,
 } from 'react';
 import { ScrollView, TouchableOpacity, View, TextInput } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { useTheme } from '../../../../../util/theme';
 import {
   useCardDelegation,
   UserCancelledError,
 } from '../../hooks/useCardDelegation';
 import { useCardSDK } from '../../sdk';
+import { useUpdateTokenPriority } from '../../hooks/useUpdateTokenPriority';
 import { strings } from '../../../../../../locales/i18n';
 import { BAANX_MAX_LIMIT, ARBITRARY_ALLOWANCE } from '../../constants';
 import Logger from '../../../../../util/Logger';
@@ -41,8 +42,7 @@ import {
   CardExternalWalletDetailsResponse,
   CardNetwork,
 } from '../../types';
-import AssetSelectionBottomSheet from '../../components/AssetSelectionBottomSheet/AssetSelectionBottomSheet';
-import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
+import { createAssetSelectionModalNavigationDetails } from '../../components/AssetSelectionBottomSheet';
 import AvatarToken from '../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
 import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar';
 import { buildTokenIconUrl } from '../../util/buildTokenIconUrl';
@@ -51,6 +51,7 @@ import { CardActions, CardScreens } from '../../util/metrics';
 import { mapCaipChainIdToChainName } from '../../util/mapCaipChainIdToChainName';
 import { clearCacheData } from '../../../../../core/redux/slices/card';
 import { useDispatch } from 'react-redux';
+import Routes from '../../../../../constants/navigation/Routes';
 
 const getNetworkFromCaipChainId = (caipChainId: string): CardNetwork => {
   if (caipChainId === SolScope.Mainnet || caipChainId.startsWith('solana:')) {
@@ -90,9 +91,6 @@ const SpendingLimit = ({
   const { toastRef } = useContext(ToastContext);
   const { trackEvent, createEventBuilder } = useMetrics();
   const { sdk } = useCardSDK();
-  const [openAssetSelectionBottomSheet, setOpenAssetSelectionBottomSheet] =
-    useState(false);
-  const assetSelectionSheetRef = React.useRef<BottomSheetRef>(null);
 
   const flow = route?.params?.flow || 'manage';
   const selectedTokenFromRoute = route?.params?.selectedToken;
@@ -112,6 +110,7 @@ const SpendingLimit = ({
   const { submitDelegation, isLoading: isDelegationLoading } =
     useCardDelegation(selectedToken);
   const dispatch = useDispatch();
+  const { updateTokenPriority } = useUpdateTokenPriority();
 
   useEffect(() => {
     trackEvent(
@@ -186,6 +185,26 @@ const SpendingLimit = ({
     }
   }, [flow, selectedTokenFromRoute, priorityToken, allTokens, selectedToken]);
 
+  // Listen for token selection from AssetSelectionBottomSheet modal
+  useFocusEffect(
+    useCallback(() => {
+      // Check if we're returning from the asset selection modal with a selected token
+      const params = route?.params as
+        | {
+            returnedSelectedToken?: CardTokenAllowance;
+          }
+        | undefined;
+      if (params?.returnedSelectedToken) {
+        setSelectedToken(params.returnedSelectedToken);
+
+        // Clear the returned token from params to avoid re-applying it
+        navigation.setParams({
+          returnedSelectedToken: undefined,
+        } as Record<string, unknown>);
+      }
+    }, [route?.params, navigation]),
+  );
+
   const handleOptionSelect = useCallback((option: 'full' | 'restricted') => {
     setTempSelectedOption(option);
 
@@ -250,8 +269,22 @@ const SpendingLimit = ({
             network,
           });
 
-          // Invalidate external wallet details cache to force refetch
-          dispatch(clearCacheData('card-external-wallet-details'));
+          // Update token priority if external wallet details are available
+          if (
+            externalWalletDetailsData?.walletDetails &&
+            externalWalletDetailsData.walletDetails.length > 0
+          ) {
+            const tokenWithWallet = tokenToUse || priorityToken;
+            if (tokenWithWallet) {
+              await updateTokenPriority(
+                tokenWithWallet,
+                externalWalletDetailsData.walletDetails,
+              );
+            }
+          } else {
+            // If no external wallet details, just invalidate cache
+            dispatch(clearCacheData('card-external-wallet-details'));
+          }
 
           // Show success toast
           toastRef?.current?.showToast({
@@ -323,6 +356,8 @@ const SpendingLimit = ({
     theme.colors.error.muted,
     dispatch,
     navigation,
+    updateTokenPriority,
+    externalWalletDetailsData,
   ]);
 
   const handleCancel = useCallback(() => {
@@ -352,10 +387,35 @@ const SpendingLimit = ({
     isDelegationLoading,
   ]);
 
-  const handleTokenSelection = useCallback((token: CardTokenAllowance) => {
-    setSelectedToken(token);
-    setOpenAssetSelectionBottomSheet(false);
-  }, []);
+  const handleOpenAssetSelection = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.CARD_BUTTON_CLICKED)
+        .addProperties({
+          action: CardActions.CHANGE_ASSET_BUTTON,
+        })
+        .build(),
+    );
+
+    navigation.navigate(
+      ...createAssetSelectionModalNavigationDetails({
+        tokensWithAllowances: allTokens ?? [],
+        delegationSettings,
+        cardExternalWalletDetails: externalWalletDetailsData,
+        selectionOnly: true,
+        hideSolanaAssets: true,
+        callerRoute: Routes.CARD.SPENDING_LIMIT,
+        callerParams: route?.params as Record<string, unknown>,
+      }),
+    );
+  }, [
+    navigation,
+    allTokens,
+    delegationSettings,
+    externalWalletDetailsData,
+    trackEvent,
+    createEventBuilder,
+    route?.params,
+  ]);
 
   const renderSelectedToken = () => {
     if (!selectedToken) {
@@ -421,7 +481,7 @@ const SpendingLimit = ({
       <View style={styles.assetContainer}>
         <TouchableOpacity
           style={styles.dropdownButton}
-          onPress={() => setOpenAssetSelectionBottomSheet(true)}
+          onPress={handleOpenAssetSelection}
         >
           {renderSelectedToken()}
         </TouchableOpacity>
@@ -579,18 +639,6 @@ const SpendingLimit = ({
           disabled={isDelegationLoading}
         />
       </View>
-      {openAssetSelectionBottomSheet && (
-        <AssetSelectionBottomSheet
-          sheetRef={assetSelectionSheetRef}
-          setOpenAssetSelectionBottomSheet={setOpenAssetSelectionBottomSheet}
-          tokensWithAllowances={allTokens ?? []}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={externalWalletDetailsData}
-          selectionOnly
-          onTokenSelect={handleTokenSelection}
-          hideSolanaAssets
-        />
-      )}
     </ScrollView>
   );
 };
diff --git a/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.test.tsx b/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.test.tsx
index 806004ffc73..7f3cd83a60d 100644
--- a/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.test.tsx
+++ b/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.test.tsx
@@ -8,10 +8,15 @@ import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { getDecimalChainId } from '../../../../../util/networks';
 import { trace, TraceName } from '../../../../../util/trace';
 import { CardTokenAllowance, AllowanceState } from '../../types';
-import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import { createDepositNavigationDetails } from '../../../Ramp/Deposit/routes/utils';
+import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
+
+// Mock hooks first - must be hoisted before imports
+const mockUseParams = jest.fn();
+const mockGoBack = jest.fn();
+const mockNavigate = jest.fn();
 
 // Mock dependencies
 jest.mock('../../hooks/useOpenSwaps', () => ({
@@ -62,6 +67,22 @@ jest.mock('./AddFundsBottomSheet.styles', () => ({
   })),
 }));
 
+jest.mock('../../../../../util/navigation/navUtils', () => ({
+  useParams: () => mockUseParams(),
+  createNavigationDetails: jest.fn((stackId, screenName) =>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (params?: any) => [stackId, { screen: screenName, params }],
+  ),
+}));
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    goBack: mockGoBack,
+    navigate: mockNavigate,
+  }),
+}));
+
 function renderWithProvider(component: React.ComponentType) {
   return renderScreen(
     component,
@@ -79,7 +100,6 @@ function renderWithProvider(component: React.ComponentType) {
 }
 
 describe('AddFundsBottomSheet', () => {
-  const mockNavigate = jest.fn();
   const mockOpenSwaps = jest.fn();
   const mockTrackEvent = jest.fn();
   const mockCreateEventBuilder = jest.fn();
@@ -87,9 +107,6 @@ describe('AddFundsBottomSheet', () => {
     addProperties: jest.fn().mockReturnThis(),
     build: jest.fn().mockReturnValue({ event: 'built' }),
   };
-  const mockSetOpenAddFundsBottomSheet = jest.fn();
-
-  const mockSheetRef = React.createRef<BottomSheetRef>();
 
   const mockPriorityToken: CardTokenAllowance = {
     address: '0x456',
@@ -101,12 +118,14 @@ describe('AddFundsBottomSheet', () => {
     allowance: '1000000',
   };
 
-  const defaultProps = {
-    setOpenAddFundsBottomSheet: mockSetOpenAddFundsBottomSheet,
-    sheetRef: mockSheetRef,
-    priorityToken: mockPriorityToken,
-    chainId: '0xe708',
-    navigate: mockNavigate,
+  const setupComponent = (
+    priorityToken: CardTokenAllowance | undefined = mockPriorityToken,
+  ) => {
+    mockUseParams.mockReturnValue({
+      priorityToken,
+    });
+
+    return renderWithProvider(() => <AddFundsBottomSheet />);
   };
 
   beforeEach(() => {
@@ -133,9 +152,8 @@ describe('AddFundsBottomSheet', () => {
   });
 
   it('renders with both options enabled and matches snapshot', () => {
-    const { toJSON } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { toJSON } = setupComponent();
+
     expect(toJSON()).toMatchSnapshot();
   });
 
@@ -144,18 +162,16 @@ describe('AddFundsBottomSheet', () => {
       isDepositEnabled: false,
     });
 
-    const { toJSON } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { toJSON } = setupComponent();
+
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders with only deposit option when swaps are not allowed and matches snapshot', () => {
     (isSwapsAllowed as jest.Mock).mockReturnValue(false);
 
-    const { toJSON } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { toJSON } = setupComponent();
+
     expect(toJSON()).toMatchSnapshot();
   });
 
@@ -165,24 +181,19 @@ describe('AddFundsBottomSheet', () => {
     });
     (isSwapsAllowed as jest.Mock).mockReturnValue(false);
 
-    const { toJSON } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { toJSON } = setupComponent();
+
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('displays the correct header text', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     expect(getByText('Select method')).toBeTruthy();
   });
 
   it('displays correct options when both are enabled', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     expect(getByText('Fund with cash')).toBeTruthy();
     expect(getByText('Fund with crypto')).toBeTruthy();
@@ -191,9 +202,7 @@ describe('AddFundsBottomSheet', () => {
   });
 
   it('handles deposit option press correctly', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     fireEvent.press(getByText('Fund with cash'));
 
@@ -210,9 +219,7 @@ describe('AddFundsBottomSheet', () => {
   });
 
   it('handles swap option press correctly', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     fireEvent.press(getByText('Fund with crypto'));
 
@@ -221,14 +228,15 @@ describe('AddFundsBottomSheet', () => {
     });
   });
 
-  it('does not call openSwaps when priority token is null', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} priorityToken={undefined} />
-    ));
+  it('does not render swap option when priority token is null', () => {
+    (isSwapsAllowed as jest.Mock).mockReturnValue(false);
+    const { queryByTestId } = setupComponent(undefined);
 
-    fireEvent.press(getByText('Fund with crypto'));
+    const swapOption = queryByTestId(
+      CardHomeSelectors.ADD_FUNDS_BOTTOM_SHEET_SWAP_OPTION,
+    );
 
-    expect(mockOpenSwaps).not.toHaveBeenCalled();
+    expect(swapOption).toBeNull();
   });
 
   it('renders correct descriptions for different tokens', () => {
@@ -237,9 +245,7 @@ describe('AddFundsBottomSheet', () => {
       symbol: 'USDT',
     };
 
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} priorityToken={usdtToken} />
-    ));
+    const { getByText } = setupComponent(usdtToken);
 
     expect(getByText('Low-cost card or bank transfer')).toBeTruthy();
     expect(getByText('Swap tokens into USDT on Linea')).toBeTruthy();
@@ -252,18 +258,14 @@ describe('AddFundsBottomSheet', () => {
       name: 'Tether USD',
     };
 
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} priorityToken={usdtToken} />
-    ));
+    const { getByText } = setupComponent(usdtToken);
 
     expect(getByText('Fund with cash')).toBeTruthy();
     expect(getByText('Fund with crypto')).toBeTruthy();
   });
 
   it('renders both options for USDC token', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     expect(getByText('Fund with cash')).toBeTruthy();
     expect(getByText('Fund with crypto')).toBeTruthy();
@@ -277,9 +279,7 @@ describe('AddFundsBottomSheet', () => {
       decimals: 18,
     };
 
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} priorityToken={ethToken} />
-    ));
+    const { getByText } = setupComponent(ethToken);
 
     expect(getByText('Fund with cash')).toBeTruthy();
     expect(getByText('Fund with crypto')).toBeTruthy();
@@ -288,9 +288,7 @@ describe('AddFundsBottomSheet', () => {
   });
 
   it('navigates to deposit route when deposit callback is executed', () => {
-    const { getByText } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+    const { getByText } = setupComponent();
 
     fireEvent.press(getByText('Fund with cash'));
 
@@ -299,10 +297,8 @@ describe('AddFundsBottomSheet', () => {
     );
   });
 
-  it('handles ref prop correctly', () => {
-    const { toJSON } = renderWithProvider(() => (
-      <AddFundsBottomSheet {...defaultProps} />
-    ));
+  it('renders component correctly', () => {
+    const { toJSON } = setupComponent();
 
     expect(toJSON()).toBeTruthy();
   });
diff --git a/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx b/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx
index e7f88996493..ea5eba841ad 100644
--- a/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx
+++ b/app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
@@ -34,20 +34,27 @@ import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome
 import { createDepositNavigationDetails } from '../../../Ramp/Deposit/routes/utils';
 import { safeFormatChainIdToHex } from '../../util/safeFormatChainIdToHex';
 import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
+import {
+  createNavigationDetails,
+  useParams,
+} from '../../../../../util/navigation/navUtils';
+import Routes from '../../../../../constants/navigation/Routes';
 
-export interface AddFundsBottomSheetProps {
-  setOpenAddFundsBottomSheet: (open: boolean) => void;
-  sheetRef: React.RefObject<BottomSheetRef>;
+interface AddFundsModalNavigationDetails {
   priorityToken?: CardTokenAllowance;
-  navigate: NavigationProp<ParamListBase>['navigate'];
 }
 
-const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
-  setOpenAddFundsBottomSheet,
-  sheetRef,
-  priorityToken,
-  navigate,
-}) => {
+export const createAddFundsModalNavigationDetails =
+  createNavigationDetails<AddFundsModalNavigationDetails>(
+    Routes.CARD.MODALS.ID,
+    Routes.CARD.MODALS.ADD_FUNDS,
+  );
+
+const AddFundsBottomSheet: React.FC = () => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const navigation = useNavigation();
+  const { priorityToken } = useParams<AddFundsModalNavigationDetails>();
+
   const { isDepositEnabled } = useDepositEnabled();
   const theme = useTheme();
   const styles = createStyles(theme);
@@ -61,7 +68,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
     (navigateFunc: () => void) => {
       sheetRef.current?.onCloseBottomSheet(navigateFunc);
     },
-    [sheetRef],
+    [],
   );
 
   const handleOpenSwaps = useCallback(() => {
@@ -73,7 +80,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
 
   const openDeposit = useCallback(() => {
     closeBottomSheetAndNavigate(() => {
-      navigate(...createDepositNavigationDetails());
+      navigation.navigate(...createDepositNavigationDetails());
     });
     trackEvent(
       createEventBuilder(
@@ -99,7 +106,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
   }, [
     rampGeodetectedRegion,
     closeBottomSheetAndNavigate,
-    navigate,
+    navigation,
     trackEvent,
     createEventBuilder,
     priorityToken,
@@ -133,14 +140,11 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
   return (
     <BottomSheet
       ref={sheetRef}
-      shouldNavigateBack={false}
-      onClose={() => {
-        setOpenAddFundsBottomSheet(false);
-      }}
+      shouldNavigateBack
       testID={CardHomeSelectors.ADD_FUNDS_BOTTOM_SHEET}
       keyboardAvoidingViewEnabled={false}
     >
-      <BottomSheetHeader onClose={() => setOpenAddFundsBottomSheet(false)}>
+      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
         <Text variant={TextVariant.HeadingSM}>
           {strings('card.add_funds_bottomsheet.select_method')}
         </Text>
@@ -152,7 +156,6 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
           item.enabled ? (
             <ListItemSelect
               onPress={() => {
-                setOpenAddFundsBottomSheet(false);
                 item.onPress();
               }}
               testID={item.testID}
diff --git a/app/components/UI/Card/components/AddFundsBottomSheet/index.ts b/app/components/UI/Card/components/AddFundsBottomSheet/index.ts
index 7e2c4e4628b..3c0d174684b 100644
--- a/app/components/UI/Card/components/AddFundsBottomSheet/index.ts
+++ b/app/components/UI/Card/components/AddFundsBottomSheet/index.ts
@@ -1 +1,4 @@
-export { default } from './AddFundsBottomSheet';
+export {
+  default,
+  createAddFundsModalNavigationDetails,
+} from './AddFundsBottomSheet';
diff --git a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.styles.ts b/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.styles.ts
deleted file mode 100644
index db028f944a4..00000000000
--- a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.styles.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Theme } from '../../../../../util/theme/models';
-
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
-    overlay: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: theme.colors.overlay.default,
-      justifyContent: 'flex-end',
-      zIndex: 1000,
-    },
-    bottomSheet: {
-      backgroundColor: theme.colors.background.default,
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-      maxHeight: '80%',
-      minHeight: '50%',
-    },
-    scrollView: {
-      maxHeight: '75%',
-      minHeight: '50%',
-    },
-    dragHandle: {
-      width: 48,
-      height: 6,
-      backgroundColor: theme.colors.border.muted,
-      borderRadius: 3,
-      alignSelf: 'center',
-      marginTop: 8,
-      marginBottom: 8,
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 16,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.border.muted,
-    },
-    title: {
-      flex: 1,
-      textAlign: 'center',
-    },
-    closeIcon: {
-      marginLeft: 16,
-    },
-    tokenList: {
-      flex: 1,
-    },
-    loadingContainer: {
-      padding: 20,
-      alignItems: 'center',
-    },
-    loadingText: {
-      marginTop: 12,
-      textAlign: 'center',
-    },
-    tokenItem: {
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.border.muted,
-    },
-    tokenIcon: {
-      marginRight: 12,
-    },
-    tokenInfo: {
-      flex: 1,
-    },
-    tokenName: {
-      color: theme.colors.text.alternative,
-      marginTop: 2,
-    },
-    tokenStatus: {
-      alignItems: 'flex-end',
-    },
-    statusText: {
-      fontWeight: 'bold',
-    },
-    statusEnabled: {
-      color: theme.colors.success.default,
-    },
-    statusLimited: {
-      color: theme.colors.warning.default,
-    },
-    statusNotEnabled: {
-      color: theme.colors.error.default,
-    },
-    balanceText: {
-      color: theme.colors.text.default,
-      marginTop: 2,
-    },
-    balanceToken: {
-      color: theme.colors.text.alternative,
-      marginTop: 1,
-    },
-  });
-
-export default createStyles;
diff --git a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.test.tsx b/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.test.tsx
index 9a88e1f3636..741bce8fb38 100644
--- a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.test.tsx
+++ b/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.test.tsx
@@ -26,6 +26,7 @@ jest.mock('../../../../../util/theme', () => ({
   },
 }));
 
+const mockUseParams = jest.fn();
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({
@@ -34,6 +35,11 @@ jest.mock('@react-navigation/native', () => ({
   }),
 }));
 
+jest.mock('../../../../../util/navigation/navUtils', () => ({
+  ...jest.requireActual('../../../../../util/navigation/navUtils'),
+  useParams: () => mockUseParams(),
+}));
+
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -89,6 +95,11 @@ jest.mock('../../hooks/useAssetBalances', () => ({
   useAssetBalances: jest.fn(),
 }));
 
+const mockUpdateTokenPriority = jest.fn();
+jest.mock('../../hooks/useUpdateTokenPriority', () => ({
+  useUpdateTokenPriority: jest.fn(),
+}));
+
 jest.mock('../../../../../util/Logger');
 
 // Create a mock tailwind function that can be called and has a style method
@@ -116,7 +127,7 @@ jest.mock('react-native-gesture-handler', () => {
   };
 });
 
-import React, { createRef } from 'react';
+import React from 'react';
 import { render, fireEvent, waitFor, act } from '@testing-library/react-native';
 import { useSelector } from 'react-redux';
 import { CaipChainId } from '@metamask/utils';
@@ -130,16 +141,11 @@ import {
   CardExternalWalletDetail,
 } from '../../types';
 import Routes from '../../../../../constants/navigation/Routes';
-import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import {
-  setAuthenticatedPriorityToken,
-  setAuthenticatedPriorityTokenLastFetched,
-  clearCacheData,
-} from '../../../../../core/redux/slices/card';
 import { ToastContext } from '../../../../../component-library/components/Toast';
 import { useMetrics } from '../../../../hooks/useMetrics';
 import { useNavigateToCardPage } from '../../hooks/useNavigateToCardPage';
 import { useAssetBalances } from '../../hooks/useAssetBalances';
+import { useUpdateTokenPriority } from '../../hooks/useUpdateTokenPriority';
 
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
 
@@ -203,12 +209,26 @@ const createMockDelegationSettings = (): DelegationSettingsResponse => ({
   },
 });
 
-describe('AssetSelectionBottomSheet', () => {
-  let sheetRef: React.RefObject<BottomSheetRef>;
+// Helper function to setup component with useParams
+const setupComponent = (paramsOverrides = {}) => {
+  mockUseParams.mockReturnValue({
+    tokensWithAllowances: [],
+    delegationSettings: null,
+    cardExternalWalletDetails: null,
+    navigateToCardHomeOnPriorityToken: false,
+    selectionOnly: false,
+    onTokenSelect: undefined,
+    hideSolanaAssets: false,
+    callerRoute: undefined,
+    callerParams: undefined,
+    ...paramsOverrides,
+  });
+  return renderWithToastContext(<AssetSelectionBottomSheet />);
+};
 
+describe('AssetSelectionBottomSheet', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    sheetRef = createRef<BottomSheetRef>();
 
     mockUseSelector.mockImplementation((selector) => {
       if (selector.toString().includes('selectUserCardLocation')) {
@@ -233,6 +253,33 @@ describe('AssetSelectionBottomSheet', () => {
     (useNavigateToCardPage as jest.Mock).mockReturnValue({
       navigateToCardPage: mockNavigateToCardPage,
     });
+
+    // Mock useUpdateTokenPriority to call onSuccess by default
+    mockUpdateTokenPriority.mockImplementation(async () => true);
+    (useUpdateTokenPriority as jest.Mock).mockImplementation((params) => ({
+      updateTokenPriority: async (token: unknown, walletDetails: unknown) => {
+        const result = await mockUpdateTokenPriority(token, walletDetails);
+        if (result && params?.onSuccess) {
+          params.onSuccess();
+        } else if (!result && params?.onError) {
+          params.onError(new Error('Update failed'));
+        }
+        return result;
+      },
+    }));
+
+    // Default useParams mock
+    mockUseParams.mockReturnValue({
+      tokensWithAllowances: [],
+      delegationSettings: null,
+      cardExternalWalletDetails: null,
+      navigateToCardHomeOnPriorityToken: false,
+      selectionOnly: false,
+      onTokenSelect: undefined,
+      hideSolanaAssets: false,
+      callerRoute: undefined,
+      callerParams: undefined,
+    });
   });
 
   afterEach(() => {
@@ -241,42 +288,25 @@ describe('AssetSelectionBottomSheet', () => {
 
   describe('rendering', () => {
     it('renders bottom sheet with title', () => {
-      const mockSetOpen = jest.fn();
-      const tokens: CardTokenAllowance[] = [];
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={tokens}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        delegationSettings,
+      });
 
       expect(getByText('Select token and network')).toBeOnTheScreen();
     });
 
     it('displays loading indicator when delegation settings is null', () => {
-      const mockSetOpen = jest.fn();
-      const tokens: CardTokenAllowance[] = [];
-
-      const { UNSAFE_getByType, queryByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={tokens}
-          delegationSettings={null}
-        />,
-      );
+      const { UNSAFE_getByType, queryByText } = setupComponent({
+        delegationSettings: null,
+      });
 
       expect(UNSAFE_getByType('ActivityIndicator' as never)).toBeTruthy();
       expect(queryByText('No tokens available')).toBeNull();
     });
 
     it('displays no tokens message when no tokens available', () => {
-      const mockSetOpen = jest.fn();
-      const tokens: CardTokenAllowance[] = [];
       // Create delegation settings with no tokens
       const delegationSettings: DelegationSettingsResponse = {
         networks: [
@@ -294,75 +324,55 @@ describe('AssetSelectionBottomSheet', () => {
         },
       };
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={tokens}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        delegationSettings,
+      });
 
       expect(getByText('No tokens available')).toBeOnTheScreen();
     });
 
     it('renders token list when tokens are available', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         symbol: 'USDC',
         allowanceState: AllowanceState.Enabled,
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       expect(getByText(/USDC on/)).toBeOnTheScreen();
       expect(getByText('Enabled')).toBeOnTheScreen();
     });
 
     it('displays limited state for tokens with limited allowance', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         symbol: 'USDT',
         allowanceState: AllowanceState.Limited,
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       expect(getByText('Limited')).toBeOnTheScreen();
     });
 
     it('displays not enabled state for tokens without allowance', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         symbol: 'DAI',
         allowanceState: AllowanceState.NotEnabled,
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getAllByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getAllByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       const notEnabledElements = getAllByText('Not enabled');
       expect(notEnabledElements.length).toBeGreaterThan(0);
@@ -372,7 +382,6 @@ describe('AssetSelectionBottomSheet', () => {
 
   describe('token filtering', () => {
     it('filters out Solana tokens when hideSolanaAssets is true', () => {
-      const mockSetOpen = jest.fn();
       const solanaToken = createMockToken({
         symbol: 'SOL',
         caipChainId: SolScope.Mainnet,
@@ -383,37 +392,28 @@ describe('AssetSelectionBottomSheet', () => {
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText, queryByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[solanaToken, lineaToken]}
-          delegationSettings={delegationSettings}
-          hideSolanaAssets
-        />,
-      );
+      const { getByText, queryByText } = setupComponent({
+        tokensWithAllowances: [solanaToken, lineaToken],
+        delegationSettings,
+        hideSolanaAssets: true,
+      });
 
       expect(getByText(/USDC on/)).toBeOnTheScreen();
       expect(queryByText(/SOL on/)).toBeNull();
     });
 
     it('shows Solana tokens when hideSolanaAssets is false', () => {
-      const mockSetOpen = jest.fn();
       const solanaToken = createMockToken({
         symbol: 'SOL',
         caipChainId: SolScope.Mainnet,
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[solanaToken]}
-          delegationSettings={delegationSettings}
-          hideSolanaAssets={false}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [solanaToken],
+        delegationSettings,
+        hideSolanaAssets: false,
+      });
 
       expect(getByText(/SOL on/)).toBeOnTheScreen();
     });
@@ -425,8 +425,6 @@ describe('AssetSelectionBottomSheet', () => {
         }
         return false;
       });
-
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings: DelegationSettingsResponse = {
         networks: [
@@ -448,14 +446,10 @@ describe('AssetSelectionBottomSheet', () => {
         _links: { self: '/api' },
       };
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       expect(getByText(/USDC on/)).toBeOnTheScreen();
     });
@@ -467,19 +461,13 @@ describe('AssetSelectionBottomSheet', () => {
         }
         return false;
       });
-
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       expect(getByText(/USDC on/)).toBeOnTheScreen();
     });
@@ -493,8 +481,6 @@ describe('AssetSelectionBottomSheet', () => {
         }
         return undefined;
       });
-
-      const mockSetOpen = jest.fn();
       const token1 = createMockToken({
         symbol: 'USDC',
         priority: 2,
@@ -508,14 +494,10 @@ describe('AssetSelectionBottomSheet', () => {
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getAllByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token1, token2]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getAllByText } = setupComponent({
+        tokensWithAllowances: [token1, token2],
+        delegationSettings,
+      });
 
       // Check that tokens are sorted by priority (USDT has priority 1, USDC has priority 2)
       const usdtToken = getAllByText(/USDT on Linea/)[0];
@@ -525,7 +507,6 @@ describe('AssetSelectionBottomSheet', () => {
     });
 
     it('sorts enabled tokens before not enabled tokens', () => {
-      const mockSetOpen = jest.fn();
       const notEnabledToken = createMockToken({
         symbol: 'DAI',
         allowanceState: AllowanceState.NotEnabled,
@@ -537,14 +518,10 @@ describe('AssetSelectionBottomSheet', () => {
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getAllByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[notEnabledToken, enabledToken]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getAllByText } = setupComponent({
+        tokensWithAllowances: [notEnabledToken, enabledToken],
+        delegationSettings,
+      });
 
       // Check that enabled tokens come before not enabled tokens
       const usdcToken = getAllByText(/USDC on Linea/)[0];
@@ -556,7 +533,6 @@ describe('AssetSelectionBottomSheet', () => {
 
   describe('balance display', () => {
     it('displays token balance from useAssetBalances hook', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
@@ -573,34 +549,25 @@ describe('AssetSelectionBottomSheet', () => {
         ]),
       );
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       expect(getByText('$123.45')).toBeOnTheScreen();
       expect(getByText('123.456789 USDC')).toBeOnTheScreen();
     });
 
     it('displays zero balance when balance data is not available', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
       (useAssetBalances as jest.Mock).mockReturnValue(new Map());
 
-      const { getAllByText, getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getAllByText, getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       const zeroBalanceElements = getAllByText('$0.00');
       expect(zeroBalanceElements.length).toBeGreaterThan(0);
@@ -611,21 +578,16 @@ describe('AssetSelectionBottomSheet', () => {
 
   describe('token selection', () => {
     it('calls onTokenSelect and closes bottom sheet in selection only mode', () => {
-      const mockSetOpen = jest.fn();
       const mockOnTokenSelect = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          selectionOnly
-          onTokenSelect={mockOnTokenSelect}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        selectionOnly: true,
+        onTokenSelect: mockOnTokenSelect,
+      });
 
       fireEvent.press(getByText(/USDC on/));
 
@@ -641,24 +603,18 @@ describe('AssetSelectionBottomSheet', () => {
           allowance: token.allowance,
         }),
       );
-      expect(mockSetOpen).toHaveBeenCalledWith(false);
     });
 
     it('navigates to spending limit for not enabled token', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         allowanceState: AllowanceState.NotEnabled,
       });
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+      });
 
       fireEvent.press(getByText(/USDC on/));
 
@@ -683,7 +639,6 @@ describe('AssetSelectionBottomSheet', () => {
     });
 
     it('updates priority for enabled token', async () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         allowanceState: AllowanceState.Enabled,
         priority: 2,
@@ -716,59 +671,44 @@ describe('AssetSelectionBottomSheet', () => {
         priorityWalletDetail: undefined,
       };
 
-      mockSdk.updateWalletPriority.mockResolvedValue(undefined);
+      mockUpdateTokenPriority.mockImplementation(async () => true);
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={cardExternalWalletDetails}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        cardExternalWalletDetails,
+      });
 
-      // Use getByText since FlatList items render synchronously in tests
       const tokenElement = getByText('USDC on Linea');
 
-      // Fire press event and wait for async operations
       await act(async () => {
         fireEvent.press(tokenElement);
-        // Allow time for async handlers to complete
         await new Promise((resolve) => setTimeout(resolve, 100));
       });
 
       await waitFor(
         () => {
-          expect(mockSdk.updateWalletPriority).toHaveBeenCalled();
+          expect(mockUpdateTokenPriority).toHaveBeenCalledWith(
+            expect.objectContaining({
+              address: token.address,
+              symbol: token.symbol,
+              caipChainId: token.caipChainId,
+              walletAddress: token.walletAddress,
+            }),
+            cardExternalWalletDetails.walletDetails,
+          );
         },
         { timeout: 3000 },
       );
 
-      expect(mockDispatch).toHaveBeenCalledWith(
-        clearCacheData('card-external-wallet-details'),
-      );
-      expect(mockDispatch).toHaveBeenCalledWith(
-        setAuthenticatedPriorityToken(
-          expect.objectContaining({
-            symbol: 'USDC',
-            priority: 1,
-          }),
-        ),
-      );
-      expect(mockDispatch).toHaveBeenCalledWith(
-        setAuthenticatedPriorityTokenLastFetched(expect.any(Date)),
-      );
       expect(mockShowToast).toHaveBeenCalledWith(
         expect.objectContaining({
           labelOptions: [{ label: 'Spend priority updated successfully' }],
         }),
       );
-      expect(mockSetOpen).toHaveBeenCalledWith(false);
     });
 
     it('closes bottom sheet when already priority token is selected and navigateToCardHomeOnPriorityToken is false', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
       const cardExternalWalletDetails = {
@@ -777,27 +717,20 @@ describe('AssetSelectionBottomSheet', () => {
         priorityWalletDetail: token,
       };
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={cardExternalWalletDetails}
-          navigateToCardHomeOnPriorityToken={false}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        cardExternalWalletDetails,
+        navigateToCardHomeOnPriorityToken: false,
+      });
 
       fireEvent.press(getByText(/USDC on/));
-
-      expect(mockSetOpen).toHaveBeenCalledWith(false);
       expect(mockNavigate).not.toHaveBeenCalled();
     });
   });
 
   describe('error handling', () => {
-    it('displays error toast when updateWalletPriority fails', async () => {
-      const mockSetOpen = jest.fn();
+    it('displays error toast when updateTokenPriority fails', async () => {
       const token = createMockToken({
         allowanceState: AllowanceState.Enabled,
       });
@@ -829,21 +762,16 @@ describe('AssetSelectionBottomSheet', () => {
         priorityWalletDetail: undefined,
       };
 
-      mockSdk.updateWalletPriority.mockRejectedValue(new Error('API Error'));
+      mockUpdateTokenPriority.mockImplementation(async () => false);
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={cardExternalWalletDetails}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        cardExternalWalletDetails,
+      });
 
       const tokenElement = getByText('USDC on Linea');
 
-      // Fire press event and wait for async operations
       await act(async () => {
         fireEvent.press(tokenElement);
         await new Promise((resolve) => setTimeout(resolve, 100));
@@ -859,57 +787,22 @@ describe('AssetSelectionBottomSheet', () => {
         },
         { timeout: 3000 },
       );
-
-      expect(mockSetOpen).toHaveBeenCalledWith(false);
     });
 
-    it('displays error toast when selected wallet is not found', async () => {
-      const mockSetOpen = jest.fn();
+    it('displays error toast when wallet details are not available', async () => {
       const token = createMockToken({
         allowanceState: AllowanceState.Enabled,
-        address: '0xdifferent',
       });
       const delegationSettings = createMockDelegationSettings();
-      const cardExternalWalletDetails: {
-        walletDetails: CardExternalWalletDetail[];
-        mappedWalletDetails: CardTokenAllowance[];
-        priorityWalletDetail: CardTokenAllowance | undefined;
-      } = {
-        walletDetails: [
-          {
-            id: 1,
-            walletAddress: '0xwallet',
-            currency: 'USDC',
-            balance: '1000',
-            allowance: '500',
-            priority: 1,
-            tokenDetails: {
-              address: '0x123',
-              symbol: 'USDC',
-              name: 'USD Coin',
-              decimals: 6,
-            },
-            caipChainId: 'eip155:59144' as CaipChainId,
-            network: 'linea' as const,
-          },
-        ],
-        mappedWalletDetails: [token],
-        priorityWalletDetail: undefined,
-      };
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={cardExternalWalletDetails}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        cardExternalWalletDetails: null,
+      });
 
       const tokenElement = getByText('USDC on Linea');
 
-      // Fire press event and wait for async operations
       await act(async () => {
         fireEvent.press(tokenElement);
         await new Promise((resolve) => setTimeout(resolve, 100));
@@ -925,14 +818,12 @@ describe('AssetSelectionBottomSheet', () => {
         },
         { timeout: 3000 },
       );
-
-      expect(mockSetOpen).toHaveBeenCalledWith(false);
+      expect(mockUpdateTokenPriority).not.toHaveBeenCalled();
     });
   });
 
   describe('metrics tracking', () => {
     it('tracks token selection event', async () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken({
         allowanceState: AllowanceState.Enabled,
         allowance: '1000',
@@ -965,21 +856,16 @@ describe('AssetSelectionBottomSheet', () => {
         priorityWalletDetail: undefined,
       };
 
-      mockSdk.updateWalletPriority.mockResolvedValue(undefined);
+      mockUpdateTokenPriority.mockImplementation(async () => true);
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          cardExternalWalletDetails={cardExternalWalletDetails}
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        cardExternalWalletDetails,
+      });
 
       const tokenElement = getByText('USDC on Linea');
 
-      // Fire press event and wait for async operations
       await act(async () => {
         fireEvent.press(tokenElement);
         await new Promise((resolve) => setTimeout(resolve, 100));
@@ -998,38 +884,28 @@ describe('AssetSelectionBottomSheet', () => {
 
   describe('Solana not supported footer', () => {
     it('displays Solana not supported button when hideSolanaAssets is true', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          hideSolanaAssets
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        hideSolanaAssets: true,
+      });
 
       expect(getByText('Others tokens on Solana')).toBeOnTheScreen();
       expect(getByText('Enable on card.metamask.io')).toBeOnTheScreen();
     });
 
     it('calls navigateToCardPage when Solana not supported button is pressed', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
-      const { getByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          hideSolanaAssets
-        />,
-      );
+      const { getByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        hideSolanaAssets: true,
+      });
 
       fireEvent.press(getByText('Others tokens on Solana'));
 
@@ -1037,19 +913,14 @@ describe('AssetSelectionBottomSheet', () => {
     });
 
     it('does not display Solana not supported button when hideSolanaAssets is false', () => {
-      const mockSetOpen = jest.fn();
       const token = createMockToken();
       const delegationSettings = createMockDelegationSettings();
 
-      const { queryByText } = renderWithToastContext(
-        <AssetSelectionBottomSheet
-          setOpenAssetSelectionBottomSheet={mockSetOpen}
-          sheetRef={sheetRef}
-          tokensWithAllowances={[token]}
-          delegationSettings={delegationSettings}
-          hideSolanaAssets={false}
-        />,
-      );
+      const { queryByText } = setupComponent({
+        tokensWithAllowances: [token],
+        delegationSettings,
+        hideSolanaAssets: false,
+      });
 
       expect(
         queryByText('card.asset_selection.solana_not_supported_button_title'),
diff --git a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.tsx b/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.tsx
index 9ad51be6b36..2e639c7fe9b 100644
--- a/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.tsx
+++ b/app/components/UI/Card/components/AssetSelectionBottomSheet/AssetSelectionBottomSheet.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useRef } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '../../../../../util/theme';
@@ -9,13 +9,8 @@ import {
   CardTokenAllowance,
   DelegationSettingsResponse,
 } from '../../types';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  setAuthenticatedPriorityToken,
-  setAuthenticatedPriorityTokenLastFetched,
-  clearCacheData,
-  selectUserCardLocation,
-} from '../../../../../core/redux/slices/card';
+import { useSelector } from 'react-redux';
+import { selectUserCardLocation } from '../../../../../core/redux/slices/card';
 import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
@@ -60,13 +55,15 @@ import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { CardActions } from '../../util/metrics';
 import { truncateAddress } from '../../util/truncateAddress';
 import { useNavigateToCardPage } from '../../hooks/useNavigateToCardPage';
-import Logger from '../../../../../util/Logger';
 import { useAssetBalances } from '../../hooks/useAssetBalances';
 import { mapCaipChainIdToChainName } from '../../util/mapCaipChainIdToChainName';
+import { useUpdateTokenPriority } from '../../hooks/useUpdateTokenPriority';
+import {
+  createNavigationDetails,
+  useParams,
+} from '../../../../../util/navigation/navUtils';
 
-export interface AssetSelectionBottomSheetProps {
-  setOpenAssetSelectionBottomSheet: (open: boolean) => void;
-  sheetRef: React.RefObject<BottomSheetRef>;
+interface AssetSelectionModalNavigationDetails {
   tokensWithAllowances: CardTokenAllowance[];
   delegationSettings: DelegationSettingsResponse | null;
   cardExternalWalletDetails?:
@@ -82,28 +79,37 @@ export interface AssetSelectionBottomSheetProps {
       }
     | null;
   navigateToCardHomeOnPriorityToken?: boolean;
-  // Selection only mode: just call onTokenSelect and close, don't handle priority/navigation
   selectionOnly?: boolean;
   onTokenSelect?: (token: CardTokenAllowance) => void;
-  // Hide Solana assets completely (used in SpendingLimit since Solana delegation is not supported)
   hideSolanaAssets?: boolean;
+  // For navigation-based selection mode: where to return with the selected token
+  callerRoute?: string;
+  callerParams?: Record<string, unknown>;
 }
 
-const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
-  setOpenAssetSelectionBottomSheet,
-  sheetRef,
-  tokensWithAllowances,
-  delegationSettings,
-  cardExternalWalletDetails,
-  navigateToCardHomeOnPriorityToken = false,
-  selectionOnly = false,
-  onTokenSelect,
-  hideSolanaAssets = false,
-}) => {
+export const createAssetSelectionModalNavigationDetails =
+  createNavigationDetails<AssetSelectionModalNavigationDetails>(
+    Routes.CARD.MODALS.ID,
+    Routes.CARD.MODALS.ASSET_SELECTION,
+  );
+
+const AssetSelectionBottomSheet: React.FC = () => {
+  const sheetRef = useRef<BottomSheetRef>(null);
   const navigation = useNavigation();
+  const {
+    tokensWithAllowances,
+    delegationSettings,
+    cardExternalWalletDetails,
+    navigateToCardHomeOnPriorityToken = false,
+    selectionOnly = false,
+    onTokenSelect,
+    hideSolanaAssets = false,
+    callerRoute,
+    callerParams,
+  } = useParams<AssetSelectionModalNavigationDetails>();
+
   const theme = useTheme();
   const tw = useTailwind();
-  const dispatch = useDispatch();
   const { toastRef } = useContext(ToastContext);
   const { sdk } = useCardSDK();
   const { trackEvent, createEventBuilder } = useMetrics();
@@ -493,6 +499,17 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
     });
   }, [toastRef, theme]);
 
+  const { updateTokenPriority } = useUpdateTokenPriority({
+    onSuccess: () => {
+      showSuccessToast();
+      sheetRef.current?.onCloseBottomSheet();
+    },
+    onError: () => {
+      showErrorToast();
+      sheetRef.current?.onCloseBottomSheet();
+    },
+  });
+
   const updatePriority = useCallback(
     async (token: CardTokenAllowance) => {
       trackEvent(
@@ -509,94 +526,19 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
           })
           .build(),
       );
-      if (
-        !sdk ||
-        !delegationSettings ||
-        !cardExternalWalletDetails?.walletDetails
-      ) {
-        setOpenAssetSelectionBottomSheet(false);
-        return;
-      }
-
-      try {
-        const selectedWallet = cardExternalWalletDetails.walletDetails.find(
-          (wallet) =>
-            wallet.tokenDetails.address?.toLowerCase() ===
-              token.address?.toLowerCase() &&
-            wallet.caipChainId === token.caipChainId &&
-            wallet.walletAddress?.toLowerCase() ===
-              token.walletAddress?.toLowerCase(),
-        );
-
-        if (!selectedWallet) {
-          showErrorToast();
-          setOpenAssetSelectionBottomSheet(false);
-          return;
-        }
-
-        // First, sort by current priority to maintain order
-        const sortedWallets = [...cardExternalWalletDetails.walletDetails].sort(
-          (a, b) => a.priority - b.priority,
-        );
-
-        // Build new priorities: selected gets 1, others shift down maintaining their order
-        let nextPriority = 2;
-        const newPriorities = sortedWallets.map((wallet) => {
-          const isSelected =
-            wallet.id === selectedWallet.id &&
-            wallet.walletAddress?.toLowerCase() ===
-              selectedWallet.walletAddress?.toLowerCase();
-
-          const priority = isSelected ? 1 : nextPriority++;
-
-          return {
-            id: wallet.id,
-            priority,
-          };
-        });
-
-        await sdk.updateWalletPriority(newPriorities);
-
-        // Invalidate external wallet details cache to force refetch with updated priorities
-        dispatch(clearCacheData('card-external-wallet-details'));
-
-        // Update priority token in Redux with new priority value
-        const priorityTokenData: CardTokenAllowance = {
-          address: token.address,
-          decimals: token.decimals,
-          symbol: token.symbol,
-          name: token.name,
-          allowanceState: token.allowanceState,
-          allowance: token.allowance || '0',
-          availableBalance: token.availableBalance || '0',
-          walletAddress: selectedWallet.walletAddress,
-          caipChainId: token.caipChainId,
-          delegationContract: token.delegationContract,
-          priority: 1, // New priority is always 1 (highest)
-        };
-
-        dispatch(setAuthenticatedPriorityToken(priorityTokenData));
-        dispatch(setAuthenticatedPriorityTokenLastFetched(new Date()));
 
-        showSuccessToast();
-        setOpenAssetSelectionBottomSheet(false);
-      } catch (error) {
-        Logger.error(
-          error as Error,
-          'AssetSelectionBottomSheet: Error updating wallet priority',
-        );
+      if (!cardExternalWalletDetails?.walletDetails) {
         showErrorToast();
-        setOpenAssetSelectionBottomSheet(false);
+        sheetRef.current?.onCloseBottomSheet();
+        return;
       }
+
+      await updateTokenPriority(token, cardExternalWalletDetails.walletDetails);
     },
     [
-      sdk,
-      delegationSettings,
       cardExternalWalletDetails,
-      dispatch,
-      showSuccessToast,
+      updateTokenPriority,
       showErrorToast,
-      setOpenAssetSelectionBottomSheet,
       trackEvent,
       createEventBuilder,
     ],
@@ -616,10 +558,28 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
 
   const handleTokenPress = useCallback(
     async (token: CardTokenAllowance) => {
-      // Selection only mode: just call the callback and close
-      if (selectionOnly && onTokenSelect) {
-        onTokenSelect(token);
-        setOpenAssetSelectionBottomSheet(false);
+      // Selection only mode: navigate back with the selected token
+      if (selectionOnly) {
+        // If onTokenSelect callback is provided (legacy mode), use it
+        if (onTokenSelect) {
+          onTokenSelect(token);
+          sheetRef.current?.onCloseBottomSheet();
+          return;
+        }
+
+        // Navigation-based mode: go back with the selected token
+        closeBottomSheetAndNavigate(() => {
+          if (callerRoute) {
+            // Navigate back to the caller route with the selected token
+            navigation.navigate(callerRoute, {
+              ...callerParams,
+              returnedSelectedToken: token,
+            });
+          } else {
+            // Fallback: just go back
+            navigation.goBack();
+          }
+        });
         return;
       }
 
@@ -636,7 +596,7 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
           });
         } else {
           // Just close the bottom sheet
-          setOpenAssetSelectionBottomSheet(false);
+          sheetRef.current?.onCloseBottomSheet();
         }
       } else if (
         token.allowanceState === AllowanceState.Enabled ||
@@ -662,11 +622,12 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
     [
       selectionOnly,
       onTokenSelect,
+      callerRoute,
+      callerParams,
       isPriorityToken,
       navigateToCardHomeOnPriorityToken,
       closeBottomSheetAndNavigate,
       navigation,
-      setOpenAssetSelectionBottomSheet,
       updatePriority,
       cardExternalWalletDetails,
       tokensWithAllowances,
@@ -894,21 +855,17 @@ const AssetSelectionBottomSheet: React.FC<AssetSelectionBottomSheetProps> = ({
   return (
     <BottomSheet
       ref={sheetRef}
-      shouldNavigateBack={false}
-      onClose={() => {
-        setOpenAssetSelectionBottomSheet(false);
-      }}
+      shouldNavigateBack
       keyboardAvoidingViewEnabled={false}
     >
-      <BottomSheetHeader
-        onClose={() => setOpenAssetSelectionBottomSheet(false)}
-      >
+      <BottomSheetHeader onClose={() => sheetRef.current?.onCloseBottomSheet()}>
         <Text variant={TextVariant.HeadingSM}>
           {strings('card.select_asset')}
         </Text>
       </BottomSheetHeader>
-
-      {renderBottomSheetContent()}
+      <View style={tw.style('max-h-[400px]')}>
+        {renderBottomSheetContent()}
+      </View>
     </BottomSheet>
   );
 };
diff --git a/app/components/UI/Card/components/AssetSelectionBottomSheet/index.ts b/app/components/UI/Card/components/AssetSelectionBottomSheet/index.ts
new file mode 100644
index 00000000000..5e7ebd712b5
--- /dev/null
+++ b/app/components/UI/Card/components/AssetSelectionBottomSheet/index.ts
@@ -0,0 +1,4 @@
+export {
+  default,
+  createAssetSelectionModalNavigationDetails,
+} from './AssetSelectionBottomSheet';
diff --git a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.styles.ts b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.styles.ts
index 0dbdf424def..4b95b969d98 100644
--- a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.styles.ts
+++ b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.styles.ts
@@ -19,6 +19,9 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'space-between',
       alignItems: 'center',
     },
+    skeletonRounded: {
+      borderRadius: 12,
+    },
   });
 
 export default createStyles;
diff --git a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.test.tsx b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.test.tsx
index 16f7a8620fa..8dde446a9eb 100644
--- a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.test.tsx
+++ b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.test.tsx
@@ -27,6 +27,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders with full remaining allowance', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance="200"
@@ -41,6 +42,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders with partial allowance consumed', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance="150"
@@ -55,6 +57,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders with most of allowance consumed', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance="40"
@@ -69,6 +72,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders with full allowance consumed', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance="0"
@@ -83,6 +87,7 @@ describe('SpendingLimitProgressBar', () => {
   it('handles zero total allowance', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="0"
         remainingAllowance="0"
@@ -97,6 +102,7 @@ describe('SpendingLimitProgressBar', () => {
   it('handles undefined allowance values', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance={undefined as unknown as string}
         remainingAllowance={undefined as unknown as string}
@@ -111,6 +117,7 @@ describe('SpendingLimitProgressBar', () => {
   it('handles small decimal values', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="1"
         remainingAllowance="0.5"
@@ -125,6 +132,7 @@ describe('SpendingLimitProgressBar', () => {
   it('handles consumed exceeding total allowance', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="100"
         remainingAllowance="-50"
@@ -139,6 +147,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders with different symbol', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={18}
         totalAllowance="1000"
         remainingAllowance="500"
@@ -153,6 +162,7 @@ describe('SpendingLimitProgressBar', () => {
   it('renders progress bar component', () => {
     const { toJSON } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance="100"
@@ -166,6 +176,7 @@ describe('SpendingLimitProgressBar', () => {
   it('handles null allowance values', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="200"
         remainingAllowance={null as unknown as string}
@@ -180,6 +191,7 @@ describe('SpendingLimitProgressBar', () => {
   it('calculates consumed amount for 25% consumption', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="400"
         remainingAllowance="300"
@@ -193,6 +205,7 @@ describe('SpendingLimitProgressBar', () => {
   it('calculates consumed amount for 75% consumption', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="400"
         remainingAllowance="100"
@@ -206,6 +219,7 @@ describe('SpendingLimitProgressBar', () => {
   it('calculates consumed amount for 99% consumption', () => {
     const { getByText } = renderWithProvider(() => (
       <SpendingLimitProgressBar
+        isLoading={false}
         decimals={6}
         totalAllowance="100"
         remainingAllowance="1"
diff --git a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx
index 64d48d587a5..e3b3a900a67 100644
--- a/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx
+++ b/app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx
@@ -7,12 +7,15 @@ import Text, {
 import createStyles from './SpendingLimitProgressBar.styles';
 import { useTheme } from '../../../../../util/theme';
 import ProgressBar from 'react-native-progress/Bar';
+import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
 
 interface SpendingLimitProgressBarProps {
   decimals: number;
   totalAllowance: string;
   remainingAllowance: string;
   symbol: string;
+  isLoading: boolean;
 }
 
 const SpendingLimitProgressBar = ({
@@ -20,6 +23,7 @@ const SpendingLimitProgressBar = ({
   totalAllowance,
   remainingAllowance,
   symbol,
+  isLoading,
 }: SpendingLimitProgressBarProps) => {
   const theme = useTheme();
   const styles = createStyles(theme);
@@ -64,6 +68,20 @@ const SpendingLimitProgressBar = ({
 
   const totalAllowanceDisplay = formatDisplayValue(totalAllowanceFloat);
   const consumedAmountDisplay = formatDisplayValue(consumedAmount);
+
+  if (isLoading) {
+    return (
+      <View style={styles.container}>
+        <Skeleton
+          height={20}
+          width={'100%'}
+          style={styles.skeletonRounded}
+          testID={CardHomeSelectors.SPENDING_LIMIT_PROGRESS_BAR_SKELETON}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.container}>
       <View style={styles.divider} />
diff --git a/app/components/UI/Card/constants.ts b/app/components/UI/Card/constants.ts
index f388dfa4d5c..a4100734c51 100644
--- a/app/components/UI/Card/constants.ts
+++ b/app/components/UI/Card/constants.ts
@@ -9,3 +9,11 @@ export const BAANX_MAX_LIMIT = '2199023255551';
 export const AUTHENTICATED_CACHE_DURATION = 60 * 1000;
 export const UNAUTHENTICATED_CACHE_DURATION = 5 * 60 * 1000;
 export const SUPPORTED_ASSET_NETWORKS = ['linea', 'linea-us', 'solana'];
+
+/**
+ * Tokens that don't support the spending limit progress bar feature.
+ * These tokens have different allowance behavior and we cannot reliably
+ * track the total allowance from approval logs.
+ * Format: Token symbols in uppercase
+ */
+export const SPENDING_LIMIT_UNSUPPORTED_TOKENS = ['AUSDC'];
diff --git a/app/components/UI/Card/hooks/useAssetBalances.test.ts b/app/components/UI/Card/hooks/useAssetBalances.test.ts
index 1714c452933..3dd96b16e36 100644
--- a/app/components/UI/Card/hooks/useAssetBalances.test.ts
+++ b/app/components/UI/Card/hooks/useAssetBalances.test.ts
@@ -293,7 +293,7 @@ describe('useAssetBalances', () => {
       const balanceInfo = result.current.get(key);
 
       expect(balanceInfo).toBeDefined();
-      expect(balanceInfo?.balanceFiat).toBe('250.25 USDC');
+      expect(balanceInfo?.balanceFiat).toBe('250.250000 USDC');
       expect(balanceInfo?.rawFiatNumber).toBeUndefined();
     });
   });
@@ -759,7 +759,7 @@ describe('useAssetBalances', () => {
       const key = `${mockEvmToken.address?.toLowerCase()}-${mockEvmToken.caipChainId}-${mockEvmToken.walletAddress?.toLowerCase()}`;
       const balanceInfo = result.current.get(key);
 
-      expect(balanceInfo?.balanceFiat).toBe('500.50 USDC');
+      expect(balanceInfo?.balanceFiat).toBe('500.500000 USDC');
     });
   });
 
@@ -1179,7 +1179,7 @@ describe('useAssetBalances', () => {
       const key = `${tokenWithBalance.address?.toLowerCase()}-${tokenWithBalance.caipChainId}-${tokenWithBalance.walletAddress?.toLowerCase()}`;
       const balanceInfo = result.current.get(key);
 
-      expect(balanceInfo?.balanceFiat).toBe('100 USDC');
+      expect(balanceInfo?.balanceFiat).toBe('100.000000 USDC');
     });
 
     it('falls back to token symbol when availableBalance is zero', () => {
@@ -1242,7 +1242,7 @@ describe('useAssetBalances', () => {
       const key = `${tokenWithZeroBalance.address?.toLowerCase()}-${tokenWithZeroBalance.caipChainId}-${tokenWithZeroBalance.walletAddress?.toLowerCase()}`;
       const balanceInfo = result.current.get(key);
 
-      expect(balanceInfo?.balanceFiat).toBe('0 USDC');
+      expect(balanceInfo?.balanceFiat).toBe('$0.00');
     });
 
     it('handles walletAsset with special characters in balanceFiat', () => {
@@ -1366,7 +1366,7 @@ describe('useAssetBalances', () => {
       const key = `${tokenWithBalance.address?.toLowerCase()}-${tokenWithBalance.caipChainId}-${tokenWithBalance.walletAddress?.toLowerCase()}`;
       const balanceInfo = result.current.get(key);
 
-      expect(balanceInfo?.balanceFiat).toBe('500 USDC');
+      expect(balanceInfo?.balanceFiat).toBe('500.000000 USDC');
     });
   });
 
diff --git a/app/components/UI/Card/hooks/useAssetBalances.tsx b/app/components/UI/Card/hooks/useAssetBalances.tsx
index 8cd2c4affa6..7ba8a6df2b3 100644
--- a/app/components/UI/Card/hooks/useAssetBalances.tsx
+++ b/app/components/UI/Card/hooks/useAssetBalances.tsx
@@ -170,10 +170,9 @@ export const useAssetBalances = (
     ): { balanceFiat: string; rawFiatNumber: number | undefined } => {
       const conversionRates =
         MultichainAssetsRatesController?.state?.conversionRates;
-      const assetConversionRate =
-        conversionRates?.[
-          `${token.caipChainId}/token:${token.address}` as `${string}:${string}/${string}:${string}`
-        ];
+      const assetKey =
+        `${token.caipChainId}/token:${token.address}` as `${string}:${string}/${string}:${string}`;
+      const assetConversionRate = conversionRates?.[assetKey];
 
       if (assetConversionRate) {
         const normalizedBalanceForFiat = balanceToUse.replace(',', '.');
@@ -198,8 +197,24 @@ export const useAssetBalances = (
         return { balanceFiat, rawFiatNumber: balanceFiatCalculation };
       }
 
+      // Fallback: Check if balance is actually zero
+      const balanceNum = parseFloat(balanceToUse.replace(',', '.'));
+      if (balanceNum === 0 || isNaN(balanceNum)) {
+        // Show $0.00 for zero balances
+        const balanceFiat = formatWithThreshold(0, 0.01, I18n.locale, {
+          style: 'currency',
+          currency: currentCurrency?.toUpperCase() || 'USD',
+        });
+        return {
+          balanceFiat,
+          rawFiatNumber: 0,
+        };
+      }
+
+      // If we have a real balance but no conversion rate, show balance with symbol
+      // This prevents showing $0.00 for tokens with actual value
       return {
-        balanceFiat: `${balanceToUse} ${token.symbol}`,
+        balanceFiat: `${parseFloat(balanceToUse.replace(',', '.')).toFixed(6)} ${token.symbol}`,
         rawFiatNumber: undefined,
       };
     },
@@ -272,7 +287,7 @@ export const useAssetBalances = (
   // Helper: Calculate fiat for EVM tokens
   const calculateEvmFiat = useCallback(
     (
-      token: CardTokenAllowance,
+      _token: CardTokenAllowance,
       balanceToUse: string,
       balanceSource: 'availableBalance' | 'filteredToken' | 'walletAsset',
       chainId: Hex,
@@ -316,18 +331,37 @@ export const useAssetBalances = (
       }
 
       // For availableBalance with rates but no market data price
+      // Try deriveBalanceFromAssetMarketDetails even without walletAsset
       if (
         balanceSource === 'availableBalance' &&
         rates?.conversionRate &&
-        rates.conversionRate > 0 &&
-        walletAsset
+        rates.conversionRate > 0
       ) {
         const normalizedBalance = balanceToUse.replace(',', '.');
-        const mockAsset: TokenI = {
-          ...walletAsset,
-          balance: normalizedBalance,
-          balanceFiat: undefined,
-        };
+
+        // Create mock asset from walletAsset if available, otherwise from token data
+        const mockAsset: TokenI = walletAsset
+          ? {
+              ...walletAsset,
+              balance: normalizedBalance,
+              balanceFiat: undefined,
+            }
+          : ({
+              address: _token.address ?? '',
+              symbol: _token.symbol ?? '',
+              decimals: _token.decimals ?? 0,
+              name: _token.name ?? _token.symbol ?? '',
+              balance: normalizedBalance,
+              balanceFiat: undefined,
+              chainId,
+              isETH: false,
+              aggregators: [],
+              image: buildTokenIconUrl(
+                _token.caipChainId,
+                _token.address ?? '',
+              ),
+              logo: buildTokenIconUrl(_token.caipChainId, _token.address ?? ''),
+            } as TokenI);
 
         const allMarketDataForChain =
           TokenRatesController?.state?.marketData?.[chainId] || {};
@@ -374,9 +408,24 @@ export const useAssetBalances = (
         }
       }
 
-      // Last resort: show balance with token symbol
+      // Last resort: Check if balance is actually zero
+      const balanceNum = parseFloat(balanceToUse.replace(',', '.'));
+      if (balanceNum === 0 || isNaN(balanceNum)) {
+        // Show $0.00 for zero balances
+        const balanceFiat = formatWithThreshold(0, 0.01, I18n.locale, {
+          style: 'currency',
+          currency: currentCurrency?.toUpperCase() || 'USD',
+        });
+        return {
+          balanceFiat,
+          rawFiatNumber: 0,
+        };
+      }
+
+      // If we have a real balance but no price data, show balance with symbol
+      // This prevents showing $0.00 for tokens with actual value
       return {
-        balanceFiat: `${balanceToUse} ${token.symbol}`,
+        balanceFiat: `${parseFloat(balanceToUse.replace(',', '.')).toFixed(6)} ${_token.symbol}`,
         rawFiatNumber: undefined,
       };
     },
diff --git a/app/components/UI/Card/hooks/useCardDelegation.test.ts b/app/components/UI/Card/hooks/useCardDelegation.test.ts
index 42da4b1eea5..a057c109820 100644
--- a/app/components/UI/Card/hooks/useCardDelegation.test.ts
+++ b/app/components/UI/Card/hooks/useCardDelegation.test.ts
@@ -574,6 +574,42 @@ describe('useCardDelegation', () => {
       expect(result.current.error).toBe('Delegation completion failed');
     });
 
+    it('handles delegation completion failure after transaction confirmation', async () => {
+      const completionError = new Error('API delegation completion failed');
+      mockSDK.completeEVMDelegation.mockRejectedValue(completionError);
+
+      const mockToken = createMockToken();
+      const params = createMockDelegationParams();
+
+      Engine.controllerMessenger.subscribeOnceIf = jest
+        .fn()
+        .mockImplementation((_eventName, callback) => {
+          // Immediately call the callback with a confirmed transaction
+          setImmediate(() => {
+            callback({
+              id: 'transaction-meta-id-123',
+              status: TransactionStatus.confirmed,
+            });
+          });
+        });
+
+      const { result } = renderHook(() => useCardDelegation(mockToken));
+
+      await act(async () => {
+        await expect(result.current.submitDelegation(params)).rejects.toThrow(
+          'API delegation completion failed',
+        );
+      });
+
+      expect(result.current.error).toBe('API delegation completion failed');
+      expect(Logger.error).toHaveBeenCalledWith(
+        completionError,
+        'Failed to complete EVM delegation',
+      );
+      // Transaction was confirmed but completion failed
+      expect(mockSDK.completeEVMDelegation).toHaveBeenCalled();
+    });
+
     it('handles non-Error objects thrown during delegation', async () => {
       mockSDK.generateDelegationToken.mockRejectedValue('String error');
 
@@ -947,7 +983,10 @@ describe('useCardDelegation', () => {
       const { result } = renderHook(() => useCardDelegation(mockToken));
 
       // Start delegation (don't await yet)
-      const delegationPromise = result.current.submitDelegation(params);
+      let delegationPromise: Promise<void> = Promise.resolve();
+      act(() => {
+        delegationPromise = result.current.submitDelegation(params);
+      });
 
       // Wait a bit to ensure subscription is set up
       await new Promise((resolve) => setTimeout(resolve, 100));
@@ -970,6 +1009,70 @@ describe('useCardDelegation', () => {
       // Now it should be called
       expect(mockSDK.completeEVMDelegation).toHaveBeenCalled();
     });
+
+    it('handles transaction failure in confirmation listener', async () => {
+      const mockToken = createMockToken();
+      const params = createMockDelegationParams();
+
+      Engine.controllerMessenger.subscribeOnceIf = jest
+        .fn()
+        .mockImplementation((_eventName, callback) => {
+          // Immediately call the callback with a failed transaction
+          setImmediate(() => {
+            callback({
+              id: 'transaction-meta-id-123',
+              status: TransactionStatus.failed,
+              error: {
+                message: 'Transaction execution failed',
+              },
+            });
+          });
+        });
+
+      const { result } = renderHook(() => useCardDelegation(mockToken));
+
+      await act(async () => {
+        await expect(result.current.submitDelegation(params)).rejects.toThrow(
+          'Transaction execution failed',
+        );
+      });
+
+      expect(result.current.error).toBe('Transaction execution failed');
+      expect(Logger.error).toHaveBeenCalledWith(
+        expect.any(Error),
+        'Transaction failed',
+      );
+      expect(mockSDK.completeEVMDelegation).not.toHaveBeenCalled();
+    });
+
+    it('handles transaction failure with generic message when error details not provided', async () => {
+      const mockToken = createMockToken();
+      const params = createMockDelegationParams();
+
+      Engine.controllerMessenger.subscribeOnceIf = jest
+        .fn()
+        .mockImplementation((_eventName, callback) => {
+          // Immediately call the callback with a failed transaction without error details
+          setImmediate(() => {
+            callback({
+              id: 'transaction-meta-id-123',
+              status: TransactionStatus.failed,
+              error: undefined,
+            });
+          });
+        });
+
+      const { result } = renderHook(() => useCardDelegation(mockToken));
+
+      await act(async () => {
+        await expect(result.current.submitDelegation(params)).rejects.toThrow(
+          'Transaction failed',
+        );
+      });
+
+      expect(result.current.error).toBe('Transaction failed');
+      expect(mockSDK.completeEVMDelegation).not.toHaveBeenCalled();
+    });
   });
 
   describe('edge cases', () => {
diff --git a/app/components/UI/Card/hooks/useCardDelegation.ts b/app/components/UI/Card/hooks/useCardDelegation.ts
index 18964c7332b..67adf46271c 100644
--- a/app/components/UI/Card/hooks/useCardDelegation.ts
+++ b/app/components/UI/Card/hooks/useCardDelegation.ts
@@ -170,6 +170,18 @@ export const useCardDelegation = (token?: CardTokenAllowance | null) => {
                   );
                   reject(error);
                 }
+              } else if (transactionMeta.status === TransactionStatus.failed) {
+                Logger.error(
+                  new Error(
+                    transactionMeta.error?.message ?? 'Transaction failed',
+                  ),
+                  'Transaction failed',
+                );
+                reject(
+                  new Error(
+                    transactionMeta.error?.message ?? 'Transaction failed',
+                  ),
+                );
               }
             },
             (transactionMeta) => transactionMeta.id === transactionId,
diff --git a/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.test.ts b/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.test.ts
index 58d4a029395..d48a797052e 100644
--- a/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.test.ts
+++ b/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.test.ts
@@ -293,13 +293,11 @@ describe('mapCardExternalWalletDetailToCardTokenAllowance', () => {
 
 describe('useGetCardExternalWalletDetails', () => {
   const mockGetCardExternalWalletDetails = jest.fn();
-  const mockGetTotalAllowance = jest.fn();
   const mockLogoutFromProvider = jest.fn();
   const mockFetchData = jest.fn();
 
   const mockSDK = {
     getCardExternalWalletDetails: mockGetCardExternalWalletDetails,
-    getTotalAllowance: mockGetTotalAllowance,
     lineaChainId: 'eip155:59144' as CaipChainId,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any;
@@ -381,10 +379,6 @@ describe('useGetCardExternalWalletDetails', () => {
       (mockCacheReturn as any).actualFetchFn = fetchFn;
       return mockCacheReturn;
     });
-
-    mockGetTotalAllowance.mockResolvedValue([
-      { address: '0xtoken1', allowance: '1000' },
-    ]);
   });
 
   afterEach(() => {
@@ -541,11 +535,6 @@ describe('useGetCardExternalWalletDetails', () => {
         walletDetailWithBalance,
       ]);
 
-      mockGetTotalAllowance.mockResolvedValue([
-        { address: '0xtoken1', allowance: '1000' },
-        { address: '0xtoken2', allowance: '2000' },
-      ]);
-
       renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -561,11 +550,6 @@ describe('useGetCardExternalWalletDetails', () => {
 
       mockGetCardExternalWalletDetails.mockResolvedValue([wallet1, wallet2]);
 
-      mockGetTotalAllowance.mockResolvedValue([
-        { address: '0xtoken1', allowance: '1000' },
-        { address: '0xtoken2', allowance: '2000' },
-      ]);
-
       renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -581,11 +565,6 @@ describe('useGetCardExternalWalletDetails', () => {
 
       mockGetCardExternalWalletDetails.mockResolvedValue([wallet1, wallet2]);
 
-      mockGetTotalAllowance.mockResolvedValue([
-        { address: '0xtoken1', allowance: '1000' },
-        { address: '0xtoken2', allowance: '2000' },
-      ]);
-
       renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -601,11 +580,6 @@ describe('useGetCardExternalWalletDetails', () => {
 
       mockGetCardExternalWalletDetails.mockResolvedValue([wallet1, wallet2]);
 
-      mockGetTotalAllowance.mockResolvedValue([
-        { address: '0xtoken1', allowance: '1000' },
-        { address: '0xtoken2', allowance: '2000' },
-      ]);
-
       renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -616,119 +590,6 @@ describe('useGetCardExternalWalletDetails', () => {
     });
   });
 
-  describe('Total Allowance Fetching', () => {
-    it('fetches total allowance only for Linea EVM tokens', async () => {
-      const lineaToken = { ...mockWalletDetail1 };
-      const solanaToken = {
-        ...mockWalletDetail2,
-        caipChainId: 'solana:mainnet' as CaipChainId,
-        network: 'solana' as const,
-      };
-
-      mockGetCardExternalWalletDetails.mockResolvedValue([
-        lineaToken,
-        solanaToken,
-      ]);
-
-      renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const fetchFn = (mockCacheReturn as any).actualFetchFn;
-      await fetchFn();
-
-      expect(mockGetTotalAllowance).toHaveBeenCalledWith([lineaToken]);
-    });
-
-    it('excludes tokens without address from total allowance check', async () => {
-      const tokenWithAddress = { ...mockWalletDetail1 };
-      const tokenWithoutAddress = {
-        ...mockWalletDetail2,
-        tokenDetails: {
-          ...mockWalletDetail2.tokenDetails,
-          address: null,
-        },
-      };
-
-      mockGetCardExternalWalletDetails.mockResolvedValue([
-        tokenWithAddress,
-        tokenWithoutAddress,
-      ]);
-
-      renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const fetchFn = (mockCacheReturn as any).actualFetchFn;
-      await fetchFn();
-
-      expect(mockGetTotalAllowance).toHaveBeenCalledWith([tokenWithAddress]);
-    });
-
-    it('handles getTotalAllowance timeout gracefully', async () => {
-      mockGetCardExternalWalletDetails.mockResolvedValue([mockWalletDetail1]);
-
-      // Create a promise that will be pending indefinitely
-      let timeoutReject: (error: Error) => void;
-      const timeoutPromise = new Promise<
-        { address: string; allowance: string | undefined }[]
-      >((_, reject) => {
-        timeoutReject = reject;
-      });
-
-      mockGetTotalAllowance.mockReturnValue(timeoutPromise);
-
-      renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const fetchFn = (mockCacheReturn as any).actualFetchFn;
-      const resultPromise = fetchFn();
-
-      // Fast forward past the 10 second timeout
-      jest.advanceTimersByTime(10000);
-
-      // Manually trigger the timeout rejection
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      timeoutReject!(new Error('getTotalAllowance timeout'));
-
-      const result = await resultPromise;
-
-      expect(mockLogger.error).toHaveBeenCalledWith(
-        expect.any(Error),
-        'fetchCardExternalWalletDetails: getTotalAllowance failed or timed out, using empty array',
-      );
-      expect(result?.mappedWalletDetails).toHaveLength(1);
-    });
-
-    it('handles getTotalAllowance error gracefully', async () => {
-      mockGetCardExternalWalletDetails.mockResolvedValue([mockWalletDetail1]);
-      mockGetTotalAllowance.mockRejectedValue(new Error('Network error'));
-
-      renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const fetchFn = (mockCacheReturn as any).actualFetchFn;
-      const result = await fetchFn();
-
-      expect(mockLogger.error).toHaveBeenCalledWith(
-        expect.any(Error),
-        'fetchCardExternalWalletDetails: getTotalAllowance failed or timed out, using empty array',
-      );
-      expect(result?.mappedWalletDetails).toHaveLength(1);
-    });
-
-    it('uses empty array for total allowances when getTotalAllowance fails', async () => {
-      mockGetCardExternalWalletDetails.mockResolvedValue([mockWalletDetail1]);
-      mockGetTotalAllowance.mockRejectedValue(new Error('API error'));
-
-      renderHook(() => useGetCardExternalWalletDetails(mockDelegationSettings));
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const fetchFn = (mockCacheReturn as any).actualFetchFn;
-      const result = await fetchFn();
-
-      expect(result?.mappedWalletDetails[0]?.totalAllowance).toBeUndefined();
-    });
-  });
-
   describe('Error Handling', () => {
     it('throws error when getCardExternalWalletDetails fails', async () => {
       const apiError = new Error('API error');
diff --git a/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.ts b/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.ts
index 65d20b4faf9..c0a55a3571f 100644
--- a/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.ts
+++ b/app/components/UI/Card/hooks/useGetCardExternalWalletDetails.ts
@@ -141,43 +141,12 @@ const useGetCardExternalWalletDetails = (
         }
       }
 
-      // Filter to only get EVM tokens for Linea (exclude Solana and other non-EVM chains)
-      // The balance scanner contract only works with EVM addresses
-      const lineaEvmTokens = cardExternalWalletDetails.filter(
-        (detail) =>
-          detail.caipChainId === sdk.lineaChainId &&
-          detail.tokenDetails.address,
-      );
-
-      // Add timeout to prevent hanging indefinitely
-      const getTotalAllowanceWithTimeout = Promise.race([
-        sdk.getTotalAllowance(lineaEvmTokens),
-        new Promise<{ address: string; allowance: string | undefined }[]>(
-          (_, reject) =>
-            setTimeout(
-              () => reject(new Error('getTotalAllowance timeout')),
-              10000,
-            ),
-        ),
-      ]);
-
-      let totalAllowances: { address: string; allowance: string | undefined }[];
-      try {
-        totalAllowances = await getTotalAllowanceWithTimeout;
-      } catch (error) {
-        Logger.error(
-          error as Error,
-          'fetchCardExternalWalletDetails: getTotalAllowance failed or timed out, using empty array',
-        );
-        // If getTotalAllowance fails or times out, use empty array
-        // This allows Solana tokens to still be returned
-        totalAllowances = [];
-      }
-
+      // Map wallet details without totalAllowance
+      // totalAllowance will be fetched separately only for the priority token using logs
       const mappedWalletDetails =
         mapCardExternalWalletDetailToCardTokenAllowance(
           cardExternalWalletDetails,
-          totalAllowances,
+          [], // Empty array - totalAllowance will be populated later for priority token only
         ).filter(Boolean) as CardTokenAllowance[];
 
       // Get priority wallet detail
diff --git a/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.test.ts b/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.test.ts
new file mode 100644
index 00000000000..6a604b9c729
--- /dev/null
+++ b/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.test.ts
@@ -0,0 +1,448 @@
+import { renderHook, waitFor, act } from '@testing-library/react-native';
+import { ethers } from 'ethers';
+import useGetLatestAllowanceForPriorityToken from './useGetLatestAllowanceForPriorityToken';
+import { useCardSDK } from '../sdk';
+import { CardTokenAllowance, AllowanceState } from '../types';
+import Logger from '../../../../util/Logger';
+import { SPENDING_LIMIT_UNSUPPORTED_TOKENS } from '../constants';
+
+// Mock dependencies
+jest.mock('../sdk');
+jest.mock('../../../../util/Logger', () => ({
+  error: jest.fn(),
+}));
+
+jest.mock('ethers', () => ({
+  ethers: {
+    utils: {
+      isAddress: jest.fn(),
+      parseUnits: jest.fn(),
+      formatUnits: jest.fn(),
+    },
+  },
+}));
+
+describe('useGetLatestAllowanceForPriorityToken', () => {
+  const mockSDK = {
+    getLatestAllowanceFromLogs: jest.fn(),
+    lineaChainId: 'eip155:59144',
+  };
+
+  const createMockToken = (
+    overrides: Partial<CardTokenAllowance> = {},
+  ): CardTokenAllowance => ({
+    address: '0x1234567890123456789012345678901234567890',
+    decimals: 6,
+    symbol: 'USDC',
+    name: 'USD Coin',
+    walletAddress: '0x0987654321098765432109876543210987654321',
+    caipChainId: 'eip155:59144',
+    allowanceState: AllowanceState.Limited,
+    allowance: '11.806489',
+    availableBalance: '11.806489',
+    delegationContract: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+    stagingTokenAddress: null,
+    priority: 1,
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useCardSDK as jest.Mock).mockReturnValue({ sdk: mockSDK });
+    (ethers.utils.isAddress as jest.Mock).mockReturnValue(true);
+    (ethers.utils.parseUnits as jest.Mock).mockReturnValue({
+      toString: () => '11806489',
+    });
+    (ethers.utils.formatUnits as jest.Mock).mockReturnValue('15.0');
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('returns null when SDK is not available', async () => {
+    (useCardSDK as jest.Mock).mockReturnValue({ sdk: null });
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.latestAllowance).toBeNull();
+      expect(result.current.isLoading).toBe(false);
+    });
+  });
+
+  it('returns null when priorityToken is null', async () => {
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(null),
+    );
+
+    await waitFor(() => {
+      expect(result.current.latestAllowance).toBeNull();
+      expect(result.current.isLoading).toBe(false);
+    });
+  });
+
+  it('skips fetch when allowanceState is not Limited', async () => {
+    const mockToken = createMockToken({
+      allowanceState: AllowanceState.Enabled,
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('skips fetch when allowanceState is NotEnabled', async () => {
+    const mockToken = createMockToken({
+      allowanceState: AllowanceState.NotEnabled,
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('skips fetch for non-Linea chains', async () => {
+    const mockToken = createMockToken({
+      caipChainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('skips fetch when token address is invalid', async () => {
+    (ethers.utils.isAddress as jest.Mock).mockReturnValue(false);
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('skips fetch when delegation contract is missing', async () => {
+    const mockToken = createMockToken({
+      delegationContract: undefined,
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('fetches and formats latest allowance successfully', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockResolvedValue('15000000');
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.latestAllowance).toBe('15.0');
+    expect(result.current.error).toBeNull();
+    expect(mockSDK.getLatestAllowanceFromLogs).toHaveBeenCalledWith(
+      mockToken.walletAddress,
+      mockToken.address,
+      mockToken.delegationContract,
+    );
+  });
+
+  it('uses staging token address when available', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockResolvedValue('15000000');
+    const mockToken = createMockToken({
+      stagingTokenAddress: '0xstagingtokenaddress123456789012345678',
+    });
+
+    renderHook(() => useGetLatestAllowanceForPriorityToken(mockToken));
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).toHaveBeenCalledWith(
+        mockToken.walletAddress,
+        '0xstagingtokenaddress123456789012345678',
+        mockToken.delegationContract,
+      );
+    });
+  });
+
+  it('returns null when SDK returns null', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockResolvedValue(null);
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.latestAllowance).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('handles errors and logs them', async () => {
+    const mockError = new Error('RPC failure');
+    mockSDK.getLatestAllowanceFromLogs.mockRejectedValue(mockError);
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.latestAllowance).toBeNull();
+    expect(result.current.error).toEqual(mockError);
+    expect(Logger.error).toHaveBeenCalledWith(
+      mockError,
+      'useGetLatestAllowanceForPriorityToken: Failed to fetch latest allowance',
+    );
+  });
+
+  it('converts non-Error to Error when catching', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockRejectedValue('string error');
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error?.message).toBe('string error');
+  });
+
+  it('refetch function triggers new fetch', async () => {
+    mockSDK.getLatestAllowanceFromLogs
+      .mockResolvedValueOnce('15000000')
+      .mockResolvedValueOnce('20000000');
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(result.current.latestAllowance).toBe('15.0');
+    });
+
+    (ethers.utils.formatUnits as jest.Mock).mockReturnValue('20.0');
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    await waitFor(() => {
+      expect(result.current.latestAllowance).toBe('20.0');
+    });
+
+    expect(mockSDK.getLatestAllowanceFromLogs).toHaveBeenCalledTimes(2);
+  });
+
+  it('sets loading state correctly during fetch', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          setTimeout(() => resolve('15000000'), 100);
+        }),
+    );
+    const mockToken = createMockToken();
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    // Hook starts fetching immediately, so loading should be true
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(true);
+    });
+
+    // Wait for loading to complete
+    await waitFor(
+      () => {
+        expect(result.current.isLoading).toBe(false);
+      },
+      { timeout: 200 },
+    );
+
+    expect(result.current.latestAllowance).toBe('15.0');
+  });
+
+  it('converts allowance from wei to human-readable format', async () => {
+    mockSDK.getLatestAllowanceFromLogs.mockResolvedValue('15000000');
+    const mockToken = createMockToken({ decimals: 6 });
+    (ethers.utils.formatUnits as jest.Mock).mockReturnValue('15.0');
+
+    renderHook(() => useGetLatestAllowanceForPriorityToken(mockToken));
+
+    await waitFor(() => {
+      expect(ethers.utils.formatUnits).toHaveBeenCalledWith('15000000', 6);
+    });
+  });
+
+  it('handles missing wallet address', async () => {
+    const mockToken = createMockToken({
+      walletAddress: undefined as unknown as string,
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  it('handles missing decimals', async () => {
+    const mockToken = createMockToken({
+      decimals: undefined as unknown as number,
+    });
+
+    const { result } = renderHook(() =>
+      useGetLatestAllowanceForPriorityToken(mockToken),
+    );
+
+    await waitFor(() => {
+      expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBeNull();
+    });
+  });
+
+  describe('unsupported tokens', () => {
+    beforeEach(() => {
+      // Mock the includes method to return true only for AUSDC
+      jest
+        .spyOn(SPENDING_LIMIT_UNSUPPORTED_TOKENS, 'includes')
+        .mockImplementation((symbol: string) => symbol === 'AUSDC');
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('skips fetch for unsupported token (aUSDC)', async () => {
+      const mockToken = createMockToken({
+        symbol: 'aUSDC',
+      });
+
+      const { result } = renderHook(() =>
+        useGetLatestAllowanceForPriorityToken(mockToken),
+      );
+
+      await waitFor(() => {
+        expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+        expect(result.current.latestAllowance).toBeNull();
+      });
+    });
+
+    it('skips fetch for unsupported token with lowercase symbol', async () => {
+      const mockToken = createMockToken({
+        symbol: 'ausdc',
+      });
+
+      const { result } = renderHook(() =>
+        useGetLatestAllowanceForPriorityToken(mockToken),
+      );
+
+      await waitFor(() => {
+        expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+        expect(result.current.latestAllowance).toBeNull();
+      });
+    });
+
+    it('skips fetch for unsupported token with mixed case symbol', async () => {
+      const mockToken = createMockToken({
+        symbol: 'AuSdC',
+      });
+
+      const { result } = renderHook(() =>
+        useGetLatestAllowanceForPriorityToken(mockToken),
+      );
+
+      await waitFor(() => {
+        expect(mockSDK.getLatestAllowanceFromLogs).not.toHaveBeenCalled();
+        expect(result.current.latestAllowance).toBeNull();
+      });
+    });
+
+    it('fetches normally for supported tokens', async () => {
+      mockSDK.getLatestAllowanceFromLogs.mockResolvedValue('15000000');
+      const mockToken = createMockToken({
+        symbol: 'USDC',
+      });
+
+      const { result } = renderHook(() =>
+        useGetLatestAllowanceForPriorityToken(mockToken),
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(mockSDK.getLatestAllowanceFromLogs).toHaveBeenCalledWith(
+        mockToken.walletAddress,
+        mockToken.address,
+        mockToken.delegationContract,
+      );
+      expect(result.current.latestAllowance).toBe('15.0');
+    });
+
+    it('fetches normally when token symbol is undefined', async () => {
+      mockSDK.getLatestAllowanceFromLogs.mockResolvedValue('15000000');
+      const mockToken = createMockToken({
+        symbol: undefined as unknown as string,
+      });
+
+      const { result } = renderHook(() =>
+        useGetLatestAllowanceForPriorityToken(mockToken),
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(mockSDK.getLatestAllowanceFromLogs).toHaveBeenCalled();
+      expect(result.current.latestAllowance).toBe('15.0');
+    });
+  });
+});
diff --git a/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.ts b/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.ts
new file mode 100644
index 00000000000..0b9d15defa0
--- /dev/null
+++ b/app/components/UI/Card/hooks/useGetLatestAllowanceForPriorityToken.ts
@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useCardSDK } from '../sdk';
+import { CardTokenAllowance, AllowanceState } from '../types';
+import Logger from '../../../../util/Logger';
+import { ethers } from 'ethers';
+import { SPENDING_LIMIT_UNSUPPORTED_TOKENS } from '../constants';
+
+/**
+ * Hook to get the latest allowance from approval logs for the priority token.
+ * This is only needed in authenticated mode when the allowance state is Limited,
+ * to display the spending limit progress bar with the correct total allowance.
+ * The latest allowance represents the most recent approval amount the user set,
+ * which is used as the "total" for calculating spending progress.
+ *
+ * Optimization: Only fetches from logs when allowanceState === Limited.
+ * For Enabled (unlimited) or NotEnabled states, this fetch is skipped as it's not needed.
+ *
+ * @param priorityToken - The priority token to fetch the latest allowance for
+ * @returns Object containing:
+ * - latestAllowance: The latest approval amount from logs (human-readable string)
+ * - isLoading: Loading state
+ * - error: Error object if any
+ * - refetch: Function to manually trigger fetch
+ */
+const useGetLatestAllowanceForPriorityToken = (
+  priorityToken: CardTokenAllowance | null | undefined,
+) => {
+  const { sdk } = useCardSDK();
+  const [latestAllowance, setLatestAllowance] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchLatestAllowance = useCallback(async () => {
+    if (!sdk || !priorityToken) {
+      return;
+    }
+
+    // Only fetch for Limited allowance state
+    // Unlimited (Enabled) and NotEnabled states don't need totalAllowance from logs
+    if (priorityToken.allowanceState !== AllowanceState.Limited) {
+      return;
+    }
+
+    // Skip for unsupported tokens (e.g., aUSDC which has different allowance behavior)
+    if (
+      priorityToken.symbol &&
+      SPENDING_LIMIT_UNSUPPORTED_TOKENS.includes(
+        priorityToken.symbol.toUpperCase(),
+      )
+    ) {
+      return;
+    }
+
+    // Only fetch for Linea EVM tokens
+    if (priorityToken.caipChainId !== sdk.lineaChainId) {
+      return;
+    }
+
+    const tokenAddress =
+      priorityToken.stagingTokenAddress || priorityToken.address;
+
+    if (!tokenAddress || !ethers.utils.isAddress(tokenAddress)) {
+      return;
+    }
+
+    if (
+      !priorityToken.delegationContract ||
+      !priorityToken.walletAddress ||
+      !priorityToken.decimals
+    ) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const rawLatestAllowance = await sdk.getLatestAllowanceFromLogs(
+        priorityToken.walletAddress,
+        tokenAddress,
+        priorityToken.delegationContract,
+      );
+
+      if (rawLatestAllowance) {
+        // Convert from wei to human-readable using token decimals
+        const formatted = ethers.utils.formatUnits(
+          rawLatestAllowance,
+          priorityToken.decimals,
+        );
+        setLatestAllowance(formatted);
+      } else {
+        setLatestAllowance(null);
+      }
+    } catch (err) {
+      const normalizedError =
+        err instanceof Error ? err : new Error(String(err));
+      Logger.error(
+        normalizedError,
+        'useGetLatestAllowanceForPriorityToken: Failed to fetch latest allowance',
+      );
+      setError(normalizedError);
+      setLatestAllowance(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sdk, priorityToken]);
+
+  useEffect(() => {
+    fetchLatestAllowance();
+  }, [fetchLatestAllowance]);
+
+  return {
+    latestAllowance,
+    isLoading,
+    error,
+    refetch: fetchLatestAllowance,
+  };
+};
+
+export default useGetLatestAllowanceForPriorityToken;
diff --git a/app/components/UI/Card/hooks/useLoadCardData.test.ts b/app/components/UI/Card/hooks/useLoadCardData.test.ts
index 8124ec32ce4..e1788af53b6 100644
--- a/app/components/UI/Card/hooks/useLoadCardData.test.ts
+++ b/app/components/UI/Card/hooks/useLoadCardData.test.ts
@@ -7,6 +7,7 @@ import { useGetPriorityCardToken } from './useGetPriorityCardToken';
 import { useIsCardholder } from './useIsCardholder';
 import useGetCardExternalWalletDetails from './useGetCardExternalWalletDetails';
 import useGetDelegationSettings from './useGetDelegationSettings';
+import useGetLatestAllowanceForPriorityToken from './useGetLatestAllowanceForPriorityToken';
 import {
   AllowanceState,
   CardTokenAllowance,
@@ -30,6 +31,7 @@ jest.mock('./useGetPriorityCardToken');
 jest.mock('./useIsCardholder');
 jest.mock('./useGetCardExternalWalletDetails');
 jest.mock('./useGetDelegationSettings');
+jest.mock('./useGetLatestAllowanceForPriorityToken');
 
 const mockUseIsBaanxLoginEnabled =
   useIsBaanxLoginEnabled as jest.MockedFunction<typeof useIsBaanxLoginEnabled>;
@@ -51,6 +53,10 @@ const mockUseGetDelegationSettings =
   useGetDelegationSettings as jest.MockedFunction<
     typeof useGetDelegationSettings
   >;
+const mockUseGetLatestAllowanceForPriorityToken =
+  useGetLatestAllowanceForPriorityToken as jest.MockedFunction<
+    typeof useGetLatestAllowanceForPriorityToken
+  >;
 
 describe('useLoadCardData', () => {
   const mockPriorityToken: CardTokenAllowance = {
@@ -147,6 +153,13 @@ describe('useLoadCardData', () => {
       fetchPriorityToken: mockFetchPriorityToken,
     });
 
+    mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+      latestAllowance: null,
+      isLoading: false,
+      error: null,
+      refetch: jest.fn(),
+    });
+
     mockUseCardDetails.mockReturnValue({
       cardDetails: mockCardDetails,
       isLoading: false,
@@ -379,7 +392,10 @@ describe('useLoadCardData', () => {
     it('returns priority token and all tokens from API data', () => {
       const { result } = renderHook(() => useLoadCardData());
 
-      expect(result.current.priorityToken).toEqual(mockPriorityToken);
+      expect(result.current.priorityToken).toEqual({
+        ...mockPriorityToken,
+        totalAllowance: mockPriorityToken.allowance,
+      });
       expect(result.current.allTokens).toEqual(mockAllTokens);
     });
 
@@ -699,6 +715,174 @@ describe('useLoadCardData', () => {
     });
   });
 
+  describe('Latest Allowance', () => {
+    describe('Authenticated Mode', () => {
+      beforeEach(() => {
+        mockUseSelector.mockReturnValue(true); // Authenticated
+      });
+
+      it('adds totalAllowance to priority token when latest allowance is available', () => {
+        const latestAllowance = '2000000000000';
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken).toEqual({
+          ...mockPriorityToken,
+          totalAllowance: latestAllowance,
+        });
+      });
+
+      it('uses existing allowance as totalAllowance when latest allowance is null', () => {
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: null,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken).toEqual({
+          ...mockPriorityToken,
+          totalAllowance: mockPriorityToken.allowance,
+        });
+      });
+
+      it('includes latest allowance loading state in overall loading state', () => {
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: null,
+          isLoading: true,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.isLoading).toBe(true);
+      });
+
+      it('returns priority token without totalAllowance when priority token is null', () => {
+        mockUseGetPriorityCardToken.mockReturnValue({
+          priorityToken: null,
+          allTokensWithAllowances: [],
+          isLoading: false,
+          error: false,
+          warning: null,
+          fetchPriorityToken: mockFetchPriorityToken,
+        });
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: '2000000000000',
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken).toBeNull();
+      });
+
+      it('updates priority token when latest allowance changes', () => {
+        const initialAllowance = '1000000000000';
+        const updatedAllowance = '3000000000000';
+
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: initialAllowance,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result, rerender } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken?.totalAllowance).toBe(
+          initialAllowance,
+        );
+
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: updatedAllowance,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        rerender();
+
+        expect(result.current.priorityToken?.totalAllowance).toBe(
+          updatedAllowance,
+        );
+      });
+    });
+
+    describe('Unauthenticated Mode', () => {
+      beforeEach(() => {
+        mockUseSelector.mockReturnValue(false); // Unauthenticated
+      });
+
+      it('returns priority token without totalAllowance property', () => {
+        const latestAllowance = '2000000000000';
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken).toEqual(mockPriorityToken);
+        expect(result.current.priorityToken).not.toHaveProperty(
+          'totalAllowance',
+        );
+      });
+
+      it('excludes latest allowance loading state from overall loading state', () => {
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance: null,
+          isLoading: true,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result } = renderHook(() => useLoadCardData());
+
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      it('ignores latest allowance when switching from authenticated to unauthenticated', () => {
+        mockUseSelector.mockReturnValue(true); // Start authenticated
+        const latestAllowance = '2000000000000';
+        mockUseGetLatestAllowanceForPriorityToken.mockReturnValue({
+          latestAllowance,
+          isLoading: false,
+          error: null,
+          refetch: jest.fn(),
+        });
+
+        const { result, rerender } = renderHook(() => useLoadCardData());
+
+        expect(result.current.priorityToken?.totalAllowance).toBe(
+          latestAllowance,
+        );
+
+        mockUseSelector.mockReturnValue(false); // Switch to unauthenticated
+
+        rerender();
+
+        expect(result.current.priorityToken).toEqual(mockPriorityToken);
+        expect(result.current.priorityToken).not.toHaveProperty(
+          'totalAllowance',
+        );
+      });
+    });
+  });
+
   describe('Fetch Functions', () => {
     beforeEach(() => {
       // Reset fetch mocks to ensure clean state for each test
diff --git a/app/components/UI/Card/hooks/useLoadCardData.ts b/app/components/UI/Card/hooks/useLoadCardData.ts
index df9665babbd..8052de11e1f 100644
--- a/app/components/UI/Card/hooks/useLoadCardData.ts
+++ b/app/components/UI/Card/hooks/useLoadCardData.ts
@@ -7,6 +7,7 @@ import { useGetPriorityCardToken } from './useGetPriorityCardToken';
 import { useIsCardholder } from './useIsCardholder';
 import useGetCardExternalWalletDetails from './useGetCardExternalWalletDetails';
 import useGetDelegationSettings from './useGetDelegationSettings';
+import useGetLatestAllowanceForPriorityToken from './useGetLatestAllowanceForPriorityToken';
 import { CardTokenAllowance, CardWarning } from '../types';
 
 /**
@@ -70,6 +71,27 @@ const useLoadCardData = () => {
     fetchPriorityToken,
   } = useGetPriorityCardToken(externalWalletDetailsData);
 
+  // Get latest allowance for priority token (authenticated mode only, for spending limit display)
+  // This fetches the most recent approval amount from on-chain logs
+  const {
+    latestAllowance: priorityTokenLatestAllowance,
+    isLoading: isLoadingLatestAllowance,
+  } = useGetLatestAllowanceForPriorityToken(
+    isAuthenticated ? priorityToken : null,
+  );
+
+  // Update priority token with latest allowance if available
+  const priorityTokenWithLatestAllowance = useMemo(() => {
+    if (!priorityToken || !isAuthenticated) {
+      return priorityToken;
+    }
+
+    return {
+      ...priorityToken,
+      totalAllowance: priorityTokenLatestAllowance || priorityToken.allowance,
+    };
+  }, [priorityToken, priorityTokenLatestAllowance, isAuthenticated]);
+
   // Get card details (only needed for unauthenticated mode)
   const {
     cardDetails,
@@ -99,7 +121,11 @@ const useLoadCardData = () => {
       isLoadingDelegationSettings;
 
     if (isAuthenticated) {
-      return baseLoading || isLoadingExternalWalletDetails;
+      return (
+        baseLoading ||
+        isLoadingExternalWalletDetails ||
+        isLoadingLatestAllowance
+      );
     }
     return baseLoading;
   }, [
@@ -107,6 +133,7 @@ const useLoadCardData = () => {
     isLoadingCardDetails,
     isLoadingDelegationSettings,
     isLoadingExternalWalletDetails,
+    isLoadingLatestAllowance,
     isAuthenticated,
   ]);
 
@@ -182,7 +209,7 @@ const useLoadCardData = () => {
 
   return {
     // Token data
-    priorityToken,
+    priorityToken: priorityTokenWithLatestAllowance,
     allTokens,
     // Card details
     cardDetails,
diff --git a/app/components/UI/Card/hooks/useRegisterUserConsent.test.ts b/app/components/UI/Card/hooks/useRegisterUserConsent.test.ts
index 72be5fbdf31..0efafd81c5f 100644
--- a/app/components/UI/Card/hooks/useRegisterUserConsent.test.ts
+++ b/app/components/UI/Card/hooks/useRegisterUserConsent.test.ts
@@ -138,7 +138,6 @@ describe('useRegisterUserConsent', () => {
               },
             },
           ],
-          tenantId: 'tenant_baanx_global',
           metadata: {
             userAgent: AppConstants.USER_AGENT,
             timestamp: expect.any(String),
@@ -193,7 +192,6 @@ describe('useRegisterUserConsent', () => {
               },
             },
           ],
-          tenantId: 'tenant_baanx_global',
           metadata: {
             userAgent: AppConstants.USER_AGENT,
             timestamp: expect.any(String),
diff --git a/app/components/UI/Card/hooks/useRegisterUserConsent.ts b/app/components/UI/Card/hooks/useRegisterUserConsent.ts
index e56c9850656..61a51676276 100644
--- a/app/components/UI/Card/hooks/useRegisterUserConsent.ts
+++ b/app/components/UI/Card/hooks/useRegisterUserConsent.ts
@@ -133,7 +133,6 @@ export const useRegisterUserConsent = (): UseRegisterUserConsentReturn => {
           policyType: policy,
           onboardingId,
           consents,
-          tenantId: 'tenant_baanx_global',
           metadata: {
             userAgent: AppConstants.USER_AGENT,
             timestamp: new Date().toISOString(),
diff --git a/app/components/UI/Card/hooks/useUpdateTokenPriority.test.ts b/app/components/UI/Card/hooks/useUpdateTokenPriority.test.ts
new file mode 100644
index 00000000000..f40d0b1574d
--- /dev/null
+++ b/app/components/UI/Card/hooks/useUpdateTokenPriority.test.ts
@@ -0,0 +1,378 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useUpdateTokenPriority } from './useUpdateTokenPriority';
+import { useCardSDK } from '../sdk';
+import { CardSDK } from '../sdk/CardSDK';
+import {
+  AllowanceState,
+  CardTokenAllowance,
+  CardExternalWalletDetailsResponse,
+} from '../types';
+import Logger from '../../../../util/Logger';
+
+// Mock dependencies
+jest.mock('../sdk', () => ({
+  useCardSDK: jest.fn(),
+}));
+
+jest.mock('react-redux', () => ({
+  useDispatch: () => jest.fn(),
+}));
+
+jest.mock('../../../../util/Logger', () => ({
+  error: jest.fn(),
+}));
+
+jest.mock('../../../../core/redux/slices/card', () => ({
+  setAuthenticatedPriorityToken: jest.fn(),
+  setAuthenticatedPriorityTokenLastFetched: jest.fn(),
+  clearCacheData: jest.fn(),
+}));
+
+const mockUseCardSDK = useCardSDK as jest.MockedFunction<typeof useCardSDK>;
+
+describe('useUpdateTokenPriority', () => {
+  let mockSDK: {
+    updateWalletPriority: jest.Mock;
+  };
+  let mockOnSuccess: jest.Mock;
+  let mockOnError: jest.Mock;
+
+  const createMockToken = (
+    overrides: Partial<CardTokenAllowance> = {},
+  ): CardTokenAllowance => ({
+    address: '0x1234567890123456789012345678901234567890',
+    caipChainId: 'eip155:59144',
+    decimals: 18,
+    symbol: 'USDC',
+    name: 'USD Coin',
+    allowanceState: AllowanceState.Enabled,
+    allowance: '1000',
+    availableBalance: '500',
+    walletAddress: '0xwallet1',
+    delegationContract: '0xdelegation123',
+    priority: 2,
+    ...overrides,
+  });
+
+  const createMockWalletDetails = (): CardExternalWalletDetailsResponse => [
+    {
+      id: 1,
+      walletAddress: '0xwallet1',
+      caipChainId: 'eip155:59144',
+      tokenDetails: {
+        address: '0x1234567890123456789012345678901234567890',
+        symbol: 'USDC',
+        decimals: 18,
+        name: 'USD Coin',
+      },
+      allowance: '1000',
+      priority: 2,
+      balance: '500',
+      currency: 'USDC',
+      network: 'linea',
+    },
+    {
+      id: 2,
+      walletAddress: '0xwallet2',
+      caipChainId: 'eip155:59144',
+      tokenDetails: {
+        address: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+        symbol: 'USDT',
+        decimals: 6,
+        name: 'Tether USD',
+      },
+      allowance: '500',
+      priority: 1,
+      balance: '250',
+      currency: 'USDT',
+      network: 'linea',
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockSDK = {
+      updateWalletPriority: jest.fn().mockResolvedValue({}),
+    };
+
+    mockUseCardSDK.mockReturnValue({
+      sdk: mockSDK as unknown as CardSDK,
+      isLoading: false,
+      user: null,
+      setUser: jest.fn(),
+      logoutFromProvider: jest.fn(),
+    });
+
+    mockOnSuccess = jest.fn();
+    mockOnError = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('updateTokenPriority', () => {
+    it('returns true and calls onSuccess when priority updates', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken();
+      const mockWalletDetails = createMockWalletDetails();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(
+          mockToken,
+          mockWalletDetails,
+        );
+      });
+
+      expect(updateResult).toBe(true);
+      expect(mockSDK.updateWalletPriority).toHaveBeenCalledWith([
+        { id: 2, priority: 2 },
+        { id: 1, priority: 1 },
+      ]);
+      expect(mockOnSuccess).toHaveBeenCalled();
+      expect(mockOnError).not.toHaveBeenCalled();
+    });
+
+    it('sets selected token as priority 1 and shifts others down', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken({ priority: 2 });
+      const mockWalletDetails = createMockWalletDetails();
+
+      await act(async () => {
+        await result.current.updateTokenPriority(mockToken, mockWalletDetails);
+      });
+
+      // Selected token (wallet-1) should get priority 1
+      // wallet-2 (previously priority 1) should shift to priority 2
+      expect(mockSDK.updateWalletPriority).toHaveBeenCalledWith([
+        { id: 2, priority: 2 }, // Previously 1
+        { id: 1, priority: 1 }, // Selected token
+      ]);
+    });
+
+    it('returns false when SDK is not available', async () => {
+      mockUseCardSDK.mockReturnValue({
+        sdk: null,
+        isLoading: false,
+        user: null,
+        setUser: jest.fn(),
+        logoutFromProvider: jest.fn(),
+      });
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken();
+      const mockWalletDetails = createMockWalletDetails();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(
+          mockToken,
+          mockWalletDetails,
+        );
+      });
+
+      expect(updateResult).toBe(false);
+      expect(mockSDK.updateWalletPriority).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+      expect(Logger.error).toHaveBeenCalled();
+    });
+
+    it('returns false when external wallet details are empty', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(mockToken, []);
+      });
+
+      expect(updateResult).toBe(false);
+      expect(mockSDK.updateWalletPriority).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+    });
+
+    it('returns false when matching wallet is not found', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken({
+        address: '0xnonexistent',
+        walletAddress: '0xnonexistent',
+      });
+      const mockWalletDetails = createMockWalletDetails();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(
+          mockToken,
+          mockWalletDetails,
+        );
+      });
+
+      expect(updateResult).toBe(false);
+      expect(mockSDK.updateWalletPriority).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+    });
+
+    it('returns false and calls onError when SDK throws error', async () => {
+      const sdkError = new Error('SDK update failed');
+      mockSDK.updateWalletPriority.mockRejectedValue(sdkError);
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken();
+      const mockWalletDetails = createMockWalletDetails();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(
+          mockToken,
+          mockWalletDetails,
+        );
+      });
+
+      expect(updateResult).toBe(false);
+      expect(mockOnError).toHaveBeenCalledWith(sdkError);
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+      expect(Logger.error).toHaveBeenCalled();
+    });
+
+    it('returns true when called without callbacks', async () => {
+      const { result } = renderHook(() => useUpdateTokenPriority());
+      const mockToken = createMockToken();
+      const mockWalletDetails = createMockWalletDetails();
+
+      let updateResult: boolean | undefined;
+      await act(async () => {
+        updateResult = await result.current.updateTokenPriority(
+          mockToken,
+          mockWalletDetails,
+        );
+      });
+
+      expect(updateResult).toBe(true);
+      expect(mockSDK.updateWalletPriority).toHaveBeenCalled();
+    });
+
+    it('maintains order of non-selected wallets', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockWalletDetails: CardExternalWalletDetailsResponse = [
+        {
+          id: 3,
+          walletAddress: '0xwallet3',
+          caipChainId: 'eip155:59144',
+          tokenDetails: {
+            address: '0xtoken3',
+            symbol: 'DAI',
+            decimals: 18,
+            name: 'Dai',
+          },
+          allowance: '300',
+          priority: 3,
+          balance: '150',
+          currency: 'DAI',
+          network: 'linea',
+        },
+        {
+          id: 1,
+          walletAddress: '0xwallet1',
+          caipChainId: 'eip155:59144',
+          tokenDetails: {
+            address: '0x1234567890123456789012345678901234567890',
+            symbol: 'USDC',
+            decimals: 18,
+            name: 'USD Coin',
+          },
+          allowance: '1000',
+          priority: 2,
+          balance: '500',
+          currency: 'USDC',
+          network: 'linea',
+        },
+        {
+          id: 2,
+          walletAddress: '0xwallet2',
+          caipChainId: 'eip155:59144',
+          tokenDetails: {
+            address: '0xtoken2',
+            symbol: 'USDT',
+            decimals: 6,
+            name: 'Tether USD',
+          },
+          allowance: '500',
+          priority: 1,
+          balance: '250',
+          currency: 'USDT',
+          network: 'linea',
+        },
+      ];
+      const mockToken = createMockToken({ priority: 3 });
+
+      await act(async () => {
+        await result.current.updateTokenPriority(mockToken, mockWalletDetails);
+      });
+
+      // Selected wallet-1 should be priority 1
+      // Others should maintain their relative order: wallet-2 (was 1) -> 2, wallet-3 (was 3) -> 3
+      expect(mockSDK.updateWalletPriority).toHaveBeenCalledWith([
+        { id: 2, priority: 2 },
+        { id: 1, priority: 1 },
+        { id: 3, priority: 3 },
+      ]);
+    });
+
+    it('calls onSuccess when token has stagingTokenAddress', async () => {
+      const { result } = renderHook(() =>
+        useUpdateTokenPriority({
+          onSuccess: mockOnSuccess,
+          onError: mockOnError,
+        }),
+      );
+      const mockToken = createMockToken({
+        stagingTokenAddress: '0xstaging123',
+      });
+      const mockWalletDetails = createMockWalletDetails();
+
+      await act(async () => {
+        await result.current.updateTokenPriority(mockToken, mockWalletDetails);
+      });
+
+      expect(mockOnSuccess).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/app/components/UI/Card/hooks/useUpdateTokenPriority.ts b/app/components/UI/Card/hooks/useUpdateTokenPriority.ts
new file mode 100644
index 00000000000..05aa4b904cc
--- /dev/null
+++ b/app/components/UI/Card/hooks/useUpdateTokenPriority.ts
@@ -0,0 +1,139 @@
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useCardSDK } from '../sdk';
+import {
+  setAuthenticatedPriorityToken,
+  setAuthenticatedPriorityTokenLastFetched,
+  clearCacheData,
+} from '../../../../core/redux/slices/card';
+import {
+  CardTokenAllowance,
+  CardExternalWalletDetailsResponse,
+} from '../types';
+import Logger from '../../../../util/Logger';
+
+interface UseUpdateTokenPriorityParams {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Hook to update token priority in the card system
+ * Handles SDK calls, Redux updates, and cache invalidation
+ */
+export const useUpdateTokenPriority = (
+  params?: UseUpdateTokenPriorityParams,
+) => {
+  const { sdk } = useCardSDK();
+  const dispatch = useDispatch();
+  const { onSuccess, onError } = params || {};
+
+  const updateTokenPriority = useCallback(
+    async (
+      token: CardTokenAllowance,
+      externalWalletDetails: CardExternalWalletDetailsResponse,
+    ): Promise<boolean> => {
+      if (!sdk) {
+        const error = new Error('Card SDK not available');
+        Logger.error(error, 'useUpdateTokenPriority: SDK not available');
+        onError?.(error);
+        return false;
+      }
+
+      if (!externalWalletDetails || externalWalletDetails.length === 0) {
+        const error = new Error('External wallet details not available');
+        Logger.error(
+          error,
+          'useUpdateTokenPriority: External wallet details not available',
+        );
+        onError?.(error);
+        return false;
+      }
+
+      try {
+        // Find the wallet that matches the selected token
+        const selectedWallet = externalWalletDetails.find(
+          (wallet) =>
+            wallet.tokenDetails.address?.toLowerCase() ===
+              token.address?.toLowerCase() &&
+            wallet.caipChainId === token.caipChainId &&
+            wallet.walletAddress?.toLowerCase() ===
+              token.walletAddress?.toLowerCase(),
+        );
+
+        if (!selectedWallet) {
+          const error = new Error(
+            'Selected wallet not found in wallet details',
+          );
+          Logger.error(
+            error,
+            'useUpdateTokenPriority: Could not find matching wallet',
+          );
+          onError?.(error);
+          return false;
+        }
+
+        // Sort wallets by current priority to maintain order
+        const sortedWallets = [...externalWalletDetails].sort(
+          (a, b) => a.priority - b.priority,
+        );
+
+        // Build new priorities: selected gets 1, others shift down maintaining their order
+        let nextPriority = 2;
+        const newPriorities = sortedWallets.map((wallet) => {
+          const isSelected =
+            wallet.id === selectedWallet.id &&
+            wallet.walletAddress?.toLowerCase() ===
+              selectedWallet.walletAddress?.toLowerCase();
+
+          const priority = isSelected ? 1 : nextPriority++;
+
+          return {
+            id: wallet.id,
+            priority,
+          };
+        });
+
+        // Update priority via SDK
+        await sdk.updateWalletPriority(newPriorities);
+
+        // Invalidate external wallet details cache to force refetch with updated priorities
+        dispatch(clearCacheData('card-external-wallet-details'));
+
+        // Update priority token in Redux with new priority value
+        const priorityTokenData: CardTokenAllowance = {
+          address: token.address,
+          decimals: token.decimals,
+          symbol: token.symbol,
+          name: token.name,
+          allowanceState: token.allowanceState,
+          allowance: token.allowance || '0',
+          availableBalance: token.availableBalance || '0',
+          walletAddress: selectedWallet.walletAddress,
+          caipChainId: token.caipChainId,
+          delegationContract: token.delegationContract,
+          priority: 1, // New priority is always 1 (highest)
+          stagingTokenAddress: token.stagingTokenAddress,
+        };
+
+        dispatch(setAuthenticatedPriorityToken(priorityTokenData));
+        dispatch(setAuthenticatedPriorityTokenLastFetched(new Date()));
+
+        onSuccess?.();
+        return true;
+      } catch (error) {
+        Logger.error(
+          error as Error,
+          'useUpdateTokenPriority: Error updating wallet priority',
+        );
+        onError?.(error as Error);
+        return false;
+      }
+    },
+    [sdk, dispatch, onSuccess, onError],
+  );
+
+  return {
+    updateTokenPriority,
+  };
+};
diff --git a/app/components/UI/Card/routes/index.tsx b/app/components/UI/Card/routes/index.tsx
index 182c08e1124..e425ba9edb5 100644
--- a/app/components/UI/Card/routes/index.tsx
+++ b/app/components/UI/Card/routes/index.tsx
@@ -25,8 +25,18 @@ import {
 } from '../../../../core/redux/slices/card';
 import { useSelector } from 'react-redux';
 import { withCardSDK } from '../sdk';
+import AddFundsBottomSheet from '../components/AddFundsBottomSheet/AddFundsBottomSheet';
+import AssetSelectionBottomSheet from '../components/AssetSelectionBottomSheet/AssetSelectionBottomSheet';
+import { colors } from '../../../../styles/common';
 
 const Stack = createStackNavigator();
+const ModalsStack = createStackNavigator();
+
+const clearStackNavigatorOptions = {
+  headerShown: false,
+  cardStyle: { backgroundColor: colors.transparent },
+  animationEnabled: false,
+};
 
 export const headerStyle = StyleSheet.create({
   icon: { marginHorizontal: 16 },
@@ -118,7 +128,7 @@ export const cardSpendingLimitNavigationOptions = ({
   };
 };
 
-const CardRoutes = () => {
+const MainRoutes = () => {
   const isAuthenticated = useSelector(selectIsAuthenticatedCard);
   const isCardholder = useSelector(selectIsCardholder);
 
@@ -159,4 +169,34 @@ const CardRoutes = () => {
   );
 };
 
+const CardModalsRoutes = () => (
+  <ModalsStack.Navigator
+    mode="modal"
+    screenOptions={clearStackNavigatorOptions}
+  >
+    <ModalsStack.Screen
+      name={Routes.CARD.MODALS.ADD_FUNDS}
+      component={AddFundsBottomSheet}
+    />
+    <ModalsStack.Screen
+      name={Routes.CARD.MODALS.ASSET_SELECTION}
+      component={AssetSelectionBottomSheet}
+    />
+  </ModalsStack.Navigator>
+);
+
+const CardRoutes = () => (
+  <Stack.Navigator initialRouteName={Routes.CARD.HOME} headerMode="none">
+    <Stack.Screen name={Routes.CARD.HOME} component={MainRoutes} />
+    <Stack.Screen
+      name={Routes.CARD.MODALS.ID}
+      component={CardModalsRoutes}
+      options={{
+        ...clearStackNavigatorOptions,
+        detachPreviousScreen: false,
+      }}
+    />
+  </Stack.Navigator>
+);
+
 export default withCardSDK(CardRoutes);
diff --git a/app/components/UI/Card/sdk/CardSDK.test.ts b/app/components/UI/Card/sdk/CardSDK.test.ts
index 7e991a84c1b..20c109b6f2c 100644
--- a/app/components/UI/Card/sdk/CardSDK.test.ts
+++ b/app/components/UI/Card/sdk/CardSDK.test.ts
@@ -2550,11 +2550,10 @@ describe('CardSDK', () => {
 
   describe('createOnboardingConsent', () => {
     it('creates onboarding consent successfully', async () => {
-      const mockRequest: CreateOnboardingConsentRequest = {
+      const mockRequest: Omit<CreateOnboardingConsentRequest, 'tenantId'> = {
         policyType: 'US',
         onboardingId: 'onboarding123',
         consents: [],
-        tenantId: 'tenant_baanx_global',
         metadata: {
           userAgent: AppConstants.USER_AGENT,
           timestamp: new Date().toISOString(),
@@ -2579,17 +2578,19 @@ describe('CardSDK', () => {
         expect.stringContaining('/v2/consent/onboarding'),
         expect.objectContaining({
           method: 'POST',
-          body: JSON.stringify(mockRequest),
+          body: JSON.stringify({
+            ...mockRequest,
+            tenantId: 'test-api-key',
+          }),
         }),
       );
     });
 
     it('handles create onboarding consent error', async () => {
-      const mockRequest: CreateOnboardingConsentRequest = {
+      const mockRequest: Omit<CreateOnboardingConsentRequest, 'tenantId'> = {
         policyType: 'US',
         onboardingId: 'onboarding123',
         consents: [],
-        tenantId: 'tenant_baanx_global',
         metadata: {
           userAgent: AppConstants.USER_AGENT,
           timestamp: new Date().toISOString(),
@@ -2791,4 +2792,386 @@ describe('CardSDK', () => {
       });
     });
   });
+
+  describe('getLatestAllowanceFromLogs', () => {
+    const mockWalletAddress = '0x1234567890123456789012345678901234567890';
+    const mockTokenAddress = '0x0987654321098765432109876543210987654321';
+    const mockDelegationContract = '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd';
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      // Reset ethers mocks
+      (ethers.utils.hexZeroPad as jest.Mock).mockImplementation((val) => val);
+      (ethers.utils.Interface as unknown as jest.Mock).mockReturnValue({
+        getEventTopic: jest.fn().mockReturnValue('0xtopic'),
+        parseLog: jest.fn().mockImplementation((log) => ({
+          args: {
+            value: ethers.BigNumber.from(log.data || '0'),
+          },
+        })),
+      });
+    });
+
+    it('returns most recent approval event', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 100,
+          logIndex: 1,
+          data: '11806489',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        }, // Most recent approval
+        {
+          blockNumber: 99,
+          logIndex: 0,
+          data: '15000000',
+          blockHash: '0x2',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xb',
+        }, // Older approval
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: (other: { toString: () => string }) =>
+          parseInt(val, 10) > parseInt(other.toString(), 10),
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe('11806489');
+      expect(mockProvider.getLogs).toHaveBeenCalledWith({
+        address: mockTokenAddress,
+        fromBlock: 2715910,
+        toBlock: 'latest',
+        topics: expect.any(Array),
+      });
+    });
+
+    it('returns latest approval when no current allowance provided', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 100,
+          logIndex: 0,
+          data: '15000000',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        },
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: () => true,
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe('15000000');
+    });
+
+    it('returns most recent approval regardless of value', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 102,
+          logIndex: 0,
+          data: '11806489',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        }, // Most recent
+        {
+          blockNumber: 101,
+          logIndex: 0,
+          data: '10000000',
+          blockHash: '0x2',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xb',
+        }, // Older
+        {
+          blockNumber: 100,
+          logIndex: 0,
+          data: '15000000',
+          blockHash: '0x3',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xc',
+        }, // Oldest
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: (other: { toString: () => string }) =>
+          parseInt(val, 10) > parseInt(other.toString(), 10),
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe('11806489');
+    });
+
+    it('returns most recent log when no approval greater than current found', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 100,
+          logIndex: 0,
+          data: '5000000',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        },
+        {
+          blockNumber: 99,
+          logIndex: 0,
+          data: '3000000',
+          blockHash: '0x2',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xb',
+        },
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: () => false,
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe('5000000'); // Returns latest log
+    });
+
+    it('returns null when no logs found', async () => {
+      mockProvider.getLogs.mockResolvedValue([]);
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBeNull();
+    });
+
+    it('sorts logs chronologically (newest first)', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 98,
+          logIndex: 0,
+          data: '1000000',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        },
+        {
+          blockNumber: 100,
+          logIndex: 2,
+          data: '3000000',
+          blockHash: '0x2',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xb',
+        },
+        {
+          blockNumber: 100,
+          logIndex: 1,
+          data: '2000000',
+          blockHash: '0x3',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xc',
+        },
+        {
+          blockNumber: 99,
+          logIndex: 0,
+          data: '1500000',
+          blockHash: '0x4',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xd',
+        },
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: () => true,
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      // Most recent should be block 100, logIndex 2
+      expect(result).toBe('3000000');
+    });
+
+    it('returns most recent approval even when value is zero', async () => {
+      const mockLogs = [
+        {
+          blockNumber: 100,
+          logIndex: 0,
+          data: '0',
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        }, // Most recent (revoked)
+        {
+          blockNumber: 99,
+          logIndex: 0,
+          data: '15000000',
+          blockHash: '0x2',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xb',
+        }, // Older approval
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: (other: { toString: () => string }) =>
+          parseInt(val, 10) > parseInt(other.toString(), 10),
+        isZero: () => val === '0',
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe('0'); // Returns most recent, even if zero
+    });
+
+    it('logs error and returns null when getLogs fails', async () => {
+      const mockError = new Error('RPC error');
+      mockProvider.getLogs.mockRejectedValue(mockError);
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBeNull();
+      expect(Logger.error).toHaveBeenCalledWith(
+        mockError,
+        `getLatestAllowanceFromLogs: Failed to get latest allowance for token ${mockTokenAddress}`,
+      );
+    });
+
+    it('calls getLogs with correct parameters', async () => {
+      mockProvider.getLogs.mockResolvedValue([]);
+      (ethers.utils.hexZeroPad as jest.Mock).mockImplementation(
+        (addr) => `padded_${addr}`,
+      );
+
+      await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(mockProvider.getLogs).toHaveBeenCalledWith({
+        address: mockTokenAddress,
+        fromBlock: 2715910,
+        toBlock: 'latest',
+        topics: [
+          '0xtopic',
+          `padded_${mockWalletAddress.toLowerCase()}`,
+          `padded_${mockDelegationContract.toLowerCase()}`,
+        ],
+      });
+    });
+
+    it('handles large approval values correctly', async () => {
+      const largeValue = '2199023255551000000'; // Unlimited approval
+      const mockLogs = [
+        {
+          blockNumber: 100,
+          logIndex: 0,
+          data: largeValue,
+          blockHash: '0x1',
+          transactionIndex: 0,
+          removed: false,
+          address: mockTokenAddress,
+          topics: [],
+          transactionHash: '0xa',
+        },
+      ];
+      mockProvider.getLogs.mockResolvedValue(mockLogs);
+      (ethers.BigNumber.from as jest.Mock).mockImplementation((val) => ({
+        toString: () => val,
+        gt: () => true,
+        isZero: () => false,
+      }));
+
+      const result = await cardSDK.getLatestAllowanceFromLogs(
+        mockWalletAddress,
+        mockTokenAddress,
+        mockDelegationContract,
+      );
+
+      expect(result).toBe(largeValue);
+    });
+  });
 });
diff --git a/app/components/UI/Card/sdk/CardSDK.ts b/app/components/UI/Card/sdk/CardSDK.ts
index 509749d3104..e7dc6affefd 100644
--- a/app/components/UI/Card/sdk/CardSDK.ts
+++ b/app/components/UI/Card/sdk/CardSDK.ts
@@ -132,7 +132,7 @@ export class CardSDK {
     return provider;
   }
 
-  private async getBalanceScannerInstance() {
+  private getBalanceScannerInstance() {
     const balanceScannerAddress =
       this.cardFeatureFlag.chains?.[this.lineaChainId]?.balanceScannerAddress;
 
@@ -339,7 +339,7 @@ export class CardSDK {
       foxConnectUsAddress,
     ]);
 
-    const balanceScannerInstance = await this.getBalanceScannerInstance();
+    const balanceScannerInstance = this.getBalanceScannerInstance();
     const spendersAllowancesForTokens: [boolean, string][][] =
       await balanceScannerInstance.spendersAllowancesForTokens(
         address,
@@ -949,7 +949,7 @@ export class CardSDK {
             name: tokenDetails?.name ?? '',
           },
           network: wallet.network,
-          totalAllowance: null, // Will be populated by getTotalAllowance
+          totalAllowance: null, // Will be populated later for priority token only
           delegationContractAddress:
             tokenDetails?.delegationContractAddress ?? '',
           stagingTokenAddress: tokenDetails?.stagingTokenAddress ?? '',
@@ -1016,82 +1016,73 @@ export class CardSDK {
     };
   };
 
-  // Get total allowance for a list of tokens. Used for authenticated mode.
-  // Currently only supporting Linea.
-  getTotalAllowance = async (
-    tokens: CardExternalWalletDetail[],
-  ): Promise<{ address: string; allowance: string | undefined }[]> => {
-    if (!tokens || tokens.length === 0) {
-      return [];
-    }
+  /**
+   * Get the most recent user-initiated allowance amount from approval events for a specific token.
+   * This returns the last approval value set by the user, which represents their intended spending limit.
+   * Note: ERC20 spending does not create approval events, so all approval events are user-initiated.
+   *
+   * @param walletAddress - The user's wallet address
+   * @param tokenAddress - The ERC20 token contract address
+   * @param delegationContractAddress - The delegation/spender contract address
+   * @param currentAllowance - The current remaining allowance (from API) - unused but kept for API compatibility
+   * @returns The most recent user-initiated approval value as a string (in wei), or null if no logs found
+   */
+  getLatestAllowanceFromLogs = async (
+    walletAddress: string,
+    tokenAddress: string,
+    delegationContractAddress: string,
+  ): Promise<string | null> => {
+    try {
+      const approvalInterface = new ethers.utils.Interface([
+        'event Approval(address indexed owner, address indexed spender, uint256 value)',
+      ]);
+
+      const approvalTopic = approvalInterface.getEventTopic('Approval');
+      const ownerTopic = ethers.utils.hexZeroPad(
+        walletAddress.toLowerCase(),
+        32,
+      );
+      const spenderTopic = ethers.utils.hexZeroPad(
+        delegationContractAddress.toLowerCase(),
+        32,
+      );
 
-    const balanceScannerInstance = await this.getBalanceScannerInstance();
+      const spendersDeployedBlock = 2715910; // Block where the delegation contracts were deployed
+      const ethersProvider = this.getEthersProvider();
 
-    // Query each wallet for its specific token's allowance
-    // This avoids querying wallet A for token B's address (which doesn't make sense)
-    const promises = tokens.map(async (token) => {
-      const tokenAddress =
-        token.stagingTokenAddress ?? token.tokenDetails.address ?? '';
+      // Get all approval logs for this specific wallet + token + spender combination
+      const logs = await ethersProvider.getLogs({
+        address: tokenAddress,
+        fromBlock: spendersDeployedBlock,
+        toBlock: 'latest',
+        topics: [approvalTopic, ownerTopic, spenderTopic],
+      });
 
-      // Skip if not a valid EVM address (e.g., Solana addresses)
-      if (!tokenAddress || !ethers.utils.isAddress(tokenAddress)) {
-        return {
-          address: tokenAddress,
-          allowance: undefined,
-        };
+      if (logs.length === 0) {
+        return null;
       }
 
-      try {
-        // Query this specific wallet for this specific token
-        const spendersAllowances =
-          await balanceScannerInstance.spendersAllowancesForTokens(
-            token.walletAddress,
-            [tokenAddress], // Only query for this token's address
-            [[token.delegationContractAddress ?? '']], // Only this token's delegation contract
-          );
-
-        // spendersAllowances is Result[][] - 2D array
-        // Outer array: one element per token (we queried 1 token)
-        // Inner array: one element per spender (we queried 1 spender)
-        // Each element is [success, allowance]
-        const tokenResults = spendersAllowances[0]; // First (and only) token
-        const spenderResult = tokenResults?.[0]; // First (and only) spender
-        const allowanceHex = spenderResult?.[1]; // The allowance value (hex-encoded bytes)
-
-        // Convert hex to human-readable number using token decimals
-        let allowance: string | undefined;
-        if (allowanceHex) {
-          try {
-            const allowanceBigNumber = ethers.BigNumber.from(allowanceHex);
-            // Format with token decimals (e.g., if decimals=6, divides by 10^6)
-            const decimals = token.tokenDetails.decimals ?? 18; // Default to 18 if not specified
-            allowance = ethers.utils.formatUnits(allowanceBigNumber, decimals);
-          } catch (error) {
-            Logger.error(
-              error as Error,
-              `getTotalAllowance: Failed to parse allowance hex for token ${tokenAddress}`,
-            );
-            allowance = undefined;
-          }
-        }
+      // Sort chronologically (newest first)
+      logs.sort((a, b) =>
+        b.blockNumber === a.blockNumber
+          ? b.logIndex - a.logIndex
+          : b.blockNumber - a.blockNumber,
+      );
 
-        return {
-          address: tokenAddress,
-          allowance,
-        };
-      } catch (error) {
-        Logger.error(
-          error as Error,
-          `getTotalAllowance: Failed to get allowance for token ${tokenAddress} at wallet ${token.walletAddress}`,
-        );
-        return {
-          address: tokenAddress,
-          allowance: undefined,
-        };
-      }
-    });
+      // Get the most recent approval event
+      // This represents the last limit the user set, regardless of how much has been spent
+      const latestLog = logs[0];
+      const parsedLog = approvalInterface.parseLog(latestLog);
+      const value = parsedLog.args.value as ethers.BigNumber;
 
-    return await Promise.all(promises);
+      return value.toString();
+    } catch (error) {
+      Logger.error(
+        error as Error,
+        `getLatestAllowanceFromLogs: Failed to get latest allowance for token ${tokenAddress}`,
+      );
+      return null;
+    }
   };
 
   provisionCard = async (): Promise<{ success: boolean }> => {
@@ -2008,16 +1999,20 @@ export class CardSDK {
   };
 
   createOnboardingConsent = async (
-    request: CreateOnboardingConsentRequest,
+    request: Omit<CreateOnboardingConsentRequest, 'tenantId'>,
   ): Promise<CreateOnboardingConsentResponse> => {
     this.logDebugInfo('createOnboardingConsent', { request });
+    const requestBody = {
+      ...request,
+      tenantId: this.cardBaanxApiKey || 'tenant_baanx_global',
+    } as CreateOnboardingConsentRequest;
 
     try {
       const response = await this.makeRequest(
         '/v2/consent/onboarding',
         {
           method: 'POST',
-          body: JSON.stringify(request),
+          body: JSON.stringify(requestBody),
           headers: {
             'Content-Type': 'application/json',
             'x-secret-key': this.cardBaanxApiKey || '',
diff --git a/app/components/UI/Card/types.ts b/app/components/UI/Card/types.ts
index 09eaf0b5616..d2c57b57baf 100644
--- a/app/components/UI/Card/types.ts
+++ b/app/components/UI/Card/types.ts
@@ -355,8 +355,8 @@ export interface Consent {
 export interface CreateOnboardingConsentRequest {
   policyType: 'US' | 'global';
   onboardingId: string;
-  tenantId: string;
   consents: Consent[];
+  tenantId: string;
   metadata?: ConsentMetadata;
 }
 
diff --git a/app/components/UI/Card/util/truncateAddress.test.ts b/app/components/UI/Card/util/truncateAddress.test.ts
index 867c0d65847..1cf1abc8da5 100644
--- a/app/components/UI/Card/util/truncateAddress.test.ts
+++ b/app/components/UI/Card/util/truncateAddress.test.ts
@@ -1,49 +1,142 @@
+jest.mock('@metamask/utils', () => ({
+  isHexAddress: jest.fn(),
+}));
+
+jest.mock('../../../../util/address', () => ({
+  safeToChecksumAddress: jest.fn(),
+}));
+
+import { isHexAddress } from '@metamask/utils';
+import { safeToChecksumAddress } from '../../../../util/address';
 import { truncateAddress } from './truncateAddress';
 
+const mockIsHexAddress = isHexAddress as jest.MockedFunction<
+  typeof isHexAddress
+>;
+const mockSafeToChecksumAddress = safeToChecksumAddress as jest.MockedFunction<
+  typeof safeToChecksumAddress
+>;
+
 describe('truncateAddress', () => {
-  it('should truncate a standard Ethereum address correctly', () => {
-    const address = '0x1234567890abcdef1234567890abcdef12345678';
-    const result = truncateAddress(address);
-    expect(result).toBe('0x12...5678');
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  it('should return undefined when address is undefined', () => {
-    const result = truncateAddress(undefined);
-    expect(result).toBeUndefined();
-  });
+  describe('valid hex addresses', () => {
+    it('truncates standard Ethereum address with default chars', () => {
+      const address = '0x1234567890abcdef1234567890abcdef12345678';
+      const checksummedAddress = '0x1234567890aBcDeF1234567890AbCdEf12345678';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(checksummedAddress);
 
-  it('should return undefined when address is an empty string', () => {
-    const result = truncateAddress('');
-    expect(result).toBeUndefined();
-  });
+      const result = truncateAddress(address);
 
-  it('should handle short addresses (less than 8 characters)', () => {
-    const address = '0x1234';
-    const result = truncateAddress(address);
-    expect(result).toBe('0x12...1234');
-  });
+      expect(mockIsHexAddress).toHaveBeenCalledWith(address);
+      expect(mockSafeToChecksumAddress).toHaveBeenCalledWith(address);
+      expect(result).toBe('0x12...5678');
+    });
 
-  it('should handle very short addresses', () => {
-    const address = '0x12';
-    const result = truncateAddress(address);
-    expect(result).toBe('0x12...0x12');
-  });
+    it('truncates address with custom character count', () => {
+      const address = '0x1234567890abcdef1234567890abcdef12345678';
+      const checksummedAddress = '0x1234567890aBcDeF1234567890AbCdEf12345678';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(checksummedAddress);
+
+      const result = truncateAddress(address, 6);
+
+      expect(result).toBe('0x1234...345678');
+    });
+
+    it('truncates short hex address', () => {
+      const address = '0x1234';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(address);
+
+      const result = truncateAddress(address);
+
+      expect(result).toBe('0x12...1234');
+    });
+
+    it('truncates very short hex address', () => {
+      const address = '0x12';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(address);
+
+      const result = truncateAddress(address);
+
+      expect(result).toBe('0x12...0x12');
+    });
+
+    it('preserves checksummed address format', () => {
+      const address = '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd';
+      const checksummedAddress = '0xAbCdEfAbCdEfAbCdEfAbCdEfAbCdEfAbCdEfAbCd';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(checksummedAddress);
+
+      const result = truncateAddress(address);
 
-  it('should handle addresses with exactly 8 characters', () => {
-    const address = '0x123456';
-    const result = truncateAddress(address);
-    expect(result).toBe('0x12...3456');
+      expect(result).toBe('0xAb...AbCd');
+    });
   });
 
-  it('should handle longer addresses', () => {
-    const address = '0x1234567890abcdef1234567890abcdef1234567890abcdef';
-    const result = truncateAddress(address);
-    expect(result).toBe('0x12...cdef');
+  describe('non-hex addresses', () => {
+    it('truncates non-hex string without checksumming', () => {
+      const address = 'some-non-hex-string-1234567890';
+      mockIsHexAddress.mockReturnValue(false);
+
+      const result = truncateAddress(address);
+
+      expect(mockIsHexAddress).toHaveBeenCalledWith(address);
+      expect(mockSafeToChecksumAddress).not.toHaveBeenCalled();
+      expect(result).toBe('some...7890');
+    });
+
+    it('truncates alphanumeric string without 0x prefix', () => {
+      const address = '1234567890abcdef1234567890abcdef12345678';
+      mockIsHexAddress.mockReturnValue(false);
+
+      const result = truncateAddress(address);
+
+      expect(result).toBe('1234...5678');
+    });
   });
 
-  it('should handle addresses without 0x prefix', () => {
-    const address = '1234567890abcdef1234567890abcdef12345678';
-    const result = truncateAddress(address);
-    expect(result).toBe('1234...5678');
+  describe('edge cases', () => {
+    it('returns undefined when address is undefined', () => {
+      mockIsHexAddress.mockReturnValue(false);
+
+      const result = truncateAddress(undefined);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('returns undefined when address is empty string', () => {
+      mockIsHexAddress.mockReturnValue(false);
+
+      const result = truncateAddress('');
+
+      expect(result).toBeUndefined();
+    });
+
+    it('returns undefined when checksummed address is undefined', () => {
+      const address = '0x1234567890abcdef';
+      mockIsHexAddress.mockReturnValue(true);
+      mockSafeToChecksumAddress.mockReturnValue(
+        undefined as unknown as `0x${string}`,
+      );
+
+      const result = truncateAddress(address);
+
+      expect(result).toBeUndefined();
+    });
+
+    it('truncates single character address', () => {
+      const address = 'x';
+      mockIsHexAddress.mockReturnValue(false);
+
+      const result = truncateAddress(address);
+
+      expect(result).toBe('x...x');
+    });
   });
 });
diff --git a/app/components/UI/Card/util/truncateAddress.ts b/app/components/UI/Card/util/truncateAddress.ts
index 6bde03f3f73..ace83cf6576 100644
--- a/app/components/UI/Card/util/truncateAddress.ts
+++ b/app/components/UI/Card/util/truncateAddress.ts
@@ -1,8 +1,15 @@
+import { isHexAddress } from '@metamask/utils';
+import { safeToChecksumAddress } from '../../../../util/address';
+
 export const truncateAddress = (
   address: string | undefined,
   chars: number = 4,
 ) => {
-  if (address) {
-    return `${address.slice(0, chars)}...${address.slice(-chars)}`;
+  const addressToTruncate = isHexAddress(address)
+    ? safeToChecksumAddress(address)
+    : address;
+
+  if (addressToTruncate) {
+    return `${addressToTruncate.slice(0, chars)}...${addressToTruncate.slice(-chars)}`;
   }
 };
diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts
index fd1148c3595..d8b089dfc4e 100644
--- a/app/constants/navigation/Routes.ts
+++ b/app/constants/navigation/Routes.ts
@@ -382,6 +382,11 @@ const Routes = {
       KYC_FAILED: 'CardOnboardingKYCFailed',
       WEBVIEW: 'CardOnboardingWebview',
     },
+    MODALS: {
+      ID: 'CardModals',
+      ADD_FUNDS: 'CardAddFundsModal',
+      ASSET_SELECTION: 'CardAssetSelectionModal',
+    },
   },
   SEND: {
     RECIPIENT: 'Recipient',
diff --git a/e2e/selectors/Card/CardHome.selectors.ts b/e2e/selectors/Card/CardHome.selectors.ts
index 9c81e3ecebc..b7672f94594 100644
--- a/e2e/selectors/Card/CardHome.selectors.ts
+++ b/e2e/selectors/Card/CardHome.selectors.ts
@@ -15,4 +15,5 @@ export const CardHomeSelectors = {
   ADD_FUNDS_BOTTOM_SHEET_DEPOSIT_OPTION:
     'add-funds-bottom-sheet-deposit-option',
   ADD_FUNDS_BOTTOM_SHEET_SWAP_OPTION: 'add-funds-bottom-sheet-swap-option',
+  SPENDING_LIMIT_PROGRESS_BAR_SKELETON: 'spending-limit-progress-bar-skeleton',
 };

From 5e8c845de515095d438b2649c5ce82ba224a6ff2 Mon Sep 17 00:00:00 2001
From: Kevin Bluer <kevin@bluer.com>
Date: Sat, 8 Nov 2025 10:04:02 -0600
Subject: [PATCH 2/2] fix(predict): Market details outcomes tab now displays
 correctly when market is resolved (#22358)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

- Now shows the resolved outcomes under the outcomes tab (on the market
details screen) when the market is resolved.
- Sidenote the
`app/components/UI/Predict/providers/polymarket/PolymarketProvider.ts`
view is increasingly in need of a refactor, but holding off while we
prioritize backlog, etc

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: NA

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<img width="420" alt="image"
src="https://github.com/user-attachments/assets/7a16c912-b905-4499-bb99-09dba3e224a7"
/>

<img width="420" alt="image"
src="https://github.com/user-attachments/assets/62e45d3b-253c-47b7-9ca2-965b2f4f6f52"
/>


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds `PredictMarketOutcomeResolved` and integrates it to display
resolved outcomes in the Outcomes tab for closed and partially resolved
markets, with tests and i18n updates.
>
> - **UI/Logic (Predict Market Details)**:
> - **Resolved Outcomes Rendering**: Introduces `renderOutcomesContent`
to show:
>     - Closed binary markets: winning/losing outcomes.
> - Closed multi-outcome markets: list of resolved outcomes via
`PredictMarketOutcomeResolved`.
> - Open markets with partial resolution: expandable "Resolved outcomes"
section using `PredictMarketOutcomeResolved` plus open outcomes.
> - Integrates `PredictMarketOutcomeResolved` into
`PredictMarketDetails` and updates tab defaulting for closed markets.
> - **New Component**:
> - `components/PredictMarketOutcomeResolved`: Displays group title,
formatted volume, winner/draw, and confirmation icon.
> - **Tests**:
> - Adds comprehensive tests for `PredictMarketOutcomeResolved`
(winner/draw, formatting, styling).
> - Updates `PredictMarketDetails` tests to assert new outcomes
rendering and collapsed/expanded behavior.
> - **i18n**:
>   - Adds `predict.outcome_draw` string.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a7b83c0f89314ce27dd4b9b75d1b9d3695984fcc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 .../PredictMarketOutcomeResolved.test.tsx     | 309 ++++++++++++++++++
 .../PredictMarketOutcomeResolved.tsx          |  89 +++++
 .../PredictMarketOutcomeResolved/index.ts     |   1 +
 .../PredictMarketDetails.test.tsx             |  26 +-
 .../PredictMarketDetails.tsx                  | 287 ++++++++--------
 locales/languages/en.json                     |   1 +
 6 files changed, 548 insertions(+), 165 deletions(-)
 create mode 100644 app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.test.tsx
 create mode 100644 app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.tsx
 create mode 100644 app/components/UI/Predict/components/PredictMarketOutcomeResolved/index.ts

diff --git a/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.test.tsx b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.test.tsx
new file mode 100644
index 00000000000..c560da41880
--- /dev/null
+++ b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.test.tsx
@@ -0,0 +1,309 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import PredictMarketOutcomeResolved from './PredictMarketOutcomeResolved';
+import { PredictOutcome } from '../../types';
+import { formatVolume } from '../../utils/format';
+
+jest.mock('../../../../../../locales/i18n', () => ({
+  strings: (key: string) => {
+    const translations: Record<string, string> = {
+      'predict.volume_abbreviated': 'Vol.',
+      'predict.outcome_draw': 'Draw',
+    };
+    return translations[key] || key;
+  },
+}));
+
+jest.mock('../../utils/format');
+
+const createMockOutcome = (
+  overrides?: Partial<PredictOutcome>,
+): PredictOutcome => ({
+  id: 'test-outcome-1',
+  marketId: 'test-market-1',
+  providerId: 'test-provider',
+  title: 'Will Bitcoin reach $150,000 by end of year?',
+  description: 'Bitcoin price prediction market',
+  image: 'https://example.com/bitcoin.png',
+  status: 'open',
+  tokens: [
+    {
+      id: 'token-yes',
+      title: 'Yes',
+      price: 0.65,
+    },
+    {
+      id: 'token-no',
+      title: 'No',
+      price: 0.35,
+    },
+  ],
+  volume: 1000000,
+  groupItemTitle: 'Crypto Markets',
+  negRisk: false,
+  tickSize: '0.01',
+  ...overrides,
+});
+
+describe('PredictMarketOutcomeResolved', () => {
+  const mockFormatVolume = formatVolume as jest.MockedFunction<
+    typeof formatVolume
+  >;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockFormatVolume.mockImplementation((volume: string | number) => {
+      const numVolume =
+        typeof volume === 'string' ? parseFloat(volume) : volume;
+      if (numVolume >= 1000000) {
+        return `${(numVolume / 1000000).toFixed(1)}M`;
+      }
+      if (numVolume >= 1000) {
+        return `${(numVolume / 1000).toFixed(1)}K`;
+      }
+      return numVolume.toString();
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders outcome title and volume information', () => {
+    const outcome = createMockOutcome();
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Crypto Markets')).toBeOnTheScreen();
+    expect(getByText(/\$1\.0M.*Vol\./)).toBeOnTheScreen();
+  });
+
+  it('displays token one as winner when token one price is higher', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.75 },
+        { id: 'token-no', title: 'No', price: 0.25 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Yes')).toBeOnTheScreen();
+  });
+
+  it('displays token two as winner when token two price is higher', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.25 },
+        { id: 'token-no', title: 'No', price: 0.75 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('No')).toBeOnTheScreen();
+  });
+
+  it('displays draw when token prices are equal', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.5 },
+        { id: 'token-no', title: 'No', price: 0.5 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Draw')).toBeOnTheScreen();
+  });
+
+  it('renders confirmation icon when token one wins', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.75 },
+        { id: 'token-no', title: 'No', price: 0.25 },
+      ],
+    });
+
+    const { getByTestId } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    // Component renders without errors and shows winner
+    expect(getByTestId).toBeDefined();
+  });
+
+  it('renders without confirmation icon when token two wins', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.25 },
+        { id: 'token-no', title: 'No', price: 0.75 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    // Verify token two is displayed as winner
+    expect(getByText('No')).toBeOnTheScreen();
+  });
+
+  it('renders without confirmation icon when prices are equal', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.5 },
+        { id: 'token-no', title: 'No', price: 0.5 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    // Verify draw is displayed
+    expect(getByText('Draw')).toBeOnTheScreen();
+  });
+
+  it('renders with container styling when noContainer is false', () => {
+    const outcome = createMockOutcome();
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} noContainer={false} />,
+    );
+
+    // Component renders successfully
+    expect(getByText('Crypto Markets')).toBeOnTheScreen();
+  });
+
+  it('renders with minimal styling when noContainer is true', () => {
+    const outcome = createMockOutcome();
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} noContainer />,
+    );
+
+    // Component renders successfully
+    expect(getByText('Crypto Markets')).toBeOnTheScreen();
+  });
+
+  it('handles zero volume', () => {
+    const outcome = createMockOutcome({ volume: 0 });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText(/\$0.*Vol\./)).toBeOnTheScreen();
+  });
+
+  it('formats large volume values correctly', () => {
+    const outcome = createMockOutcome({ volume: 5000000 });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText(/\$5\.0M.*Vol\./)).toBeOnTheScreen();
+  });
+
+  it('formats small volume values correctly', () => {
+    const outcome = createMockOutcome({ volume: 5000 });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText(/\$5\.0K.*Vol\./)).toBeOnTheScreen();
+  });
+
+  it('truncates long outcome titles with ellipsis', () => {
+    const outcome = createMockOutcome({
+      groupItemTitle:
+        'This is a very long title that should be truncated with ellipsis',
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    const titleElement = getByText(
+      'This is a very long title that should be truncated with ellipsis',
+    );
+    expect(titleElement).toBeOnTheScreen();
+    expect(titleElement.props.numberOfLines).toBe(1);
+    expect(titleElement.props.ellipsizeMode).toBe('tail');
+  });
+
+  it('handles very small price differences between tokens', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.501 },
+        { id: 'token-no', title: 'No', price: 0.499 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Yes')).toBeOnTheScreen();
+  });
+
+  it('handles price of 1.0 for winning token', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 1.0 },
+        { id: 'token-no', title: 'No', price: 0.0 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Yes')).toBeOnTheScreen();
+  });
+
+  it('handles price of 0.0 for both tokens', () => {
+    const outcome = createMockOutcome({
+      tokens: [
+        { id: 'token-yes', title: 'Yes', price: 0.0 },
+        { id: 'token-no', title: 'No', price: 0.0 },
+      ],
+    });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText('Draw')).toBeOnTheScreen();
+  });
+
+  it('calls formatVolume with outcome volume', () => {
+    const outcome = createMockOutcome({ volume: 1000000 });
+
+    render(<PredictMarketOutcomeResolved outcome={outcome} />);
+
+    expect(mockFormatVolume).toHaveBeenCalledWith(1000000);
+  });
+
+  it('displays formatted volume in UI', () => {
+    mockFormatVolume.mockReturnValue('1.5M');
+    const outcome = createMockOutcome({ volume: 1500000 });
+
+    const { getByText } = render(
+      <PredictMarketOutcomeResolved outcome={outcome} />,
+    );
+
+    expect(getByText(/\$1\.5M.*Vol\./)).toBeOnTheScreen();
+  });
+});
diff --git a/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.tsx b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.tsx
new file mode 100644
index 00000000000..c6eaa43f74e
--- /dev/null
+++ b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/PredictMarketOutcomeResolved.tsx
@@ -0,0 +1,89 @@
+import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  BoxJustifyContent,
+} from '@metamask/design-system-react-native';
+import React from 'react';
+import { strings } from '../../../../../../locales/i18n';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../../../component-library/components/Icons/Icon';
+import { PredictOutcome } from '../../types';
+import { formatVolume } from '../../utils/format';
+
+interface PredictMarketOutcomeResolvedProps {
+  outcome: PredictOutcome;
+  noContainer?: boolean;
+}
+
+const PredictMarketOutcomeResolved: React.FC<
+  PredictMarketOutcomeResolvedProps
+> = ({ outcome, noContainer = false }) => {
+  const tokenOnePrice = outcome.tokens[0].price;
+  const tokenTwoPrice = outcome.tokens[1].price;
+  const tokenOneIsWinner = tokenOnePrice > tokenTwoPrice;
+  const tokenTwoIsWinner = tokenTwoPrice > tokenOnePrice;
+
+  const winnerTitle = tokenOneIsWinner
+    ? outcome.tokens[0].title
+    : tokenTwoIsWinner
+      ? outcome.tokens[1].title
+      : strings('predict.outcome_draw');
+
+  const textColor = tokenOneIsWinner
+    ? TextColor.Default
+    : TextColor.Alternative;
+
+  return (
+    <Box twClassName={noContainer ? 'pt-2' : ' bg-muted rounded-xl p-4 mb-4'}>
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        justifyContent={BoxJustifyContent.Between}
+        alignItems={BoxAlignItems.Center}
+        twClassName="gap-2"
+      >
+        <Box flexDirection={BoxFlexDirection.Column} twClassName="gap-1">
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            color={TextColor.Default}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {outcome.groupItemTitle}
+          </Text>
+          <Text
+            variant={TextVariant.BodySMMedium}
+            color={TextColor.Alternative}
+          >
+            ${formatVolume(outcome.volume)}{' '}
+            {strings('predict.volume_abbreviated')}
+          </Text>
+        </Box>
+        <Box
+          flexDirection={BoxFlexDirection.Row}
+          alignItems={BoxAlignItems.Center}
+          twClassName="gap-1"
+        >
+          <Text variant={TextVariant.BodyMDMedium} color={textColor}>
+            {winnerTitle}
+          </Text>
+          {tokenOneIsWinner && (
+            <Icon
+              name={IconName.Confirmation}
+              size={IconSize.Md}
+              color={TextColor.Success}
+            />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default PredictMarketOutcomeResolved;
diff --git a/app/components/UI/Predict/components/PredictMarketOutcomeResolved/index.ts b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/index.ts
new file mode 100644
index 00000000000..174dbefafc9
--- /dev/null
+++ b/app/components/UI/Predict/components/PredictMarketOutcomeResolved/index.ts
@@ -0,0 +1 @@
+export { default } from './PredictMarketOutcomeResolved';
diff --git a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx
index 3325b90f5ca..b9139bc1fbc 100644
--- a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx
+++ b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx
@@ -2043,14 +2043,24 @@ describe('PredictMarketDetails', () => {
           {
             id: 'outcome-1',
             title: 'Yes',
-            tokens: [{ id: 't1', price: 1 }],
-            volume: 1,
+            groupItemTitle: 'Yes Outcome',
+            status: 'closed',
+            tokens: [
+              { id: 't1', price: 1, title: 'Yes' },
+              { id: 't2', price: 0, title: 'No' },
+            ],
+            volume: 1000000,
           },
           {
             id: 'outcome-2',
             title: 'No',
-            tokens: [{ id: 't2', price: 0 }],
-            volume: 1,
+            groupItemTitle: 'No Outcome',
+            status: 'closed',
+            tokens: [
+              { id: 't3', price: 0, title: 'Yes' },
+              { id: 't4', price: 1, title: 'No' },
+            ],
+            volume: 500000,
           },
         ],
       });
@@ -2058,8 +2068,10 @@ describe('PredictMarketDetails', () => {
       setupPredictMarketDetailsTest(closedMarket);
 
       expect(
-        screen.getAllByTestId('predict-market-outcome').length,
-      ).toBeGreaterThan(0);
+        screen.getByTestId('predict-market-details-outcomes-tab'),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('Yes Outcome')).toBeOnTheScreen();
+      expect(screen.getByText('No Outcome')).toBeOnTheScreen();
     });
 
     it('keeps user-selected About tab on closed market', () => {
@@ -2435,7 +2447,7 @@ describe('PredictMarketDetails', () => {
       if (pressable) {
         fireEvent.press(pressable);
 
-        expect(screen.getByText('draw')).toBeOnTheScreen();
+        expect(screen.getByText('predict.outcome_draw')).toBeOnTheScreen();
       }
     });
 
diff --git a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx
index 60c79a65e76..5d3ebd8c078 100644
--- a/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx
+++ b/app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx
@@ -60,6 +60,7 @@ import {
   PredictOutcomeToken,
 } from '../../types';
 import PredictMarketOutcome from '../../components/PredictMarketOutcome';
+import PredictMarketOutcomeResolved from '../../components/PredictMarketOutcomeResolved';
 import { usePredictPositions } from '../../hooks/usePredictPositions';
 import { usePredictClaim } from '../../hooks/usePredictClaim';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
@@ -880,6 +881,133 @@ const PredictMarketDetails: React.FC<PredictMarketDetailsProps> = () => {
     </>
   );
 
+  const renderOutcomesContent = () => {
+    // Closed market with single outcome (binary)
+    if (market?.status === PredictMarketStatus.CLOSED && singleOutcomeMarket) {
+      return (
+        <Box>
+          {winningOutcome && (
+            <PredictMarketOutcome
+              market={market}
+              outcome={winningOutcome}
+              outcomeToken={winningOutcomeToken}
+              isClosed
+            />
+          )}
+          {losingOutcome && (
+            <PredictMarketOutcome
+              market={market}
+              outcome={losingOutcome}
+              outcomeToken={losingOutcomeToken}
+              isClosed
+            />
+          )}
+        </Box>
+      );
+    }
+
+    // Closed market with multiple outcomes
+    if (market?.status === PredictMarketStatus.CLOSED && multipleOutcomes) {
+      return closedOutcomes.map((outcome) => (
+        <PredictMarketOutcomeResolved key={outcome.id} outcome={outcome} />
+      ));
+    }
+
+    // Open market with partially resolved outcomes
+    if (
+      market?.status === PredictMarketStatus.OPEN &&
+      multipleOutcomes &&
+      multipleOpenOutcomesPartiallyResolved
+    ) {
+      return (
+        <Box>
+          {openOutcomes.map((outcome) => (
+            <PredictMarketOutcome
+              key={outcome.id}
+              market={market}
+              outcome={outcome}
+            />
+          ))}
+          <Pressable
+            onPress={() => setIsResolvedExpanded((prev) => !prev)}
+            style={({ pressed }) =>
+              tw.style(
+                'w-full rounded-xl bg-default px-4 py-3 mt-2 mb-4 bg-muted',
+                pressed && 'bg-pressed',
+              )
+            }
+            accessibilityRole="button"
+          >
+            <Box
+              flexDirection={BoxFlexDirection.Row}
+              alignItems={BoxAlignItems.Center}
+              justifyContent={BoxJustifyContent.Between}
+              twClassName="gap-3"
+            >
+              <Box
+                flexDirection={BoxFlexDirection.Row}
+                alignItems={BoxAlignItems.Center}
+                twClassName="gap-2"
+              >
+                <Text
+                  variant={TextVariant.BodyMDMedium}
+                  color={TextColor.Default}
+                >
+                  {strings('predict.resolved_outcomes')}
+                </Text>
+                <Box twClassName="px-2 py-0.5 rounded bg-muted">
+                  <Text
+                    variant={TextVariant.BodySM}
+                    color={TextColor.Alternative}
+                  >
+                    {closedOutcomes.length}
+                  </Text>
+                </Box>
+              </Box>
+              <Icon
+                name={
+                  isResolvedExpanded ? IconName.ArrowUp : IconName.ArrowDown
+                }
+                size={IconSize.Md}
+                color={colors.text.alternative}
+              />
+            </Box>
+            {isResolvedExpanded &&
+              closedOutcomes.map((outcome) => (
+                <PredictMarketOutcomeResolved
+                  key={outcome.id}
+                  outcome={outcome}
+                  noContainer
+                />
+              ))}
+          </Pressable>
+        </Box>
+      );
+    }
+
+    // Default: show all outcomes
+    return (
+      <Box>
+        {market &&
+          (market.status === PredictMarketStatus.OPEN
+            ? openOutcomes
+            : (market.outcomes ?? [])
+          ).map((outcome, index) => (
+            <PredictMarketOutcome
+              key={
+                outcome?.id ??
+                outcome?.tokens?.[0]?.id ??
+                outcome?.title ??
+                `outcome-${index}`
+              }
+              market={market}
+              outcome={outcome}
+            />
+          ))}
+      </Box>
+    );
+  };
+
   const renderTabContent = () => {
     if (activeTab === null || !tabsReady) {
       return null;
@@ -911,164 +1039,7 @@ const PredictMarketDetails: React.FC<PredictMarketDetailsProps> = () => {
           twClassName="px-3 pt-4 pb-8"
           testID={PredictMarketDetailsSelectorsIDs.OUTCOMES_TAB}
         >
-          {market?.status === PredictMarketStatus.CLOSED &&
-          singleOutcomeMarket ? (
-            <Box>
-              {winningOutcome && (
-                <PredictMarketOutcome
-                  market={market}
-                  outcome={winningOutcome}
-                  outcomeToken={winningOutcomeToken}
-                  isClosed
-                />
-              )}
-              {losingOutcome && (
-                <PredictMarketOutcome
-                  market={market}
-                  outcome={losingOutcome}
-                  outcomeToken={losingOutcomeToken}
-                  isClosed
-                />
-              )}
-            </Box>
-          ) : market?.status === PredictMarketStatus.OPEN &&
-            multipleOutcomes &&
-            multipleOpenOutcomesPartiallyResolved ? (
-            <Box>
-              {openOutcomes.map((outcome) => (
-                <PredictMarketOutcome
-                  key={outcome.id}
-                  market={market}
-                  outcome={outcome}
-                />
-              ))}
-              <Pressable
-                onPress={() => setIsResolvedExpanded((prev) => !prev)}
-                style={({ pressed }) =>
-                  tw.style(
-                    'w-full rounded-xl bg-default px-4 py-3 mt-2 mb-4 bg-muted',
-                    pressed && 'bg-pressed',
-                  )
-                }
-                accessibilityRole="button"
-              >
-                <Box
-                  flexDirection={BoxFlexDirection.Row}
-                  alignItems={BoxAlignItems.Center}
-                  justifyContent={BoxJustifyContent.Between}
-                  twClassName="gap-3"
-                >
-                  <Box
-                    flexDirection={BoxFlexDirection.Row}
-                    alignItems={BoxAlignItems.Center}
-                    twClassName="gap-2"
-                  >
-                    <Text
-                      variant={TextVariant.BodyMDMedium}
-                      color={TextColor.Default}
-                    >
-                      {strings('predict.resolved_outcomes')}
-                    </Text>
-                    <Box twClassName="px-2 py-0.5 rounded bg-muted">
-                      <Text
-                        variant={TextVariant.BodySM}
-                        color={TextColor.Alternative}
-                      >
-                        {closedOutcomes.length}
-                      </Text>
-                    </Box>
-                  </Box>
-                  <Icon
-                    name={
-                      isResolvedExpanded ? IconName.ArrowUp : IconName.ArrowDown
-                    }
-                    size={IconSize.Md}
-                    color={colors.text.alternative}
-                  />
-                </Box>
-                {isResolvedExpanded &&
-                  closedOutcomes.map((outcome) => (
-                    <Box key={outcome.id} twClassName="pt-2">
-                      <Box
-                        flexDirection={BoxFlexDirection.Row}
-                        justifyContent={BoxJustifyContent.Between}
-                        alignItems={BoxAlignItems.Center}
-                        twClassName="gap-2"
-                      >
-                        <Box
-                          flexDirection={BoxFlexDirection.Column}
-                          twClassName="gap-1 mb-2"
-                        >
-                          <Text
-                            variant={TextVariant.BodyMDMedium}
-                            color={TextColor.Default}
-                            numberOfLines={1}
-                            ellipsizeMode="tail"
-                          >
-                            {outcome.groupItemTitle}
-                          </Text>
-                          <Text
-                            variant={TextVariant.BodySMMedium}
-                            color={TextColor.Alternative}
-                          >
-                            ${formatVolume(outcome.volume)}{' '}
-                            {strings('predict.volume_abbreviated')}
-                          </Text>
-                        </Box>
-                        <Box
-                          flexDirection={BoxFlexDirection.Row}
-                          alignItems={BoxAlignItems.Center}
-                          twClassName="gap-1"
-                        >
-                          <Text
-                            variant={TextVariant.BodyMDMedium}
-                            color={
-                              outcome.tokens[0].price > outcome.tokens[1].price
-                                ? TextColor.Default
-                                : TextColor.Alternative
-                            }
-                          >
-                            {outcome.tokens[0].price > outcome.tokens[1].price
-                              ? outcome.tokens[0].title
-                              : outcome.tokens[1].price >
-                                  outcome.tokens[0].price
-                                ? outcome.tokens[1].title
-                                : 'draw'}
-                          </Text>
-                          {outcome.tokens[0].price >
-                            outcome.tokens[1].price && (
-                            <Icon
-                              name={IconName.Confirmation}
-                              size={IconSize.Md}
-                              color={TextColor.Success}
-                            />
-                          )}
-                        </Box>
-                      </Box>
-                    </Box>
-                  ))}
-              </Pressable>
-            </Box>
-          ) : (
-            <Box>
-              {market &&
-                (market.status === PredictMarketStatus.OPEN
-                  ? openOutcomes
-                  : (market.outcomes ?? [])
-                ).map((outcome, index) => (
-                  <PredictMarketOutcome
-                    key={
-                      outcome?.id ??
-                      outcome?.tokens?.[0]?.id ??
-                      outcome?.title ??
-                      `outcome-${index}`
-                    }
-                    market={market}
-                    outcome={outcome}
-                  />
-                ))}
-            </Box>
-          )}
+          {renderOutcomesContent()}
         </Box>
       );
     }
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 0228c29f693..01e2d584adb 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -1792,6 +1792,7 @@
     "outcomes_plural": "outcomes",
     "outcome_winner": "Winner",
     "outcome_loser": "Loser",
+    "outcome_draw": "Draw",
     "resolved_outcomes": "Resolved outcomes",
     "category": {
       "trending": "Trending",