chore(runway): cherry-pick feat(card): cp-7.64.0 Onboarding and Metal Card flow fixes (#25538)

- feat(card): cp-7.64.0 Onboarding and Metal Card flow fixes (#25473)

<!--
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**

This PR includes multiple improvements and bug fixes for the Card
feature:

### Sign Up Flow Improvements
- **Removed confirm password field**: Simplified the sign up form by
removing the redundant password confirmation step
- **Added password visibility toggle**: Users can now show/hide their
password using an eye icon
- **Reordered form fields**: Country selector is now displayed first,
followed by email and password
- **Updated copy**: Changed "Apply now" button text to "Setup now" and
updated password description

### DaimoPay Environment Toggle
- **Added experimental setting**: New toggle in Experimental Settings to
switch between DaimoPay demo and production environments (only visible
in non-production builds)
- **Refactored environment detection**: `getDaimoEnvironment` now
accepts a parameter instead of checking `__DEV__`
- **Fixed payment flow**: Payment polling now uses `orderId` instead of
`payId` for correct status tracking
- **Improved payment completion handling**: Removed premature navigation
on `paymentCompleted` WebView event - now relies on polling to confirm
actual completion

### Card Home Fixes
- **Fixed manage card options visibility**: Added `needsSetup` condition
to hide manage card, metal card order, and travel options when user
hasn't completed card setup
- **Fixed balance display for non-US locales**: Fixed an issue where
fiat balance was displaying 100x the correct value (e.g., $55 instead of
$0.55) for locales that use comma as decimal separator (Brazilian
Portuguese, German, etc.)

### Token Balance Fixes
- **Fixed potential balance mismatch**: Changed `useTokensWithBalance`
from index-based array lookup to address-based Map lookup to prevent
balance mismatches when tokens are filtered

### Spending Limit Screen Fix
- **Fixed asset selection flickering**: Resolved an issue where
selecting a different asset from the AssetSelectionBottomSheet would
immediately revert to the original asset

### Other Changes
- **PersonalDetails**: Removed fallback for nationality field (no longer
uses `countryOfResidence` as fallback)
- **CardSDK**: Added `location` parameter to `getRegistrationStatus`
method
- **Types**: Added `requestId` to `CreateOrderResponse` and `STARTED` to
`OrderStatus`

## **Changelog**

CHANGELOG entry: Improved Card sign up flow by removing confirm password
field and adding password visibility toggle. Fixed balance display for
non-US locales, fixed asset selection flickering on Spending Limit
screen, and fixed manage card options visibility for users who haven't
completed setup.

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Card sign up flow

  Scenario: User signs up for card
    Given user opens the Card sign up screen

    When user views the form
    Then country selector should be displayed first
    And email field should be displayed second
    And password field should be displayed third
    And there should be no confirm password field
    And password field should have a visibility toggle icon

Feature: Card balance display with locale formatting

  Scenario: User views correct balance with Brazilian locale
    Given user has device set to Brazilian Portuguese locale
    And user has 0.55 USDC in their wallet

    When user navigates to Card Home
    Then balance should display as "US$ 0,55" (not "US$ 55,00")

Feature: Spending limit asset selection

  Scenario: User changes asset on spending limit screen
    Given user is on the Spending Limit screen with USDC selected
    
    When user taps "Other" to select a different asset
    And user selects USDT from the asset selection bottom sheet
    Then USDT should remain selected (not revert to USDC)

Feature: Card Home manage options visibility

  Scenario: User sees manage options only after setup
    Given user has not completed card setup (needs delegation)

    When user views Card Home
    Then "Manage Card", "Order Metal Card", and "Travel" options should be hidden

Feature: DaimoPay environment toggle (non-production only)

  Scenario: Developer toggles DaimoPay demo mode
    Given user is on a non-production build
    And user navigates to Settings > Experimental

    When user toggles "Use DaimoPay demo environment"
    Then DaimoPay should use the demo environment for payments
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

First case: Demo disabled. The order fails because a payment was already
completed.
Second case: Demo enabled. The demo flow starts successfully.



https://github.com/user-attachments/assets/3093aae7-276d-4351-ae8f-aee70d412f9d

<!-- [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]
> **Medium Risk**
> Medium risk due to changes across Card onboarding, DaimoPay payment
creation/polling/navigation, and Redux state used to select environments
and locations; could affect checkout completion and onboarding flows if
miswired.
> 
> **Overview**
> Improves Card onboarding UX by **removing the confirm-password
field**, reordering the Sign Up form (country → email → password),
adding **password visibility toggles** (Sign Up + Login), updating
onboarding copy, and disabling app auto-lock while the onboarding
navigator is mounted.
> 
> Refactors DaimoPay to support a **demo/production toggle** (new
`card.isDaimoDemo` + Experimental Settings switch shown only in
non-production builds) and to **poll by `orderId`** in production (while
demo navigates immediately). This threads `orderId` through
`ReviewOrder` → `DaimoPayModal`, updates `DaimoPayService` to return `{
payId, orderId }` (with `requestId` support), and tightens event/origin
handling.
> 
> Fixes a few Card flow issues: hides manage-card actions until setup is
complete, parses locale-formatted fiat strings correctly when deriving
balances, prevents spending-limit token selection from being overwritten
after returning from the bottom sheet, removes nationality fallback in
`PersonalDetails`, and passes `userCardLocation` into
`CardSDK.getRegistrationStatus`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
32d224d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[7c2216d](7c2216d)

Co-authored-by: Bruno Nascimento <brunonascimentodev@gmail.com>

Author: runway-github[bot]

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx

@@ -243,6 +243,44 @@ describe('CardAuthentication Component', () => {
     });
   });
 
