fix: ensure StakingBalance is shown or hidden appropriately per asset… (

#12987)

1. What is the reason for the change?

There are 2 separate issues that are both related to the StakedBalance
component. One is Asset Detail StakingBalance shows for ETH assets on
unsupported chains with popular networks filter. The other is Asset
Detail StakingBalance does not show for mainnet ETH asset when on
unsupported chain with popular networks filter.

2. What is the improvement/solution?

The user will not see staked ethereum info for assets that are not
mainnet Ethereum asset when on mainnet

The user will see staked ethereum info when on unsupported chain with
popular networks filter and viewing the mainnet Ethereum asset detail.
We show the details but hide any staking actions for the time being
while we re-evaluate how to keep the actions and switch the network on
the fly.

Fixes: https://consensyssoftware.atlassian.net/browse/STAKE-921

**Asset Detail StakingBalance shows for ETH assets on unsupported chains
with popular networks filter**

- Switch to mainnet network

- Switch to popular networks filter

- Select the native asset of a popular network that is not mainnet, such
as Base or Optimism

- In the asset detail page you should not see staked ethereum info

**Asset Detail StakingBalance does not show for mainnet ETH asset when
on unsupported chain with popular networks filter**

Switch to Base network

Switch to popular networks filter

Select the mainnet Ethereum asset

In the asset detail page you should see staked ethereum info and
earnings info but no action buttons or claim link banners

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

https://github.com/user-attachments/assets/83132195-8bd8-452f-a25f-37a9b1d276d9

https://github.com/user-attachments/assets/6e0bde2f-1dd2-4cd8-ad2c-e78cbe962ff1

- [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
- [ ] 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.

- [ ] 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.

app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx

@@ -147,7 +147,9 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {
 
   return (
     <View style={styles.tokenDetailsContainer}>
-      {asset.isETH && isPooledStakingFeatureEnabled() && <StakingEarnings />}
+      {asset.isETH && isPooledStakingFeatureEnabled() && (
+        <StakingEarnings asset={asset} />
+      )}
       {(asset.isETH || tokenMetadata) && (
         <TokenDetailsList tokenDetails={tokenDetails} />
       )}

app/components/UI/Stake/__mocks__/mockData.ts

@@ -10,10 +10,12 @@ import { Contract } from 'ethers';
 import { Stake } from '../sdk/stakeSdkProvider';
 
 export const MOCK_STAKED_ETH_ASSET = {
+  chainId: '0x1',
   balance: '4.9999 ETH',
   balanceFiat: '$13,292.20',
   name: 'Staked Ethereum',
   symbol: 'ETH',
+  isETH: true,
 } as TokenI;
 
 export const MOCK_GET_POOLED_STAKES_API_RESPONSE: PooledStakes = {
@@ -67,17 +69,18 @@ export const MOCK_GET_POOLED_STAKES_API_RESPONSE: PooledStakes = {
   exchangeRate: '1.010906701603882254',
 };
 
-export const MOCK_GET_POOLED_STAKES_API_RESPONSE_HIGH_ASSETS_AMOUNT: PooledStakes = {
-  accounts: [
-    {
-      account: '0x0111111111abcdef2222222222abcdef33333333',
-      lifetimeRewards: '0',
-      assets: '99999999990000000000000',
-      exitRequests: [],
-    },
-  ],
-  exchangeRate: '1.010906701603882254',
-};
+export const MOCK_GET_POOLED_STAKES_API_RESPONSE_HIGH_ASSETS_AMOUNT: PooledStakes =
+  {
+    accounts: [
+      {
+        account: '0x0111111111abcdef2222222222abcdef33333333',
+        lifetimeRewards: '0',
+        assets: '99999999990000000000000',
+        exitRequests: [],
+      },
+    ],
+    exchangeRate: '1.010906701603882254',
+  };
 
 export const MOCK_GET_VAULT_RESPONSE: VaultData = {
   apy: '2.853065141088762750393474836309926',

app/components/UI/Stake/components/StakingBalance/StakingBalance.test.tsx

@@ -14,6 +14,7 @@ import { createMockAccountsControllerState } from '../../../../../util/test/acco
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 // eslint-disable-next-line import/no-namespace
 import * as networks from '../../../../../util/networks';
+import { mockNetworkState } from '../../../../../util/test/network';
 
 const MOCK_ADDRESS_1 = '0x0';
 
@@ -168,4 +169,39 @@ describe('StakingBalance', () => {
       screen: Routes.STAKING.UNSTAKE,
     });
   });
+
+  it('should not render if asset chainId is not a staking supporting chain', () => {
+    const { queryByText, queryByTestId } = renderWithProvider(
+      <StakingBalance asset={{ ...MOCK_STAKED_ETH_ASSET, chainId: '0x4' }} />,
+      { state: mockInitialState },
+    );
+    expect(queryByTestId('staking-balance-container')).toBeNull();
+    expect(queryByText(strings('stake.stake_more'))).toBeNull();
+    expect(queryByText(strings('stake.unstake'))).toBeNull();
+    expect(queryByText(strings('stake.claim'))).toBeNull();
+  });
+
+  it('should not render claim link or action buttons if asset.chainId is not selected chainId', () => {
+    const { queryByText, queryByTestId } = renderWithProvider(
+      <StakingBalance asset={MOCK_STAKED_ETH_ASSET} />,
+      {
+        state: {
+          ...mockInitialState,
+          engine: {
+            ...mockInitialState.engine,
+            backgroundState: {
+              ...mockInitialState.engine.backgroundState,
+              NetworkController: {
+                ...mockNetworkState({ chainId: '0x4268' }),
+              },
+            },
+          },
+        },
+      },
+    );
+    expect(queryByTestId('staking-balance-container')).toBeTruthy();
+    expect(queryByText(strings('stake.stake_more'))).toBeNull();
+    expect(queryByText(strings('stake.unstake'))).toBeNull();
+    expect(queryByText(strings('stake.claim'))).toBeNull();
+  });
 });

app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Hex } from '@metamask/utils';
 import Badge, {
   BadgeVariant,
 } from '../../../../../component-library/components/Badges/Badge';
@@ -35,7 +36,7 @@ import {
 import { multiplyValueByPowerOfTen } from '../../utils/bignumber';
 import StakingCta from './StakingCta/StakingCta';
 import useStakingEligibility from '../../hooks/useStakingEligibility';
-import useStakingChain from '../../hooks/useStakingChain';
+import { useStakingChainByChainId } from '../../hooks/useStakingChain';
 import usePooledStakes from '../../hooks/usePooledStakes';
 import useVaultData from '../../hooks/useVaultData';
 import { StakeSDKProvider } from '../../sdk/stakeSdkProvider';
@@ -56,7 +57,9 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
 
   const { isEligible: isEligibleForPooledStaking } = useStakingEligibility();
 
-  const { isStakingSupportedChain } = useStakingChain();
+  const { isStakingSupportedChain } = useStakingChainByChainId(
+    asset.chainId as Hex,
+  );
 
   const {
     pooledStakesData,
@@ -71,7 +74,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
   const {
     formattedStakedBalanceETH: stakedBalanceETH,
     formattedStakedBalanceFiat: stakedBalanceFiat,
-  } = useBalance();
+  } = useBalance(asset.chainId as Hex);
 
   const { unstakingRequests, claimableRequests } = useMemo(() => {
     const exitRequests = pooledStakesData?.exitRequests ?? [];
@@ -97,6 +100,9 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
   }
 
   const renderStakingContent = () => {
+    if (chainId !== asset.chainId) {
+      return <></>;
+    }
     if (isLoadingPooledStakesData) {
       return (
         <SkeletonPlaceholder>
@@ -165,7 +171,7 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
   };
 
   return (
-    <View>
+    <View testID="staking-balance-container">
       {hasEthToUnstake && (
         <AssetElement
           asset={asset}
@@ -177,7 +183,10 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
             badgeElement={
               <Badge
                 variant={BadgeVariant.Network}
-                imageSource={NetworkBadgeSource(chainId, asset.symbol)}
+                imageSource={NetworkBadgeSource(
+                  asset.chainId as Hex,
+                  asset.ticker || asset.symbol,
+                )}
                 name={networkName}
               />
             }