UX: Multichain: Added TokenList Component

ui/components/app/asset-list/asset-list.js

@@ -12,21 +12,26 @@ import {
   getNativeCurrencyImage,
   getDetectedTokensInCurrentNetwork,
   getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
+  getTokenList,
 } from '../../../selectors';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
-import Typography from '../../ui/typography/typography';
 import Box from '../../ui/box/box';
 import {
   Color,
-  TypographyVariant,
-  FONT_WEIGHT,
-  JustifyContent,
+  TextVariant,
+  TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 import DetectedToken from '../detected-token/detected-token';
+import {
+  DetectedTokensBanner,
+  MultichainTokenListItem,
+  MultichainImportTokenLink,
+} from '../../multichain';
+import { Text } from '../../component-library';
 import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link';
 
 const AssetList = ({ onClickAsset }) => {
@@ -69,20 +74,38 @@ const AssetList = ({ onClickAsset }) => {
   const istokenDetectionInactiveOnNonMainnetSupportedNetwork = useSelector(
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   );
-
+  const tokenList = useSelector(getTokenList);
+  const tokenData = Object.values(tokenList).find(
+    (token) => token.symbol === primaryCurrencyProperties.suffix,
+  );
+  const title = tokenData?.name || primaryCurrencyProperties.suffix;
   return (
     <>
-      <AssetListItem
-        onClick={() => onClickAsset(nativeCurrency)}
-        data-testid="wallet-balance"
-        primary={
-          primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
-        }
-        tokenSymbol={primaryCurrencyProperties.suffix}
-        secondary={showFiat ? secondaryCurrencyDisplay : undefined}
-        tokenImage={balanceIsLoading ? null : primaryTokenImage}
-        identiconBorder
-      />
+      {process.env.MULTICHAIN ? (
+        <MultichainTokenListItem
+          onClick={() => onClickAsset(nativeCurrency)}
+          title={title}
+          primary={
+            primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
+          }
+          tokenSymbol={primaryCurrencyProperties.suffix}
+          secondary={showFiat ? secondaryCurrencyDisplay : undefined}
+          tokenImage={balanceIsLoading ? null : primaryTokenImage}
+        />
+      ) : (
+        <AssetListItem
+          onClick={() => onClickAsset(nativeCurrency)}
+          data-testid="wallet-balance"
+          primary={
+            primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
+          }
+          tokenSymbol={primaryCurrencyProperties.suffix}
+          secondary={showFiat ? secondaryCurrencyDisplay : undefined}
+          tokenImage={balanceIsLoading ? null : primaryTokenImage}
+          identiconBorder
+        />
+      )}
+
       <TokenList
         onTokenClick={(tokenAddress) => {
           onClickAsset(tokenAddress);
@@ -98,19 +121,36 @@ const AssetList = ({ onClickAsset }) => {
       />
       {detectedTokens.length > 0 &&
         !istokenDetectionInactiveOnNonMainnetSupportedNetwork && (
-          <DetectedTokensLink setShowDetectedTokens={setShowDetectedTokens} />
+          <>
+            {process.env.MULTICHAIN ? (
+              <DetectedTokensBanner
+                actionButtonOnClick={() => setShowDetectedTokens(true)}
+                margin={4}
+              />
+            ) : (
+              <DetectedTokensLink
+                setShowDetectedTokens={setShowDetectedTokens}
+              />
+            )}
+          </>
         )}
       <Box marginTop={detectedTokens.length > 0 ? 0 : 4}>
-        <Box justifyContent={JustifyContent.center}>
-          <Typography
-            color={Color.textAlternative}
-            variant={TypographyVariant.H6}
-            fontWeight={FONT_WEIGHT.NORMAL}
-          >
-            {t('missingToken')}
-          </Typography>
-        </Box>
-        <ImportTokenLink />
+        {process.env.MULTICHAIN ? (
+          <MultichainImportTokenLink margin={4} />
+        ) : (
+          <>
+            <Text
+              color={Color.textAlternative}
+              variant={TextVariant.bodySm}
+              as="h6"
+              textAlign={TEXT_ALIGN.CENTER}
+            >
+              {t('missingToken')}
+            </Text>
+
+            <ImportTokenLink />
+          </>
+        )}
       </Box>
       {showDetectedTokens && (
         <DetectedToken setShowDetectedTokens={setShowDetectedTokens} />

ui/components/app/token-cell/token-cell.js

@@ -3,9 +3,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import AssetListItem from '../asset-list-item';
-import { getSelectedAddress } from '../../../selectors';
+import { getSelectedAddress, getTokenList } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
+import { MultichainTokenListItem } from '../../multichain';
+import { ButtonLink, Text } from '../../component-library';
+import { TextColor } from '../../../helpers/constants/design-system';
 
 export default function TokenCell({
   address,
@@ -19,39 +22,58 @@ export default function TokenCell({
 }) {
   const userAddress = useSelector(getSelectedAddress);
   const t = useI18nContext();
-
+  const tokenList = useSelector(getTokenList);
+  const tokenData = Object.values(tokenList).find(
+    (token) => token.symbol === symbol,
+  );
+  const title = tokenData?.name || symbol;
+  const tokenImage = tokenData?.iconUrl || image;
   const formattedFiat = useTokenFiatAmount(address, string, symbol);
   const warning = balanceError ? (
-    <span>
+    <Text as="span">
       {t('troubleTokenBalances')}
-      <a
+      <ButtonLink
         href={`https://ethplorer.io/address/${userAddress}`}
-        rel="noopener noreferrer"
-        target="_blank"
+        externalLink
         onClick={(event) => event.stopPropagation()}
-        style={{ color: 'var(--color-warning-default)' }}
+        textProps={{
+          color: TextColor.warningDefault,
+        }}
       >
         {t('here')}
-      </a>
-    </span>
+      </ButtonLink>
+    </Text>
   ) : null;
 
   return (
-    <AssetListItem
-      className={classnames('token-cell', {
-        'token-cell--outdated': Boolean(balanceError),
-      })}
-      iconClassName="token-cell__icon"
-      onClick={onClick.bind(null, address)}
-      tokenAddress={address}
-      tokenSymbol={symbol}
-      tokenDecimals={decimals}
-      tokenImage={image}
-      warning={warning}
-      primary={`${string || 0}`}
-      secondary={formattedFiat}
-      isERC721={isERC721}
-    />
+    <>
+      {process.env.MULTICHAIN ? (
+        <MultichainTokenListItem
+          onClick={() => onClick(address)}
+          tokenSymbol={symbol}
+          tokenImage={tokenImage}
+          primary={`${string || 0}`}
+          secondary={formattedFiat}
+          title={title}
+        />
+      ) : (
+        <AssetListItem
+          className={classnames('token-cell', {
+            'token-cell--outdated': Boolean(balanceError),
+          })}
+          iconClassName="token-cell__icon"
+          onClick={() => onClick(address)}
+          tokenAddress={address}
+          tokenSymbol={symbol}
+          tokenDecimals={decimals}
+          tokenImage={image}
+          warning={warning}
+          primary={`${string || 0}`}
+          secondary={formattedFiat}
+          isERC721={isERC721}
+        />
+      )}
+    </>
   );
 }
 

ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetectedTokensBanner should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info multichain-detected-token-banner box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm"
+    data-testid="detected-token-banner"
+  >
+    <span
+      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-primary-default"
+      style="mask-image: url('./images/icons/info.svg');"
+    />
+    <div>
+      <p
+        class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
+      >
+        3 new tokens found in this account
+      </p>
+      <button
+        class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+      >
+        <span
+          class="box mm-text mm-button-base__content mm-text--body-md mm-text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+        >
+          Import tokens
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

ui/components/multichain/detected-token-banner/detected-token-banner.js

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getDetectedTokensInCurrentNetwork } from '../../../selectors';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
+import { BannerAlert } from '../../component-library';
+
+export const DetectedTokensBanner = ({
+  className,
+  actionButtonOnClick,
+  ...props
+}) => {
+  const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
+
+  const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork);
+  const detectedTokensDetails = detectedTokens.map(
+    ({ address, symbol }) => `${symbol} - ${address}`,
+  );
+
+  const handleOnClick = () => {
+    actionButtonOnClick();
+    trackEvent({
+      event: EVENT_NAMES.TOKEN_IMPORT_CLICKED,
+      category: EVENT.CATEGORIES.WALLET,
+      properties: {
+        source: EVENT.SOURCE.TOKEN.DETECTED,
+        tokens: detectedTokensDetails,
+      },
+    });
+  };
+  return (
+    <BannerAlert
+      className={classNames('multichain-detected-token-banner', className)}
+      actionButtonLabel={t('importTokensCamelCase')}
+      actionButtonOnClick={handleOnClick}
+      data-testid="detected-token-banner"
+      {...props}
+    >
+      {detectedTokens.length === 1
+        ? t('numberOfNewTokensDetectedSingular')
+        : t('numberOfNewTokensDetectedPlural', [detectedTokens.length])}
+    </BannerAlert>
+  );
+};
+
+DetectedTokensBanner.propTypes = {
+  /**
+   * Handler to be passed to the DetectedTokenBanner component
+   */
+  actionButtonOnClick: PropTypes.func.isRequired,
+  /**
+   * An additional className to the DetectedTokenBanner component
+   */
+  className: PropTypes.string,
+};

ui/components/multichain/detected-token-banner/detected-token-banner.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DetectedTokensBanner } from './detected-token-banner';
+
+export default {
+  title: 'Components/Multichain/DetectedTokensBanner',
+  component: DetectedTokensBanner,
+  argTypes: {
+    actionButtonOnClick: { action: 'setShowDetectedTokens' },
+  },
+};
+
+export const DefaultStory = (args) => <DetectedTokensBanner {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/multichain/detected-token-banner/detected-token-banner.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { renderWithProvider, screen, fireEvent } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+
+import { DetectedTokensBanner } from './detected-token-banner';
+
+describe('DetectedTokensBanner', () => {
+  let setShowDetectedTokensSpy;
+
+  const args = {};
+
+  beforeEach(() => {
+    setShowDetectedTokensSpy = jest.fn();
+    args.actionButtonOnClick = setShowDetectedTokensSpy;
+  });
+
+  it('should render correctly', () => {
+    const store = configureStore(testData);
+    const { getByTestId, container } = renderWithProvider(
+      <DetectedTokensBanner {...args} />,
+      store,
+    );
+
+    expect(getByTestId('detected-token-banner')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render number of tokens detected link', () => {
+    const store = configureStore(testData);
+    renderWithProvider(<DetectedTokensBanner {...args} />, store);
+
+    expect(
+      screen.getByText('3 new tokens found in this account'),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Import tokens'));
+    expect(setShowDetectedTokensSpy).toHaveBeenCalled();
+  });
+});

ui/components/multichain/detected-token-banner/index.js

@@ -0,0 +1 @@
+export { DetectedTokensBanner } from './detected-token-banner';

ui/components/multichain/index.js

@@ -1,3 +1,6 @@
 export { AccountListItem } from './account-list-item';
 export { AccountListItemMenu } from './account-list-item-menu';
 export { AccountListMenu } from './account-list-menu';
+export { DetectedTokensBanner } from './detected-token-banner';
+export { MultichainImportTokenLink } from './multichain-import-token-link';
+export { MultichainTokenListItem } from './multichain-token-list-item';

ui/components/multichain/multichain-components.scss

@@ -0,0 +1,9 @@
+/**
+* Please import your styles in order of atomicity.
+* The most atomic styles should be imported first.
+* This will help improve specificity and reduce the chance of
+* unintended overrides.
+**/
+@import 'account-list-item/index';
+@import 'account-list-menu/index';
+@import 'multichain-token-list-item/multichain-token-list-item';