m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Issue 17670 replace typography with text (#19433)

Browse Source 
* Replace Typograph with Text component in numeric-input-component.js

* Replace Typography with Text component in signature-request-message.js

* Replace Typography with Text component in signature-request.component.js

* Replacing deprecating constants and fixing some signature story warnings

* Updating snapshot

* Fixing import

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
Ujwal Kumar 2023-06-27 04:20:08 +05:30 committed by GitHub
parent 113fdc189c
commit 04839a250d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 64 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -156,11 +156,7 @@ export default class SignatureRequestOriginal extends Component {
color={IconColor.infoDefault}
marginRight={2}
/>
<Text
variant={TextVariant.bodyXs}
color={TextColor.textDefault}
as="h7"
>
<Text variant={TextVariant.bodyXs} color={TextColor.textDefault}>
{this.context.t('mismatchAccount', [
shortenAddress(this.props.selectedAccount.address),
shortenAddress(this.props.fromAccount.address),

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

@ -206,12 +206,13 @@ exports[`Signature Request Component render should match snapshot when we are us
</div>
</div>
<h3
class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Signature request
</h3>
<h6
class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
align="center"
class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
>
Only sign this message if you fully understand the content and trust the requesting site.
</h6>
@ -223,7 +224,7 @@ exports[`Signature Request Component render should match snapshot when we are us
tabindex="0"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
>
Verify third-party details
</h6>
@ -237,7 +238,7 @@ exports[`Signature Request Component render should match snapshot when we are us
class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
>
Mail
</p>
@ -982,12 +983,13 @@ exports[`Signature Request Component render should match snapshot when we want t
</div>
</div>
<h3
class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Signature request
</h3>
<h6
class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
align="center"
class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
>
Only sign this message if you fully understand the content and trust the requesting site.
</h6>
@ -999,7 +1001,7 @@ exports[`Signature Request Component render should match snapshot when we want t
tabindex="0"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
>
Verify third-party details
</h6>
@ -1013,7 +1015,7 @@ exports[`Signature Request Component render should match snapshot when we want t
class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
>
Mail
</p>

6
ui/components/app/signature-request/index.scss
View File

@ -47,12 +47,6 @@
flex-direction: column;
min-height: min-content;
&__title {
@include H5;
font-weight: 500;
}
&__info {
@include H7;

21
ui/components/app/signature-request/signature-request-message/signature-request-message.js
View File

@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
import { debounce } from 'lodash';
import { I18nContext } from '../../../../contexts/i18n';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import { Text } from '../../../component-library';
import {
DISPLAY,
FONT_WEIGHT,
FLEX_DIRECTION,
Display,
FlexDirection,
AlignItems,
JustifyContent,
Color,
@ -15,6 +14,7 @@ import {
BorderColor,
BorderRadius,
TextColor,
FontWeight,
} from '../../../../helpers/constants/design-system';
import SignatureRequestData from '../signature-request-data';
@ -44,14 +44,14 @@ export default function SignatureRequestMessage({
return (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
onScroll={debounce(setMessageIsScrolledAtBottom, 25)}
className="signature-request-message"
>
{messageIsScrollable ? (
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
borderColor={BorderColor.borderDefault}
@ -79,14 +79,13 @@ export default function SignatureRequestMessage({
className="signature-request-message__root"
ref={setMessageRootRef}
>
<Typography
fontWeight={FONT_WEIGHT.BOLD}
<Text
fontWeight={FontWeight.Bold}
color={TextColor.textDefault}
marginLeft={4}
className="signature-request-message__title"
>
{primaryType}
</Typography>
</Text>
<SignatureRequestData data={data.value} />
</Box>
</Box>

1
ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
View File

@ -4,7 +4,6 @@ import SignatureRequestMessage from './signature-request-message';
export default {
title: 'Components/App/SignatureRequestMessage',
component: SignatureRequestMessage,
argTypes: {
data: { control: 'object' },

52
ui/components/app/signature-request/signature-request.component.js
View File

@ -14,18 +14,15 @@ import {
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
import SiteOrigin from '../../ui/site-origin';
import Button from '../../ui/button';
import Typography from '../../ui/typography/typography';
import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
import {
TypographyVariant,
FontWeight,
TextAlign,
TextColor,
TextVariant,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
IconColor,
DISPLAY,
BLOCK_SIZES,
TextVariant,
Display,
BlockSize,
BackgroundColor,
///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/design-system';
@ -37,11 +34,15 @@ import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-pa
import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils';
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
import { Icon, IconName, Text } from '../../component-library';
import Box from '../../ui/box/box';
///: END:ONLY_INCLUDE_IN
import {
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
Box,
Icon,
IconName,
///: END:ONLY_INCLUDE_IN
Text,
} from '../../component-library';
import Footer from './signature-request-footer';
import Message from './signature-request-message';
@ -295,8 +296,8 @@ export default class SignatureRequest extends PureComponent {
this.props.selectedAccount.address === address ? null : (
<Box
className="request-signature__mismatch-info"
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
display={Display.Flex}
width={BlockSize.Full}
padding={4}
marginBottom={4}
backgroundColor={BackgroundColor.primaryMuted}
@ -309,7 +310,6 @@ export default class SignatureRequest extends PureComponent {
<Text
variant={TextVariant.bodyXs}
color={TextColor.textDefault}
as="h7"
>
{this.context.t('mismatchAccount', [
shortenAddress(this.props.selectedAccount.address),
@ -330,26 +330,25 @@ export default class SignatureRequest extends PureComponent {
/>
</div>
<Typography
<Text
className="signature-request__content__title"
variant={TypographyVariant.H3}
fontWeight={FontWeight.Bold}
boxProps={{
marginTop: 4,
}}
variant={TextVariant.headingMd}
as="h3"
marginTop={4}
>
{this.context.t('sigRequest')}
</Typography>
<Typography
</Text>
<Text
className="request-signature__content__subtitle"
variant={TypographyVariant.H7}
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
align={TextAlign.Center}
margin={12}
marginTop={3}
>
{this.context.t('signatureRequestGuidance')}
</Typography>
</Text>
{verifyingContract ? (
<div>
<Button
@ -358,12 +357,13 @@ export default class SignatureRequest extends PureComponent {
className="signature-request-content__verify-contract-details"
data-testid="verify-contract-details"
>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault}
>
{this.context.t('verifyContractDetails')}
</Typography>
</Text>
</Button>
</div>
) : null}

7
ui/components/app/signature-request/signature-request.stories.js
View File

@ -9,7 +9,6 @@ const [MOCK_PRIMARY_IDENTITY, MOCK_SECONDARY_IDENTITY] = Object.values(
export default {
title: 'Components/App/SignatureRequest',
component: SignatureRequest,
parameters: {
docs: {
@ -30,6 +29,10 @@ export default {
clearConfirmTransaction: { action: 'Clean Confirm' },
cancel: { action: 'Cancel' },
sign: { action: 'Sign' },
showRejectTransactionsConfirmationModal: {
action: 'showRejectTransactionsConfirmationModal',
},
cancelAll: { action: 'cancelAll' },
},
};
@ -79,6 +82,8 @@ DefaultStory.args = {
fromAccount: MOCK_PRIMARY_IDENTITY,
providerConfig: { name: 'Goerli ETH' },
selectedAccount: MOCK_PRIMARY_IDENTITY,
hardwareWalletRequiresConnection: false,
currentCurrency: 'usd',
};
export const AccountMismatchStory = (args) => {

2
ui/components/component-library/popover/popover.stories.tsx
View File

@ -731,7 +731,7 @@ export const Offset: StoryFn<typeof Popover> = (args) => {
);
};
export const onPressEscKey: StoryFn<typeof Popover> = (args) => {
export const OnPressEscKey: StoryFn<typeof Popover> = (args) => {
const [referenceElement, setReferenceElement] = useState();
const [isOpen, setIsOpen] = useState(false);

10
ui/components/ui/numeric-input/numeric-input.component.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Typography from '../typography/typography';
import {
TextColor,
TypographyVariant,
TextVariant,
} from '../../../helpers/constants/design-system';
import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
import { Text } from '../../component-library';
export default function NumericInput({
detailText = '',
@ -52,13 +52,13 @@ export default function NumericInput({
ref={inputRef}
/>
{detailText && (
<Typography
<Text
color={TextColor.textAlternative}
variant={TypographyVariant.H7}
variant={TextVariant.bodySm}
as="span"
>
{detailText}
</Typography>
</Text>
)}
</div>
);

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

@ -205,12 +205,13 @@ exports[`Signature Request Component render should match snapshot 1`] = `
</div>
</div>
<h3
class="box box--margin-top-4 box--margin-bottom-1 box--flex-direction-row typography signature-request__content__title typography--h3 typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text signature-request__content__title mm-text--heading-md box--margin-top-4 box--flex-direction-row box--color-text-default"
>
Signature request
</h3>
<h6
class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
align="center"
class="box mm-text request-signature__content__subtitle mm-text--body-sm box--margin-12 box--margin-top-3 box--flex-direction-row box--color-text-alternative"
>
Only sign this message if you fully understand the content and trust the requesting site.
</h6>
@ -222,7 +223,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
tabindex="0"
>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-primary-default"
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
>
Verify third-party details
</h6>
@ -236,7 +237,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
class="box signature-request-message__root box--margin-2 box--padding-top-3 box--padding-right-3 box--padding-bottom-3 box--flex-direction-row box--background-color-background-default box--rounded-xl box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-4 box--flex-direction-row typography signature-request-message__title typography--p typography--weight-bold typography--style-normal typography--color-text-default"
class="box mm-text mm-text--body-md mm-text--font-weight-bold box--margin-left-4 box--flex-direction-row box--color-text-default"
>
Mail
</p>