mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
UX: Multichain: Use new Box component (#19794)
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
parent
fa84aa8b0a
commit
98c571e90d
@ -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"
|
||||
/>
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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 }) => {
|
||||
|
@ -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 {
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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"
|
||||
|
@ -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';
|
||||
|
@ -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 {
|
||||
|
@ -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,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,
|
||||
|
@ -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"
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user