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

Token Value component for Tokens Detected page (#14274)

Browse Source
This commit is contained in:
Niranjana Binoy 2022-04-01 11:52:22 -04:00 committed by GitHub
parent 6f5cc9c6c7
commit afcc3a8f26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 167 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.storybook/test-data.js
View File

@ -112,6 +112,29 @@ const state = {
],
metamask: {
tokenList: {
'0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
symbol: 'SNX',
decimals: 18,
name: 'Synthetix Network Token',
iconUrl: 'https://assets.coingecko.com/coins/images/3406/large/SNX.png',
aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Synthetix',
'Zapper',
'Zerion',
'0x',
],
occurrences: 12,
unlisted: false
},
'0x6b175474e89094c44da98b954eedeac495271d0f': {
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'META',
@ -1086,6 +1109,7 @@ const state = {
suggestedAssets: [],
useNonceField: false,
usePhishDetect: true,
useTokenDetection: true,
lostIdentities: {},
forgottenPassword: false,
ipfsGateway: 'dweb.link',

1
ui/components/app/app-components.scss
View File

@ -86,3 +86,4 @@
@import 'currency-input/index';
@import 'detected-token/detected-token-address/index';
@import 'detected-token/detected-token-aggregators/index';
@import 'detected-token/detected-token-values/index';

57
ui/components/app/detected-token/detected-token-values/detected-token-values.js Normal file
View File

@ -0,0 +1,57 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Box from '../../../ui/box';
import Typography from '../../../ui/typography';
import CheckBox from '../../../ui/check-box';
import {
COLORS,
DISPLAY,
TYPOGRAPHY,
} from '../../../../helpers/constants/design-system';
import { useTokenTracker } from '../../../../hooks/useTokenTracker';
import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
const DetectedTokenValues = ({ token }) => {
const [selectedTokens, setSelectedTokens] = useState(false);
const { tokensWithBalances } = useTokenTracker([token]);
const balanceToRender = tokensWithBalances[0]?.string;
const balance = tokensWithBalances[0]?.balance;
const formattedFiatBalance = useTokenFiatAmount(
token.address,
balanceToRender,
token.symbol,
);
return (
<Box display={DISPLAY.INLINE_FLEX} className="detected-token-values">
<Box marginBottom={1}>
<Typography variant={TYPOGRAPHY.H4}>
{`${balance || '0'} ${token.symbol}`}
</Typography>
<Typography variant={TYPOGRAPHY.H7} color={COLORS.TEXT_ALTERNATIVE}>
{formattedFiatBalance || '$0'}
</Typography>
</Box>
<Box className="detected-token-values__checkbox">
<CheckBox
checked={selectedTokens}
onClick={() => setSelectedTokens((checked) => !checked)}
/>
</Box>
</Box>
);
};
DetectedTokenValues.propTypes = {
token: PropTypes.shape({
address: PropTypes.string.isRequired,
decimals: PropTypes.number,
symbol: PropTypes.string,
iconUrl: PropTypes.string,
aggregators: PropTypes.array,
}),
};
export default DetectedTokenValues;

43
ui/components/app/detected-token/detected-token-values/detected-token-values.stories.js Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import DetectedTokenValues from './detected-token-values';
export default {
title: 'Components/App/DetectedToken/DetectedTokenValues',
id: __filename,
argTypes: {
address: { control: 'text' },
symbol: { control: 'text' },
decimals: { control: 'text' },
iconUrl: { control: 'text' },
aggregators: { control: 'array' },
},
args: {
address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
symbol: 'SNX',
decimals: 18,
iconUrl: 'https://assets.coingecko.com/coins/images/3406/large/SNX.png',
aggregators: [
'aave',
'bancor',
'cmc',
'cryptocom',
'coinGecko',
'oneInch',
'paraswap',
'pmm',
'synthetix',
'zapper',
'zerion',
'zeroEx',
],
},
};
const Template = (args) => {
return <DetectedTokenValues token={args} />;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';

37
ui/components/app/detected-token/detected-token-values/detected-token-values.test.js Normal file
View File

@ -0,0 +1,37 @@
import * as React from 'react';
import { renderWithProvider, screen } from '../../../../../test/jest';
import configureStore from '../../../../store/store';
import testData from '../../../../../.storybook/test-data';
import DetectedTokenValues from './detected-token-values';
describe('DetectedTokenValues', () => {
const args = {
address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
symbol: 'SNX',
decimals: 18,
iconUrl: 'https://assets.coingecko.com/coins/images/3406/large/SNX.png',
aggregators: [
'aave',
'bancor',
'cmc',
'cryptocom',
'coinGecko',
'oneInch',
'paraswap',
'pmm',
'synthetix',
'zapper',
'zerion',
'zeroEx',
],
};
it('should render the detected token address', async () => {
const store = configureStore(testData);
renderWithProvider(<DetectedTokenValues token={args} />, store);
expect(screen.getByText('0 SNX')).toBeInTheDocument();
expect(screen.getByText('$0')).toBeInTheDocument();
});
});

5
ui/components/app/detected-token/detected-token-values/index.scss Normal file
View File

@ -0,0 +1,5 @@
.detected-token-values {
&__checkbox {
margin-left: auto;
}
}