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