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

Part of #17670: Replace Typography with Text component (#18569)

Browse Source 
Co-authored-by: Om Raval <omraval@Oms-MacBook-Air.local>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Om Raval 2023-04-24 14:51:40 +05:30 committed by GitHub
parent b53d335b2c
commit 1452a5a8ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
View File

@ -32,12 +32,12 @@ import {
DEFAULT_ROUTE, DEFAULT_ROUTE,
BUILD_QUOTE_ROUTE, BUILD_QUOTE_ROUTE,
} from '../../../helpers/constants/routes'; } from '../../../helpers/constants/routes';
import Typography from '../../../components/ui/typography'; import { Text } from '../../../components/component-library';
import Box from '../../../components/ui/box'; import Box from '../../../components/ui/box';
import UrlIcon from '../../../components/ui/url-icon'; import UrlIcon from '../../../components/ui/url-icon';
import { import {
BLOCK_SIZES, BLOCK_SIZES,
TypographyVariant, TextVariant,
JustifyContent, JustifyContent,
DISPLAY, DISPLAY,
FONT_WEIGHT, FONT_WEIGHT,
@ -330,21 +330,17 @@ export default function SmartTransactionStatusPage() {
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
<Typography <Text color={TextColor.textAlternative} variant={TextVariant.bodySm}>
color={TextColor.textAlternative}
variant={TypographyVariant.H6}
>
{`${fetchParams?.value && Number(fetchParams.value).toFixed(5)} `} {`${fetchParams?.value && Number(fetchParams.value).toFixed(5)} `}
</Typography> </Text>
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1, marginRight: 2 }} boxProps={{ marginLeft: 1, marginRight: 2 }}
> >
{fetchParamsSourceTokenInfo.symbol ?? {fetchParamsSourceTokenInfo.symbol ??
latestSmartTransaction?.sourceTokenSymbol} latestSmartTransaction?.sourceTokenSymbol}
</Typography> </Text>
{fetchParamsSourceTokenInfo.iconUrl ? ( {fetchParamsSourceTokenInfo.iconUrl ? (
<UrlIcon <UrlIcon
url={fetchParamsSourceTokenInfo.iconUrl} url={fetchParamsSourceTokenInfo.iconUrl}
@ -370,22 +366,21 @@ export default function SmartTransactionStatusPage() {
fallbackClassName="main-quote-summary__icon-fallback" fallbackClassName="main-quote-summary__icon-fallback"
/> />
) : null} ) : null}
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
boxProps={{ marginLeft: 2 }} boxProps={{ marginLeft: 2 }}
> >
{`~${destinationValue && Number(destinationValue).toFixed(5)} `} {`~${destinationValue && Number(destinationValue).toFixed(5)} `}
</Typography> </Text>
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1 }} boxProps={{ marginLeft: 1 }}
> >
{fetchParamsDestinationTokenInfo.symbol ?? {fetchParamsDestinationTokenInfo.symbol ??
latestSmartTransaction?.destinationTokenSymbol} latestSmartTransaction?.destinationTokenSymbol}
</Typography> </Text>
</Box> </Box>
<Box <Box
marginTop={3} marginTop={3}
@ -405,31 +400,30 @@ export default function SmartTransactionStatusPage() {
alignItems={AlignItems.center} alignItems={AlignItems.center}
> >
<TimerIcon /> <TimerIcon />
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
boxProps={{ marginLeft: 1 }} boxProps={{ marginLeft: 1 }}
> >
{`${t('stxSwapCompleteIn')} `} {`${t('stxSwapCompleteIn')} `}
</Typography> </Text>
<Typography <Text
color={TextColor.textAlternative} color={TextColor.textAlternative}
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginLeft: 1 }} boxProps={{ marginLeft: 1 }}
className="smart-transaction-status__remaining-time" className="smart-transaction-status__remaining-time"
> >
{showRemainingTimeInMinAndSec(timeLeftForPendingStxInSec)} {showRemainingTimeInMinAndSec(timeLeftForPendingStxInSec)}
</Typography> </Text>
</Box> </Box>
)} )}
<Typography <Text
color={TextColor.textDefault} color={TextColor.textDefault}
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
> >
{headerText} {headerText}
</Typography> </Text>
{isSmartTransactionPending && ( {isSmartTransactionPending && (
<div className="smart-transaction-status__loading-bar-container"> <div className="smart-transaction-status__loading-bar-container">
<div <div
@ -445,13 +439,13 @@ export default function SmartTransactionStatusPage() {
</div> </div>
)} )}
{description && ( {description && (
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
boxProps={{ ...(blockExplorerUrl && { margin: [1, 0, 0] }) }} boxProps={{ ...(blockExplorerUrl && { margin: [1, 0, 0] }) }}
color={TextColor.textAlternative} color={TextColor.textAlternative}
> >
{description} {description}
</Typography> </Text>
)} )}
{blockExplorerUrl && ( {blockExplorerUrl && (
<ViewOnBlockExplorer <ViewOnBlockExplorer
@ -464,13 +458,13 @@ export default function SmartTransactionStatusPage() {
className="smart-transaction-status__background-animation smart-transaction-status__background-animation--bottom" className="smart-transaction-status__background-animation smart-transaction-status__background-animation--bottom"
/> />
{subDescription && ( {subDescription && (
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
boxProps={{ marginTop: 8 }} boxProps={{ marginTop: 8 }}
color={TextColor.textAlternative} color={TextColor.textAlternative}
> >
{subDescription} {subDescription}
</Typography> </Text>
)} )}
</Box> </Box>
{showCancelSwapLink && {showCancelSwapLink &&