wallet-stack 1.0.0-alpha.121

package/src/qrcode/utils.ts

@@ -0,0 +1,230 @@
+import * as RNFS from '@divvi/react-native-fs'
+import { useMemo } from 'react'
+import Share from 'react-native-share'
+import { showError, showMessage } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { QrScreenEvents, SendEvents } from 'src/analytics/Events'
+import {
+  HooksEnablePreviewOrigin,
+  SendOrigin,
+  WalletConnectPairingOrigin,
+} from 'src/analytics/types'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { DEEP_LINK_URL_SCHEME } from 'src/config'
+import { validateRecipientAddressSuccess } from 'src/identity/actions'
+import { E164NumberToAddressType } from 'src/identity/reducer'
+import { getSecureSendAddress } from 'src/identity/secureSend'
+import {
+  e164NumberToAddressSelector,
+  secureSendPhoneNumberMappingSelector,
+} from 'src/identity/selectors'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { handleEnableHooksPreviewDeepLink } from 'src/positions/saga'
+import { allowHooksPreviewSelector } from 'src/positions/selectors'
+import { UriData, uriDataFromUrl } from 'src/qrcode/schema'
+import {
+  Recipient,
+  RecipientInfo,
+  getRecipientFromAddress,
+  recipientHasNumber,
+} from 'src/recipients/recipient'
+import { recipientInfoSelector } from 'src/recipients/reducer'
+import {
+  HandleQRCodeDetectedAction,
+  HandleQRCodeDetectedSecureSendAction,
+  SVG,
+} from 'src/send/actions'
+import { QrCode } from 'src/send/types'
+import { handleSendPaymentData } from 'src/send/utils'
+import Logger from 'src/utils/Logger'
+import { initialiseWalletConnect, isWalletConnectEnabled } from 'src/walletConnect/saga'
+import { handleLoadingWithTimeout } from 'src/walletConnect/walletConnect'
+import { call, fork, put, select } from 'typed-redux-saga'
+import { isAddress } from 'viem'
+
+export enum QRCodeTypes {
+  QR_CODE = 'QR_CODE',
+}
+
+const TAG = 'QR/utils'
+
+const QRFileName = '/wallet_address-qr.png'
+
+// DeepLink generates a QR code that deeplinks into the walletconnect send flow of the app
+// Address generates a QR code that has the walletAddress as plaintext that is readable by wallets such as Coinbase and Metamask
+export function useQRContent(data: {
+  address: string
+  displayName: string | undefined
+  e164PhoneNumber: string | undefined
+}) {
+  return useMemo(() => data.address, [data.address, data.displayName, data.e164PhoneNumber, data])
+}
+
+export async function shareSVGImage(svg: SVG) {
+  if (!svg) {
+    return
+  }
+  const data = await new Promise<string>((resolve, reject) => {
+    svg.toDataURL((dataURL: string | undefined) => {
+      if (dataURL) {
+        resolve(dataURL)
+      } else {
+        // Not supposed to happen, but throw in case it does :)
+        reject(new Error('Got invalid SVG data'))
+      }
+    })
+  })
+
+  const path = RNFS.DocumentDirectoryPath + QRFileName
+  await RNFS.writeFile(path, data, 'base64')
+  return Share.open({
+    url: 'file://' + path,
+    type: 'image/png',
+    failOnCancel: false, // don't throw if user cancels share
+  })
+}
+
+export function* handleSecureSend(
+  address: string,
+  e164NumberToAddress: E164NumberToAddressType,
+  recipient: Recipient,
+  requesterAddress?: string
+) {
+  if (!recipientHasNumber(recipient)) {
+    throw Error('Invalid recipient type for Secure Send, has no mobile number')
+  }
+
+  const userScannedAddress = address.toLowerCase()
+  const { e164PhoneNumber } = recipient
+  const possibleReceivingAddresses = e164NumberToAddress[e164PhoneNumber]
+  // This should never happen. Secure Send is triggered when there are
+  // multiple addresses for a given phone number
+  if (!possibleReceivingAddresses) {
+    throw Error("No addresses associated with recipient's phone number")
+  }
+
+  // Need to add the requester address to the option set in the event
+  // a request is coming from an unverified account
+  if (requesterAddress && !possibleReceivingAddresses.includes(requesterAddress)) {
+    possibleReceivingAddresses.push(requesterAddress)
+  }
+  const possibleReceivingAddressesFormatted = possibleReceivingAddresses.map((addr) =>
+    addr.toLowerCase()
+  )
+  if (!possibleReceivingAddressesFormatted.includes(userScannedAddress)) {
+    const error = ErrorMessages.QR_FAILED_INVALID_RECIPIENT
+    AppAnalytics.track(SendEvents.send_secure_incorrect, {
+      confirmByScan: true,
+      error,
+    })
+    yield* put(showMessage(error))
+    return false
+  }
+
+  AppAnalytics.track(SendEvents.send_secure_complete, { confirmByScan: true })
+  yield* put(validateRecipientAddressSuccess(e164PhoneNumber, userScannedAddress))
+  return true
+}
+
+function* extractQRAddressData(qrCode: QrCode) {
+  // strip network prefix if present
+  const qrAddress = qrCode.data.split(':').at(-1) || qrCode.data
+  if (isAddress(qrAddress, { strict: false })) {
+    qrCode.data = `${DEEP_LINK_URL_SCHEME}://wallet/pay?address=${qrAddress}`
+  }
+  let qrData: UriData | null
+  try {
+    qrData = uriDataFromUrl(qrCode.data)
+  } catch (e) {
+    yield* put(showError(ErrorMessages.QR_FAILED_INVALID_ADDRESS))
+    Logger.error(TAG, 'qr scan failed', e)
+    qrData = null
+  }
+  return qrData
+}
+
+// Catch all handler for QR Codes
+// includes support for WalletConnect, hooks, and send flow (non-secure send)
+export function* handleQRCodeDefault({
+  qrCode,
+  defaultTokenIdOverride,
+}: HandleQRCodeDetectedAction) {
+  AppAnalytics.track(QrScreenEvents.qr_scanned, qrCode)
+
+  const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, qrCode.data)
+
+  // TODO there's some duplication with deep links handing
+  // would be nice to refactor this
+  if (qrCode.data.startsWith('wc:') && walletConnectEnabled) {
+    yield* fork(handleLoadingWithTimeout, WalletConnectPairingOrigin.Scan)
+    yield* call(initialiseWalletConnect, qrCode.data, WalletConnectPairingOrigin.Scan)
+    return
+  }
+  if (
+    (yield* select(allowHooksPreviewSelector)) &&
+    qrCode.data.startsWith(`${DEEP_LINK_URL_SCHEME}://wallet/hooks/enablePreview`)
+  ) {
+    yield* call(handleEnableHooksPreviewDeepLink, qrCode.data, HooksEnablePreviewOrigin.Scan)
+    return
+  }
+
+  const qrData = yield* call(extractQRAddressData, qrCode)
+  if (!qrData) {
+    return
+  }
+  const recipientInfo: RecipientInfo = yield* select(recipientInfoSelector)
+  const cachedRecipient = getRecipientFromAddress(qrData.address, recipientInfo)
+
+  yield* call(handleSendPaymentData, {
+    data: qrData,
+    isFromScan: true,
+    cachedRecipient,
+    defaultTokenIdOverride,
+  })
+}
+
+export function* handleQRCodeSecureSend({
+  qrCode,
+  requesterAddress,
+  recipient,
+  forceTokenId,
+  defaultTokenIdOverride,
+}: HandleQRCodeDetectedSecureSendAction) {
+  const e164NumberToAddress = yield* select(e164NumberToAddressSelector)
+  AppAnalytics.track(QrScreenEvents.qr_scanned, qrCode)
+
+  const qrData = yield* call(extractQRAddressData, qrCode)
+  if (!qrData) {
+    return
+  }
+
+  const success: boolean = yield* call(
+    handleSecureSend,
+    qrData.address,
+    e164NumberToAddress,
+    recipient,
+    requesterAddress
+  )
+  if (!success) {
+    return
+  }
+
+  const secureSendPhoneNumberMapping = yield* select(secureSendPhoneNumberMappingSelector)
+  const address = getSecureSendAddress(recipient, secureSendPhoneNumberMapping)
+  if (!address) {
+    // should never happen b/c if handleSecureSend succeeds then address should be there
+    Logger.error(TAG, `No secure send address found for recipient ${recipient}`)
+    return
+  }
+  navigate(Screens.SendEnterAmount, {
+    origin: SendOrigin.AppSendFlow,
+    recipient: {
+      ...recipient,
+      address,
+    },
+    isFromScan: true,
+    forceTokenId,
+    defaultTokenIdOverride,
+  })
+}

