1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Part of & : Replace Typography with Text component: token-allowance.js ()

* Update token-allowance.js

* Remove fontWeight prop in: ui/pages/token-allowance/token-allowance.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/pages/token-allowance/token-allowance.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update token-allowance.js

* Update ui/pages/token-allowance/token-allowance.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Update ui/pages/token-allowance/token-allowance.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
Harsh Shukla 2023-05-04 22:08:43 +05:30 committed by GitHub
parent 229906d09a
commit 398b0cf452
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -6,18 +6,17 @@ import BigNumber from 'bignumber.js';
import Box from '../../components/ui/box/box'; import Box from '../../components/ui/box/box';
import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header'; import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header';
import UrlIcon from '../../components/ui/url-icon/url-icon'; import UrlIcon from '../../components/ui/url-icon/url-icon';
import Typography from '../../components/ui/typography/typography';
import { import {
AlignItems, AlignItems,
BorderStyle, BorderStyle,
Color, Color,
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT, FontWeight,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
TypographyVariant, TextVariant,
} from '../../helpers/constants/design-system'; } from '../../helpers/constants/design-system';
import { I18nContext } from '../../contexts/i18n'; import { I18nContext } from '../../contexts/i18n';
import ContractTokenValues from '../../components/ui/contract-token-values/contract-token-values'; import ContractTokenValues from '../../components/ui/contract-token-values/contract-token-values';
@ -61,10 +60,10 @@ import {
import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container'; import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container';
import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning'; import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
import SimulationErrorMessage from '../../components/ui/simulation-error-message'; import SimulationErrorMessage from '../../components/ui/simulation-error-message';
import { Icon, IconName } from '../../components/component-library';
import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field'; import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field';
import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../components/app/security-provider-banner-message/security-provider-banner-message.constants'; import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../components/app/security-provider-banner-message/security-provider-banner-message.constants';
import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message'; import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message';
import { Text, Icon, IconName } from '../../components/component-library';
const ALLOWED_HOSTS = ['portfolio.metamask.io']; const ALLOWED_HOSTS = ['portfolio.metamask.io'];
@ -294,24 +293,26 @@ export default function TokenAllowance({
<Box> <Box>
{!isFirstPage && ( {!isFirstPage && (
<Button type="inline" onClick={() => handleBackClick()}> <Button type="inline" onClick={() => handleBackClick()}>
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textMuted} color={TextColor.textMuted}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{'<'} {t('back')} {'<'} {t('back')}
</Typography> </Text>
</Button> </Button>
)} )}
</Box> </Box>
<Box textAlign={TEXT_ALIGN.END}> <Box textAlign={TextAlign.End}>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textMuted} color={TextColor.textMuted}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{isFirstPage ? 1 : 2} {t('ofTextNofM')} 2 {isFirstPage ? 1 : 2} {t('ofTextNofM')} 2
</Typography> </Text>
</Box> </Box>
</Box> </Box>
<NetworkAccountBalanceHeader <NetworkAccountBalanceHeader
@ -349,22 +350,18 @@ export default function TokenAllowance({
name={origin} name={origin}
url={siteImage} url={siteImage}
/> />
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL} as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
boxProps={{ marginLeft: 1, marginTop: 2 }} marginLeft={1}
> >
{origin} {origin}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
<Box marginLeft={4} marginRight={4}> <Box marginLeft={4} marginRight={4}>
<Typography <Text variant={TextVariant.headingMd} align={TextAlign.Center}>
variant={TypographyVariant.H3}
fontWeight={FONT_WEIGHT.BOLD}
align={TEXT_ALIGN.CENTER}
>
{isFirstPage ? ( {isFirstPage ? (
t('setSpendingCap', [renderContractTokenValues]) t('setSpendingCap', [renderContractTokenValues])
) : ( ) : (
@ -379,7 +376,7 @@ export default function TokenAllowance({
)} )}
</Box> </Box>
)} )}
</Typography> </Text>
</Box> </Box>
<Box <Box
marginTop={1} marginTop={1}
@ -392,12 +389,13 @@ export default function TokenAllowance({
onClick={() => setShowContractDetails(true)} onClick={() => setShowContractDetails(true)}
className="token-allowance-container__verify-link" className="token-allowance-container__verify-link"
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={Color.primaryDefault} color={Color.primaryDefault}
> >
{t('verifyContractDetails')} {t('verifyContractDetails')}
</Typography> </Text>
</Button> </Button>
</Box> </Box>
<Box margin={[4, 4, 3, 4]}> <Box margin={[4, 4, 3, 4]}>
@ -480,13 +478,14 @@ export default function TokenAllowance({
onClick={() => setShowFullTxDetails(!showFullTxDetails)} onClick={() => setShowFullTxDetails(!showFullTxDetails)}
className="token-allowance-container__view-details" className="token-allowance-container__view-details"
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault} color={TextColor.primaryDefault}
marginRight={1} marginRight={1}
> >
{t('viewDetails')} {t('viewDetails')}
</Typography> </Text>
{showFullTxDetails ? ( {showFullTxDetails ? (
<i className="fa fa-sm fa-angle-up" /> <i className="fa fa-sm fa-angle-up" />
) : ( ) : (