wallet-stack 1.0.0-alpha.131 → 1.0.0-alpha.133

package/src/redux/migrations.test.ts

@@ -68,6 +68,7 @@ import {
   v251Schema,
   v253Schema,
   v254Schema,
+  v255Schema,
   v28Schema,
   v2Schema,
   v35Schema,
@@ -1946,4 +1947,16 @@ describe('Redux persist migrations', () => {
     const migratedSchema = migrations[255](oldSchema)
     expect(migratedSchema.identity.addressToVerifiedBy).toStrictEqual({})
   })
+
+  it('works from 255 to 256', () => {
+    const oldSchema = {
+      ...v255Schema,
+      identity: {
+        ...v255Schema.identity,
+        secureSendPhoneNumberMapping: { '+14155550000': {} },
+      },
+    }
+    const migratedSchema = migrations[256](oldSchema)
+    expect(migratedSchema.identity.secureSendPhoneNumberMapping).toBeUndefined()
+  })
 })

package/src/redux/migrations.ts

@@ -2077,4 +2077,8 @@ export const migrations = {
       addressToVerifiedBy: {},
     },
   }),
+  256: (state: any) => ({
+    ...state,
+    identity: _.omit(state.identity, 'secureSendPhoneNumberMapping'),
+  }),
 }

package/src/redux/store.test.ts

@@ -143,7 +143,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 255,
+          "version": 256,
         },
         "account": {
           "acceptedTerms": false,
@@ -254,7 +254,6 @@ describe('store state', () => {
             "total": 0,
           },
           "lastSavedContactsHash": null,
-          "secureSendPhoneNumberMapping": {},
           "shouldRefreshStoredPasswordHash": true,
         },
         "imports": {

package/src/redux/store.ts

@@ -30,7 +30,7 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-xyz/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 255,
+  version: 256,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
   blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', transactionFeedV2Api.reducerPath],

package/src/send/SelectRecipientAddress.test.tsx

@@ -0,0 +1,146 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import { SendOrigin } from 'src/analytics/types'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { RecipientType } from 'src/recipients/recipient'
+import SelectRecipientAddress from 'src/send/SelectRecipientAddress'
+import { createMockStore, getMockStackScreenProps } from 'test/utils'
+import { mockAccount2, mockAccount3, mockE164Number3 } from 'test/values'
+
+const mockRecipient = {
+  e164PhoneNumber: mockE164Number3,
+  displayNumber: '(415) 555-0123',
+  recipientType: RecipientType.PhoneNumber,
+} as const
+
+function renderScreen(storeOverrides: any) {
+  const store = createMockStore({
+    identity: {
+      e164NumberToAddress: {
+        [mockE164Number3]: [mockAccount2.toLowerCase(), mockAccount3.toLowerCase()],
+      },
+      addressToVerifiedBy: {
+        [mockAccount2.toLowerCase()]: 'valora',
+        [mockAccount3.toLowerCase()]: 'minipay',
+      },
+      ...storeOverrides?.identity,
+    },
+  })
+
+  const props = getMockStackScreenProps(Screens.SelectRecipientAddress, {
+    recipient: mockRecipient,
+    origin: SendOrigin.AppSendFlow,
+  })
+
+  return render(
+    <Provider store={store}>
+      <SelectRecipientAddress {...props} />
+    </Provider>
+  )
+}
+
+describe('SelectRecipientAddress', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders a row per verified address with its verifier label', () => {
+    const { getByText, getByTestId } = renderScreen({})
+
+    expect(getByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`)).toBeTruthy()
+    expect(getByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`)).toBeTruthy()
+    expect(getByText('Valora')).toBeTruthy()
+    expect(getByText('MiniPay')).toBeTruthy()
+    expect(
+      getByText(`selectRecipientAddress.explanation, {"name":"${mockRecipient.displayNumber}"}`)
+    ).toBeTruthy()
+  })
+
+  it('tracks the screen-open event with the number of verified addresses', () => {
+    renderScreen({})
+
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_address_open, {
+      addressCount: 2,
+    })
+  })
+
+  it('filters out addresses without a verifier entry', () => {
+    const { queryByTestId } = renderScreen({
+      identity: {
+        e164NumberToAddress: {
+          [mockE164Number3]: [mockAccount2.toLowerCase(), mockAccount3.toLowerCase()],
+        },
+        addressToVerifiedBy: {
+          [mockAccount2.toLowerCase()]: 'valora',
+          // mockAccount3 intentionally omitted
+        },
+      },
+    })
+
+    expect(queryByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`)).toBeTruthy()
+    expect(queryByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`)).toBeNull()
+  })
+
+  it('filters out addresses with an unknown verifier', () => {
+    const { queryByTestId } = renderScreen({
+      identity: {
+        e164NumberToAddress: {
+          [mockE164Number3]: [mockAccount2.toLowerCase(), mockAccount3.toLowerCase()],
+        },
+        addressToVerifiedBy: {
+          [mockAccount2.toLowerCase()]: 'valora',
+          [mockAccount3.toLowerCase()]: 'somethingNew',
+        },
+      },
+    })
+
+    expect(queryByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`)).toBeTruthy()
+    expect(queryByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`)).toBeNull()
+  })
+
+  it('navigates to SendEnterAmount on Valora row tap with isMiniPayRecipient=false', () => {
+    const { getByTestId } = renderScreen({})
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`))
+
+    expect(navigate).toHaveBeenCalledWith(Screens.SendEnterAmount, {
+      isFromScan: false,
+      defaultTokenIdOverride: undefined,
+      forceTokenId: undefined,
+      recipient: {
+        ...mockRecipient,
+        address: mockAccount2.toLowerCase(),
+      },
+      origin: SendOrigin.AppSendFlow,
+      isMiniPayRecipient: false,
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(
+      SendEvents.send_select_recipient_address_select,
+      { verifier: 'valora' }
+    )
+  })
+
+  it('navigates to SendEnterAmount on MiniPay row tap with isMiniPayRecipient=true', () => {
+    const { getByTestId } = renderScreen({})
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`))
+
+    expect(navigate).toHaveBeenCalledWith(Screens.SendEnterAmount, {
+      isFromScan: false,
+      defaultTokenIdOverride: undefined,
+      forceTokenId: undefined,
+      recipient: {
+        ...mockRecipient,
+        address: mockAccount3.toLowerCase(),
+      },
+      origin: SendOrigin.AppSendFlow,
+      isMiniPayRecipient: true,
+    })
+    expect(AppAnalytics.track).toHaveBeenCalledWith(
+      SendEvents.send_select_recipient_address_select,
+      { verifier: 'minipay' }
+    )
+  })
+})

