[wallet] Added native phone picker

packages/mobile/src/i18n.ts

@@ -1,6 +1,4 @@
 import locales from '@celo/mobile/locales'
-import en_US from '@celo/mobile/locales/en.json'
-import es_LA from '@celo/mobile/locales/es.json'
 import { currencyTranslations } from '@celo/utils/src/currencies'
 // @ts-ignore
 import i18n from 'i18next'
@@ -28,11 +26,9 @@ export enum Namespaces {
 
 const availableResources = {
   'en-US': {
-    common: en_US,
     ...locales.enUS,
   },
   'es-419': {
-    common: es_LA,
     ...locales.es_419,
   },
 }

packages/mobile/src/invite/__snapshots__/JoinCelo.test.tsx.snap

@@ -340,6 +340,7 @@ exports[`JoinCeloScreen renders correctly 1`] = `
                 "width": 60,
               }
             }
+            testID="contryCodeText"
           >
             +1
           </Text>
@@ -866,6 +867,7 @@ exports[`JoinCeloScreen renders with an error 1`] = `
                 "width": 60,
               }
             }
+            testID="contryCodeText"
           >
             +1
           </Text>

packages/mobile/src/verify/__snapshots__/Verify.test.tsx.snap

@@ -2603,6 +2603,7 @@ exports[`renders the Input step correctly 1`] = `
                 "width": 60,
               }
             }
+            testID="contryCodeText"
           >
 
           </Text>

packages/react-components/__mocks__/country-data.js

@@ -1,8 +1,9 @@
 export default (CountryData = {
   callingCountries: {
     all: [
-      { name: 'USA', countryCallingCodes: ['1'], alpha2: 'US' },
-      { name: 'UK', countryCallingCodes: ['33'], alpha2: 'GB' },
+      { name: 'USA', countryCallingCodes: ['+1'], alpha2: 'US' },
+      { name: 'UK', countryCallingCodes: ['+33'], alpha2: 'GB' },
+      { name: 'Germany', countryCallingCodes: ['+49'], alpha2: 'GE' },
     ],
   },
 })

packages/react-components/components/PhoneNumberInput.test.tsx

@@ -1,10 +1,17 @@
 import PhoneNumberInput from '@celo/react-components/components/PhoneNumberInput'
+import ValidatedTextInput from '@celo/react-components/components/ValidatedTextInput'
 import { shallow } from 'enzyme'
 import * as React from 'react'
 import { Text } from 'react-native'
 import Autocomplete from 'react-native-autocomplete-input'
 import * as renderer from 'react-test-renderer'
 
+jest.mock('@celo/react-native-sms-retriever', () => {
+  return {
+    requestPhoneNumber: jest.fn(() => '+49030111111'),
+  }
+})
+
 describe('PhoneNumberInput', () => {
   it('renders correctly with minimum props', () => {
     const tree = renderer.create(
@@ -97,4 +104,30 @@ describe('PhoneNumberInput', () => {
       )
     })
   })
+
+  describe('Native phone picker', () => {
+    it('can read phone', async () => {
+      const wrapper = shallow<PhoneNumberInput>(
+        <PhoneNumberInput
+          setE164Number={jest.fn()}
+          setCountryCode={jest.fn()}
+          setIsValidNumber={jest.fn()}
+        />
+      )
+
+      await wrapper.instance().triggerPhoneNumberRequest()
+
+      wrapper.instance().setState({})
+
+      expect(wrapper.find(ValidatedTextInput).props().value).toEqual('030 111111')
+
+      expect(wrapper.instance().state.countryCallingCode).toEqual('+49')
+      expect(
+        wrapper.findWhere((node) => node.prop('testID') === 'contryCodeText').props().children
+      ).toBe('+49')
+      expect(
+        wrapper.findWhere((node) => node.prop('testID') === 'CountryNameField').props().defaultValue
+      ).toBe('Germany')
+    })
+  })
 })

packages/react-components/components/PhoneNumberInput.tsx

@@ -3,13 +3,16 @@ import ValidatedTextInput, {
   PhoneValidatorProps,
 } from '@celo/react-components/components/ValidatedTextInput'
 import colors from '@celo/react-components/styles/colors'
+import SmsRetriever from '@celo/react-native-sms-retriever'
 import { Countries } from '@celo/utils/src/countries'
 import { ValidatorKind } from '@celo/utils/src/inputValidation'
 import { getRegionCodeFromCountryCode, parsePhoneNumber } from '@celo/utils/src/phoneNumbers'
 import * as React from 'react'
 import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import Autocomplete from 'react-native-autocomplete-input'
 
+const TAG = 'PhoneNumberInput'
+
 interface Props {
   style?: any
   defaultCountry?: string | null
@@ -35,6 +38,7 @@ interface State {
   regionCode: string
   phoneNumber: string
   countries: Countries
+  country?: string
 }
 
 export default class PhoneNumberInput extends React.Component<Props, State> {
@@ -65,6 +69,37 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
     }
   }
 
+  async triggerPhoneNumberRequest() {
+    try {
+      const phone = await SmsRetriever.requestPhoneNumber()
+      const phoneNumber = parsePhoneNumber(phone, '')
+
+      if (phoneNumber) {
+        this.setState({
+          phoneNumber: phoneNumber.displayNumber.toString(),
+        })
+        if (phoneNumber.countryCode) {
+          // TODO known issue, the country code is not enough to
+          // get a country, e.g. +1 could be USA or Canada
+          const displayName = this.state.countries.getCountryByPhoneCountryCode(
+            '+' + phoneNumber.countryCode.toString()
+          ).displayName
+
+          this.onChangeCountryQuery(displayName)
+        }
+      }
+    } catch (error) {
+      console.debug(`${TAG}/Could not request phone`)
+    }
+  }
+
+  onCountryFocus = async () => {
+    if (this.props.onInputFocus) {
+      await this.props.onInputFocus()
+    }
+    await this.triggerPhoneNumberRequest()
+  }
+
   onChangeCountryQuery = (countryQuery: string) => {
     if (this.props.onInputChange) {
       this.props.onInputChange()
@@ -156,7 +191,7 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
       {...props}
       value={this.state.countryQuery}
       underlineColorAndroid="transparent"
-      onFocus={this.props.onInputFocus}
+      onFocus={this.onCountryFocus}
       placeholderTextColor={colors.inactive}
     />
   )
@@ -197,7 +232,9 @@ export default class PhoneNumberInput extends React.Component<Props, State> {
           </View>
         )}
         <View style={[style.phoneNumberContainer, style.borderedBox]}>
-          <Text style={style.phoneCountryCode}>{countryCallingCode}</Text>
+          <Text style={style.phoneCountryCode} testID={'contryCodeText'}>
+            {countryCallingCode}
+          </Text>
           <View style={style.line} />
           <ValidatedTextInput<PhoneValidatorProps>
             style={[style.inputBox, style.phoneNumberInput]}

packages/react-components/components/__snapshots__/PhoneNumberInput.test.tsx.snap

@@ -77,8 +77,9 @@ exports[`PhoneNumberInput renders correctly with minimum props 1`] = `
           "width": 60,
         }
       }
