feat: STAKE-805 integrate stake method

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

@@ -53,6 +53,15 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('../../hooks/usePoolStakedDeposit', () => ({
+  __esModule: true,
+  default: () => ({
+    poolStakingContract: {},
+    estimateDepositGas: jest.fn(),
+    attemptDepositTransaction: jest.fn(),
+  }),
+}));
+
 describe('StakeConfirmationView', () => {
   it('render matches snapshot', () => {
     const props: StakeConfirmationViewProps = {

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

@@ -11,6 +11,7 @@ import ConfirmationFooter from '../../components/StakingConfirmation/Confirmatio
 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: {
@@ -52,7 +53,10 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
           />
         </View>
       </View>
-      <ConfirmationFooter />
+      <ConfirmationFooter
+        valueWei={route.params.amountWei}
+        action={FooterButtonGroupActions.STAKE}
+      />
     </View>
   );
 };

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

@@ -6,6 +6,8 @@ import Routes from '../../../../../constants/navigation/Routes';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import { BN } from 'ethereumjs-util';
 import { Stake } from '../../sdk/stakeSdkProvider';
+import { ChainId, PooledStakingContract } from '@metamask/stake-sdk';
+import { Contract } from 'ethers';
 
 function render(Component: React.ComponentType) {
   return renderScreen(
@@ -53,15 +55,30 @@ jest.mock('../../../../../selectors/currencyRateController.ts', () => ({
 
 const mockBalanceBN = new BN('1500000000000000000');
 
+const mockPooledStakingContractService: PooledStakingContract = {
+  chainId: ChainId.ETHEREUM,
+  connectSignerOrProvider: jest.fn(),
+  contract: new Contract('0x0000000000000000000000000000000000000000', []),
+  convertToShares: jest.fn(),
+  encodeClaimExitedAssetsTransactionData: jest.fn(),
+  encodeDepositTransactionData: jest.fn(),
+  encodeEnterExitQueueTransactionData: jest.fn(),
+  encodeMulticallTransactionData: jest.fn(),
+  estimateClaimExitedAssetsGas: jest.fn(),
+  estimateDepositGas: jest.fn(),
+  estimateEnterExitQueueGas: jest.fn(),
+  estimateMulticallGas: jest.fn(),
+};
+
 jest.mock('../../hooks/useStakeContext.ts', () => ({
   useStakeContext: jest.fn(() => {
     const stakeContext: Stake = {
       setSdkType: jest.fn(),
-      sdkService: undefined
-    }
-    return stakeContext
-  })
-}))
+      stakingContract: mockPooledStakingContractService,
+    };
+    return stakeContext;
+  }),
+}));
 
 jest.mock('../../hooks/useBalance', () => ({
   __esModule: true,

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

@@ -19,7 +19,6 @@ import styleSheet from './StakeInputView.styles';
 import useStakingInputHandlers from '../../hooks/useStakingInput';
 import useBalance from '../../hooks/useBalance';
 import InputDisplay from '../../components/InputDisplay';
-import { useStakeContext } from '../../hooks/useStakeContext';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
@@ -44,9 +43,6 @@ const StakeInputView = () => {
     estimatedAnnualRewards,
   } = useStakingInputHandlers(balanceWei);
 
-
-  const { sdkService } = useStakeContext();
-
   const navigateToLearnMoreModal = () => {
     navigation.navigate('StakeModals', {
       screen: Routes.STAKING.MODALS.LEARN_MORE,
@@ -61,8 +57,7 @@ const StakeInputView = () => {
         amountFiat: fiatAmount,
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [amountWei, fiatAmount, navigation, sdkService]);
+  }, [amountWei, fiatAmount, navigation]);
 
   const balanceText = strings('stake.balance');
 

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.test.tsx

@@ -1,18 +1,58 @@
 import React from 'react';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import ConfirmationFooter from './ConfirmationFooter';
+import { ConfirmationFooterProps } from './ConfirmationFooter.types';
+import { createMockAccountsControllerState } from '../../../../../../util/test/accountsControllerTestUtils';
+import { backgroundState } from '../../../../../../util/test/initial-root-state';
+import { FooterButtonGroupActions } from './FooterButtonGroup/FooterButtonGroup.types';
+
+const MOCK_ADDRESS_1 = '0x0';
+const MOCK_ADDRESS_2 = '0x1';
+
+const MOCK_ACCOUNTS_CONTROLLER_STATE = createMockAccountsControllerState([
+  MOCK_ADDRESS_1,
+  MOCK_ADDRESS_2,
+]);
+
+const mockInitialState = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
+    },
+  },
+};
 
 jest.mock('@react-navigation/native', () => {
   const actualReactNavigation = jest.requireActual('@react-navigation/native');
   return {
     ...actualReactNavigation,
-    useNavigation: jest.fn(),
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
   };
 });
 
+jest.mock('../../../hooks/usePoolStakedDeposit', () => ({
+  __esModule: true,
+  default: () => ({
+    poolStakingContract: {},
+    estimateDepositGas: jest.fn(),
+    attemptDepositTransaction: jest.fn(),
+  }),
+}));
+
 describe('ConfirmationFooter', () => {
   it('render matches snapshot', () => {
-    const { toJSON } = renderWithProvider(<ConfirmationFooter />);
+    const props: ConfirmationFooterProps = {
+      valueWei: '3210000000000000',
+      action: FooterButtonGroupActions.STAKE,
+    };
+
+    const { toJSON } = renderWithProvider(<ConfirmationFooter {...props} />, {
+      state: mockInitialState,
+    });
 
     expect(toJSON()).toMatchSnapshot();
   });

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.tsx

@@ -4,14 +4,15 @@ import styleSheet from './ConfirmationFooter.styles';
 import { View } from 'react-native';
 import FooterLegalLinks from './LegalLinks/LegalLinks';
 import FooterButtonGroup from './FooterButtonGroup/FooterButtonGroup';
+import { ConfirmationFooterProps } from './ConfirmationFooter.types';
 
-const ConfirmationFooter = () => {
+const ConfirmationFooter = ({ valueWei, action }: ConfirmationFooterProps) => {
   const { styles } = useStyles(styleSheet, {});
 
   return (
     <View style={styles.footerContainer}>
       <FooterLegalLinks />
-      <FooterButtonGroup />
+      <FooterButtonGroup valueWei={valueWei} action={action} />
     </View>
   );
 };

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.types.ts

@@ -0,0 +1,6 @@
+import { FooterButtonGroupActions } from './FooterButtonGroup/FooterButtonGroup.types';
+
+export interface ConfirmationFooterProps {
+  valueWei: string; // deposit, unstake, and claim value
+  action: FooterButtonGroupActions;
+}

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.test.tsx

@@ -3,9 +3,34 @@ import renderWithProvider from '../../../../../../../util/test/renderWithProvide
 import { strings } from '../../../../../../../../locales/i18n';
 import FooterButtonGroup from './FooterButtonGroup';
 import { fireEvent } from '@testing-library/react-native';
+import {
+  FooterButtonGroupActions,
+  FooterButtonGroupProps,
+} from './FooterButtonGroup.types';
+import { createMockAccountsControllerState } from '../../../../../../../util/test/accountsControllerTestUtils';
+import { backgroundState } from '../../../../../../../util/test/initial-root-state';
+
+const MOCK_ADDRESS_1 = '0x0';
+const MOCK_ADDRESS_2 = '0x1';
+
+const MOCK_ACCOUNTS_CONTROLLER_STATE = createMockAccountsControllerState([
+  MOCK_ADDRESS_1,
+  MOCK_ADDRESS_2,
+]);
+
+const mockInitialState = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
+    },
+  },
+};
 
 const mockCanGoBack = jest.fn();
 const mockGoBack = jest.fn();
+const mockNavigate = jest.fn();
 
 jest.mock('@react-navigation/native', () => {
   const actualReactNavigation = jest.requireActual('@react-navigation/native');
@@ -14,33 +39,58 @@ jest.mock('@react-navigation/native', () => {
     useNavigation: () => ({
       canGoBack: mockCanGoBack,
       goBack: mockGoBack,
+      navigate: mockNavigate,
     }),
   };
 });
 
+jest.mock('../../../../hooks/usePoolStakedDeposit', () => ({
+  __esModule: true,
+  default: () => ({
+    poolStakingContract: {},
+    estimateDepositGas: jest.fn(),
+    attemptDepositTransaction: jest.fn(),
+  }),
+}));
+
 describe('FooterButtonGroup', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
   it('render matches snapshot', () => {
-    const { getByText, toJSON } = renderWithProvider(<FooterButtonGroup />);
+    const props: FooterButtonGroupProps = {
+      valueWei: '3210000000000000',
+      action: FooterButtonGroupActions.STAKE,
+    };
+
+    const { getByText, toJSON } = renderWithProvider(
+      <FooterButtonGroup {...props} />,
+      { state: mockInitialState },
+    );
 
     expect(getByText(strings('stake.cancel'))).toBeDefined();
     expect(getByText(strings('stake.confirm'))).toBeDefined();
 
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('navigates to previous page when cancel button is pressed', () => {
+  it('navigates to Asset page when cancel is pressed', () => {
     mockCanGoBack.mockImplementationOnce(() => true);
+    const props: FooterButtonGroupProps = {
+      valueWei: '3210000000000000',
+      action: FooterButtonGroupActions.STAKE,
+    };
 
-    const { getByText, toJSON } = renderWithProvider(<FooterButtonGroup />);
+    const { getByText, toJSON } = renderWithProvider(
+      <FooterButtonGroup {...props} />,
+      { state: mockInitialState },
+    );
 
     fireEvent.press(getByText(strings('stake.cancel')));
 
-    expect(mockCanGoBack).toHaveBeenCalledTimes(1);
-    expect(mockGoBack).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith('Asset');
 
     expect(toJSON()).toMatchSnapshot();
   });

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx

@@ -13,16 +13,57 @@ import Text, {
 } from '../../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../hooks/useStyles';
 import styleSheet from './FooterButtonGroup.styles';
+import { useSelector } from 'react-redux';
+import { selectSelectedInternalAccount } from '../../../../../../../selectors/accountsController';
+import usePoolStakedDeposit from '../../../../hooks/usePoolStakedDeposit';
+import Engine from '../../../../../../../core/Engine';
+import {
+  FooterButtonGroupActions,
+  FooterButtonGroupProps,
+} from './FooterButtonGroup.types';
+import Routes from '../../../../../../../constants/navigation/Routes';
 
-const FooterButtonGroup = () => {
+const FooterButtonGroup = ({ valueWei, action }: FooterButtonGroupProps) => {
   const { styles } = useStyles(styleSheet, {});
 
-  const navigation = useNavigation();
+  const { navigate } = useNavigation();
 
-  const handleGoBack = () => {
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-    }
+  const activeAccount = useSelector(selectSelectedInternalAccount);
+
+  const { attemptDepositTransaction } = usePoolStakedDeposit();
+
+  const handleStake = async () => {
+    if (!activeAccount?.address) return;
+
+    const txRes = await attemptDepositTransaction(
+      valueWei,
+      activeAccount.address,
+    );
+
+    const transactionId = txRes?.transactionMeta?.id;
+
+    // Listening for confirmation
+    Engine.controllerMessenger.subscribeOnceIf(
+      'TransactionController:transactionSubmitted',
+      () => {
+        navigate(Routes.TRANSACTIONS_VIEW);
+      },
+      ({ transactionMeta }) => transactionMeta.id === transactionId,
+    );
+
+    // Engine.controllerMessenger.subscribeOnceIf(
+    //   'TransactionController:transactionConfirmed',
+    //   () => {
+    // TODO: Call refreshPooledStakes();
+    // refreshPooledStakes();
+    //   },
+    //   (transactionMeta) => transactionMeta.id === transactionId,
+    // );
+  };
+
+  const handleConfirmation = () => {
+    if (action === FooterButtonGroupActions.STAKE) return handleStake();
+    // TODO: Add handler (STAKE-803)
   };
 
   return (
@@ -37,7 +78,7 @@ const FooterButtonGroup = () => {
         variant={ButtonVariants.Secondary}
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}
-        onPress={handleGoBack}
+        onPress={() => navigate('Asset')}
       />
       <Button
         label={
@@ -49,8 +90,7 @@ const FooterButtonGroup = () => {
         variant={ButtonVariants.Primary}
         width={ButtonWidthTypes.Full}
         size={ButtonSize.Lg}
-        // TODO: Replace with actual stake confirmation flow
-        onPress={handleGoBack}
+        onPress={handleConfirmation}
       />
     </View>
   );

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types.ts

@@ -0,0 +1,9 @@
+export enum FooterButtonGroupActions {
+  STAKE = 'STAKE',
+  UNSTAKE = 'UNSTAKE',
+}
+
+export interface FooterButtonGroupProps {
+  valueWei: string; // deposit, unstake, and claim value
+  action: FooterButtonGroupActions;
+}

app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/__snapshots__/FooterButtonGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FooterButtonGroup navigates to previous page when cancel button is pressed 1`] = `
+exports[`FooterButtonGroup navigates to Asset page when cancel is pressed 1`] = `
 <View
   style={
     {