From e0a29482a7be75b8938798dcd5dda2512db583c6 Mon Sep 17 00:00:00 2001
From: mvaivre <m.vaivre@gmail.com>
Date: Fri, 11 Oct 2024 10:02:53 +0200
Subject: [PATCH] Migrate GroupSelectModal

---
 .../src/features/modals/AppModals.tsx         |   3 +
 .../src/features/modals/modalTypes.ts         |   4 +-
 .../Address/AddressFormBaseScreen.tsx         | 124 ++++++++----------
 .../Addresses/Address/GroupSelectModal.tsx    |  48 ++++---
 4 files changed, 91 insertions(+), 88 deletions(-)

diff --git a/apps/mobile-wallet/src/features/modals/AppModals.tsx b/apps/mobile-wallet/src/features/modals/AppModals.tsx
index 23c7acfba..94df6ceb8 100644
--- a/apps/mobile-wallet/src/features/modals/AppModals.tsx
+++ b/apps/mobile-wallet/src/features/modals/AppModals.tsx
@@ -44,6 +44,7 @@ import WalletConnectErrorModal from '~/features/walletconnect/WalletConnectError
 import WalletConnectPairingsModal from '~/features/walletconnect/WalletConnectPairingsModal'
 import WalletConnectPasteUrlModal from '~/features/walletconnect/WalletConnectPasteUrlModal'
 import { useAppSelector } from '~/hooks/redux'
