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

Worked on #17670 & #18714 for 7 files. (#18789)

Browse Source 
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Harsh Shukla 2023-04-25 18:56:58 +05:30 committed by GitHub
parent 41cf85e201
commit 9967b50015
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 143 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,12 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import Box from '../../../ui/box'; import Box from '../../../ui/box';
import Button from '../../../ui/button'; import Button from '../../../ui/button';
import Typography from '../../../ui/typography/typography';
import { import {
DISPLAY, DISPLAY,
FONT_WEIGHT, FontWeight,
TypographyVariant, TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import { Text } from '../../../component-library';
const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2; const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2;
@ -22,15 +22,13 @@ const DetectedTokenAggregators = ({ aggregators }) => {
return ( return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators"> <Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
<Typography <Text variant={TextVariant.bodySm} as="h6" fontWeight={FontWeight.Normal}>
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.NORMAL}
>
{t('fromTokenLists', [ {t('fromTokenLists', [
numOfHiddenAggregators > 0 && !displayMore ? ( numOfHiddenAggregators > 0 && !displayMore ? (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
fontWeight={FontWeight.Normal}
key="detected-token-aggrgators-with-more" key="detected-token-aggrgators-with-more"
> >
{`${aggregators {`${aggregators
@ -44,18 +42,19 @@ const DetectedTokenAggregators = ({ aggregators }) => {
> >
{t('plusXMore', [numOfHiddenAggregators])} {t('plusXMore', [numOfHiddenAggregators])}
</Button> </Button>
</Typography> </Text>
) : ( ) : (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
fontWeight={FontWeight.Normal}
key="detected-token-aggrgators-without-more" key="detected-token-aggrgators-without-more"
> >
{`${aggregators.join(', ')}.`} {`${aggregators.join(', ')}.`}
</Typography> </Text>
), ),
])} ])}
</Typography> </Text>
</Box> </Box>
); );
}; };

13
ui/components/app/detected-token/detected-token-ignored-popover/detected-token-ignored-popover.js
View File

@ -5,8 +5,8 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import Popover from '../../../ui/popover'; import Popover from '../../../ui/popover';
import Button from '../../../ui/button'; import Button from '../../../ui/button';
import Typography from '../../../ui/typography/typography'; import { TextVariant } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system'; import { Text } from '../../../component-library';
const DetectedTokenIgnoredPopover = ({ const DetectedTokenIgnoredPopover = ({
partiallyIgnoreDetectedTokens, partiallyIgnoreDetectedTokens,
@ -48,9 +48,10 @@ const DetectedTokenIgnoredPopover = ({
})} })}
footer={footer} footer={footer}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
tag={TypographyVariant.H6} as="h6"
tag={TextVariant.bodySm}
marginTop={0} marginTop={0}
marginRight={5} marginRight={5}
marginBottom={7} marginBottom={7}
@ -59,7 +60,7 @@ const DetectedTokenIgnoredPopover = ({
{partiallyIgnoreDetectedTokens {partiallyIgnoreDetectedTokens
? t('importSelectedTokensDescription') ? t('importSelectedTokensDescription')
: t('ignoreTokenWarning')} : t('ignoreTokenWarning')}
</Typography> </Text>
</Popover> </Popover>
); );
}; };

24
ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js
View File

