Ensure correct primary currency image is displayed on home screen and token list (#10777)

shared/constants/network.js

@@ -31,6 +31,14 @@ export const KOVAN_DISPLAY_NAME = 'Kovan';
 export const MAINNET_DISPLAY_NAME = 'Ethereum Mainnet';
 export const GOERLI_DISPLAY_NAME = 'Goerli';
 
+export const ETH_SYMBOL = 'ETH';
+export const TEST_ETH_SYMBOL = 'TESTETH';
+export const BNB_SYMBOL = 'BNB';
+
+export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.svg';
+export const TEST_ETH_TOKEN_IMAGE_URL = './images/black-eth-logo.svg';
+export const BNB_TOKEN_IMAGE_URL = './images/bnb.png';
+
 export const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI];
 
 export const TEST_CHAINS = [
@@ -81,3 +89,9 @@ export const CHAIN_ID_TO_NETWORK_ID_MAP = Object.values(
   chainIdToNetworkIdMap[chainId] = networkId;
   return chainIdToNetworkIdMap;
 }, {});
+
+export const NATIVE_CURRENCY_TOKEN_IMAGE_MAP = {
+  [ETH_SYMBOL]: ETH_TOKEN_IMAGE_URL,
+  [TEST_ETH_SYMBOL]: TEST_ETH_TOKEN_IMAGE_URL,
+  [BNB_SYMBOL]: BNB_TOKEN_IMAGE_URL,
+};

shared/constants/swaps.js

@@ -1,4 +1,11 @@
-import { MAINNET_CHAIN_ID } from './network';
+import {
+  MAINNET_CHAIN_ID,
+  ETH_SYMBOL,
+  TEST_ETH_SYMBOL,
+  BNB_SYMBOL,
+  TEST_ETH_TOKEN_IMAGE_URL,
+  BNB_TOKEN_IMAGE_URL,
+} from './network';
 
 export const QUOTES_EXPIRED_ERROR = 'quotes-expired';
 export const SWAP_FAILED_ERROR = 'swap-failed-error';
@@ -11,27 +18,27 @@ export const SWAPS_FETCH_ORDER_CONFLICT = 'swaps-fetch-order-conflict';
 const DEFAULT_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
 
 export const ETH_SWAPS_TOKEN_OBJECT = {
-  symbol: 'ETH',
+  symbol: ETH_SYMBOL,
   name: 'Ether',
   address: DEFAULT_TOKEN_ADDRESS,
   decimals: 18,
-  iconUrl: 'images/black-eth-logo.svg',
+  iconUrl: './images/black-eth-logo.svg',
 };
 