+      testID="contryCodeText"
     >
-      1
+      +1
     </Text>
     <View
       style={
@@ -112,7 +113,7 @@ exports[`PhoneNumberInput renders correctly with minimum props 1`] = `
     >
       <TextInput
         allowFontScaling={true}
-        countryCallingCode="1"
+        countryCallingCode="+1"
         keyboardType="phone-pad"
         onBlur={[Function]}
         onChangeText={[Function]}

packages/react-components/index.d.ts

@@ -5,3 +5,5 @@ declare module '@umpirsky/country-list/data/es_AR/country.json' {
   const value: { [countryCode: string]: string }
   export default value
 }
+
+declare module '@celo/react-native-sms-retriever'

packages/react-components/package.json

@@ -14,7 +14,8 @@
     "test:watch": "export TZ=UTC && jest --watch"
   },
   "dependencies": {
-    "@celo/utils": "^0.1.0",
+    "@celo/react-native-sms-retriever": "git+https://github.com/celo-org/react-native-sms-retriever#d3a2fdb",
+    "@celo/utils": "^0.1.1",
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.14",
     "react-native-autocomplete-input": "^4.1.0",

packages/verifier/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap

@@ -79,6 +79,7 @@ exports[`PhoneNumberInput when defaultCountry renders defaults 1`] = `
           "width": 60,
         }
       }
+      testID="contryCodeText"
     >
       +54
     </Text>
@@ -339,6 +340,7 @@ exports[`PhoneNumberInput when no defaultCountry renders AutoComplete 1`] = `
           "width": 60,
         }
       }
+      testID="contryCodeText"
     >
 
     </Text>

packages/verifier/src/index.d.ts

@@ -10,3 +10,4 @@ declare module 'react-native-restart-android'
 declare module 'react-native-platform-touchable'
 declare module 'web3-utils'
 declare module 'redux-persist/lib/stateReconciler/autoMergeLevel2'
+declare module '@celo/react-native-sms-retriever'