From 1de5b66db0910708048781ffa283e266bcf94a04 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 19:50:24 +0200 Subject: [PATCH 01/11] refactor(swap): modals --- apps/wallet-mobile/src/AppNavigator.tsx | 144 ++++++++++-------- .../src/features/Modal/ModalContext.tsx | 66 ++++++++ .../src/features/Modal/ModalScreen.tsx | 126 +++++++++++++++ .../ConfirmTxScreen/ConfirmTxScreen.tsx | 52 +++---- apps/wallet-mobile/src/navigation.tsx | 1 + 5 files changed, 290 insertions(+), 99 deletions(-) create mode 100644 apps/wallet-mobile/src/features/Modal/ModalContext.tsx create mode 100644 apps/wallet-mobile/src/features/Modal/ModalScreen.tsx diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx index ceaf3ebb2e..51fdc27e8d 100644 --- a/apps/wallet-mobile/src/AppNavigator.tsx +++ b/apps/wallet-mobile/src/AppNavigator.tsx @@ -13,6 +13,8 @@ import {supportsAndroidFingerprintOverlay} from './auth/biometrics' import {EnableLoginWithPin} from './auth/EnableLoginWithPin' import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization' import {LegalAgreement, useLegalAgreement} from './features/Initialization/common' +import {ModalProvider} from './features/Modal/ModalContext' +import {ModalScreen} from './features/Modal/ModalScreen' import {CONFIG} from './legacy/config' import {DeveloperScreen} from './legacy/DeveloperScreen' import {AppRoutes} from './navigation' @@ -62,78 +64,86 @@ export const AppNavigator = () => { return ( - - {/* Not Authenticated */} - - {isLoggedOut && ( - - {firstAction === 'first-run' && ( - - {() => ( - - - - )} - - )} - - {firstAction === 'show-agreement-changed-notice' && ( - {() => } - )} - - {firstAction === 'auth-with-pin' && ( - - )} - - {firstAction === 'auth-with-os' && ( - - )} - - {firstAction === 'request-new-pin' && ( - - )} - - )} - - {/* Authenticated */} - - {isLoggedIn && ( - - - {() => ( - - - + + + {/* Not Authenticated */} + + {isLoggedOut && ( + + {firstAction === 'first-run' && ( + + {() => ( + + + + )} + )} - - - - )} + {firstAction === 'show-agreement-changed-notice' && ( + {() => } + )} - {/* Development */} + {firstAction === 'auth-with-pin' && ( + + )} - {__DEV__ && ( - - + {firstAction === 'auth-with-os' && ( + + )} - - - )} - + {firstAction === 'request-new-pin' && ( + + )} + + )} + + {/* Authenticated */} + + {isLoggedIn && ( + <> + + + {() => ( + + + + )} + + + + + + + + + + )} + + {/* Development */} + + {__DEV__ && ( + + + + + + )} + + ) } diff --git a/apps/wallet-mobile/src/features/Modal/ModalContext.tsx b/apps/wallet-mobile/src/features/Modal/ModalContext.tsx new file mode 100644 index 0000000000..40ecc097f6 --- /dev/null +++ b/apps/wallet-mobile/src/features/Modal/ModalContext.tsx @@ -0,0 +1,66 @@ +import {useNavigation} from '@react-navigation/native' +import React from 'react' + +type ModalState = { + height: number + title: string + content: React.ReactNode +} +type ModalActions = { + openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => void + closeModal: () => void +} + +const ModalContext = React.createContext(undefined) + +export const useModal = () => { + const value = React.useContext(ModalContext) + if (!value) { + throw new Error('useModal must be used within a ModalProvider') + } + return value +} + +export const ModalProvider = ({ + children, + initialState, +}: { + children: React.ReactNode + initialState?: Partial +}) => { + const [state, dispatch] = React.useReducer(modalReducer, {...defaultState, ...initialState}) + const navigation = useNavigation() + const actions = React.useRef({ + closeModal: () => { + dispatch({type: 'close'}) + navigation.goBack() + }, + openModal: (title: ModalState['title'], content: ModalState['content'], height?: ModalState['height']) => { + dispatch({type: 'open', title, content, height}) + navigation.navigate('modal') + }, + }).current + + const context = React.useMemo(() => ({...state, ...actions}), [state, actions]) + + return {children} +} + +type ModalAction = + | {type: 'open'; height: ModalState['height'] | undefined; content: ModalState['content']; title: ModalState['title']} + | {type: 'close'} + +const modalReducer = (state: ModalState, action: ModalAction) => { + switch (action.type) { + case 'open': + return {...state, content: action.content, height: action.height ?? defaultState.height, title: action.title} + + case 'close': + return {...defaultState} + + default: + throw new Error(`modalReducer invalid action`) + } +} + +const defaultState: ModalState = Object.freeze({content: undefined, height: 350, title: ''}) diff --git a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx new file mode 100644 index 0000000000..fafbfe247c --- /dev/null +++ b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx @@ -0,0 +1,126 @@ +import {useCardAnimation} from '@react-navigation/stack' +import React from 'react' +import { + Animated, + KeyboardAvoidingView, + NativeTouchEvent, + Platform, + Pressable, + StyleSheet, + Text, + View, +} from 'react-native' + +import {Spacer} from '../../components' +import {useModal} from './ModalContext' + +export const ModalScreen = () => { + const {current} = useCardAnimation() + const {height, closeModal, content} = useModal() + const [swipeLocationY, setSwipeLocationY] = React.useState(height) + const [downDirectionCount, setDownDirectionCount] = React.useState(0) + + const cleanDirectionCount = () => { + setDownDirectionCount(0) + } + + const onResponderMove = ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => { + if (swipeLocationY < nativeEvent.locationY) { + const newState = downDirectionCount + 1 + if (newState > 6) { + closeModal() + cleanDirectionCount() + } else setDownDirectionCount(newState) + } + setSwipeLocationY(nativeEvent.locationY) + } + + return ( + + + + + true}> +
+ + {content} + + + + ) +} + +const Header = () => { + const {title} = useModal() + return ( + + + + + + + + {title} + + ) +} + +const SliderIndicator = () => + +const styles = StyleSheet.create({ + root: { + flex: 1, + alignItems: 'center', + justifyContent: 'flex-end', + }, + backdrop: { + ...StyleSheet.absoluteFillObject, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + animatedView: { + alignSelf: 'stretch', + }, + sheet: { + flex: 1, + backgroundColor: 'white', + borderTopRightRadius: 20, + borderTopLeftRadius: 20, + alignSelf: 'stretch', + }, + title: { + fontWeight: '500', + fontFamily: 'Rubik-Medium', + fontSize: 20, + padding: 16, + }, + header: { + alignItems: 'center', + alignSelf: 'stretch', + }, + slider: { + height: 4, + backgroundColor: 'black', + width: 32, + borderRadius: 10, + }, +}) diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx index fdeb843af2..b1f72884c5 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx @@ -3,8 +3,9 @@ import React from 'react' import {StyleSheet, View, ViewProps} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' -import {BottomSheet, BottomSheetRef, Button, Spacer} from '../../../../components' +import {Button, Spacer} from '../../../../components' import {LoadingOverlay} from '../../../../components/LoadingOverlay' +import {useModal} from '../../../../features/Modal/ModalContext' import {useMetrics} from '../../../../metrics/metricsManager' import {useSelectedWallet} from '../../../../SelectedWallet' import {COLORS} from '../../../../theme' @@ -16,19 +17,11 @@ import {ConfirmTx} from './ConfirmTx' import {TransactionSummary} from './TransactionSummary' export const ConfirmTxScreen = () => { - const bottomSheetRef = React.useRef(null) - - const openBottomSheet = () => { - bottomSheetRef.current?.openBottomSheet() - } - - const closeBottomSheet = () => { - bottomSheetRef.current?.closeBottomSheet() - } const strings = useStrings() const wallet = useSelectedWallet() const navigate = useNavigateTo() const {track} = useMetrics() + const {openModal, closeModal} = useModal() const {unsignedTx, createOrder} = useSwap() const sellTokenInfo = useTokenInfo({ @@ -94,32 +87,27 @@ export const ConfirmTxScreen = () => { authWithOs() return } - openBottomSheet() + openModal( + wallet.isHW ? strings.chooseConnectionMethod : strings.signTransaction, + + { + closeModal() + navigate.submittedTx() + }} + onCancel={closeModal} + /> + + + , + wallet.isHW ? 430 : 350, + ) }} /> - - - { - closeBottomSheet() - navigate.submittedTx() - }} - onCancel={closeBottomSheet} - /> - - - - - ) diff --git a/apps/wallet-mobile/src/navigation.tsx b/apps/wallet-mobile/src/navigation.tsx index 8dfd98378b..05c26a73a4 100644 --- a/apps/wallet-mobile/src/navigation.tsx +++ b/apps/wallet-mobile/src/navigation.tsx @@ -326,6 +326,7 @@ export type AppRoutes = { 'bio-auth-initial': undefined 'enable-login-with-pin': undefined 'agreement-changed-notice': undefined + modal: undefined } export type AppRouteNavigation = StackNavigationProp From f3f6009bf1eb72efc15142ca323a53c69ba33f46 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 21:37:51 +0200 Subject: [PATCH 02/11] bottom tab alternate fix --- .../android/app/src/main/AndroidManifest.xml | 2 +- apps/wallet-mobile/src/WalletNavigator.tsx | 140 ++++++++++-------- 2 files changed, 76 insertions(+), 66 deletions(-) diff --git a/apps/wallet-mobile/android/app/src/main/AndroidManifest.xml b/apps/wallet-mobile/android/app/src/main/AndroidManifest.xml index b2de2ab73c..05b3ba0a1f 100644 --- a/apps/wallet-mobile/android/app/src/main/AndroidManifest.xml +++ b/apps/wallet-mobile/android/app/src/main/AndroidManifest.xml @@ -31,7 +31,7 @@ android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" - android:windowSoftInputMode="adjustPan" + android:windowSoftInputMode="adjustResize" android:screenOrientation="portrait" android:exported="true"> diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index eccb53aac8..c61d6929c6 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -3,6 +3,7 @@ import {getFocusedRouteNameFromRoute} from '@react-navigation/native' import {createStackNavigator} from '@react-navigation/stack' import React from 'react' import {defineMessages, useIntl} from 'react-intl' +import {useWindowDimensions, View} from 'react-native' import {VotingRegistration as VotingRegistration} from './Catalyst' import {Icon, OfflineBanner} from './components' @@ -22,6 +23,7 @@ import {isHaskellShelley} from './yoroi-wallets/cardano/utils' const Tab = createBottomTabNavigator() const WalletTabNavigator = () => { const strings = useStrings() + const {height, width} = useWindowDimensions() const wallet = useSelectedWallet() const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history' @@ -29,84 +31,92 @@ const WalletTabNavigator = () => { <> - - ({ - tabBarIcon: ({focused}) => ( - - ), - tabBarLabel: strings.walletTabBarLabel, - tabBarTestID: 'walletTabBarButton', - tabBarStyle: getFocusedRouteNameFromRoute(route.route) === 'send-read-qr-code' ? {display: 'none'} : {}, - })} - > - {() => ( - - - - )} - - - ( - - ), - tabBarLabel: strings.nftsTabBarLabel, - tabBarTestID: 'nftsTabBarButton', + - {() => ( - - - - )} - + ({ + tabBarIcon: ({focused}) => ( + + ), + tabBarLabel: strings.walletTabBarLabel, + tabBarTestID: 'walletTabBarButton', + tabBarStyle: getFocusedRouteNameFromRoute(route.route) === 'send-read-qr-code' ? {display: 'none'} : {}, + })} + > + {() => ( + + + + )} + - {isHaskellShelley(wallet.walletImplementationId) && ( ( - ), - tabBarLabel: strings.stakingButton, - tabBarTestID: 'stakingTabBarButton', + tabBarLabel: strings.nftsTabBarLabel, + tabBarTestID: 'nftsTabBarButton', + }} + > + {() => ( + + + + )} + + + {isHaskellShelley(wallet.walletImplementationId) && ( + ( + + ), + tabBarLabel: strings.stakingButton, + tabBarTestID: 'stakingTabBarButton', + }} + /> + )} + + , + tabBarLabel: strings.menuTabBarLabel, + tabBarTestID: 'menuTabBarButton', }} /> - )} - - , - tabBarLabel: strings.menuTabBarLabel, - tabBarTestID: 'menuTabBarButton', - }} - /> - + + ) } From 3f629f54d8cd49cdac702dbec6b13be9a4e58550 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 21:38:10 +0200 Subject: [PATCH 03/11] modal refactor --- .../src/features/Modal/ModalScreen.tsx | 59 +++++++++---------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx index fafbfe247c..3f69c9ebcd 100644 --- a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx +++ b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx @@ -27,7 +27,7 @@ export const ModalScreen = () => { const onResponderMove = ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => { if (swipeLocationY < nativeEvent.locationY) { const newState = downDirectionCount + 1 - if (newState > 6) { + if (newState > 4) { closeModal() cleanDirectionCount() } else setDownDirectionCount(newState) @@ -36,37 +36,33 @@ export const ModalScreen = () => { } return ( - - + + + + true}> +
- - true}> -
- - {content} - - - + {content} + + + + ) } @@ -92,6 +88,7 @@ const styles = StyleSheet.create({ flex: 1, alignItems: 'center', justifyContent: 'flex-end', + alignSelf: 'stretch', }, backdrop: { ...StyleSheet.absoluteFillObject, From 268816bfa3d72202c0c373ba54bb560af5ae54eb Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 22:17:12 +0200 Subject: [PATCH 04/11] bottom tab alternate fix --- apps/wallet-mobile/src/WalletNavigator.tsx | 161 +++++++++++---------- 1 file changed, 86 insertions(+), 75 deletions(-) diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index c61d6929c6..c60c8ae610 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -3,7 +3,7 @@ import {getFocusedRouteNameFromRoute} from '@react-navigation/native' import {createStackNavigator} from '@react-navigation/stack' import React from 'react' import {defineMessages, useIntl} from 'react-intl' -import {useWindowDimensions, View} from 'react-native' +import {Keyboard} from 'react-native' import {VotingRegistration as VotingRegistration} from './Catalyst' import {Icon, OfflineBanner} from './components' @@ -23,100 +23,111 @@ import {isHaskellShelley} from './yoroi-wallets/cardano/utils' const Tab = createBottomTabNavigator() const WalletTabNavigator = () => { const strings = useStrings() - const {height, width} = useWindowDimensions() const wallet = useSelectedWallet() const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history' + const [keyboardStatus, setKeyboardStatus] = React.useState() + + React.useEffect(() => { + const showSubscription = Keyboard.addListener('keyboardWillShow', () => { + setKeyboardStatus(true) + }) + const hideSubscription = Keyboard.addListener('keyboardWillHide', () => { + setKeyboardStatus(false) + }) + + return () => { + showSubscription.remove() + hideSubscription.remove() + } + }, []) + return ( <> - - ({ + tabBarIcon: ({focused}) => ( + + ), + tabBarLabel: strings.walletTabBarLabel, + tabBarTestID: 'walletTabBarButton', + tabBarStyle: getFocusedRouteNameFromRoute(route.route) === 'send-read-qr-code' ? {display: 'none'} : {}, + })} + > + {() => ( + + + + )} + + + ( + + ), + tabBarLabel: strings.nftsTabBarLabel, + tabBarTestID: 'nftsTabBarButton', }} - initialRouteName={initialRoute} - backBehavior="initialRoute" > - ({ - tabBarIcon: ({focused}) => ( - - ), - tabBarLabel: strings.walletTabBarLabel, - tabBarTestID: 'walletTabBarButton', - tabBarStyle: getFocusedRouteNameFromRoute(route.route) === 'send-read-qr-code' ? {display: 'none'} : {}, - })} - > - {() => ( - - - - )} - + {() => ( + + + + )} + + {isHaskellShelley(wallet.walletImplementationId) && ( ( - ), - tabBarLabel: strings.nftsTabBarLabel, - tabBarTestID: 'nftsTabBarButton', - }} - > - {() => ( - - - - )} - - - {isHaskellShelley(wallet.walletImplementationId) && ( - ( - - ), - tabBarLabel: strings.stakingButton, - tabBarTestID: 'stakingTabBarButton', - }} - /> - )} - - , - tabBarLabel: strings.menuTabBarLabel, - tabBarTestID: 'menuTabBarButton', + tabBarLabel: strings.stakingButton, + tabBarTestID: 'stakingTabBarButton', }} /> - - + )} + + , + tabBarLabel: strings.menuTabBarLabel, + tabBarTestID: 'menuTabBarButton', + }} + /> + ) } From d068f83fb1c9a31d09b4f09b03ea7b1a1d51ffcb Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 22:22:01 +0200 Subject: [PATCH 05/11] bottom tab alternate fix --- apps/wallet-mobile/src/WalletNavigator.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index c60c8ae610..6638a7210b 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -52,7 +52,6 @@ const WalletTabNavigator = () => { tabBarLabelStyle: {fontSize: 11}, tabBarActiveTintColor: theme.COLORS.NAVIGATION_ACTIVE, tabBarInactiveTintColor: theme.COLORS.NAVIGATION_INACTIVE, - tabBarHideOnKeyboard: false, tabBarStyle: { display: keyboardStatus ? 'none' : undefined, }, From 0f272757e7e6d399dcba3a5198de8f5cce816707 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 22:27:11 +0200 Subject: [PATCH 06/11] bottom tab alternate fix --- apps/wallet-mobile/src/WalletNavigator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index 6638a7210b..20f1e53da4 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -26,7 +26,7 @@ const WalletTabNavigator = () => { const wallet = useSelectedWallet() const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history' - const [keyboardStatus, setKeyboardStatus] = React.useState() + const [keyboardStatus, setKeyboardStatus] = React.useState(false) React.useEffect(() => { const showSubscription = Keyboard.addListener('keyboardWillShow', () => { From 9f9a5cff82a53a98bd8046ede57a38bb3d42aee1 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Mon, 9 Oct 2023 22:27:59 +0200 Subject: [PATCH 07/11] bottom tab alternate fix --- apps/wallet-mobile/src/WalletNavigator.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx index 20f1e53da4..be940e9019 100644 --- a/apps/wallet-mobile/src/WalletNavigator.tsx +++ b/apps/wallet-mobile/src/WalletNavigator.tsx @@ -26,14 +26,14 @@ const WalletTabNavigator = () => { const wallet = useSelectedWallet() const initialRoute = isHaskellShelley(wallet.walletImplementationId) ? 'staking-dashboard' : 'history' - const [keyboardStatus, setKeyboardStatus] = React.useState(false) + const [isKeyboardOpen, setIsKeyboardOpen] = React.useState(false) React.useEffect(() => { const showSubscription = Keyboard.addListener('keyboardWillShow', () => { - setKeyboardStatus(true) + setIsKeyboardOpen(true) }) const hideSubscription = Keyboard.addListener('keyboardWillHide', () => { - setKeyboardStatus(false) + setIsKeyboardOpen(false) }) return () => { @@ -53,7 +53,7 @@ const WalletTabNavigator = () => { tabBarActiveTintColor: theme.COLORS.NAVIGATION_ACTIVE, tabBarInactiveTintColor: theme.COLORS.NAVIGATION_INACTIVE, tabBarStyle: { - display: keyboardStatus ? 'none' : undefined, + display: isKeyboardOpen ? 'none' : undefined, }, }} initialRouteName={initialRoute} From d8551f7ff8d8695eb4c951e5aeb0f886b2e18664 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Tue, 10 Oct 2023 14:04:53 +0200 Subject: [PATCH 08/11] android modal fix --- apps/wallet-mobile/src/features/Modal/ModalScreen.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx index 3f69c9ebcd..0268278c17 100644 --- a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx +++ b/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx @@ -37,7 +37,11 @@ export const ModalScreen = () => { return ( - + Date: Tue, 10 Oct 2023 14:11:15 +0200 Subject: [PATCH 09/11] modal recolocation --- apps/wallet-mobile/src/AppNavigator.tsx | 4 +- .../src/components/Modal/Modal.stories.tsx | 98 ------------- .../src/components/Modal/Modal.tsx | 134 ------------------ .../Modal/ModalContext.tsx | 0 .../Modal/ModalScreen.tsx | 2 +- .../src/components/Modal/index.ts | 1 - .../ConfirmTxScreen/ConfirmTxScreen.tsx | 2 +- 7 files changed, 4 insertions(+), 237 deletions(-) delete mode 100644 apps/wallet-mobile/src/components/Modal/Modal.stories.tsx delete mode 100644 apps/wallet-mobile/src/components/Modal/Modal.tsx rename apps/wallet-mobile/src/{features => components}/Modal/ModalContext.tsx (100%) rename apps/wallet-mobile/src/{features => components}/Modal/ModalScreen.tsx (98%) delete mode 100644 apps/wallet-mobile/src/components/Modal/index.ts diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx index 51fdc27e8d..06d2600242 100644 --- a/apps/wallet-mobile/src/AppNavigator.tsx +++ b/apps/wallet-mobile/src/AppNavigator.tsx @@ -11,10 +11,10 @@ import {OsLoginScreen, PinLoginScreen, useBackgroundTimeout} from './auth' import {useAuth} from './auth/AuthProvider' import {supportsAndroidFingerprintOverlay} from './auth/biometrics' import {EnableLoginWithPin} from './auth/EnableLoginWithPin' +import {ModalProvider} from './components/Modal/ModalContext' +import {ModalScreen} from './components/Modal/ModalScreen' import {AgreementChangedNavigator, InitializationNavigator} from './features/Initialization' import {LegalAgreement, useLegalAgreement} from './features/Initialization/common' -import {ModalProvider} from './features/Modal/ModalContext' -import {ModalScreen} from './features/Modal/ModalScreen' import {CONFIG} from './legacy/config' import {DeveloperScreen} from './legacy/DeveloperScreen' import {AppRoutes} from './navigation' diff --git a/apps/wallet-mobile/src/components/Modal/Modal.stories.tsx b/apps/wallet-mobile/src/components/Modal/Modal.stories.tsx deleted file mode 100644 index 1d4183ae57..0000000000 --- a/apps/wallet-mobile/src/components/Modal/Modal.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import {storiesOf} from '@storybook/react-native' -import React from 'react' -import {Text} from 'react-native' - -import {WithModalProps} from '../../../.storybook/decorators' -import {Modal} from './Modal' - -storiesOf('Modal', module) - .add('Default', () => ( - - {(modalProps) => ( - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - )} - - )) - .add('with title', () => ( - - {(modalProps) => ( - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - )} - - )) - .add('with close button', () => ( - - {(modalProps) => ( - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - )} - - )) - .add('no padding', () => ( - - {(modalProps) => ( - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - )} - - )) - .add('closes on blur', () => ( - // { - // setTimeout(() => action('addListener')(event), 1000) - // if (event === 'blur') { - // setTimeout(() => callback({type: event}), 2000) - // } - - // return () => undefined - // }, - // // eslint-disable-next-line @typescript-eslint/no-explicit-any - // }} - // > - - {(modalProps) => ( - - - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - )} - - // - )) diff --git a/apps/wallet-mobile/src/components/Modal/Modal.tsx b/apps/wallet-mobile/src/components/Modal/Modal.tsx deleted file mode 100644 index 927b8e91f1..0000000000 --- a/apps/wallet-mobile/src/components/Modal/Modal.tsx +++ /dev/null @@ -1,134 +0,0 @@ -/** - * IMPORTANT: - * Modals may have unexpected behaviours, particularly on iOS. - * A few recommandations when using them: - * - iOS: make sure you test in a *release* build and on a real device - * - avoid chaining modals (ie. creating a dialog in which one modal is shown - * after the other) - * - when visibility is controled through a component state variable, remember - * that setState() is a *request* to change the state. The actual change may - * occur within several UI ticks and not immediately. - * - avoid mixing modals with Alert.alert() as this may freeze the UI - * on iOS. See https://github.com/facebook/react-native/issues/10471 - */ -import {NavigationProp, useNavigation} from '@react-navigation/native' -import React from 'react' -import {Modal as RNModal, StyleSheet, Text, TouchableOpacity, View} from 'react-native' - -import {COLORS} from '../../theme' -import {isEmptyString} from '../../utils/utils' -import {Icon} from '../Icon' - -type Props = { - onRequestClose: () => void - visible: boolean - children: React.ReactNode - showCloseIcon?: boolean - noPadding?: boolean - title?: string - // eslint-disable-next-line @typescript-eslint/no-explicit-any -} - -type NavigationHookProp = { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - navigation: NavigationProp -} - -type State = { - isFocused: boolean -} - -// Note(ppershing): we need to hide the modal when navigating -// from this screen as modals are shown over react-navigation -// Warning: This means that children components are unmounted -// while on different screen and therefore should not keep any -// important state! -// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component -class ModalClassComponent extends React.Component { - state = { - isFocused: true, - } - - _subscriptions: Array<() => void> = [] - - componentDidMount = () => { - const {navigation} = this.props - this._subscriptions.push(navigation.addListener('focus', () => this.handleWillFocus())) - this._subscriptions.push(navigation.addListener('blur', () => this.handleWillBlur())) - } - - componentWillUnmount = () => { - this._subscriptions.forEach((unsubscribeFn) => unsubscribeFn()) - } - - handleWillBlur = () => this.setState({isFocused: false}) - handleWillFocus = () => this.setState({isFocused: true}) - - render() { - const {visible, showCloseIcon, onRequestClose, noPadding, children, title} = this.props - const {isFocused} = this.state - - return ( - - - - {!isEmptyString(title) && {title}} - - {showCloseIcon && ( - - - - )} - - {children} - - - - ) - } -} - -export const Modal = (props: Props) => { - const navigation = useNavigation() - return -} - -const styles = StyleSheet.create({ - backdrop: { - flex: 1, - alignItems: 'stretch', - justifyContent: 'center', - padding: 24, - backgroundColor: 'rgba(0, 0, 0, .3)', - }, - noPadding: { - padding: 0, - marginTop: 0, - }, - container: { - backgroundColor: '#fff', - borderRadius: 4, - padding: 24, - }, - close: { - position: 'absolute', - top: 0, - right: 0, - padding: 16, - }, - content: { - marginTop: 15, - }, - withTitle: { - paddingTop: 0, - marginTop: 0, - }, - title: { - fontSize: 20, - fontFamily: 'Rubik-Medium', - lineHeight: 30, - color: COLORS.MODAL_HEADING, - alignSelf: 'center', - paddingTop: 8, - }, -}) diff --git a/apps/wallet-mobile/src/features/Modal/ModalContext.tsx b/apps/wallet-mobile/src/components/Modal/ModalContext.tsx similarity index 100% rename from apps/wallet-mobile/src/features/Modal/ModalContext.tsx rename to apps/wallet-mobile/src/components/Modal/ModalContext.tsx diff --git a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx similarity index 98% rename from apps/wallet-mobile/src/features/Modal/ModalScreen.tsx rename to apps/wallet-mobile/src/components/Modal/ModalScreen.tsx index 0268278c17..aa26dd2fe0 100644 --- a/apps/wallet-mobile/src/features/Modal/ModalScreen.tsx +++ b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx @@ -11,7 +11,7 @@ import { View, } from 'react-native' -import {Spacer} from '../../components' +import {Spacer} from '..' import {useModal} from './ModalContext' export const ModalScreen = () => { diff --git a/apps/wallet-mobile/src/components/Modal/index.ts b/apps/wallet-mobile/src/components/Modal/index.ts deleted file mode 100644 index 8d3bcd7a06..0000000000 --- a/apps/wallet-mobile/src/components/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Modal' diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx index 61b143923c..39df77183b 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx @@ -5,7 +5,7 @@ import {SafeAreaView} from 'react-native-safe-area-context' import {Button, Spacer} from '../../../../components' import {LoadingOverlay} from '../../../../components/LoadingOverlay' -import {useModal} from '../../../../features/Modal/ModalContext' +import {useModal} from '../../../../components/Modal/ModalContext' import {useMetrics} from '../../../../metrics/metricsManager' import {useSelectedWallet} from '../../../../SelectedWallet' import {COLORS} from '../../../../theme' From 517c9dea37f4ce39080e5c575dd542fea021281a Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Tue, 10 Oct 2023 14:36:10 +0200 Subject: [PATCH 10/11] fix imports --- .../.storybook/decorators/modals.tsx | 2 +- .../VotingRegistrationBackupCheckModal.tsx | 3 +- .../wallet-mobile/src/Dashboard/Dashboard.tsx | 3 +- .../LedgerConnect/LedgerConnect.stories.tsx | 2 +- .../LedgerTransportSwitchModal.tsx | 3 +- .../src/Receive/AddressModal.tsx | 3 +- .../PoolWarningModal/PoolWarningModal.tsx | 3 +- .../src/TxHistory/ModalInfo/ModalInfo.tsx | 3 +- .../MnemonicBackupImportanceModal.tsx | 3 +- .../MnemonicExplanationModal.tsx | 3 +- .../WalletInit/WalletInitScreen.tsx | 3 +- .../src/components/ConfirmTx/Dialog.tsx | 3 +- .../DangerousActionModal.tsx | 3 +- .../src/components/ErrorModal/ErrorModal.tsx | 2 +- .../src/components/Modal/index.ts | 2 + .../src/components/PleaseWaitModal.tsx | 2 +- .../StandardModal/StandardModal.tsx | 2 +- apps/wallet-mobile/src/components/index.ts | 4 +- .../ConfirmTxScreen/TransactionSummary.tsx | 2 +- .../EditSlippage/ShowSlippageInfo.tsx | 2 +- .../LimitPriceWarning/LimitPriceWarning.tsx | 2 +- .../BottomSheet/BottomSheet.stories.tsx | 2 +- .../BottomSheet/BottomSheet.tsx | 2 +- .../BottomSheet/index.ts | 0 .../BottomSheetModal.stories.tsx | 0 .../BottomSheetModal/BottomSheetModal.tsx | 4 +- .../BottomSheetModal/index.ts | 0 .../src/legacy/Modal/Modal.stories.tsx | 98 +++++++++++++ apps/wallet-mobile/src/legacy/Modal/Modal.tsx | 134 ++++++++++++++++++ apps/wallet-mobile/src/legacy/Modal/index.ts | 1 + .../messages/src/AppNavigator.json | 32 ++--- .../messages/src/WalletNavigator.json | 72 +++++----- 32 files changed, 323 insertions(+), 77 deletions(-) create mode 100644 apps/wallet-mobile/src/components/Modal/index.ts rename apps/wallet-mobile/src/{components => legacy}/BottomSheet/BottomSheet.stories.tsx (98%) rename apps/wallet-mobile/src/{components => legacy}/BottomSheet/BottomSheet.tsx (98%) rename apps/wallet-mobile/src/{components => legacy}/BottomSheet/index.ts (100%) rename apps/wallet-mobile/src/{components => legacy}/BottomSheetModal/BottomSheetModal.stories.tsx (100%) rename apps/wallet-mobile/src/{components => legacy}/BottomSheetModal/BottomSheetModal.tsx (97%) rename apps/wallet-mobile/src/{components => legacy}/BottomSheetModal/index.ts (100%) create mode 100644 apps/wallet-mobile/src/legacy/Modal/Modal.stories.tsx create mode 100644 apps/wallet-mobile/src/legacy/Modal/Modal.tsx create mode 100644 apps/wallet-mobile/src/legacy/Modal/index.ts diff --git a/apps/wallet-mobile/.storybook/decorators/modals.tsx b/apps/wallet-mobile/.storybook/decorators/modals.tsx index ab06da97bd..06c54db305 100644 --- a/apps/wallet-mobile/.storybook/decorators/modals.tsx +++ b/apps/wallet-mobile/.storybook/decorators/modals.tsx @@ -2,7 +2,7 @@ import {action} from '@storybook/addon-actions' import React from 'react' import {Button, View} from 'react-native' -import {Modal} from '../../src/components' +import {Modal} from '../../src/legacy/Modal' type childrenFn = (modalProps: { visible: boolean diff --git a/apps/wallet-mobile/src/Catalyst/VotingRegistrationBackupCheckModal.tsx b/apps/wallet-mobile/src/Catalyst/VotingRegistrationBackupCheckModal.tsx index 8372d8993f..cb14befa7a 100644 --- a/apps/wallet-mobile/src/Catalyst/VotingRegistrationBackupCheckModal.tsx +++ b/apps/wallet-mobile/src/Catalyst/VotingRegistrationBackupCheckModal.tsx @@ -2,8 +2,9 @@ import React, {useState} from 'react' import {defineMessages, useIntl} from 'react-intl' import {StyleSheet, View} from 'react-native' -import {Button, Checkbox, Modal, Spacer, Text} from '../components' +import {Button, Checkbox, Spacer, Text} from '../components' import globalMessages, {confirmationMessages} from '../i18n/global-messages' +import {Modal} from '../legacy/Modal' type Props = { onConfirm: () => void diff --git a/apps/wallet-mobile/src/Dashboard/Dashboard.tsx b/apps/wallet-mobile/src/Dashboard/Dashboard.tsx index d68c6f3307..2a52824f98 100644 --- a/apps/wallet-mobile/src/Dashboard/Dashboard.tsx +++ b/apps/wallet-mobile/src/Dashboard/Dashboard.tsx @@ -5,8 +5,9 @@ import React from 'react' import {defineMessages, useIntl} from 'react-intl' import {ActivityIndicator, RefreshControl, ScrollView, StyleSheet, View, ViewProps} from 'react-native' -import {Banner, Button, Modal, StatusBar} from '../components' +import {Banner, Button, StatusBar} from '../components' import globalMessages from '../i18n/global-messages' +import {Modal} from '../legacy/Modal' import {useWalletNavigation} from '../navigation' import {useSelectedWallet} from '../SelectedWallet' import {isEmptyString} from '../utils/utils' diff --git a/apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.stories.tsx b/apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.stories.tsx index 32aa6c8973..3454a35dc2 100644 --- a/apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.stories.tsx +++ b/apps/wallet-mobile/src/HW/LedgerConnect/LedgerConnect.stories.tsx @@ -2,7 +2,7 @@ import {storiesOf} from '@storybook/react-native' import React from 'react' import {WithModalProps} from '../../../.storybook/decorators' -import {Modal} from '../../components' +import {Modal} from '../../legacy/Modal' import {LedgerConnect} from './LedgerConnect' const devices = [ diff --git a/apps/wallet-mobile/src/HW/LedgerTransportSwitchModal/LedgerTransportSwitchModal.tsx b/apps/wallet-mobile/src/HW/LedgerTransportSwitchModal/LedgerTransportSwitchModal.tsx index 48bf2c9422..5d225dbfb0 100644 --- a/apps/wallet-mobile/src/HW/LedgerTransportSwitchModal/LedgerTransportSwitchModal.tsx +++ b/apps/wallet-mobile/src/HW/LedgerTransportSwitchModal/LedgerTransportSwitchModal.tsx @@ -3,8 +3,9 @@ import {defineMessages, useIntl} from 'react-intl' import {Alert, Platform, ScrollView, StyleSheet, View} from 'react-native' import DeviceInfo from 'react-native-device-info' -import {Button, Modal, Text} from '../../components' +import {Button, Text} from '../../components' import globalMessages from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {spacing} from '../../theme' import {HARDWARE_WALLETS, useLedgerPermissions} from '../../yoroi-wallets/hw' diff --git a/apps/wallet-mobile/src/Receive/AddressModal.tsx b/apps/wallet-mobile/src/Receive/AddressModal.tsx index 859ec6e1d0..08a6de7c12 100644 --- a/apps/wallet-mobile/src/Receive/AddressModal.tsx +++ b/apps/wallet-mobile/src/Receive/AddressModal.tsx @@ -4,7 +4,8 @@ import {defineMessages, useIntl} from 'react-intl' import {StyleSheet, View} from 'react-native' import QRCode from 'react-native-qrcode-svg' -import {CopyButton, Modal, Spacer, Text} from '../components' +import {CopyButton, Spacer, Text} from '../components' +import {Modal} from '../legacy/Modal' import {useSelectedWallet} from '../SelectedWallet' import {getSpendingKey, getStakingKey} from '../yoroi-wallets/cardano/addressInfo' import {AddressType, formatPath} from '../yoroi-wallets/cardano/formatPath' diff --git a/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx b/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx index 85b7dc75e8..55cde49761 100644 --- a/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx +++ b/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx @@ -3,8 +3,9 @@ import {defineMessages, useIntl} from 'react-intl' import {Image, ScrollView, StyleSheet, TextStyle, View} from 'react-native' import image from '../../assets/img/mnemonic_explanation.png' -import {Button, Modal, Text} from '../../components' +import {Button, Text} from '../../components' import {confirmationMessages} from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {spacing} from '../../theme' type Props = { diff --git a/apps/wallet-mobile/src/TxHistory/ModalInfo/ModalInfo.tsx b/apps/wallet-mobile/src/TxHistory/ModalInfo/ModalInfo.tsx index 6fdc238025..0c558b9af9 100644 --- a/apps/wallet-mobile/src/TxHistory/ModalInfo/ModalInfo.tsx +++ b/apps/wallet-mobile/src/TxHistory/ModalInfo/ModalInfo.tsx @@ -2,7 +2,8 @@ import React from 'react' import {defineMessages, useIntl} from 'react-intl' import {StyleSheet} from 'react-native' -import {Icon, Modal, Spacer} from '../../components' +import {Icon, Spacer} from '../../components' +import {Modal} from '../../legacy/Modal' import {COLORS} from '../../theme' type Props = { diff --git a/apps/wallet-mobile/src/WalletInit/MnemonicBackupModal/MnemonicBackupImportanceModal.tsx b/apps/wallet-mobile/src/WalletInit/MnemonicBackupModal/MnemonicBackupImportanceModal.tsx index 515cd64a1b..6214fab380 100644 --- a/apps/wallet-mobile/src/WalletInit/MnemonicBackupModal/MnemonicBackupImportanceModal.tsx +++ b/apps/wallet-mobile/src/WalletInit/MnemonicBackupModal/MnemonicBackupImportanceModal.tsx @@ -2,7 +2,8 @@ import React from 'react' import {defineMessages, useIntl} from 'react-intl' import {StyleSheet} from 'react-native' -import {Button, Checkbox, Modal, Text} from '../../components' +import {Button, Checkbox, Text} from '../../components' +import {Modal} from '../../legacy/Modal' import {spacing} from '../../theme' type Props = { diff --git a/apps/wallet-mobile/src/WalletInit/MnemonicExplanationModal/MnemonicExplanationModal.tsx b/apps/wallet-mobile/src/WalletInit/MnemonicExplanationModal/MnemonicExplanationModal.tsx index e4d14971b5..25bd8a72a8 100644 --- a/apps/wallet-mobile/src/WalletInit/MnemonicExplanationModal/MnemonicExplanationModal.tsx +++ b/apps/wallet-mobile/src/WalletInit/MnemonicExplanationModal/MnemonicExplanationModal.tsx @@ -4,7 +4,8 @@ import {Image, StyleSheet, View} from 'react-native' import Markdown from 'react-native-markdown-display' import image from '../../assets/img/mnemonic_explanation.png' -import {Button, Modal} from '../../components' +import {Button} from '../../components' +import {Modal} from '../../legacy/Modal' import {spacing} from '../../theme' type Props = { diff --git a/apps/wallet-mobile/src/WalletInit/WalletInit/WalletInitScreen.tsx b/apps/wallet-mobile/src/WalletInit/WalletInit/WalletInitScreen.tsx index a8dac23386..8d3bc944ad 100644 --- a/apps/wallet-mobile/src/WalletInit/WalletInit/WalletInitScreen.tsx +++ b/apps/wallet-mobile/src/WalletInit/WalletInit/WalletInitScreen.tsx @@ -4,9 +4,10 @@ import {defineMessages, useIntl} from 'react-intl' import {StyleSheet, View} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' -import {Button, Modal, ScreenBackground, StatusBar} from '../../components' +import {Button, ScreenBackground, StatusBar} from '../../components' import {LedgerTransportSwitchModal} from '../../HW' import globalMessages from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {WalletInitRouteNavigation, WalletInitRoutes} from '../../navigation' import {COLORS} from '../../theme' import {WALLET_CONFIG_24} from '../../yoroi-wallets/cardano/constants/mainnet/constants' diff --git a/apps/wallet-mobile/src/components/ConfirmTx/Dialog.tsx b/apps/wallet-mobile/src/components/ConfirmTx/Dialog.tsx index dd98de8bba..05cb7f4260 100644 --- a/apps/wallet-mobile/src/components/ConfirmTx/Dialog.tsx +++ b/apps/wallet-mobile/src/components/ConfirmTx/Dialog.tsx @@ -1,9 +1,10 @@ import React from 'react' import {useIntl} from 'react-intl' -import {ErrorView, Modal, PleaseWaitView} from '../../components' +import {ErrorView, PleaseWaitView} from '../../components' import {LedgerConnect, LedgerTransportSwitchView} from '../../HW' import globalMessages, {ledgerMessages, txLabels} from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {DeviceId, DeviceObj} from '../../yoroi-wallets/hw' type ErrorData = { diff --git a/apps/wallet-mobile/src/components/DangerousActionModal/DangerousActionModal.tsx b/apps/wallet-mobile/src/components/DangerousActionModal/DangerousActionModal.tsx index 3c9143fb03..f3f472ce99 100644 --- a/apps/wallet-mobile/src/components/DangerousActionModal/DangerousActionModal.tsx +++ b/apps/wallet-mobile/src/components/DangerousActionModal/DangerousActionModal.tsx @@ -4,8 +4,9 @@ import {ScrollView, StyleSheet, View} from 'react-native' import {Icon} from '../../components/Icon' import globalMessages, {confirmationMessages} from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {COLORS} from '../../theme' -import {Button, Checkbox, Modal, Spacer, Text} from '..' +import {Button, Checkbox, Spacer, Text} from '..' type DangerousActionProps = { title: string diff --git a/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx b/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx index b827eacadf..fab122387c 100644 --- a/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx +++ b/apps/wallet-mobile/src/components/ErrorModal/ErrorModal.tsx @@ -4,11 +4,11 @@ import {Image, LayoutAnimation, ScrollView, StyleSheet, Text, TouchableOpacity, import image from '../../assets/img/error.png' import globalMessages, {errorMessages} from '../../i18n/global-messages' +import {Modal} from '../../legacy/Modal' import {brand, COLORS, spacing} from '../../theme' import {isEmptyString} from '../../utils/utils' import {Button} from '../Button' import {Icon} from '../Icon' -import {Modal} from '../Modal' type ErrorViewProps = { title?: string diff --git a/apps/wallet-mobile/src/components/Modal/index.ts b/apps/wallet-mobile/src/components/Modal/index.ts new file mode 100644 index 0000000000..64a74e526d --- /dev/null +++ b/apps/wallet-mobile/src/components/Modal/index.ts @@ -0,0 +1,2 @@ +export * from './ModalContext' +export * from './ModalScreen' diff --git a/apps/wallet-mobile/src/components/PleaseWaitModal.tsx b/apps/wallet-mobile/src/components/PleaseWaitModal.tsx index 2039c28ff2..5078578fa7 100644 --- a/apps/wallet-mobile/src/components/PleaseWaitModal.tsx +++ b/apps/wallet-mobile/src/components/PleaseWaitModal.tsx @@ -1,7 +1,7 @@ import React from 'react' import {ActivityIndicator, StyleSheet, Text, View} from 'react-native' -import {Modal} from './Modal' +import {Modal} from '../legacy/Modal' import {Spacer} from './Spacer' type PleaseWaitViewProps = { diff --git a/apps/wallet-mobile/src/components/StandardModal/StandardModal.tsx b/apps/wallet-mobile/src/components/StandardModal/StandardModal.tsx index 8cf977a91f..0f89a28dfe 100644 --- a/apps/wallet-mobile/src/components/StandardModal/StandardModal.tsx +++ b/apps/wallet-mobile/src/components/StandardModal/StandardModal.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Modal} from '../Modal' +import {Modal} from '../../legacy/Modal' import {TwoActionView} from '../TwoActionView' type Props = { diff --git a/apps/wallet-mobile/src/components/index.ts b/apps/wallet-mobile/src/components/index.ts index d4ed6ba8c4..66eab412ff 100644 --- a/apps/wallet-mobile/src/components/index.ts +++ b/apps/wallet-mobile/src/components/index.ts @@ -1,7 +1,7 @@ +export * from '../legacy/BottomSheet' +export * from '../legacy/BottomSheetModal' export * from './Analytics' export * from './Banner' -export * from './BottomSheet' -export * from './BottomSheetModal' export * from './Boundary' export * from './BulletPointItem' export * from './Button' diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx index 04612bbb6f..538027e975 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx @@ -4,7 +4,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native' import {Icon, Spacer, Text} from '../../../../components' import {AmountItem} from '../../../../components/AmountItem/AmountItem' -import {BottomSheetModal} from '../../../../components/BottomSheetModal' +import {BottomSheetModal} from '../../../../legacy/BottomSheetModal' import {useSelectedWallet} from '../../../../SelectedWallet' import {COLORS} from '../../../../theme' import {useTokenInfo} from '../../../../yoroi-wallets/hooks' diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSlippage/ShowSlippageInfo.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSlippage/ShowSlippageInfo.tsx index 50765a95b0..98ec7c4efe 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSlippage/ShowSlippageInfo.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditSlippage/ShowSlippageInfo.tsx @@ -3,7 +3,7 @@ import {StyleSheet, Text, View} from 'react-native' import {TouchableOpacity} from 'react-native-gesture-handler' import {Icon, Spacer} from '../../../../../../components' -import {BottomSheetModal} from '../../../../../../components/BottomSheetModal' +import {BottomSheetModal} from '../../../../../../legacy/BottomSheetModal' import {COLORS} from '../../../../../../theme' import {useStrings} from '../../../../common/strings' diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx index 3c7e74c12d..e1992c0fe0 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx @@ -4,7 +4,7 @@ import React from 'react' import {StyleSheet, Text, View} from 'react-native' import {Button, Spacer} from '../../../../../../components' -import {BottomSheetModal} from '../../../../../../components/BottomSheetModal' +import {BottomSheetModal} from '../../../../../../legacy/BottomSheetModal' import {useLanguage} from '../../../../../../i18n' import {useSelectedWallet} from '../../../../../../SelectedWallet' import {useTokenInfo} from '../../../../../../yoroi-wallets/hooks' diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx b/apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.stories.tsx similarity index 98% rename from apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx rename to apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.stories.tsx index e285acda3f..6ad273a569 100644 --- a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx +++ b/apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.stories.tsx @@ -2,7 +2,7 @@ import {storiesOf} from '@storybook/react-native' import React from 'react' import {Button, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native' -import {Spacer} from '../Spacer' +import {Spacer} from '../../components/Spacer' import {BottomSheet, BottomSheetRef} from './BottomSheet' storiesOf('BottomSheet', module) diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx b/apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.tsx similarity index 98% rename from apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx rename to apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.tsx index b7fb484b05..b168ad91b4 100644 --- a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx +++ b/apps/wallet-mobile/src/legacy/BottomSheet/BottomSheet.tsx @@ -1,7 +1,7 @@ import React from 'react' import {KeyboardAvoidingView, Modal, NativeTouchEvent, Platform, StyleSheet, Text, View} from 'react-native' -import {Spacer} from '../Spacer' +import {Spacer} from '../../components/Spacer' type BottomSheetProps = { children: React.ReactNode diff --git a/apps/wallet-mobile/src/components/BottomSheet/index.ts b/apps/wallet-mobile/src/legacy/BottomSheet/index.ts similarity index 100% rename from apps/wallet-mobile/src/components/BottomSheet/index.ts rename to apps/wallet-mobile/src/legacy/BottomSheet/index.ts diff --git a/apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.stories.tsx b/apps/wallet-mobile/src/legacy/BottomSheetModal/BottomSheetModal.stories.tsx similarity index 100% rename from apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.stories.tsx rename to apps/wallet-mobile/src/legacy/BottomSheetModal/BottomSheetModal.stories.tsx diff --git a/apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx b/apps/wallet-mobile/src/legacy/BottomSheetModal/BottomSheetModal.tsx similarity index 97% rename from apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx rename to apps/wallet-mobile/src/legacy/BottomSheetModal/BottomSheetModal.tsx index 88dd2adaf3..a827690619 100644 --- a/apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx +++ b/apps/wallet-mobile/src/legacy/BottomSheetModal/BottomSheetModal.tsx @@ -3,8 +3,8 @@ import {useNavigation} from '@react-navigation/native' import React from 'react' import {Modal as RNModal, Platform, StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native' -import {Icon} from '../Icon' -import {Spacer} from '../Spacer' +import {Icon} from '../../components/Icon' +import {Spacer} from '../../components/Spacer' export type BottomSheetState = { openId: string | null diff --git a/apps/wallet-mobile/src/components/BottomSheetModal/index.ts b/apps/wallet-mobile/src/legacy/BottomSheetModal/index.ts similarity index 100% rename from apps/wallet-mobile/src/components/BottomSheetModal/index.ts rename to apps/wallet-mobile/src/legacy/BottomSheetModal/index.ts diff --git a/apps/wallet-mobile/src/legacy/Modal/Modal.stories.tsx b/apps/wallet-mobile/src/legacy/Modal/Modal.stories.tsx new file mode 100644 index 0000000000..1d4183ae57 --- /dev/null +++ b/apps/wallet-mobile/src/legacy/Modal/Modal.stories.tsx @@ -0,0 +1,98 @@ +import {storiesOf} from '@storybook/react-native' +import React from 'react' +import {Text} from 'react-native' + +import {WithModalProps} from '../../../.storybook/decorators' +import {Modal} from './Modal' + +storiesOf('Modal', module) + .add('Default', () => ( + + {(modalProps) => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + )} + + )) + .add('with title', () => ( + + {(modalProps) => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + )} + + )) + .add('with close button', () => ( + + {(modalProps) => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + )} + + )) + .add('no padding', () => ( + + {(modalProps) => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + )} + + )) + .add('closes on blur', () => ( + // { + // setTimeout(() => action('addListener')(event), 1000) + // if (event === 'blur') { + // setTimeout(() => callback({type: event}), 2000) + // } + + // return () => undefined + // }, + // // eslint-disable-next-line @typescript-eslint/no-explicit-any + // }} + // > + + {(modalProps) => ( + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + )} + + // + )) diff --git a/apps/wallet-mobile/src/legacy/Modal/Modal.tsx b/apps/wallet-mobile/src/legacy/Modal/Modal.tsx new file mode 100644 index 0000000000..e2a4812f17 --- /dev/null +++ b/apps/wallet-mobile/src/legacy/Modal/Modal.tsx @@ -0,0 +1,134 @@ +/** + * IMPORTANT: + * Modals may have unexpected behaviours, particularly on iOS. + * A few recommandations when using them: + * - iOS: make sure you test in a *release* build and on a real device + * - avoid chaining modals (ie. creating a dialog in which one modal is shown + * after the other) + * - when visibility is controled through a component state variable, remember + * that setState() is a *request* to change the state. The actual change may + * occur within several UI ticks and not immediately. + * - avoid mixing modals with Alert.alert() as this may freeze the UI + * on iOS. See https://github.com/facebook/react-native/issues/10471 + */ +import {NavigationProp, useNavigation} from '@react-navigation/native' +import React from 'react' +import {Modal as RNModal, StyleSheet, Text, TouchableOpacity, View} from 'react-native' + +import {Icon} from '../../components' +import {COLORS} from '../../theme' +import {isEmptyString} from '../../utils/utils' + +type Props = { + onRequestClose: () => void + visible: boolean + children: React.ReactNode + showCloseIcon?: boolean + noPadding?: boolean + title?: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any +} + +type NavigationHookProp = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + navigation: NavigationProp +} + +type State = { + isFocused: boolean +} + +// Note(ppershing): we need to hide the modal when navigating +// from this screen as modals are shown over react-navigation +// Warning: This means that children components are unmounted +// while on different screen and therefore should not keep any +// important state! +// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component +class ModalClassComponent extends React.Component { + state = { + isFocused: true, + } + + _subscriptions: Array<() => void> = [] + + componentDidMount = () => { + const {navigation} = this.props + this._subscriptions.push(navigation.addListener('focus', () => this.handleWillFocus())) + this._subscriptions.push(navigation.addListener('blur', () => this.handleWillBlur())) + } + + componentWillUnmount = () => { + this._subscriptions.forEach((unsubscribeFn) => unsubscribeFn()) + } + + handleWillBlur = () => this.setState({isFocused: false}) + handleWillFocus = () => this.setState({isFocused: true}) + + render() { + const {visible, showCloseIcon, onRequestClose, noPadding, children, title} = this.props + const {isFocused} = this.state + + return ( + + + + {!isEmptyString(title) && {title}} + + {showCloseIcon && ( + + + + )} + + {children} + + + + ) + } +} + +export const Modal = (props: Props) => { + const navigation = useNavigation() + return +} + +const styles = StyleSheet.create({ + backdrop: { + flex: 1, + alignItems: 'stretch', + justifyContent: 'center', + padding: 24, + backgroundColor: 'rgba(0, 0, 0, .3)', + }, + noPadding: { + padding: 0, + marginTop: 0, + }, + container: { + backgroundColor: '#fff', + borderRadius: 4, + padding: 24, + }, + close: { + position: 'absolute', + top: 0, + right: 0, + padding: 16, + }, + content: { + marginTop: 15, + }, + withTitle: { + paddingTop: 0, + marginTop: 0, + }, + title: { + fontSize: 20, + fontFamily: 'Rubik-Medium', + lineHeight: 30, + color: COLORS.MODAL_HEADING, + alignSelf: 'center', + paddingTop: 8, + }, +}) diff --git a/apps/wallet-mobile/src/legacy/Modal/index.ts b/apps/wallet-mobile/src/legacy/Modal/index.ts new file mode 100644 index 0000000000..8d3bcd7a06 --- /dev/null +++ b/apps/wallet-mobile/src/legacy/Modal/index.ts @@ -0,0 +1 @@ +export * from './Modal' diff --git a/apps/wallet-mobile/translations/messages/src/AppNavigator.json b/apps/wallet-mobile/translations/messages/src/AppNavigator.json index 45ae29f314..0239715280 100644 --- a/apps/wallet-mobile/translations/messages/src/AppNavigator.json +++ b/apps/wallet-mobile/translations/messages/src/AppNavigator.json @@ -4,14 +4,14 @@ "defaultMessage": "!!!Enter PIN", "file": "src/AppNavigator.tsx", "start": { - "line": 159, + "line": 169, "column": 17, - "index": 5243 + "index": 5761 }, "end": { - "line": 162, + "line": 172, "column": 3, - "index": 5333 + "index": 5851 } }, { @@ -19,14 +19,14 @@ "defaultMessage": "!!!Set PIN", "file": "src/AppNavigator.tsx", "start": { - "line": 163, + "line": 173, "column": 18, - "index": 5353 + "index": 5871 }, "end": { - "line": 166, + "line": 176, "column": 3, - "index": 5451 + "index": 5969 } }, { @@ -34,14 +34,14 @@ "defaultMessage": "!!!Auth with OS changes", "file": "src/AppNavigator.tsx", "start": { - "line": 167, + "line": 177, "column": 25, - "index": 5478 + "index": 5996 }, "end": { - "line": 170, + "line": 180, "column": 3, - "index": 5592 + "index": 6110 } }, { @@ -49,14 +49,14 @@ "defaultMessage": "!!!Auth with OS changed detected", "file": "src/AppNavigator.tsx", "start": { - "line": 171, + "line": 181, "column": 27, - "index": 5621 + "index": 6139 }, "end": { - "line": 174, + "line": 184, "column": 3, - "index": 5742 + "index": 6260 } } ] \ No newline at end of file diff --git a/apps/wallet-mobile/translations/messages/src/WalletNavigator.json b/apps/wallet-mobile/translations/messages/src/WalletNavigator.json index 7b08f21cf0..1f4431601a 100644 --- a/apps/wallet-mobile/translations/messages/src/WalletNavigator.json +++ b/apps/wallet-mobile/translations/messages/src/WalletNavigator.json @@ -4,14 +4,14 @@ "defaultMessage": "!!!Transactions", "file": "src/WalletNavigator.tsx", "start": { - "line": 137, + "line": 157, "column": 22, - "index": 4808 + "index": 5368 }, "end": { - "line": 140, + "line": 160, "column": 3, - "index": 4911 + "index": 5471 } }, { @@ -19,14 +19,14 @@ "defaultMessage": "!!!Send", "file": "src/WalletNavigator.tsx", "start": { - "line": 141, + "line": 161, "column": 14, - "index": 4927 + "index": 5487 }, "end": { - "line": 144, + "line": 164, "column": 3, - "index": 5026 + "index": 5586 } }, { @@ -34,14 +34,14 @@ "defaultMessage": "!!!Receive", "file": "src/WalletNavigator.tsx", "start": { - "line": 145, + "line": 165, "column": 17, - "index": 5045 + "index": 5605 }, "end": { - "line": 148, + "line": 168, "column": 3, - "index": 5150 + "index": 5710 } }, { @@ -49,14 +49,14 @@ "defaultMessage": "!!!Dashboard", "file": "src/WalletNavigator.tsx", "start": { - "line": 149, + "line": 169, "column": 19, - "index": 5171 + "index": 5731 }, "end": { - "line": 152, + "line": 172, "column": 3, - "index": 5268 + "index": 5828 } }, { @@ -64,14 +64,14 @@ "defaultMessage": "!!!Delegate", "file": "src/WalletNavigator.tsx", "start": { - "line": 153, + "line": 173, "column": 18, - "index": 5288 + "index": 5848 }, "end": { - "line": 156, + "line": 176, "column": 3, - "index": 5383 + "index": 5943 } }, { @@ -79,14 +79,14 @@ "defaultMessage": "!!!Wallet", "file": "src/WalletNavigator.tsx", "start": { - "line": 157, + "line": 177, "column": 16, - "index": 5401 + "index": 5961 }, "end": { - "line": 160, + "line": 180, "column": 3, - "index": 5499 + "index": 6059 } }, { @@ -94,14 +94,14 @@ "defaultMessage": "!!!Staking", "file": "src/WalletNavigator.tsx", "start": { - "line": 161, + "line": 181, "column": 17, - "index": 5518 + "index": 6078 }, "end": { - "line": 164, + "line": 184, "column": 3, - "index": 5583 + "index": 6143 } }, { @@ -109,14 +109,14 @@ "defaultMessage": "!!!NFT Gallery", "file": "src/WalletNavigator.tsx", "start": { - "line": 165, + "line": 185, "column": 14, - "index": 5599 + "index": 6159 }, "end": { - "line": 168, + "line": 188, "column": 3, - "index": 5693 + "index": 6253 } }, { @@ -124,14 +124,14 @@ "defaultMessage": "!!!Menu", "file": "src/WalletNavigator.tsx", "start": { - "line": 169, + "line": 189, "column": 14, - "index": 5709 + "index": 6269 }, "end": { - "line": 172, + "line": 192, "column": 3, - "index": 5761 + "index": 6321 } } ] \ No newline at end of file From 8d7796d5c269761b8d433f9aca736d8a144b6c83 Mon Sep 17 00:00:00 2001 From: Javier Bueno Date: Tue, 10 Oct 2023 15:00:00 +0200 Subject: [PATCH 11/11] fix lint --- .../CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx index e1992c0fe0..fd52dd8add 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx @@ -4,8 +4,8 @@ import React from 'react' import {StyleSheet, Text, View} from 'react-native' import {Button, Spacer} from '../../../../../../components' -import {BottomSheetModal} from '../../../../../../legacy/BottomSheetModal' import {useLanguage} from '../../../../../../i18n' +import {BottomSheetModal} from '../../../../../../legacy/BottomSheetModal' import {useSelectedWallet} from '../../../../../../SelectedWallet' import {useTokenInfo} from '../../../../../../yoroi-wallets/hooks' import {useStrings} from '../../../../common/strings'