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

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,7 +18,9 @@ const IconWithFallback = ({
     setIconError(true);
   };
 
-  return !iconError && icon ? (
+  return (
+    <div className={classnames(wrapperClassName)}>
+      {!iconError && icon ? (
         <img
           onError={handleOnError}
           src={icon}
@@ -28,10 +31,15 @@ const IconWithFallback = ({
         />
       ) : (
         <span
-      className={classnames('icon-with-fallback__fallback', fallbackClassName)}
+          className={classnames(
+            'icon-with-fallback__fallback',
+            fallbackClassName,
+          )}
         >
-      {name && name.length ? name.charAt(0).toUpperCase() : ''}
+          {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,12 +12,16 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
     >
       <div
         class="dropdown-search-list__selector-closed"
+      >
+        <div
+          class=""
         >
           <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>
+  <div
+    class=""
+  >
     <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"
@@ -28,12 +32,16 @@ exports[`MainQuoteSummary renders the component with initial props 1`] = `
 exports[`MainQuoteSummary renders the component with initial props 2`] = `
 <div
   class="main-quote-summary__destination-row"
+>
+  <div
+    class=""
   >
     <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,12 +41,16 @@ exports[`SearchableItemList renders the component with initial props 2`] = `
   class="searchable-item-list__item searchable-item-list__item--selected"
   data-testid="searchable-item-list__item"
   tabindex="0"
+>
+  <div
+    class=""
   >
     <img
       alt="primaryLabel"
       class="url-icon"
       src="iconUrl"
     />
+  </div>
   <div
     class="searchable-item-list__labels"
   >

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

@@ -5,12 +5,16 @@ exports[`ItemList renders the component with initial props 1`] = `
   class="searchable-item-list__item searchable-item-list__item--selected"
   data-testid="searchable-item-list__item"
   tabindex="0"
+>
+  <div
+    class=""
   >
     <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>
+  <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>
+  <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"

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}