From f996de194b885948f1706a25ace5d293798375fe Mon Sep 17 00:00:00 2001 From: Matthew Grainger <46547583+Matt561@users.noreply.github.com> Date: Tue, 15 Oct 2024 20:05:05 -0400 Subject: [PATCH] feat: STAKE-824: [FE] build staking input confirmation screen (#11605) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR adds the staking confirmation screen with some mock data being used temporarily. ### Change List - Add staking confirmation screen. - Connect existing `` to staking confirmation screen when user enters valid amount to stake. ## **Related issues** Ticket: [FE] Build staking input confirmation screen - ([link](https://consensyssoftware.atlassian.net/browse/STAKE-824)) Figma Designs - [link](https://www.figma.com/design/1c0Y9jDJe6p0j82jydJDcs/Mobile-Staking?node-id=2979-22435&m=dev) ## **Manual testing steps** 1. Add `export MM_POOLED_STAKING_UI_ENABLED=true` to your `.js.env` file. 2. Click on Ethereum In the token list page 3. Scroll down a bit and click "Stake more". This should open the stake input view (not related to this PR) 4. Enter a valid amount to stake and click "Confirm" 5. You should be redirected to a staking confirmation screen. The screen should display the amount to stake in `wETH` and Fiat. ## **Screenshots/Recordings** ### **Before** Nothing would happen after clicking "Confirm" on the stake input view. This screen is new. ### **After** https://github.com/user-attachments/assets/84ea4c52-50c5-48c3-8077-2c2e8a92bf21 ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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. --- app/components/UI/Navbar/index.js | 63 +- .../StakeConfirmationView.styles.ts | 23 + .../StakeConfirmationView.test.tsx | 74 + .../StakeConfirmationView.tsx | 60 + .../StakeConfirmationView.types.ts | 10 + .../StakeConfirmationView.test.tsx.snap | 1424 +++++++++++++++++ .../Views/StakeInputView/StakeInputView.tsx | 16 +- .../StakeInputView.test.tsx.snap | 100 +- .../UnstakeInputView/UnstakeInputView.tsx | 6 +- .../UnstakeInputView.test.tsx.snap | 100 +- .../StakingBalance/StakingBalance.test.tsx | 40 +- .../StakingBalance/StakingCta/StakingCta.tsx | 6 +- .../__snapshots__/StakingCta.test.tsx.snap | 2 +- .../StakingBalance.test.tsx.snap | 1385 +++++++--------- .../AccountHeaderCard.styles.ts | 40 + .../AccountHeaderCard.test.tsx | 72 + .../AccountHeaderCard/AccountHeaderCard.tsx | 74 + .../AccountHeaderCard.types.ts | 3 + .../AccountHeaderCard.test.tsx.snap | 623 ++++++++ .../AccountTag/AccountTag.test.tsx | 31 + .../AccountTag/AccountTag.tsx | 38 + .../AccountTag/AccountTag.types.ts | 5 + .../__snapshots__/AccountTag.test.tsx.snap | 395 +++++ .../ConfirmationFooter.styles.ts | 114 ++ .../ConfirmationFooter.test.tsx | 19 + .../ConfirmationFooter/ConfirmationFooter.tsx | 19 + .../FooterButtonGroup.styles.ts | 18 + .../FooterButtonGroup.test.tsx | 49 + .../FooterButtonGroup/FooterButtonGroup.tsx | 59 + .../FooterButtonGroup.test.tsx.snap | 189 +++ .../LegalLinks/LegalLinks.styles.ts | 14 + .../LegalLinks/LegalLinks.test.tsx | 61 + .../LegalLinks/LegalLinks.tsx | 52 + .../__snapshots__/LegalLinks.test.tsx.snap | 187 +++ .../ConfirmationFooter.test.tsx.snap | 162 ++ .../ContractTag/ContractTag.test.tsx | 17 + .../ContractTag/ContractTag.tsx | 23 + .../ContractTag/ContractTag.types.ts | 3 + .../__snapshots__/ContractTag.test.tsx.snap | 69 + .../EstimatedGasCard.styles.ts | 39 + .../EstimatedGasCard.test.tsx | 67 + .../EstimatedGasCard/EstimatedGasCard.tsx | 69 + .../EstimatedGasCard.types.ts | 4 + .../EstimatedGasCard.test.tsx.snap | 419 +++++ .../EstimatedGasFeeTooltipContent.styles.ts | 13 + .../EstimatedGasFeeTooltipContent.test.tsx | 53 + .../EstimatedGasFeeTooltipContent.tsx | 43 + ...stimatedGasFeeTooltipContent.test.tsx.snap | 67 + .../RewardsCard/RewardsCard.styles.ts | 16 + .../RewardsCard/RewardsCard.test.tsx | 98 ++ .../RewardsCard/RewardsCard.tsx | 74 + .../RewardsCard/RewardsCard.types.ts | 5 + .../__snapshots__/RewardsCard.test.tsx.snap | 1255 +++++++++++++++ .../TokenValueStack/TokenValueStack.styles.ts | 23 + .../TokenValueStack/TokenValueStack.test.tsx | 33 + .../TokenValueStack/TokenValueStack.tsx | 54 + .../TokenValueStack/TokenValueStack.types.ts | 7 + .../TokenValueStack.test.tsx.snap | 212 +++ app/components/UI/Stake/routes/index.tsx | 5 + .../Views/TooltipModal/ToolTipModal.styles.ts | 1 - app/constants/navigation/Routes.ts | 1 + app/core/AppConstants.ts | 1 + locales/languages/en.json | 19 +- 63 files changed, 7149 insertions(+), 1074 deletions(-) create mode 100644 app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.styles.ts create mode 100644 app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx create mode 100644 app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx create mode 100644 app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.types.ts create mode 100644 app/components/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountTag/AccountTag.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountTag/AccountTag.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountTag/AccountTag.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/AccountTag/__snapshots__/AccountTag.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/__snapshots__/FooterButtonGroup.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/LegalLinks/LegalLinks.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/LegalLinks/LegalLinks.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/LegalLinks/LegalLinks.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/LegalLinks/__snapshots__/LegalLinks.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ConfirmationFooter/__snapshots__/ConfirmationFooter.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ContractTag/ContractTag.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ContractTag/ContractTag.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ContractTag/ContractTag.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/ContractTag/__snapshots__/ContractTag.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/__snapshots__/EstimatedGasCard.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/__snapshots__/EstimatedGasFeeTooltipContent.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/RewardsCard/RewardsCard.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/RewardsCard/__snapshots__/RewardsCard.test.tsx.snap create mode 100644 app/components/UI/Stake/components/StakingConfirmation/TokenValueStack/TokenValueStack.styles.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/TokenValueStack/TokenValueStack.test.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/TokenValueStack/TokenValueStack.tsx create mode 100644 app/components/UI/Stake/components/StakingConfirmation/TokenValueStack/TokenValueStack.types.ts create mode 100644 app/components/UI/Stake/components/StakingConfirmation/TokenValueStack/__snapshots__/TokenValueStack.test.tsx.snap diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js index 8127d67f23c..fd8aa98b1f8 100644 --- a/app/components/UI/Navbar/index.js +++ b/app/components/UI/Navbar/index.js @@ -1824,34 +1824,61 @@ export const getSettingsNavigationOptions = (title, themeColors) => { }; }; -export function getStakingNavbar(title, navigation, themeColors) { +/** + * + * @param {String} title - Navbar Title. + * @param {NavigationProp} navigation Navigation object returned from useNavigation hook. + * @param {ThemeColors} themeColors theme.colors returned from useStyles hook. + * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [options] - Optional options for navbar. + * @returns Staking Navbar Component. + */ +export function getStakingNavbar(title, navigation, themeColors, options) { + const { hasBackButton = true, hasCancelButton = true } = options ?? {}; + const innerStyles = StyleSheet.create({ + headerStyle: { + backgroundColor: + options?.backgroundColor ?? themeColors.background.default, + shadowOffset: null, + }, + headerLeft: { + marginHorizontal: 16, + }, headerButtonText: { color: themeColors.primary.default, fontSize: 14, ...fontStyles.normal, }, - headerStyle: { - backgroundColor: themeColors.background.default, - shadowColor: importedColors.transparent, - elevation: 0, - }, }); + + function navigationPop() { + navigation.goBack(); + } + return { headerTitle: () => ( - - ), - headerLeft: () => , - headerRight: () => ( - navigation.dangerouslyGetParent()?.pop()} - style={styles.closeButton} - > - - {strings('navigation.cancel')} - - + {title} ), headerStyle: innerStyles.headerStyle, + headerLeft: () => + hasBackButton ? ( + + ) : null, + headerRight: () => + hasCancelButton ? ( + navigation.dangerouslyGetParent()?.pop()} + style={styles.closeButton} + > + + {strings('navigation.cancel')} + + + ) : null, }; } diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.styles.ts b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.styles.ts new file mode 100644 index 00000000000..d351fc7302a --- /dev/null +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.styles.ts @@ -0,0 +1,23 @@ +import type { Theme } from '../../../../../util/theme/models'; +import { StyleSheet } from 'react-native'; + +const stylesSheet = (params: { theme: Theme }) => { + const { theme } = params; + const { colors } = theme; + + return StyleSheet.create({ + mainContainer: { + flex: 1, + paddingTop: 8, + paddingHorizontal: 16, + backgroundColor: colors.background.alternative, + justifyContent: 'space-between', + }, + cardsContainer: { + paddingTop: 16, + gap: 8, + }, + }); +}; + +export default stylesSheet; diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx new file mode 100644 index 00000000000..109fe3e7fac --- /dev/null +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import renderWithProvider from '../../../../../util/test/renderWithProvider'; +import StakeConfirmationView from './StakeConfirmationView'; +import { Image } from 'react-native'; +import { createMockAccountsControllerState } from '../../../../../util/test/accountsControllerTestUtils'; +import { backgroundState } from '../../../../../util/test/initial-root-state'; +import configureMockStore from 'redux-mock-store'; +import { Provider } from 'react-redux'; +import { StakeConfirmationViewProps } from './StakeConfirmationView.types'; + +jest.mock('../../../../hooks/useIpfsGateway', () => jest.fn()); + +Image.getSize = jest.fn((_uri, success) => { + success(100, 100); // Mock successful response for ETH native Icon Image +}); + +const MOCK_ADDRESS_1 = '0x0'; +const MOCK_ADDRESS_2 = '0x1'; + +const MOCK_ACCOUNTS_CONTROLLER_STATE = createMockAccountsControllerState([ + MOCK_ADDRESS_1, + MOCK_ADDRESS_2, +]); + +const mockStore = configureMockStore(); + +const mockInitialState = { + settings: {}, + engine: { + backgroundState: { + ...backgroundState, + AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE, + }, + }, +}; +const store = mockStore(mockInitialState); + +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: jest + .fn() + .mockImplementation((callback) => callback(mockInitialState)), +})); + +jest.mock('@react-navigation/native', () => { + const actualNav = jest.requireActual('@react-navigation/native'); + return { + ...actualNav, + useNavigation: () => ({ + navigate: jest.fn(), + setOptions: jest.fn(), + }), + }; +}); + +describe('StakeConfirmationView', () => { + it('render matches snapshot', () => { + const props: StakeConfirmationViewProps = { + route: { + key: '1', + params: { amountWei: '3210000000000000', amountFiat: '7.46' }, + name: 'params', + }, + }; + + const { toJSON } = renderWithProvider( + + + , + ); + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx new file mode 100644 index 00000000000..2f1a4890286 --- /dev/null +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx @@ -0,0 +1,60 @@ +import React, { useEffect } from 'react'; +import { View } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; +import { useStyles } from '../../../../hooks/useStyles'; +import { getStakingNavbar } from '../../../Navbar'; +import styleSheet from './StakeConfirmationView.styles'; +import TokenValueStack from '../../components/StakingConfirmation/TokenValueStack/TokenValueStack'; +import AccountHeaderCard from '../../components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard'; +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'; + +const MOCK_REWARD_DATA = { + REWARDS: { + ETH: '0.13 ETH', + FIAT: '$334.93', + }, +}; + +const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; + +const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => { + const navigation = useNavigation(); + + const { styles, theme } = useStyles(styleSheet, {}); + + useEffect(() => { + navigation.setOptions( + getStakingNavbar(strings('stake.stake'), navigation, theme.colors, { + backgroundColor: theme.colors.background.alternative, + hasCancelButton: false, + }), + ); + }, [navigation, theme.colors]); + + return ( + + + + + + + + + + + ); +}; + +export default StakeConfirmationView; diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.types.ts b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.types.ts new file mode 100644 index 00000000000..8c723135f4f --- /dev/null +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.types.ts @@ -0,0 +1,10 @@ +import { RouteProp } from '@react-navigation/native'; + +interface StakeConfirmationViewRouteParams { + amountWei: string; + amountFiat: string; +} + +export interface StakeConfirmationViewProps { + route: RouteProp<{ params: StakeConfirmationViewRouteParams }, 'params'>; +} diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap b/app/components/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap new file mode 100644 index 00000000000..9d14c100f63 --- /dev/null +++ b/app/components/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap @@ -0,0 +1,1424 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StakeConfirmationView render matches snapshot 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + 0.00321 + + ETH + + + $7.46 + + + + + + + + + + + + Staking from + + + + + + + + + + + + + + + + + + + + + + + Account 1 + + + + + + + + + + + + + Interacting with + + + + + + + + + + + + + MM Pooled Staking + + + + + + + + + + + + + + + Network + + + + + + + + + + + + + Ethereum Main Network + + + + + + + + + + + + + + + Reward rate + + + + + + + + + + + + 2.8% + + + + + + + + + + + Estimated annual rewards + + + + + + + + + + $334.93 + + + 0.13 ETH + + + + + + + + + + + + Reward frequency + + + + + + + + + + + + 12 hours + + + + + + + + + + + + + Terms of service + + + + + Risk disclosure + + + + + + + Cancel + + + + + Confirm + + + + + +`; diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx index 1ca6560d7f4..0431e67a77f 100644 --- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx +++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx @@ -50,8 +50,14 @@ const StakeInputView = () => { }; const handleStakePress = useCallback(() => { - // TODO: Display the Review bottom sheet: STAKE-824 - }, []); + navigation.navigate('StakeScreens', { + screen: Routes.STAKING.STAKE_CONFIRMATION, + params: { + amountWei: amountWei.toString(), + amountFiat: fiatAmount, + }, + }); + }, [amountWei, fiatAmount, navigation]); const balanceText = strings('stake.balance'); @@ -66,7 +72,11 @@ const StakeInputView = () => { : `${balanceFiatNumber?.toString()} ${currentCurrency.toUpperCase()}`; useEffect(() => { - navigation.setOptions(getStakingNavbar(title, navigation, theme.colors)); + navigation.setOptions( + getStakingNavbar(title, navigation, theme.colors, { + hasBackButton: false, + }), + ); }, [navigation, theme.colors, title]); useEffect(() => { diff --git a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap index 5085ab0c15e..4a35aa2b83e 100644 --- a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap +++ b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap @@ -56,13 +56,9 @@ exports[`StakeInputView render matches snapshot 1`] = ` { "backgroundColor": "#ffffff", "borderBottomColor": "rgb(216, 216, 216)", - "elevation": 0, "flex": 1, - "shadowColor": "transparent", - "shadowOffset": { - "height": 0.5, - "width": 0, - }, + "shadowColor": "rgb(216, 216, 216)", + "shadowOffset": null, "shadowOpacity": 0.85, "shadowRadius": 0, } @@ -106,96 +102,26 @@ exports[`StakeInputView render matches snapshot 1`] = ` pointerEvents="box-none" style={ { - "alignItems": "flex-start", - "bottom": 0, - "justifyContent": "center", - "left": 0, - "opacity": 1, - "position": "absolute", - "top": 0, - } - } - > - - - - - - Stake ETH - - - - - Ethereum Main Network - - - + Stake ETH + { : strings('stake.review'); useEffect(() => { - navigation.setOptions(getStakingNavbar(title, navigation, theme.colors)); + navigation.setOptions( + getStakingNavbar(title, navigation, theme.colors, { + hasBackButton: false, + }), + ); }, [navigation, theme.colors, title]); const handleUnstakePress = useCallback(() => { diff --git a/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap index 15e289f23e7..5e7927b0b5c 100644 --- a/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap +++ b/app/components/UI/Stake/Views/UnstakeInputView/__snapshots__/UnstakeInputView.test.tsx.snap @@ -56,13 +56,9 @@ exports[`UnstakeInputView render matches snapshot 1`] = ` { "backgroundColor": "#ffffff", "borderBottomColor": "rgb(216, 216, 216)", - "elevation": 0, "flex": 1, - "shadowColor": "transparent", - "shadowOffset": { - "height": 0.5, - "width": 0, - }, + "shadowColor": "rgb(216, 216, 216)", + "shadowOffset": null, "shadowOpacity": 0.85, "shadowRadius": 0, } @@ -106,96 +102,26 @@ exports[`UnstakeInputView render matches snapshot 1`] = ` pointerEvents="box-none" style={ { - "alignItems": "flex-start", - "bottom": 0, - "justifyContent": "center", - "left": 0, - "opacity": 1, - "position": "absolute", - "top": 0, - } - } - > - - - - - - Unstake ETH - - - - - Ethereum Main Network - - - + Unstake ETH + jest.fn()); + +Image.getSize = jest.fn((_uri, success) => { + success(100, 100); // Mock successful response for ETH native Icon Image +}); const mockNavigate = jest.fn(); @@ -39,15 +29,17 @@ afterEach(() => { }); describe('StakingBalance', () => { + beforeEach(() => jest.resetAllMocks()); + it('render matches snapshot', () => { - render(StakingBalance); - expect(screen.toJSON()).toMatchSnapshot(); + const { toJSON } = renderWithProvider(); + expect(toJSON()).toMatchSnapshot(); }); it('redirects to StakeInputView on stake button click', () => { - render(StakingBalance); + const { getByText } = renderWithProvider(); - fireEvent.press(screen.getByText(strings('stake.stake_more'))); + fireEvent.press(getByText(strings('stake.stake_more'))); expect(mockNavigate).toHaveBeenCalledTimes(1); expect(mockNavigate).toHaveBeenCalledWith('StakeScreens', { @@ -56,9 +48,9 @@ describe('StakingBalance', () => { }); it('redirects to UnstakeInputView on unstake button click', () => { - render(StakingBalance); + const { getByText } = renderWithProvider(); - fireEvent.press(screen.getByText(strings('stake.unstake'))); + fireEvent.press(getByText(strings('stake.unstake'))); expect(mockNavigate).toHaveBeenCalledTimes(1); expect(mockNavigate).toHaveBeenCalledWith('StakeScreens', { diff --git a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx index 1ab816b649d..13b3d2c8629 100644 --- a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx +++ b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx @@ -36,10 +36,10 @@ const StakingCta = ({ estimatedRewardRate, style }: StakingCtaProps) => { {strings('stake.stake_your_eth_cta.base')} - {estimatedRewardRate} - - {strings('stake.stake_your_eth_cta.annually')} + + {estimatedRewardRate} + {strings('stake.stake_your_eth_cta.annually')}