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

app/components/UI/NetworkAssetLogo/index.tsx

@@ -3,20 +3,20 @@ import { ChainId } from '@metamask/controller-utils';
 import TokenIcon from '../Swaps/components/TokenIcon';
 
 interface NetworkAssetLogoProps {
-  chainId: string;
-  ticker: string;
-  style: object;
   big: boolean;
   biggest: boolean;
-  testID: string;
+  chainId: string;
+  style: object;
+  ticker: string;
+  testID?: string;
 }
 
 function NetworkAssetLogo({
-  chainId,
-  ticker,
-  style,
   big,
   biggest,
+  chainId,
+  style,
+  ticker,
   testID,
 }: NetworkAssetLogoProps) {
   if (chainId === ChainId.mainnet) {
@@ -34,8 +34,8 @@ function NetworkAssetLogo({
     <TokenIcon
       big={big}
       biggest={biggest}
-      symbol={ticker}
       style={style}
+      symbol={ticker}
       testID={testID}
     />
   );

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

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

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 { TransactionMeta } from '@metamask/transaction-controller';
+import { Hex } from '@metamask/utils';
+
+import { strings } from '../../../../../../../../../locales/i18n';
+import { AvatarSize } from '../../../../../../../../component-library/components/Avatars/Avatar/Avatar.types';
+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 NetworkAssetLogo from '../../../../../../../UI/NetworkAssetLogo';
+import { TokenI } from '../../../../../../../UI/Tokens/types';
+import useNetworkInfo from '../../../../../hooks/useNetworkInfo';
+import { useTokenAsset } from '../../../../../hooks/useTokenAsset';
+import { useTransactionMetadataRequest } from '../../../../../hooks/transactions/useTransactionMetadataRequest';
+import { styleSheet } from './avatar-token-with-network-badge.styles';
+import { View } from 'react-native';
+
+const AvatarTokenOrNetworkAssetLogo = ({
+  asset,
+  chainId,
+  displayName,
+}: {
+  asset: TokenI;
+  chainId: Hex;
+  displayName: string;
+}) => {
+  const { styles } = useStyles(styleSheet, {});
+  const { image, isNative } = asset;
+  const isUnknownToken = displayName === strings('token.unknown');
+
+  return isNative ? (
+    <NetworkAssetLogo
+      big
+      biggest
+      chainId={chainId}
+      style={styles.avatarToken}
+      ticker={displayName}
+    />
+  ) : (
+    <AvatarToken
+      imageSource={image ? { uri: image } : undefined}
+      name={isUnknownToken ? undefined : displayName}
+      size={AvatarSize.Xl}
+      style={styles.avatarToken}
+      testID={`avatar-with-badge-avatar-token-${displayName}`}
+    />
+  );
+};
+
+export const AvatarTokenWithNetworkBadge = () => {
+  const { styles } = useStyles(styleSheet, {});
+  const { chainId } =
+    useTransactionMetadataRequest() ?? ({} as TransactionMeta);
+  const { asset, displayName } = useTokenAsset();
+  const { networkName, networkImage } = useNetworkInfo(chainId);
+
+  return (
+    <View style={styles.base}>
+      <BadgeWrapper
+        badgePosition={BadgePosition.BottomRight}
+        badgeElement={
+          <Badge
+            imageSource={networkImage}
+            name={networkName}
+            variant={BadgeVariant.Network}
+          />
+        }
+      >
+        <AvatarTokenOrNetworkAssetLogo
+          asset={asset}
+          chainId={chainId}
+          displayName={displayName}
+        />
+      </BadgeWrapper>
+    </View>
+  );
+};

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

@@ -15,19 +15,13 @@ const styleSheet = (params: {
     assetAmountText: {
       textAlign: 'center',
     },
+    assetTextUnknown: {
+      color: theme.colors.text.alternative,
+    },
     assetFiatConversionText: {
       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,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import renderWithProvider, { DeepPartial } from '../../../../../../../util/test/renderWithProvider';
-import { stakingDepositConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
+import { stakingDepositConfirmationState, transferConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
 import TokenHero from './token-hero';
 import { fireEvent, waitFor } from '@testing-library/react-native';
 import { merge } from 'lodash';
@@ -17,16 +17,52 @@ jest.mock('../../../../../../../core/Engine', () => ({
 }));
 
 describe('TokenHero', () => {
-  it('contains token and fiat values for staking deposit', async () => {
-    const { getByText } = renderWithProvider(<TokenHero />, {
+  it('displays avatar, amount, and fiat values for a simple send transfer', async () => {
+    const state: DeepPartial<RootState> = merge(
+      {},
+      transferConfirmationState,
+      {
+        engine: {
+          backgroundState: {
+            TransactionController: {
+              transactions: [
+                { txParams: { value: `0x${decGWEIToHexWEI(55555555)}` } },
+              ],
+            },
+          },
+        },
+      },
+    );
+    const { getByText, queryByTestId } = renderWithProvider(<TokenHero />, { state });
+
+    await waitFor(async () => {
+      expect(queryByTestId('avatar-with-badge-avatar-token-ETH')).toBeTruthy();
+      expect(getByText('0.0556 ETH')).toBeDefined();
+      expect(getByText('$199.79')).toBeDefined();
+    });
+
+    const tokenAmountText = getByText('0.0556 ETH');
+    fireEvent.press(tokenAmountText);
+
+    await waitFor(() => {
+      expect(getByText('Amount')).toBeDefined();
+      expect(getByText('0.055555555')).toBeDefined();
+    });
+  });
+
+  it('displays avatar, amount, and fiat values for staking deposit', async () => {
+    const { getByText, queryByTestId } = renderWithProvider(<TokenHero />, {
       state: stakingDepositConfirmationState,
     });
 
-    expect(getByText('0.0001 ETH')).toBeDefined();
-    expect(getByText('$0.36')).toBeDefined();
+    await waitFor(async () => {
+      expect(queryByTestId('avatar-with-badge-avatar-token-ETH')).toBeTruthy();
+      expect(getByText('0.0001 ETH')).toBeDefined();
+      expect(getByText('$0.36')).toBeDefined();
+    });
   });
 
-  it('contains token and fiat values for staking deposit', async () => {
+  it('displays avatar, rounded amount, amount, and fiat values for staking deposit', async () => {
     const state: DeepPartial<RootState> = merge(
       {},
       stakingDepositConfirmationState,
@@ -43,13 +79,16 @@ describe('TokenHero', () => {
       },
     );
 
-    const { getByText } = renderWithProvider(
+    const { getByText, queryByTestId } = renderWithProvider(
       <TokenHero />,
       { state },
     );
 
-    expect(getByText('0.0123 ETH')).toBeDefined();
-    expect(getByText('$44.40')).toBeDefined();
+    await waitFor(() => {
+      expect(queryByTestId('avatar-with-badge-avatar-token-ETH')).toBeTruthy();
+      expect(getByText('0.0123 ETH')).toBeDefined();
+      expect(getByText('$44.40')).toBeDefined();
+    });
 
     const tokenAmountText = getByText('0.0123 ETH');
     fireEvent.press(tokenAmountText);