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

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-defaults/index';
@import 'currency-input/index';
@import 'detected-token/detected-token-address/index';
@import 'detected-token/detected-token-aggregators/index';
@import 'detected-token/detected-token-values/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`] = `
<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
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 { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
import {
TextVariant,
Color,
BLOCK_SIZES,
DISPLAY,
BlockSize,
Display,
AlignItems,
IconColor,
TextColor,
@ -20,6 +19,7 @@ import {
ButtonIconSize,
IconName,
Text,
Box,
} from '../../component-library';
const BetaHeader = () => {
@ -27,8 +27,8 @@ const BetaHeader = () => {
return (
<Box
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
display={Display.Flex}
width={BlockSize.Full}
backgroundColor={Color.warningDefault}
padding={2}
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`] = `
<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
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
for="custom-spending-cap"
@ -62,7 +62,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
</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
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>
</div>
<div
class="box custom-spending-cap__description box--flex-direction-row"
class="mm-box custom-spending-cap__description"
>
<h6
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 { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import FormField from '../../ui/form-field';
import { ButtonLink, Icon, IconName, Text } from '../../component-library';
import { Text, ButtonLink, Icon, IconName, Box } from '../../component-library';
import {
AlignItems,
Display,
FlexDirection,
TextAlign,
TextVariant,
JustifyContent,
Size,
BLOCK_SIZES,
BlockSize,
BackgroundColor,
TextColor,
Display,
FlexDirection,
} from '../../../helpers/constants/design-system';
import { setCustomTokenAmount } from '../../../ducks/app/app';
import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
@ -279,7 +277,7 @@ export default function CustomSpendingCap({
titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
/>
<Box
width={BLOCK_SIZES.MAX}
width={BlockSize.Max}
marginLeft="auto"
paddingRight={4}
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 { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import Box from '../../../ui/box';
import Button from '../../../ui/button';
import Tooltip from '../../../ui/tooltip';
import {
DISPLAY,
Display,
TextColor,
TextVariant,
} from '../../../../helpers/constants/design-system';
import { shortenAddress } from '../../../../helpers/utils/util';
import { Text } from '../../../component-library';
import { Text, Box, ButtonLink, IconName } from '../../../component-library';
const DetectedTokenAddress = ({ tokenAddress }) => {
const t = useI18nContext();
const [copied, handleCopy] = useCopyToClipboard();
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
<Text variant={TextVariant.bodySm} as="h6" color={TextColor.textDefault}>
{`${t('tokenAddress')}:`}
</Text>
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault}
marginLeft={2}
marginRight={2}
>
{shortenAddress(tokenAddress)}
</Text>
<Box display={Display.InlineFlex} className="detected-token-address">
<Text color={TextColor.textDefault}>{`${t('tokenAddress')}:`}</Text>
<Tooltip
position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<Button
type="link"
<ButtonLink
className="detected-token-address__copy-link"
onClick={() => {
handleCopy(tokenAddress);
}}
endIconName={IconName.Copy}
marginLeft={2}
marginRight={2}
>
<i className="fa fa-copy" />
</Button>
{shortenAddress(tokenAddress)}
</ButtonLink>
</Tooltip>
</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', [
numOfHiddenAggregators > 0 && !displayMore ? (
<Text
variant={TextVariant.bodySm}
as="h6"
fontWeight={FontWeight.Normal}
key="detected-token-aggrgators-with-more"
@ -42,7 +41,6 @@ const DetectedTokenAggregators = ({ aggregators }) => {
</Text>
) : (
<Text
variant={TextVariant.bodySm}
as="h6"
fontWeight={FontWeight.Normal}
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"
>
<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
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
for="custom-spending-cap"
@ -403,7 +403,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
</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
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>
</div>
<div
class="box custom-spending-cap__description box--flex-direction-row"
class="mm-box custom-spending-cap__description"
>
<h6
class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"