Replacing deprecated components and code for import tokens (#19559)

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

test/e2e/swaps/swaps-notifications.spec.js

@@ -141,7 +141,7 @@ describe('Swaps - notifications', function () {
           swapToContractAddress: '0x72c9Fb7ED19D3ce51cea5C56B3e023cd918baaDf',
         });
         await driver.clickElement(
-          '[data-testid="page-container__import-button"]',
+          '[data-testid="import-tokens-import-button"]',
         );
         await checkNotification(driver, {
           title: 'Token added manually',

ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap

@@ -2,12 +2,12 @@
 
 exports[`ModalContent should match snapshot 1`] = `
 <div
-  class="box mm-modal-content box--padding-4 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-flex-start box--width-screen box--height-screen"
+  class="mm-box mm-modal-content mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
   data-testid="test"
 >
   <section
     aria-modal="true"
-    class="box mm-modal-content__dialog mm-modal-content__dialog--size-sm box--margin-top-12 box--margin-bottom-12 box--padding-4 box--flex-direction-row box--width-full box--background-color-background-default box--rounded-lg"
+    class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--sm:margin-top-8 mm-box--md:margin-top-12 mm-box--sm:margin-bottom-8 mm-box--md:margin-bottom-12 mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
     role="dialog"
   >
     test

ui/components/component-library/modal-content/modal-content.tsx

@@ -4,15 +4,13 @@ import classnames from 'classnames';
 import {
   BackgroundColor,
   BorderRadius,
-  BLOCK_SIZES,
-  DISPLAY,
+  BlockSize,
+  Display,
   JustifyContent,
   AlignItems,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
-
-import { ModalFocus, useModalContext } from '..';
+import { Box, ModalFocus, useModalContext } from '..';
 
 import { ModalContentProps, ModalContentSize } from './modal-content.types';
 
@@ -83,9 +81,9 @@ export const ModalContent = forwardRef(
         <Box
           className={classnames('mm-modal-content', className)}
           ref={ref}
-          display={DISPLAY.FLEX}
-          width={BLOCK_SIZES.SCREEN}
-          height={BLOCK_SIZES.SCREEN}
+          display={Display.Flex}
+          width={BlockSize.Screen}
+          height={BlockSize.Screen}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.flexStart}
           padding={4}
@@ -101,9 +99,9 @@ export const ModalContent = forwardRef(
             aria-modal="true"
             backgroundColor={BackgroundColor.backgroundDefault}
             borderRadius={BorderRadius.LG}
-            width={BLOCK_SIZES.FULL}
-            marginTop={12}
-            marginBottom={12}
+            width={BlockSize.Full}
+            marginTop={[null, 8, 12]}
+            marginBottom={[null, 8, 12]}
             padding={4}
             ref={modalDialogRef}
             {...modalDialogProps}

ui/components/component-library/modal-content/modal-content.types.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BoxProps } from '../../ui/box/box.d';
+import type { StyleUtilityProps } from '../box';
 
 /*
  * ModalContent sizes
@@ -11,7 +11,7 @@ export enum ModalContentSize {
   Sm = 'sm',
 }
 
-export interface ModalContentProps extends BoxProps {
+export interface ModalContentProps extends StyleUtilityProps {
   /**
    * The additional className of the ModalContent component
    */
@@ -29,5 +29,5 @@ export interface ModalContentProps extends BoxProps {
   /**
    * Additional props to pass to the dialog node inside of ModalContent component
    */
-  modalDialogProps?: BoxProps | React.HTMLAttributes<HTMLElement>;
+  modalDialogProps?: any;
 }

ui/components/ui/url-icon/url-icon.js

@@ -3,6 +3,15 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import IconWithFallback from '../icon-with-fallback';
 
+/**
+ * @deprecated `<UrlIcon />` has been deprecated in favor of one of the avatar components `<AvatarNetwork />`, `<AvatarToken/>` or `<AvatarFavicon/>`
+ * component in ./ui/components/component-library/avatar-token/
+ * See storybook documentation for BannerAlert here:
+ * {@see {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatartoken--docs}}
+ *
+ * Help to replace `UrlIcon` with `AvatarToken` by submitting a PR
+ */
+
 export default function UrlIcon({ url, className, name, fallbackClassName }) {
   return (
     <IconWithFallback

ui/pages/swaps/dropdown-search-list/dropdown-search-list.js

@@ -179,7 +179,7 @@ export default function DropdownSearchList({
       tabIndex="0"
     >
       {tokenForImport && isImportTokenModalOpen && (
-        <ImportToken {...importTokenProps} />
+        <ImportToken isOpen {...importTokenProps} />
       )}
       {!isOpen && (
         <div

ui/pages/swaps/import-token/import-token.js

@@ -1,91 +1,102 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
-import UrlIcon from '../../../components/ui/url-icon';
-import Popover from '../../../components/ui/popover';
-import Button from '../../../components/ui/button';
-import { Text, BannerAlert, Box } from '../../../components/component-library';
 import {
   TextVariant,
-  FONT_WEIGHT,
   AlignItems,
-  DISPLAY,
+  Display,
   Severity,
+  FlexDirection,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 
+import {
+  Text,
+  Box,
+  BannerAlert,
+  Button,
+  BUTTON_VARIANT,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  AvatarToken,
+  AvatarTokenSize,
+  FormTextField,
+  BUTTON_SIZES,
+  ModalOverlay,
+} from '../../../components/component-library';
+
 export default function ImportToken({
   onImportTokenCloseClick,
   onImportTokenClick,
   setIsImportTokenModalOpen,
   tokenForImport,
+  isOpen,
 }) {
   const t = useContext(I18nContext);
-  const ImportTokenModalFooter = (
-    <>
-      <Button
-        type="secondary"
-        className="page-container__footer-button"
-        onClick={onImportTokenCloseClick}
-      >
-        {t('cancel')}
-      </Button>
-      <Button
-        type="primary"
-        className="page-container__footer-button"
-        onClick={onImportTokenClick}
-        data-testid="page-container__import-button"
-      >
-        {t('import')}
-      </Button>
-    </>
-  );
-
   return (
-    <Popover
-      title={t('importTokenQuestion')}
-      onClose={() => setIsImportTokenModalOpen(false)}
-      footer={ImportTokenModalFooter}
-    >
-      <Box
-        paddingRight={6}
-        paddingBottom={4}
-        paddingLeft={4}
-        alignItems={AlignItems.center}
-        display={DISPLAY.FLEX}
-        className="import-token"
+    <Modal isOpen={isOpen} onClose={() => setIsImportTokenModalOpen(false)}>
+      <ModalOverlay />
+      <ModalContent
+        modalDialogProps={{
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+          alignItems: AlignItems.center,
+          gap: 4,
+        }}
       >
+        <ModalHeader
+          onClose={() => setIsImportTokenModalOpen(false)}
+          width={BlockSize.Full}
+        >
+          {t('importTokenQuestion')}
+        </ModalHeader>
         <BannerAlert
           severity={Severity.Danger}
           description={t('importTokenWarning')}
         />
-        <UrlIcon
-          url={tokenForImport.iconUrl}
-          className="import-token__token-icon"
-          fallbackClassName="import-token__token-icon"
+        <AvatarToken
+          src={tokenForImport.iconUrl}
           name={tokenForImport.symbol}
+          size={AvatarTokenSize.Xl}
         />
-        <Text
-          variant={TextVariant.headingSm}
-          as="h4"
-          fontWeight={FONT_WEIGHT.BOLD}
-          marginTop={2}
-          marginBottom={3}
-        >
+        <Text variant={TextVariant.headingSm} as="h4">
           {tokenForImport.name || ''}
         </Text>
-        <Text variant={TextVariant.bodySm} as="h6">
-          {t('contract')}:
-        </Text>
-        <Text
-          variant={TextVariant.bodySm}
-          className="import-token__contract-address"
-          as="h6"
-          marginBottom={6}
+        <FormTextField
+          label={t('contract')}
+          id="import-tokens-input"
+          inputProps={{ variant: TextVariant.bodySm }}
+          readOnly
+          value={tokenForImport.address || ''}
+          width={BlockSize.Full}
+        />
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Row}
+          gap={4}
+          width={BlockSize.Full}
         >
-          {tokenForImport.address || ''}
-        </Text>
-      </Box>
-    </Popover>
+          <Button
+            variant={BUTTON_VARIANT.SECONDARY}
+            block
+            size={BUTTON_SIZES.LG}
+            onClick={onImportTokenCloseClick}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            variant={BUTTON_VARIANT.PRIMARY}
+            block
+            size={BUTTON_SIZES.LG}
+            onClick={onImportTokenClick}
+            data-testid="import-tokens-import-button"
+          >
+            {t('import')}
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
   );
 }
 
@@ -94,4 +105,5 @@ ImportToken.propTypes = {
   onImportTokenClick: PropTypes.func,
   setIsImportTokenModalOpen: PropTypes.func,
   tokenForImport: PropTypes.object,
+  isOpen: PropTypes.bool,
 };

ui/pages/swaps/import-token/import-token.stories.js

@@ -1,24 +1,26 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import ImportToken from './import-token';
 
 export default {
   title: 'Pages/Swaps/ImportToken',
+  argTypes: {
+    onImportTokenClick: { action: 'Token Imported' },
+    isOpen: { control: 'boolean' },
+    tokenForImport: {
+      control: 'object',
+    },
+  },
+  args: {
+    isOpen: true,
+    tokenForImport: {
+      iconUrl: './BAT_icon.svg',
+      name: 'Basic Attention Token',
+      symbol: 'BAT',
+      address: '0x0d8775f648430679a709e98d2b0cb6250d2887ef',
+    },
+  },
 };
 
-export const DefaultStory = () => {
-  const data = {
-    iconUrl: './BAT_icon.svg',
-    name: 'Basic Attention Token',
-    symbol: 'BAT',
-    address: '0x0d8775f648430679a709e98d2b0cb6250d2887ef',
-  };
-  return (
-    <ImportToken
-      tokenForImport={data}
-      onImportTokenClick={action('Token Imported')}
-    />
-  );
-};
+export const DefaultStory = (args) => <ImportToken {...args} />;
 
 DefaultStory.storyName = 'Default';

ui/pages/swaps/import-token/import-token.test.js

@@ -13,6 +13,7 @@ const createProps = (customProps = {}) => {
       name: 'PoSToken',
       address: '0xee609fe292128cad03b786dbb9bc2634ccdbe7fc',
     },
+    isOpen: true,
     ...customProps,
   };
 };
@@ -20,8 +21,10 @@ const createProps = (customProps = {}) => {
 describe('ImportToken', () => {
   it('renders the component with initial props', () => {
     const props = createProps();
-    const { getByText } = renderWithProvider(<ImportToken {...props} />);
+    const { getByText, getByDisplayValue } = renderWithProvider(
+      <ImportToken {...props} />,
+    );
     expect(getByText(props.tokenForImport.name)).toBeInTheDocument();
-    expect(getByText(props.tokenForImport.address)).toBeInTheDocument();
+    expect(getByDisplayValue(props.tokenForImport.address)).toBeInTheDocument();
   });
 });

ui/pages/swaps/import-token/index.scss

@@ -1,26 +0,0 @@
-.import-token {
-  flex-direction: column;
-
-  .actionable-message {
-    margin-top: 0;
-
-    &__message {
-      color: var(--color-text-default);
-      text-align: left;
-    }
-  }
-
-  &__contract-address {
-    border-radius: 8px;
-    background-color: var(--color-background-alternative);
-    padding: 5px 10px;
-    font-size: 0.75rem;
-  }
-
-  &__token-icon {
-    font-size: $font-size-h2;
-    margin-top: 24px;
-    width: 69px;
-    height: 69px;
-  }
-}

ui/pages/swaps/index.scss

@@ -16,7 +16,6 @@
 @import 'slippage-buttons/index';
 @import 'swaps-footer/index';
 @import 'view-quote/index';
-@import 'import-token/index';
 @import 'create-new-swap/index';
 @import 'view-on-block-explorer/index';
 @import 'transaction-settings/index';

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

@@ -776,7 +776,7 @@ export default function PrepareSwapPage({
     <div className="prepare-swap-page">
       <div className="prepare-swap-page__content">
         {tokenForImport && isImportTokenModalOpen && (
-          <ImportToken {...importTokenProps} />
+          <ImportToken isOpen {...importTokenProps} />
         )}
         <Modal
           onClose={onSwapToClose}