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

Part of #18714: Replacing deprecated constants (#19843)

Browse Source 
* replacing constants

* updating ButtonLink component

* Updates to responsive typography

* lint fixes

* snapshot updates

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Dhruv 2023-08-02 03:07:16 +05:30 committed by GitHub
parent 067d385012
commit d375dc550d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 29 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,6 @@
@import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-input-subtext/index';
@import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index'; @import 'advanced-gas-fee-popover/advanced-gas-fee-defaults/index';
@import 'currency-input/index'; @import 'currency-input/index';
@import 'detected-token/detected-token-address/index';
@import 'detected-token/detected-token-aggregators/index'; @import 'detected-token/detected-token-aggregators/index';
@import 'detected-token/detected-token-values/index'; @import 'detected-token/detected-token-values/index';
@import 'detected-token/detected-token-details/index'; @import 'detected-token/detected-token-details/index';

2
ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`Beta Header should match snapshot 1`] = ` exports[`Beta Header should match snapshot 1`] = `
<div> <div>
<div <div
class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-warning-default" class="mm-box beta-header mm-box--padding-2 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-warning-default"
> >
<h6 <h6
class="mm-box mm-text beta-header__message mm-text--body-sm mm-box--color-warning-inverse" class="mm-box mm-text beta-header__message mm-text--body-sm mm-box--color-warning-inverse"