package/src/send/SelectRecipientAddress.tsx

@@ -0,0 +1,166 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React, { useEffect } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { formatShortenedAddress } from 'src/account/utils'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import BackButton from 'src/components/BackButton'
+import Touchable from 'src/components/Touchable'
+import CustomHeader from 'src/components/header/CustomHeader'
+import { addressToVerifiedBySelector, e164NumberToAddressSelector } from 'src/identity/selectors'
+import { miniPay, valora } from 'src/images/Images'
+import { noHeader } from 'src/navigator/Headers'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import { getDisplayName } from 'src/recipients/recipient'
+import { useSelector } from 'src/redux/hooks'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+type Props = NativeStackScreenProps<StackParamList, Screens.SelectRecipientAddress>
+
+const VERIFIERS = {
+  valora: { name: 'Valora', icon: valora },
+  minipay: { name: 'MiniPay', icon: miniPay },
+} as const
+
+export type Verifier = keyof typeof VERIFIERS
+
+const ICON_SIZE = 40
+
+function isKnownVerifier(verifier: string | undefined): verifier is Verifier {
+  return !!verifier && Object.hasOwn(VERIFIERS, verifier)
+}
+
+function VerifierIcon({ verifier }: { verifier: Verifier }) {
+  return <Image source={VERIFIERS[verifier].icon} style={styles.icon} resizeMode="contain" />
+}
+
+function SelectRecipientAddress({ route }: Props) {
+  const { t } = useTranslation()
+  const { recipient, origin, forceTokenId, defaultTokenIdOverride } = route.params
+
+  const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
+
+  const addresses = e164NumberToAddress[recipient.e164PhoneNumber] || []
+  const verifiedEntries = addresses
+    .map((address) => ({ address, verifier: addressToVerifiedBy[address] }))
+    .filter((entry): entry is { address: string; verifier: Verifier } =>
+      isKnownVerifier(entry.verifier)
+    )
+
+  useEffect(() => {
+    AppAnalytics.track(SendEvents.send_select_recipient_address_open, {
+      addressCount: verifiedEntries.length,
+    })
+  }, [])
+
+  const onSelectAddress = (address: string, verifier: Verifier) => {
+    AppAnalytics.track(SendEvents.send_select_recipient_address_select, {
+      verifier,
+    })
+    navigate(Screens.SendEnterAmount, {
+      isFromScan: false,
+      defaultTokenIdOverride,
+      forceTokenId,
+      recipient: {
+        ...recipient,
+        address,
+      },
+      origin,
+      isMiniPayRecipient: verifier === 'minipay',
+    })
+  }
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top']}>
+      <CustomHeader
+        style={styles.customHeader}
+        left={<BackButton eventName={SendEvents.send_select_recipient_address_back} />}
+      />
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <Text style={styles.title}>{t('selectRecipientAddress.header')}</Text>
+        <Text style={styles.explanation}>
+          <Trans
+            i18nKey="selectRecipientAddress.explanation"
+            tOptions={{ name: getDisplayName(recipient, t) }}
+          >
+            <Text style={styles.explanationName} />
+          </Trans>
+        </Text>
+        {verifiedEntries.map(({ address, verifier }) => (
+          <Touchable
+            key={address}
+            onPress={() => onSelectAddress(address, verifier)}
+            testID={`SelectRecipientAddress/Row/${address}`}
+          >
+            <View style={styles.row}>
+              <VerifierIcon verifier={verifier} />
+              <View style={styles.rowContent}>
+                <Text style={styles.address}>{formatShortenedAddress(address)}</Text>
+                <Text style={styles.verifier}>{VERIFIERS[verifier].name}</Text>
+              </View>
+            </View>
+          </Touchable>
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  customHeader: {
+    paddingHorizontal: Spacing.Thick24,
+  },
+  scrollContent: {
+    paddingBottom: Spacing.Smallest8,
+  },
+  title: {
+    ...typeScale.titleMedium,
+    paddingHorizontal: Spacing.Regular16,
+    paddingTop: Spacing.Thick24,
+    marginBottom: Spacing.Smallest8,
+  },
+  explanation: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+    paddingHorizontal: Spacing.Regular16,
+    paddingBottom: Spacing.Regular16,
+  },
+  explanationName: {
+    fontWeight: 'bold',
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: Spacing.Regular16,
+    paddingVertical: Spacing.Regular16,
+  },
+  rowContent: {
+    flex: 1,
+    marginLeft: Spacing.Small12,
+  },
+  address: {
+    ...typeScale.labelMedium,
+  },
+  verifier: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+  },
+})
+
+SelectRecipientAddress.navigationOptions = noHeader
+
+export default SelectRecipientAddress

