Replacing deprecated constants and components (#19718)

* Replacing deprecated constants and components

* updating button component

* updating snapshot

* more snapshot updates

* suggested changes

* Fixing e2e tests

* Updating deprecated components

* More updates to style and layout

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/ui/deprecated-test-networks/deprecated-test-networks.js

@@ -1,25 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import Button from '../button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import {
-  DISPLAY,
-  JustifyContent,
-  TextVariant,
-  Color,
-} from '../../../helpers/constants/design-system';
-import Box from '../box/box';
-import ActionableMessage from '../actionable-message/actionable-message';
+import { Severity } from '../../../helpers/constants/design-system';
+
 import { getCurrentChainId } from '../../../selectors';
 import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
-import { Icon, IconName, IconSize, Text } from '../../component-library';
+import { BannerAlert, BUTTON_VARIANT } from '../../component-library';
 
 export default function DeprecatedTestNetworks() {
   const currentChainID = useSelector(getCurrentChainId);
   const [isShowingWarning, setIsShowingWarning] = useState(false);
   const completedOnboarding = useSelector(getCompletedOnboarding);
   const t = useI18nContext();
-
   useEffect(() => {
     if (
       completedOnboarding &&
@@ -35,48 +27,19 @@ export default function DeprecatedTestNetworks() {
 
   return (
     isShowingWarning && (
-      <ActionableMessage
-        type="warning"
+      <BannerAlert
+        severity={Severity.Warning}
         className="deprecated-test-networks"
-        withRightButton
-        message={
-          <Box
-            display={DISPLAY.FLEX}
-            className="deprecated-test-networks__content"
-          >
-            <Box marginRight={2} color={Color.warningDefault}>
-              <Icon name={IconName.Info} size={IconSize.Sm} />
-            </Box>
-            <Box justifyContent={JustifyContent.spaceBetween}>
-              <Text
-                variant={TextVariant.bodySm}
-                as="h6"
-                marginTop={0}
-                marginBottom={0}
-              >
-                {t('deprecatedTestNetworksMsg')}
-
-                <Button
-                  className="deprecated-test-networks__content__inline-link"
-                  type="link"
-                  target="_blank"
-                  href="https://blog.ethereum.org/2022/06/21/testnet-deprecation/"
-                >
-                  {' '}
-                  {t('deprecatedTestNetworksLink')}
-                </Button>
-              </Text>
-
-              <Box
-                className="deprecated-test-networks__content__close"
-                marginLeft={2}
-                marginTop={0}
-                color={Color.iconAlternative}
-                onClick={() => setIsShowingWarning(false)}
-              />
-            </Box>
-          </Box>
-        }
+        description={t('deprecatedTestNetworksMsg')}
+        onClose={() => setIsShowingWarning(false)}
+        margin={2}
+        actionButtonLabel={t('deprecatedTestNetworksLink')}
+        actionButtonProps={{
+          className: 'deprecated-test-networks__content__inline-link',
+          href: 'https://blog.ethereum.org/2022/06/21/testnet-deprecation/',
+          variant: BUTTON_VARIANT.LINK,
+          externalLink: true,
+        }}
       />
     )
   );

ui/components/ui/deprecated-test-networks/deprecated-test-networks.stories.js

@@ -1,8 +1,22 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import testData from '../../../../.storybook/test-data';
+import configureStore from '../../../store/store';
+
 import DeprecatedTestNetworks from './deprecated-test-networks';
 
+const store = configureStore({
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    completedOnboarding: true,
+    providerConfig: { chainId: '0x3' },
+  },
+});
+
 export default {
   title: 'Components/UI/DeprecatedTestNetworks',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
 };
 
 export const DefaultStory = () => <DeprecatedTestNetworks />;

ui/components/ui/deprecated-test-networks/index.scss

@@ -1,21 +1,5 @@
 .deprecated-test-networks {
   position: fixed;
   bottom: 0;
-  margin: 8px;
   z-index: 1050;
-
-  &__content {
-    &__inline-link {
-      @include H7;
-
-      display: initial;
-      padding: 0;
-    }
-
-    &__close::after {
-      content: '\00D7';
-      font-size: 24px;
-      cursor: pointer;
-    }
-  }
 }

ui/components/ui/nft-info/index.scss

@@ -1,9 +0,0 @@
-.nft-info {
-  &__content {
-    width: 100%;
-  }
-
-  &__button {
-    padding: 0;
-  }
-}

ui/components/ui/nft-info/nft-info.js

@@ -7,41 +7,38 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import Identicon from '../identicon';
-import { Text, Button, Box, BUTTON_VARIANT } from '../../component-library';
+import {
+  Text,
+  Box,
+  ButtonLink,
+  AvatarAccount,
+  AvatarAccountSize,
+} from '../../component-library';
 
 export default function NftInfo({ assetName, tokenAddress, tokenId }) {
   const t = useContext(I18nContext);
-
   return (
     <Box
-      display={Display.Flex}
       className="nft-info"
+      display={Display.Flex}
+      gap={4}
       backgroundColor={BackgroundColor.backgroundAlternative}
+      padding={4}
     >
-      <Box display={Display.Flex} className="nft-info__content">
-        <Box margin={4}>
-          <Identicon address={tokenAddress} diameter={24} />
-        </Box>
-        <Box>
-          <Text variant={TextVariant.bodySmBold} as="h6" marginTop={4}>
-            {assetName}
-          </Text>
-          <Text
-            variant={TextVariant.bodySm}
-            as="h6"
-            marginBottom={4}
-            color={TextColor.textAlternative}
-          >
-            {t('tokenId')} #{tokenId}
-          </Text>
-        </Box>
-      </Box>
-      <Box marginTop={4} marginRight={4}>
-        <Button className="nft-info__button" variant={BUTTON_VARIANT.LINK}>
-          {t('view')}
-        </Button>
-      </Box>
+      <AvatarAccount address={tokenAddress} size={AvatarAccountSize.Md} />
+      <div style={{ overflow: 'hidden' }}>
+        <Text variant={TextVariant.bodySmBold} ellipsis>
+          {assetName}
+        </Text>
+        <Text
+          variant={TextVariant.bodySm}
+          color={TextColor.textAlternative}
+          ellipsis
+        >
+          {t('tokenId')} #{tokenId}
+        </Text>
+      </div>
+      <ButtonLink marginLeft="auto">{t('view')}</ButtonLink>
     </Box>
   );
 }

ui/components/ui/ui-components.scss

@@ -57,7 +57,6 @@
 @import 'update-nickname-popover/index';
 @import 'disclosure/disclosure';
 @import 'deprecated-test-networks/index.scss';
-@import 'nft-info/index.scss';
 @import 'nft-collection-image/index';
 @import '../institutional/custody-labels/index';
 @import '../institutional/note-to-trader/index';