refactor: phone number field

packages/mask/dashboard/components/Restore/RestoreFromCloud/PhoneField.tsx

@@ -1,9 +1,4 @@
-import {
-    PhoneNumberField,
-    SendingCodeField,
-    useCustomSnackbar,
-    type PhoneNumberFieldValue as PhoneConfig,
-} from '@masknet/theme'
+import { SendingCodeField, useCustomSnackbar } from '@masknet/theme'
 import { Box } from '@mui/material'
 import guessCallingCode from 'guess-calling-code'
 import { pick } from 'lodash-es'
@@ -17,6 +12,7 @@ import { phoneRegexp } from '../../../utils/regexp.js'
 import { AccountType, Locale, Scenario } from '../../../type.js'
 import { PrimaryButton } from '../../PrimaryButton/index.js'
 import { RestoreContext } from './RestoreProvider.js'
+import { PhoneNumberField } from '@masknet/shared'
 
 export const PhoneField = memo(function PhoneField() {
     const language = useLanguage()
@@ -28,8 +24,20 @@ export const PhoneField = memo(function PhoneField() {
     const { state, dispatch, downloadBackupInfo } = RestoreContext.useContainer()
     const { loading, phoneForm } = state
     const { account, code, dialingCode } = phoneForm
-    const phoneConfig: PhoneConfig = useMemo(() => pick(phoneForm, 'dialingCode', 'phone', 'country'), [phoneForm])
-    const setPhoneConfig = useCallback((newConfig: PhoneConfig) => dispatch({ type: 'SET_PHONE', form: newConfig }), [])
+    const phoneConfig = useMemo(() => pick(phoneForm, 'dialingCode', 'phone'), [phoneForm])
+    const onPhoneNumberChange = useCallback(
+        (phoneNumber: string) => {
+            dispatch({ type: 'SET_PHONE', form: { ...phoneConfig, phone: phoneNumber } })
+        },
+        [phoneConfig],
+    )
+    const onCountryCodeChange = useCallback(
+        (code: string) => {
+            dispatch({ type: 'SET_PHONE', form: { ...phoneConfig, dialingCode: code } })
+        },
+        [phoneConfig],
+    )
+
     useEffect(() => {
         if (dialingCode) return
         dispatch({ type: 'SET_PHONE', form: { dialingCode: guessCallingCode() } })
@@ -81,14 +89,18 @@ export const PhoneField = memo(function PhoneField() {
         )
     }, [account, code, disabled, loading])
 
+    console.log(phoneForm)
     return (
         <>
             <PhoneNumberField
+                fullWidth
+                code={phoneConfig.dialingCode}
+                onCodeChange={onCountryCodeChange}
                 onBlur={validCheck}
-                onChange={setPhoneConfig}
-                error={invalidPhone ? t.data_recovery_invalid_mobile() : error || ''}
-                value={phoneConfig}
-                placeholder={t.mobile_number()}
+                onChange={(event) => onPhoneNumberChange(event.target.value)}
+                error={invalidPhone}
+                helperText={invalidPhone ? t.data_recovery_invalid_mobile() : error || ''}
+                value={phoneForm.phone}
             />
             <Box mt={1.5}>
                 <SendingCodeField

packages/mask/dashboard/contexts/CloudBackupFormContext.tsx

@@ -5,6 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useTabs } from '@masknet/theme'
 import { phoneRegexp } from '../utils/regexp.js'
+import guessCallingCode from 'guess-calling-code'
 
 export interface CloudBackupFormInputs {
     email: string
@@ -28,7 +29,7 @@ function useCloudBackupFormContext() {
             email: '',
             phone: '',
             code: '',
-            countryCode: '+93',
+            countryCode: guessCallingCode(),
         },
         resolver: zodResolver(
             z

packages/mask/dashboard/pages/SetupPersona/CloudBackup/PhoneForm.tsx

@@ -1,16 +1,14 @@
-import { memo, useCallback, useMemo, useState } from 'react'
+import { memo, useCallback } from 'react'
 import { useDashboardI18N } from '../../../locales/i18n_generated.js'
 import { UserContext, useLanguage } from '../../../../shared-ui/index.js'
 import { CloudBackupFormContext } from '../../../contexts/CloudBackupFormContext.js'
-import { Box, TextField, Typography } from '@mui/material'
+import { Box, TextField } from '@mui/material'
 import { Controller } from 'react-hook-form'
-import { Icons } from '@masknet/icons'
-import { CountryCodePicker } from '../../../components/CountryCodePicker/index.js'
-import REGIONS from '../../../assets/region.json'
+
 import { CountdownButton, makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { AccountType, Scenario, Locale } from '../../../type.js'
 import { sendCode } from '../../../utils/api.js'
-import { COUNTRY_ICON_URL } from '../../../constants.js'
+import { PhoneNumberField } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     send: {
@@ -26,9 +24,6 @@ export const PhoneForm = memo(function PhoneForm() {
     const lang = useLanguage()
     const { showSnackbar } = useCustomSnackbar()
 
-    const [open, setOpen] = useState(false)
-    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-
     const {
         formState: {
             control,
@@ -41,13 +36,6 @@ export const PhoneForm = memo(function PhoneForm() {
 
     const [countryCode, phone] = watch(['countryCode', 'phone'])
 
-    const countryIcon = useMemo(() => {
-        if (!countryCode) return
-        const target = REGIONS.find((x) => x.dial_code === countryCode)
-        if (!target) return
-        return `${COUNTRY_ICON_URL}${target.code.toLowerCase()}.svg`
-    }, [countryCode])
-
     const handleSendVerificationCode = useCallback(async () => {
         const response = await sendCode({
             account: phone,
@@ -69,36 +57,15 @@ export const PhoneForm = memo(function PhoneForm() {
                 control={control}
                 name="phone"
                 render={({ field }) => (
-                    <TextField
+                    <PhoneNumberField
                         {...field}
+                        code={countryCode}
+                        onCodeChange={(code) => setValue('countryCode', code)}
                         onFocus={() => clearErrors('phone')}
                         fullWidth
                         placeholder={t.mobile_number()}
-                        type="tel"
                         error={!!errors.phone?.message}
                         helperText={errors.phone?.message}
-                        InputProps={{
-                            disableUnderline: true,
-                            startAdornment: (
-                                <Typography
-                                    display="flex"
-                                    alignItems="center"
-                                    columnGap="4px"
-                                    style={{ cursor: 'pointer' }}
-                                    onClick={(event) => {
-                                        setAnchorEl(event.currentTarget)
-                                        setOpen(true)
-                                    }}>
-                                    <img src={countryIcon} style={{ width: 16, height: 12 }} />
-                                    <Box
-                                        component="span"
-                                        sx={{ minWidth: 32, textAlign: 'right', whiteSpace: 'nowrap' }}>
-                                        {countryCode}
-                                    </Box>
-                                    <Icons.ArrowDrop size={16} />
-                                </Typography>
-                            ),
-                        }}
                     />
                 )}
             />
@@ -134,15 +101,6 @@ export const PhoneForm = memo(function PhoneForm() {
                     />
                 )}
             />
-            <CountryCodePicker
-                open={open}
-                code={countryCode}
-                anchorEl={anchorEl}
-                onClose={(code) => {
-                    if (code) setValue('countryCode', code)
-                    setOpen(false)
-                }}
-            />
         </Box>
     )
 })

packages/shared-base-ui/src/index.ts

@@ -2,4 +2,7 @@ export * from './bom/index.js'
 export * from './data/index.js'
 export * from './components/index.js'
 export * from './hooks/index.js'
+
 export { addShareBaseI18N, languages } from './locales/languages.js'
+
+export { default as COUNTRIES } from './country-data.json'

packages/shared/package.json

@@ -46,6 +46,7 @@
     "bignumber.js": "9.1.1",
     "d3": "^5.16.0",
     "date-fns": "^2.30.0",
+    "fuse.js": "6.6.2",
     "iframe-resizer-react": "^1.1.0",
     "immer": "^10.0.2",
     "json-stable-stringify": "^1.0.2",

packages/mask/dashboard/components/CountryCodePicker/index.tsx → packages/shared/src/UI/components/CountryCodePicker/index.tsx

@@ -1,12 +1,12 @@
 import { List, ListItemButton, ListItemIcon, ListItemText, Popover, TextField, Typography } from '@mui/material'
 import { memo, useDeferredValue, useMemo, useState } from 'react'
-import { useDashboardI18N } from '../../locales/i18n_generated.js'
+
 import { Icons } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import Fuse from 'fuse.js'
-
-import REGIONS from '../../assets/region.json'
-import { COUNTRY_ICON_URL } from '../../constants.js'
+import { useSharedI18N } from '../../../index.js'
+import { COUNTRIES } from '@masknet/shared-base-ui'
+import { getCountryFlag } from '../../../utils/getCountryFlag.js'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -62,20 +62,20 @@ export interface CountryCodePickerProps {
 }
 
 export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl, onClose, code }) => {
-    const t = useDashboardI18N()
+    const t = useSharedI18N()
     const { classes } = useStyles()
     const [query, setQuery] = useState('')
     const deferredQuery = useDeferredValue(query)
 
     const regions = useMemo(() => {
-        if (!deferredQuery) return REGIONS
-        const fuse = new Fuse(REGIONS, {
+        if (!deferredQuery) return COUNTRIES
+        const fuse = new Fuse(COUNTRIES, {
             shouldSort: false,
             isCaseSensitive: false,
             threshold: 0.45,
             minMatchCharLength: 1,
             findAllMatches: true,
-            keys: ['name'],
+            keys: ['country_region', 'iso_code', 'dialing_code'],
         })
 
         const filtered = fuse.search(deferredQuery)
@@ -106,26 +106,27 @@ export const CountryCodePicker = memo<CountryCodePickerProps>(({ open, anchorEl,
             />
             <List className={classes.list} data-hide-scrollbar>
                 {regions.map((data) => {
-                    const selected = data.dial_code === code
-                    const icon = `${COUNTRY_ICON_URL}${code.toLowerCase()}.svg`
+                    const selected = data.dialing_code === code
+                    const icon = getCountryFlag(data.iso_code)
+
                     return (
                         <ListItemButton
                             onClick={() => {
-                                onClose(data.dial_code)
+                                onClose(data.dialing_code)
                             }}
-                            key={data.code}
+                            key={data.iso_code}
                             className={classes.listItem}
                             autoFocus={selected}
                             selected={selected}>
                             <ListItemIcon className={classes.listItemIcon}>
                                 <img src={icon} className={classes.icon} />
                             </ListItemIcon>
                             <ListItemText
-                                primary={data.name}
+                                primary={data.country_region}
                                 className={classes.text}
                                 classes={{ primary: classes.primaryText }}
                             />
-                            <Typography className={classes.primaryText}>{data.dial_code}</Typography>
+                            <Typography className={classes.primaryText}>+{data.dialing_code}</Typography>
                         </ListItemButton>
                     )
                 })}

packages/shared/src/UI/components/PhoneNumberField/index.tsx

@@ -0,0 +1,55 @@
+import { useMemo, useState } from 'react'
+import { Button, TextField, type FilledTextFieldProps, Typography, ClickAwayListener } from '@mui/material'
+import { COUNTRIES } from '@masknet/shared-base-ui'
+import { getCountryFlag, useSharedI18N } from '../../../index.js'
+import { Icons } from '@masknet/icons'
+import { CountryCodePicker } from '../CountryCodePicker/index.js'
+
+export interface PhoneNumberFieldProps extends Omit<FilledTextFieldProps, 'variant'> {
+    code: string
+    onCodeChange: (code: string) => void
+}
+
+export function PhoneNumberField({ code, onCodeChange, ...rest }: PhoneNumberFieldProps) {
+    const t = useSharedI18N()
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+    const countryIcon = useMemo(() => {
+        if (!code) return
+        const country = COUNTRIES.find((x) => x.dialing_code === code)
+        if (!country) return
+        return getCountryFlag(country.iso_code)
+    }, [code])
+
+    return (
+        <>
+            <TextField
+                placeholder={t.mobile_number()}
+                type="tel"
+                {...rest}
+                InputProps={{
+                    ...rest.InputProps,
+                    disableUnderline: true,
+                    startAdornment: (
+                        <Button variant="text" onClick={(event) => setAnchorEl(event.currentTarget)}>
+                            <img src={countryIcon} style={{ width: 16, height: 12 }} />
+                            <Typography component="span">+{code}</Typography>
+                            <Icons.ArrowDrop size={16} />
+                        </Button>
+                    ),
+                }}
+            />
+            <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
+                <CountryCodePicker
+                    open={!!anchorEl}
+                    anchorEl={anchorEl}
+                    code={code}
+                    onClose={(code) => {
+                        if (code) onCodeChange(code)
+                        setAnchorEl(null)
+                    }}
+                />
+            </ClickAwayListener>
+        </>
+    )
+}

packages/shared/src/UI/components/index.ts

@@ -92,3 +92,5 @@ export * from './WalletStatusBox/index.js'
 export * from './SearchResultInspector/index.js'
 export * from './ClickableChip/index.js'
 export * from './CompositionDialog/index.js'
+export * from './PhoneNumberField/index.js'
+export * from './CountryCodePicker/index.js'

packages/shared/src/locales/en-US.json

@@ -1,5 +1,6 @@
 {
     "send": "Send",
+    "search_area": "Search Area",
     "approve": "Approve",
     "operation": "Operation",
     "approve_mask": "Approve MASK?",
@@ -32,6 +33,7 @@
     "select_collectibles": "Select Collectibles",
     "no_collectible_found": "No collectible found.",
     "manage_token_list": "Manage Token List",
+    "mobile_number": "Mobile Number",
     "token_list_loading": "Loading",
     "erc20_token_list_placeholder": "Name or Contract address e.g. USDC or 0x234...",
     "erc20_token_list_loading": "Loading token lists...",

packages/shared/src/utils/getCountryFlag.ts

@@ -0,0 +1 @@
+export const getCountryFlag = (code: string) => `http://purecatamphetamine.github.io/country-flag-icons/3x2/${code}.svg`

packages/shared/src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './addressSorter.js'
 export * from './resolveNextIDPlatform.js'
 export * from './resolveValueToSearch.js'
 export * from './identifierSelector.js'
+export * from './getCountryFlag.js'