10
ui/components/app/beta-header/index.js
View File

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
import { import {
TextVariant, TextVariant,
Color, Color,
BLOCK_SIZES, BlockSize,
DISPLAY, Display,
AlignItems, AlignItems,
IconColor, IconColor,
TextColor, TextColor,
@ -20,6 +19,7 @@ import {
ButtonIconSize, ButtonIconSize,
IconName, IconName,
Text, Text,
Box,
} from '../../component-library'; } from '../../component-library';
const BetaHeader = () => { const BetaHeader = () => {
@ -27,8 +27,8 @@ const BetaHeader = () => {
return ( return (
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
width={BLOCK_SIZES.FULL} width={BlockSize.Full}
backgroundColor={Color.warningDefault} backgroundColor={Color.warningDefault}
padding={2} padding={2}
className="beta-header" className="beta-header"

8
ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
View File

@ -3,10 +3,10 @@
exports[`CustomSpendingCap should match snapshot 1`] = ` exports[`CustomSpendingCap should match snapshot 1`] = `
<div> <div>
<div <div
class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm" class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
> >
<div <div
class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center" class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
> >
<label <label
for="custom-spending-cap" for="custom-spending-cap"
@ -62,7 +62,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</div> </div>
</div> </div>
<div <div
class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max" class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
> >
<button <button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent" class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
@ -71,7 +71,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</button> </button>
</div> </div>
<div <div
class="box custom-spending-cap__description box--flex-direction-row" class="mm-box custom-spending-cap__description"
> >
<h6 <h6
class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default" class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"

12
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -6,21 +6,19 @@ import BigNumber from 'bignumber.js';
import { addHexPrefix } from 'ethereumjs-util'; import { addHexPrefix } from 'ethereumjs-util';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import FormField from '../../ui/form-field'; import FormField from '../../ui/form-field';
import { ButtonLink, Icon, IconName, Text } from '../../component-library'; import { Text, ButtonLink, Icon, IconName, Box } from '../../component-library';
import { import {
AlignItems, AlignItems,
Display,
FlexDirection,
TextAlign, TextAlign,
TextVariant, TextVariant,
JustifyContent, JustifyContent,
Size, Size,
BLOCK_SIZES, BlockSize,
BackgroundColor, BackgroundColor,
TextColor, TextColor,
Display,
FlexDirection,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { setCustomTokenAmount } from '../../../ducks/app/app'; import { setCustomTokenAmount } from '../../../ducks/app/app';
import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils'; import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
@ -279,7 +277,7 @@ export default function CustomSpendingCap({
titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }} titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
/> />
<Box <Box
width={BLOCK_SIZES.MAX} width={BlockSize.Max}
marginLeft="auto" marginLeft="auto"
paddingRight={4} paddingRight={4}
paddingBottom={2} paddingBottom={2}

32
ui/components/app/detected-token/detected-token-address/detected-token-address.js
View File

@ -4,50 +4,38 @@ import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import Box from '../../../ui/box';
import Button from '../../../ui/button';
import Tooltip from '../../../ui/tooltip'; import Tooltip from '../../../ui/tooltip';
import { import {
DISPLAY, Display,
TextColor, TextColor,
TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import { shortenAddress } from '../../../../helpers/utils/util'; import { shortenAddress } from '../../../../helpers/utils/util';
import { Text } from '../../../component-library'; import { Text, Box, ButtonLink, IconName } from '../../../component-library';
const DetectedTokenAddress = ({ tokenAddress }) => { const DetectedTokenAddress = ({ tokenAddress }) => {
const t = useI18nContext(); const t = useI18nContext();
const [copied, handleCopy] = useCopyToClipboard(); const [copied, handleCopy] = useCopyToClipboard();
return ( return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-address"> <Box display={Display.InlineFlex} className="detected-token-address">
<Text variant={TextVariant.bodySm} as="h6" color={TextColor.textDefault}> <Text color={TextColor.textDefault}>{`${t('tokenAddress')}:`}</Text>
{`${t('tokenAddress')}:`}
</Text>
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault}
marginLeft={2}
marginRight={2}
>
{shortenAddress(tokenAddress)}
</Text>
<Tooltip <Tooltip
position="bottom" position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')} title={copied ? t('copiedExclamation') : t('copyToClipboard')}
> >
<Button <ButtonLink
type="link"
className="detected-token-address__copy-link" className="detected-token-address__copy-link"
onClick={() => { onClick={() => {
handleCopy(tokenAddress); handleCopy(tokenAddress);
}} }}
endIconName={IconName.Copy}
marginLeft={2}
marginRight={2}
> >
<i className="fa fa-copy" /> {shortenAddress(tokenAddress)}
</Button> </ButtonLink>
</Tooltip> </Tooltip>
</Box> </Box>
); );

7
ui/components/app/detected-token/detected-token-address/index.scss
View File

@ -1,7 +0,0 @@
.detected-token-address {
& &__copy-link {
@include H7;
padding: 4px 0;
}
}

2
ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
View File

@ -24,7 +24,6 @@ const DetectedTokenAggregators = ({ aggregators }) => {
{t('fromTokenLists', [ {t('fromTokenLists', [
numOfHiddenAggregators > 0 && !displayMore ? ( numOfHiddenAggregators > 0 && !displayMore ? (
<Text <Text
variant={TextVariant.bodySm}
as="h6" as="h6"
fontWeight={FontWeight.Normal} fontWeight={FontWeight.Normal}
key="detected-token-aggrgators-with-more" key="detected-token-aggrgators-with-more"
@ -42,7 +41,6 @@ const DetectedTokenAggregators = ({ aggregators }) => {
</Text> </Text>
) : ( ) : (
<Text <Text
variant={TextVariant.bodySm}
as="h6" as="h6"
fontWeight={FontWeight.Normal} fontWeight={FontWeight.Normal}
key="detected-token-aggrgators-without-more" key="detected-token-aggrgators-without-more"

8
ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
View File

@ -344,10 +344,10 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row" class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row"
> >
<div <div
class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm" class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
> >
<div <div
class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center" class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
> >
<label <label
for="custom-spending-cap" for="custom-spending-cap"
@ -403,7 +403,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
</div> </div>
</div> </div>
<div <div
class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max" class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
> >
<button <button
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent" class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
@ -412,7 +412,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
</button> </button>
</div> </div>
<div <div
class="box custom-spending-cap__description box--flex-direction-row" class="mm-box custom-spending-cap__description"
> >
<h6 <h6
class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default" class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"