feat: Add entry points for Add Wallet modal from account list page #35536
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
metamaskbot
added
the
team-design-system
Comment on lines
+3
to
+17
| // Scroll bar styles | ||
| // Firefox | ||
| scrollbar-width: thin; | ||
| scrollbar-color: var(--color-icon-muted) transparent; | ||
|
|
||
| // Webkit: Chrome, Brave | ||
| ::-webkit-scrollbar { | ||
| width: 8px; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| -webkit-border-radius: 8px; | ||
| border-radius: 8px; | ||
| background: var(--color-icon-muted); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
Add styles for the scroll bar for the <Content /> component
Before / After
Contributor
There was a problem hiding this comment.
@georgewrmarshall thoughts on using only scrollbar-width: none? (it's baseline supported in browsers now)
The home screen (Tokens, NFTs, Activity, etc) don't show a scrollbar anyway already
Collaborator
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (4 files, +130 -20)
🖥️ @MetaMask/wallet-ux (1 files, +15 -0)
|
| </Box> | ||
| <Box paddingLeft={4} paddingRight={4} paddingBottom={4}></Box> | ||
| </Content> | ||
| <Footer className="shadow-sm"> |
Contributor
Author
There was a problem hiding this comment.
Using Footer component to fix the Add Wallet button as per Figma design. Disregard button style it's incorrect in Figma.
| IconName, | ||
| } from '../../../components/component-library'; | ||
| Text, | ||
| } from '@metamask/design-system-react'; |
Contributor
Author
There was a problem hiding this comment.
Updating account list to use latest design system components
Comment on lines
39
to
42
| const [isAddWalletModalOpen, setIsAddWalletModalOpen] = useState(false); | ||
|
|
||
| const handleOpenAddWalletModal = () => { | ||
| setIsAddWalletModalOpen(true); | ||
| }; | ||
|
|
||
| const handleCloseAddWalletModal = () => { | ||
| setIsAddWalletModalOpen(false); | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
Adding open and close add wallet modal logic
Collaborator
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Collaborator
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Collaborator
Builds ready [00a5bbf]
UI Startup Metrics (1227 ± 131 ms)
Benchmark value 25 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 258 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 16 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 35 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 9 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 274 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 15 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1450 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 1254 exceeds gate value 1245 for firefox browserify home mean load Benchmark value 1253 exceeds gate value 1239 for firefox browserify home mean domContentLoaded Benchmark value 114 exceeds gate value 110 for firefox browserify home mean domInteractive Benchmark value 42 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 29 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 13 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1770 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 238 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 111 exceeds gate value 70 for firefox browserify home p95 backgroundConnect Benchmark value 11 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 53 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 110 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 44 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 3 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 289 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 52 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 5 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 370ms | Sum of p95 exceeds: 708.8ms Sum of all benchmark exceeds: 1078.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
7 tasks
georgewrmarshall
commented
Sep 1, 2025
ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx
Outdated
Show resolved
Hide resolved
github-merge-queue bot
pushed a commit
that referenced
this pull request
Sep 2, 2025
…35543) ## **Description** This PR introduces a new dedicated add wallet page (`/add-wallet-page`) for importing private keys and JSON wallets. This addresses the issue where the previous import wallet functionality was not conditionally rendered and had no proper route structure. **Key Changes:** - Creates a new `AddWalletPage` component that wraps the existing `ImportAccount` component - Adds proper routing configuration with `ADD_WALLET_PAGE_ROUTE = '/add-wallet-page'` - Provides a clean navigation experience with back button functionality - Includes comprehensive test coverage for the new page **Future Scope:** This page will eventually handle both SRP and private key account imports, but for now it focuses on private key import functionality only. [](https://codespaces.new/MetaMask/metamask-extension/pull/35543?quickstart=1) ## **Changelog** CHANGELOG entry: Added dedicated add wallet page for private key import with proper routing ## **Related issues** Related to: #35536 ## **Manual testing steps** 1. Run storybook `yarn storybook` or view [storybook PR build](https://diuv6g5fj9pvx.cloudfront.net/metamask-extension/17388655285/storybook-build/index.html?path=/story/pages-multichainaccounts-addwalletpage--default) 2. Navigate to the Add wallet page 3. Ensure UI renders as expected ## **Screenshots/Recordings** ### **Before** - No add wallet page existed, only the import account modal ### **After** - New Add wallet page in storybook https://github.com/user-attachments/assets/244bbce6-e6fc-48fa-962f-e7d017b6bfd6 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.
georgewrmarshall
force-pushed
the
multichain-add-wallet-modal-entry
branch
from
00a5bbf to
4d3be49
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
georgewrmarshall
commented
Sep 2, 2025
| id: 'import-wallet', | ||
| titleKey: 'importAWallet', | ||
| iconName: IconName.Wallet, | ||
| route: IMPORT_SRP_ROUTE, |
Contributor
Author
There was a problem hiding this comment.
TODO: currently the import srp page navigates back to the home page which is annoying if the user wanted to go back to the add wallet modal or account menu page. I'm not sure of the implications of changing history.push(DEFAULT_ROUTE); to history.push(); in the ImportSrp page is but it likely should be in a separate PR and should not block this one.
georgewrmarshall
commented
Sep 2, 2025
Comment on lines
+4
to
+8
| import { | ||
| ADD_WALLET_PAGE_ROUTE, | ||
| CONNECT_HARDWARE_ROUTE, | ||
| IMPORT_SRP_ROUTE, | ||
| } from '../../../helpers/constants/routes'; |
Contributor
Author
There was a problem hiding this comment.
importing routes used in the the add wallet modal
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR integrates the existing Add Wallet modal component into the account list page by adding a footer button that opens the modal with routing functionality. The modal now provides navigation to existing MetaMask import flows for wallets, accounts, and hardware wallets.
Key changes:
- Added Add Wallet button to account list page footer with modal state management
- Connected modal options to appropriate MetaMask routes with navigation logic
- Enhanced modal component with routing functionality and proper hardware wallet handling
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| account-list.tsx | Added Add Wallet button in footer and modal integration with state management |
| account-list.test.tsx | Added test coverage for Add Wallet button functionality and modal opening |
| index.scss | Added custom scrollbar styling for multichain page content |
| add-wallet-modal.tsx | Enhanced modal with routing functionality and hardware wallet navigation logic |
| add-wallet-modal.test.tsx | Added comprehensive test coverage for modal navigation to different routes |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
georgewrmarshall
commented
Sep 2, 2025
Comment on lines
+11
to
+19
| const mockHistoryPush = jest.fn(); | ||
| const mockOpenExtensionInBrowser = jest.fn(); | ||
|
|
||
| jest.mock('react-router-dom', () => ({ | ||
| ...jest.requireActual('react-router-dom'), | ||
| useHistory: () => ({ | ||
| push: mockHistoryPush, | ||
| }), | ||
| })); |
Contributor
Author
There was a problem hiding this comment.
Mocking react router dom useHistory and opening the extension in browser for back button and import hardware wallet which doesn't have a popup view
Collaborator
Builds ready [b86ab27]
UI Startup Metrics (1205 ± 53 ms)
Benchmark value 25 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 260 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 12 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 33 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 65 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 271 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 9 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 33 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 206 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 74 exceeds gate value 70 for firefox browserify home p95 backgroundConnect Benchmark value 10 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 30 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 109 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 32 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 45 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 249 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 55 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 11 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 287ms | Sum of p95 exceeds: 471.8ms Sum of all benchmark exceeds: 758.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
14 tasks
david0xd
reviewed
Sep 2, 2025
ui/pages/multichain-accounts/account-list/account-list.test.tsx
Outdated
Show resolved
Hide resolved
Collaborator
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
georgewrmarshall
commented
Sep 2, 2025
Comment on lines
-66
to
-72
| localeMessages: { | ||
| currentLocale: 'en', | ||
| current: { | ||
| back: 'Back', | ||
| accounts: 'Accounts', | ||
| }, | ||
| }, |
Contributor
Author
There was a problem hiding this comment.
Removing unneeded mocked locales
Collaborator
Builds ready [539d60b]
UI Startup Metrics (1260 ± 57 ms)
Benchmark value 1090 exceeds gate value 1070 for chrome browserify home mean load Benchmark value 1082 exceeds gate value 1061 for chrome browserify home mean domContentLoaded Benchmark value 251 exceeds gate value 10 for chrome browserify home mean backgroundConnect Benchmark value 26 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 839 exceeds gate value 830 for chrome browserify home mean loadScripts Benchmark value 268 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 13 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 31 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 2569 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 281 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 10 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 32 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 227 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 8 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 107 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 34 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 45 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 265 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 7 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 366ms | Sum of p95 exceeds: 618.8ms Sum of all benchmark exceeds: 984.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
david0xd
approved these changes
Sep 2, 2025
georgewrmarshall
force-pushed
the
multichain-add-wallet-modal-entry
branch
from
539d60b to
1be1132
Compare
Collaborator
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Collaborator
Builds ready [1be1132]
UI Startup Metrics (1273 ± 67 ms)
Benchmark value 1108 exceeds gate value 1070 for chrome browserify home mean load Benchmark value 1099 exceeds gate value 1061 for chrome browserify home mean domContentLoaded Benchmark value 809 exceeds gate value 800 for chrome browserify home mean firstPaint Benchmark value 259 exceeds gate value 10 for chrome browserify home mean backgroundConnect Benchmark value 25 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 16 exceeds gate value 15 for chrome browserify home mean getState Benchmark value 7 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 850 exceeds gate value 830 for chrome browserify home mean loadScripts Benchmark value 1367 exceeds gate value 1365 for chrome browserify home p95 uiStartup Benchmark value 1204 exceeds gate value 1190 for chrome browserify home p95 load Benchmark value 1187 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded Benchmark value 1192 exceeds gate value 1180 for chrome browserify home p95 firstPaint Benchmark value 274 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 40 exceeds gate value 33 for chrome browserify home p95 getState Benchmark value 34 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 22 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 34 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 285 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 8 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 32 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 27 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 227 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 25 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 15 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 36 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 105 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 34 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 45 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 284 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 53 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 9 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 33 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 446ms | Sum of p95 exceeds: 624.8ms Sum of all benchmark exceeds: 1070.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
approved these changes
Sep 2, 2025
Comment on lines
+3
to
+17
| // Scroll bar styles | ||
| // Firefox | ||
| scrollbar-width: thin; | ||
| scrollbar-color: var(--color-icon-muted) transparent; | ||
|
|
||
| // Webkit: Chrome, Brave | ||
| ::-webkit-scrollbar { | ||
| width: 8px; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| -webkit-border-radius: 8px; | ||
| border-radius: 8px; | ||
| background: var(--color-icon-muted); | ||
| } |
Contributor
There was a problem hiding this comment.
@georgewrmarshall thoughts on using only scrollbar-width: none? (it's baseline supported in browsers now)
The home screen (Tokens, NFTs, Activity, etc) don't show a scrollbar anyway already
Comment on lines
-66
to
-72
| localeMessages: { | ||
| currentLocale: 'en', | ||
| current: { | ||
| back: 'Back', | ||
| accounts: 'Accounts', | ||
| }, | ||
| }, |
metamaskbot
added
the
release-13.4.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
](https://codespaces.new/MetaMask/metamask-extension/pull/35543?quickstart=1){kind=link}
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds functional entry points for the Add Wallet modal component from the main account list page. The modal was previously created but not integrated into the user interface. This change provides users with a centralized way to access wallet and account import functionality.
What is the reason for the change?
The Add Wallet modal component existed but was not accessible from the main account list UI, preventing users from easily discovering and using wallet/account import features.
What is the improvement/solution?
Changelog
CHANGELOG entry: Added Add Wallet button to account list page that opens modal with import options
Related issues
Fixes: N/A - This is a feature enhancement for existing modal component
Manual testing steps
Screenshots/Recordings
Before
After
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist