diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx index 9351d57b785..1244a3ccff8 100644 --- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx +++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx @@ -45,6 +45,7 @@ const StakeInputView = () => { annualRewardsFiat, annualRewardRate, isLoadingVaultData, + handleMaxPress, } = useStakingInputHandlers(balanceWei); const navigateToLearnMoreModal = () => { @@ -73,6 +74,15 @@ const StakeInputView = () => { annualRewardRate, ]); + const handleMaxButtonPress = () => { + navigation.navigate('StakeModals', { + screen: Routes.STAKING.MODALS.MAX_INPUT, + params: { + handleMaxPress, + }, + }); + }; + const balanceText = strings('stake.balance'); const buttonLabel = !isNonZeroAmount @@ -121,6 +131,7 @@ const StakeInputView = () => { { const title = strings('stake.unstake_eth'); @@ -43,7 +43,7 @@ const UnstakeInputView = () => { handleAmountPress, handleKeypadChange, conversionRate, - } = useStakingInputHandlers(new BN(stakedBalanceWei)); + } = useUnstakingInputHandlers(new BN(stakedBalanceWei)); const stakeBalanceInEth = renderFromWei(stakedBalanceWei, 5); const stakeBalanceFiatNumber = weiToFiatNumber( diff --git a/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.styles.ts b/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.styles.ts new file mode 100644 index 00000000000..ae5cd275a1e --- /dev/null +++ b/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.styles.ts @@ -0,0 +1,23 @@ +import { StyleSheet } from 'react-native'; + +const createMaxInputModalStyles = () => + StyleSheet.create({ + container: { + paddingHorizontal: 16, + }, + textContainer: { + paddingBottom: 16, + paddingRight: 16, + }, + buttonContainer: { + flexDirection: 'row', + gap: 16, + paddingHorizontal: 16, + paddingBottom: 16, + }, + button: { + flex: 1, + }, + }); + +export default createMaxInputModalStyles; diff --git a/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.test.tsx b/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.test.tsx new file mode 100644 index 00000000000..333fe5cc7a2 --- /dev/null +++ b/app/components/UI/Stake/components/MaxInputModal/MaxInputModal.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import renderWithProvider from '../../../../../util/test/renderWithProvider'; +import MaxInputModal from '.'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; + +const mockNavigate = jest.fn(); + +jest.mock('@react-navigation/native', () => { + const actualReactNavigation = jest.requireActual('@react-navigation/native'); + return { + ...actualReactNavigation, + useNavigation: () => ({ + navigate: mockNavigate, + }), + }; +}); + +const renderMaxInputModal = () => + renderWithProvider( + + , + , + ); + +describe('MaxInputModal', () => { + it('render matches snapshot', () => { + const { toJSON } = renderMaxInputModal(); + expect(toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap new file mode 100644 index 00000000000..20d4c8177a4 --- /dev/null +++ b/app/components/UI/Stake/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MaxInputModal render matches snapshot 1`] = ` + +`; diff --git a/app/components/UI/Stake/components/MaxInputModal/index.tsx b/app/components/UI/Stake/components/MaxInputModal/index.tsx new file mode 100644 index 00000000000..a7534a2214c --- /dev/null +++ b/app/components/UI/Stake/components/MaxInputModal/index.tsx @@ -0,0 +1,79 @@ +import React, { useRef } from 'react'; +import { View } from 'react-native'; +import BottomSheet, { + type BottomSheetRef, +} from '../../../../../component-library/components/BottomSheets/BottomSheet'; +import Text, { + TextVariant, +} from '../../../../../component-library/components/Texts/Text'; +import Button, { + ButtonSize, + ButtonVariants, + ButtonWidthTypes, +} from '../../../../../component-library/components/Buttons/Button'; +import { strings } from '../../../../../../locales/i18n'; +import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader'; +import createMaxInputModalStyles from './MaxInputModal.styles'; +import { useRoute, RouteProp } from '@react-navigation/native'; + +const styles = createMaxInputModalStyles(); + +interface MaxInputModalRouteParams { + handleMaxPress: () => void; +} + +const MaxInputModal = () => { + const route = + useRoute>(); + const sheetRef = useRef(null); + + const { handleMaxPress } = route.params; + + const handleCancel = () => { + sheetRef.current?.onCloseBottomSheet(); + }; + + const handleConfirm = () => { + sheetRef.current?.onCloseBottomSheet(); + handleMaxPress(); + }; + + return ( + + + + + {strings('stake.max_modal.title')} + + + + + {strings('stake.max_modal.description')} + + + + + +