Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH net… (#16102)

* 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>

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

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);
     }
   }
 }

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
+          <IconWithFallback
-            address={accountAddress}
+            name={networkName}
-            diameter={16}
+            size={16}
-            imageBorder
+            icon={networkIcon}
-            image="./images/eth_badge.svg"
+            wrapperClassName={networkIconWrapperClass}
-            className="network-account-balance-header__network-account__ident-icon-ethereum"
           />
         </Box>
         <Box
@@ -109,4 +115,5 @@ NetworkAccountBalanceHeader.propTypes = {
   accountBalance: PropTypes.string,
   tokenName: PropTypes.string,
   accountAddress: PropTypes.string,
+  chainId: PropTypes.string,
 };

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 ? (
+  return (
-    <img
+    <div className={classnames(wrapperClassName)}>
-      onError={handleOnError}
+      {!iconError && icon ? (
-      src={icon}
+        <img
-      style={style}
+          onError={handleOnError}
-      className={className}
+          src={icon}
-      alt={name || 'icon'}
+          style={style}
-      {...props}
+          className={className}
-    />
+          alt={name || 'icon'}
-  ) : (
+          {...props}
-    <span
+        />
-      className={classnames('icon-with-fallback__fallback', fallbackClassName)}
+      ) : (
-    >
+        <span
-      {name && name.length ? name.charAt(0).toUpperCase() : ''}
+          className={classnames(
-    </span>
+            '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
    */

ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap

@@ -12,11 +12,15 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
       <div
         class="dropdown-search-list__selector-closed"
       >
-        <img
+        <div
-          alt="symbol"
+          class=""
-          class="url-icon dropdown-search-list__selector-closed-icon"
+        >
-          src="iconUrl"
+          <img
-        />
+            alt="symbol"
+            class="url-icon dropdown-search-list__selector-closed-icon"
+            src="iconUrl"
+          />
+        </div>
         <div
           class="dropdown-search-list__labels"
         >

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
+  <div
-    class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+    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
+  <div
-    class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
+    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"
   >

ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap

@@ -41,11 +41,15 @@ exports[`SearchableItemList renders the component with initial props 2`] = `
   class="searchable-item-list__item searchable-item-list__item--selected"
   tabindex="0"
 >
-  <img
+  <div
-    alt="primaryLabel"
+    class=""
-    class="url-icon"
+  >
-    src="iconUrl"
+    <img
-  />
+      alt="primaryLabel"
+      class="url-icon"
+      src="iconUrl"
+    />
+  </div>
   <div
     class="searchable-item-list__labels"
   >

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
+  <div
-    alt="DAI"
+    class=""
-    class="url-icon main-quote-summary__icon"
+  >
-    src="https://foo.bar/logo.png"
+    <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"
@@ -83,11 +87,15 @@ exports[`ViewQuote renders the component with initial props 1`] = `
   >
     10
   </span>
-  <img
+  <div
-    alt="DAI"
+    class=""
-    class="url-icon main-quote-summary__icon"
+  >
-    src="https://foo.bar/logo.png"
+    <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"