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

@@ -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': {

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,
           });
         }
 

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,
       },

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 (
     <Box
       display={DISPLAY.FLEX}
@@ -35,8 +40,8 @@ const DetectedTokenDetails = ({
           tokensListDetected={tokensListDetected}
         />
         <DetectedTokenAddress tokenAddress={token.address} />
-        {token.aggregators.length && (
-          <DetectedTokenAggregators aggregators={token.aggregators} />
+        {tokenData?.aggregators.length > 0 && (
+          <DetectedTokenAggregators aggregators={tokenData?.aggregators} />
         )}
       </Box>
     </Box>

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();
   });

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();
   });
 });