wallet-stack 1.0.0-alpha.121

package/src/verify/VerificationCodeInput.test.tsx

@@ -0,0 +1,87 @@
+import Clipboard from '@react-native-clipboard/clipboard'
+import { act, fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { PhoneNumberVerificationStatus } from 'src/verify/hooks'
+import VerificationCodeInputWrapper from 'src/verify/VerificationCodeInput'
+
+jest.mock('@react-native-clipboard/clipboard')
+jest.mock('src/utils/IosVersionUtils')
+
+describe('VerificationCodeInputWrapper', () => {
+  const mockOnSuccess = jest.fn()
+  const mockOnResendSms = jest.fn()
+  const mockSetSmsCode = jest.fn()
+  const mockPhoneNumber = '+15555555555'
+
+  const renderComponent = (
+    verificationStatus = PhoneNumberVerificationStatus.NONE,
+    showResend = true
+  ) =>
+    render(
+      <VerificationCodeInputWrapper
+        phoneNumber={mockPhoneNumber}
+        verificationStatus={verificationStatus}
+        onSuccess={mockOnSuccess}
+        onResendSms={showResend ? mockOnResendSms : undefined}
+        setSmsCode={mockSetSmsCode}
+      />
+    )
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.mocked(Clipboard.getString).mockResolvedValue('')
+    jest.mocked(Clipboard.hasString).mockResolvedValue(false)
+  })
+
+  it('displays the correct components', () => {
+    const { getByText, getByTestId } = renderComponent()
+
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${mockPhoneNumber}"}`)
+    ).toBeTruthy()
+    expect(getByTestId('PhoneVerificationResendSmsBtn')).toBeDisabled()
+  })
+
+  it('hides resend button if onResendSms is not set', () => {
+    const { getByText, queryByTestId } = renderComponent(PhoneNumberVerificationStatus.NONE, false)
+
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${mockPhoneNumber}"}`)
+    ).toBeTruthy()
+    expect(queryByTestId('PhoneVerificationResendSmsBtn')).toBeFalsy()
+  })
+
+  it('invokes setSmsCode if code is set', async () => {
+    const { getByText, getByTestId } = renderComponent()
+
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${mockPhoneNumber}"}`)
+    ).toBeTruthy()
+    await act(() => {
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+    expect(mockSetSmsCode).toHaveBeenCalledWith('123456')
+  })
+
+  it('displays tick mark and invokes onSuccess if verification status is success', () => {
+    const { getByText, getByTestId } = renderComponent(PhoneNumberVerificationStatus.SUCCESSFUL)
+
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${mockPhoneNumber}"}`)
+    ).toBeTruthy()
+    expect(getByTestId('PhoneVerificationCode/CheckIcon')).toBeTruthy()
+    jest.runOnlyPendingTimers()
+    expect(mockOnSuccess).toHaveBeenCalledWith()
+  })
+
+  it('displays error icon verification status is failed', () => {
+    const { getByText, getByTestId } = renderComponent(PhoneNumberVerificationStatus.FAILED)
+
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${mockPhoneNumber}"}`)
+    ).toBeTruthy()
+    expect(getByTestId('PhoneVerificationCode/ErrorIcon')).toBeTruthy()
+  })
+
+  it.todo('reads SMS code on Android automatically')
+})

