wallet-stack 1.0.0-alpha.121

package/src/send/SelectRecipientButtons.test.tsx

@@ -0,0 +1,256 @@
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native'
+import * as React from 'react'
+import { Platform } from 'react-native'
+import { RESULTS, check, request } from 'react-native-permissions'
+import { Provider } from 'react-redux'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import { getAppConfig } from 'src/appConfig'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import SelectRecipientButtons from 'src/send/SelectRecipientButtons'
+import { getDynamicConfigParams } from 'src/statsig'
+import { navigateToPhoneSettings } from 'src/utils/linking'
+import { createMockStore } from 'test/utils'
+
+jest.mock('src/statsig')
+
+function renderComponent(phoneNumberVerified: boolean = false, defaultTokenIdOverride?: string) {
+  const onPermissionsGranted = jest.fn()
+  const tree = render(
+    <Provider store={createMockStore({ app: { phoneNumberVerified } })}>
+      <SelectRecipientButtons
+        onContactsPermissionGranted={onPermissionsGranted}
+        defaultTokenIdOverride={defaultTokenIdOverride}
+      />
+    </Provider>
+  )
+  return { ...tree, onPermissionsGranted }
+}
+
+describe('SelectRecipientButtons', () => {
+  const defaultAppConfig = {
+    displayName: 'Test App',
+    deepLinkUrlScheme: 'testapp',
+    registryName: 'test',
+  }
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.mocked(check).mockResolvedValue(RESULTS.DENIED)
+    jest.mocked(getDynamicConfigParams).mockReturnValue({
+      showBalances: ['celo-alfajores'],
+      jumpstartContracts: {},
+    })
+    jest.mocked(getAppConfig).mockReturnValue({
+      ...defaultAppConfig,
+      experimental: {
+        phoneNumberVerification: true,
+      },
+    })
+  })
+
+  it('does not render the contacts button if phone number verification is disabled', async () => {
+    jest.mocked(getAppConfig).mockReturnValue(defaultAppConfig)
+    const { queryByTestId } = renderComponent()
+
+    await waitFor(() => expect(queryByTestId('SelectRecipient/Contacts')).toBeFalsy())
+  })
+  it('renders QR and contacts button with no check mark on contacts if phone number is not verified', async () => {
+    const { getByTestId, queryByTestId, findByTestId } = renderComponent()
+    // using findByTestId for first assertion in all tests to ensure rendering is finished after useAsync
+    expect(await findByTestId('SelectRecipient/QR')).toBeTruthy()
+    expect(getByTestId('SelectRecipient/Contacts')).toBeTruthy()
+    expect(queryByTestId('SelectRecipient/Contacts/checkmark')).toBeFalsy()
+    expect(check).toHaveBeenCalledTimes(1)
+  })
+  it('renders QR and contacts button with no check mark on contacts if phone number is verified but contact permission is not granted', async () => {
+    const { getByTestId, queryByTestId, findByTestId } = renderComponent(true)
+    expect(await findByTestId('SelectRecipient/QR')).toBeTruthy()
+    expect(getByTestId('SelectRecipient/Contacts')).toBeTruthy()
+    expect(queryByTestId('SelectRecipient/Contacts/checkmark')).toBeFalsy()
+  })
+  it('renders QR and contacts button with check mark on contacts if phone number is verified and contact permission is granted', async () => {
+    jest.mocked(check).mockResolvedValue(RESULTS.GRANTED)
+
+    const { getByTestId, findByTestId } = renderComponent(true)
+    expect(await findByTestId('SelectRecipient/QR')).toBeTruthy()
+    expect(getByTestId('SelectRecipient/Contacts')).toBeTruthy()
+    expect(getByTestId('SelectRecipient/Contacts/checkmark')).toBeTruthy()
+  })
+  it('navigates to QR screen when QR button is pressed', async () => {
+    const { findByTestId } = renderComponent()
+    fireEvent.press(await findByTestId('SelectRecipient/QR'))
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_scan_qr)
+    expect(navigate).toHaveBeenCalledWith(Screens.QRNavigator, {
+      screen: Screens.QRScanner,
+      params: {
+        defaultTokenIdOverride: undefined,
+      },
+    })
+  })
+  it('navigates to QR screen with an override when QR button is pressed', async () => {
+    const { findByTestId } = renderComponent(false, 'some-token-id')
+    fireEvent.press(await findByTestId('SelectRecipient/QR'))
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_scan_qr)
+    expect(navigate).toHaveBeenCalledWith(Screens.QRNavigator, {
+      screen: Screens.QRScanner,
+      params: {
+        defaultTokenIdOverride: 'some-token-id',
+      },
+    })
+  })
+  it('invokes permissions granted callback when contacts button is pressed with phone verified and contacts permission granted', async () => {
+    jest.mocked(check).mockResolvedValue(RESULTS.GRANTED)
+    const { findByTestId, onPermissionsGranted } = renderComponent(true)
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+      phoneNumberVerified: true,
+      contactsPermissionStatus: RESULTS.GRANTED,
+    })
+    expect(onPermissionsGranted).toHaveBeenCalledWith()
+    expect(check).toHaveBeenCalledTimes(2) // one on load and one when pressing the button
+    expect(request).not.toHaveBeenCalled()
+  })
+
+  it('shows connect phone number modal if phone is not verified', async () => {
+    const { findByTestId, getByTestId, queryByTestId, onPermissionsGranted } =
+      renderComponent(false)
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+      phoneNumberVerified: false,
+      contactsPermissionStatus: RESULTS.DENIED,
+    })
+    expect(onPermissionsGranted).not.toHaveBeenCalled()
+    expect(check).toHaveBeenCalledTimes(2)
+    expect(request).not.toHaveBeenCalled()
+    expect(getByTestId('SelectRecipient/PhoneNumberModal')).toBeVisible()
+
+    await act(() => {
+      fireEvent.press(getByTestId('SelectRecipient/PhoneNumberModal/SecondaryAction'))
+    })
+    await waitFor(() => {
+      expect(queryByTestId('SelectRecipient/PhoneNumberModal')).not.toBeOnTheScreen()
+    })
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(getByTestId('SelectRecipient/PhoneNumberModal')).toBeVisible()
+    await act(() => {
+      fireEvent.press(getByTestId('SelectRecipient/PhoneNumberModal/PrimaryAction'))
+    })
+    await waitFor(() => {
+      expect(queryByTestId('SelectRecipient/PhoneNumberModal')).not.toBeOnTheScreen()
+    })
+    await waitFor(() => {
+      expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, { hasOnboarded: true })
+    })
+  })
+
+  it('shows enable contacts modal if phone verified but contacts permission is blocked', async () => {
+    jest.mocked(check).mockResolvedValue(RESULTS.BLOCKED)
+    const { findByTestId, getByTestId, queryByTestId, onPermissionsGranted } = renderComponent(true)
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+      phoneNumberVerified: true,
+      contactsPermissionStatus: RESULTS.BLOCKED,
+    })
+    expect(onPermissionsGranted).not.toHaveBeenCalled()
+    expect(request).not.toHaveBeenCalled()
+    expect(getByTestId('SelectRecipient/ContactsModal')).toBeVisible()
+
+    await act(() => {
+      fireEvent.press(getByTestId('SelectRecipient/ContactsModal/SecondaryAction'))
+    })
+    await waitFor(() => {
+      expect(queryByTestId('SelectRecipient/ContactsModal')).not.toBeOnTheScreen()
+    })
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(getByTestId('SelectRecipient/ContactsModal')).toBeVisible()
+    await act(() => {
+      fireEvent.press(getByTestId('SelectRecipient/ContactsModal/PrimaryAction'))
+    })
+    expect(navigateToPhoneSettings).toHaveBeenCalled()
+  })
+
+  it('requests permission if phone is verified but contacts permission is denied and invokes callback if request is granted', async () => {
+    jest.mocked(request).mockResolvedValue(RESULTS.GRANTED)
+    const { findByTestId, onPermissionsGranted } = renderComponent(true)
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+      phoneNumberVerified: true,
+      contactsPermissionStatus: RESULTS.DENIED,
+    })
+    expect(request).toHaveBeenCalled()
+    expect(onPermissionsGranted).toHaveBeenCalled()
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.request_contacts_permission_started)
+    expect(AppAnalytics.track).toHaveBeenCalledWith(
+      SendEvents.request_contacts_permission_completed,
+      { permissionStatus: RESULTS.GRANTED }
+    )
+  })
+
+  it('requests permission if phone is verified but contacts permission is denied and does nothing if request is denied', async () => {
+    jest.mocked(request).mockResolvedValue(RESULTS.DENIED)
+    const { findByTestId, queryByTestId, onPermissionsGranted } = renderComponent(true)
+    await act(async () => {
+      fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+      phoneNumberVerified: true,
+      contactsPermissionStatus: RESULTS.DENIED,
+    })
+    expect(request).toHaveBeenCalled()
+    expect(onPermissionsGranted).not.toHaveBeenCalled()
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.request_contacts_permission_started)
+    expect(AppAnalytics.track).toHaveBeenCalledWith(
+      SendEvents.request_contacts_permission_completed,
+      { permissionStatus: RESULTS.DENIED }
+    )
+    expect(queryByTestId('SelectRecipient/ContactsModal')).toBeFalsy()
+  })
+
+  it.each([
+    { os: 'ios' as const, showsModal: false, testName: 'does nothing' },
+    { os: 'android' as const, showsModal: true, testName: 'shows modal' },
+  ])(
+    'requests permission if phone is verified but contacts permission is denied and $testName if request is blocked on $os',
+    async ({ os, showsModal }) => {
+      Platform.OS = os
+      jest.mocked(request).mockResolvedValue(RESULTS.BLOCKED)
+      const { findByTestId, queryByTestId, onPermissionsGranted } = renderComponent(true)
+      await act(async () => {
+        fireEvent.press(await findByTestId('SelectRecipient/Contacts'))
+      })
+      expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_contacts, {
+        phoneNumberVerified: true,
+        contactsPermissionStatus: RESULTS.DENIED,
+      })
+      expect(request).toHaveBeenCalled()
+      expect(onPermissionsGranted).not.toHaveBeenCalled()
+      expect(AppAnalytics.track).toHaveBeenCalledWith(
+        SendEvents.request_contacts_permission_started
+      )
+      expect(AppAnalytics.track).toHaveBeenCalledWith(
+        SendEvents.request_contacts_permission_completed,
+        { permissionStatus: RESULTS.BLOCKED }
+      )
+      if (showsModal) {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(queryByTestId('SelectRecipient/ContactsModal')).toBeTruthy()
+      } else {
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(queryByTestId('SelectRecipient/ContactsModal')).toBeFalsy()
+      }
+    }
+  )
+})

