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

Add token list to token details page (#14051)

Browse Source
This commit is contained in:
Niranjana Binoy 2022-03-22 15:46:18 -04:00 committed by GitHub
parent 8064ec34a1
commit 2f0bc34f4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 222 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json generated
View File

@ -3554,6 +3554,9 @@
"tokenId": { "tokenId": {
"message": "Token ID" "message": "Token ID"
}, },
"tokenList": {
"message": "Token lists:"
},
"tokenSymbol": { "tokenSymbol": {
"message": "Token Symbol" "message": "Token Symbol"
}, },

20
ui/pages/token-details/token-details-page.js
View File

@ -38,6 +38,7 @@ export default function TokenDetailsPage() {
const tokenMetadata = Object.values(tokenList).find((token) => const tokenMetadata = Object.values(tokenList).find((token) =>
isEqualCaseInsensitive(token.address, tokenAddress), isEqualCaseInsensitive(token.address, tokenAddress),
); );
const aggregators = tokenMetadata?.aggregators?.join(', ');
const fileName = tokenMetadata?.iconUrl; const fileName = tokenMetadata?.iconUrl;
const imagePath = useTokenDetection const imagePath = useTokenDetection
? fileName ? fileName
@ -176,6 +177,25 @@ export default function TokenDetailsPage() {
? networkNickname ?? t('privateNetwork') ? networkNickname ?? t('privateNetwork')
: t(networkType)} : t(networkType)}
</Typography> </Typography>
{process.env.TOKEN_DETECTION_V2 && aggregators && (
<>
<Typography
variant={TYPOGRAPHY.H9}
margin={[4, 0, 0, 0]}
color={COLORS.TEXT_ALTERNATIVE}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('tokenList')}
</Typography>
<Typography
variant={TYPOGRAPHY.H7}
margin={[1, 0, 0, 0]}
color={COLORS.TEXT_DEFAULT}
>
{`${aggregators}.`}
</Typography>
</>
)}
<Button <Button
type="secondary" type="secondary"
className="token-details__hide-token-button" className="token-details__hide-token-button"

248
ui/pages/token-details/token-details-page.test.js
View File

