From c88efadf1e322d6f96963162ec5eefae4e2efbd3 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 25 Oct 2022 08:03:45 -0700
Subject: [PATCH] =?UTF-8?q?Remove=20ETH=20badge=20from=20NetworkAccountBal?=
 =?UTF-8?q?anceHeader=20when=20on=20non-ETH=20net=E2=80=A6=20(#16102)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH networks

* Network specific icons, or fallback, in the network-account-balance-header

* Update snapshots

* Code cleanup

Co-authored-by: Dan Miller <danjm.com@gmail.com>
---
 .../confirm-page-container.component.js       |  1 +
 .../network-account-balance-header/index.scss | 19 ++++++++-
 .../network-account-balance-header.js         | 21 ++++++----
 .../icon-with-fallback.component.js           | 42 ++++++++++++-------
 .../dropdown-search-list.test.js.snap         | 14 ++++---
 .../main-quote-summary.test.js.snap           | 24 +++++++----
 .../searchable-item-list.test.js.snap         | 14 ++++---
 .../item-list.component.test.js.snap          | 14 ++++---
 .../__snapshots__/view-quote.test.js.snap     | 28 ++++++++-----
 ui/pages/token-allowance/token-allowance.js   |  1 +
 10 files changed, 121 insertions(+), 57 deletions(-)

diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js
index edb124001..a972aee17 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js
@@ -217,6 +217,7 @@ export default class ConfirmPageContainer extends Component {
               tokenName={nativeCurrency}
               accountAddress={fromAddress}
               networkName={networkName}
+              chainId={currentTransaction.chainId}
             />
           ) : (
             <ConfirmPageContainerHeader
diff --git a/ui/components/app/network-account-balance-header/index.scss b/ui/components/app/network-account-balance-header/index.scss
index fc28883b8..80a4b7fca 100644
--- a/ui/components/app/network-account-balance-header/index.scss
+++ b/ui/components/app/network-account-balance-header/index.scss
@@ -3,10 +3,25 @@
   border-bottom: 1px solid var(--color-border-muted);
 
   &__network-account {
-    &__ident-icon-ethereum {
+    &__ident-icon-ethereum,
+    &__ident-icon-ethereum--gray {
+      height: 18px;
+      width: 18px;
+      border-radius: 50%;
+      border: 1px solid var(--color-background-default);
+      background: var(--color-background-default);
       margin-inline-start: -10px;
       margin-top: -20px;
-      border: none !important;
+
+      > span {
+        display: flex;
+        justify-content: center;
+        line-height: 18px;
+      }
+    }
+
+    &__ident-icon-ethereum--gray {
+      border: 1px solid var(--color-border-default);
     }
   }
 }
diff --git a/ui/components/app/network-account-balance-header/network-account-balance-header.js b/ui/components/app/network-account-balance-header/network-account-balance-header.js
index 217111c16..fbf5291b1 100644
--- a/ui/components/app/network-account-balance-header/network-account-balance-header.js
+++ b/ui/components/app/network-account-balance-header/network-account-balance-header.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import IconWithFallback from '../../ui/icon-with-fallback';
 import Identicon from '../../ui/identicon';
 import {
   DISPLAY,
@@ -14,15 +15,21 @@ import {
 import Box from '../../ui/box/box';
 import { I18nContext } from '../../../contexts/i18n';
 import Typography from '../../ui/typography';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
 
 export default function NetworkAccountBalanceHeader({
   networkName,
   accountName,
   accountBalance,
-  tokenName,
+  tokenName, // Derived from nativeCurrency
   accountAddress,
+  chainId,
 }) {
   const t = useContext(I18nContext);
+  const networkIcon = CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId];
+  const networkIconWrapperClass = networkIcon
+    ? 'network-account-balance-header__network-account__ident-icon-ethereum'
+    : 'network-account-balance-header__network-account__ident-icon-ethereum--gray';
 
   return (
     <Box
@@ -45,12 +52,11 @@ export default function NetworkAccountBalanceHeader({
           alignItems={ALIGN_ITEMS.CENTER}
         >
           <Identicon address={accountAddress} diameter={32} />
-          <Identicon
-            address={accountAddress}
-            diameter={16}
-            imageBorder
-            image="./images/eth_badge.svg"
-            className="network-account-balance-header__network-account__ident-icon-ethereum"
+          <IconWithFallback
+            name={networkName}
+            size={16}
+            icon={networkIcon}
+            wrapperClassName={networkIconWrapperClass}
           />
         </Box>
         <Box
@@ -109,4 +115,5 @@ NetworkAccountBalanceHeader.propTypes = {
   accountBalance: PropTypes.string,
   tokenName: PropTypes.string,
   accountAddress: PropTypes.string,
+  chainId: PropTypes.string,
 };
diff --git a/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js b/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
index cbf61b599..62be33e94 100644
--- a/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
+++ b/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
@@ -8,6 +8,7 @@ const IconWithFallback = ({
   size,
   className,
   fallbackClassName,
+  wrapperClassName,
   ...props
 }) => {
   const [iconError, setIconError] = useState(false);
@@ -17,21 +18,28 @@ const IconWithFallback = ({
     setIconError(true);
   };
 
-  return !iconError && icon ? (
-    <img
-      onError={handleOnError}
-      src={icon}
-      style={style}
-      className={className}
-      alt={name || 'icon'}
-      {...props}
-    />
-  ) : (
-    <span
-      className={classnames('icon-with-fallback__fallback', fallbackClassName)}
-    >
-      {name && name.length ? name.charAt(0).toUpperCase() : ''}
-    </span>
+  return (
+    <div className={classnames(wrapperClassName)}>
+      {!iconError && icon ? (
+        <img
+          onError={handleOnError}
+          src={icon}
+          style={style}
+          className={className}
+          alt={name || 'icon'}
+          {...props}
+        />
+      ) : (
+        <span
+          className={classnames(
+            'icon-with-fallback__fallback',
+            fallbackClassName,
+          )}
+        >
+          {name?.charAt(0).toUpperCase() || ''}
+        </span>
+      )}
+    </div>
   );
 };
 
@@ -52,6 +60,10 @@ IconWithFallback.propTypes = {
    * className to apply to the image tag
    */
   className: PropTypes.string,
+  /**
+   * className to apply to the div that wraps the icon
+   */
+  wrapperClassName: PropTypes.string,
   /**
    * Additional className to apply to the fallback span tag
    */
diff --git a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
index d863077c5..ee9809186 100644
--- a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
+++ b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
@@ -13,11 +13,15 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
       <div
         class="dropdown-search-list__selector-closed"
       >
-        <img
-          alt="symbol"
-          class="url-icon dropdown-search-list__selector-closed-icon"
-          src="iconUrl"
-        />
+        <div
+          class=""
+        >
+          <img
+            alt="symbol"
+            class="url-icon dropdown-search-list__selector-closed-icon"
+            src="iconUrl"
+          />
+        </div>
         <div
           class="dropdown-search-list__labels"
         >
diff --git a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
index 792e6a5fa..078c54117 100644
--- a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
+++ b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
@@ -11,11 +11,15 @@ exports[`MainQuoteSummary renders the component with initial props 1`] = `
   >
     2
   </span>
-  <span
-    class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+  <div
+    class=""
   >
-    E
-  </span>
+    <span
+      class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+    >
+      E
+    </span>
+  </div>
   <span
     class="main-quote-summary__source-row-symbol"
     title="ETH"
@@ -29,11 +33,15 @@ exports[`MainQuoteSummary renders the component with initial props 2`] = `
 <div
   class="main-quote-summary__destination-row"
 >
-  <span
-    class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+  <div
+    class=""
   >
-    B
-  </span>
+    <span
+      class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+    >
+      B
+    </span>
+  </div>
   <span
     class="main-quote-summary__destination-row-symbol"
   >
diff --git a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
index ef3d79349..acf652948 100644
--- a/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
+++ b/ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
@@ -42,11 +42,15 @@ exports[`SearchableItemList renders the component with initial props 2`] = `
   data-testid="searchable-item-list__item"
   tabindex="0"
 >
-  <img
-    alt="primaryLabel"
-    class="url-icon"
-    src="iconUrl"
-  />
+  <div
+    class=""
+  >
+    <img
+      alt="primaryLabel"
+      class="url-icon"
+      src="iconUrl"
+    />
+  </div>
   <div
     class="searchable-item-list__labels"
   >
diff --git a/ui/pages/swaps/searchable-item-list/item-list/__snapshots__/item-list.component.test.js.snap b/ui/pages/swaps/searchable-item-list/item-list/__snapshots__/item-list.component.test.js.snap
index 017941d8d..89d3c0343 100644
--- a/ui/pages/swaps/searchable-item-list/item-list/__snapshots__/item-list.component.test.js.snap
+++ b/ui/pages/swaps/searchable-item-list/item-list/__snapshots__/item-list.component.test.js.snap
@@ -6,11 +6,15 @@ exports[`ItemList renders the component with initial props 1`] = `
   data-testid="searchable-item-list__item"
   tabindex="0"
 >
-  <img
-    alt="primaryLabel"
-    class="url-icon"
-    src="iconUrl"
-  />
+  <div
+    class=""
+  >
+    <img
+      alt="primaryLabel"
+      class="url-icon"
+      src="iconUrl"
+    />
+  </div>
   <div
     class="searchable-item-list__labels"
   >
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
index b317d3cbf..de5c4da43 100644
--- a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -11,11 +11,15 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 1`] = `
   >
     10
   </span>
-  <img
-    alt="DAI"
-    class="url-icon main-quote-summary__icon"
-    src="https://foo.bar/logo.png"
-  />
+  <div
+    class=""
+  >
+    <img
+      alt="DAI"
+      class="url-icon main-quote-summary__icon"
+      src="https://foo.bar/logo.png"
+    />
+  </div>
   <span
     class="main-quote-summary__source-row-symbol"
     title="DAI"
@@ -85,11 +89,15 @@ exports[`ViewQuote renders the component with initial props 1`] = `
   >
     10
   </span>
-  <img
-    alt="DAI"
-    class="url-icon main-quote-summary__icon"
-    src="https://foo.bar/logo.png"
-  />
+  <div
+    class=""
+  >
+    <img
+      alt="DAI"
+      class="url-icon main-quote-summary__icon"
+      src="https://foo.bar/logo.png"
+    />
+  </div>
   <span
     class="main-quote-summary__source-row-symbol"
     title="DAI"
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index 201c0a364..33cde65fd 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -178,6 +178,7 @@ export default function TokenAllowance({
         accountBalance={currentTokenBalance}
         tokenName={tokenSymbol}
         accountAddress={userAddress}
+        chainId={fullTxData.chainId}
       />
       <Box
         display={DISPLAY.FLEX}