feat: add live staking data with geo-blocking support

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -34,7 +34,7 @@ interface BalanceProps {
   secondaryBalance?: string;
 }
 
-const NetworkBadgeSource = (chainId: string, ticker: string) => {
+export const NetworkBadgeSource = (chainId: string, ticker: string) => {
   const isMainnet = isMainnetByChainId(chainId);
   const isLineaMainnet = isLineaMainnetByChainId(chainId);
 
@@ -88,7 +88,9 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
           {asset.name || asset.symbol}
         </Text>
       </AssetElement>
-      {isPooledStakingFeatureEnabled() && asset?.isETH && <StakingBalance />}
+      {isPooledStakingFeatureEnabled() && asset?.isETH && (
+        <StakingBalance asset={asset} />
+      )}
     </View>
   );
 };

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

@@ -1,5 +1,5 @@
 import { zeroAddress } from 'ethereumjs-util';
-import React, { useState } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 import i18n from '../../../../../locales/i18n';
@@ -21,8 +21,8 @@ import Logger from '../../../../util/Logger';
 import TokenDetailsList from './TokenDetailsList';
 import MarketDetailsList from './MarketDetailsList';
 import { TokenI } from '../../Tokens/types';
-import StakingEarnings from '../StakingEarnings';
 import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
+import StakingEarnings from '../../Stake/components/StakingEarnings';
 
 export interface TokenDetails {
   contractAddress: string | null;
@@ -52,9 +52,6 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {
   const currentCurrency = useSelector(selectCurrentCurrency);
   const tokenContractAddress = safeToChecksumAddress(asset.address);
 
-  // TEMP: Remove once component has been implemented.
-  const [hasStakingPositions] = useState(true);
-
   let tokenMetadata;
   let marketData;
 
@@ -126,9 +123,7 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {
 
   return (
     <View style={styles.tokenDetailsContainer}>
-      {asset.isETH &&
-        hasStakingPositions &&
-        isPooledStakingFeatureEnabled() && <StakingEarnings />}
+      {asset.isETH && isPooledStakingFeatureEnabled() && <StakingEarnings />}
       {(asset.isETH || tokenMetadata) && (
         <TokenDetailsList tokenDetails={tokenDetails} />
       )}

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx

@@ -62,12 +62,25 @@ jest.mock('../../hooks/usePoolStakedDeposit', () => ({
   }),
 }));
 
+jest.mock('../../hooks/usePooledStakes', () => ({
+  __esModule: true,
+  default: () => ({
+    refreshPooledStakes: jest.fn(),
+  }),
+}));
+
 describe('StakeConfirmationView', () => {
   it('render matches snapshot', () => {
     const props: StakeConfirmationViewProps = {
       route: {
         key: '1',
-        params: { amountWei: '3210000000000000', amountFiat: '7.46' },
+        params: {
+          amountWei: '3210000000000000',
+          amountFiat: '7.46',
+          annualRewardRate: '2.5%',
+          annualRewardsETH: '2.5 ETH',
+          annualRewardsFiat: '$5000',
+        },
         name: 'params',
       },
     };

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx

@@ -9,17 +9,9 @@ import AccountHeaderCard from '../../components/StakingConfirmation/AccountHeade
 import RewardsCard from '../../components/StakingConfirmation/RewardsCard/RewardsCard';
 import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter';
 import { StakeConfirmationViewProps } from './StakeConfirmationView.types';
-import { MOCK_GET_VAULT_RESPONSE } from '../../components/StakingBalance/mockData';
 import { strings } from '../../../../../../locales/i18n';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
 
-const MOCK_REWARD_DATA = {
-  REWARDS: {
-    ETH: '0.13 ETH',
-    FIAT: '$334.93',
-  },
-};
-
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
 
 const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
@@ -47,9 +39,9 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
         <View style={styles.cardsContainer}>
           <AccountHeaderCard contractName={MOCK_STAKING_CONTRACT_NAME} />
           <RewardsCard
-            rewardRate={MOCK_GET_VAULT_RESPONSE.apy}
-            rewardsEth={MOCK_REWARD_DATA.REWARDS.ETH}
-            rewardsFiat={MOCK_REWARD_DATA.REWARDS.FIAT}
+            rewardRate={route.params.annualRewardRate}
+            rewardsEth={route.params.annualRewardsETH}
+            rewardsFiat={route.params.annualRewardsFiat}
           />
         </View>
       </View>

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.types.ts

@@ -3,6 +3,9 @@ import { RouteProp } from '@react-navigation/native';
 interface StakeConfirmationViewRouteParams {
   amountWei: string;
   amountFiat: string;
+  annualRewardsETH: string;
+  annualRewardsFiat: string;
+  annualRewardRate: string;
 }
 
 export interface StakeConfirmationViewProps {

app/components/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap

@@ -989,7 +989,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
                   }
                   testID="label"
                 >
-                  2.8%
+                  2.5%
                 </Text>
               </View>
             </View>
@@ -1100,7 +1100,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
                       }
                     }
                   >
-                    $334.93
+                    $5000
                   </Text>
                   <Text
                     accessibilityRole="text"
@@ -1115,7 +1115,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
                       }
                     }
                   >
-                    0.13 ETH
+                    2.5 ETH
                   </Text>
                 </View>
               </View>
@@ -1415,7 +1415,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
             }
           }
         >
-          Confirm
+          Continue
         </Text>
       </TouchableOpacity>
     </View>

app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx

@@ -8,6 +8,7 @@ import { BN } from 'ethereumjs-util';
 import { Stake } from '../../sdk/stakeSdkProvider';
 import { ChainId, PooledStakingContract } from '@metamask/stake-sdk';
 import { Contract } from 'ethers';
