m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

UX: Multichain: Use new Box component (#19794)

Browse Source 
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
David Walsh 2023-07-04 10:17:05 -05:00 committed by GitHub
parent fa84aa8b0a
commit 98c571e90d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -46,7 +46,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
class="box nft-details__nft-item box--flex-direction-row"
>
<button
class="box nft-item__container box--flex-direction-row"
class="mm-box nft-item__container"
data-testid="nft-item"
>
<div
@ -54,7 +54,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
>
<img
alt="MUNK #1 1"
class="box nft-item__item nft-item__item-image box--display-block box--flex-direction-row box--justify-content-center"
class="mm-box nft-item__item nft-item__item-image mm-box--display-block mm-box--justify-content-center"
data-testid="nft-image"
src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
/>

2
ui/components/multichain/account-details/account-details-authenticate.js
View File

@ -13,8 +13,8 @@ import {
ButtonSecondary,
FormTextField,
Text,
Box,
} from '../../component-library';
import Box from '../../ui/box/box';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { exportAccount, hideWarning } from '../../../store/actions';

2
ui/components/multichain/account-details/account-details-display.js
View File

@ -15,6 +15,7 @@ import { isAbleToExportAccount } from '../../../helpers/utils/util';
import {
BUTTON_SECONDARY_SIZES,
ButtonSecondary,
Box,
} from '../../component-library';
import {
AlignItems,
@ -29,7 +30,6 @@ import {
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
export const AccountDetailsDisplay = ({
accounts,

2
ui/components/multichain/account-details/account-details-key.js
View File

@ -6,6 +6,7 @@ import {
ButtonPrimary,
IconName,
Text,
Box,
} from '../../component-library';
import {
AlignItems,
@ -17,7 +18,6 @@ import {
TextVariant,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {

2
ui/components/multichain/account-details/account-details.js
View File

@ -15,8 +15,8 @@ import {
IconName,
PopoverHeader,
Text,
Box,
} from '../../component-library';
import Box from '../../ui/box/box';
import { getMetaMaskAccountsOrdered } from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {

12
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`App Header should match snapshot 1`] = `
<div>
<div
class="box multichain-app-header-logo box--margin-2 box--display-none box--sm:display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
class="mm-box multichain-app-header-logo mm-box--margin-2 mm-box--display-none mm-box--sm:display-flex mm-box--justify-content-center mm-box--align-items-center"
data-testid="app-header-logo"
>
<button
@ -200,10 +200,10 @@ exports[`App Header should match snapshot 1`] = `
</button>
</div>
<div
class="box multichain-app-header box--margin-bottom-4 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-alternative"
class="mm-box multichain-app-header mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
>
<div
class="box multichain-app-header__contents multichain-app-header-shadow box--padding-2 box--padding-right-4 box--padding-left-4 box--gap-2 box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--display-flex"
class="mm-box multichain-app-header__contents multichain-app-header-shadow mm-box--padding-2 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
>
<div>
<button
@ -289,14 +289,14 @@ exports[`App Header should match snapshot 1`] = `
</span>
</button>
<div
class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--align-items-center"
class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--align-items-center"
>
<div
class="box box--display-flex box--gap-4 box--flex-direction-row"
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<div
class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--width-full"
class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--width-full"
>
<button
aria-label="Account options"

2
ui/components/multichain/app-header/app-header.js
View File

@ -29,6 +29,7 @@ import {
ButtonIconSize,
IconName,
PickerNetwork,
Box,
} from '../../component-library';
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
@ -46,7 +47,6 @@ import {
} from '../../../selectors';
import { GlobalMenu, ProductTour, AccountPicker } from '..';
import Box from '../../ui/box/box';
import {
hideProductTour,
toggleAccountMenu,

2
ui/components/multichain/create-account/create-account.js
View File

@ -6,6 +6,7 @@ import {
ButtonPrimary,
ButtonSecondary,
FormTextField,
Box,
} from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
@ -15,7 +16,6 @@ import {
} from '../../../selectors';
import { addNewAccount, setAccountLabel } from '../../../store/actions';
import { getMostRecentOverviewPage } from '../../../ducks/history/history';
import Box from '../../ui/box/box';
import {
MetaMetricsEventAccountType,
MetaMetricsEventCategory,

2
ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
View File

@ -40,7 +40,7 @@ exports[`Json should match snapshot 1`] = `
</div>
</div>
<div
class="box box--display-flex box--gap-4 box--flex-direction-row"
class="mm-box mm-box--display-flex mm-box--gap-4"
>
<button
class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"

2
ui/components/multichain/import-account/bottom-buttons.js
View File

@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
import {
ButtonPrimary,
ButtonSecondary,
Box,
BUTTON_SECONDARY_SIZES,
} from '../../component-library';
import Box from '../../ui/box/box';
import { Display } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import * as actions from '../../../store/actions';

3
ui/components/multichain/import-account/import-account.js
View File

@ -7,8 +7,7 @@ import {
MetaMetricsEventCategory,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { ButtonLink, Label, Text } from '../../component-library';
import Box from '../../ui/box';
import { ButtonLink, Label, Text, Box } from '../../component-library';
import Dropdown from '../../ui/dropdown';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {

12
ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
View File

@ -3,10 +3,10 @@
exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
<div>
<div
class="box multichain-import-token-link box--flex-direction-row"
class="mm-box multichain-import-token-link"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@ -20,7 +20,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
</button>
</div>
<div
class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@ -40,10 +40,10 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
<div>
<div
class="box multichain-import-token-link box--flex-direction-row"
class="mm-box multichain-import-token-link"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
class="mm-box mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@ -57,7 +57,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
</button>
</div>
<div
class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
>
<button
class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"

3
ui/components/multichain/import-token-link/import-token-link.js
View File

@ -3,8 +3,7 @@ import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box/box';
import { ButtonLink, IconName } from '../../component-library';
import { ButtonLink, IconName, Box } from '../../component-library';
import {
AlignItems,
Display,

4
ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`NetworkListItem renders properly 1`] = `
<div>
<div
class="box multichain-network-list-item box--padding-4 box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-transparent box--display-flex"
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
@ -15,7 +15,7 @@ exports[`NetworkListItem renders properly 1`] = `
/>
</div>
<div
class="box multichain-network-list-item__network-name box--flex-direction-row"
class="mm-box multichain-network-list-item__network-name"
>
<button
class="box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"

2
ui/components/multichain/network-list-item/network-list-item.js
View File

@ -1,7 +1,6 @@
import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
import {
AlignItems,
IconColor,
@ -18,6 +17,7 @@ import {
ButtonIcon,
ButtonLink,
IconName,
Box,
} from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Tooltip from '../../ui/tooltip/tooltip';

2
ui/components/multichain/network-list-menu/network-list-menu.js
View File

@ -18,7 +18,6 @@ import {
getAllEnabledNetworks,
getCurrentChainId,
} from '../../../selectors';
import Box from '../../ui/box/box';
import ToggleButton from '../../ui/toggle-button';
import {
Display,
@ -28,6 +27,7 @@ import {
BUTTON_SECONDARY_SIZES,
ButtonSecondary,
Text,
Box,
} from '../../component-library';
import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';

2
ui/components/multichain/nft-item/nft-item.js
View File

@ -6,6 +6,7 @@ import {
AvatarNetwork,
BadgeWrapper,
BadgeWrapperAnchorElementShape,
Box,
} from '../../component-library';
import {
BackgroundColor,
@ -13,7 +14,6 @@ import {
JustifyContent,
Size,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
export const NftItem = ({
alt,