[Wallet] Add spinner, timer, and tip text to Verification input screen

packages/mobile/locales/en-US/nuxVerification2.json

@@ -58,7 +58,8 @@
     "codeHeader3": "Third Code",
     "codesMissing": "I didn’t receive three codes",
     "tip": "Typing? Try copying and pasting the code.",
-    "codeAccepted": "Accepted"
+    "codeAccepted": "Accepted",
+    "sendingCodes": "Sending verification codes..."
   },
   "missingCodesModal": {
     "header": "Missing Codes?",

packages/mobile/locales/es-419/nuxVerification2.json

@@ -58,7 +58,8 @@
     "codeHeader3": "~~Third Code",
     "codesMissing": "~~I didn’t receive three codes",
     "tip": "~~Typing? Try copying and pasting the code.",
-    "codeAccepted": "Aceptado"
+    "codeAccepted": "Aceptado",
+    "sendingCodes": "~~Sending verification codes..."
   },
   "missingCodesModal": {
     "header": "~~Missing Codes?",

packages/mobile/src/verify/VerificationCodeRow.test.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import 'react-native'
+import { render } from 'react-native-testing-library'
+import VerificationCodeRow from 'src/verify/VerificationCodeRow'
+import { mockAttestationMessage } from 'test/values'
+
+describe('VerificationCodeRow', () => {
+  it('renders correctly when input enabled', () => {
+    const { toJSON } = render(
+      <VerificationCodeRow
+        index={0}
+        attestationCodes={[]}
+        isInputEnabled={true}
+        inputValue={'test'}
+        onInputChange={jest.fn()}
+        isCodeSubmitting={false}
+        isCodeAccepted={false}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+  it('renders correctly when input disabled', () => {
+    const { toJSON } = render(
+      <VerificationCodeRow
+        index={0}
+        attestationCodes={[]}
+        isInputEnabled={false}
+        inputValue={'test'}
+        onInputChange={jest.fn()}
+        isCodeSubmitting={false}
+        isCodeAccepted={false}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+  it('renders correctly when submitting', () => {
+    const { toJSON } = render(
+      <VerificationCodeRow
+        index={0}
+        attestationCodes={[]}
+        isInputEnabled={true}
+        inputValue={'test'}
+        onInputChange={jest.fn()}
+        isCodeSubmitting={true}
+        isCodeAccepted={false}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+  it('renders correctly when code received', () => {
+    const { toJSON } = render(
+      <VerificationCodeRow
+        index={0}
+        attestationCodes={[mockAttestationMessage]}
+        isInputEnabled={true}
+        inputValue={'test'}
+        onInputChange={jest.fn()}
+        isCodeSubmitting={false}
+        isCodeAccepted={false}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+  it('renders correctly when code accepted', () => {
+    const { toJSON } = render(
+      <VerificationCodeRow
+        index={0}
+        attestationCodes={[mockAttestationMessage]}
+        isInputEnabled={true}
+        inputValue={'test'}
+        onInputChange={jest.fn()}
+        isCodeSubmitting={false}
+        isCodeAccepted={true}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

packages/mobile/src/verify/VerificationCodeRow.tsx

@@ -0,0 +1,154 @@
+import TextInput from '@celo/react-components/components/TextInput'
+import withTextInputPasteAware from '@celo/react-components/components/WithTextInputPasteAware'
+import Checkmark from '@celo/react-components/icons/Checkmark'
+import colors from '@celo/react-components/styles/colors'
+import fontStyles from '@celo/react-components/styles/fonts'
+import { stripHexLeader } from '@celo/utils/src/signatureUtils'
+import { extractAttestationCodeFromMessage } from '@celo/walletkit'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import i18n, { Namespaces } from 'src/i18n'
+import { ATTESTATION_CODE_PLACEHOLDER } from 'src/identity/reducer'
+import { AttestationCode } from 'src/identity/verification'
+import Logger from 'src/utils/Logger'
+
+const TAG = 'VerificationCodeRow'
+
+export const CODE_INPUT_PLACEHOLDER = '<#> m9oASm/3g7aZ...'
+
+const CodeInput = withTextInputPasteAware(TextInput)
+
+interface OwnProps {
+  index: number // index of code in attestationCodes array
+  attestationCodes: AttestationCode[] // The codes in the redux store
+  isInputEnabled: boolean // input disabled until previous code is in
+  inputValue: string // the raw code inputed by the user
+  isCodeSubmitting: boolean // is the inputted code being processed
+  isCodeAccepted: boolean // has the code been accepted and completed
+  onInputChange: (value: string) => void
+}
+
+type Props = OwnProps & WithNamespaces
+
+function VerificationCodeRow({
+  index,
+  attestationCodes,
+  isInputEnabled,
+  inputValue,
+  onInputChange,
+  isCodeSubmitting,
+  isCodeAccepted,
+  t,
+}: Props) {
+  if (attestationCodes[index]) {
+    return (
+      <View style={styles.codeContainer}>
+        <Text style={styles.codeValue} numberOfLines={1} ellipsizeMode={'tail'}>
+          {getRecodedAttestationValue(attestationCodes[index], t)}
+        </Text>
+        {isCodeAccepted && (
+          <View style={styles.checkmarkContainer}>
+            <Checkmark height={20} width={20} />
+          </View>
+        )}
+      </View>
+    )
+  }
+
+  if (!isInputEnabled) {
+    return (
+      <View style={styles.codeInputDisabledContainer}>
+        <Text style={styles.codeValue}>{CODE_INPUT_PLACEHOLDER}</Text>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.codeInputContainer}>
+      <CodeInput
+        value={inputValue}
+        placeholder={CODE_INPUT_PLACEHOLDER}
+        shouldShowClipboard={shouldShowClipboard(attestationCodes)}
+        onChangeText={onInputChange}
+        style={styles.codeInput}
+      />
+      {isCodeSubmitting && (
+        <ActivityIndicator size="small" color={colors.celoGreen} style={styles.codeInputSpinner} />
+      )}
+    </View>
+  )
+}
+
+function shouldShowClipboard(attestationCodes: AttestationCode[]) {
+  return (value: string) => {
+    const extractedCode = extractAttestationCodeFromMessage(value)
+    return !!extractedCode && !attestationCodes.find((c) => c.code === extractedCode)
+  }
+}
+
+function getRecodedAttestationValue(attestationCode: AttestationCode, t: i18n.TranslationFunction) {
+  try {
+    if (!attestationCode.code || attestationCode.code === ATTESTATION_CODE_PLACEHOLDER) {
+      return t('input.codeAccepted')
+    }
+    return Buffer.from(stripHexLeader(attestationCode.code), 'hex').toString('base64')
+  } catch (error) {
+    Logger.warn(TAG, 'Could not recode verification code to base64')
+    return t('input.codeAccepted')
+  }
+}
+
+const styles = StyleSheet.create({
+  codeContainer: {
+    justifyContent: 'center',
+    marginVertical: 5,
+    paddingHorizontal: 10,
+    backgroundColor: colors.darkLightest,
+    borderRadius: 3,
+    height: 50,
+  },
+  checkmarkContainer: {
+    backgroundColor: colors.darkLightest,
+    position: 'absolute',
+    top: 3,
+    right: 3,
+    padding: 10,
+  },
+  codeInputContainer: {
+    position: 'relative',
+  },
+  codeInput: {
+    flex: 0,
+    backgroundColor: '#FFF',
+    borderColor: colors.inputBorder,
+    borderRadius: 3,
+    borderWidth: 1,
+    height: 50,
+    marginVertical: 5,
+  },
+  codeInputSpinner: {
+    backgroundColor: '#FFF',
+    position: 'absolute',
+    top: 9,
+    right: 3,
+    padding: 10,
+  },
+  codeInputDisabledContainer: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    marginVertical: 5,
+    borderColor: colors.inputBorder,
+    borderRadius: 3,
+    borderWidth: 1,
+    height: 50,
+    backgroundColor: '#F0F0F0',
+  },
+  codeValue: {
+    ...fontStyles.body,
+    fontSize: 15,
+    color: colors.darkSecondary,
+  },
+})
+
+export default withNamespaces(Namespaces.nuxVerification2)(VerificationCodeRow)

packages/mobile/src/verify/VerificationInputScreen.test.tsx

@@ -1,27 +1,27 @@
 import * as React from 'react'
 import 'react-native'
+import { render } from 'react-native-testing-library'
 import { Provider } from 'react-redux'
-import * as renderer from 'react-test-renderer'
 import VerificationInputScreen from 'src/verify/VerificationInputScreen'
 import { createMockStore } from 'test/utils'
 
 describe('VerificationInputScreen', () => {
   const store = createMockStore({})
 
   it('renders correctly', () => {
-    const tree = renderer.create(
+    const { toJSON, queryByTestId } = render(
       <Provider store={store}>
         <VerificationInputScreen />
       </Provider>
     )
-    expect(tree).toMatchSnapshot()
-  })
+    expect(toJSON()).toMatchSnapshot()
+    expect(queryByTestId('noTypeTip')).toBeFalsy()
 
-  it('enables button after timer', () => {
-    // TODO
+    // TODO find way to simulate keyboard showing
+    // expect(queryByTestId('noTypeTip')).toBeTruthy()
   })
 
-  it('shows tip when typing', () => {
+  it('enables button after timer', () => {
     // TODO
   })
 })