mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
* Updated confirm-page-container-summary.component.js * Updated snap-insight.js * Updated confirmation-warning-modal.js * Updated create-new-vault.js * Fixing import errors, linting errors and adding a story * Updating storybook path * Updating snapshot --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
parent
7a421e05c3
commit
1c613a4556
@ -14,8 +14,8 @@ import { getIpfsGateway } from '../../../../../selectors';
|
||||
import Identicon from '../../../../ui/identicon';
|
||||
import InfoTooltip from '../../../../ui/info-tooltip';
|
||||
import NicknamePopovers from '../../../modals/nickname-popovers';
|
||||
import Typography from '../../../../ui/typography';
|
||||
import { TypographyVariant } from '../../../../../helpers/constants/design-system';
|
||||
import { Text } from '../../../../component-library';
|
||||
import { TextVariant } from '../../../../../helpers/constants/design-system';
|
||||
import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
|
||||
import SiteOrigin from '../../../../ui/site-origin';
|
||||
import { getAssetImageURL } from '../../../../../helpers/utils/util';
|
||||
@ -131,17 +131,18 @@ const ConfirmPageContainerSummary = (props) => {
|
||||
<div className="confirm-page-container-summary__title">
|
||||
{renderImage()}
|
||||
{!hideTitle ? (
|
||||
<Typography
|
||||
<Text
|
||||
className="confirm-page-container-summary__title-text"
|
||||
variant={
|
||||
title && title.length < 10
|
||||
? TypographyVariant.H1
|
||||
: TypographyVariant.H3
|
||||
? TextVariant.displayMd
|
||||
: TextVariant.headingMd
|
||||
}
|
||||
as={title && title.length < 10 ? 'h1' : 'h3'}
|
||||
title={title}
|
||||
>
|
||||
{titleComponent || title}
|
||||
</Typography>
|
||||
</Text>
|
||||
) : null}
|
||||
</div>
|
||||
{hideSubtitle ? null : (
|
||||
|
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import ConfirmPageContainerSummary from '.';
|
||||
|
||||
export default {
|
||||
title:
|
||||
'Components/App/ConfirmPageContainer/ConfirmPageContainerContent/ConfirmPageContainerSummary',
|
||||
argTypes: {
|
||||
action: {
|
||||
control: 'text',
|
||||
},
|
||||
title: {
|
||||
control: 'text',
|
||||
},
|
||||
image: {
|
||||
control: 'text',
|
||||
},
|
||||
titleComponent: {
|
||||
control: 'text',
|
||||
},
|
||||
subtitleComponent: {
|
||||
control: 'text',
|
||||
},
|
||||
hideSubtitle: {
|
||||
control: 'boolean',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
tokenAddress: {
|
||||
control: 'text',
|
||||
},
|
||||
toAddress: {
|
||||
control: 'text',
|
||||
},
|
||||
nonce: {
|
||||
control: 'text',
|
||||
},
|
||||
origin: {
|
||||
control: 'text',
|
||||
},
|
||||
hideTitle: {
|
||||
control: 'boolean',
|
||||
},
|
||||
transactionType: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
action: 'action',
|
||||
title: 'title',
|
||||
titleComponent: 'titleComponent',
|
||||
subtitleComponent: 'subtitleComponent',
|
||||
className: 'className',
|
||||
tokenAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
|
||||
toAddress: '0x2170ed0880ac9a755fd29b2688956bd959f933f8',
|
||||
nonce: 'nonce',
|
||||
origin: 'origin',
|
||||
hideTitle: 'hideTitle',
|
||||
transactionType: 'transactionType',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <ConfirmPageContainerSummary {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -2,14 +2,14 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
|
||||
import Typography from '../../../ui/typography/typography';
|
||||
import { Text } from '../../../component-library';
|
||||
import {
|
||||
AlignItems,
|
||||
FLEX_DIRECTION,
|
||||
JustifyContent,
|
||||
TEXT_ALIGN,
|
||||
TextColor,
|
||||
TypographyVariant,
|
||||
TextVariant,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||
import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
|
||||
@ -54,12 +54,13 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
||||
{data && Object.keys(data).length > 0 ? (
|
||||
<SnapUIRenderer snapId={selectedSnap.id} data={data} />
|
||||
) : (
|
||||
<Typography
|
||||
<Text
|
||||
color={TextColor.textAlternative}
|
||||
variant={TypographyVariant.H6}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
>
|
||||
{t('snapsNoInsight')}
|
||||
</Typography>
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
@ -87,13 +88,14 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
|
||||
{loading && (
|
||||
<>
|
||||
<Preloader size={40} />
|
||||
<Typography
|
||||
<Text
|
||||
marginTop={3}
|
||||
color={TextColor.textAlternative}
|
||||
variant={TypographyVariant.H6}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
>
|
||||
{t('snapsInsightLoading')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
@ -5,17 +5,16 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import Popover from '../../ui/popover';
|
||||
import Box from '../../ui/box';
|
||||
import Button from '../../ui/button';
|
||||
import Typography from '../../ui/typography';
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
FONT_WEIGHT,
|
||||
JustifyContent,
|
||||
TypographyVariant,
|
||||
TextVariant,
|
||||
AlignItems,
|
||||
IconColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
|
||||
import { Text, Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
|
||||
|
||||
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
|
||||
const t = useI18nContext();
|
||||
@ -61,39 +60,40 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
|
||||
className="confirmation-warning-modal__content__header__warning-icon"
|
||||
size={ICON_SIZES.XL}
|
||||
/>
|
||||
<Typography
|
||||
variant={TypographyVariant.H4}
|
||||
<Text
|
||||
variant={TextVariant.headingSm}
|
||||
as="h4"
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
>
|
||||
{t('addEthereumChainWarningModalTitle')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box marginLeft={6} marginRight={6} marginTop={0} marginBottom={3}>
|
||||
<Typography marginTop={4} variant={TypographyVariant.H6}>
|
||||
<Text marginTop={4} variant={TextVariant.bodySm} as="h6">
|
||||
{t('addEthereumChainWarningModalHeader', [
|
||||
<strong key="part-2">
|
||||
{t('addEthereumChainWarningModalHeaderPartTwo')}
|
||||
</strong>,
|
||||
])}
|
||||
</Typography>
|
||||
<Typography marginTop={4} variant={TypographyVariant.H6}>
|
||||
</Text>
|
||||
<Text marginTop={4} variant={TextVariant.bodySm} as="h6">
|
||||
{t('addEthereumChainWarningModalListHeader')}
|
||||
</Typography>
|
||||
</Text>
|
||||
<ul>
|
||||
<li>
|
||||
<Typography marginTop={2} variant={TypographyVariant.H6}>
|
||||
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
|
||||
{t('addEthereumChainWarningModalListPointOne')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Typography marginTop={2} variant={TypographyVariant.H6}>
|
||||
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
|
||||
{t('addEthereumChainWarningModalListPointTwo')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</li>
|
||||
<li>
|
||||
<Typography marginTop={2} variant={TypographyVariant.H6}>
|
||||
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
|
||||
{t('addEthereumChainWarningModalListPointThree')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</li>
|
||||
</ul>
|
||||
</Box>
|
||||
|
@ -4,7 +4,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import TextField from '../../ui/text-field';
|
||||
import Button from '../../ui/button';
|
||||
import CheckBox from '../../ui/check-box';
|
||||
import Typography from '../../ui/typography';
|
||||
import { Text } from '../../component-library';
|
||||
import SrpInput from '../srp-input';
|
||||
import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
|
||||
|
||||
@ -135,7 +135,7 @@ export default function CreateNewVault({
|
||||
className="create-new-vault__terms-label"
|
||||
htmlFor="create-new-vault__terms-checkbox"
|
||||
>
|
||||
<Typography as="span">{termsOfUse}</Typography>
|
||||
<Text as="span">{termsOfUse}</Text>
|
||||
</label>
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -254,7 +254,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
|
||||
class="confirm-page-container-summary__title"
|
||||
>
|
||||
<h3
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography confirm-page-container-summary__title-text typography--h3 typography--weight-normal typography--style-normal typography--color-text-default"
|
||||
class="box mm-text confirm-page-container-summary__title-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
|
Loading…
Reference in New Issue
Block a user