fix(card): UI issues on Authentication/Delegation (MetaMask#22352)

<!--
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
327555d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Brunonascdev

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', () => {

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

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,