@ -6,7 +6,7 @@ import Identicon from '../../components/ui/identicon/identicon.component';
import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils'; import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
import TokenDetailsPage from './token-details-page'; import TokenDetailsPage from './token-details-page';
const testTokenAddress = '0xaD6D458402F60fD3Bd25163575031ACDce07538A'; const testTokenAddress = '0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F';
const state = { const state = {
metamask: { metamask: {
selectedAddress: '0xAddress', selectedAddress: '0xAddress',
@ -15,68 +15,198 @@ const state = {
}, },
useTokenDetection: true, useTokenDetection: true,
tokenList: { tokenList: {
'0x6b175474e89094c44da98b954eedeac495271d0f': { '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
address: '0x6b175474e89094c44da98b954eedeac495271d0f', address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
symbol: 'META', aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Synthetix',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'metamark.svg', iconUrl: 'https://assets.coingecko.com/coins/images/3406/large/SNX.png',
unlisted: false, name: 'Synthetix Network Token',
}, occurrences: 12,
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': { symbol: 'SNX',
address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
symbol: '0X',
decimals: 18,
image: '0x.svg',
unlisted: false,
}, },
'0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': { '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
symbol: 'AST', aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'ast.png', iconUrl:
unlisted: false, 'https://images.prismic.io/token-price-prod/d0352dd9-5de8-4633-839d-bc3422c44d9c_UNI%404x.png',
name: 'Uniswap',
occurrences: 11,
symbol: 'UNI',
},
'0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e': {
address: '0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e',
aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18,
iconUrl:
'https://images.prismic.io/token-price-prod/917bc4fa-59d4-40f5-a3ef-33035698ffe0_YFIxxxhdpi.png',
name: 'yearn.finance',
occurrences: 11,
symbol: 'YFI',
},
'0x408e41876cccdc0f92210600ef50372656052a38': {
address: '0x408e41876cccdc0f92210600ef50372656052a38',
aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18,
iconUrl: 'https://crypto.com/price/coin-data/icon/REN/color_icon.png',
name: 'Republic Token',
occurrences: 11,
symbol: 'REN',
},
'0x2260fac5e5542a773aa44fbcfedf7c193bc2c599': {
address: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',
aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 8,
iconUrl:
'https://images.prismic.io/token-price-prod/c27778b1-f402-45f0-9225-f24f24b0518a_WBTC-xxxhdpi.png',
name: 'Wrapped BTC',
occurrences: 11,
symbol: 'WBTC',
}, },
'0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2': { '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
symbol: 'BAT', aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'BAT_icon.svg', iconUrl: 'https://crypto.com/price/coin-data/icon/MKR/color_icon.png',
unlisted: false, name: 'MakerDAO',
occurrences: 11,
symbol: 'MKR',
}, },
'0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1': { '0x514910771af9ca656af840dff83e8264ecf986ca': {
address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1', address: '0x514910771af9ca656af840dff83e8264ecf986ca',
symbol: 'CVL', aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'CVL_token.svg', iconUrl: 'https://crypto.com/price/coin-data/icon/LINK/color_icon.png',
unlisted: false, name: 'ChainLink Token',
occurrences: 11,
symbol: 'LINK',
}, },
'0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': { '0x6b175474e89094c44da98b954eedeac495271d0f': {
address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e', address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'GLA', aggregators: [
'Aave',
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'gladius.svg', iconUrl: 'https://crypto.com/price/coin-data/icon/DAI/color_icon.png',
unlisted: false, name: 'Dai Stablecoin',
occurrences: 11,
symbol: 'DAI',
}, },
'0x467Bccd9d29f223BcE8043b84E8C8B282827790F': { '0x04fa0d235c4abf4bcf4787af4cf447de572ef828': {
address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F', address: '0x04fa0d235c4abf4bcf4787af4cf447de572ef828',
symbol: 'GNO', aggregators: [
'Bancor',
'CMC',
'Crypto.com',
'CoinGecko',
'1inch',
'Paraswap',
'PMM',
'Zapper',
'Zerion',
'0x',
],
decimals: 18, decimals: 18,
image: 'gnosis.svg', iconUrl:
unlisted: false, 'https://images.prismic.io/token-price-prod/e2850554-ccf6-4514-9c3c-a17e19dea82f_UMAxxxhdpi.png',
}, name: 'UMA',
'0xff20817765cb7f73d4bde2e66e067e58d11095c2': { occurrences: 10,
address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2', symbol: 'UMA',
symbol: 'OMG',
decimals: 18,
image: 'omg.jpg',
unlisted: false,
},
'0x8e870d67f660d95d5be530380d0ec0bd388289e1': {
address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
symbol: 'WED',
decimals: 18,
image: 'wed.png',
unlisted: false,
}, },
}, },
provider: { provider: {
@ -89,7 +219,7 @@ const state = {
tokens: [ tokens: [
{ {
address: testTokenAddress, address: testTokenAddress,
symbol: 'DAA', symbol: 'SNX',
decimals: 18, decimals: 18,
image: 'testImage', image: 'testImage',
isERC721: false, isERC721: false,
@ -187,6 +317,26 @@ describe('TokenDetailsPage', () => {
expect(getByText('Ethereum Mainnet')).toBeInTheDocument(); expect(getByText('Ethereum Mainnet')).toBeInTheDocument();
}); });
it('should render token list title in token details page', () => {
process.env.TOKEN_DETECTION_V2 = true;
const store = configureMockStore()(state);
const { getByText } = renderWithProvider(<TokenDetailsPage />, store);
expect(getByText('Token lists:')).toBeInTheDocument();
process.env.TOKEN_DETECTION_V2 = false;
});
it('should render token list for the token in token details page', () => {
process.env.TOKEN_DETECTION_V2 = true;
const store = configureMockStore()(state);
const { getByText } = renderWithProvider(<TokenDetailsPage />, store);
expect(
getByText(
'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Synthetix, Zapper, Zerion, 0x.',
),
).toBeInTheDocument();
process.env.TOKEN_DETECTION_V2 = false;
});
it('should call hide token button when button is clicked in token details page', () => { it('should call hide token button when button is clicked in token details page', () => {
const store = configureMockStore()(state); const store = configureMockStore()(state);
const { container } = renderWithProvider(<TokenDetailsPage />, store); const { container } = renderWithProvider(<TokenDetailsPage />, store);