package/src/send/SelectRecipientButtons.tsx

@@ -0,0 +1,202 @@
+import React, { useState } from 'react'
+import { useAsync } from 'react-async-hook'
+import { useTranslation } from 'react-i18next'
+import { Platform } from 'react-native'
+import {
+  RESULTS as PERMISSION_RESULTS,
+  PermissionStatus,
+  check as checkPermission,
+  request as requestPermission,
+} from 'react-native-permissions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import { phoneNumberVerifiedSelector } from 'src/app/selectors'
+import { getAppConfig } from 'src/appConfig'
+import Dialog from 'src/components/Dialog'
+import SelectRecipientButton from 'src/components/SelectRecipientButton'
+import QRCode from 'src/icons/QRCode'
+import Social from 'src/icons/Social'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { useSelector } from 'src/redux/hooks'
+import Logger from 'src/utils/Logger'
+import { CONTACTS_PERMISSION } from 'src/utils/contacts'
+import { navigateToPhoneSettings } from 'src/utils/linking'
+
+type Props = {
+  onContactsPermissionGranted: () => void
+  defaultTokenIdOverride?: string
+}
+
+export default function SelectRecipientButtons({
+  onContactsPermissionGranted,
+  defaultTokenIdOverride,
+}: Props) {
+  const { t } = useTranslation()
+
+  const phoneNumberVerificationEnabled = getAppConfig().experimental?.phoneNumberVerification
+
+  const phoneNumberVerified = useSelector(phoneNumberVerifiedSelector)
+
+  const [contactsPermissionStatus, setContactsPermissionStatus] = useState<
+    PermissionStatus | undefined
+  >(undefined)
+  const [showConnectPhoneNumberModal, setShowConnectPhoneNumberModal] = useState(false)
+  const [showEnableContactsModal, setShowEnableContactsModal] = useState(false)
+  const [navigateToPhoneVerification, setNavigateToPhoneVerification] = useState(false)
+
+  useAsync(() => checkPermission(CONTACTS_PERMISSION), [], {
+    onSuccess: (permissionStatus) => {
+      setContactsPermissionStatus(permissionStatus)
+    },
+  })
+
+  const onPressContacts = async () => {
+    // always fetch permission here as it can change outside the app through
+    // native settings, but this screen still remains in view (happens for
+    // Android for when permission changes from denied -> granted, everything else causes an app reload)
+    const currentPermission = await checkPermission(CONTACTS_PERMISSION)
+    setContactsPermissionStatus(currentPermission)
+
+    AppAnalytics.track(SendEvents.send_select_recipient_contacts, {
+      contactsPermissionStatus: currentPermission,
+      phoneNumberVerified,
+    })
+
+    if (!phoneNumberVerified) {
+      setShowConnectPhoneNumberModal(true)
+      return
+    }
+
+    // Based on https://github.com/zoontek/react-native-permissions#understanding-permission-flow
+    switch (currentPermission) {
+      case PERMISSION_RESULTS.BLOCKED: // permission not requestable
+        setShowEnableContactsModal(true)
+        break
+      case PERMISSION_RESULTS.GRANTED: // permission already granted
+        onContactsPermissionGranted()
+        break
+      case PERMISSION_RESULTS.DENIED: // permission is requestable
+        AppAnalytics.track(SendEvents.request_contacts_permission_started)
+        const newPermission = await requestPermission(CONTACTS_PERMISSION, {
+          // rationale for Android, shows up the 2nd time a permission is requested.
+          title: t('accessContacts.disclosure.title'),
+          message: t('accessContacts.disclosure.body'),
+          buttonPositive: t('continue'),
+          buttonNegative: t('notNow') ?? undefined,
+        })
+        setContactsPermissionStatus(newPermission)
+        AppAnalytics.track(SendEvents.request_contacts_permission_completed, {
+          permissionStatus: newPermission,
+        })
+        if (newPermission === PERMISSION_RESULTS.GRANTED) {
+          // permission granted
+          onContactsPermissionGranted()
+        } else if (newPermission === PERMISSION_RESULTS.BLOCKED && Platform.OS === 'android') {
+          // we only know if permissions are requestable or not on Android after
+          // doing a request. So if we get back blocked from the request, its
+          // possible a native modal was never shown, so show our custom modal.
+          setShowEnableContactsModal(true)
+        }
+        break
+      case PERMISSION_RESULTS.UNAVAILABLE:
+      case PERMISSION_RESULTS.LIMITED:
+      default:
+        // this should never happen
+        const unexpectedPermission: 'unavailable' | 'limited' = currentPermission
+        Logger.error(
+          'SelectRecipientButtons/onPressContacts',
+          `Unexpected contacts permission status: ${unexpectedPermission}`
+        )
+        break
+    }
+  }
+
+  const onPressQR = () => {
+    AppAnalytics.track(SendEvents.send_select_recipient_scan_qr)
+    navigate(Screens.QRNavigator, { screen: Screens.QRScanner, params: { defaultTokenIdOverride } })
+  }
+
+  const onPressConnectPhoneNumber = () => {
+    AppAnalytics.track(SendEvents.send_phone_number_modal_connect)
+    setShowConnectPhoneNumberModal(false)
+    // navigating directly here causes a screen freeze since the modal is fully
+    // not dismissed. A state is set, which is then checked on the modal hide
+    // handler to navigate
+    setNavigateToPhoneVerification(true)
+  }
+
+  const onDismissConnectPhoneNumberModal = () => {
+    AppAnalytics.track(SendEvents.send_phone_number_modal_dismiss)
+    setShowConnectPhoneNumberModal(false)
+  }
+
+  const onHideConnectPhoneNumberModal = () => {
+    if (navigateToPhoneVerification) {
+      // reset state so the next time the modal is dismissed, this doesn't end
+      // up navigating
+      setNavigateToPhoneVerification(false)
+      navigate(Screens.VerificationStartScreen, { hasOnboarded: true })
+    }
+  }
+
+  const onPressSettings = () => {
+    AppAnalytics.track(SendEvents.send_contacts_modal_settings)
+    setShowEnableContactsModal(false)
+    navigateToPhoneSettings()
+  }
+
+  const onDismissEnableContactsModal = () => {
+    AppAnalytics.track(SendEvents.send_contacts_modal_dismiss)
+    setShowEnableContactsModal(false)
+  }
+
+  return (
+    <>
+      <SelectRecipientButton
+        testID={'SelectRecipient/QR'}
+        title={t('sendSelectRecipient.qr.title')}
+        subtitle={t('sendSelectRecipient.qr.subtitle')}
+        onPress={onPressQR}
+        icon={<QRCode />}
+      />
+      {phoneNumberVerificationEnabled && (
+        <SelectRecipientButton
+          testID={'SelectRecipient/Contacts'}
+          title={t('sendSelectRecipient.invite.title')}
+          subtitle={t('sendSelectRecipient.invite.subtitle')}
+          onPress={onPressContacts}
+          icon={<Social />}
+          showCheckmark={
+            phoneNumberVerified && contactsPermissionStatus === PERMISSION_RESULTS.GRANTED
+          }
+        />
+      )}
+      <Dialog
+        title={t('sendSelectRecipient.connectPhoneNumberModal.title')}
+        isVisible={showConnectPhoneNumberModal}
+        actionText={t('connect')}
+        actionPress={onPressConnectPhoneNumber}
+        secondaryActionText={t('dismiss')}
+        secondaryActionPress={onDismissConnectPhoneNumberModal}
+        onBackgroundPress={onDismissConnectPhoneNumberModal}
+        onDialogHide={onHideConnectPhoneNumberModal}
+        testID="SelectRecipient/PhoneNumberModal"
+      >
+        {t('sendSelectRecipient.connectPhoneNumberModal.description')}
+      </Dialog>
+      <Dialog
+        title={t('sendSelectRecipient.enableContactsModal.title')}
+        isVisible={showEnableContactsModal}
+        actionText={t('settings')}
+        actionPress={onPressSettings}
+        secondaryActionText={t('dismiss')}
+        secondaryActionPress={onDismissEnableContactsModal}
+        onBackgroundPress={onDismissEnableContactsModal}
+        testID="SelectRecipient/ContactsModal"
+      >
+        {t('sendSelectRecipient.enableContactsModal.description')}
+      </Dialog>
+    </>
+  )
+}

