feat: extend TokenHero support for all ERC20 tokens - transfer transactions

app/components/UI/NetworkAssetLogo/index.tsx

@@ -5,7 +5,7 @@ import TokenIcon from '../Swaps/components/TokenIcon';
 interface NetworkAssetLogoProps {
   chainId: string;
   ticker: string;
-  style: object;
+  style?: object;
   big: boolean;
   biggest: boolean;
   testID: string;

app/components/UI/SimulationDetails/useBalanceChanges.ts

@@ -7,11 +7,6 @@ import {
   SimulationTokenBalanceChange,
   SimulationTokenStandard,
 } from '@metamask/transaction-controller';
-import {
-  ContractExchangeRates,
-  fetchTokenContractExchangeRates,
-  CodefiTokenPricesServiceV2,
-} from '@metamask/assets-controllers';
 
 import {
   BalanceChange,
@@ -21,6 +16,7 @@ import {
   NativeAssetIdentifier,
 } from './types';
 import { getTokenDetails } from '../../../util/address';
+import { fetchTokenFiatRates } from '../../../util/tokens';
 import {
   selectConversionRateByChainId,
   selectCurrentCurrency,
@@ -85,49 +81,6 @@ async function fetchAllErc20Decimals(
   );
 }
 
-/**
- * Retrieves token prices
- *
- * @param {string} nativeCurrency - native currency to fetch prices for.
- * @param {Hex[]} tokenAddresses - set of contract addresses
- * @param {Hex} chainId - current chainId
- * @returns The prices for the requested tokens.
- */
-const fetchTokenExchangeRates = async (
-  nativeCurrency: string,
-  tokenAddresses: Hex[],
-  chainId: Hex,
-) => {
-  try {
-    return await fetchTokenContractExchangeRates({
-      tokenPricesService: new CodefiTokenPricesServiceV2(),
-      nativeCurrency,
-      tokenAddresses,
-      chainId,
-    });
-  } catch (err) {
-    return {};
-  }
-};
-
-async function fetchTokenFiatRates(
-  fiatCurrency: string,
-  erc20TokenAddresses: Hex[],
-  chainId: Hex,
-): Promise<ContractExchangeRates> {
-  const tokenRates = await fetchTokenExchangeRates(
-    fiatCurrency,
-    erc20TokenAddresses,
-    chainId,
-  );
-
-  return Object.fromEntries(
-    Object.entries(tokenRates).map(([address, rate]) => [
-      address.toLowerCase(),
-      rate,
-    ]),
-  );
-}
 
 // Compiles the balance change for the native asset
 function getNativeBalanceChange(

app/components/Views/confirmations/components/rows/transactions/token-hero/avatar-token-with-network-badge/avatar-token-with-network-badge.styles.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../../../util/theme/models';
+
+export const styleSheet = (params: {
+  theme: Theme;
+}) => {
+  const { theme } = params;
+  return StyleSheet.create({
+    avatarNetwork: {
+      backgroundColor: theme.colors.background.default,
+      borderRadius: 99,
+    },
+  });
+};

app/components/Views/confirmations/components/rows/transactions/token-hero/avatar-token-with-network-badge/avatar-token-with-network-badge.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { TransactionMeta } from '@metamask/transaction-controller';
+
+import { AvatarSize } from '../../../../../../../../component-library/components/Avatars/Avatar/Avatar.types';
+import AvatarNetwork from '../../../../../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork/AvatarNetwork';
+import AvatarToken from '../../../../../../../../component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken';
+import Badge, {
+  BadgeVariant,
+} from '../../../../../../../../component-library/components/Badges/Badge';
+import BadgeWrapper, {
+  BadgePosition,
+} from '../../../../../../../../component-library/components/Badges/BadgeWrapper';
+import { useStyles } from '../../../../../../../../component-library/hooks';
+import { NameType } from '../../../../../../../UI/Name/Name.types';
+import { useDisplayName } from '../../../../../../../hooks/DisplayName/useDisplayName';
+import { RootState } from '../../../../../../../../reducers';
+import { selectNetworkConfigurationByChainId } from '../../../../../../../../selectors/networkController';
+import { getNetworkImageSource } from '../../../../../../../../util/networks';
+import useNetworkInfo from '../../../../../hooks/useNetworkInfo';
+import { useTransactionMetadataRequest } from '../../../../../hooks/transactions/useTransactionMetadataRequest';
+import { isNativeToken } from '../../../../../utils/token';
+import { styleSheet } from './avatar-token-with-network-badge.styles';
+
+const AvatarTokenNetwork = () => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const transactionMeta =
+    useTransactionMetadataRequest() ?? ({} as TransactionMeta);
+  const { chainId } = transactionMeta;
+
+  const { nativeCurrency } = useSelector((state: RootState) =>
+    selectNetworkConfigurationByChainId(state, chainId),
+  );
+  const isNative = isNativeToken(transactionMeta);
+  const networkImage = getNetworkImageSource({ chainId });
+
+  const { image, name: symbol } = useDisplayName({
+    preferContractSymbol: true,
+    type: NameType.EthereumAddress,
+    value: transactionMeta?.txParams?.to ?? '',
+    variation: chainId ?? '',
+  });
+
+  return isNative ? (
+    <AvatarNetwork
+      name={nativeCurrency ?? ''}
+      imageSource={networkImage}
+      size={AvatarSize.Xl}
+      style={styles.avatarNetwork}
+    />
+  ) : (
+    <AvatarToken
+      imageSource={image ? { uri: image } : undefined}
+      name={symbol ?? ''}
+      size={AvatarSize.Xl}
+    />
+  );
+};
+
+export const AvatarTokenWithNetworkBadge = () => {
+  const transactionMeta = useTransactionMetadataRequest() ?? ({} as TransactionMeta);
+  const { networkName, networkImage } = useNetworkInfo(
+    transactionMeta?.chainId,
+  );
+  const isNative = isNativeToken(transactionMeta);
+
+  return (
+    <BadgeWrapper
+      badgePosition={BadgePosition.BottomRight}
+      badgeElement={!isNative && networkImage ? (
+        <Badge
+          imageSource={networkImage}
+          variant={BadgeVariant.Network}
+          name={networkName}
+        />
+      ) : null}
+    >
+      <AvatarTokenNetwork />
+    </BadgeWrapper>
+  );
+};

app/components/Views/confirmations/components/rows/transactions/token-hero/avatar-token-with-network-badge/index.ts

@@ -0,0 +1 @@
+export { AvatarTokenWithNetworkBadge } from './avatar-token-with-network-badge';

app/components/Views/confirmations/components/rows/transactions/token-hero/token-hero.styles.ts

@@ -19,19 +19,15 @@ const styleSheet = (params: {
       textAlign: 'center',
       color: theme.colors.text.alternative,
     },
-    networkAndTokenContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    networkLogo: {
-      width: 48,
-      height: 48,
-    },
     container: {
       paddingBottom: 16,
       paddingTop: isFlatConfirmation ? 16 : 0,
     },
+    containerAvatarTokenNetworkWithBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
   });
 };
 