package/src/send/SendConfirmation.test.tsx

@@ -171,6 +171,34 @@ describe('SendConfirmation', () => {
     expect(getByTestId('ConfirmButton')).toHaveTextContent('send', { exact: false })
   })
 
+  it('shows the unknown address warning when the recipient address is not a known app user', () => {
+    const { getByTestId } = renderScreen(mockSendConfirmationProps, {
+      identity: {
+        addressToVerificationStatus: { [mockAccount]: false },
+      },
+    })
+
+    expect(getByTestId('UnknownAddressInfo')).toBeTruthy()
+  })
+
+  it('does not show the unknown address warning when the recipient address is verified', () => {
+    const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
+      identity: {
+        addressToVerificationStatus: { [mockAccount]: true },
+      },
+    })
+
+    expect(queryByTestId('UnknownAddressInfo')).toBeNull()
+  })
+
+  it('does not show the unknown address warning when the address has not been looked up yet', () => {
+    const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
+      identity: { addressToVerificationStatus: {} },
+    })
+
+    expect(queryByTestId('UnknownAddressInfo')).toBeNull()
+  })
+
   it('does not prepare a transaction on load by default', () => {
     renderScreen(mockSendConfirmationProps)
     expect(mockUsePrepareSendTransactionsOutput.clearPreparedTransactions).not.toHaveBeenCalled()

package/src/send/SendConfirmation.tsx

@@ -10,6 +10,7 @@ import BackButton from 'src/components/BackButton'
 import type { BottomSheetModalRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes } from 'src/components/Button'
 import InfoBottomSheet, { InfoBottomSheetContentBlock } from 'src/components/InfoBottomSheet'
+import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
 import {
   buildAmounts,
   ReviewContent,
@@ -23,11 +24,13 @@ import {
 } from 'src/components/ReviewTransaction'
 import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import TokenIcon from 'src/components/TokenIcon'
+import { addressToVerificationStatusSelector } from 'src/identity/selectors'
 import { LocalCurrencySymbol } from 'src/localCurrency/consts'
 import { getLocalCurrencyCode, getLocalCurrencySymbol } from 'src/localCurrency/selectors'
 import { noHeader } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
+import { RecipientType } from 'src/recipients/recipient'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { sendPayment } from 'src/send/actions'
 import { isSendingSelector } from 'src/send/selectors'
@@ -36,11 +39,11 @@ import { NETWORK_NAMES } from 'src/shared/conts'
 import { useAmountAsUsd, useTokenInfo, useTokenToLocalAmount } from 'src/tokens/hooks'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import Logger from 'src/utils/Logger'
-import { getFeeCurrencyAndAmounts } from 'src/viem/prepareTransactions'
 import {
   getPreparedTransactionsPossible,
   getSerializablePreparedTransaction,
 } from 'src/viem/preparedTransactionSerialization'
+import { getFeeCurrencyAndAmounts } from 'src/viem/prepareTransactions'
 import { walletAddressSelector } from 'src/web3/selectors'
 
 type Props = NativeStackScreenProps<StackParamList, Screens.SendConfirmation>
@@ -88,6 +91,12 @@ export default function SendConfirmation({ route: { params } }: Props) {
   const localAmount = useTokenToLocalAmount(tokenAmount, tokenId)
   const usdAmount = useAmountAsUsd(tokenAmount, tokenId)
   const walletAddress = useSelector(walletAddressSelector)
+  const addressToVerificationStatus = useSelector(addressToVerificationStatusSelector)
+  const showUnknownAddressInfo =
+    recipient.recipientType === RecipientType.Address &&
+    !!recipient.address &&
+    addressToVerificationStatus[recipient.address] === false
+
   const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, tokenInfo!.networkId))
   const {
     maxFeeAmount,
@@ -233,6 +242,14 @@ export default function SendConfirmation({ route: { params } }: Props) {
       </ReviewContent>
 
       <ReviewFooter>
+        {showUnknownAddressInfo && (
+          <InLineNotification
+            variant={NotificationVariant.Info}
+            description={t('sendSelectRecipient.unknownAddressInfo')}
+            testID="UnknownAddressInfo"
+          />
+        )}
+
         <Button
           testID="ConfirmButton"
           text={t('send')}

package/src/send/SendInvite.test.tsx

@@ -0,0 +1,107 @@
+import { act, fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import Share from 'react-native-share'
+import { Provider } from 'react-redux'
+import { showError } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { Screens } from 'src/navigator/Screens'
+import { RecipientType } from 'src/recipients/recipient'
+import SendInvite from 'src/send/SendInvite'
+import { createMockStore, getMockStackScreenProps } from 'test/utils'
+import { mockInvitableRecipient3 } from 'test/values'
+
+const shareUrl = 'https://example.test/invite'
+
+const mockScreenProps = () =>
+  getMockStackScreenProps(Screens.SendInvite, {
+    recipient: mockInvitableRecipient3,
+    shareUrl,
+  })
+
+describe('SendInvite', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('opens the share sheet, tracks the press analytic, and stays on the screen after the sheet closes', async () => {
+    jest
+      .mocked(Share.open)
+      .mockResolvedValueOnce({ success: true, dismissedAction: false, message: '' })
+
+    const store = createMockStore({})
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SendInvite {...mockScreenProps()} />
+      </Provider>
+    )
+
+    await act(async () => {
+      fireEvent.press(getByTestId('SendInvite/ShareButton'))
+    })
+
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_invite_press, {
+      recipientType: RecipientType.PhoneNumber,
+    })
+    expect(Share.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: expect.stringContaining(shareUrl),
+        url: shareUrl,
+        failOnCancel: false,
+      })
+    )
+  })
+
+  it('dispatches an error toast when the share sheet fails', async () => {
+    jest.mocked(Share.open).mockRejectedValueOnce(new Error('no share providers'))
+
+    const store = createMockStore({})
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SendInvite {...mockScreenProps()} />
+      </Provider>
+    )
+
+    await act(async () => {
+      fireEvent.press(getByTestId('SendInvite/ShareButton'))
+    })
+
+    expect(store.getActions()).toContainEqual(showError(ErrorMessages.SHARE_INVITE_FAILED))
+  })
+
+  it('renders the contact name in the title when the recipient has one', () => {
+    const store = createMockStore({})
+    const { getByText } = render(
+      <Provider store={store}>
+        <SendInvite {...mockScreenProps()} />
+      </Provider>
+    )
+
+    expect(
+      getByText(`sendInvite.title, {"contact":"${mockInvitableRecipient3.name}"}`)
+    ).toBeTruthy()
+  })
+
+  it('falls back to the phone number in the title when the recipient has no name', () => {
+    const namelessRecipient = {
+      displayNumber: mockInvitableRecipient3.displayNumber,
+      e164PhoneNumber: mockInvitableRecipient3.e164PhoneNumber,
+      recipientType: mockInvitableRecipient3.recipientType,
+    }
+    const screenProps = getMockStackScreenProps(Screens.SendInvite, {
+      recipient: namelessRecipient,
+      shareUrl,
+    })
+    const store = createMockStore({})
+    const { getByText } = render(
+      <Provider store={store}>
+        <SendInvite {...screenProps} />
+      </Provider>
+    )
+
+    expect(
+      getByText(`sendInvite.title, {"contact":"${mockInvitableRecipient3.displayNumber}"}`)
+    ).toBeTruthy()
+  })
+})

