From 32aa47ddb20af7a41f546297c3175e993be5ef1b Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Thu, 15 Sep 2022 11:23:18 -0400
Subject: [PATCH] Displaying the aggregators from tokenList in Detected token
popover (#15835)
* using the aggregators from tokenList instead of detectedToken to avoid conflicts between static and dynamic list
* removing aggregator from the detectTokens object List
---
.storybook/test-data.js | 4 +--
app/scripts/controllers/detect-tokens.js | 3 +--
app/scripts/controllers/detect-tokens.test.js | 10 +++----
.../detected-token-details.js | 9 +++++--
.../detected-token-details.test.js | 2 +-
.../app/detected-token/detected-token.test.js | 26 +++++++++----------
6 files changed, 28 insertions(+), 26 deletions(-)
diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index aff14eef8..e087b6990 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -174,8 +174,8 @@ const state = {
name: 'Falconswap',
iconUrl:
'https://assets.coingecko.com/coins/images/12256/thumb/falconswap.png?1598534184',
- aggregators: ['CoinGecko', '1inch', 'Paraswap', 'Zapper', 'Zerion'],
- occurrences: 12,
+ aggregators: ['CoinGecko', '1inch', 'Lifi'],
+ occurrences:3,
unlisted: false,
},
'0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f': {
diff --git a/app/scripts/controllers/detect-tokens.js b/app/scripts/controllers/detect-tokens.js
index c4b8f7b70..389928bee 100644
--- a/app/scripts/controllers/detect-tokens.js
+++ b/app/scripts/controllers/detect-tokens.js
@@ -150,7 +150,7 @@ export default class DetectTokensController {
if (result) {
const nonZeroTokenAddresses = Object.keys(result);
for (const nonZeroTokenAddress of nonZeroTokenAddresses) {
- const { address, symbol, decimals, aggregators } =
+ const { address, symbol, decimals } =
tokenListUsed[nonZeroTokenAddress];
eventTokensDetails.push(`${symbol} - ${address}`);
@@ -159,7 +159,6 @@ export default class DetectTokensController {
address,
symbol,
decimals,
- aggregators,
});
}
diff --git a/app/scripts/controllers/detect-tokens.test.js b/app/scripts/controllers/detect-tokens.test.js
index 102891abd..2f06b4088 100644
--- a/app/scripts/controllers/detect-tokens.test.js
+++ b/app/scripts/controllers/detect-tokens.test.js
@@ -249,7 +249,7 @@ describe('DetectTokensController', function () {
address: tokenValues[0].address,
symbol: tokenValues[0].symbol,
decimals: tokenValues[0].decimals,
- aggregators: tokenValues[0].aggregators,
+ aggregators: undefined,
image: undefined,
isERC721: undefined,
},
@@ -270,7 +270,7 @@ describe('DetectTokensController', function () {
address: toChecksumHexAddress(tokenValues[0].address),
decimals: tokenValues[0].decimals,
symbol: tokenValues[0].symbol,
- aggregators: tokenValues[0].aggregators,
+ aggregators: undefined,
image: undefined,
isERC721: undefined,
},
@@ -303,7 +303,7 @@ describe('DetectTokensController', function () {
address: existingToken.address,
symbol: existingToken.symbol,
decimals: existingToken.decimals,
- aggregators: existingToken.aggregators,
+ aggregators: undefined,
image: undefined,
isERC721: undefined,
},
@@ -321,7 +321,7 @@ describe('DetectTokensController', function () {
address: toChecksumHexAddress(existingTokenAddress),
decimals: existingToken.decimals,
symbol: existingToken.symbol,
- aggregators: existingToken.aggregators,
+ aggregators: undefined,
image: undefined,
isERC721: undefined,
},
@@ -329,7 +329,7 @@ describe('DetectTokensController', function () {
address: toChecksumHexAddress(tokenAddressToAdd),
decimals: tokenToAdd.decimals,
symbol: tokenToAdd.symbol,
- aggregators: tokenToAdd.aggregators,
+ aggregators: undefined,
image: undefined,
isERC721: undefined,
},
diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.js
index f939ba81c..7bd87f5b4 100644
--- a/ui/components/app/detected-token/detected-token-details/detected-token-details.js
+++ b/ui/components/app/detected-token/detected-token-details/detected-token-details.js
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
import Box from '../../../ui/box';
import Identicon from '../../../ui/identicon';
@@ -7,12 +8,16 @@ import DetectedTokenValues from '../detected-token-values/detected-token-values'
import DetectedTokenAddress from '../detected-token-address/detected-token-address';
import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators';
import { DISPLAY } from '../../../../helpers/constants/design-system';
+import { getTokenList } from '../../../../selectors';
const DetectedTokenDetails = ({
token,
handleTokenSelection,
tokensListDetected,
}) => {
+ const tokenList = useSelector(getTokenList);
+ const tokenData = tokenList[token.address?.toLowerCase()];
+
return (
- {token.aggregators.length && (
-
+ {tokenData?.aggregators.length > 0 && (
+
)}
diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.test.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.test.js
index 456633317..f767d560f 100644
--- a/ui/components/app/detected-token/detected-token-details/detected-token-details.test.js
+++ b/ui/components/app/detected-token/detected-token-details/detected-token-details.test.js
@@ -87,7 +87,7 @@ describe('DetectedTokenDetails', () => {
fireEvent.click(screen.getByText('+ 10 more'));
expect(
screen.getByText(
- 'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1Inch, Paraswap, PMM, Synthetix, Zapper, Zerion, 0x.',
+ 'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Synthetix, Zapper, Zerion, 0x.',
),
).toBeInTheDocument();
});
diff --git a/ui/components/app/detected-token/detected-token.test.js b/ui/components/app/detected-token/detected-token.test.js
index e130708f4..34358ffbb 100644
--- a/ui/components/app/detected-token/detected-token.test.js
+++ b/ui/components/app/detected-token/detected-token.test.js
@@ -23,27 +23,25 @@ describe('DetectedToken', () => {
expect(screen.getByText('0xc00...6888')).toBeInTheDocument();
expect(screen.getByText('0xfff...26DB')).toBeInTheDocument();
expect(screen.getAllByText('From token lists:')).toHaveLength(3);
- expect(screen.getByText('coinGecko, oneInch')).toBeInTheDocument();
- expect(screen.getByText('+ 3 more')).toBeInTheDocument();
- fireEvent.click(screen.getByText('+ 3 more'));
- expect(
- screen.getByText('coinGecko, oneInch, paraswap, zapper, zerion.'),
- ).toBeInTheDocument();
- expect(screen.getByText('bancor, cmc')).toBeInTheDocument();
- expect(screen.getByText('+ 8 more')).toBeInTheDocument();
- fireEvent.click(screen.getByText('+ 8 more'));
+ expect(screen.getByText('Aave, Bancor')).toBeInTheDocument();
+ expect(screen.getByText('+ 9 more')).toBeInTheDocument();
+ fireEvent.click(screen.getByText('+ 9 more'));
expect(
screen.getByText(
- 'bancor, cmc, cryptocom, coinGecko, oneInch, paraswap, pmm, zapper, zerion, zeroEx.',
+ 'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Zapper, Zerion, 0x.',
),
).toBeInTheDocument();
- expect(screen.getByText('aave, cmc')).toBeInTheDocument();
- expect(screen.getByText('+ 5 more')).toBeInTheDocument();
- fireEvent.click(screen.getByText('+ 5 more'));
+ expect(screen.getByText('Bancor, CMC')).toBeInTheDocument();
+ expect(screen.getByText('+ 8 more')).toBeInTheDocument();
+ fireEvent.click(screen.getByText('+ 8 more'));
expect(
screen.getByText(
- 'aave, cmc, coinGecko, oneInch, paraswap, zapper, zerion.',
+ 'Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Zapper, Zerion, 0x.',
),
).toBeInTheDocument();
+ expect(screen.getByText('CoinGecko, 1inch')).toBeInTheDocument();
+ expect(screen.getByText('+ 1 more')).toBeInTheDocument();
+ fireEvent.click(screen.getByText('+ 1 more'));
+ expect(screen.getByText('CoinGecko, 1inch, Lifi.')).toBeInTheDocument();
});
});