package/src/send/SendConfirmation.test.tsx

@@ -0,0 +1,233 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import { fireEvent, render, waitFor } from '@testing-library/react-native'
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { SendOrigin } from 'src/analytics/types'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import { RootState } from 'src/redux/reducers'
+import SendConfirmation from 'src/send/SendConfirmation'
+import { sendPayment } from 'src/send/actions'
+import { usePrepareSendTransactions } from 'src/send/usePrepareSendTransactions'
+import { PreparedTransactionsPossible } from 'src/viem/prepareTransactions'
+import {
+  getSerializablePreparedTransaction,
+  getSerializablePreparedTransactionsPossible,
+} from 'src/viem/preparedTransactionSerialization'
+import { RecursivePartial, createMockStore, getMockStackScreenProps } from 'test/utils'
+import {
+  mockAccount,
+  mockCeloTokenBalance,
+  mockCeloTokenId,
+  mockCusdTokenBalance,
+  mockCusdTokenId,
+  mockPoofTokenId,
+  mockTokenBalances,
+  mockTokenTransactionData,
+} from 'test/values'
+
+jest.mock('src/web3/networkConfig', () => {
+  const originalModule = jest.requireActual('src/web3/networkConfig')
+  return {
+    ...originalModule,
+    __esModule: true,
+    default: {
+      ...originalModule.default,
+      defaultNetworkId: 'celo-alfajores',
+    },
+  }
+})
+jest.mock('src/send/usePrepareSendTransactions')
+
+const mockFeeCurrencies = [
+  { ...mockCeloTokenBalance, priceUsd: new BigNumber('5'), lastKnownPriceUsd: new BigNumber('5') },
+  mockCusdTokenBalance,
+]
+
+const mockPrepareTransactionsResultPossible: PreparedTransactionsPossible = {
+  type: 'possible',
+  transactions: [
+    {
+      from: '0xfrom',
+      to: '0xto',
+      data: '0xdata',
+      gas: BigInt('1'.concat('0'.repeat(16))), // 0.01 CELO
+      maxFeePerGas: BigInt(1),
+      maxPriorityFeePerGas: undefined,
+      _baseFeePerGas: BigInt(1),
+    },
+  ],
+  feeCurrency: mockFeeCurrencies[0],
+}
+
+const mockBaseScreenProps = {
+  transactionData: {
+    ...mockTokenTransactionData,
+  },
+  origin: SendOrigin.AppSendFlow,
+  isFromScan: false,
+}
+
+const mockSendConfirmationProps = getMockStackScreenProps(Screens.SendConfirmation, {
+  ...mockBaseScreenProps,
+  prepareTransactionsResult: getSerializablePreparedTransactionsPossible(
+    mockPrepareTransactionsResultPossible
+  ),
+})
+
+type ScreenProps = NativeStackScreenProps<StackParamList, Screens.SendConfirmation>
+
+describe('SendConfirmation', () => {
+  let mockUsePrepareSendTransactionsOutput: ReturnType<typeof usePrepareSendTransactions>
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.useFakeTimers()
+    mockUsePrepareSendTransactionsOutput = {
+      prepareTransactionsResult: mockPrepareTransactionsResultPossible,
+      prepareTransactionLoading: false,
+      refreshPreparedTransactions: jest.fn(),
+      clearPreparedTransactions: jest.fn(),
+      prepareTransactionError: undefined,
+    }
+    jest.mocked(usePrepareSendTransactions).mockReturnValue(mockUsePrepareSendTransactionsOutput)
+  })
+
+  function renderScreen(screenProps: ScreenProps, storeOverrides?: RecursivePartial<RootState>) {
+    const store = createMockStore({
+      tokens: {
+        tokenBalances: {
+          [mockPoofTokenId]: mockTokenBalances[mockPoofTokenId],
+          [mockCeloTokenId]: { ...mockTokenBalances[mockCeloTokenId], balance: '5', priceUsd: '5' },
+          [mockCusdTokenId]: mockTokenBalances[mockCusdTokenId],
+        },
+      },
+      ...storeOverrides,
+    })
+
+    const tree = render(
+      <Provider store={store}>
+        <SendConfirmation {...screenProps} />
+      </Provider>
+    )
+
+    return {
+      store,
+      ...tree,
+    }
+  }
+
+  it('renders the structure properly', () => {
+    const { getByTestId } = renderScreen(mockSendConfirmationProps)
+
+    // renders screen header
+    expect(getByTestId('CustomHeaderTitle')).toHaveTextContent('reviewTransaction.title', {
+      exact: false,
+    })
+
+    // renders token and amount details
+    expect(getByTestId('SendConfirmationToken/Label')).toHaveTextContent('sending', {
+      exact: false,
+    })
+    expect(getByTestId('SendConfirmationToken/PrimaryValue')).toHaveTextContent(
+      'tokenAmount, {"tokenAmount":"1.00","tokenSymbol":"cUSD"}'
+    )
+    expect(getByTestId('SendConfirmationToken/SecondaryValue')).toHaveTextContent(
+      'localAmount, {"localAmount":"1.33","localCurrencySymbol":"₱"}'
+    )
+
+    // renders recipient details
+    expect(getByTestId('SendConfirmationRecipient/Label')).toHaveTextContent('to', { exact: false })
+    expect(getByTestId('SendConfirmationRecipient/PrimaryValue')).toHaveTextContent(
+      '0x0000000000000000000000000000000000007E57'
+    )
+
+    // renders network details
+    expect(getByTestId('SendConfirmationNetwork/Label')).toHaveTextContent(
+      'transactionDetails.network'
+    )
+    expect(getByTestId('SendConfirmationNetwork/Value')).toHaveTextContent('Celo Alfajores', {
+      exact: false,
+    })
+
+    // renders fee details
+    expect(getByTestId('SendConfirmationFee/Label')).toHaveTextContent('networkFee', {
+      exact: false,
+    })
+    expect(getByTestId('SendConfirmationFee/Value')).toHaveTextContent(
+      'tokenAndLocalAmountApprox, {"tokenAmount":"0.01","localAmount":"0.067","tokenSymbol":"CELO","localCurrencySymbol":"₱"}'
+    )
+
+    // renders total details
+    expect(getByTestId('SendConfirmationTotal/Label')).toHaveTextContent(
+      'reviewTransaction.totalPlusFees'
+    )
+    expect(getByTestId('SendConfirmationTotal/Value')).toHaveTextContent(
+      'localAmountApprox, {"localAmount":"1.40","localCurrencySymbol":"₱"}'
+    )
+
+    // renders confirmation button
+    expect(getByTestId('ConfirmButton')).toHaveTextContent('send', { exact: false })
+  })
+
+  it('does not prepare a transaction on load by default', () => {
+    renderScreen(mockSendConfirmationProps)
+    expect(mockUsePrepareSendTransactionsOutput.clearPreparedTransactions).not.toHaveBeenCalled()
+    expect(mockUsePrepareSendTransactionsOutput.refreshPreparedTransactions).not.toHaveBeenCalled()
+    expect(mockUsePrepareSendTransactionsOutput.prepareTransactionLoading).toBe(false)
+    expect(mockUsePrepareSendTransactionsOutput.prepareTransactionError).toBeUndefined()
+  })
+
+  it('dispatches an action with prepared transaction when the confirm button is pressed', async () => {
+    const { store, getByTestId } = renderScreen(mockSendConfirmationProps)
+
+    expect(store.getActions().length).toEqual(0)
+
+    fireEvent.press(getByTestId('ConfirmButton'))
+
+    const { inputAmount, tokenId, recipient } = mockTokenTransactionData
+
+    expect(store.getActions()[0]).toEqual(
+      sendPayment(
+        inputAmount,
+        tokenId,
+        inputAmount.times(1.001),
+        recipient,
+        false,
+        getSerializablePreparedTransaction(mockPrepareTransactionsResultPossible.transactions[0])
+      )
+    )
+  })
+
+  describe('when opened with a deeplink', () => {
+    const mockSendConfirmationFromDeepLinkProps = getMockStackScreenProps(
+      Screens.SendConfirmation,
+      mockBaseScreenProps
+    )
+    it('prepares a transaction on load', async () => {
+      renderScreen(mockSendConfirmationFromDeepLinkProps)
+      await waitFor(() =>
+        expect(
+          mockUsePrepareSendTransactionsOutput.refreshPreparedTransactions
+        ).toHaveBeenCalledTimes(1)
+      )
+      expect(mockUsePrepareSendTransactionsOutput.refreshPreparedTransactions).toHaveBeenCalledWith(
+        {
+          amount: mockTokenTransactionData.tokenAmount,
+          token: mockCusdTokenBalance,
+          recipientAddress: mockTokenTransactionData.recipient.address,
+          walletAddress: mockAccount.toLowerCase(),
+          feeCurrencies: mockFeeCurrencies,
+        }
+      )
+    })
+
+    it('disables send if transaction is not prepared yet', () => {
+      mockUsePrepareSendTransactionsOutput.prepareTransactionsResult = undefined
+      const { getByTestId } = renderScreen(mockSendConfirmationFromDeepLinkProps)
+
+      expect(getByTestId('ConfirmButton')).toBeDisabled()
+    })
+  })
+})