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

Part of #17670: Replace Typography with Text component in: detected-token-values.js (#18977)

Browse Source 
* Update detected-token-values.js

* Update ui/components/app/detected-token/detected-token-values/detected-token-values.js

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

---------

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
This commit is contained in:
Harsh Shukla 2023-05-03 18:47:49 +05:30 committed by GitHub
parent 910b9e713f
commit 98cb3381e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/components/app/detected-token/detected-token-values/detected-token-values.js
View File

@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Box from '../../../ui/box'; import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import CheckBox from '../../../ui/check-box'; import CheckBox from '../../../ui/check-box';
import { import {
DISPLAY, DISPLAY,
TextColor, TextColor,
TypographyVariant, TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import { useTokenTracker } from '../../../../hooks/useTokenTracker'; import { useTokenTracker } from '../../../../hooks/useTokenTracker';
import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount'; import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
import { getUseCurrencyRateCheck } from '../../../../selectors'; import { getUseCurrencyRateCheck } from '../../../../selectors';
import { Text } from '../../../component-library';
const DetectedTokenValues = ({ const DetectedTokenValues = ({
token, token,
@ -46,17 +46,18 @@ const DetectedTokenValues = ({
return ( return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-values"> <Box display={DISPLAY.INLINE_FLEX} className="detected-token-values">
<Box marginBottom={1}> <Box marginBottom={1}>
<Typography variant={TypographyVariant.H4}> <Text variant={TextVariant.bodyLgMedium} as="h4">
{`${balanceString || '0'} ${token.symbol}`} {`${balanceString || '0'} ${token.symbol}`}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
> >
{useCurrencyRateCheck {useCurrencyRateCheck
? formattedFiatBalance || '$0' // since formattedFiatBalance will be when teh conversion rate is not obtained, should be replace the `$0` with `N/A` ? formattedFiatBalance || '$0' // since formattedFiatBalance will be when teh conversion rate is not obtained, should be replace the `$0` with `N/A`
: formattedFiatBalance} : formattedFiatBalance}
</Typography> </Text>
</Box> </Box>
<Box className="detected-token-values__checkbox"> <Box className="detected-token-values__checkbox">
<CheckBox checked={tokenSelection} onClick={handleCheckBoxSelection} /> <CheckBox checked={tokenSelection} onClick={handleCheckBoxSelection} />