+import GroupSelectModal from '~/screens/Addresses/Address/GroupSelectModal'
 import SwitchNetworkModal from '~/screens/SwitchNetworkModal'
 
 const AppModals = () => {
@@ -106,6 +107,8 @@ const AppModals = () => {
             return <WalletConnectPasteUrlModal key={id} id={id} {...params.props} />
           case 'WalletConnectSessionProposalModal':
             return <WalletConnectSessionProposalModal key={id} id={id} {...params.props} />
+          case 'GroupSelectModal':
+            return <GroupSelectModal key={id} id={id} {...params.props} />
           default:
             return null
         }
diff --git a/apps/mobile-wallet/src/features/modals/modalTypes.ts b/apps/mobile-wallet/src/features/modals/modalTypes.ts
index 361aae8b5..baaa949b8 100644
--- a/apps/mobile-wallet/src/features/modals/modalTypes.ts
+++ b/apps/mobile-wallet/src/features/modals/modalTypes.ts
@@ -41,6 +41,7 @@ import TransactionModal from '~/features/transactionsDisplay/TransactionModal'
 import WalletConnectErrorModal from '~/features/walletconnect/WalletConnectErrorModal'
 import WalletConnectPairingsModal from '~/features/walletconnect/WalletConnectPairingsModal'
 import WalletConnectPasteUrlModal from '~/features/walletconnect/WalletConnectPasteUrlModal'
+import GroupSelectModal from '~/screens/Addresses/Address/GroupSelectModal'
 import SwitchNetworkModal from '~/screens/SwitchNetworkModal'
 
 export const ModalComponents = {
@@ -66,7 +67,8 @@ export const ModalComponents = {
   WalletConnectErrorModal,
   WalletConnectPasteUrlModal,
   WalletConnectPairingsModal,
-  WalletConnectSessionProposalModal
+  WalletConnectSessionProposalModal,
+  GroupSelectModal
 }
 
 type ModalName = keyof typeof ModalComponents
diff --git a/apps/mobile-wallet/src/screens/Addresses/Address/AddressFormBaseScreen.tsx b/apps/mobile-wallet/src/screens/Addresses/Address/AddressFormBaseScreen.tsx
index 79439753f..149703362 100644
--- a/apps/mobile-wallet/src/screens/Addresses/Address/AddressFormBaseScreen.tsx
+++ b/apps/mobile-wallet/src/screens/Addresses/Address/AddressFormBaseScreen.tsx
@@ -20,7 +20,6 @@ import { AddressSettings } from '@alephium/shared'
 import { ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
-import { Portal } from 'react-native-portalize'
 
 import AppText from '~/components/AppText'
 import { ContinueButton } from '~/components/buttons/Button'
@@ -32,8 +31,8 @@ import { ScreenSection } from '~/components/layout/Screen'
 import ScrollScreen, { ScrollScreenProps } from '~/components/layout/ScrollScreen'
 import Row from '~/components/Row'
 import Toggle from '~/components/Toggle'
-import BottomModal from '~/features/modals/DeprecatedBottomModal'
-import GroupSelectModal from '~/screens/Addresses/Address/GroupSelectModal'
+import { openModal } from '~/features/modals/modalActions'
+import { useAppDispatch } from '~/hooks/redux'
 
 export type AddressFormData = AddressSettings & {
   group?: number
@@ -61,12 +60,12 @@ const AddressForm = ({
   ...props
 }: AddressFormProps) => {
   const { t } = useTranslation()
+  const dispatch = useAppDispatch()
 
   const [label, setLabel] = useState(initialValues.label)
   const [color, setColor] = useState(initialValues.color)
   const [isDefault, setIsDefault] = useState(initialValues.isDefault)
   const [group, setGroup] = useState<number>()
-  const [isGroupSelectModalOpen, setIsGroupSelectModalOpen] = useState(false)
 
   const toggleIsMain = () => {
     if (!disableIsMainToggle) {
@@ -74,71 +73,62 @@ const AddressForm = ({
     }
   }
 
+  const openGroupSelectModal = () => dispatch(openModal({ name: 'GroupSelectModal', props: { onSelect: setGroup } }))
+
   return (
-    <>
-      <ScrollScreen
-        usesKeyboard
-        fill
-        verticalGap
-        screenTitle={screenTitle}
-        headerOptions={{
-          type: 'stack',
-          headerRight: () => (
-            <ContinueButton
-              title={buttonText || t('Generate')}
-              onPress={() => onSubmit({ isDefault, label, color, group })}
-              iconProps={undefined}
-            />
-          ),
-          headerTitle: screenTitle,
-          ...headerOptions
-        }}
-        {...props}
-      >
-        <View>{HeaderComponent}</View>
-        <ScreenSection verticalGap fill>
-          <Input value={label} onChangeText={setLabel} label={t('Label')} maxLength={50} />
-          <ColorPicker value={color} onChange={setColor} />
-          <BoxSurface>
-            <Row
-              title={t('Default address')}
-              subtitle={`${t('Default address for operations')}${
-                disableIsMainToggle
-                  ? `. ${t(
-                      'To remove this address from being the default address, you must set another one as main first.'
-                    )}`
-                  : ''
-              }`}
-              onPress={toggleIsMain}
-              isLast
-            >
-              <Toggle onValueChange={toggleIsMain} value={isDefault} disabled={disableIsMainToggle} />
-            </Row>
-          </BoxSurface>
+    <ScrollScreen
+      usesKeyboard
+      fill
+      verticalGap
+      screenTitle={screenTitle}
+      headerOptions={{
+        type: 'stack',
+        headerRight: () => (
+          <ContinueButton
+            title={buttonText || t('Generate')}
+            onPress={() => onSubmit({ isDefault, label, color, group })}
+            iconProps={undefined}
+          />
+        ),
+        headerTitle: screenTitle,
+        ...headerOptions
+      }}
+      {...props}
+    >
+      <View>{HeaderComponent}</View>
+      <ScreenSection verticalGap fill>
+        <Input value={label} onChangeText={setLabel} label={t('Label')} maxLength={50} />
+        <ColorPicker value={color} onChange={setColor} />
+        <BoxSurface>
+          <Row
+            title={t('Default address')}
+            subtitle={`${t('Default address for operations')}${
+              disableIsMainToggle
+                ? `. ${t(
+                    'To remove this address from being the default address, you must set another one as main first.'
+                  )}`
+                : ''
+            }`}
+            onPress={toggleIsMain}
+            isLast
+          >
+            <Toggle onValueChange={toggleIsMain} value={isDefault} disabled={disableIsMainToggle} />
+          </Row>
+        </BoxSurface>
 
-          {allowGroupSelection && (
-            <ExpandableRow>
-              <BoxSurface>
-                <Row title={t('Address group')} onPress={() => setIsGroupSelectModalOpen(true)}>
-                  <AppText>
-                    {group !== undefined ? t('Group {{ groupNumber }}', { groupNumber: group }) : t('Default')}
-                  </AppText>
-                </Row>
-              </BoxSurface>
-            </ExpandableRow>
-          )}
-        </ScreenSection>
-      </ScrollScreen>
-      <Portal>
-        <BottomModal
-          isOpen={isGroupSelectModalOpen}
-          onClose={() => setIsGroupSelectModalOpen(false)}
-          Content={(props) => (
-            <GroupSelectModal onClose={() => setIsGroupSelectModalOpen(false)} onSelect={setGroup} {...props} />
-          )}
-        />
-      </Portal>
-    </>
+        {allowGroupSelection && (
+          <ExpandableRow>
+            <BoxSurface>
+              <Row title={t('Address group')} onPress={openGroupSelectModal}>
+                <AppText>
+                  {group !== undefined ? t('Group {{ groupNumber }}', { groupNumber: group }) : t('Default')}
+                </AppText>
+              </Row>
+            </BoxSurface>
+          </ExpandableRow>
+        )}
+      </ScreenSection>
+    </ScrollScreen>
   )
 }
 
diff --git a/apps/mobile-wallet/src/screens/Addresses/Address/GroupSelectModal.tsx b/apps/mobile-wallet/src/screens/Addresses/Address/GroupSelectModal.tsx
index dfb5065b8..dc1dec199 100644
--- a/apps/mobile-wallet/src/screens/Addresses/Address/GroupSelectModal.tsx
+++ b/apps/mobile-wallet/src/screens/Addresses/Address/GroupSelectModal.tsx
@@ -23,9 +23,13 @@ import BoxSurface from '~/components/layout/BoxSurface'
 import { ScreenSection } from '~/components/layout/Screen'
 import RadioButtonRow from '~/components/RadioButtonRow'
 import i18n from '~/features/localization/i18n'
-import { ModalContent, ModalContentProps } from '~/features/modals/ModalContent'
+import BottomModal from '~/features/modals/BottomModal'
+import { closeModal } from '~/features/modals/modalActions'
+import { ModalContent } from '~/features/modals/ModalContent'
+import withModal from '~/features/modals/withModal'
+import { useAppDispatch } from '~/hooks/redux'
 
-interface GroupSelectModalProps extends ModalContentProps {
+interface GroupSelectModalProps {
   selectedGroup?: number
   onSelect: (group?: number) => void
 }
@@ -35,29 +39,33 @@ const groupSelectOptions = map(Array(TOTAL_NUMBER_OF_GROUPS + 1), (_, i) => ({
   label: i === 0 ? i18n.t('Default') : i18n.t('Group {{ groupNumber }}', { groupNumber: i - 1 })
 }))
 
-const GroupSelectModal = ({ onClose, onSelect, selectedGroup, ...props }: GroupSelectModalProps) => {
+const GroupSelectModal = withModal<GroupSelectModalProps>(({ id, onSelect, selectedGroup }) => {
+  const dispatch = useAppDispatch()
+
   const onGroupSelect = (group?: number) => {
     onSelect(group)
-    onClose && onClose()
+    dispatch(closeModal({ id }))
   }
 
   return (
-    <ModalContent {...props}>
-      <ScreenSection>
-        <BoxSurface>
-          {groupSelectOptions.map((groupOption, index) => (
-            <RadioButtonRow
-              key={groupOption.label}
-              title={groupOption.label}
-              onPress={() => onGroupSelect(groupOption.value)}
-              isActive={selectedGroup === groupOption.value}
-              isLast={index === groupSelectOptions.length - 1}
-            />
-          ))}
-        </BoxSurface>
-      </ScreenSection>
-    </ModalContent>
+    <BottomModal modalId={id}>
+      <ModalContent>
+        <ScreenSection>
+          <BoxSurface>
+            {groupSelectOptions.map((groupOption, index) => (
+              <RadioButtonRow
+                key={groupOption.label}
+                title={groupOption.label}
+                onPress={() => onGroupSelect(groupOption.value)}
+                isActive={selectedGroup === groupOption.value}
+                isLast={index === groupSelectOptions.length - 1}
+              />
+            ))}
+          </BoxSurface>
+        </ScreenSection>
+      </ModalContent>
+    </BottomModal>
   )
-}
+})
 
 export default GroupSelectModal