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

Restructure CurrencyDisplay to use Design System (#19171)

Browse Source 
* Restructure CurrencyDisplay to use Design System

* Add storybook, remove CSS

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.component.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Update ui/components/ui/currency-display/currency-display.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Remove deprecated imports, import EtherDenomination

* Update jest

* Use TextVariant: Inherit to keep correct font-size

* Snapshots

* Switch from boxProps to props

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
David Walsh 2023-07-25 14:32:21 -05:00 committed by GitHub
parent 9310a95499
commit bab1670432
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 231 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
View File

@ -64,14 +64,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
@ -85,19 +82,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -133,19 +127,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

25
ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
View File

@ -46,14 +46,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
@ -65,19 +62,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -98,19 +92,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
</strong>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

22
ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
View File

@ -12,37 +12,39 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
class="confirm-detail-row__details"
>
<div
class="currency-display-component confirm-detail-row__primary"
class="mm-box currency-display-component confirm-detail-row__primary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 18px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
</div>
<div
class="currency-display-component confirm-detail-row__secondary"
class="mm-box currency-display-component confirm-detail-row__secondary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 14px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>

27
ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
View File

@ -27,19 +27,16 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00432788 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00432788
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -128,19 +125,16 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$231.06 USD"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$231.06
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
USD
</span>
@ -185,19 +179,16 @@ exports[`CurrencyInput Component rendering should render properly without a suff
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.00 USD"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.00
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
USD
</span>

18
ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
View File

@ -6,37 +6,31 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
class="cancel-transaction-gas-fee"
>
<div
class="currency-display-component cancel-transaction-gas-fee__eth"
class="mm-box currency-display-component cancel-transaction-gas-fee__eth mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
</div>
<div
class="currency-display-component cancel-transaction-gas-fee__fiat"
class="mm-box currency-display-component cancel-transaction-gas-fee__fiat mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

7
ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
View File

@ -135,14 +135,11 @@ exports[`Multi layer fee message when balance and token price checker is enabled
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.56"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.56
</span>

9
ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
View File

@ -3,19 +3,16 @@
exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

18
ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View File

@ -70,19 +70,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="mm-box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-flex-end mm-box--align-items-center mm-box--color-text-default"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.006 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.006
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -106,19 +103,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.006 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.006
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

21
ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
View File

@ -3,14 +3,11 @@
exports[`CurrencyDisplay Component should match default snapshot 1`] = `
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="null"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
/>
</div>
</div>
@ -19,14 +16,11 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
exports[`CurrencyDisplay Component should render text with a className 1`] = `
<div>
<div
class="currency-display-component currency-display"
class="mm-box currency-display-component currency-display mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$123.45"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$123.45
</span>
@ -37,14 +31,11 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
<div>
<div
class="currency-display-component currency-display"
class="mm-box currency-display-component currency-display mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="-$123.45"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
-
$123.45

60
ui/components/ui/currency-display/currency-display.component.js
View File

@ -3,6 +3,13 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
import { EtherDenomination } from '../../../../shared/constants/common';
import { Text, Box } from '../../component-library';
import {
AlignItems,
Display,
FlexWrap,
TextVariant,
} from '../../../helpers/constants/design-system';
export default function CurrencyDisplay({
value,
@ -18,6 +25,10 @@ export default function CurrencyDisplay({
denomination,
currency,
suffix,
prefixComponentWrapperProps = {},
textProps = {},
suffixProps = {},
...props
}) {
const [title, parts] = useCurrencyDisplay(value, {
displayValue,
@ -28,26 +39,50 @@ export default function CurrencyDisplay({
currency,
suffix,
});
return (
<div
<Box
className={classnames('currency-display-component', className)}
data-testid={dataTestId}
style={style}
title={(!hideTitle && title) || null}
display={Display.Flex}
alignItems={AlignItems.center}
flexWrap={FlexWrap.Wrap}
{...props}
>
<span className="currency-display-component__prefix">
{prefixComponent}
</span>
<span className="currency-display-component__text">
{prefixComponent ? (
<Box
className="currency-display-component__prefix"
marginInlineEnd={1}
variant={TextVariant.inherit}
{...prefixComponentWrapperProps}
>
{prefixComponent}
</Box>
) : null}
<Text
as="span"
className="currency-display-component__text"
ellipsis
variant={TextVariant.inherit}
{...textProps}
>
{parts.prefix}
{parts.value}
</span>
{parts.suffix && (
<span className="currency-display-component__suffix">
</Text>
{parts.suffix ? (
<Text
as="span"
className="currency-display-component__suffix"
marginInlineStart={1}
variant={TextVariant.inherit}
{...suffixProps}
>
{parts.suffix}
</span>
)}
</div>
</Text>
) : null}
</Box>
);
}
@ -68,4 +103,7 @@ CurrencyDisplay.propTypes = {
style: PropTypes.object,
suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
value: PropTypes.string,
prefixComponentWrapperProps: PropTypes.object,
textProps: PropTypes.object,
suffixProps: PropTypes.object,
};

77
ui/components/ui/currency-display/currency-display.stories.js Normal file
View File

@ -0,0 +1,77 @@
import React from 'react';
import { decimalToHex } from '../../../../shared/modules/conversion.utils';
import { EtherDenomination } from '../../../../shared/constants/common';
import CurrencyDisplay from '.';
export default {
title: 'Components/UI/CurrencyDisplay',
argTypes: {
className: {
control: 'text',
},
currency: {
control: 'text',
},
'data-testid': {
control: 'text',
},
denomination: {
control: 'select',
options: [EtherDenomination.ETH, EtherDenomination.GWEI],
},
displayValue: {
control: 'text',
},
hideLabel: {
control: 'boolean',
},
hideTitle: {
control: 'boolean',
},
numberOfDecimals: {
control: 'number',
},
prefix: {
control: 'text',
},
prefixComponent: {
control: 'text',
},
style: {
control: 'object',
},
suffix: {
control: 'text',
},
value: {
control: 'text',
},
prefixComponentWrapperProps: {
control: 'object',
},
textProps: {
control: 'object',
},
suffixProps: {
control: 'object',
},
boxProps: {
control: 'object',
},
},
args: {
denomination: EtherDenomination.ETH,
value: decimalToHex('123.45'),
numberOfDecimals: '2',
currency: 'USD',
prefix: '$',
},
};
export const DefaultStory = (args) => <CurrencyDisplay {...args} />;
DefaultStory.storyName = 'Default';
export const DisplayValueStory = (args) => (
<CurrencyDisplay {...args} displayValue="44.43" />
);
DefaultStory.storyName = 'Display Value';

21
ui/components/ui/currency-display/index.scss
View File

@ -1,21 +0,0 @@
.currency-display-component {
display: flex;
align-items: center;
flex-wrap: wrap;
&__text {
/*rtl:ignore*/
direction: ltr;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__prefix {
padding-right: 4px;
}
&__suffix {
padding-left: 4px;
}
}

1
ui/components/ui/ui-components.scss
View File

@ -12,7 +12,6 @@
@import 'chip/chip';
@import 'color-indicator/color-indicator';
@import 'confusable/index';
@import 'currency-display/index';
@import 'definition-list/definition-list';
@import 'dialog/dialog';
@import 'dropdown/dropdown';

61
ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
View File

@ -287,19 +287,20 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="mm-box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 24px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
@ -448,14 +449,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
@ -469,19 +467,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -517,19 +512,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -560,14 +552,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="confirm-page-container-content__total-value"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
@ -581,19 +570,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
class="confirm-page-container-content__total-value"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -621,19 +607,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
</strong>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>

39
ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
View File

@ -257,19 +257,20 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
class="mm-box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.0001"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 24px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.0001
</span>
@ -378,14 +379,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
@ -406,14 +404,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
</strong>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
@ -443,14 +438,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
class="confirm-page-container-content__total-value"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000121"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000121
</span>
@ -478,14 +470,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
</strong>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000121"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000121
</span>

27
ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
View File

@ -51,19 +51,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
Balance:
</span>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -241,19 +238,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.0000315 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.0000315
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
@ -289,19 +283,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.0000315 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.0000315
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>