package/src/verify/VerificationCodeInput.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState, type JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import CodeInput, { CodeInputStatus } from 'src/components/CodeInput'
+import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
+import KeyboardSpacer from 'src/components/KeyboardSpacer'
+import { PHONE_NUMBER_VERIFICATION_CODE_LENGTH } from 'src/config'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import ResendButtonWithDelay from 'src/verify/ResendButtonWithDelay'
+import { PhoneNumberVerificationStatus } from 'src/verify/hooks'
+
+interface Props {
+  phoneNumber: string
+  verificationStatus: PhoneNumberVerificationStatus
+  setSmsCode: (code: string) => void
+  onResendSms?: () => void
+  onSuccess: () => void
+  containerStyle?: StyleProp<ViewStyle>
+  title?: JSX.Element
+}
+
+function VerificationCodeInput({
+  phoneNumber,
+  verificationStatus,
+  setSmsCode,
+  onResendSms,
+  onSuccess,
+  containerStyle,
+  title,
+}: Props) {
+  const [code, setCode] = useState('')
+  const [codeInputStatus, setCodeInputStatus] = useState(CodeInputStatus.Inputting)
+
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (code.length === PHONE_NUMBER_VERIFICATION_CODE_LENGTH) {
+      setCodeInputStatus(CodeInputStatus.Processing)
+      setSmsCode(code)
+    } else {
+      setCodeInputStatus(CodeInputStatus.Inputting)
+    }
+  }, [code])
+
+  useEffect(() => {
+    if (verificationStatus === PhoneNumberVerificationStatus.SUCCESSFUL) {
+      setCodeInputStatus(CodeInputStatus.Accepted)
+      setTimeout(onSuccess, 500)
+    } else if (verificationStatus === PhoneNumberVerificationStatus.FAILED) {
+      setCodeInputStatus(CodeInputStatus.Error)
+    }
+  }, [verificationStatus])
+
+  return (
+    <>
+      <KeyboardAwareScrollView
+        style={[styles.scrollContainer, containerStyle]}
+        keyboardShouldPersistTaps="always"
+      >
+        {title}
+        <Text style={styles.body}>{t('phoneVerificationInput.description', { phoneNumber })}</Text>
+        <CodeInput
+          autoFocus
+          status={codeInputStatus}
+          inputValue={code}
+          inputPlaceholder={t('phoneVerificationInput.codeInputPlaceholder')}
+          onInputChange={setCode}
+          testID="PhoneVerificationCode"
+          style={styles.codeInput}
+        />
+      </KeyboardAwareScrollView>
+      {onResendSms && (
+        <View style={styles.resendButtonContainer}>
+          <ResendButtonWithDelay onPress={onResendSms} />
+        </View>
+      )}
+      <KeyboardSpacer />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  scrollContainer: {
+    flex: 1,
+    padding: Spacing.Thick24,
+    width: '100%',
+  },
+  body: {
+    ...typeScale.bodyMedium,
+    marginBottom: Spacing.Thick24,
+    textAlign: 'center',
+  },
+  codeInput: {
+    marginHorizontal: Spacing.Thick24,
+  },
+  resendButtonContainer: {
+    padding: Spacing.Thick24,
+    alignItems: 'center',
+  },
+})
+
+export default VerificationCodeInput

package/src/verify/VerificationCodeInputScreen.test.tsx

