fix imports

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

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

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'

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 = [

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'
 

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'

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 = {

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 = {

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 = {

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 = {

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'

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 = {

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

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

apps/wallet-mobile/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export * from './ModalContext'
+export * from './ModalScreen'

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 = {

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 = {

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'

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'

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'
 

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'

apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx → 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)

apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx → 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

apps/wallet-mobile/src/components/BottomSheetModal/BottomSheetModal.tsx → 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

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', () => (
+    <WithModalProps>
+      {(modalProps) => (
+        <Modal {...modalProps}>
+          <Text>
+            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.
+          </Text>
+        </Modal>
+      )}
+    </WithModalProps>
+  ))
+  .add('with title', () => (
+    <WithModalProps>
+      {(modalProps) => (
+        <Modal {...modalProps} title="This is the title">
+          <Text>
+            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.
+          </Text>
+        </Modal>
+      )}
+    </WithModalProps>
+  ))
+  .add('with close button', () => (
+    <WithModalProps>
+      {(modalProps) => (
+        <Modal {...modalProps} showCloseIcon>
+          <Text>
+            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.
+          </Text>
+        </Modal>
+      )}
+    </WithModalProps>
+  ))
+  .add('no padding', () => (
+    <WithModalProps>
+      {(modalProps) => (
+        <Modal {...modalProps} noPadding>
+          <Text>
+            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.
+          </Text>
+        </Modal>
+      )}
+    </WithModalProps>
+  ))
+  .add('closes on blur', () => (
+    // <NavigationContext.Provider
+    //   value={{
+    //     ...navigation,
+    //     addListener: (event, callback) => {
+    //       setTimeout(() => action('addListener')(event), 1000)
+    //       if (event === 'blur') {
+    //         setTimeout(() => callback({type: event}), 2000)
+    //       }
+
+    //       return () => undefined
+    //     },
+    //     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    //   }}
+    // >
+    <WithModalProps>
+      {(modalProps) => (
+        <Modal {...modalProps}>
+          <Text>
+            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.
+          </Text>
+        </Modal>
+      )}
+    </WithModalProps>
+    // </NavigationContext.Provider>
+  ))