@ -5,7 +5,7 @@ import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
import { import {
Color, Color,
TextColor, TextColor,
TypographyVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas'; import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
import { useGasFeeContext } from '../../../contexts/gasFee'; import { useGasFeeContext } from '../../../contexts/gasFee';
@ -13,8 +13,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import { useTransactionEventFragment } from '../../../hooks/useTransactionEventFragment'; import { useTransactionEventFragment } from '../../../hooks/useTransactionEventFragment';
import { useTransactionModalContext } from '../../../contexts/transaction-modal'; import { useTransactionModalContext } from '../../../contexts/transaction-modal';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import Typography from '../../ui/typography/typography'; import { Icon, IconName, IconSize, Text } from '../../component-library';
import { Icon, IconName, IconSize } from '../../component-library';
export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
const t = useI18nContext(); const t = useI18nContext();
@ -87,22 +86,23 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
contentText={ contentText={
<div className="edit-gas-fee-button__tooltip"> <div className="edit-gas-fee-button__tooltip">
{transaction?.origin && ( {transaction?.origin && (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
> >
{t('dappSuggestedTooltip', [transaction.origin])} {t('dappSuggestedTooltip', [transaction.origin])}
</Typography> </Text>
)} )}
<Typography variant={TypographyVariant.H7}> <Text variant={TextVariant.bodySm} as="h6">
<b>{t('maxBaseFee')}</b> {maxFeePerGas} <b>{t('maxBaseFee')}</b> {maxFeePerGas}
</Typography> </Text>
<Typography variant={TypographyVariant.H7}> <Text variant={TextVariant.bodySm} as="h6">
<b>{t('maxPriorityFee')}</b> {maxPriorityFeePerGas} <b>{t('maxPriorityFee')}</b> {maxPriorityFeePerGas}
</Typography> </Text>
<Typography variant={TypographyVariant.H7}> <Text variant={TextVariant.bodySm} as="h6">
<b>{t('gasLimit')}</b> {gasLimit} <b>{t('gasLimit')}</b> {gasLimit}
</Typography> </Text>
</div> </div>
} }
position="top" position="top"

13
ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
View File

@ -6,16 +6,16 @@ import { useTransactionModalContext } from '../../../contexts/transaction-modal'
import Box from '../../ui/box'; import Box from '../../ui/box';
import ErrorMessage from '../../ui/error-message'; import ErrorMessage from '../../ui/error-message';
import Popover from '../../ui/popover'; import Popover from '../../ui/popover';
import Typography from '../../ui/typography/typography';
import { import {
TextColor, TextColor,
TypographyVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import { useGasFeeContext } from '../../../contexts/gasFee'; import { useGasFeeContext } from '../../../contexts/gasFee';
import AppLoadingSpinner from '../app-loading-spinner'; import AppLoadingSpinner from '../app-loading-spinner';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { Text } from '../../component-library';
import EditGasItem from './edit-gas-item'; import EditGasItem from './edit-gas-item';
import NetworkStatistics from './network-statistics'; import NetworkStatistics from './network-statistics';
@ -84,12 +84,13 @@ const EditGasFeePopover = () => {
</Box> </Box>
<Box> <Box>
<NetworkStatistics /> <NetworkStatistics />
<Typography <Text
className="edit-gas-fee-popover__know-more" className="edit-gas-fee-popover__know-more"
align="center" align="center"
color={TextColor.textAlternative} color={TextColor.textAlternative}
tag={TypographyVariant.paragraph} tag={TextVariant.bodyMd}
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
> >
{t('learnMoreAboutGas', [ {t('learnMoreAboutGas', [
<a <a
@ -101,7 +102,7 @@ const EditGasFeePopover = () => {
{t('learnMore')} {t('learnMore')}
</a>, </a>,
])} ])}
</Typography> </Text>
</Box> </Box>
</div> </div>
</div> </div>

58
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/edit-gas-tooltip.js
View File

@ -5,13 +5,13 @@ import {
PriorityLevels, PriorityLevels,
} from '../../../../../shared/constants/gas'; } from '../../../../../shared/constants/gas';
import { import {
FONT_WEIGHT, FontWeight,
TextColor, TextColor,
TypographyVariant, TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas'; import { isMetamaskSuggestedGasEstimate } from '../../../../helpers/utils/gas';
import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util'; import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
import Typography from '../../../ui/typography'; import { Text } from '../../../component-library';
const EditGasToolTip = ({ const EditGasToolTip = ({
editGasMode, editGasMode,
@ -107,43 +107,47 @@ const EditGasToolTip = ({
) : null} ) : null}
{toolTipMessage && ( {toolTipMessage && (
<div className="edit-gas-tooltip__container__message"> <div className="edit-gas-tooltip__container__message">
<Typography variant={TypographyVariant.H7}> <Text variant={TextVariant.bodySm} as="h6">
{toolTipMessage} {toolTipMessage}
</Typography> </Text>
</div> </div>
)} )}
{priorityLevel === PriorityLevels.custom || {priorityLevel === PriorityLevels.custom ||
estimateGreaterThanGasUse ? null : ( estimateGreaterThanGasUse ? null : (
<div className="edit-gas-tooltip__container__values"> <div className="edit-gas-tooltip__container__values">
<div> <div>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
fontWeight={FontWeight.Bold}
className="edit-gas-tooltip__container__label" className="edit-gas-tooltip__container__label"
> >
{t('maxBaseFee')} {t('maxBaseFee')}
</Typography> </Text>
{maxFeePerGas && ( {maxFeePerGas && (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value" className="edit-gas-tooltip__container__value"
> >
{roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)} {roundToDecimalPlacesRemovingExtraZeroes(maxFeePerGas, 4)}
</Typography> </Text>
)} )}
</div> </div>
<div> <div>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
fontWeight={FontWeight.Bold}
className="edit-gas-tooltip__container__label" className="edit-gas-tooltip__container__label"
> >
{t('priorityFeeProperCase')} {t('priorityFeeProperCase')}
</Typography> </Text>
{maxPriorityFeePerGas && ( {maxPriorityFeePerGas && (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value" className="edit-gas-tooltip__container__value"
> >
@ -151,25 +155,27 @@ const EditGasToolTip = ({
maxPriorityFeePerGas, maxPriorityFeePerGas,
4, 4,
)} )}
</Typography> </Text>
)} )}
</div> </div>
<div> <div>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
fontWeight={FontWeight.Bold}
className="edit-gas-tooltip__container__label" className="edit-gas-tooltip__container__label"
> >
{t('gasLimit')} {t('gasLimit')}
</Typography> </Text>
{gasLimit && ( {gasLimit && (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
className="edit-gas-tooltip__container__value" className="edit-gas-tooltip__container__value"
> >
{roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)} {roundToDecimalPlacesRemovingExtraZeroes(gasLimit, 4)}
</Typography> </Text>
)} )}
</div> </div>
</div> </div>

69
ui/components/app/modals/contract-details-modal/contract-details-modal.js
View File

@ -9,10 +9,9 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import Identicon from '../../../ui/identicon'; import Identicon from '../../../ui/identicon';
import { ellipsify } from '../../../../pages/send/send.utils'; import { ellipsify } from '../../../../pages/send/send.utils';
import Popover from '../../../ui/popover'; import Popover from '../../../ui/popover';
import Typography from '../../../ui/typography';
import { import {
FONT_WEIGHT, FontWeight,
TypographyVariant, TextVariant,
DISPLAY, DISPLAY,
Size, Size,
BorderStyle, BorderStyle,
@ -25,7 +24,7 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
import { getAddressBookEntry } from '../../../../selectors'; import { getAddressBookEntry } from '../../../../selectors';
import { TokenStandard } from '../../../../../shared/constants/transaction'; import { TokenStandard } from '../../../../../shared/constants/transaction';
import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image'; import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
import { ButtonIcon, IconName } from '../../../component-library'; import { ButtonIcon, IconName, Text } from '../../../component-library';
export default function ContractDetailsModal({ export default function ContractDetailsModal({
onClose, onClose,
@ -62,32 +61,35 @@ export default function ContractDetailsModal({
paddingLeft={4} paddingLeft={4}
className="contract-details-modal__content" className="contract-details-modal__content"
> >
<Typography <Text
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
variant={TypographyVariant.H5} variant={TextVariant.bodyMd}
as="h5"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
boxProps={{ marginTop: 0, marginBottom: 0 }} boxProps={{ marginTop: 0, marginBottom: 0 }}
> >
{t('contractTitle')} {t('contractTitle')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
color={TextColor.textAlternative} color={TextColor.textAlternative}
boxProps={{ marginTop: 2, marginBottom: 0 }} boxProps={{ marginTop: 2, marginBottom: 0 }}
> >
{t('contractDescription')} {t('contractDescription')}
</Typography> </Text>
{!isContractRequestingSignature && ( {!isContractRequestingSignature && (
<> <>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
marginTop={4} marginTop={4}
marginBottom={2} marginBottom={2}
> >
{nft ? t('contractNFT') : t('contractToken')} {nft ? t('contractNFT') : t('contractToken')}
</Typography> </Text>
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
borderRadius={Size.SM} borderRadius={Size.SM}
@ -110,23 +112,25 @@ export default function ContractDetailsModal({
/> />
)} )}
<Box data-testid="recipient"> <Box data-testid="recipient">
<Typography <Text
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
variant={TypographyVariant.H5} variant={TextVariant.bodyMd}
as="h5"
marginTop={4} marginTop={4}
> >
{tokenName || ellipsify(tokenAddress)} {tokenName || ellipsify(tokenAddress)}
</Typography> </Text>
{tokenName && ( {tokenName && (
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
color={TextColor.textAlternative} color={TextColor.textAlternative}
marginTop={0} marginTop={0}
marginBottom={4} marginBottom={4}
> >
{ellipsify(tokenAddress)} {ellipsify(tokenAddress)}
</Typography> </Text>
)} )}
</Box> </Box>
<Box <Box
@ -182,8 +186,9 @@ export default function ContractDetailsModal({
</Box> </Box>
</> </>
)} )}
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
marginTop={4} marginTop={4}
marginBottom={2} marginBottom={2}
@ -193,7 +198,7 @@ export default function ContractDetailsModal({
{!nft && {!nft &&
!isContractRequestingSignature && !isContractRequestingSignature &&
t('contractRequestingSpendingCap')} t('contractRequestingSpendingCap')}
</Typography> </Text>
<Box <Box
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
borderRadius={Size.SM} borderRadius={Size.SM}
@ -207,23 +212,25 @@ export default function ContractDetailsModal({
address={toAddress} address={toAddress}
/> />
<Box data-testid="recipient"> <Box data-testid="recipient">
<Typography <Text
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
variant={TypographyVariant.H5} variant={TextVariant.bodyMd}
as="h5"
marginTop={4} marginTop={4}
> >
{addressBookEntry?.data?.name || ellipsify(toAddress)} {addressBookEntry?.data?.name || ellipsify(toAddress)}
</Typography> </Text>
{addressBookEntry?.data?.name && ( {addressBookEntry?.data?.name && (
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
color={TextColor.textAlternative} color={TextColor.textAlternative}
marginTop={0} marginTop={0}
marginBottom={4} marginBottom={4}
> >
{ellipsify(toAddress)} {ellipsify(toAddress)}
</Typography> </Text>
)} )}
</Box> </Box>
<Box <Box

62
ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
View File

@ -3,12 +3,11 @@ import { useHistory, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Box from '../../../components/ui/box'; import Box from '../../../components/ui/box';
import Button from '../../../components/ui/button'; import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import { import {
TEXT_ALIGN, TextAlign,
TypographyVariant, TextVariant,
JustifyContent, JustifyContent,
FONT_WEIGHT, FontWeight,
DISPLAY, DISPLAY,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { import {
@ -23,6 +22,7 @@ import {
MetaMetricsEventCategory, MetaMetricsEventCategory,
MetaMetricsEventName, MetaMetricsEventName,
} from '../../../../shared/constants/metametrics'; } from '../../../../shared/constants/metametrics';
import { Text } from '../../../components/component-library';
import SkipSRPBackup from './skip-srp-backup-popover'; import SkipSRPBackup from './skip-srp-backup-popover';
export default function SecureYourWallet() { export default function SecureYourWallet() {
@ -85,23 +85,25 @@ export default function SecureYourWallet() {
/> />
<Box <Box
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
marginBottom={4} marginBottom={4}
> >
<Typography <Text
variant={TypographyVariant.H2} variant={TextVariant.headingLg}
fontWeight={FONT_WEIGHT.BOLD} as="h2"
fontWeight={FontWeight.Bold}
> >
{t('seedPhraseIntroTitle')} {t('seedPhraseIntroTitle')}
</Typography> </Text>
</Box> </Box>
<Box justifyContent={JustifyContent.center} marginBottom={6}> <Box justifyContent={JustifyContent.center} marginBottom={6}>
<Typography <Text
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
as="h4"
className="secure-your-wallet__details" className="secure-your-wallet__details"
> >
{t('seedPhraseIntroTitleCopy')} {t('seedPhraseIntroTitleCopy')}
</Typography> </Text>
</Box> </Box>
<Box> <Box>
<video <video
@ -158,27 +160,27 @@ export default function SecureYourWallet() {
</Box> </Box>
<Box className="secure-your-wallet__desc"> <Box className="secure-your-wallet__desc">
<Box marginBottom={4}> <Box marginBottom={4}>
<Typography <Text
as="p" as="p"
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
boxProps={{ display: DISPLAY.BLOCK }} boxProps={{ display: DISPLAY.BLOCK }}
> >
{t('seedPhraseIntroSidebarTitleOne')} {t('seedPhraseIntroSidebarTitleOne')}
</Typography> </Text>
<Typography as="p" variant={TypographyVariant.H4}> <Text as="p" variant={TextVariant.headingSm}>
{t('seedPhraseIntroSidebarCopyOne')} {t('seedPhraseIntroSidebarCopyOne')}
</Typography> </Text>
</Box> </Box>
<Box marginBottom={4}> <Box marginBottom={4}>
<Typography <Text
as="p" as="p"
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
boxProps={{ display: DISPLAY.BLOCK }} boxProps={{ display: DISPLAY.BLOCK }}
> >
{t('seedPhraseIntroSidebarTitleTwo')} {t('seedPhraseIntroSidebarTitleTwo')}
</Typography> </Text>
<ul className="secure-your-wallet__list"> <ul className="secure-your-wallet__list">
<li>{t('seedPhraseIntroSidebarBulletOne')}</li> <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
<li>{t('seedPhraseIntroSidebarBulletThree')}</li> <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
@ -186,22 +188,22 @@ export default function SecureYourWallet() {
</ul> </ul>
</Box> </Box>
<Box marginBottom={6}> <Box marginBottom={6}>
<Typography <Text
as="p" as="p"
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
boxProps={{ display: DISPLAY.BLOCK }} boxProps={{ display: DISPLAY.BLOCK }}
> >
{t('seedPhraseIntroSidebarTitleThree')} {t('seedPhraseIntroSidebarTitleThree')}
</Typography> </Text>
<Typography as="p" variant={TypographyVariant.H4}> <Text as="p" variant={TextVariant.headingSm}>
{t('seedPhraseIntroSidebarCopyTwo')} {t('seedPhraseIntroSidebarCopyTwo')}
</Typography> </Text>
</Box> </Box>
<Box className="secure-your-wallet__highlighted" marginBottom={2}> <Box className="secure-your-wallet__highlighted" marginBottom={2}>
<Typography as="p" variant={TypographyVariant.H4}> <Text as="p" variant={TextVariant.headingSm}>
{t('seedPhraseIntroSidebarCopyThree')} {t('seedPhraseIntroSidebarCopyThree')}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
</div> </div>