feat: Implement staking details section

app/components/Views/confirmations/components/Confirm/Info/StakingDeposit/StakingDeposit.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 
 import { strings } from '../../../../../../../../locales/i18n';
 import FlatNavHeader from '../../FlatNavHeader';
+import StakingDetails from '../../StakingDetails';
 import TokenHero from '../../TokenHero';
 
 const StakingDeposit = () => (
   <>
     <FlatNavHeader title={strings('stake.stake')} />
     <TokenHero />
+    <StakingDetails />
   </>
 );
 export default StakingDeposit;

app/components/Views/confirmations/components/Confirm/StakingDetails/StakingDetails.styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { fontStyles } from '../../../../../../styles/common';
+import { Theme } from '../../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container:{
+      paddingVertical: 8,
+    },
+    primaryValue: {
+      color: theme.colors.text.default,
+      ...fontStyles.normal,
+      fontSize: 14,
+    },
+    secondaryValue: {
+      color: theme.colors.text.alternative,
+      ...fontStyles.normal,
+      fontSize: 14,
+      marginRight: 8,
+    },
+    valueContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/confirmations/components/Confirm/StakingDetails/StakingDetails.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import { stakingDepositConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
+import StakingDetails from './StakingDetails';
+import { decGWEIToHexWEI } from '../../../../../../util/conversions';
+import initialRootState from '../../../../../../util/test/initial-root-state';
+
+describe('TokenHero', () => {
+  it('contains token and fiat values for staking deposit', async () => {
+    const { getByText } = renderWithProvider(<StakingDetails />, {
+      state: {
+        ...stakingDepositConfirmationState,
+        engine: {
+          ...stakingDepositConfirmationState.engine,
+          backgroundState: {
+            ...stakingDepositConfirmationState.engine.backgroundState,
+            TransactionController: {
+              ...stakingDepositConfirmationState.engine.backgroundState.TransactionController,
+              transactions: [
+                {
+                  ...stakingDepositConfirmationState.engine.backgroundState.TransactionController.transactions[0],
+                  txParams: {
+                    ...stakingDepositConfirmationState.engine.backgroundState.TransactionController.transactions[0].txParams,
+                    value: `0x${decGWEIToHexWEI(10 ** 8)}`,
+                  },
+                }
+              ]
+            },
+          },
+        },
+        staking: {
+          ...initialRootState.staking,
+          vaultData: {
+            ...initialRootState.staking.vaultData,
+            apy: '2.2',
+          },
+        },
+      },
+    });
+
+    expect(getByText('APR')).toBeDefined();
+    expect(getByText('2.2%')).toBeDefined();
+
+    expect(getByText('Est. annual reward')).toBeDefined();
+    expect(getByText('$7.91')).toBeDefined();
+    expect(getByText('0.0022 ETH')).toBeDefined();
+
+    expect(getByText('Reward frequency')).toBeDefined();
+    expect(getByText('12 hours')).toBeDefined();
+
+    expect(getByText('Withdrawal time')).toBeDefined();
+    expect(getByText('1 to 11 days')).toBeDefined();
+  });
+});

app/components/Views/confirmations/components/Confirm/StakingDetails/StakingDetails.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View } from 'react-native';
+import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
+import { strings } from '../../../../../../../locales/i18n';
+import Text from '../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../../component-library/hooks';
+import { useStakingDetails } from '../../../hooks/useStakingDetails';
+import InfoRow from '../../UI/InfoRow';
+import InfoSection from '../../UI/InfoRow/InfoSection';
+import styleSheet from './StakingDetails.styles';
+
+const StakingDetails = () => {
+  const { styles } = useStyles(styleSheet, {});
+  const { apr, annualRewardsFiat, annualRewardsETH } = useStakingDetails();
+
+  return (
+    <View style={styles.container}>
+      <InfoSection
+        testID={ConfirmationPageSectionsSelectorIDs.STAKING_DETAILS_SECTION}
+      >
+        <InfoRow label={strings('stake.apr')}>
+          {apr}
+        </InfoRow>
+        <InfoRow label={strings('stake.estimated_annual_reward')}>
+          <View style={styles.valueContainer}>
+            <Text style={styles.secondaryValue}>{annualRewardsFiat}</Text>
+            <Text style={styles.primaryValue}>{annualRewardsETH}</Text>
+          </View>
+        </InfoRow>
+        <InfoRow
+          label={strings('stake.reward_frequency')}
+          tooltip={
+            strings('stake.reward_frequency_tooltip', { frequency: strings('stake.12_hours') })
+          }
+        >
+          {strings('stake.12_hours')}
+        </InfoRow>
+        <InfoRow label={strings('stake.withdrawal_time')}>
+          {strings('stake.estimated_unstaking_time')}
+        </InfoRow>
+      </InfoSection>
+    </View>
+  );
+};
+
+export default StakingDetails;