@@ -0,0 +1,364 @@
+import * as Keychain from '@divvi/react-native-keychain'
+import { act, fireEvent, render, waitFor, within } from '@testing-library/react-native'
+import { FetchMock } from 'jest-fetch-mock/types'
+import MockDate from 'mockdate'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { showError } from 'src/alert/actions'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { navigate, navigateInitialTab, popToScreen } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { goToNextOnboardingScreen } from 'src/onboarding/steps'
+import { sleep } from 'src/utils/sleep'
+import VerificationCodeInputScreen from 'src/verify/VerificationCodeInputScreen'
+import networkConfig from 'src/web3/networkConfig'
+import MockedNavigator from 'test/MockedNavigator'
+import { createMockStore, getMockStackScreenProps } from 'test/utils'
+import { mockOnboardingProps } from 'test/values'
+
+const mockOnboardingPropsSelector = jest.fn(() => mockOnboardingProps)
+jest.mock('src/onboarding/steps', () => ({
+  goToNextOnboardingScreen: jest.fn(),
+  onboardingPropsSelector: () => mockOnboardingPropsSelector(),
+}))
+
+const mockFetch = fetch as FetchMock
+
+const mockedKeychain = jest.mocked(Keychain)
+mockedKeychain.getGenericPassword.mockResolvedValue({
+  username: 'some username',
+  password: 'someSignedMessage',
+  service: 'some service',
+  storage: Keychain.STORAGE_TYPE.RSA,
+})
+
+const e164Number = '+31619123456'
+const store = createMockStore({
+  web3: {
+    account: '0xabc',
+  },
+})
+
+const renderComponent = ({
+  hasOnboarded = false,
+}: {
+  hasOnboarded?: boolean
+} = {}) =>
+  render(
+    <Provider store={store}>
+      <MockedNavigator
+        component={VerificationCodeInputScreen}
+        params={{
+          countryCallingCode: '+31',
+          e164Number,
+          hasOnboarded,
+        }}
+      />
+    </Provider>
+  )
+
+describe('VerificationCodeInputScreen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockFetch.resetMocks()
+    store.clearActions()
+    MockDate.reset()
+  })
+
+  it('displays the correct components and requests for the verification code on mount', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    const { getByText, getByTestId } = renderComponent()
+
+    expect(getByText('phoneVerificationInput.title')).toBeTruthy()
+    expect(
+      getByText(`phoneVerificationInput.description, {"phoneNumber":"${e164Number}"}`)
+    ).toBeTruthy()
+    expect(getByText('phoneVerificationInput.help')).toBeTruthy()
+    expect(getByTestId('PhoneVerificationCode')).toBeTruthy()
+    expect(getByTestId('PhoneVerificationResendSmsBtn')).toBeDisabled()
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    expect(mockFetch).toHaveBeenCalledWith(`${networkConfig.verifyPhoneNumberUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","clientPlatform":"android","clientVersion":"0.0.1","clientBundleId":"org.celo.mobile.debug"}',
+    })
+  })
+
+  it('displays an error if verification code request fails', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ message: 'something went wrong' }), { status: 500 })
+    renderComponent()
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([showError(ErrorMessages.PHONE_NUMBER_VERIFICATION_FAILURE)])
+    )
+  })
+
+  it('verifies the sms code and navigates to next onboarding screen', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    mockFetch.mockResponseOnce(JSON.stringify({ message: 'OK' }), {
+      status: 200,
+    })
+
+    const { getByTestId } = renderComponent()
+
+    await act(() => {
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifySmsCodeUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","verificationId":"someId","smsCode":"123456","clientPlatform":"android","clientVersion":"0.0.1"}',
+    })
+    expect(getByTestId('PhoneVerificationCode/CheckIcon')).toBeTruthy()
+
+    await act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    expect(goToNextOnboardingScreen).toHaveBeenCalledWith({
+      firstScreenInCurrentStep: Screens.VerificationStartScreen,
+      onboardingProps: mockOnboardingProps,
+    })
+    expect(navigate).not.toHaveBeenCalled()
+    expect(popToScreen).not.toHaveBeenCalled()
+  })
+
+  it('verifies the sms code and navigates to home if not in onboarding and no previous routes found', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    mockFetch.mockResponseOnce(JSON.stringify({ message: 'OK' }), {
+      status: 200,
+    })
+
+    const { getByTestId } = renderComponent({ hasOnboarded: true })
+
+    await act(() => {
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifySmsCodeUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","verificationId":"someId","smsCode":"123456","clientPlatform":"android","clientVersion":"0.0.1"}',
+    })
+    expect(getByTestId('PhoneVerificationCode/CheckIcon')).toBeTruthy()
+
+    await act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    expect(navigateInitialTab).toHaveBeenCalledWith()
+    expect(popToScreen).not.toHaveBeenCalled()
+    expect(goToNextOnboardingScreen).not.toHaveBeenCalled()
+  })
+
+  it('verifies the sms code and navigates to previous route if not in onboarding', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    mockFetch.mockResponseOnce(JSON.stringify({ message: 'OK' }), {
+      status: 200,
+    })
+
+    const screenProps = getMockStackScreenProps(Screens.VerificationCodeInputScreen, {
+      countryCallingCode: '+31',
+      e164Number,
+      hasOnboarded: true,
+    })
+
+    jest.mocked(screenProps.navigation).getState = jest.fn(
+      () =>
+        ({
+          routes: [
+            { name: Screens.ProfileSubmenu },
+            { name: Screens.VerificationStartScreen },
+            { name: Screens.VerificationCodeInputScreen },
+          ],
+        }) as any
+    )
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <VerificationCodeInputScreen {...screenProps} />
+      </Provider>
+    )
+
+    await act(() => {
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifySmsCodeUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","verificationId":"someId","smsCode":"123456","clientPlatform":"android","clientVersion":"0.0.1"}',
+    })
+    expect(getByTestId('PhoneVerificationCode/CheckIcon')).toBeTruthy()
+
+    await act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    expect(popToScreen).toHaveBeenCalledWith(Screens.ProfileSubmenu)
+    expect(navigate).not.toHaveBeenCalled()
+    expect(goToNextOnboardingScreen).not.toHaveBeenCalled()
+  })
+
+  it('waits for the verificationId to be captured before verifying sms', async () => {
+    mockFetch.mockImplementation(async (url?: string | Request) => {
+      if (url === networkConfig.verifyPhoneNumberUrl) {
+        await sleep(1000) // some arbitrary network delay
+        return new Response(JSON.stringify({ data: { verificationId: 'someId' } }))
+      }
+      return new Response(JSON.stringify({ message: 'OK' }))
+    })
+
+    const { getByTestId } = renderComponent()
+
+    await act(() => {
+      // enter the verification code before the verifyPhoneNumber fetch has resolved
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+
+    await act(() => {
+      // handle the verification code, and then increment the timer to resolve
+      // the network delay
+      jest.runOnlyPendingTimers()
+    })
+
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifySmsCodeUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","verificationId":"someId","smsCode":"123456","clientPlatform":"android","clientVersion":"0.0.1"}',
+    })
+    expect(getByTestId('PhoneVerificationCode/CheckIcon')).toBeTruthy()
+  })
+
+  it.todo('reads the SMS code on Android automatically')
+
+  it('handles when phone number already verified', async () => {
+    mockFetch.mockResponse(JSON.stringify({ message: 'Phone number already verified' }), {
+      status: 400,
+    })
+
+    renderComponent()
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    expect(mockFetch).toHaveBeenCalledWith(`${networkConfig.verifyPhoneNumberUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","clientPlatform":"android","clientVersion":"0.0.1","clientBundleId":"org.celo.mobile.debug"}',
+    })
+
+    await act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    await waitFor(() =>
+      expect(goToNextOnboardingScreen).toHaveBeenCalledWith({
+        firstScreenInCurrentStep: Screens.VerificationStartScreen,
+        onboardingProps: mockOnboardingProps,
+      })
+    )
+  })
+
+  it('shows error in verifying sms code', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    mockFetch.mockRejectedValue(JSON.stringify({ message: 'Not OK' }))
+
+    const { getByTestId } = renderComponent()
+
+    await act(() => {
+      fireEvent.changeText(getByTestId('PhoneVerificationCode'), '123456')
+    })
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifySmsCodeUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: '{"phoneNumber":"+31619123456","verificationId":"someId","smsCode":"123456","clientPlatform":"android","clientVersion":"0.0.1"}',
+    })
+    expect(getByTestId('PhoneVerificationCode/ErrorIcon')).toBeTruthy()
+    expect(store.getActions()).toEqual(
+      expect.not.arrayContaining([showError(ErrorMessages.PHONE_NUMBER_VERIFICATION_FAILURE)])
+    )
+
+    await act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    expect(navigate).not.toHaveBeenCalled()
+  })
+
+  it('makes a request to resend the sms code and resets the timer', async () => {
+    mockFetch.mockResponse(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    const dateNow = Date.now()
+    MockDate.set(dateNow)
+    const { getByTestId } = renderComponent()
+
+    await act(() => {
+      MockDate.set(dateNow + 30000) // 30 seconds, matching default resend delay time in ResendButtonWithDelay component
+      jest.advanceTimersByTime(1000) // 1 second, to update the timer
+    })
+
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    fireEvent.press(getByTestId('PhoneVerificationResendSmsBtn'))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+
+    expect(mockFetch).toHaveBeenNthCalledWith(2, `${networkConfig.verifyPhoneNumberUrl}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        authorization: `${networkConfig.authHeaderIssuer} 0xabc:someSignedMessage`,
+      },
+      body: `{"phoneNumber":"${e164Number}","clientPlatform":"android","clientVersion":"0.0.1","clientBundleId":"org.celo.mobile.debug"}`,
+    })
+    expect(getByTestId('PhoneVerificationResendSmsBtn')).toBeDisabled()
+  })
+
+  it('shows the help dialog', async () => {
+    mockFetch.mockResponseOnce(JSON.stringify({ data: { verificationId: 'someId' } }), {
+      status: 200,
+    })
+    const { getByTestId, getByText } = renderComponent()
+
+    await act(() => {
+      fireEvent.press(getByText('phoneVerificationInput.help'))
+    })
+    await waitFor(() => expect(getByTestId('PhoneVerificationInputHelpDialog')).toBeTruthy())
+    const HelpDialog = getByTestId('PhoneVerificationInputHelpDialog')
+    expect(within(HelpDialog).getByText('phoneVerificationInput.helpDialog.title')).toBeTruthy()
+    expect(within(HelpDialog).getByText('phoneVerificationInput.helpDialog.body')).toBeTruthy()
+  })
+})

package/src/verify/VerificationCodeInputScreen.tsx

@@ -0,0 +1,138 @@
+import { useHeaderHeight } from '@react-navigation/elements'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React, { useLayoutEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { PhoneVerificationEvents } from 'src/analytics/Events'
+import BackButton from 'src/components/BackButton'
+import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
+import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import { HeaderTitleWithSubtitle } from 'src/navigator/Headers'
+import { navigateInitialTab, popToScreen } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { TopBarTextButton } from 'src/navigator/TopBarButton'
+import { StackParamList } from 'src/navigator/types'
+import { goToNextOnboardingScreen, onboardingPropsSelector } from 'src/onboarding/steps'
+import { useSelector } from 'src/redux/hooks'
+import colors from 'src/styles/colors'
+import { Spacing } from 'src/styles/styles'
+import { useVerifyPhoneNumber } from 'src/verify/hooks'
+import VerificationCodeInput from 'src/verify/VerificationCodeInput'
+
+function VerificationCodeInputScreen({
+  route,
+  navigation,
+}: NativeStackScreenProps<StackParamList, Screens.VerificationCodeInputScreen>) {
+  const infoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+
+  const { t } = useTranslation()
+  const headerHeight = useHeaderHeight()
+  const { resendSms, setSmsCode, verificationStatus } = useVerifyPhoneNumber(
+    route.params.e164Number,
+    route.params.countryCallingCode
+  )
+  const onboardingProps = useSelector(onboardingPropsSelector)
+
+  const onResendSms = () => {
+    AppAnalytics.track(PhoneVerificationEvents.phone_verification_resend_message)
+    resendSms()
+  }
+
+  const onPressHelp = () => {
+    AppAnalytics.track(PhoneVerificationEvents.phone_verification_input_help)
+    infoBottomSheetRef.current?.snapToIndex(0)
+  }
+
+  const onPressHelpDismiss = () => {
+    AppAnalytics.track(PhoneVerificationEvents.phone_verification_input_help_continue)
+    infoBottomSheetRef.current?.close()
+  }
+
+  useLayoutEffect(() => {
+    const registrationStep = route.params.registrationStep
+    const title = registrationStep
+      ? () => (
+          <HeaderTitleWithSubtitle
+            title={t('phoneVerificationInput.title')}
+            subTitle={t('registrationSteps', {
+              step: registrationStep.step,
+              totalSteps: registrationStep.totalSteps,
+            })}
+          />
+        )
+      : t('phoneVerificationInput.title')
+
+    navigation.setOptions({
+      headerTitle: title,
+      headerRight: () => (
+        <TopBarTextButton
+          title={t('phoneVerificationInput.help')}
+          testID="PhoneVerificationHelpHeader"
+          onPress={onPressHelp}
+          titleStyle={{ color: colors.navigationTopPrimary }}
+        />
+      ),
+      headerLeft: () => <BackButton color={colors.navigationTopPrimary} />,
+      headerTransparent: true,
+    })
+  }, [navigation, route.params])
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <VerificationCodeInput
+        phoneNumber={route.params.e164Number}
+        verificationStatus={verificationStatus}
+        setSmsCode={setSmsCode}
+        onResendSms={onResendSms}
+        onSuccess={() => {
+          if (route.params.hasOnboarded) {
+            const routes = navigation.getState().routes
+            // if not from onboarding, go back to the screen where phone
+            // verification was started, which is 2 screens back. If no screen
+            // is found, go to home screen
+            const prevRoute = routes[routes.length - 3]
+            if (prevRoute?.name) {
+              popToScreen(prevRoute.name)
+            } else {
+              navigateInitialTab()
+            }
+          } else {
+            // if onboarding, continue with the next onboarding screen
+            goToNextOnboardingScreen({
+              firstScreenInCurrentStep: Screens.VerificationStartScreen,
+              onboardingProps,
+            })
+          }
+        }}
+        containerStyle={{ marginTop: headerHeight }}
+      />
+      <BottomSheet
+        forwardedRef={infoBottomSheetRef}
+        title={t('phoneVerificationInput.helpDialog.title')}
+        description={t('phoneVerificationInput.helpDialog.body')}
+        testId="PhoneVerificationInputHelpDialog"
+      >
+        <Button
+          text={t('dismiss')}
+          onPress={onPressHelpDismiss}
+          size={BtnSizes.FULL}
+          type={BtnTypes.SECONDARY}
+          style={styles.dismissHelpButton}
+        />
+      </BottomSheet>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  dismissHelpButton: {
+    marginTop: Spacing.Thick24,
+  },
+})
+
+export default VerificationCodeInputScreen