m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

UX Multichain: updated enums for multichain token list item (#19575)

Browse Source 
* updated enums for multichain token list iteam

* updated snapshot
This commit is contained in:
Nidhi Kumari 2023-06-13 20:47:21 +05:30 committed by GitHub
parent 6c3f31d382
commit cc0b30776a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
View File

@ -3,11 +3,11 @@
exports[`Token Cell should match snapshot 1`] = ` exports[`Token Cell should match snapshot 1`] = `
<div> <div>
<div <div
class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column" class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item" data-testid="multichain-token-list-item"
> >
<a <a
class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row" class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button" data-testid="multichain-token-list-button"
href="#" href="#"
> >
@ -34,14 +34,14 @@ exports[`Token Cell should match snapshot 1`] = `
</div> </div>
</div> </div>
<div <div
class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full" class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
style="flex-grow: 1; overflow: hidden;" style="flex-grow: 1; overflow: hidden;"
> >
<div <div
class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between" class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
> >
<div <div
class="box box--flex-direction-row box--width-1/3" class="mm-box mm-box--width-1/3"
> >
<div> <div>
<div <div
@ -59,7 +59,7 @@ exports[`Token Cell should match snapshot 1`] = `
</div> </div>
</div> </div>
<p <p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default" class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
/> />
</div> </div>
<p <p

12
ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
View File

@ -3,11 +3,11 @@
exports[`MultichainTokenListItem should render correctly 1`] = ` exports[`MultichainTokenListItem should render correctly 1`] = `
<div> <div>
<div <div
class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column" class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
data-testid="multichain-token-list-item" data-testid="multichain-token-list-item"
> >
<a <a
class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row" class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
data-testid="multichain-token-list-button" data-testid="multichain-token-list-button"
href="#" href="#"
> >
@ -34,14 +34,14 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full" class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
style="flex-grow: 1; overflow: hidden;" style="flex-grow: 1; overflow: hidden;"
> >
<div <div
class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between" class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
> >
<div <div
class="box box--flex-direction-row box--width-1/3" class="mm-box mm-box--width-1/3"
> >
<div> <div>
<p <p
@ -50,7 +50,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
</div> </div>
</div> </div>
<p <p
class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default" class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
/> />
</div> </div>
<p <p

28
ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js
View File

@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import classnames from 'classnames'; import classnames from 'classnames';
import { import {
BLOCK_SIZES, BlockSize,
BorderColor, BorderColor,
DISPLAY, Display,
FLEX_DIRECTION, FlexDirection,
FontWeight, FontWeight,
JustifyContent, JustifyContent,
Size, Size,
@ -19,8 +19,8 @@ import {
AvatarToken, AvatarToken,
BadgeWrapper, BadgeWrapper,
Text, Text,
Box,
} from '../../component-library'; } from '../../component-library';
import Box from '../../ui/box/box';
import { getCurrentChainId, getNativeCurrencyImage } from '../../../selectors'; import { getCurrentChainId, getNativeCurrencyImage } from '../../../selectors';
import Tooltip from '../../ui/tooltip'; import Tooltip from '../../ui/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
@ -48,15 +48,15 @@ export const MultichainTokenListItem = ({
return ( return (
<Box <Box
className={classnames('multichain-token-list-item', className)} className={classnames('multichain-token-list-item', className)}
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
gap={4} gap={4}
data-testid="multichain-token-list-item" data-testid="multichain-token-list-item"
> >
<Box <Box
className="multichain-token-list-item__container-cell" className="multichain-token-list-item__container-cell"
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.ROW} flexDirection={FlexDirection.Row}
padding={4} padding={4}
as="a" as="a"
data-testid="multichain-token-list-button" data-testid="multichain-token-list-button"
@ -101,17 +101,17 @@ export const MultichainTokenListItem = ({
</BadgeWrapper> </BadgeWrapper>
<Box <Box
className="multichain-token-list-item__container-cell--text-container" className="multichain-token-list-item__container-cell--text-container"
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
width={BLOCK_SIZES.FULL} width={BlockSize.Full}
style={{ flexGrow: 1, overflow: 'hidden' }} style={{ flexGrow: 1, overflow: 'hidden' }}
> >
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
gap={1} gap={1}
> >
<Box width={BLOCK_SIZES.ONE_THIRD}> <Box width={BlockSize.OneThird}>
<Tooltip <Tooltip
position="bottom" position="bottom"
interactive interactive
@ -132,7 +132,7 @@ export const MultichainTokenListItem = ({
<Text <Text
fontWeight={FontWeight.Medium} fontWeight={FontWeight.Medium}
variant={TextVariant.bodyMd} variant={TextVariant.bodyMd}
width={BLOCK_SIZES.TWO_THIRD} width={BlockSize.TwoThirds}
textAlign={TextAlign.End} textAlign={TextAlign.End}
> >
{secondary} {secondary}