+import { MOCK_GET_VAULT_RESPONSE } from '../../__mocks__/mockData';
 
 function render(Component: React.ComponentType) {
   return renderScreen(
@@ -89,6 +90,31 @@ jest.mock('../../hooks/useBalance', () => ({
   }),
 }));
 
+const mockVaultData = MOCK_GET_VAULT_RESPONSE;
+// Mock hooks
+
+jest.mock('../../hooks/useStakingEligibility', () => ({
+  __esModule: true,
+  default: () => ({
+    isEligible: true,
+    loading: false,
+    error: null,
+    refreshPooledStakingEligibility: jest.fn(),
+  }),
+}));
+
+jest.mock('../../hooks/useVaultData', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultData: mockVaultData,
+    loading: false,
+    error: null,
+    refreshVaultData: jest.fn(),
+    annualRewardRate: '2.5%',
+    annualRewardRateDecimal: 0.025,
+  }),
+}));
+
 describe('StakeInputView', () => {
   it('render matches snapshot', () => {
     render(StakeInputView);
@@ -122,7 +148,7 @@ describe('StakeInputView', () => {
 
       fireEvent.press(screen.getByText('2'));
 
-      expect(screen.getByText('0.052 ETH')).toBeTruthy();
+      expect(screen.getByText('0.05 ETH')).toBeTruthy();
     });
   });
 

app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx

@@ -41,6 +41,10 @@ const StakeInputView = () => {
     handleKeypadChange,
     calculateEstimatedAnnualRewards,
     estimatedAnnualRewards,
+    annualRewardsETH,
+    annualRewardsFiat,
+    annualRewardRate,
+    isLoadingVaultData,
   } = useStakingInputHandlers(balanceWei);
 
   const navigateToLearnMoreModal = () => {
@@ -55,9 +59,19 @@ const StakeInputView = () => {
       params: {
         amountWei: amountWei.toString(),
         amountFiat: fiatAmount,
+        annualRewardsETH,
+        annualRewardsFiat,
+        annualRewardRate,
       },
     });
-  }, [amountWei, fiatAmount, navigation]);
+  }, [
+    navigation,
+    amountWei,
+    fiatAmount,
+    annualRewardsETH,
+    annualRewardsFiat,
+    annualRewardRate,
+  ]);
 
   const balanceText = strings('stake.balance');
 
@@ -101,6 +115,7 @@ const StakeInputView = () => {
         <EstimatedAnnualRewardsCard
           estimatedAnnualRewards={estimatedAnnualRewards}
           onIconPress={navigateToLearnMoreModal}
+          isLoading={isLoadingVaultData}
         />
       </View>
       <QuickAmounts

app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap

@@ -577,7 +577,7 @@ exports[`StakeInputView render matches snapshot 1`] = `
                                     }
                                   }
                                 >
-                                  2.6%
+                                  2.5%
                                 </Text>
                                 <Text
                                   accessibilityRole="text"

app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.test.tsx

@@ -4,6 +4,11 @@ import UnstakeInputView from './UnstakeInputView';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import Routes from '../../../../../constants/navigation/Routes';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
+import {
+  MOCK_GET_POOLED_STAKES_API_RESPONSE,
+  MOCK_GET_VAULT_RESPONSE,
+  MOCK_STAKED_ETH_ASSET,
+} from '../../__mocks__/mockData';
 
 function render(Component: React.ComponentType) {
   return renderScreen(
@@ -48,6 +53,38 @@ jest.mock('../../../../../selectors/currencyRateController.ts', () => ({
   selectCurrentCurrency: jest.fn(() => 'USD'),
 }));
 
+const mockVaultData = MOCK_GET_VAULT_RESPONSE;
+const mockPooledStakeData = MOCK_GET_POOLED_STAKES_API_RESPONSE.accounts[0];
+
+jest.mock('../../hooks/useStakingEligibility', () => ({
+  __esModule: true,
+  default: () => ({
+    isEligible: true,
+    loading: false,
+    error: null,
+    refreshPooledStakingEligibility: jest.fn(),
+  }),
+}));
+
+jest.mock('../../hooks/useVaultData', () => ({
+  __esModule: true,
+  default: () => ({
+    vaultData: mockVaultData,
+    loading: false,
+    error: null,
+    annualRewardRate: '2.5%',
+    annualRewardRateDecimal: 0.025,
+  }),
+}));
+
+jest.mock('../../hooks/useBalance', () => ({
+  __esModule: true,
+  default: () => ({
+    stakedBalanceWei: mockPooledStakeData.assets,
+    stakedBalanceFiat: MOCK_STAKED_ETH_ASSET.balanceFiat,
+  }),
+}));
+
 describe('UnstakeInputView', () => {
   it('render matches snapshot', () => {
     render(UnstakeInputView);
@@ -81,7 +118,7 @@ describe('UnstakeInputView', () => {
 
       fireEvent.press(screen.getByText('25%'));
 
-      expect(screen.getByText('1.14999')).toBeTruthy();
+      expect(screen.getByText('1.44783')).toBeTruthy();
     });
   });
 
@@ -96,13 +133,14 @@ describe('UnstakeInputView', () => {
       render(UnstakeInputView);
 
       fireEvent.press(screen.getByText('1'));
+
       expect(screen.getByText('Review')).toBeTruthy();
     });
 
     it('displays `Not enough ETH` when input exceeds balance', () => {
       render(UnstakeInputView);
 
-      fireEvent.press(screen.getByText('6'));
+      fireEvent.press(screen.getByText('8'));
       expect(screen.queryAllByText('Not enough ETH')).toHaveLength(2);
     });
   });