From 1d4a6666dff5e9fef8f487d5ca6b76d9dcc8d20f Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 8 Feb 2024 22:02:13 +0530 Subject: [PATCH 001/113] Update version of ppom-validator (#22868) --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 28f7848a17b3..cf344e0e3c43 100644 --- a/package.json +++ b/package.json @@ -284,7 +284,7 @@ "@metamask/phishing-controller": "^8.0.0", "@metamask/polling-controller": "^4.0.0", "@metamask/post-message-stream": "^7.0.0", - "@metamask/ppom-validator": "^0.22.0", + "@metamask/ppom-validator": "^0.24.0", "@metamask/providers": "^14.0.2", "@metamask/queued-request-controller": "^0.3.0", "@metamask/rate-limit-controller": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index e4a492551786..115843f25d11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4572,9 +4572,9 @@ __metadata: languageName: node linkType: hard -"@metamask/ppom-validator@npm:^0.22.0": - version: 0.22.0 - resolution: "@metamask/ppom-validator@npm:0.22.0" +"@metamask/ppom-validator@npm:^0.24.0": + version: 0.24.0 + resolution: "@metamask/ppom-validator@npm:0.24.0" dependencies: "@metamask/base-controller": "npm:^3.0.0" "@metamask/controller-utils": "npm:^8.0.1" @@ -4584,7 +4584,7 @@ __metadata: elliptic: "npm:^6.5.4" eslint-plugin-n: "npm:^16.6.2" json-rpc-random-id: "npm:^1.0.1" - checksum: b353c9a24a35972a05f75daf0b438d368e6f154145cfc02be217d335309cec0d94c51da78bbe6aadb4f6dbcbaea97dc3b2f561e3b5dbe053063a7a81190a8b26 + checksum: cb488ccaffd119820536450519a0fffbdcb710a082de05a26d7e8a0f782b3024a747c36c5f16b9ca84343a0b234d3d0ebfd3e493bcb858e966129a3f40d218a0 languageName: node linkType: hard @@ -24048,7 +24048,7 @@ __metadata: "@metamask/phishing-warning": "npm:^3.0.3" "@metamask/polling-controller": "npm:^4.0.0" "@metamask/post-message-stream": "npm:^7.0.0" - "@metamask/ppom-validator": "npm:^0.22.0" + "@metamask/ppom-validator": "npm:^0.24.0" "@metamask/providers": "npm:^14.0.2" "@metamask/queued-request-controller": "npm:^0.3.0" "@metamask/rate-limit-controller": "npm:^3.0.0" From 3ac678497ab85125b1ca9d5804fe61d95c55da07 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Thu, 8 Feb 2024 22:33:58 +0530 Subject: [PATCH 002/113] UX: Show names for the accounts in Send Flow (#22824) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is to show the account name when the user search for an account . ## **Related issues** Fixes: ## **Manual testing steps** 1. Run extension via MULTICHAIN=1 yarn start 2. Go to send flow 3. search for ens account, test.eth 4. Look both the account name and address shows up ## **Screenshots/Recordings** ### **Before** ![Screenshot 2024-02-06 at 3 45 59 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/9a44a1cd-50c8-4bf2-84fc-f517d47597b7) ### **After** ![Screenshot 2024-02-06 at 3 44 32 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/6f88067b-efa2-415a-862b-bcd43f9f4e27) ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [ ] I've included manual testing steps - [ ] I've included screenshots/recordings if applicable - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [ ] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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. --- test/e2e/tests/address-book.spec.js | 9 +- .../address-list-item.test.tsx.snap | 121 ++++++++++++++++++ .../address-list-item.stories.tsx | 3 +- .../address-list-item.test.tsx | 4 +- .../address-list-item/address-list-item.tsx | 13 +- .../pages/send/components/recipient.tsx | 7 +- 6 files changed, 142 insertions(+), 15 deletions(-) create mode 100644 ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap diff --git a/test/e2e/tests/address-book.spec.js b/test/e2e/tests/address-book.spec.js index 0bf35bbc82f2..25f69afb1d06 100644 --- a/test/e2e/tests/address-book.spec.js +++ b/test/e2e/tests/address-book.spec.js @@ -99,7 +99,14 @@ describe('Address Book', function () { ); await driver.clickElement({ text: 'Settings', tag: 'div' }); await driver.clickElement({ text: 'Contacts', tag: 'div' }); - await driver.clickElement({ text: 'Test Name 1', tag: 'p' }); + if (process.env.MULTICHAIN) { + await driver.clickElement({ + text: 'Test Name 1', + css: '.address-list-item__label', + }); + } else { + await driver.clickElement({ text: 'Test Name 1', tag: 'p' }); + } await driver.clickElement({ text: 'Edit', tag: 'button' }); const inputUsername = await driver.findElement('#nickname'); diff --git a/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap b/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap new file mode 100644 index 000000000000..54b734d158cd --- /dev/null +++ b/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap @@ -0,0 +1,121 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddressListItem renders the address and label 1`] = ` +
+ +
+`; diff --git a/ui/components/multichain/address-list-item/address-list-item.stories.tsx b/ui/components/multichain/address-list-item/address-list-item.stories.tsx index 409942f8f7b3..483d9a73efeb 100644 --- a/ui/components/multichain/address-list-item/address-list-item.stories.tsx +++ b/ui/components/multichain/address-list-item/address-list-item.stories.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import Confusable from '../../ui/confusable'; import { Box } from '../../component-library'; import { AddressListItem } from '.'; @@ -55,4 +54,4 @@ export const ConfusableStory = (args) => ( ); ConfusableStory.storyName = 'Confusable'; -ConfusableStory.args = { label: }; +ConfusableStory.args = { label: '👻.eth' }; diff --git a/ui/components/multichain/address-list-item/address-list-item.test.tsx b/ui/components/multichain/address-list-item/address-list-item.test.tsx index 034cd4a7012e..9f34e5f940bd 100644 --- a/ui/components/multichain/address-list-item/address-list-item.test.tsx +++ b/ui/components/multichain/address-list-item/address-list-item.test.tsx @@ -24,10 +24,10 @@ const render = () => { describe('AddressListItem', () => { it('renders the address and label', () => { - const { getByText } = render(); + const { getByText, container } = render(); + expect(container).toMatchSnapshot(); expect(getByText(shortenAddress(SAMPLE_ADDRESS))).toBeInTheDocument(); - expect(getByText(SAMPLE_LABEL)).toBeInTheDocument(); }); it('fires onClick when the item is clicked', () => { diff --git a/ui/components/multichain/address-list-item/address-list-item.tsx b/ui/components/multichain/address-list-item/address-list-item.tsx index 4275acdc14e7..fd73e33524dc 100644 --- a/ui/components/multichain/address-list-item/address-list-item.tsx +++ b/ui/components/multichain/address-list-item/address-list-item.tsx @@ -1,6 +1,6 @@ -import React, { ReactChild } from 'react'; - +import React from 'react'; import { useSelector } from 'react-redux'; +import Confusable from '../../ui/confusable'; import { AvatarAccount, Box, @@ -17,20 +17,21 @@ import { BlockSize, BackgroundColor, TextColor, + AlignItems, } from '../../../helpers/constants/design-system'; import { getUseBlockie } from '../../../selectors'; import { shortenAddress } from '../../../helpers/utils/util'; import Tooltip from '../../ui/tooltip'; interface AddressListItemProps { - label: string | ReactChild; address: string; + label: string; onClick: () => void; } export const AddressListItem = ({ - label, address, + label, onClick, }: AddressListItemProps) => { const useBlockie = useSelector(getUseBlockie); @@ -47,6 +48,7 @@ export const AddressListItem = ({ width={BlockSize.Full} backgroundColor={BackgroundColor.transparent} className="address-list-item" + alignItems={AlignItems.center} > - {label} + {label ? : shortenAddress(address)} } + label={nickname} onClick={() => { dispatch( addHistoryEntry( @@ -55,7 +54,7 @@ export const SendPageRecipient = () => { const dispatch = useDispatch(); const recipient = useSelector(getRecipient); - const userInput = useSelector(getRecipientUserInput); + const userInput = useSelector(getRecipientUserInput) || ''; const domainResolution = useSelector(getDomainResolution); const domainError = useSelector(getDomainError); @@ -85,7 +84,7 @@ export const SendPageRecipient = () => { } else if (domainResolution && !recipient.error) { contents = renderExplicitAddress( domainResolution, - addressBookEntryName ?? userInput, + addressBookEntryName || userInput, 'ENS resolution', dispatch, ); From 0b52d3d1e20a466612d31a6cb2f5039480170eda Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Thu, 8 Feb 2024 22:34:09 +0530 Subject: [PATCH 003/113] UX Multichain: Updated app header account picker and address button (#22637) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is to update the following changes in App-Header: 1. In the Account Picker, - Updated the AvatarSize - Removed address since address now has a copy button 2. Updated Adress text and copy button 3. I have also removed the copy button which was earlier introduced to remove connections icon for Multichain. ## **Related issues** Fixes: [1816](https://github.com/MetaMask/MetaMask-planning/issues/1816) ## **Manual testing steps** 1. Run extension with `MULTICHAIN=1 yarn start` 2. Check for copy button under the account picker ## **Screenshots/Recordings** ### **Before** ![Screenshot 2024-01-23 at 4 36 18 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/d45b627a-f33d-42c8-947f-4727bc796ae4) ### **After** #### Full Screen ![Screenshot 2024-01-23 at 4 35 14 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/c7254af3-aec3-45b5-84fa-cf420af2737c) #### Extension View ![Screenshot 2024-01-23 at 4 35 29 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/f804f54c-4415-4487-9a04-7bbb5df85ae4) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [ ] I've linked related issues - [x] I've included manual testing steps - [x] I've included screenshots/recordings if applicable - [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/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. - [x] I’ve properly set the pull request status: - [x] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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. --- .../tests/account-menu/add-account.spec.js | 30 +--- test/e2e/tests/import-flow.spec.js | 5 +- .../app/wallet-overview/wallet-overview.js | 17 +-- .../__snapshots__/account-picker.test.js.snap | 10 +- .../account-picker/account-picker.js | 32 +--- .../account-picker/account-picker.test.js | 5 - .../__snapshots__/app-header.test.js.snap | 128 ++++++++++------ .../multichain/app-header/app-header.js | 138 +++++++++++------- .../multichain/app-header/index.scss | 14 +- .../send/__snapshots__/send.test.js.snap | 39 +++-- .../account-picker.test.tsx.snap | 36 ++--- 11 files changed, 227 insertions(+), 227 deletions(-) diff --git a/test/e2e/tests/account-menu/add-account.spec.js b/test/e2e/tests/account-menu/add-account.spec.js index dd4c76a931bf..7ccc8a2f7bde 100644 --- a/test/e2e/tests/account-menu/add-account.spec.js +++ b/test/e2e/tests/account-menu/add-account.spec.js @@ -13,10 +13,8 @@ const { } = require('../../helpers'); const FixtureBuilder = require('../../fixture-builder'); -const { shortenAddress } = require('../../../../ui/helpers/utils/util'); describe('Add account', function () { - const firstAccount = '0x0Cc5261AB8cE458dc977078A3623E2BaDD27afD3'; const secondAccount = '0x3ED0eE22E0685Ebbf07b2360A8331693c413CC59'; const ganacheOptions = generateGanacheOptions({ @@ -74,12 +72,7 @@ describe('Add account', function () { // Check address of 1st account await waitForAccountRendered(driver); - await driver.findElement({ - css: process.env.MULTICHAIN - ? '.multichain-account-picker-container p' - : '.multichain-address-copy-button', - text: shortenAddress(firstAccount), - }); + await driver.findElement('[data-testid="app-header-copy-button"]'); // Create 2nd account await driver.clickElement('[data-testid="account-menu-icon"]'); @@ -94,12 +87,7 @@ describe('Add account', function () { // Check address of 2nd account await waitForAccountRendered(driver); - await driver.findElement({ - css: process.env.MULTICHAIN - ? '.multichain-account-picker-container p' - : '.multichain-address-copy-button', - text: shortenAddress(secondAccount), - }); + await driver.findElement('[data-testid="app-header-copy-button"]'); // Log into the account with balance(account 1) // and transfer some balance to 2nd account @@ -148,12 +136,7 @@ describe('Add account', function () { } // Check address of 1st account - await driver.findElement({ - css: process.env.MULTICHAIN - ? '.multichain-account-picker-container p' - : '.multichain-address-copy-button', - text: shortenAddress(firstAccount), - }); + await driver.findElement('[data-testid="app-header-copy-button"]'); // Check address of 2nd account await driver.clickElement('[data-testid="account-menu-icon"]'); @@ -162,12 +145,7 @@ describe('Add account', function () { text: 'Account 2', }); - await driver.findElement({ - css: process.env.MULTICHAIN - ? '.multichain-account-picker-container p' - : '.multichain-address-copy-button', - text: shortenAddress(secondAccount), - }); + await driver.findElement('[data-testid="app-header-copy-button"]'); }, ); }); diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js index 68e97e7002c3..c83ea7b3823c 100644 --- a/test/e2e/tests/import-flow.spec.js +++ b/test/e2e/tests/import-flow.spec.js @@ -70,10 +70,7 @@ describe('Import flow @no-mmi', function () { '[data-testid="account-details-modal"]', ); // shows the correct account address - await driver.findElement({ - css: '.multichain-address-copy-button', - text: '0x0Cc52...7afD3', - }); + await driver.findElement('[data-testid="app-header-copy-button"]'); await driver.clickElement('button[aria-label="Close"]'); await driver.waitForElementNotPresent( diff --git a/ui/components/app/wallet-overview/wallet-overview.js b/ui/components/app/wallet-overview/wallet-overview.js index f9d9f7b7bdd6..4288ca97d57d 100644 --- a/ui/components/app/wallet-overview/wallet-overview.js +++ b/ui/components/app/wallet-overview/wallet-overview.js @@ -2,23 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useSelector } from 'react-redux'; -import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { getSelectedInternalAccount } from '../../../selectors'; -import { AddressCopyButton } from '../../multichain'; -import Box from '../../ui/box/box'; import { IconName, Tag } from '../../component-library'; import { Color, TextVariant } from '../../../helpers/constants/design-system'; import { KeyringType } from '../../../../shared/constants/keyring'; import { getAccountLabel } from '../../../helpers/utils/accounts'; -const WalletOverview = ({ - balance, - buttons, - className, - showAddress = false, -}) => { +const WalletOverview = ({ balance, buttons, className }) => { const selectedAccount = useSelector(getSelectedInternalAccount); - const checksummedAddress = toChecksumHexAddress(selectedAccount.address); const { keyring } = selectedAccount.metadata; const label = selectedAccount.metadata.snap?.name ? getAccountLabel(keyring.type, selectedAccount) @@ -26,11 +17,6 @@ const WalletOverview = ({ return (
- {showAddress ? ( - - - - ) : null} {balance} {label ? (
-
+ +