feat: Implement staking details section

[pedronfigueiredo]

Description

Adds hook that encapsulates the component logic, and unit tests.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4081

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e711cf0
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/9a25c692-1d96-4e21-96a6-d7f6490a0ade

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[jpuri]

Not related to this PR, but I think <FlatNavHeader should not be part of info component. It can go in <View here.

Alternatively we can use navigation and header that comes with it by default, that will be even better approach.
cc @OGPoyraz

[OGPoyraz]

We will do this in another PR as discussed in the slack

[OGPoyraz]

Suggested change

	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',
	},
	},
	},
	});
	const updatedState = merge({}, stakingDepositConfirmationState, {
	engine: {
	backgroundState: {
	TransactionController: {
	transactions: [
	{
	txParams: {
	value: `0x${decGWEIToHexWEI(10 ** 8)}`,
	},
	},
	],
	},
	},
	},
	staking: {
	vaultData: {
	apy: '2.2',
	},
	},
	});
	const { getByText } = renderWithProvider(<StakingDetails />, {
	state: updatedState,
	});

Could this be simpler with lodash merge here and app/components/Views/confirmations/hooks/useStakingDetails.test.ts?