app/components/Views/confirmations/components/rows/transactions/token-hero/token-hero.tsx

@@ -1,50 +1,33 @@
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
 import { strings } from '../../../../../../../../locales/i18n';
-import Badge, {
-  BadgeVariant,
-} from '../../../../../../../component-library/components/Badges/Badge';
-import BadgeWrapper, {
-  BadgePosition,
-} from '../../../../../../../component-library/components/Badges/BadgeWrapper';
 import Text, {
   TextVariant,
 } from '../../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../../component-library/hooks';
-import images from '../../../../../../../images/image-icons';
-import TokenIcon from '../../../../../../UI/Swaps/components/TokenIcon';
+import { useTokenDetails } from '../../../../hooks/useTokenDetails';
 import { useTokenValues } from '../../../../hooks/useTokenValues';
 import { useFlatConfirmation } from '../../../../hooks/ui/useFlatConfirmation';
 import { TooltipModal } from '../../../UI/Tooltip/Tooltip';
 import styleSheet from './token-hero.styles';
+import { AvatarTokenWithNetworkBadge } from './avatar-token-with-network-badge';
 
-const NetworkAndTokenImage = ({
-  tokenSymbol,
-  styles,
-}: {
-  tokenSymbol: string;
-  styles: StyleSheet.NamedStyles<Record<string, unknown>>;
-}) => (
-  <View style={styles.networkAndTokenContainer}>
-    <BadgeWrapper
-      badgePosition={BadgePosition.BottomRight}
-      badgeElement={
-        <Badge imageSource={images.ETHEREUM} variant={BadgeVariant.Network} />
-      }
-    >
-      <TokenIcon big symbol={tokenSymbol} />
-    </BadgeWrapper>
-  </View>
-);
+// todo:
+// - add conditional logic to fiat value. e.g. should hide if testnet
+// - fix inconsistent fiat value. can be off by pennies
+// - tokenlist sometimes only has 0x0000000000000000000000000000000000000000
+// - style: confirm if we'd like to add the symbol in the modal precise token amount text
+// - style: confirm fallback avatar - non-bold + background color
 
 const AssetAmount = ({
   tokenAmountDisplayValue,
   tokenSymbol,
   styles,
   setIsModalVisible,
 }: {
-  tokenAmountDisplayValue: string;
-  tokenSymbol: string;
+  tokenAmountDisplayValue?: string;
+  tokenSymbol?: string;
   styles: StyleSheet.NamedStyles<Record<string, unknown>>;
   setIsModalVisible: ((isModalVisible: boolean) => void) | null;
 }) => (
@@ -67,44 +50,44 @@ const AssetFiatConversion = ({
   fiatDisplayValue,
   styles,
 }: {
-  fiatDisplayValue: string;
+  fiatDisplayValue?: string;
   styles: StyleSheet.NamedStyles<Record<string, unknown>>;
-}) => (
-  <Text style={styles.assetFiatConversionText} variant={TextVariant.BodyMD}>
-    {fiatDisplayValue}
-  </Text>
-);
+}) => fiatDisplayValue ? (
+    <Text style={styles.assetFiatConversionText} variant={TextVariant.BodyMD}>
+      {fiatDisplayValue}
+    </Text>
+  ) : null;
 
 const TokenHero = ({ amountWei }: { amountWei?: string }) => {
   const { isFlatConfirmation } = useFlatConfirmation();
   const { styles } = useStyles(styleSheet, {
     isFlatConfirmation,
   });
-  const { tokenAmountValue, tokenAmountDisplayValue, fiatDisplayValue } =
-    useTokenValues({ amountWei });
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  const displayTokenAmountIsRounded =
-    tokenAmountValue !== tokenAmountDisplayValue;
+  const tokenDetails = useTokenDetails();
+  const { symbol } = tokenDetails;
+  const { tokenAmountValue, tokenAmountDisplayValue, fiatDisplayValue } =
+    useTokenValues({ amountWei });
 
-  const tokenSymbol = 'ETH';
+  const isRoundedTokenAmount = tokenAmountValue !== tokenAmountDisplayValue;
 
   return (
     <View style={styles.container}>
-      <NetworkAndTokenImage tokenSymbol={tokenSymbol} styles={styles} />
+      <View style={styles.containerAvatarTokenNetworkWithBadge}>
+        <AvatarTokenWithNetworkBadge />
+      </View>
       <AssetAmount
         tokenAmountDisplayValue={tokenAmountDisplayValue}
-        tokenSymbol={tokenSymbol}
+        tokenSymbol={symbol}
         styles={styles}
-        setIsModalVisible={
-          displayTokenAmountIsRounded ? setIsModalVisible : null
-        }
+        setIsModalVisible={isRoundedTokenAmount ? setIsModalVisible : null}
       />
       <AssetFiatConversion
         fiatDisplayValue={fiatDisplayValue}
         styles={styles}
       />
-      {displayTokenAmountIsRounded && (
+      {isRoundedTokenAmount && (
         <TooltipModal
           open={isModalVisible}
           setOpen={setIsModalVisible}

app/components/Views/confirmations/constants/tokens.ts

@@ -1,3 +1,5 @@
+export const NATIVE_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
+
 export const TOKEN_ADDRESS = {
   DAI: '0x6b175474e89094c44da98b954eedeac495271d0f',
 };