app/components/Views/confirmations/components/Confirm/StakingDetails/index.ts

@@ -0,0 +1 @@
+export { default } from './StakingDetails';

app/components/Views/confirmations/hooks/useStakingDetails.test.ts

@@ -0,0 +1,48 @@
+import { useStakingDetails } from './useStakingDetails';
+import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
+import { stakingDepositConfirmationState } from '../../../../util/test/confirm-data-helpers';
+import initialRootState from '../../../../util/test/initial-root-state';
+import { decGWEIToHexWEI } from '../../../../util/conversions';
+
+describe('useStakingDetails', () => {
+  describe('staking deposit', () => {
+    it('returns token and fiat values', () => {
+      const { result } = renderHookWithProvider(useStakingDetails, {
+        state: {
+          ...stakingDepositConfirmationState,
+          engine: {
+            ...stakingDepositConfirmationState.engine,
+            backgroundState: {
+              ...stakingDepositConfirmationState.engine.backgroundState,
+              TransactionController: {
+                ...stakingDepositConfirmationState.engine.backgroundState.TransactionController,
+                transactions: [
+                  {
+                    ...stakingDepositConfirmationState.engine.backgroundState.TransactionController.transactions[0],
+                    txParams: {
+                      ...stakingDepositConfirmationState.engine.backgroundState.TransactionController.transactions[0].txParams,
+                      value: `0x${decGWEIToHexWEI(10 ** 8)}`,
+                    },
+                  }
+                ]
+              },
+            },
+          },
+          staking: {
+            ...initialRootState.staking,
+            vaultData: {
+              ...initialRootState.staking.vaultData,
+              apy: '2.2',
+            },
+          },
+        },
+      });
+
+      expect(result.current).toEqual({
+        annualRewardsETH: '0.0022 ETH',
+        annualRewardsFiat: '$7.91',
+        apr: '2.2%',
+      });
+    });
+  });
+});

app/components/Views/confirmations/hooks/useStakingDetails.ts

@@ -0,0 +1,35 @@
+import { useSelector } from 'react-redux';
+import { useTransactionMetadataRequest } from './useTransactionMetadataRequest';
+import useVaultData from '../../../../components/UI/Stake/hooks/useVaultData';
+import { selectConversionRateByChainId, selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import { renderFromWei, limitToMaximumDecimalPlaces, weiToFiatNumber, renderFiat } from '../../../../util/number';
+import { RootState } from '../../../../reducers';
+import { TransactionMeta } from '@metamask/transaction-controller';
+
+export const useStakingDetails = () => {
+    const transactionMeta = useTransactionMetadataRequest();
+    const txValueWei = transactionMeta?.txParams?.value;
+
+    const { annualRewardRate: apr, annualRewardRateDecimal } = useVaultData();
+
+    const amountEth = renderFromWei(txValueWei || '0');
+
+    const annualRewardsETH = `${limitToMaximumDecimalPlaces(
+      parseFloat(amountEth) * annualRewardRateDecimal,
+      5,
+    )} ETH`;
+
+    const nativeFiatRate = useSelector(
+      (state: RootState) => selectConversionRateByChainId(state, (transactionMeta as TransactionMeta).chainId)
+    ) as number
+    const currentCurrency = useSelector(selectCurrentCurrency);
+
+    const fiatAmount = weiToFiatNumber(txValueWei || '0', nativeFiatRate || 0, 2).toString();
+    const annualRewardsFiat = renderFiat(
+      parseFloat(fiatAmount) * annualRewardRateDecimal,
+      currentCurrency,
+      2,
+    );
+
+    return { apr, annualRewardsFiat, annualRewardsETH };
+  }

e2e/selectors/Confirmation/ConfirmationView.selectors.js

@@ -21,4 +21,5 @@ export const ConfirmationPageSectionsSelectorIDs = {
   ORIGIN_INFO_SECTION: 'origin-info-section',
   SIWE_SIGNING_ACCOUNT_INFO_SECTION: 'siwe-signing-account-info-section',
   MESSAGE_SECTION: 'message-section',
+  STAKING_DETAILS_SECTION: 'staking-details-section',
 };

locales/languages/en.json

@@ -3449,6 +3449,10 @@
       "stake_annual_rate_tooltip": "Annual rate tooltip"
     },
     "estimated_annual_rewards": "Estimated annual rewards",
+    "estimated_annual_reward": "Est. annual reward",
+    "reward_frequency": "Reward frequency",
+    "reward_frequency_tooltip": "Your staked balance updates every {{frequency}} to account for new rewards.",
+    "withdrawal_time": "Withdrawal time",
     "metamask_pool": "MetaMask Pool",
     "enter_amount": "Enter amount",
     "review": "Review",