fix(receive): Adds single or multiple modal for receive

apps/wallet-mobile/src/features/Receive/common/useStrings.tsx

@@ -30,6 +30,10 @@ export const useStrings = () => {
     infoAddressLimit: intl.formatMessage(messages.infoAddressLimit),
     multiplePresentation: intl.formatMessage(messages.multiplePresentation),
     multiplePresentationDetails: intl.formatMessage(messages.multiplePresentationDetails),
+    singleOrMultiple: intl.formatMessage(messages.singleOrMultiple),
+    singleOrMultipleDetails: intl.formatMessage(messages.singleOrMultipleDetails),
+    selectMultiple: intl.formatMessage(messages.selectMultiple),
+    singleAddressWallet: intl.formatMessage(messages.singleAddressWallet),
     yoroiZendesk: intl.formatMessage(messages.yoroiZendesk),
     ok: intl.formatMessage(messages.ok),
   }
@@ -142,6 +146,23 @@ export const messages = defineMessages({
     defaultMessage:
       '!!!Enables Yoroi to manage various addresses in one place, enhancing privacy and providing organisational benefits.',
   },
+  singleOrMultiple: {
+    id: 'components.receive.receivescreen.singleOrMultiple',
+    defaultMessage: '!!!Single or multiple address?',
+  },
+  singleOrMultipleDetails: {
+    id: 'components.receive.receivescreen.singleOrMultipleDetails',
+    defaultMessage:
+      '!!!Single keeps things simple and secure. Multiple may offer some extra privacy. For most users, single address is the way to go! You can always change it in settings.',
+  },
+  selectMultiple: {
+    id: 'components.receive.receivescreen.selectMultiple',
+    defaultMessage: '!!!Select multiple instead',
+  },
+  singleAddressWallet: {
+    id: 'components.receive.receivescreen.singleAddressWallet',
+    defaultMessage: '!!!Single address wallet',
+  },
   ok: {
     id: 'global.ok',
     defaultMessage: '!!!OK',

apps/wallet-mobile/src/features/Receive/useCases/DescribeSelectedAddressScreen.tsx

@@ -2,25 +2,33 @@ import {useFocusEffect} from '@react-navigation/native'
 import {useTheme} from '@yoroi/theme'
 import _ from 'lodash'
 import * as React from 'react'
-import {ScrollView, StyleSheet, View} from 'react-native'
+import {ScrollView, StyleSheet, Text, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import Icon from '../../../assets/img/copy.png'
-import {Button, Spacer} from '../../../components'
+import {Button, Spacer, useModal} from '../../../components'
+import {useStatusBar} from '../../../components/hooks/useStatusBar'
 import {useCopy} from '../../../legacy/useCopy'
 import {useMetrics} from '../../../metrics/metricsManager'
 import {isEmptyString} from '../../../utils'
+import {useAddressModeManager} from '../../../wallet-manager/useAddressModeManager'
 import {AddressDetailCard} from '../common/AddressDetailCard/AddressDetailCard'
 import {useReceive} from '../common/ReceiveProvider'
 import {SkeletonAdressDetail} from '../common/SkeletonAddressDetail/SkeletonAddressDetail'
+import {useMultipleAddressesInfo} from '../common/useMultipleAddressesInfo'
 import {useNavigateTo} from '../common/useNavigateTo'
 import {useStrings} from '../common/useStrings'
+import {QRs} from '../illustrations/QRs'
 
 export const DescribeSelectedAddressScreen = () => {
   const strings = useStrings()
   const {styles, colors} = useStyles()
   const navigate = useNavigateTo()
   const {selectedAddress} = useReceive()
+  const {isSingle} = useAddressModeManager()
+  const {isShowingMultipleAddressInfo} = useMultipleAddressesInfo()
+  const {openModal} = useModal()
+
   const {track} = useMetrics()
 
   const [isCopying, copy] = useCopy()
@@ -31,6 +39,10 @@ export const DescribeSelectedAddressScreen = () => {
     copy(selectedAddress)
   }
 
+  React.useEffect(() => {
+    isSingle && isShowingMultipleAddressInfo && openModal(strings.singleOrMultiple, <Modal />, modalHeight)
+  }, [isShowingMultipleAddressInfo, isSingle, openModal, strings.singleOrMultiple])
+
   useFocusEffect(
     React.useCallback(() => {
       track.receivePageViewed()
@@ -73,15 +85,77 @@ export const DescribeSelectedAddressScreen = () => {
   )
 }
 
+const modalHeight = 520
+const Modal = () => {
+  const {styles, colors} = useStyles()
+  const strings = useStrings()
+  const {enableMultipleMode} = useAddressModeManager()
+
+  const {hideMultipleAddressesInfo} = useMultipleAddressesInfo()
+
+  const {closeModal} = useModal()
+
+  const handleOnMultiple = () => {
+    enableMultipleMode()
+    handleOnSingle()
+  }
+
+  const handleOnSingle = () => {
+    hideMultipleAddressesInfo()
+    closeModal()
+  }
+
+  return (
+    <View style={styles.modal}>
+      <QRs />
+
+      <Text style={[styles.details, {color: colors.details}]}>{strings.singleOrMultipleDetails}</Text>
+
+      <Spacer fill height={24} />
+
+      <View style={styles.buttonContainer}>
+        <Button
+          outline
+          title={strings.selectMultiple}
+          textStyles={{
+            color: colors.details,
+          }}
+          onPress={handleOnMultiple}
+        />
+
+        <Spacer height={6} />
+
+        <Button shelleyTheme title={strings.singleAddressWallet} onPress={handleOnSingle} style={styles.button} />
+      </View>
+
+      <Spacer height={24} />
+    </View>
+  )
+}
+
 const useStyles = () => {
   const {theme} = useTheme()
+  useStatusBar()
 
   const styles = StyleSheet.create({
     root: {
       flex: 1,
       backgroundColor: theme.color.gray.min,
       padding: 16,
     },
+    modal: {
+      flex: 1,
+      backgroundColor: theme.color['bottom-sheet-background'],
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    buttonContainer: {
+      alignSelf: 'stretch',
+      backgroundColor: theme.color.gray.min,
+    },
+    details: {
+      ...theme.typography['body-1-l-regular'],
+    },
     address: {
       flex: 1,
       alignItems: 'center',
@@ -93,6 +167,7 @@ const useStyles = () => {
 
   const colors = {
     buttonBackgroundBlue: theme.color.primary[600],
+    details: theme.color.gray[900],
   }
 
   return {styles, colors} as const

apps/wallet-mobile/src/i18n/locales/en-US.json

@@ -239,6 +239,10 @@
   "components.receive.receivescreen.usedAddress": "Used",
   "components.receive.receivescreen.multiplePresentation": "Meet multiple addresses in Yoroi",
   "components.receive.receivescreen.multiplePresentationDetails": "Enables Yoroi to manage various addresses in one place, enhancing privacy and providing organisational benefits.",
+  "components.receive.receivescreen.singleOrMultiple": "Single or multiple address?",
+  "components.receive.receivescreen.singleOrMultipleDetails": "Single keeps things simple and secure. Multiple may offer some extra privacy. For most users, single address is the way to go! You can always change it in settings.",
+  "components.receive.receivescreen.selectMultiple": "Select multiple instead",
+  "components.receive.receivescreen.singleAddressWallet": "Single address wallet",
   "components.receive.receivescreen.learnAboutYoroi": "Learn more about this in Yoroi Zendesk",
   "components.receive.receivescreen.infoAddressLimit": "You have already reached your 20 addresses limit. If you need to operate with more than 20 addresses, reach out to us via ",
   "components.send.addressreaderqr.text": "Scan recipients QR code to add a wallet address",