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 #17670 Replace Typography with Text component for 4 files. (#18793)

Browse Source 
* Worked on issue #17670 & #18714 for 4 other files.

* Updated snapshots.

* Update index.test.js.snap

* Update customize-nonce.test.js.snap

* Update signature-request.component.test.js.snap

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Harsh Shukla 2023-05-05 16:44:09 +05:30 committed by GitHub
parent 36c4ff15b2
commit 9fae71505c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 79 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
View File

@ -15,7 +15,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="customize-nonce-modal__main-header"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography customize-nonce-modal__main-title typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text customize-nonce-modal__main-title mm-text--heading-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Edit nonce
</h4>
@ -33,7 +33,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="box box--margin-top-2 box--display-inline-flex box--flex-direction-row box--align-items-center"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-sm mm-text--font-weight-normal box--flex-direction-row box--color-text-default"
>
This is an advanced feature, use cautiously.
<a
@ -53,7 +53,8 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row box--width-5/6 typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
boxprops="[object Object]"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Edit nonce
</h6>

33
ui/components/app/modals/customize-nonce/customize-nonce.component.js
View File

@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
import Modal from '../../modal';
import TextField from '../../../ui/text-field';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import {
TypographyVariant,
FONT_WEIGHT,
TextVariant,
FontWeight,
AlignItems,
BLOCK_SIZES,
DISPLAY,
@ -19,6 +18,7 @@ import {
ButtonIcon,
ButtonIconSize,
IconName,
Text,
} from '../../../component-library';
const CustomizeNonce = ({
@ -50,13 +50,14 @@ const CustomizeNonce = ({
>
<div className="customize-nonce-modal">
<div className="customize-nonce-modal__main-header">
<Typography
<Text
className="customize-nonce-modal__main-title"
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
variant={TextVariant.headingSm}
as="h4"
fontWeight={FontWeight.Bold}
>
{t('editNonceField')}
</Typography>
</Text>
<ButtonIcon
iconName={IconName.Close}
className="customize-nonce-modal__close"
@ -70,9 +71,10 @@ const CustomizeNonce = ({
display={DISPLAY.INLINE_FLEX}
alignItems={AlignItems.center}
>
<Typography
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.NORMAL}
<Text
variant={TextVariant.bodySm}
as="h6"
fontWeight={FontWeight.Normal}
>
{t('editNonceMessage')}
<Button
@ -84,17 +86,18 @@ const CustomizeNonce = ({
>
{t('learnMoreUpperCase')}
</Button>
</Typography>
</Text>
</Box>
<Box marginTop={3}>
<Box alignItems={AlignItems.center} display={DISPLAY.FLEX}>
<Typography
variant={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
<Text
variant={TextVariant.bodySm}
as="h6"
fontWeight={FontWeight.Bold}
boxProps={{ width: BLOCK_SIZES.FIVE_SIXTHS }}
>
{t('editNonceField')}
</Typography>
</Text>
<Box width={BLOCK_SIZES.ONE_SIXTH}>
<Button
type="link"

42
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -5,17 +5,17 @@ import Identicon from '../../ui/identicon';
import {
DISPLAY,
FLEX_DIRECTION,
TypographyVariant,
FONT_WEIGHT,
TextVariant,
FontWeight,
AlignItems,
JustifyContent,
TEXT_ALIGN,
TextAlign,
TextColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n';
import Typography from '../../ui/typography';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
import { Text } from '../../component-library';
export default function NetworkAccountBalanceHeader({
networkName,
@ -64,22 +64,24 @@ export default function NetworkAccountBalanceHeader({
alignItems={AlignItems.flexStart}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
marginBottom={0}
>
{networkName}
</Typography>
</Text>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
fontWeight={FontWeight.Bold}
marginTop={0}
>
{accountName}
</Typography>
</Text>
</Box>
</Box>
<Box
@ -87,23 +89,25 @@ export default function NetworkAccountBalanceHeader({
alignItems={AlignItems.flexEnd}
flexDirection={FLEX_DIRECTION.COLUMN}
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
marginBottom={0}
>
{t('balance')}
</Typography>
</Text>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
fontWeight={FontWeight.Bold}
marginTop={0}
align={TEXT_ALIGN.END}
align={TextAlign.End}
>
{accountBalance} {tokenName}
</Typography>
</Text>
</Box>
</Box>
);

9
ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
View File

@ -145,12 +145,12 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Unknown private network
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Test Account
</h6>
@ -160,12 +160,13 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
966.987986

18
ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
View File

@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot when we are us
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Unknown private network
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Antonio
</h6>
@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot when we are us
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
966.987986
@ -917,12 +918,12 @@ exports[`Signature Request Component render should match snapshot when we want t
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Unknown private network
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Antonio
</h6>
@ -932,12 +933,13 @@ exports[`Signature Request Component render should match snapshot when we want t
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
1515270.174798

28
ui/components/ui/callout/callout.stories.js
View File

@ -2,10 +2,10 @@ import React, { useState } from 'react';
import {
BorderColor,
SEVERITIES,
TypographyVariant,
TextVariant,
} from '../../../helpers/constants/design-system';
import Box from '../box';
import Typography from '../typography';
import { Text } from '../../component-library';
import Callout from './callout';
export default {
@ -24,12 +24,12 @@ export default {
export const PersistentCallout = (args) => (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}>
<Typography variant={TypographyVariant.H4}>
<Text variant={TextVariant.headingSm} as="h4">
This is your private key:
</Typography>
<Typography variant={TypographyVariant.H6}>
</Text>
<Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a callout
</Typography>
</Text>
</Box>
<Callout {...args}>Always back up your private key!</Callout>
</Box>
@ -40,13 +40,13 @@ export const DismissibleCallout = (args) => {
return (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}>
<Typography variant={TypographyVariant.H4}>
<Text variant={TextVariant.headingSm} as="h4">
This is your private key:
</Typography>
<Typography variant={TypographyVariant.H6}>
</Text>
<Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a
callout
</Typography>
</Text>
</Box>
{!dismissed && (
<Callout {...args} dismiss={() => setDismissed(true)}>
@ -85,13 +85,13 @@ export const MultipleDismissibleCallouts = () => {
return (
<Box borderColor={BorderColor.borderDefault} paddingTop={8}>
<Box margin={2}>
<Typography variant={TypographyVariant.H4}>
<Text variant={TextVariant.headingSm} as="h4">
This is your private key:
</Typography>
<Typography variant={TypographyVariant.H6}>
</Text>
<Text variant={TextVariant.bodySm} as="h6">
some seed words that are super important and probably deserve a
callout
</Typography>
</Text>
</Box>
{Object.entries(calloutState)
.filter(([_, callout]) => callout.dismissed === false)

9
ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap
View File

@ -142,12 +142,12 @@ exports[`Signature Request Component render should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Goerli test network
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
Account 1
</h6>
@ -157,12 +157,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
>
<h6
class="box box--margin-top-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
>
Balance
</h6>
<h6
class="box box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--align-end typography--color-text-default"
align="end"
class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
>
9.107408