Commit e5d6249
chore: align card log in screen with new design (MetaMask#24027)
<!--
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**
https://consensyssoftware.atlassian.net/browse/CARD-239
Implement new design for authentication screen
<!--
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:
## **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] -->
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-15 at 12 16 28"
src="https://github.com/user-attachments/assets/bdc6166d-12e2-4676-8dd1-76db6c4e176b"
/>
<img width="1179" height="2556" alt="Simulator Screenshot - E2E Test -
2025-12-15 at 11 48 28"
src="https://github.com/user-attachments/assets/f2b63601-6e5c-4703-827d-17f725a90167"
/>
## **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**
- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> Redesigns the Card login with OnboardingStep and testIDs, updates OTP
resend UX, improves onboarding country defaults, enhances Add Funds swap
copy with chain name, and tightens auth hook error handling and strings.
>
> - **Card Authentication (UI/UX)**:
> - Refactors `CardAuthentication` to use `OnboardingStep`, Tailwind
classes, and testIDs; removes `CardAuthentication.styles`.
> - Updates OTP entry to a single `TextField`, auto-submit at
`CODE_LENGTH`, and adds resend cooldown (“didn’t receive code /
resend”); adjusts error surfacing.
> - Simplifies navigation (login → home/onboarding), adds signup CTA,
and replaces flag/US copy ("United States").
> - **Onboarding improvements**:
> - `SetPhoneNumber`, `PersonalDetails`, `PhysicalAddress`: derive
`selectedCountry` from user/regions when Redux is empty and persist via
`setSelectedCountry`; sync area code/emoji; add `autoComplete="email"`
in `SignUp`.
> - **Add Funds (Bottom Sheet)**:
> - Enriches swap description with chain name via
`mapCaipChainIdToChainName`.
> - `useOpenSwaps`: pass `sourceToken`/`destToken` to `goToSwaps`.
> - **Auth Hook**:
> - Clears errors before actions; sets/clears OTP error/loading around
`sendOtpLogin` and `login`.
> - **Tests**:
> - Update to new UI/testIDs and strings; remove style/CodeField mocks;
add SDK mock where needed; refresh snapshots.
> - **i18n**:
> - Tweaks authentication/OTP strings (titles, US label, resend
messages); updates swap description template.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e9a64ad. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: Bruno Nascimento <bruno.nascimento@consensys.net>1 parent 54c7ee9 commit e5d6249
13 files changed
Lines changed: 706 additions & 1594 deletions
File tree
- app/components/UI/Card
- Views/CardAuthentication
- __snapshots__
- components
- AddFundsBottomSheet
- Onboarding
- hooks
- locales/languages
Lines changed: 0 additions & 88 deletions
This file was deleted.
0 commit comments