+  describe('Login Step - Password Visibility Toggle', () => {
+    it('renders the password visibility toggle button', () => {
+      render();
+
+      expect(
+        screen.getByTestId('password-visibility-toggle'),
+      ).toBeOnTheScreen();
+    });
+
+    it('has password hidden by default', () => {
+      render();
+      const passwordInput = screen.getByTestId('password-field');
+
+      expect(passwordInput).toHaveProp('secureTextEntry', true);
+    });
+
+    it('shows password when visibility toggle is pressed', () => {
+      render();
+      const passwordInput = screen.getByTestId('password-field');
+      const toggleButton = screen.getByTestId('password-visibility-toggle');
+
+      fireEvent.press(toggleButton);
+
+      expect(passwordInput).toHaveProp('secureTextEntry', false);
+    });
+
+    it('hides password again when visibility toggle is pressed twice', () => {
+      render();
+      const passwordInput = screen.getByTestId('password-field');
+      const toggleButton = screen.getByTestId('password-visibility-toggle');
+
+      fireEvent.press(toggleButton);
+      fireEvent.press(toggleButton);
+
+      expect(passwordInput).toHaveProp('secureTextEntry', true);
+    });
+  });
+
   describe('Login Step - Login Functionality', () => {
     it('calls login with correct parameters for international location', async () => {
       render();

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx

@@ -6,11 +6,10 @@ import {
   FontWeight,
   Text,
   TextVariant,
-} from '@metamask/design-system-react-native';
-import Icon, {
+  Icon,
   IconName,
   IconSize,
-} from '../../../../../component-library/components/Icons/Icon';
+} from '@metamask/design-system-react-native';
 import TextField, {
   TextFieldSize,
 } from '../../../../../component-library/components/Form/TextField';
@@ -30,7 +29,10 @@ import { strings } from '../../../../../../locales/i18n';
 import Logger from '../../../../../util/Logger';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { useDispatch } from 'react-redux';
-import { setOnboardingId } from '../../../../../core/redux/slices/card';
+import {
+  setOnboardingId,
+  setUserCardLocation,
+} from '../../../../../core/redux/slices/card';
 import { CardActions, CardScreens } from '../../util/metrics';
 import OnboardingStep from '../../components/Onboarding/OnboardingStep';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
@@ -49,6 +51,7 @@ const CardAuthentication = () => {
   const [step, setStep] = useState<'login' | 'otp'>('login');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [location, setLocation] = useState<CardLocation>('international');
   const [otpData, setOtpData] = useState<{
@@ -187,6 +190,7 @@ const CardAuthentication = () => {
         }
 
         if (loginResponse?.phase) {
+          dispatch(setUserCardLocation(location));
           dispatch(setOnboardingId(loginResponse.userId));
           navigation.reset({
             index: 0,
@@ -432,11 +436,22 @@ const CardAuthentication = () => {
               maxLength={255}
               returnKeyType={'done'}
               onSubmitEditing={() => performLogin()}
-              secureTextEntry
+              secureTextEntry={!isPasswordVisible}
               accessibilityLabel={strings(
                 'card.card_authentication.password_label',
               )}
               testID="password-field"
+              endAccessory={
+                <TouchableOpacity
+                  onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+                  testID="password-visibility-toggle"
+                >
+                  <Icon
+                    name={isPasswordVisible ? IconName.EyeSlash : IconName.Eye}
+                    size={IconSize.Md}
+                  />
+                </TouchableOpacity>
+              }
             />
           </Box>
         </>
@@ -449,6 +464,7 @@ const CardAuthentication = () => {
       handleOtpValueChange,
       handlePasswordChange,
       handleResendOtp,
+      isPasswordVisible,
       location,
       otpError,
       otpLoading,

app/components/UI/Card/Views/CardAuthentication/__snapshots__/CardAuthentication.test.tsx.snap

@@ -502,17 +502,18 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l
                                     testID="international-location-box"
                                   >
                                     <SvgMock
-                                      color="#121314"
                                       fill="currentColor"
-                                      height={24}
                                       name="Global"
                                       style={
-                                        {
-                                          "height": 24,
-                                          "width": 24,
-                                        }
+                                        [
+                                          {
+                                            "color": "#121314",
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                          undefined,
+                                        ]
                                       }
-                                      width={24}
                                     />
                                     <Text
                                       accessibilityRole="text"
@@ -837,6 +838,34 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l
                                       value=""
                                     />
                                   </View>
+                                  <View
+                                    style={
+                                      {
+                                        "marginLeft": 8,
+                                      }
+                                    }
+                                    testID="textfield-endacccessory"
+                                  >
+                                    <TouchableOpacity
+                                      onPress={[Function]}
+                                      testID="password-visibility-toggle"
+                                    >
+                                      <SvgMock
+                                        fill="currentColor"
+                                        name="Eye"
+                                        style={
+                                          [
+                                            {
+                                              "color": "#121314",
+                                              "height": 20,
+                                              "width": 20,
+                                            },
+                                            undefined,
+                                          ]
+                                        }
+                                      />
+                                    </TouchableOpacity>
+                                  </View>
                                 </View>
                               </View>
                             </View>

app/components/UI/Card/Views/CardHome/CardHome.tsx

@@ -1116,41 +1116,44 @@ const CardHome = () => {
             />
           )}
       </Box>
-      {!isLoading && !cardSetupState.isKYCPending && !isCardProvisioning && (
-        <>
-          <ManageCardListItem
-            title={strings('card.card_home.manage_card_options.manage_card')}
-            description={strings(
-              'card.card_home.manage_card_options.advanced_card_management_description',
-            )}
-            rightIcon={IconName.Export}
-            onPress={navigateToCardPage}
-            testID={CardHomeSelectors.ADVANCED_CARD_MANAGEMENT_ITEM}
-          />
-          {isUserEligibleForMetalCard && (
+      {!isLoading &&
+        !cardSetupState.isKYCPending &&
+        !cardSetupState.needsSetup &&
+        !isCardProvisioning && (
+          <>
             <ManageCardListItem
-              title={strings(
-                'card.card_home.manage_card_options.order_metal_card',
-              )}
+              title={strings('card.card_home.manage_card_options.manage_card')}
               description={strings(
-                'card.card_home.manage_card_options.order_metal_card_description',
+                'card.card_home.manage_card_options.advanced_card_management_description',
               )}
-              rightIcon={IconName.ArrowRight}
-              onPress={orderMetalCardAction}
-              testID={CardHomeSelectors.ORDER_METAL_CARD_ITEM}
+              rightIcon={IconName.Export}
+              onPress={navigateToCardPage}
+              testID={CardHomeSelectors.ADVANCED_CARD_MANAGEMENT_ITEM}
             />
-          )}
-          <ManageCardListItem
-            title={strings('card.card_home.manage_card_options.travel_title')}
-            description={strings(
-              'card.card_home.manage_card_options.travel_description',
+            {isUserEligibleForMetalCard && (
+              <ManageCardListItem
+                title={strings(
+                  'card.card_home.manage_card_options.order_metal_card',
+                )}
+                description={strings(
+                  'card.card_home.manage_card_options.order_metal_card_description',
+                )}
+                rightIcon={IconName.ArrowRight}
+                onPress={orderMetalCardAction}
+                testID={CardHomeSelectors.ORDER_METAL_CARD_ITEM}
+              />
             )}
-            rightIcon={IconName.Export}
-            onPress={navigateToTravelPage}
-            testID={CardHomeSelectors.TRAVEL_ITEM}
-          />
-        </>
-      )}
+            <ManageCardListItem
+              title={strings('card.card_home.manage_card_options.travel_title')}
+              description={strings(
+                'card.card_home.manage_card_options.travel_description',
+              )}
+              rightIcon={IconName.Export}
+              onPress={navigateToTravelPage}
+              testID={CardHomeSelectors.TRAVEL_ITEM}
+            />
+          </>
+        )}
       {isAuthenticated && !isLoading && (
         <>
           <Box

app/components/UI/Card/Views/ReviewOrder/ReviewOrder.test.tsx

@@ -49,6 +49,11 @@ jest.mock('../../sdk', () => ({
   }),
 }));
 
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(() => false),
+  useDispatch: jest.fn(() => jest.fn()),
+}));
+
 jest.mock('../../../../hooks/useMetrics', () => ({
   useMetrics: () => ({
     trackEvent: mockTrackEvent,

app/components/UI/Card/Views/ReviewOrder/ReviewOrder.tsx

@@ -23,6 +23,8 @@ import DaimoPayService from '../../services/DaimoPayService';
 import Logger from '../../../../../util/Logger';
 import { useCardSDK } from '../../sdk';
 import { useParams } from '../../../../../util/navigation/navUtils';
+import { useSelector } from 'react-redux';
+import { selectIsDaimoDemo } from '../../../../../core/redux/slices/card';
 
 export interface ShippingAddress {
   line1: string;
@@ -51,7 +53,7 @@ const ReviewOrder = () => {
     useParams<ReviewOrderParams>();
 
   const { sdk: cardSDK } = useCardSDK();
-
+  const isDaimoDemo = useSelector(selectIsDaimoDemo);
   const [isCreatingPayment, setIsCreatingPayment] = useState(false);
   const [paymentError, setPaymentError] = useState<string | null>(null);
 
@@ -135,11 +137,16 @@ const ReviewOrder = () => {
     try {
       const response = await DaimoPayService.createPayment({
         cardSDK: cardSDK ?? undefined,
+        isDaimoDemo,
       });
 
       navigate(Routes.CARD.MODALS.ID, {
         screen: Routes.CARD.MODALS.DAIMO_PAY,
-        params: { payId: response.payId, fromUpgrade },
+        params: {
+          payId: response.payId,
+          orderId: response.orderId,
+          fromUpgrade,
+        },
       });
     } catch (error) {
       Logger.error(
@@ -149,7 +156,14 @@ const ReviewOrder = () => {
       setPaymentError(strings('card.review_order.payment_creation_error'));
       setIsCreatingPayment(false);
     }
-  }, [navigate, trackEvent, createEventBuilder, cardSDK, fromUpgrade]);
+  }, [
+    navigate,
+    trackEvent,
+    createEventBuilder,
+    cardSDK,
+    fromUpgrade,
+    isDaimoDemo,
+  ]);
 
   const renderOrderItem = useCallback((item: OrderItem, index: number) => {
     const isTotal = item.label === strings('card.review_order.total');