package/src/recaptcha/RecaptchaService.ts

@@ -0,0 +1,105 @@
+import {
+  Recaptcha,
+  RecaptchaAction,
+  type RecaptchaClient,
+} from '@google-cloud/recaptcha-enterprise-react-native'
+import { Platform } from 'react-native'
+import { getAppConfig } from 'src/appConfig'
+import { getFeatureGate } from 'src/statsig'
+import { StatsigFeatureGates } from 'src/statsig/types'
+import Logger from 'src/utils/Logger'
+
+const TAG = 'recaptcha/RecaptchaService'
+const RECAPTCHA_ACTION_TIMEOUT_MS = 10000 // 10 seconds
+
+export enum RecaptchaActionType {
+  PHONE_VERIFICATION = 'PHONE_VERIFICATION',
+  KEYLESS_BACKUP = 'KEYLESS_BACKUP',
+}
+
+class RecaptchaServiceImpl {
+  private client: RecaptchaClient | null = null
+  private initializationPromise: Promise<RecaptchaClient | null> | null = null
+
+  /**
+   * Get the reCAPTCHA client
+   * @returns Promise<RecaptchaClient | null> - The reCAPTCHA client or null if no client is found
+   */
+  async getClient(): Promise<RecaptchaClient | null> {
+    if (this.client) {
+      return this.client
+    }
+    if (this.initializationPromise) {
+      return this.initializationPromise
+    }
+
+    if (!this.isEnabled()) {
+      Logger.info(TAG, 'reCAPTCHA is disabled, not initializing reCAPTCHA client')
+      return null
+    }
+
+    const siteKey = this.getSiteKey()
+    if (!siteKey) {
+      // this should never happen if isEnabled() is true, since isEnabled() checks for site key
+      Logger.info(TAG, 'No reCAPTCHA site key found, not initializing reCAPTCHA client')
+      return null
+    }
+
+    this.initializationPromise = (async () => {
+      try {
+        this.client = await Recaptcha.fetchClient(siteKey)
+        return this.client
+      } catch (e) {
+        this.initializationPromise = null // allow external retry
+        throw e
+      }
+    })()
+
+    return this.initializationPromise
+  }
+
+  /**
+   * Get a reCAPTCHA token for a specific action
+   * @param actionType - The type of action being performed
+   * @returns Promise<string> - The reCAPTCHA token or null if no client is found
+   */
+  async getToken(action: RecaptchaActionType): Promise<string | null> {
+    try {
+      const client = await this.getClient()
+      if (!client) {
+        // This should never happen if consumers check isEnabled() before calling getToken()
+        Logger.debug(
+          TAG,
+          `No reCAPTCHA client found, not executing reCAPTCHA for action: ${action}`
+        )
+        return null
+      }
+
+      Logger.debug(TAG, `Executing reCAPTCHA for action: ${action}`)
+      const token = await client.execute(
+        RecaptchaAction.custom(action),
+        RECAPTCHA_ACTION_TIMEOUT_MS
+      )
+      Logger.debug(TAG, `reCAPTCHA token generated for action: ${action}`)
+
+      return token
+    } catch (error) {
+      Logger.error(TAG, `Failed to get reCAPTCHA token for action: ${action}`, error)
+      throw error
+    }
+  }
+
+  private getSiteKey(): string | undefined {
+    const platform = Platform.OS
+    const recaptchaConfig = getAppConfig().experimental?.recaptcha
+
+    return recaptchaConfig?.[platform === 'ios' ? 'iosSiteKey' : 'androidSiteKey']
+  }
+
+  isEnabled(): boolean {
+    const siteKey = this.getSiteKey()
+    return getFeatureGate(StatsigFeatureGates.RECAPTCHA_ENABLED) && !!siteKey
+  }
+}
+
+export const RecaptchaService = new RecaptchaServiceImpl()

