diff --git a/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx b/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx index 8f88277cc40..e729f72f7e1 100644 --- a/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx +++ b/app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useRef } from 'react'; -import { View, Image, Platform } from 'react-native'; +import { View, Image } from 'react-native'; import { createStyles } from './styles'; import { strings } from '../../../../locales/i18n'; import Text, { @@ -23,12 +23,7 @@ import { import { MetaMetricsEvents } from '../../../core/Analytics'; import { ScrollView } from 'react-native-gesture-handler'; -import { - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, -} from '../../../../wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds'; - -import generateTestId from '../../../../wdio/utils/generateTestId'; +import { EnableAutomaticSecurityChecksIDs } from '../../../../e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors'; import generateDeviceAnalyticsMetaData from '../../../util/metrics'; import { useMetrics } from '../../../components/hooks/useMetrics'; @@ -92,10 +87,7 @@ const EnableAutomaticSecurityChecksModal = () => { @@ -122,10 +114,7 @@ const EnableAutomaticSecurityChecksModal = () => { label={strings( 'enable_automatic_security_check_modal.secondary_action', )} - {...generateTestId( - Platform, - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, - )} + testID={EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON} size={ButtonSize.Md} onPress={triggerCloseAndDisableAutomaticSecurityChecks} /> diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx index 86c5c82e1e3..720b5242f61 100644 --- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.test.tsx @@ -56,8 +56,6 @@ jest.mock('@react-navigation/native', () => { jest.mock('../../hooks/usePoolStakedDeposit', () => ({ __esModule: true, default: () => ({ - poolStakingContract: {}, - estimateDepositGas: jest.fn(), attemptDepositTransaction: jest.fn(), }), })); diff --git a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx index 48a7277df07..6f53a175524 100644 --- a/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx +++ b/app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx @@ -5,7 +5,7 @@ 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 AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard'; import RewardsCard from '../../components/StakingConfirmation/RewardsCard/RewardsCard'; import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter'; import { StakeConfirmationViewProps } from './StakeConfirmationView.types'; @@ -37,7 +37,11 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => { tokenSymbol="ETH" /> - + { + const { theme } = params; + const { colors } = theme; + + return StyleSheet.create({ + mainContainer: { + paddingTop: 8, + paddingHorizontal: 16, + backgroundColor: colors.background.alternative, + height: '100%', + justifyContent: 'space-between', + }, + cardsContainer: { + paddingTop: 8, + gap: 8, + }, + }); +}; + +export default styleSheet; diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.test.tsx b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.test.tsx new file mode 100644 index 00000000000..ada7220b852 --- /dev/null +++ b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.test.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import UnstakeConfirmationView from './UnstakeConfirmationView'; +import renderWithProvider from '../../../../../util/test/renderWithProvider'; +import { Image } from 'react-native'; +import { createMockAccountsControllerState } from '../../../../../util/test/accountsControllerTestUtils'; +import { backgroundState } from '../../../../../util/test/initial-root-state'; +import { UnstakeConfirmationViewProps } from './UnstakeConfirmationView.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('../../../../hooks/useIpfsGateway', () => jest.fn()); + +Image.getSize = jest.fn((_uri, success) => { + success(100, 100); // Mock successful response for ETH native Icon Image +}); + +const mockNavigate = jest.fn(); +const mockSetOptions = jest.fn(); + +jest.mock('@react-navigation/native', () => { + const actualReactNavigation = jest.requireActual('@react-navigation/native'); + return { + ...actualReactNavigation, + useNavigation: () => ({ + navigate: mockNavigate, + setOptions: mockSetOptions, + }), + }; +}); + +jest.mock('../../hooks/usePoolStakedDeposit', () => ({ + __esModule: true, + default: () => ({ + attemptDepositTransaction: jest.fn(), + }), +})); + +jest.mock('../../hooks/usePooledStakes', () => ({ + __esModule: true, + default: () => ({ + refreshPooledStakes: jest.fn(), + }), +})); + +describe('UnstakeConfirmationView', () => { + it('render matches snapshot', () => { + const props: UnstakeConfirmationViewProps = { + route: { + key: '1', + name: 'params', + params: { + amountWei: '4999820000000000000', + amountFiat: '12894.52', + }, + }, + }; + + const { toJSON } = renderWithProvider( + , + { state: mockInitialState }, + ); + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx new file mode 100644 index 00000000000..c6ecfa9e936 --- /dev/null +++ b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.tsx @@ -0,0 +1,61 @@ +import { View } from 'react-native'; +import React, { useEffect } from 'react'; +import { useNavigation } from '@react-navigation/native'; +import styleSheet from './UnstakeConfirmationView.styles'; +import { useStyles } from '../../../../hooks/useStyles'; +import { getStakingNavbar } from '../../../Navbar'; +import { strings } from '../../../../../../locales/i18n'; +import YouReceiveCard from '../../components/StakingConfirmation/YouReceiveCard/YouReceiveCard'; +import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard'; +import { UnstakeConfirmationViewProps } from './UnstakeConfirmationView.types'; +import TokenValueStack from '../../components/StakingConfirmation/TokenValueStack/TokenValueStack'; +import AccountCard from '../../components/StakingConfirmation/AccountCard/AccountCard'; +import ConfirmationFooter from '../../components/StakingConfirmation/ConfirmationFooter/ConfirmationFooter'; +import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types'; + +const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; + +const UnstakeConfirmationView = ({ route }: UnstakeConfirmationViewProps) => { + const { styles, theme } = useStyles(styleSheet, {}); + + const navigation = useNavigation(); + + useEffect(() => { + navigation.setOptions( + getStakingNavbar(strings('stake.unstake'), navigation, theme.colors, { + backgroundColor: theme.colors.background.alternative, + hasCancelButton: false, + }), + ); + }, [navigation, theme.colors]); + + return ( + + + + + + + + + + + + ); +}; + +export default UnstakeConfirmationView; diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.types.ts b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.types.ts new file mode 100644 index 00000000000..3b8a1bf4c13 --- /dev/null +++ b/app/components/UI/Stake/Views/UnstakeConfirmationView/UnstakeConfirmationView.types.ts @@ -0,0 +1,10 @@ +import { RouteProp } from '@react-navigation/native'; + +interface UnstakeConfirmationViewRouteParams { + amountWei: string; + amountFiat: string; +} + +export interface UnstakeConfirmationViewProps { + route: RouteProp<{ params: UnstakeConfirmationViewRouteParams }, 'params'>; +} diff --git a/app/components/UI/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap b/app/components/UI/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap new file mode 100644 index 00000000000..c0b65def7af --- /dev/null +++ b/app/components/UI/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap @@ -0,0 +1,1385 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UnstakeConfirmationView render matches snapshot 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + 4.99982 + + ETH + + + $12894.52 + + + + + + + + Estimated changes + + + + + You receive + + + + + + + + 4.99982 + + + + + + + + + + + ETH + + + + + + $ + 12894.52 + + + + + + + + + + + + Unstaking to + + + + + + + + + + + + + + + + + + + + + + + Account 1 + + + + + + + + + + + + + Interacting with + + + + + + + + + + + + + MM Pooled Staking + + + + + + + + + + + + + + + Network + + + + + + + + + + + + + Ethereum Main Network + + + + + + + + + + + + + + + Unstaking time + + + + + + + + + + + + Up to 11 days + + + + + + + + + + + + + Terms of service + + + + + Risk disclosure + + + + + + + Cancel + + + + + Continue + + + + + +`; diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx index 8adb580eade..ddfa676d158 100644 --- a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx +++ b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx @@ -20,6 +20,7 @@ import useStakingInputHandlers from '../../hooks/useStakingInput'; import styleSheet from './UnstakeInputView.styles'; import InputDisplay from '../../components/InputDisplay'; import useBalance from '../../hooks/useBalance'; +import Routes from '../../../../../constants/navigation/Routes'; const UnstakeInputView = () => { const title = strings('stake.unstake_eth'); @@ -33,6 +34,7 @@ const UnstakeInputView = () => { currentCurrency, isNonZeroAmount, amountEth, + amountWei, fiatAmount, isOverMaximum, handleCurrencySwitch, @@ -69,8 +71,14 @@ const UnstakeInputView = () => { }, [navigation, theme.colors, title]); const handleUnstakePress = useCallback(() => { - // TODO: Display the Review bottom sheet: STAKE-841 - }, []); + navigation.navigate('StakeScreens', { + screen: Routes.STAKING.UNSTAKE_CONFIRMATION, + params: { + amountWei: amountWei.toString(), + amountFiat: fiatAmount, + }, + }); + }, [amountWei, fiatAmount, navigation]); return ( diff --git a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.styles.ts b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.styles.ts similarity index 100% rename from app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.styles.ts rename to app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.styles.ts diff --git a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.test.tsx b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.test.tsx similarity index 86% rename from app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.test.tsx rename to app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.test.tsx index c8aa996b8f9..b1e81d21976 100644 --- a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.test.tsx +++ b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.test.tsx @@ -1,12 +1,12 @@ import React from 'react'; import renderWithProvider from '../../../../../../util/test/renderWithProvider'; -import AccountHeaderCard from './AccountHeaderCard'; +import AccountCard from './AccountCard'; import { strings } from '../../../../../../../locales/i18n'; import { createMockAccountsControllerState } from '../../../../../../util/test/accountsControllerTestUtils'; import configureMockStore from 'redux-mock-store'; import { backgroundState } from '../../../../../../util/test/initial-root-state'; import { Provider } from 'react-redux'; -import { AccountHeaderCardProps } from './AccountHeaderCard.types'; +import { AccountCardProps } from './AccountCard.types'; const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking'; @@ -50,15 +50,17 @@ jest.mock('@react-navigation/native', () => { }; }); -describe('AccountHeaderCard', () => { +describe('AccountCard', () => { it('render matches snapshot', () => { - const props: AccountHeaderCardProps = { + const props: AccountCardProps = { contractName: MOCK_STAKING_CONTRACT_NAME, + primaryLabel: strings('stake.staking_from'), + secondaryLabel: strings('stake.interacting_with'), }; const { getByText, toJSON } = renderWithProvider( - , + , , ); diff --git a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.tsx similarity index 87% rename from app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.tsx rename to app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.tsx index 9d4e2cb19ee..fdd805b94ea 100644 --- a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/AccountHeaderCard.tsx +++ b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.tsx @@ -11,14 +11,18 @@ import Text from '../../../../../../component-library/components/Texts/Text'; import { selectSelectedInternalAccount } from '../../../../../../selectors/accountsController'; import { useStyles } from '../../../../../hooks/useStyles'; import Card from '../../../../../../component-library/components/Cards/Card'; -import styleSheet from './AccountHeaderCard.styles'; +import styleSheet from './AccountCard.styles'; import images from '../../../../../../images/image-icons'; import AccountTag from '../AccountTag/AccountTag'; import { selectNetworkName } from '../../../../../../selectors/networkInfos'; -import { AccountHeaderCardProps } from './AccountHeaderCard.types'; +import { AccountCardProps } from './AccountCard.types'; import ContractTag from '../ContractTag/ContractTag'; -const AccountHeaderCard = ({ contractName }: AccountHeaderCardProps) => { +const AccountHeaderCard = ({ + contractName, + primaryLabel, + secondaryLabel, +}: AccountCardProps) => { const { styles } = useStyles(styleSheet, {}); const account = useSelector(selectSelectedInternalAccount); @@ -30,7 +34,7 @@ const AccountHeaderCard = ({ contractName }: AccountHeaderCardProps) => { {account && ( { )} , diff --git a/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.types.ts b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.types.ts new file mode 100644 index 00000000000..4bfda6bc428 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/AccountCard.types.ts @@ -0,0 +1,5 @@ +export interface AccountCardProps { + contractName: string; + primaryLabel: string; + secondaryLabel: string; +} diff --git a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/__snapshots__/AccountCard.test.tsx.snap similarity index 99% rename from app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap rename to app/components/UI/Stake/components/StakingConfirmation/AccountCard/__snapshots__/AccountCard.test.tsx.snap index 261f776ab14..6e485b602ef 100644 --- a/app/components/UI/Stake/components/StakingConfirmation/AccountHeaderCard/__snapshots__/AccountHeaderCard.test.tsx.snap +++ b/app/components/UI/Stake/components/StakingConfirmation/AccountCard/__snapshots__/AccountCard.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AccountHeaderCard render matches snapshot 1`] = ` +exports[`AccountCard render matches snapshot 1`] = ` [ { - const { theme } = params; - const { colors } = theme; - - return StyleSheet.create({ - estGasFeeCard: { - borderWidth: 0, - gap: 16, - borderRadius: 8, - justifyContent: 'center', - }, - // Estimated Gas Fee - estGasFeeValue: { - flexDirection: 'row', - paddingTop: 1, - }, - foxIcon: { - paddingRight: 8, - }, - fiatText: { - paddingRight: 4, - }, - ethText: { - borderBottomWidth: 1, - borderBottomColor: colors.primary.default, - }, - estimatedGasTooltipContent: { - gap: 16, - }, - gasLearnMoreLink: { - alignSelf: 'flex-start', - }, - }); -}; - -export default stylesSheet; diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.test.tsx b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.test.tsx deleted file mode 100644 index 97a31da76f3..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import renderWithProvider from '../../../../../../util/test/renderWithProvider'; -import EstimatedGasCard from './EstimatedGasCard'; -import { strings } from '../../../../../../../locales/i18n'; -import { fireEvent } from '@testing-library/react-native'; - -const mockNavigate = jest.fn(); - -jest.mock('@react-navigation/native', () => { - const actualReactNavigation = jest.requireActual('@react-navigation/native'); - return { - ...actualReactNavigation, - useNavigation: () => ({ - navigate: mockNavigate, - }), - }; -}); - -describe('EstimatedGasCard', () => { - it('render matches snapshot', () => { - const props = { - gasCostEth: '0.0884 ETH', - gasCostFiat: '$43.56', - }; - - const { getByText, toJSON } = renderWithProvider( - , - ); - - expect( - getByText(strings('tooltip_modal.estimated_gas_fee.title')), - ).toBeDefined(); - expect(getByText(props.gasCostEth)).toBeDefined(); - expect(getByText(props.gasCostFiat)).toBeDefined(); - - expect(toJSON()).toMatchSnapshot(); - }); - - it('displays the estimated gas cost tooltip when pressed', () => { - const props = { - gasCostEth: '0.0884 ETH', - gasCostFiat: '$43.56', - }; - - const { getByLabelText, toJSON } = renderWithProvider( - , - ); - - fireEvent.press( - getByLabelText( - `${strings('tooltip_modal.estimated_gas_fee.title')} tooltip`, - ), - ); - - expect(mockNavigate).toHaveBeenCalledTimes(1); - expect(mockNavigate).toHaveBeenCalledWith('RootModalFlow', { - params: { - title: strings('tooltip_modal.estimated_gas_fee.title'), - // difficult to directly compare ReactNodes - tooltip: expect.any(Object), - }, - screen: 'tooltipModal', - }); - - expect(toJSON()).toMatchSnapshot(); - }); -}); diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.tsx deleted file mode 100644 index d8d9c83130e..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { View, TouchableOpacity } from 'react-native'; -import { strings } from '../../../../../../../locales/i18n'; -import KeyValueRow, { - TooltipSizes, -} from '../../../../../../component-library/components-temp/KeyValueRow'; -import Text, { - TextColor, - TextVariant, -} from '../../../../../../component-library/components/Texts/Text'; -import Card from '../../../../../../component-library/components/Cards/Card'; -import { useStyles } from '../../../../../hooks/useStyles'; -import useTooltipModal from '../../../../../hooks/useTooltipModal'; -import styleSheet from './EstimatedGasCard.styles'; -import { EstimatedGasCardProps } from './EstimatedGasCard.types'; -import EstimatedGasFeeTooltipContent from '../EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent'; - -const EstimatedGasCard = ({ - gasCostEth, - gasCostFiat, -}: EstimatedGasCardProps) => { - const { styles } = useStyles(styleSheet, {}); - - const { openTooltipModal } = useTooltipModal(); - - // TODO: Navigate to the edit gas bottom sheet - const handleNavigateToEditGas = () => - openTooltipModal('TODO', 'Navigate to gas customization component'); - - return ( - - , - size: TooltipSizes.Sm, - }, - }} - value={{ - label: ( - - 🦊 - - {gasCostFiat} - - - - - {gasCostEth} - - - - - ), - }} - /> - - ); -}; - -export default EstimatedGasCard; diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.types.ts b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.types.ts deleted file mode 100644 index 58cd5f1aed7..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/EstimatedGasCard.types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface EstimatedGasCardProps { - gasCostEth: string; - gasCostFiat: string; -} diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/__snapshots__/EstimatedGasCard.test.tsx.snap b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/__snapshots__/EstimatedGasCard.test.tsx.snap deleted file mode 100644 index 3bb66a34c5c..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasCard/__snapshots__/EstimatedGasCard.test.tsx.snap +++ /dev/null @@ -1,419 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EstimatedGasCard displays the estimated gas cost tooltip when pressed 1`] = ` - - - - - - - Estimated gas fee - - - - - - - - - - - - - 🦊 - - - $43.56 - - - - - 0.0884 ETH - - - - - - - - - -`; - -exports[`EstimatedGasCard render matches snapshot 1`] = ` - - - - - - - Estimated gas fee - - - - - - - - - - - - - 🦊 - - - $43.56 - - - - - 0.0884 ETH - - - - - - - - - -`; diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.styles.ts b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.styles.ts deleted file mode 100644 index de81ef5a0bd..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { StyleSheet } from 'react-native'; - -const stylesSheet = () => - StyleSheet.create({ - estimatedGasTooltipContent: { - gap: 16, - }, - gasLearnMoreLink: { - alignSelf: 'flex-start', - }, - }); - -export default stylesSheet; diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.test.tsx b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.test.tsx deleted file mode 100644 index 440fb7f7f3b..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import renderWithProvider from '../../../../../../util/test/renderWithProvider'; -import EstimatedGasFeeTooltipContent from './EstimatedGasFeeTooltipContent'; -import { strings } from '../../../../../../../locales/i18n'; -import { fireEvent } from '@testing-library/react-native'; - -const mockNavigate = jest.fn(); - -jest.mock('@react-navigation/native', () => { - const actualReactNavigation = jest.requireActual('@react-navigation/native'); - return { - ...actualReactNavigation, - useNavigation: () => ({ - navigate: mockNavigate, - }), - }; -}); - -describe('EstimatedGasFeeTooltipContent', () => { - it('render matches snapshot', () => { - const { getByText, toJSON } = renderWithProvider( - , - ); - - expect( - getByText(strings('tooltip_modal.estimated_gas_fee.gas_recipient')), - ).toBeDefined(); - expect( - getByText(strings('tooltip_modal.estimated_gas_fee.gas_fluctuation')), - ).toBeDefined(); - expect( - getByText(strings('tooltip_modal.estimated_gas_fee.gas_learn_more')), - ).toBeDefined(); - - expect(toJSON()).toMatchSnapshot(); - }); - - it('redirects to "learn more about gas fees" web view when learn more pressed', () => { - const { getByText } = renderWithProvider(); - - fireEvent.press( - getByText(strings('tooltip_modal.estimated_gas_fee.gas_learn_more')), - ); - - expect(mockNavigate).toHaveBeenCalledTimes(1); - expect(mockNavigate).toHaveBeenCalledWith('Webview', { - params: { - url: 'https://support.metamask.io/transactions-and-gas/gas-fees/why-are-my-gas-fees-so-high/', - }, - screen: 'SimpleWebview', - }); - }); -}); diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.tsx b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.tsx deleted file mode 100644 index 65a52044848..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/EstimatedGasFeeTooltipContent.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { useNavigation } from '@react-navigation/native'; -import { View, TouchableOpacity } from 'react-native'; -import { strings } from '../../../../../../../locales/i18n'; -import Text, { - TextVariant, - TextColor, -} from '../../../../../../component-library/components/Texts/Text'; -import AppConstants from '../../../../../../core/AppConstants'; -import { useStyles } from '../../../../../hooks/useStyles'; -import styleSheet from './EstimatedGasFeeTooltipContent.styles'; - -export const EstimatedGasFeeTooltipContent = () => { - const { styles } = useStyles(styleSheet, {}); - - const navigation = useNavigation(); - - const handleNavigateToGasLearnMore = () => - navigation.navigate('Webview', { - screen: 'SimpleWebview', - params: { - url: AppConstants.REVIEW_PROMPT.HIGH_GAS_FEES, - }, - }); - - return ( - - {strings('tooltip_modal.estimated_gas_fee.gas_recipient')} - {strings('tooltip_modal.estimated_gas_fee.gas_fluctuation')} - - - {strings('tooltip_modal.estimated_gas_fee.gas_learn_more')} - - - - ); -}; - -export default EstimatedGasFeeTooltipContent; diff --git a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/__snapshots__/EstimatedGasFeeTooltipContent.test.tsx.snap b/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/__snapshots__/EstimatedGasFeeTooltipContent.test.tsx.snap deleted file mode 100644 index bd50772cb00..00000000000 --- a/app/components/UI/Stake/components/StakingConfirmation/EstimatedGasFeeTooltipContent/__snapshots__/EstimatedGasFeeTooltipContent.test.tsx.snap +++ /dev/null @@ -1,67 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EstimatedGasFeeTooltipContent render matches snapshot 1`] = ` - - - Gas fees are paid to crypto miners who process transactions on Ethereum network. Metamask does not profit from gas fees. - - - Gas fees are estimated and will fluctuate based on network traffic and transaction complexity. - - - - Learn more about gas fees - - - -`; diff --git a/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.styles.ts b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.styles.ts new file mode 100644 index 00000000000..fa184185ebb --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.styles.ts @@ -0,0 +1,12 @@ +import { StyleSheet } from 'react-native'; + +const styleSheet = () => + StyleSheet.create({ + card: { + borderWidth: 0, + borderRadius: 8, + gap: 16, + }, + }); + +export default styleSheet; diff --git a/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.test.tsx b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.test.tsx new file mode 100644 index 00000000000..d7f785debd5 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import renderWithProvider from '../../../../../../util/test/renderWithProvider'; +import UnstakingTimeCard from './UnstakeTimeCard'; +import { strings } from '../../../../../../../locales/i18n'; + +const mockNavigate = jest.fn(); + +jest.mock('@react-navigation/native', () => { + const actualReactNavigation = jest.requireActual('@react-navigation/native'); + return { + ...actualReactNavigation, + useNavigation: () => ({ + navigate: mockNavigate, + }), + }; +}); + +describe('UnstakingTimeCard', () => { + it('render matches snapshot', () => { + const { toJSON, getByText } = renderWithProvider(); + + const upToDaysCopy = `${strings('stake.up_to_n', { count: 11 })}`; + const daysCopy = `${strings('stake.day', { count: 11 })}`; + + expect( + getByText(strings('tooltip_modal.unstaking_time.title')), + ).toBeDefined(); + expect(getByText(`${upToDaysCopy} ${daysCopy}`)).toBeDefined(); // Up to 11 days + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.tsx new file mode 100644 index 00000000000..47801492916 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import KeyValueRow, { + TooltipSizes, +} from '../../../../../../component-library/components-temp/KeyValueRow'; +import Card from '../../../../../../component-library/components/Cards/Card'; +import { useStyles } from '../../../../../hooks/useStyles'; +import styleSheet from './UnstakeTimeCard.styles'; +import { TextVariant } from '../../../../../../component-library/components/Texts/Text'; +import { strings } from '../../../../../../../locales/i18n'; + +const UnstakingTimeCard = () => { + const { styles } = useStyles(styleSheet, {}); + + return ( + + + + ); +}; + +export default UnstakingTimeCard; diff --git a/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/__snapshots__/UnstakeTimeCard.test.tsx.snap b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/__snapshots__/UnstakeTimeCard.test.tsx.snap new file mode 100644 index 00000000000..a21f42d069a --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/UnstakeTimeCard/__snapshots__/UnstakeTimeCard.test.tsx.snap @@ -0,0 +1,155 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UnstakingTimeCard render matches snapshot 1`] = ` + + + + + + + Unstaking time + + + + + + + + + + + + Up to 11 days + + + + + + +`; diff --git a/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.styles.ts b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.styles.ts new file mode 100644 index 00000000000..7ce1390f735 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.styles.ts @@ -0,0 +1,38 @@ +import { StyleSheet } from 'react-native'; + +const styleSheet = () => + StyleSheet.create({ + changesCard: { + borderWidth: 0, + borderRadius: 8, + gap: 16, + }, + estimatedChangesWrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + youReceiveWrapper: { + flexDirection: 'row', + alignItems: 'baseline', + justifyContent: 'space-between', + }, + youReceiveRightSide: { + alignItems: 'flex-end', + gap: 2, + }, + flexRow: { + flexDirection: 'row', + gap: 4, + }, + youReceiveFiat: { + paddingRight: 8, + }, + ethLogo: { + width: 32, + height: 32, + borderRadius: 16, + overflow: 'hidden', + }, + }); + +export default styleSheet; diff --git a/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.test.tsx b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.test.tsx new file mode 100644 index 00000000000..1345cc824e5 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.test.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import renderWithProvider from '../../../../../../util/test/renderWithProvider'; +import YouReceiveCard from './YouReceiveCard'; +import { YouReceiveCardProps } from './YouReceiveCard.types'; +import { renderFromWei } from '../../../../../../util/number'; +import { strings } from '../../../../../../../locales/i18n'; + +const mockNavigate = jest.fn(); + +jest.mock('@react-navigation/native', () => { + const actualReactNavigation = jest.requireActual('@react-navigation/native'); + return { + ...actualReactNavigation, + useNavigation: () => ({ + navigate: mockNavigate, + }), + }; +}); + +describe('YouReceiveCard', () => { + it('render matches snapshot', () => { + const props: YouReceiveCardProps = { + amountWei: '4999820000000000000', + amountFiat: '12,881.64', + }; + + const { toJSON, getByText } = renderWithProvider( + , + ); + + expect(getByText(strings('stake.estimated_changes'))).toBeDefined(); + expect(getByText(strings('stake.you_receive'))).toBeDefined(); + expect(getByText(`+ ${renderFromWei(props.amountWei)}`)).toBeDefined(); + expect(getByText(`$${props.amountFiat}`)).toBeDefined(); + + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.tsx b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.tsx new file mode 100644 index 00000000000..02400792726 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import { View } from 'react-native'; +import TagBase, { + TagSeverity, + TagShape, +} from '../../../../../../component-library/base-components/TagBase'; +import Avatar, { + AvatarVariant, + AvatarSize, +} from '../../../../../../component-library/components/Avatars/Avatar'; +import Text, { + TextVariant, + TextColor, +} from '../../../../../../component-library/components/Texts/Text'; +import Card from '../../../../../../component-library/components/Cards/Card'; +import { renderFromWei } from '../../../../../../util/number'; +import { useStyles } from '../../../../../hooks/useStyles'; +import styleSheet from './YouReceiveCard.styles'; +import ethLogo from '../../../../../../images/ethereum.png'; +import { YouReceiveCardProps } from './YouReceiveCard.types'; +import { strings } from '../../../../../../../locales/i18n'; + +const YouReceiveCard = ({ amountWei, amountFiat }: YouReceiveCardProps) => { + const { styles } = useStyles(styleSheet, {}); + + return ( + + + + {strings('stake.estimated_changes')} + + + + + {strings('stake.you_receive')} + + + + + + {`+ ${renderFromWei(amountWei)}`} + + + + } + > + ETH + + + + ${amountFiat} + + + + + ); +}; + +export default YouReceiveCard; diff --git a/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.types.ts b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.types.ts new file mode 100644 index 00000000000..2a69e375536 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/YouReceiveCard.types.ts @@ -0,0 +1,4 @@ +export interface YouReceiveCardProps { + amountWei: string; + amountFiat: string; +} diff --git a/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/__snapshots__/YouReceiveCard.test.tsx.snap b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/__snapshots__/YouReceiveCard.test.tsx.snap new file mode 100644 index 00000000000..4cef6c698c0 --- /dev/null +++ b/app/components/UI/Stake/components/StakingConfirmation/YouReceiveCard/__snapshots__/YouReceiveCard.test.tsx.snap @@ -0,0 +1,229 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`YouReceiveCard render matches snapshot 1`] = ` + + + + Estimated changes + + + + + You receive + + + + + + + + 4.99982 + + + + + + + + + + + ETH + + + + + + $ + 12,881.64 + + + + +`; diff --git a/app/components/UI/Stake/routes/index.tsx b/app/components/UI/Stake/routes/index.tsx index 73960d4a7af..4937bb548d9 100644 --- a/app/components/UI/Stake/routes/index.tsx +++ b/app/components/UI/Stake/routes/index.tsx @@ -5,6 +5,7 @@ import LearnMoreModal from '../components/LearnMoreModal'; import Routes from '../../../../constants/navigation/Routes'; import StakeConfirmationView from '../Views/StakeConfirmationView/StakeConfirmationView'; import UnstakeInputView from '../Views/UnstakeInputView/UnstakeInputView'; +import UnstakeConfirmationView from '../Views/UnstakeConfirmationView/UnstakeConfirmationView'; import { StakeSDKProvider } from '../sdk/stakeSdkProvider'; const Stack = createStackNavigator(); const ModalStack = createStackNavigator(); @@ -30,6 +31,10 @@ const StakeScreenStack = () => ( name={Routes.STAKING.STAKE_CONFIRMATION} component={StakeConfirmationView} /> + ); diff --git a/app/components/Views/TooltipModal/ToolTipModal.styles.ts b/app/components/Views/TooltipModal/ToolTipModal.styles.ts index 15b9645e681..d0d32ba2f7c 100644 --- a/app/components/Views/TooltipModal/ToolTipModal.styles.ts +++ b/app/components/Views/TooltipModal/ToolTipModal.styles.ts @@ -6,6 +6,7 @@ const styleSheet = () => paddingHorizontal: 32, flexDirection: 'row', justifyContent: 'center', + paddingBottom: 16, }, }); diff --git a/app/constants/navigation/Routes.ts b/app/constants/navigation/Routes.ts index 6bccce37031..1d95bc387f7 100644 --- a/app/constants/navigation/Routes.ts +++ b/app/constants/navigation/Routes.ts @@ -146,6 +146,7 @@ const Routes = { STAKE: 'Stake', STAKE_CONFIRMATION: 'StakeConfirmation', UNSTAKE: 'Unstake', + UNSTAKE_CONFIRMATION: 'UnstakeConfirmation', CLAIM: 'Claim', MODALS: { LEARN_MORE: 'LearnMore', diff --git a/e2e/pages/EditAccountNameView.js b/e2e/pages/EditAccountNameView.js index 6f93f607acc..d5291520fea 100644 --- a/e2e/pages/EditAccountNameView.js +++ b/e2e/pages/EditAccountNameView.js @@ -2,20 +2,18 @@ import Matchers from '../utils/Matchers'; import Gestures from '../utils/Gestures'; import EditAccountNameSelectorIDs from '../selectors/EditAccountName.selectors'; -export default class EditAccountNameView { - static async saveButton() { - return await Matchers.getElementByID( - EditAccountNameSelectorIDs.EDIT_ACCOUNT_NAME_SAVE, - ); +class EditAccountNameView { + get saveButton() { + return Matchers.getElementByID(EditAccountNameSelectorIDs.EDIT_ACCOUNT_NAME_SAVE); } - static async tapSave() { - await Gestures.waitAndTap(this.saveButton()); + get accountNameInput() { + return Matchers.getElementByID(EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT); } - static async accountNameInput() { - return await Matchers.getElementByID( - EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT, - ); + async tapSave() { + await Gestures.waitAndTap(this.saveButton); } } + +export default new EditAccountNameView(); diff --git a/e2e/pages/EnableAutomaticSecurityChecksView.js b/e2e/pages/EnableAutomaticSecurityChecksView.js deleted file mode 100644 index 9de9fafe905..00000000000 --- a/e2e/pages/EnableAutomaticSecurityChecksView.js +++ /dev/null @@ -1,25 +0,0 @@ -import TestHelpers from '../helpers'; - -import { - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, -} from '../../wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds'; - -export default class EnableAutomaticSecurityChecksView { - static async tapNoThanks() { - await TestHelpers.waitAndTap( - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, - ); - } - - static async isVisible() { - await TestHelpers.checkIfVisible( - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, - ); - } - static async isNotVisible() { - await TestHelpers.checkIfNotVisible( - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, - ); - } -} diff --git a/e2e/pages/modals/EnableAutomaticSecurityChecksView.js b/e2e/pages/modals/EnableAutomaticSecurityChecksView.js new file mode 100644 index 00000000000..db740ab38e3 --- /dev/null +++ b/e2e/pages/modals/EnableAutomaticSecurityChecksView.js @@ -0,0 +1,19 @@ +import Matchers from '../../utils/Matchers'; +import Gestures from '../../utils/Gestures'; +import { EnableAutomaticSecurityChecksIDs } from '../../selectors/Modals/EnableAutomaticSecurityChecks.selectors'; + +class EnableAutomaticSecurityChecksView { + get container() { + return Matchers.getElementByID(EnableAutomaticSecurityChecksIDs.CONTAINER); + } + + get noThanksButton() { + return Matchers.getElementByID(EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON); + } + + async tapNoThanks() { + await Gestures.waitAndTap(this.noThanksButton); + } +} + +export default new EnableAutomaticSecurityChecksView(); diff --git a/e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors.js b/e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors.js new file mode 100644 index 00000000000..7692291e282 --- /dev/null +++ b/e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors.js @@ -0,0 +1,4 @@ +export const EnableAutomaticSecurityChecksIDs = { + CONTAINER: 'enable-automatic-checks-screen-container-image', + NO_THANKS_BUTTON: 'no-thanks-button', +}; diff --git a/e2e/specs/accounts/change-account-name.spec.js b/e2e/specs/accounts/change-account-name.spec.js index f27e61fee52..f20c6ee3356 100644 --- a/e2e/specs/accounts/change-account-name.spec.js +++ b/e2e/specs/accounts/change-account-name.spec.js @@ -45,7 +45,7 @@ describe(Regression('Change Account Name'), () => { // Open account actions and edit account name await WalletView.tapMainWalletAccountActions(); await AccountActionsModal.tapEditAccount(); - await Gestures.clearField(EditAccountNameView.accountNameInput()); + await Gestures.clearField(EditAccountNameView.accountNameInput); await TestHelpers.typeTextAndHideKeyboard( EditAccountNameSelectorIDs.ACCOUNT_NAME_INPUT, NEW_ACCOUNT_NAME, diff --git a/e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js b/e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js index 15aec2290e5..f81dc1001e1 100644 --- a/e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js +++ b/e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js @@ -8,7 +8,7 @@ import OnboardingCarouselView from '../../pages/Onboarding/OnboardingCarouselVie import MetaMetricsOptIn from '../../pages/Onboarding/MetaMetricsOptInView'; import OnboardingSuccessView from '../../pages/Onboarding/OnboardingSuccessView'; import WalletView from '../../pages/wallet/WalletView'; -import EnableAutomaticSecurityChecksView from '../../pages/EnableAutomaticSecurityChecksView'; +import EnableAutomaticSecurityChecksView from '../../pages/modals/EnableAutomaticSecurityChecksView'; import SettingsView from '../../pages/Settings/SettingsView'; import SecurityAndPrivacy from '../../pages/Settings/SecurityAndPrivacy/SecurityAndPrivacyView'; import LoginView from '../../pages/LoginView'; @@ -58,7 +58,7 @@ describe( it('Should dismiss Automatic Security checks screen', async () => { await TestHelpers.delay(3500); - await EnableAutomaticSecurityChecksView.isVisible(); + await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container); await EnableAutomaticSecurityChecksView.tapNoThanks(); }); diff --git a/e2e/specs/wallet/start-exploring.spec.js b/e2e/specs/wallet/start-exploring.spec.js index 2972a3aee71..6b4fd872e26 100644 --- a/e2e/specs/wallet/start-exploring.spec.js +++ b/e2e/specs/wallet/start-exploring.spec.js @@ -7,7 +7,7 @@ import ProtectYourWalletView from '../../pages/Onboarding/ProtectYourWalletView' import CreatePasswordView from '../../pages/Onboarding/CreatePasswordView'; import MetaMetricsOptIn from '../../pages/Onboarding/MetaMetricsOptInView'; import OnboardingSuccessView from '../../pages/Onboarding/OnboardingSuccessView'; -import EnableAutomaticSecurityChecksView from '../../pages/EnableAutomaticSecurityChecksView'; +import EnableAutomaticSecurityChecksView from '../../pages/modals/EnableAutomaticSecurityChecksView'; import Browser from '../../pages/Browser/BrowserView'; import SkipAccountSecurityModal from '../../pages/modals/SkipAccountSecurityModal'; import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal'; @@ -66,7 +66,7 @@ describe(SmokeCore('Start Exploring'), () => { it('Should dismiss Automatic Security checks screen', async () => { await TestHelpers.delay(3500); - await EnableAutomaticSecurityChecksView.isVisible(); + await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container); await EnableAutomaticSecurityChecksView.tapNoThanks(); }); diff --git a/e2e/viewHelper.js b/e2e/viewHelper.js index 3e801885015..8c161e996ca 100644 --- a/e2e/viewHelper.js +++ b/e2e/viewHelper.js @@ -1,6 +1,6 @@ 'use strict'; -import EnableAutomaticSecurityChecksView from './pages/EnableAutomaticSecurityChecksView'; +import EnableAutomaticSecurityChecksView from './pages/modals/EnableAutomaticSecurityChecksView'; import EnableDeviceNotificationsAlert from './pages/EnableDeviceNotificationsAlert'; import ImportWalletView from './pages/Onboarding/ImportWalletView'; import MetaMetricsOptIn from './pages/Onboarding/MetaMetricsOptInView'; @@ -108,7 +108,7 @@ export const importWalletWithRecoveryPhrase = async () => { //'Should dismiss Enable device Notifications checks alert' await this.skipNotificationsDeviceSettings(); // Should dismiss Automatic Security checks screen - await EnableAutomaticSecurityChecksView.isVisible(); + await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container); await EnableAutomaticSecurityChecksView.tapNoThanks(); // should dismiss the onboarding wizard // dealing with flakiness on bitrise. @@ -146,7 +146,7 @@ export const CreateNewWallet = async () => { //'Should dismiss Enable device Notifications checks alert' await this.skipNotificationsDeviceSettings(); //'Should dismiss Automatic Security checks screen' - await EnableAutomaticSecurityChecksView.isVisible(); + await Assertions.checkIfVisible(EnableAutomaticSecurityChecksView.container); await EnableAutomaticSecurityChecksView.tapNoThanks(); // 'should dismiss the onboarding wizard' diff --git a/locales/languages/en.json b/locales/languages/en.json index 7a3beee37cb..22e9e313922 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -3385,7 +3385,11 @@ "risk_disclosure": "Risk disclosure", "cancel": "Cancel", "confirm": "Confirm", - "continue": "Continue" + "continue": "Continue", + "estimated_changes": "Estimated changes", + "you_receive": "You receive", + "up_to_n": "Up to {{count}}", + "unstaking_to": "Unstaking to" }, "default_settings": { "title": "Your Wallet is ready", @@ -3460,6 +3464,10 @@ "reward_frequency": { "title": "Reward frequency", "tooltip": "Your staked balance updates every 12 hours to account for new rewards." + }, + "unstaking_time": { + "title": "Unstaking time", + "tooltip": "On average, it takes less than 3 days for the unstaked ETH to be claimable, but can take up to 11 days" } }, "confirm": { diff --git a/wdio/screen-objects/EnableSecurityChecksScreen.js b/wdio/screen-objects/EnableSecurityChecksScreen.js index 20afd26148a..35cc3a6e80b 100644 --- a/wdio/screen-objects/EnableSecurityChecksScreen.js +++ b/wdio/screen-objects/EnableSecurityChecksScreen.js @@ -1,19 +1,16 @@ import Gestures from '../helpers/Gestures'; import Selectors from '../helpers/Selectors'; -import { - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, -} from './testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds'; +import { EnableAutomaticSecurityChecksIDs } from '../../e2e/selectors/Modals/EnableAutomaticSecurityChecks.selectors'; class EnableAutomaticSecurityChecksScreen { get noThanksButton() { return Selectors.getXpathElementByResourceId( - ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID, + EnableAutomaticSecurityChecksIDs.NO_THANKS_BUTTON, ); } get enableAutomaticSecurityChecksScreen() { return Selectors.getElementByPlatform( - ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID, + EnableAutomaticSecurityChecksIDs.CONTAINER, ); } diff --git a/wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds.js b/wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds.js deleted file mode 100644 index 3cc8d776f65..00000000000 --- a/wdio/screen-objects/testIDs/Screens/EnableAutomaticSecurityChecksScreen.testIds.js +++ /dev/null @@ -1,4 +0,0 @@ -export const ENABLE_AUTOMATIC_SECURITY_CHECK_NO_THANKS_BUTTON_ID = - 'no-thanks-button'; -export const ENABLE_AUTOMATIC_SECURITY_CHECK_CONTAINER_ID = - 'enable-automatic-checks-screen-container-image';