Skip to content

Commit

Permalink
Migrate GroupSelectModal
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvaivre
mvaivre committed Oct 11, 2024
1 parent 0d45c95 commit e0a2948
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 88 deletions.
3 changes: 3 additions & 0 deletions apps/mobile-wallet/src/features/modals/AppModals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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
}
Expand Down
4 changes: 3 additions & 1 deletion apps/mobile-wallet/src/features/modals/modalTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -66,7 +67,8 @@ export const ModalComponents = {
WalletConnectErrorModal,
WalletConnectPasteUrlModal,
WalletConnectPairingsModal,
WalletConnectSessionProposalModal
WalletConnectSessionProposalModal,
GroupSelectModal
}

type ModalName = keyof typeof ModalComponents
Expand Down
124 changes: 57 additions & 67 deletions apps/mobile-wallet/src/screens/Addresses/Address/AddressFormBaseScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -61,84 +60,75 @@ 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) {
setIsDefault(!isDefault)
}
}

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>
)
}

Expand Down
48 changes: 28 additions & 20 deletions apps/mobile-wallet/src/screens/Addresses/Address/GroupSelectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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

0 comments on commit e0a2948

Please sign in to comment.