fix: cp-7.51.0 cp-7.52.0 Fix TokenHero component and put back e2e assertions (#17403)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to fix broken `TokenHero` component for native assets.
Please see recording that all type of assets are shown properly in
`TokenHero` component now.

It also puts back e2e assertions in place. 

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: MetaMask/MetaMask-planning#5403

## **Manual testing steps**

1. Try sending ETH
2. See correct amount shown in the confirmation

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/e5c5aebc-8f6e-4963-9b97-452e3df7aa28


## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: OGPoyraz

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

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    wrapper: {
+      minHeight: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingWrapper: {
+      height: 78,
+      width: 78,
+      borderRadius: 39,
+      backgroundColor: theme.colors.background.alternativePressed,
+    },
+  });
+};
+
+export default styleSheet;

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

@@ -5,23 +5,26 @@ import { ConfirmationRowComponentIDs } from '../../../../../../../../e2e/selecto
 import { useIsNft } from '../../../../hooks/nft/useIsNft';
 import { HeroNft } from '../../../hero-nft';
 import { HeroToken } from '../../../hero-token';
+import { useStyles } from '../../../../../../../component-library/hooks';
+import styleSheet from './hero-row.styles';
 
-const styles = {
-  wrapper: {
-    minHeight: 100,
-  },
+const LoadingHeroRow = () => {
+  const { styles } = useStyles(styleSheet, {});
+  return <View style={styles.loadingWrapper} />;
 };
 
 export const HeroRow = ({ amountWei }: { amountWei?: string }) => {
   const { isNft, isPending } = useIsNft();
+  const { styles } = useStyles(styleSheet, {});
 
   return (
     <View
       style={styles.wrapper}
       testID={ConfirmationRowComponentIDs.TOKEN_HERO}
     >
-      {!isPending && isNft === true && <HeroNft />}
-      {!isPending && isNft === false && <HeroToken amountWei={amountWei} />}
+      {isPending && <LoadingHeroRow />}
+      {!isPending &&
+        (isNft ? <HeroNft /> : <HeroToken amountWei={amountWei} />)}
     </View>
   );
 };

app/components/Views/confirmations/hooks/nft/useIsNft.test.ts

@@ -1,7 +1,8 @@
-import { useIsNft } from './useIsNft';
 import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
+import { TokenStandard } from '../../../../UI/SimulationDetails/types';
 import { useGetTokenStandardAndDetails } from '../useGetTokenStandardAndDetails';
+import { useIsNft } from './useIsNft';
 
 jest.mock('../transactions/useTransactionMetadataRequest', () => ({
   useTransactionMetadataRequest: jest.fn().mockReturnValue({
@@ -25,7 +26,41 @@ describe('useIsNft', () => {
     jest.clearAllMocks();
   });
 
-  it('returns isNft true when token standard is not ERC20', () => {
+  it.each([
+    { standard: TokenStandard.ERC1155, isNft: true },
+    { standard: TokenStandard.ERC721, isNft: true },
+    { standard: TokenStandard.ERC20, isNft: false },
+  ])(
+    'returns isNft $isNft when token standard is $standard',
+    ({ standard, isNft }) => {
+      (useGetTokenStandardAndDetails as jest.Mock).mockReturnValue({
+        details: {
+          standard,
+        },
+        isPending: false,
+      });
+
+      const { result } = renderHookWithProvider(useIsNft, {
+        state: {
+          engine: {
+            backgroundState,
+          },
+        },
+      });
+
+      expect(result.current).toEqual({
+        isNft,
+        isPending: false,
+      });
+    },
+  );
+
+  it('returns undefined when token standard is undefined', () => {
+    (useGetTokenStandardAndDetails as jest.Mock).mockReturnValue({
+      details: undefined,
+      isPending: true,
+    });
+
     const { result } = renderHookWithProvider(useIsNft, {
       state: {
         engine: {
@@ -35,17 +70,15 @@ describe('useIsNft', () => {
     });
 
     expect(result.current).toEqual({
-      isNft: true,
-      isPending: false,
+      isNft: undefined,
+      isPending: true,
     });
   });
 
-  it('returns isNft false when token standard is ERC20', () => {
+  it('when token standard is on pending state, returns undefined', () => {
     (useGetTokenStandardAndDetails as jest.Mock).mockReturnValue({
-      details: {
-        standard: 'ERC20',
-      },
-      isPending: false,
+      details: undefined,
+      isPending: true,
     });
 
     const { result } = renderHookWithProvider(useIsNft, {
@@ -57,8 +90,8 @@ describe('useIsNft', () => {
     });
 
     expect(result.current).toEqual({
-      isNft: false,
-      isPending: false,
+      isNft: undefined,
+      isPending: true,
     });
   });
 });

app/components/Views/confirmations/hooks/nft/useIsNft.ts

@@ -14,9 +14,15 @@ export const useIsNft = (): { isNft?: boolean; isPending: boolean } => {
     networkClientId,
   );
 
+  // Native token / loading state
+  if (isPending || details?.standard === undefined) {
+    return { isNft: undefined, isPending };
+  }
+
+  // NFT check
   const isNft =
-    !isPending && details.standard !== undefined
-      ? details.standard !== TokenStandard.ERC20
-      : undefined;
+    details.standard === TokenStandard.ERC1155 ||
+    details.standard === TokenStandard.ERC721;
+
   return { isNft, isPending };
 };

app/components/Views/confirmations/legacy/SendFlow/Amount/index.js

@@ -635,9 +635,15 @@ class Amount extends PureComponent {
         selectedAsset: { address, tokenId },
       },
       selectedAddress,
+      globalNetworkClientId,
     } = this.props;
     try {
-      return await NftController.isNftOwner(selectedAddress, address, tokenId);
+      return await NftController.isNftOwner(
+        selectedAddress,
+        address,
+        tokenId,
+        globalNetworkClientId,
+      );
     } catch (e) {
       return false;
     }

e2e/specs/confirmations-redesigned/transactions/send-max-transfer.spec.ts

@@ -11,15 +11,13 @@ import {
   SIMULATION_ENABLED_NETWORKS_MOCK,
 } from '../../../api-mocking/mock-responses/simulations';
 import Assertions from '../../../utils/Assertions';
-import ConfirmationUITypes from '../../../pages/Browser/Confirmations/ConfirmationUITypes';
 import WalletActionsBottomSheet from '../../../pages/wallet/WalletActionsBottomSheet';
 import FixtureBuilder from '../../../fixtures/fixture-builder';
 import { mockEvents } from '../../../api-mocking/mock-config/mock-events';
 import TabBarComponent from '../../../pages/wallet/TabBarComponent';
 import FooterActions from '../../../pages/Browser/Confirmations/FooterActions';
 import SendView from '../../../pages/Send/SendView';
 import AmountView from '../../../pages/Send/AmountView';
-import RowComponents from '../../../pages/Browser/Confirmations/RowComponents';
 
 const RECIPIENT = '0x0c54fccd2e384b4bb6f2e405bf5cbc15a017aafb';
 
@@ -68,12 +66,7 @@ describe(SmokeConfirmationsRedesigned('Send Max Transfer'), () => {
         await AmountView.tapNextButton();
 
         // Check all expected elements are visible
-        await Assertions.checkIfVisible(
-          ConfirmationUITypes.FlatConfirmationContainer,
-        );
-        await Assertions.checkIfVisible(RowComponents.FromTo);
-        await Assertions.checkIfVisible(RowComponents.GasFeesDetails);
-        await Assertions.checkIfVisible(RowComponents.AdvancedDetails);
+        await Assertions.checkIfTextIsDisplayed('1,000 ETH');
 
         // Accept confirmation
         await FooterActions.tapConfirmButton();

e2e/specs/confirmations-redesigned/transactions/wallet-initiated-transfer.spec.ts

@@ -68,6 +68,8 @@ describe(SmokeConfirmationsRedesigned('Wallet Initiated Transfer'), () => {
         await Assertions.checkIfVisible(
           ConfirmationUITypes.FlatConfirmationContainer,
         );
+        await Assertions.checkIfVisible(RowComponents.TokenHero);
+        await Assertions.checkIfTextIsDisplayed('1 ETH');
         await Assertions.checkIfVisible(RowComponents.FromTo);
         await Assertions.checkIfVisible(RowComponents.GasFeesDetails);
         await Assertions.checkIfVisible(RowComponents.AdvancedDetails);