package/src/send/SendInvite.tsx

@@ -0,0 +1,99 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import Share from 'react-native-share'
+import { showError } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SendEvents } from 'src/analytics/Events'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import Button, { BtnSizes } from 'src/components/Button'
+import { inviteModal } from 'src/images/Images'
+import { headerWithBackButton } from 'src/navigator/Headers'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import { getDisplayName } from 'src/recipients/recipient'
+import { useDispatch } from 'src/redux/hooks'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import Logger from 'src/utils/Logger'
+
+type Props = NativeStackScreenProps<StackParamList, Screens.SendInvite>
+
+function SendInvite({ route }: Props) {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const { recipient, shareUrl } = route.params
+  const contact = getDisplayName(recipient, t)
+
+  const handleShareInvite = async () => {
+    AppAnalytics.track(SendEvents.send_select_recipient_invite_press, {
+      recipientType: recipient.recipientType,
+    })
+
+    try {
+      await Share.open({
+        message: t('inviteWithSmsMessage.shareMessage', { shareUrl }),
+        url: shareUrl,
+        failOnCancel: false,
+      })
+    } catch (error) {
+      Logger.error('SendInvite', 'Share sheet failed', error)
+      dispatch(showError(ErrorMessages.SHARE_INVITE_FAILED))
+    }
+  }
+
+  return (
+    <SafeAreaView style={styles.container} edges={['bottom']}>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={styles.imageContainer}>
+          <Image source={inviteModal} resizeMode="contain" />
+        </View>
+        <Text style={styles.title}>{t('sendInvite.title', { contact })}</Text>
+        <Text style={styles.body}>{t('sendInvite.body')}</Text>
+      </ScrollView>
+      <Button
+        testID="SendInvite/ShareButton"
+        style={styles.button}
+        onPress={handleShareInvite}
+        text={t('sendInvite.cta')}
+        size={BtnSizes.FULL}
+      />
+    </SafeAreaView>
+  )
+}
+
+SendInvite.navigationOptions = headerWithBackButton
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  scrollContent: {
+    padding: Spacing.Thick24,
+  },
+  imageContainer: {
+    alignItems: 'center',
+    paddingTop: Spacing.Thick24,
+    paddingBottom: Spacing.Regular16,
+  },
+  title: {
+    ...typeScale.titleMedium,
+    textAlign: 'center',
+    marginTop: Spacing.Large32,
+    paddingHorizontal: Spacing.Regular16,
+  },
+  body: {
+    ...typeScale.bodyMedium,
+    textAlign: 'center',
+    marginTop: Spacing.Regular16,
+    paddingHorizontal: Spacing.Regular16,
+  },
+  button: {
+    padding: Spacing.Thick24,
+  },
+})
+
+export default SendInvite