package/src/recaptcha/saga.ts

@@ -0,0 +1,24 @@
+import Logger from 'src/utils/Logger'
+import { call, delay } from 'typed-redux-saga'
+import { RecaptchaService } from './RecaptchaService'
+
+const TAG = 'recaptcha/saga'
+
+export function* recaptchaSaga() {
+  if (!RecaptchaService.isEnabled()) {
+    return
+  }
+
+  Logger.info(TAG, 'Initializing reCAPTCHA client on app start')
+  for (let attempt = 1; attempt <= 3; attempt++) {
+    try {
+      yield* call([RecaptchaService, 'getClient'])
+      return
+    } catch (error) {
+      Logger.error(TAG, `reCAPTCHA initialization attempt ${attempt} failed`, error)
+      if (attempt < 3) {
+        yield* delay(1000 * attempt) // 1s, 2s delays
+      }
+    }
+  }
+}

package/src/recipients/RecipientItemV2.test.tsx

@@ -0,0 +1,153 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import RecipientItem from 'src/recipients/RecipientItemV2'
+import { createMockStore } from 'test/utils'
+import {
+  mockAddressRecipient,
+  mockInvitableRecipient,
+  mockPhoneRecipient,
+  mockRecipient,
+} from 'test/values'
+
+describe('RecipientItemV2', () => {
+  it('renders correctly with no app icon if phone number recipient is not a known app user (number never looked up)', () => {
+    const { queryByTestId, getByText } = render(
+      <Provider
+        store={createMockStore({
+          identity: {
+            e164NumberToAddress: {},
+          },
+        })}
+      >
+        <RecipientItem
+          recipient={mockInvitableRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={false}
+        />
+      </Provider>
+    )
+    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
+    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
+    expect(queryByTestId('RecipientItem/AppIcon')).toBeFalsy()
+    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+  })
+
+  it('renders correctly with no app icon if phone number recipient is not a known app user (number looked up before)', () => {
+    const { queryByTestId, getByText } = render(
+      <Provider
+        store={createMockStore({
+          identity: {
+            e164NumberToAddress: { [mockInvitableRecipient.e164PhoneNumber]: null },
+          },
+        })}
+      >
+        <RecipientItem
+          recipient={mockInvitableRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={false}
+        />
+      </Provider>
+    )
+    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
+    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
+    expect(queryByTestId('RecipientItem/AppIcon')).toBeFalsy()
+    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+  })
+
+  it('renders correctly with app icon if phone number recipient is an app user', () => {
+    const { queryByTestId, getByText, getByTestId } = render(
+      // default store includes a cached mapping
+      <Provider store={createMockStore()}>
+        <RecipientItem
+          recipient={mockInvitableRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={false}
+        />
+      </Provider>
+    )
+    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
+    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
+    expect(getByTestId('RecipientItem/AppIcon')).toBeTruthy()
+    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+  })
+
+  it('renders correctly with app icon if address recipient is an app user', () => {
+    const { queryByTestId, getByText, getByTestId } = render(
+      // default store includes a cached mapping
+      <Provider
+        store={createMockStore({
+          identity: {
+            addressToVerificationStatus: {
+              [mockRecipient.address]: true,
+            },
+          },
+        })}
+      >
+        <RecipientItem recipient={mockRecipient} onSelectRecipient={jest.fn()} loading={false} />
+      </Provider>
+    )
+    expect(getByText(mockRecipient.name)).toBeTruthy()
+    expect(getByTestId('RecipientItem/AppIcon')).toBeTruthy()
+    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+  })
+
+  it('renders correctly if loading is set to true', () => {
+    const { getByText, getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <RecipientItem
+          recipient={mockInvitableRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={true}
+        />
+      </Provider>
+    )
+    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
+    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
+    expect(getByTestId('RecipientItem/ActivityIndicator')).toBeTruthy()
+  })
+
+  it('tapping item invokes onSelectRecipient', () => {
+    const mockSelectRecipient = jest.fn()
+    const { getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <RecipientItem
+          recipient={mockInvitableRecipient}
+          onSelectRecipient={mockSelectRecipient}
+          loading={false}
+        />
+      </Provider>
+    )
+    fireEvent.press(getByTestId('RecipientItem'))
+    expect(mockSelectRecipient).toHaveBeenLastCalledWith(mockInvitableRecipient)
+  })
+
+  it('renders correct icon when recipient is a phone number', () => {
+    const { queryByTestId, getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <RecipientItem
+          recipient={mockPhoneRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={false}
+        />
+      </Provider>
+    )
+    expect(getByTestId('RecipientItem/PhoneIcon')).toBeTruthy()
+    expect(queryByTestId('RecipientItem/WalletIcon')).toBeFalsy()
+  })
+
+  it('renders correct icon when recipient is an address', () => {
+    const { queryByTestId, getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <RecipientItem
+          recipient={mockAddressRecipient}
+          onSelectRecipient={jest.fn()}
+          loading={false}
+        />
+      </Provider>
+    )
+    expect(getByTestId('RecipientItem/WalletIcon')).toBeTruthy()
+    expect(queryByTestId('RecipientItem/PhoneIcon')).toBeFalsy()
+  })
+})

package/src/recipients/RecipientItemV2.tsx

@@ -0,0 +1,142 @@
+import React, { memo, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ActivityIndicator, Keyboard, StyleSheet, Text, View } from 'react-native'
+import ContactCircle from 'src/components/ContactCircle'
+import Touchable from 'src/components/Touchable'
+import PhoneIcon from 'src/icons/Phone'
+import WalletIcon from 'src/icons/navigator/Wallet'
+import {
+  addressToVerificationStatusSelector,
+  e164NumberToAddressSelector,
+} from 'src/identity/selectors'
+import Logo from 'src/images/Logo'
+import {
+  Recipient,
+  RecipientType,
+  getDisplayDetail,
+  getDisplayName,
+  recipientHasNumber,
+} 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'
+
+interface Props {
+  recipient: Recipient
+  onSelectRecipient(recipient: Recipient): void
+  loading: boolean
+  selected?: boolean
+}
+
+const ICON_SIZE = 10
+
+function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Props) {
+  const { t } = useTranslation()
+
+  const onPress = () => {
+    Keyboard.dismiss()
+    onSelectRecipient(recipient)
+  }
+
+  const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
+  const addressToVerificationStatus = useSelector(addressToVerificationStatusSelector)
+
+  // TODO(ACT-980): avoid icon flash when a known contact is clicked
+  const showAppIcon = useMemo(() => {
+    if (recipient.recipientType === RecipientType.PhoneNumber) {
+      return recipient.e164PhoneNumber && !!e164NumberToAddress[recipient.e164PhoneNumber]
+    }
+    return recipient.address && addressToVerificationStatus[recipient.address]
+  }, [e164NumberToAddress, recipient])
+
+  return (
+    <Touchable onPress={onPress} testID="RecipientItem">
+      <View style={[styles.row, selected && styles.rowSelected]}>
+        <View>
+          <ContactCircle
+            style={styles.avatar}
+            recipient={recipient}
+            backgroundColor={Colors.backgroundSecondary}
+            foregroundColor={Colors.contentPrimary}
+            borderColor={Colors.borderPrimary}
+            DefaultIcon={() => renderDefaultIcon(recipient)} // no need to honor color props here since the color we need match the defaults
+          />
+          {!!showAppIcon && (
+            <Logo
+              color={Colors.contentSecondary}
+              style={styles.appIcon}
+              size={ICON_SIZE}
+              testID="RecipientItem/AppIcon"
+            />
+          )}
+        </View>
+        <View style={styles.contentContainer}>
+          <Text numberOfLines={1} ellipsizeMode={'tail'} style={styles.name}>
+            {getDisplayName(recipient, t)}
+          </Text>
+          {!!recipient.name && <Text style={styles.phone}>{getDisplayDetail(recipient)}</Text>}
+        </View>
+        {loading && (
+          <View style={styles.rightIconContainer}>
+            <ActivityIndicator
+              size="small"
+              color={Colors.loadingIndicator}
+              testID="RecipientItem/ActivityIndicator"
+            />
+          </View>
+        )}
+      </View>
+    </Touchable>
+  )
+}
+
+function renderDefaultIcon(recipient: Recipient) {
+  if (recipientHasNumber(recipient)) {
+    return <PhoneIcon color={Colors.contentPrimary} size={24} testID="RecipientItem/PhoneIcon" />
+  } else {
+    return <WalletIcon color={Colors.contentPrimary} size={24} testID="RecipientItem/WalletIcon" />
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    paddingVertical: Spacing.Regular16,
+    paddingHorizontal: Spacing.Regular16,
+    alignItems: 'center',
+  },
+  rowSelected: {
+    backgroundColor: Colors.backgroundSecondary,
+  },
+  avatar: {
+    marginRight: Spacing.Small12,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  name: { ...typeScale.labelMedium },
+  phone: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+  },
+  rightIconContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  appIcon: {
+    position: 'absolute',
+    top: 22,
+    left: 22,
+    backgroundColor: Colors.accent,
+    padding: 4,
+    borderRadius: 100,
+    // To override the default shadow props on the logo
+    shadowColor: undefined,
+    shadowOpacity: undefined,
+    shadowRadius: undefined,
+    shadowOffset: undefined,
+  },
+})
+
+export default memo(RecipientItem)