chore(cherry-pick) fix: ensure StakingBalance is shown or hidden appropriately per asset…

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}
               />
             }