From 8646a76227d24ed8742ef5b076c172c4ba944c39 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 13 Oct 2023 01:46:57 -0700 Subject: [PATCH 001/121] Picker network updates (#21301) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** In the [new designs for Amon Hen](https://github.com/MetaMask/metamask-extension/pull/21220/files#diff-afc7617dc1347d665d4f7a058e9ea8ac686f5ad520874a293f6e27e7c50f9568) the network picker(`PickerNetwork`) has been moved to inside of the tabs and needs to be full width. The current `PickerNetwork` requires some style updates to allow for this change This PR updates the `PickerNetwork` component styles and props to allow for this updated design. It uses the pattern of inversion of control to allow for the label wrapper component to be accessed through a prop called `labelProps`. It also updates the unit tests to include coverage for this change as well as updates the documentation and stories to provide examples. ## **Manual testing steps** 1. Go to the storybook build of this PR 2. Search `PickerNetwork` 3. See that there are no visual regressions 4. Check the updated documentation and Width story ## **Screenshots/Recordings** ### **Before** https://github.com/MetaMask/metamask-extension/assets/8112138/7ca4f2ea-63fb-4e12-a3ab-34e8890bbbfc ### **After** https://github.com/MetaMask/metamask-extension/assets/8112138/22036bca-7ebd-418d-8fae-c15f055bab0c Other instances of `PickerNetwork` without visual regressions Screenshot 2023-10-10 at 10 29 55 PMScreenshot 2023-10-10 at 7 54 53 PM Showing new-network-info modal with some deprecated components replaced and flex box added Screenshot 2023-10-11 at 3 12 43 PM Screenshot 2023-10-10 at 9 53 33 PM Screenshot 2023-10-10 at 10 29 24 PM Test coverage 100% Screenshot 2023-10-10 at 6 41 48 PM ## **Related issues** https://github.com/MetaMask/metamask-extension/pull/21220/files#diff-afc7617dc1347d665d4f7a058e9ea8ac686f5ad520874a293f6e27e7c50f9568 ## **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: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [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)). - [ ] 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/add-custom-network.spec.js | 2 +- test/e2e/tests/custom-rpc-history.spec.js | 2 +- test/e2e/tests/switch-custom-network.spec.js | 2 +- .../picker-network/README.mdx | 31 ++++++++++++++--- .../picker-network.test.tsx.snap | 6 ++-- .../picker-network/picker-network.scss | 1 - .../picker-network/picker-network.stories.tsx | 33 +++++++++++++++---- .../picker-network/picker-network.test.tsx | 13 ++++++++ .../picker-network/picker-network.tsx | 4 ++- .../picker-network/picker-network.types.ts | 5 +++ .../__snapshots__/app-header.test.js.snap | 6 ++-- .../ui/new-network-info/new-network-info.js | 10 ++++-- .../new-network-info.stories.js | 10 ++++++ 13 files changed, 99 insertions(+), 26 deletions(-) create mode 100644 ui/components/ui/new-network-info/new-network-info.stories.js diff --git a/test/e2e/tests/add-custom-network.spec.js b/test/e2e/tests/add-custom-network.spec.js index 82233d09b34b..c4c3c3c1a31c 100644 --- a/test/e2e/tests/add-custom-network.spec.js +++ b/test/e2e/tests/add-custom-network.spec.js @@ -458,7 +458,7 @@ describe('Custom network', function () { }); // verify network switched const networkDisplayed = await driver.findElement({ - tag: 'p', + tag: 'span', text: 'Arbitrum One', }); assert.equal( diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js index 46bde39df39e..93709a98817b 100644 --- a/test/e2e/tests/custom-rpc-history.spec.js +++ b/test/e2e/tests/custom-rpc-history.spec.js @@ -70,7 +70,7 @@ describe('Stores custom RPC history', function () { '.networks-tab__add-network-form-footer .btn-primary', ); - await driver.findElement({ text: networkName, tag: 'p' }); + await driver.findElement({ text: networkName, tag: 'span' }); }, ); }); diff --git a/test/e2e/tests/switch-custom-network.spec.js b/test/e2e/tests/switch-custom-network.spec.js index 67c3ad1fc5d8..ca40232d13a4 100644 --- a/test/e2e/tests/switch-custom-network.spec.js +++ b/test/e2e/tests/switch-custom-network.spec.js @@ -88,7 +88,7 @@ describe('Switch ethereum chain', function () { await driver.switchToWindow(extension); const currentNetworkName = await driver.findElement({ - tag: 'p', + tag: 'span', text: 'Localhost 8546', }); diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx index 2e31576f8f8b..74481d251a95 100644 --- a/ui/components/component-library/picker-network/README.mdx +++ b/ui/components/component-library/picker-network/README.mdx @@ -16,7 +16,7 @@ The `PickerNetwork` is used for the action of changing a network. ### Label -Use the `label` prop for the text content of the `PickerNetwork` component. For long labels set a `max-width` using a `className` and the text will truncate showing an ellipsis. +Use the `label` prop for the text content of the `PickerNetwork` component. For long labels set a `max-width` using a `className` and the text will truncate showing an ellipsis. If the `src` prop is not set, the `label` prop will be used to generate fallback initial for `AvatarNetwork`. @@ -24,6 +24,7 @@ Use the `label` prop for the text content of the `PickerNetwork` component. For ```jsx import { PickerNetwork } from '../../ui/component-library'; + @@ -32,7 +33,7 @@ import { PickerNetwork } from '../../ui/component-library'; ### Src -Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component. +Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component. If the `src` prop is not set, the `label` prop will be used to generate fallback initial for `AvatarNetwork`. @@ -40,7 +41,27 @@ Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `ava ```jsx import { PickerNetwork } from '../../ui/component-library'; - - - + + + +``` + +### Width + +The width of the `PickerNetwork` is set to auto by default. Use the style utility `width` prop with the `BlockSize` enum to set the width of the `PickerNetwork` component. + + + + + +```jsx +import { PickerNetwork } from '../../ui/component-library'; +import { BlockSize } from '../../../helpers/constants/design-system'; + +; +; ``` diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap index 2b2226998a18..0827e30f349a 100644 --- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap +++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap @@ -11,13 +11,13 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = ` > I -

Imported -

+ diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss index 1e2e58cf083e..72fba5d389d6 100644 --- a/ui/components/component-library/picker-network/picker-network.scss +++ b/ui/components/component-library/picker-network/picker-network.scss @@ -1,7 +1,6 @@ .mm-picker-network { --picker-network-height: 32px; - max-width: fit-content; height: var(--picker-network-height); &:active { diff --git a/ui/components/component-library/picker-network/picker-network.stories.tsx b/ui/components/component-library/picker-network/picker-network.stories.tsx index be2629223525..91536945bc1c 100644 --- a/ui/components/component-library/picker-network/picker-network.stories.tsx +++ b/ui/components/component-library/picker-network/picker-network.stories.tsx @@ -3,6 +3,7 @@ import { StoryFn, Meta } from '@storybook/react'; import { Display, FlexDirection, + BlockSize, } from '../../../helpers/constants/design-system'; import { Box } from '..'; @@ -31,15 +32,24 @@ export default { }, } as Meta; -export const DefaultStory = (args) => ; +const Template = (args) => ; + +export const DefaultStory = Template.bind({}); +DefaultStory.storyName = 'Default'; export const Label: StoryFn = (args) => ( - - - - + + + + + @@ -47,7 +57,11 @@ export const Label: StoryFn = (args) => ( ); export const Src: StoryFn = (args) => ( - + = (args) => ( ); -DefaultStory.storyName = 'Default'; +export const Width: StoryFn = (args) => ( + <> + + + +); diff --git a/ui/components/component-library/picker-network/picker-network.test.tsx b/ui/components/component-library/picker-network/picker-network.test.tsx index f0a5da9d4d2c..a942276c4ab0 100644 --- a/ui/components/component-library/picker-network/picker-network.test.tsx +++ b/ui/components/component-library/picker-network/picker-network.test.tsx @@ -65,4 +65,17 @@ describe('PickerNetwork', () => { ); expect(getByTestId('picker-network')).toHaveClass('test-class'); }); + it('should render with labelProps', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('picker-network-label')).toHaveClass('test-class'); + }); }); diff --git a/ui/components/component-library/picker-network/picker-network.tsx b/ui/components/component-library/picker-network/picker-network.tsx index 282269b00b8d..fd2a2a78b8bc 100644 --- a/ui/components/component-library/picker-network/picker-network.tsx +++ b/ui/components/component-library/picker-network/picker-network.tsx @@ -30,6 +30,7 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef( avatarNetworkProps, iconProps, label, + labelProps, src, ...props }: PickerNetworkProps, @@ -56,7 +57,7 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef( size={AvatarNetworkSize.Xs} {...avatarNetworkProps} /> - + {label} diff --git a/ui/components/component-library/picker-network/picker-network.types.ts b/ui/components/component-library/picker-network/picker-network.types.ts index 48d97be43c9d..4946f38ad4f4 100644 --- a/ui/components/component-library/picker-network/picker-network.types.ts +++ b/ui/components/component-library/picker-network/picker-network.types.ts @@ -4,6 +4,7 @@ import type { } from '../box'; import { IconProps } from '../icon/icon.types'; import { AvatarNetworkProps } from '../avatar-network/avatar-network.types'; +import { TextProps } from '../text'; export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps { /** @@ -26,6 +27,10 @@ export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps { * The text content of the PickerNetwork component */ label: string; + /** + * Additional props to pass to the label wrapper Text component + */ + labelProps?: TextProps<'span'>; } export type PickerNetworkProps = diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap index 67d265f76e1e..f27c1db843a3 100644 --- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap +++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap @@ -216,13 +216,13 @@ exports[`App Header should match snapshot 1`] = ` > C -

Chain 5 -

+ diff --git a/ui/components/ui/new-network-info/new-network-info.js b/ui/components/ui/new-network-info/new-network-info.js index fac443c44c00..ab58bbced971 100644 --- a/ui/components/ui/new-network-info/new-network-info.js +++ b/ui/components/ui/new-network-info/new-network-info.js @@ -9,6 +9,7 @@ import { AlignItems, Color, Display, + FlexDirection, FontWeight, TextAlign, TextVariant, @@ -16,8 +17,7 @@ import { import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; import { getCurrentNetwork, getUseTokenDetection } from '../../../selectors'; import { setFirstTimeUsedNetwork } from '../../../store/actions'; -import { PickerNetwork, Text } from '../../component-library'; -import Box from '../box'; +import { PickerNetwork, Text, Box } from '../../component-library'; import Button from '../button'; import Popover from '../popover'; @@ -78,7 +78,11 @@ export default function NewNetworkInfo() { } > - + ; + +DefaultStory.storyName = 'Default'; From 69316d21144024b4e20d52524967e99d8692f3e2 Mon Sep 17 00:00:00 2001 From: Monte Lai Date: Fri, 13 Oct 2023 19:35:39 +0800 Subject: [PATCH 002/121] Add `data-testid` for toggle button (#21337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR adds the prop `dataTestId` to the `ToggleButton` for easier testing. ## **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: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [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)). - [x] I’ve properly set the pull request status: - [ ] 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. --------- Co-authored-by: Gauthier Petetin Co-authored-by: Brad Decker Co-authored-by: Marina Boboc <120041701+benjisclowder@users.noreply.github.com> Co-authored-by: Peter <53189696+PeterYinusa@users.noreply.github.com> Co-authored-by: Daniel Rocha <68558152+danroc@users.noreply.github.com> Co-authored-by: Howard Braham Co-authored-by: António Regadas Co-authored-by: Gustavo Antunes <17601467+gantunesr@users.noreply.github.com> --- .../toggle-button/toggle-button.component.js | 17 ++++- .../experimental-tab.test.js.snap | 64 +++++++++---------- .../experimental-tab.component.js | 29 ++++----- .../experimental-tab/experimental-tab.test.js | 19 +++++- 4 files changed, 78 insertions(+), 51 deletions(-) diff --git a/ui/components/ui/toggle-button/toggle-button.component.js b/ui/components/ui/toggle-button/toggle-button.component.js index c14cdbcef2c5..b6966ada856f 100644 --- a/ui/components/ui/toggle-button/toggle-button.component.js +++ b/ui/components/ui/toggle-button/toggle-button.component.js @@ -47,7 +47,15 @@ const colors = { }; const ToggleButton = (props) => { - const { value, onToggle, offLabel, onLabel, disabled, className } = props; + const { + value, + onToggle, + offLabel, + onLabel, + disabled, + className, + dataTestId, + } = props; const modifier = value ? 'on' : 'off'; @@ -77,6 +85,9 @@ const ToggleButton = (props) => { thumbStyle={thumbStyle} thumbAnimateRange={[3, 18]} colors={colors} + passThroughInputProps={{ + 'data-testId': dataTestId, + }} />
{offLabel} @@ -111,6 +122,10 @@ ToggleButton.propTypes = { * Additional className to add to the ToggleButton */ className: PropTypes.string, + /** + * A test id for the toggle button + */ + dataTestId: PropTypes.string, }; export default ToggleButton; diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap index 4c5b019af7bd..e357dc7cad5e 100644 --- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap +++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap @@ -208,52 +208,48 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component > Enable "Add account Snap (Beta)" -
-
{ expect(setTransactionSecurityCheckEnabled).toHaveBeenCalledWith(true); expect(setSecurityAlertsEnabled).toHaveBeenCalledWith(false); }); + + it('should enable add account snap', async () => { + const setAddSnapAccountEnabled = jest.fn(); + const { getByTestId } = render( + { desktopEnabled: true }, + { + setAddSnapAccountEnabled, + }, + ); + + const toggle = getByTestId('add-snap-account-toggle'); + fireEvent.click(toggle); + + await waitFor(() => { + expect(setAddSnapAccountEnabled).toHaveBeenCalledWith(true); + }); + }); }); From 8235fa208cb563d42e6b24e96f0288f8200eb16e Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 13 Oct 2023 07:58:19 -0500 Subject: [PATCH 003/121] UX: Multichain: Use contants for AssetListConversionButton variants (#21333) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Since we're expecting one of three strings for the variant of `AssetListConversionButton`, we should make those keys a constant to be imported and used. ## **Manual testing steps** No functional change. ## **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. - [ ] How this problem was solved. - [ ] How reviewers can test my changes. - [ ] I’ve indicated what issue this PR is linked to: Fixes #??? - [ ] I’ve included tests if applicable. - [ ] I’ve documented any added code. - [ ] 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)). - [ ] 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. --- ui/components/app/asset-list/asset-list.js | 5 +++-- ui/components/app/nfts-tab/nfts-tab.js | 3 ++- .../asset-list-conversion-button.js | 16 ++++++++++++---- .../asset-list-conversion-button.stories.js | 7 +++++-- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 7ce813f4ce6b..11fc1e961df7 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -38,6 +38,7 @@ import { Display } from '../../../helpers/constants/design-system'; import { ReceiveModal } from '../../multichain/receive-modal'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; +import { ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES } from '../../multichain/asset-list-conversion-button/asset-list-conversion-button'; const AssetList = ({ onClickAsset }) => { const [showDetectedTokens, setShowDetectedTokens] = useState(false); @@ -115,7 +116,7 @@ const AssetList = ({ onClickAsset }) => { > {shouldShowBuy ? ( { openBuyCryptoInPdapp(); trackEvent({ @@ -133,7 +134,7 @@ const AssetList = ({ onClickAsset }) => { ) : null} {shouldShowReceive ? ( setShowReceiveModal(true)} /> ) : null} diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js index 80adfc62a8be..66a8c1056b54 100644 --- a/ui/components/app/nfts-tab/nfts-tab.js +++ b/ui/components/app/nfts-tab/nfts-tab.js @@ -25,6 +25,7 @@ import { Box, ButtonLink, IconName, Text } from '../../component-library'; import NFTsDetectionNoticeNFTsTab from '../nfts-detection-notice-nfts-tab/nfts-detection-notice-nfts-tab'; import NftsItems from '../nfts-items'; import { AssetListConversionButton } from '../../multichain'; +import { ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES } from '../../multichain/asset-list-conversion-button/asset-list-conversion-button'; export default function NftsTab() { const useNftDetection = useSelector(getUseNftDetection); @@ -76,7 +77,7 @@ export default function NftsTab() { paddingTop={4} > global.platform.openTab({ url: ZENDESK_URLS.NFT_TOKENS }) } diff --git a/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.js b/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.js index 8869daafe2ae..349bce53c44e 100644 --- a/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.js +++ b/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.js @@ -10,20 +10,26 @@ import { import { useI18nContext } from '../../../hooks/useI18nContext'; +export const ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES = { + BUY: 'buy', + RECEIVE: 'receive', + NFT: 'nft', +}; + const ASSET_LIST_CONVERSION_BUTTON_VARIANTS = { - buy: { + [ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES.BUY]: { color: 'var(--color-info-default)', backgroundImage: 'url(/images/token-list-buy-background.png)', text: 'buy', icon: IconName.Add, }, - receive: { + [ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES.RECEIVE]: { color: 'var(--color-flask-default)', backgroundImage: 'url(/images/token-list-receive-background.png)', text: 'receive', icon: IconName.Arrow2Down, }, - nft: { + [ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES.NFT]: { color: 'var(--color-error-alternative)', backgroundImage: 'url(/images/token-list-nfts-background.png)', text: 'nftLearnMore', @@ -78,5 +84,7 @@ AssetListConversionButton.propTypes = { /** * Text within the button body */ - variant: PropTypes.oneOf(['buy', 'receive', 'nft']), + variant: PropTypes.oneOf( + Object.values(ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES), + ), }; diff --git a/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.stories.js b/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.stories.js index 4bf7248073ba..b505b01ccfb4 100644 --- a/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.stories.js +++ b/ui/components/multichain/asset-list-conversion-button/asset-list-conversion-button.stories.js @@ -1,4 +1,5 @@ import React from 'react'; +import { ASSET_LIST_CONVERSION_BUTTON_VARIANT_TYPES } from './asset-list-conversion-button'; import { AssetListConversionButton } from '.'; export default { @@ -12,7 +13,6 @@ export default { args: { variant: 'buy', onClick: () => undefined, - onClose: () => undefined, }, }; @@ -20,6 +20,9 @@ export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; export const ReceiveStory = (args) => ( - + ); ReceiveStory.storyName = 'Receive'; From b0c0c353345dd2c9ce2a661ffb2be2afb7355454 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 13 Oct 2023 06:49:46 -0700 Subject: [PATCH 004/121] Fixing truncation and alignment in the network toggle component (#21370) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Currently there is some truncation issues with long network names in the privacy incoming transactions section. The truncation of the text is not working which results in broken UI for longer network names This PR adds some styles which resolve the issue as well as adding a story for the network-toggle component for easier revision and review ## **Manual testing steps** _1. Open the storybook build on this PR _2. Search `NetworkToggle` and check the story in small screen sizes _3. Pull this branch _4. Go to Settings > Security & privacy > Incoming transactions section ## **Screenshots/Recordings** ### **Before** https://github.com/MetaMask/metamask-extension/assets/8112138/9a7028ca-f70a-4833-94db-75e81b791206 ### **After** https://github.com/MetaMask/metamask-extension/assets/8112138/770cb8c7-f8ba-4a40-b941-1115bcbdd83c ## **Related issues** _Fixes #21369_ ## **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: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #21369 - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [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)). - [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. --- ui/components/app/app-components.scss | 1 + .../incoming-transaction-toggle.test.js.snap | 492 +++++++++--------- .../network-toggle.scss | 5 + .../network-toggle.stories.tsx | 33 ++ .../network-toggle.tsx | 61 ++- .../__snapshots__/security-tab.test.js.snap | 410 ++++++++------- 6 files changed, 549 insertions(+), 453 deletions(-) create mode 100644 ui/components/app/incoming-trasaction-toggle/network-toggle.scss create mode 100644 ui/components/app/incoming-trasaction-toggle/network-toggle.stories.tsx diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 24bfd9146013..476901a28f62 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -49,6 +49,7 @@ @import 'multilayer-fee-message/index'; @import 'multiple-notifications/index'; @import 'network-display/index'; +@import 'ui/components/app/incoming-trasaction-toggle/network-toggle'; @import 'permission-page-container/index'; @import 'permissions-connect-footer/index'; @import 'permissions-connect-header/index'; diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap index 0113330cccdd..465ba53bbb89 100644 --- a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap +++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap @@ -16,11 +16,11 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p This relies on different third-party APIs for each network, which expose your Ethereum address and your IP address.

Ethereum Mainnet

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Linea Mainnet

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

FANTOM

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Goerli

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Sepolia

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Linea Goerli

-

Custom Mainnet RPC

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Linea Mainnet

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Goerli

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Sepolia

-
+ style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);" + > +
+
+
+
+
+
-
+ + Off + + + On +
- -
-
- - Off - - - On - -
- + +

Linea Goerli

-
+
diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap index 15ec6ad35b0f..c82d870b2466 100644 --- a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap +++ b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap @@ -47,7 +47,9 @@ exports[`Eth Sign Modal should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -
+
If you've been asked to turn this setting on, you might be getting scammed
diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap index 84815da0dc0b..277990b592da 100644 --- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap @@ -10,7 +10,9 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -
+

diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap index 3234ac02be94..dc6765ba143f 100644 --- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap @@ -9,7 +9,9 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -55,7 +57,9 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -79,7 +83,9 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -126,7 +132,9 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default" style="mask-image: url('./images/icons/danger.svg');" /> -

+

@@ -158,7 +166,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="disclosure__content normal" >