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>
2 years ago · c88efadf1e
parent 68642ee47a
commit c88efadf1e
10 changed files with 121 additions and 57 deletions
--- 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
--- 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);
    }
  }
 }
--- 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,
 };
--- 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
   */
--- 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"
        >
--- 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"
  >
--- 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"
  >
--- 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"
  >
--- 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"
--- 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}