Token Details component for Tokens Detected page (#14169)

ui/components/app/app-components.scss

@@ -87,3 +87,4 @@
 @import 'detected-token/detected-token-address/index';
 @import 'detected-token/detected-token-aggregators/index';
 @import 'detected-token/detected-token-values/index';
+@import 'detected-token/detected-token-details/index'

ui/components/app/detected-token/detected-token-details/detected-token-details.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import Box from '../../../ui/box';
+import Identicon from '../../../ui/identicon';
+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 = ({ tokenAddress }) => {
+  const tokenList = useSelector(getTokenList);
+  const token = tokenList[tokenAddress];
+
+  return (
+    <Box display={DISPLAY.FLEX} className="detected-token-details">
+      <Identicon
+        className="detected-token-details__identicon"
+        address={tokenAddress}
+        diameter={40}
+      />
+      <Box
+        display={DISPLAY.GRID}
+        marginLeft={2}
+        className="detected-token-details__data"
+      >
+        <DetectedTokenValues token={token} />
+        <DetectedTokenAddress address={token.address} />
+        <DetectedTokenAggregators aggregatorsList={token.aggregators} />
+      </Box>
+    </Box>
+  );
+};
+
+DetectedTokenDetails.propTypes = {
+  tokenAddress: PropTypes.string,
+};
+
+export default DetectedTokenDetails;

ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import DetectedTokenDetails from './detected-token-details';
+
+export default {
+  title: 'Components/App/DetectedToken/DetectedTokenDetails',
+  id: __filename,
+  argTypes: {
+    address: { control: 'text' },
+  },
+  args: {
+    address: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ width: '320px' }}>
+      <DetectedTokenDetails tokenAddress={args.address} />
+    </div>
+  );
+};
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.storyName = 'Default';

ui/components/app/detected-token/detected-token-details/detected-token-details.test.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  renderWithProvider,
+  screen,
+  fireEvent,
+} from '../../../../../test/jest';
+import configureStore from '../../../../store/store';
+import testData from '../../../../../.storybook/test-data';
+
+import DetectedTokenDetails from './detected-token-details';
+
+describe('DetectedTokenDetails', () => {
+  const args = {
+    tokenAddress: '0xc011a73ee8576fb46f5e1c5751ca3b9fe0af2a6f',
+  };
+
+  it('should render the detected token details', async () => {
+    const store = configureStore(testData);
+    renderWithProvider(<DetectedTokenDetails {...args} />, store);
+
+    expect(screen.getByText('0 SNX')).toBeInTheDocument();
+    expect(screen.getByText('$0')).toBeInTheDocument();
+    expect(screen.getByText('Token address:')).toBeInTheDocument();
+    expect(screen.getByText('0xc01...2a6f')).toBeInTheDocument();
+    expect(screen.getByText('From token lists:')).toBeInTheDocument();
+    expect(screen.getByText('Aave, Bancor')).toBeInTheDocument();
+    expect(screen.getByText('+ 10 more')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('+ 10 more'));
+    expect(
+      screen.getByText(
+        'Aave, Bancor, CMC, Crypto.com, CoinGecko, 1inch, Paraswap, PMM, Synthetix, Zapper, Zerion, 0x.',
+      ),
+    ).toBeInTheDocument();
+  });
+});

ui/components/app/detected-token/detected-token-details/index.scss

@@ -0,0 +1,9 @@
+.detected-token-details {
+  &__identicon {
+    margin-top: 4px;
+  }
+
+  &__data {
+    flex-grow: 1;
+  }
+}