-const BNB_SWAPS_TOKEN_OBJECT = {
-  symbol: 'BNB',
+export const BNB_SWAPS_TOKEN_OBJECT = {
+  symbol: BNB_SYMBOL,
   name: 'Binance Coin',
   address: DEFAULT_TOKEN_ADDRESS,
   decimals: 18,
-  iconUrl: 'images/bnb.png',
+  iconUrl: BNB_TOKEN_IMAGE_URL,
 };
 
-const TEST_ETH_SWAPS_TOKEN_OBJECT = {
-  symbol: 'TESTETH',
+export const TEST_ETH_SWAPS_TOKEN_OBJECT = {
+  symbol: TEST_ETH_SYMBOL,
   name: 'Test Ether',
   address: DEFAULT_TOKEN_ADDRESS,
   decimals: 18,
-  iconUrl: 'images/black-eth-logo.svg',
+  iconUrl: TEST_ETH_TOKEN_IMAGE_URL,
 };
 
 // A gas value for ERC20 approve calls that should be sufficient for all ERC20 approve implementations
@@ -46,7 +53,7 @@ const BSC_CONTRACT_ADDRESS = '0x1a1ec25dc08e98e5e93f1104b5e5cdd298707d31';
 const METASWAP_ETH_API_HOST = 'https://api.metaswap.codefi.network';
 
 const METASWAP_BNB_API_HOST = 'https://bsc-api.metaswap.codefi.network';
-const BNB_CHAIN_ID = '0x38';
+export const BNB_CHAIN_ID = '0x38';
 
 const SWAPS_TESTNET_CHAIN_ID = '0x539';
 const SWAPS_TESTNET_HOST = 'https://metaswap-api.airswap-dev.codefi.network';

ui/app/components/app/asset-list-item/asset-list-item.js

@@ -26,6 +26,7 @@ const AssetListItem = ({
   warning,
   primary,
   secondary,
+  identiconBorder,
 }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
@@ -115,6 +116,7 @@ const AssetListItem = ({
           address={tokenAddress}
           image={tokenImage}
           alt={`${primary} ${tokenSymbol}`}
+          imageBorder={identiconBorder}
         />
       }
       midContent={midContent}
@@ -140,6 +142,7 @@ AssetListItem.propTypes = {
   warning: PropTypes.node,
   primary: PropTypes.string,
   secondary: PropTypes.string,
+  identiconBorder: PropTypes.bool,
 };
 
 AssetListItem.defaultProps = {

ui/app/components/app/asset-list/asset-list.js

@@ -13,6 +13,7 @@ import {
   getCurrentAccountWithSendEtherInfo,
   getNativeCurrency,
   getShouldShowFiat,
+  getNativeCurrencyImage,
 } from '../../../selectors';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 
@@ -63,6 +64,8 @@ const AssetList = ({ onClickAsset }) => {
     },
   );
 
+  const primaryTokenImage = useSelector(getNativeCurrencyImage);
+
   return (
     <>
       <AssetListItem
@@ -71,6 +74,8 @@ const AssetList = ({ onClickAsset }) => {
         primary={primaryCurrencyProperties.value}
         tokenSymbol={primaryCurrencyProperties.suffix}
         secondary={showFiat ? secondaryCurrencyDisplay : undefined}
+        tokenImage={primaryTokenImage}
+        identiconBorder
       />
       <TokenList
         onTokenClick={(tokenAddress) => {

ui/app/components/app/wallet-overview/eth-overview.js

@@ -27,6 +27,7 @@ import {
   getCurrentKeyring,
   getSwapsDefaultToken,
   getIsSwapsChain,
+  getNativeCurrencyImage,
 } from '../../../selectors/selectors';
 import SwapIcon from '../../ui/icon/swap-icon.component';
 import BuyIcon from '../../ui/icon/overview-buy-icon.component';
@@ -65,6 +66,8 @@ const EthOverview = ({ className }) => {
   const isMainnetChain = useSelector(getIsMainnet);
   const isTestnetChain = useSelector(getIsTestnet);
   const isSwapsChain = useSelector(getIsSwapsChain);
+  const primaryTokenImage = useSelector(getNativeCurrencyImage);
+
   const enteredSwapsEvent = useNewMetricEvent({
     event: 'Swaps Opened',
     properties: { source: 'Main View', active_currency: 'ETH' },
@@ -166,7 +169,7 @@ const EthOverview = ({ className }) => {
         </>
       }
       className={className}
-      icon={<Identicon diameter={32} />}
+      icon={<Identicon diameter={32} image={primaryTokenImage} imageBorder />}
     />
   );
 };

ui/app/components/ui/identicon/identicon.component.js

@@ -22,6 +22,7 @@ export default class Identicon extends PureComponent {
     image: PropTypes.string,
     useBlockie: PropTypes.bool,
     alt: PropTypes.string,
+    imageBorder: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -35,11 +36,13 @@ export default class Identicon extends PureComponent {
   };
 
   renderImage() {
-    const { className, diameter, image, alt } = this.props;
+    const { className, diameter, image, alt, imageBorder } = this.props;
 
     return (
       <img
-        className={classnames('identicon', className)}
+        className={classnames('identicon', className, {
+          'identicon__image-border': imageBorder,
+        })}
         src={image}
         style={getStyles(diameter)}
         alt={alt}
@@ -75,15 +78,7 @@ export default class Identicon extends PureComponent {
   }
 
   render() {
-    const {
-      className,
-      address,
-      image,
-      diameter,
-      useBlockie,
-      addBorder,
-      alt,
-    } = this.props;
+    const { address, image, useBlockie, addBorder, diameter } = this.props;
 
     if (image) {
       return this.renderImage();
@@ -106,12 +101,10 @@ export default class Identicon extends PureComponent {
     }
 
     return (
-      <img
-        className={classnames('identicon__eth-logo', className)}
-        src="./images/eth_logo.svg"
+      <div
         style={getStyles(diameter)}
-        alt={alt}
-      />
+        className="identicon__image-border"
+      ></div>
     );
   }
 }

ui/app/components/ui/identicon/identicon.component.test.js

@@ -16,13 +16,10 @@ describe('Identicon', function () {
   const mockStore = configureMockStore(middlewares);
   const store = mockStore(state);
 
-  it('renders default eth_logo identicon with no props', function () {
+  it('renders empty identicon with no props', function () {
     const wrapper = mount(<Identicon store={store} />);
 
-    assert.strictEqual(
-      wrapper.find('img.identicon__eth-logo').prop('src'),
-      './images/eth_logo.svg',
-    );
+    assert.ok(wrapper.find('div'), 'Empty identicon found');
   });
 
   it('renders custom image and add className props', function () {

ui/app/components/ui/identicon/index.scss

@@ -20,7 +20,7 @@
     border-color: $primary-blue;
   }
 
-  &__eth-logo {
+  &__image-border {
     border: 1px solid $alto;
     background: $white;
   }

ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js

@@ -4,7 +4,7 @@ import SendRowWrapper from '../send-row-wrapper';
 import Identicon from '../../../../components/ui/identicon/identicon.component';
 import TokenBalance from '../../../../components/ui/token-balance';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display';
-import { ERC20, ETH, PRIMARY } from '../../../../helpers/constants/common';
+import { ERC20, PRIMARY } from '../../../../helpers/constants/common';
 
 export default class SendAssetRow extends Component {
   static propTypes = {
@@ -20,6 +20,7 @@ export default class SendAssetRow extends Component {
     sendTokenAddress: PropTypes.string,
     setSendToken: PropTypes.func.isRequired,
     nativeCurrency: PropTypes.string,
+    nativeCurrencyImage: PropTypes.string,
   };
 
   static contextTypes = {
@@ -103,7 +104,12 @@ export default class SendAssetRow extends Component {
 
   renderNativeCurrency(insideDropdown = false) {
     const { t } = this.context;
-    const { accounts, selectedAddress, nativeCurrency } = this.props;
+    const {
+      accounts,
+      selectedAddress,
+      nativeCurrency,
+      nativeCurrencyImage,
+    } = this.props;
 
     const balanceValue = accounts[selectedAddress]
       ? accounts[selectedAddress].balance
@@ -121,7 +127,8 @@ export default class SendAssetRow extends Component {
         <div className="send-v2__asset-dropdown__asset-icon">
           <Identicon
             diameter={36}
-            address={nativeCurrency === ETH ? undefined : nativeCurrency}
+            image={nativeCurrencyImage}
+            address={nativeCurrency}
           />
         </div>
         <div className="send-v2__asset-dropdown__asset-data">

ui/app/pages/send/send-content/send-asset-row/send-asset-row.container.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import {
   getMetaMaskAccounts,
   getNativeCurrency,
+  getNativeCurrencyImage,
   getSendTokenAddress,
 } from '../../../../selectors';
 import { updateSendToken } from '../../../../store/actions';
@@ -14,6 +15,7 @@ function mapStateToProps(state) {
     sendTokenAddress: getSendTokenAddress(state),
     accounts: getMetaMaskAccounts(state),
     nativeCurrency: getNativeCurrency(state),
+    nativeCurrencyImage: getNativeCurrencyImage(state),
   };
 }
 

ui/app/selectors/selectors.js

@@ -5,7 +5,14 @@ import {
   MAINNET_CHAIN_ID,
   TEST_CHAINS,
   NETWORK_TYPE_RPC,
+  NATIVE_CURRENCY_TOKEN_IMAGE_MAP,
 } from '../../../shared/constants/network';
+
+import {
+  SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
+  ALLOWED_SWAPS_CHAIN_IDS,
+} from '../../../shared/constants/swaps';
+
 import {
   shortenAddress,
   checksumAddress,
@@ -15,12 +22,11 @@ import {
   getValueFromWeiHex,
   hexToDecimal,
 } from '../helpers/utils/conversions.util';
-import {
-  SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
-  ALLOWED_SWAPS_CHAIN_IDS,
-} from '../../../shared/constants/swaps';
+
 import { TEMPLATED_CONFIRMATION_MESSAGE_TYPES } from '../pages/confirmation/templates';
 
+import { getNativeCurrency } from './send';
+
 /**
  * One of the only remaining valid uses of selecting the network subkey of the
  * metamask state tree is to determine if the network is currently 'loading'.
@@ -475,3 +481,8 @@ export function getIsSwapsChain(state) {
   const chainId = getCurrentChainId(state);
   return ALLOWED_SWAPS_CHAIN_IDS[chainId];
 }
+
+export function getNativeCurrencyImage(state) {
+  const nativeCurrency = getNativeCurrency(state).toUpperCase();
+  return NATIVE_CURRENCY_TOKEN_IMAGE_MAP[nativeCurrency];
+}