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

package/src/send/SendSelectRecipient.tsx

@@ -1,30 +1,20 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { getFontScaleSync } from 'react-native-device-info'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import Share from 'react-native-share'
 import { isAddressFormat } from 'src/account/utils'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { SendEvents } from 'src/analytics/Events'
 import { SendOrigin } from 'src/analytics/types'
 import { getAppConfig } from 'src/appConfig'
 import BackButton from 'src/components/BackButton'
-import Button, { BtnSizes } from 'src/components/Button'
-import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
 import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
 import CustomHeader from 'src/components/header/CustomHeader'
 import CircledIcon from 'src/icons/CircledIcon'
 import { importContacts } from 'src/identity/actions'
-import { getAddressFromPhoneNumber } from 'src/identity/contactMapping'
-import { AddressValidationType } from 'src/identity/reducer'
-import { getAddressValidationType } from 'src/identity/secureSend'
-import {
-  addressToVerifiedBySelector,
-  e164NumberToAddressSelector,
-  secureSendPhoneNumberMappingSelector,
-} from 'src/identity/selectors'
+import { addressToVerifiedBySelector, e164NumberToAddressSelector } from 'src/identity/selectors'
 import { RecipientVerificationStatus } from 'src/identity/types'
 import { noHeader } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
@@ -42,7 +32,6 @@ import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import variables from 'src/styles/variables'
-import Logger from 'src/utils/Logger'
 
 type Props = NativeStackScreenProps<StackParamList, Screens.SendSelectRecipient>
 
@@ -167,45 +156,6 @@ const getStartedStyles = StyleSheet.create({
   },
 })
 
-function SendOrInviteButton({
-  recipient,
-  recipientVerificationStatus,
-  shareUrl,
-  onPress,
-}: {
-  recipient: Recipient | null
-  recipientVerificationStatus: RecipientVerificationStatus
-  shareUrl: string | null
-  onPress: (shouldInviteRecipient: boolean) => void
-}) {
-  const { t } = useTranslation()
-
-  const sendOrInviteButtonDisabled =
-    (!!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN) ||
-    // If the phone number is present and unverified and no share URL is found, disable the send/invite button
-    (recipient?.recipientType === RecipientType.PhoneNumber &&
-      recipientVerificationStatus === RecipientVerificationStatus.UNVERIFIED &&
-      !shareUrl)
-
-  const shouldInviteRecipient =
-    !sendOrInviteButtonDisabled &&
-    recipient?.recipientType === RecipientType.PhoneNumber &&
-    recipientVerificationStatus === RecipientVerificationStatus.UNVERIFIED
-  return (
-    <Button
-      testID="SendOrInviteButton"
-      style={styles.sendOrInviteButton}
-      onPress={() => onPress(shouldInviteRecipient)}
-      disabled={sendOrInviteButtonDisabled}
-      text={
-        shouldInviteRecipient
-          ? t('sendSelectRecipient.buttons.invite')
-          : t('sendSelectRecipient.buttons.send')
-      }
-      size={BtnSizes.FULL}
-    />
-  )
-}
 enum SelectRecipientView {
   Recent = 'Recent',
   Contacts = 'Contacts',
@@ -214,7 +164,6 @@ enum SelectRecipientView {
 function SendSelectRecipient({ route }: Props) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
-  const secureSendPhoneNumberMapping = useSelector(secureSendPhoneNumberMappingSelector)
   const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
   const shareUrl = getAppConfig().experimental?.inviteFriends?.shareUrl ?? null
@@ -222,19 +171,14 @@ function SendSelectRecipient({ route }: Props) {
   const forceTokenId = route.params?.forceTokenId
   const defaultTokenIdOverride = route.params?.defaultTokenIdOverride
 
-  const [showSendOrInviteButton, setShowSendOrInviteButton] = useState(false)
-
   const [showSearchResults, setShowSearchResults] = useState(false)
 
   const [activeView, setActiveView] = useState(SelectRecipientView.Recent)
 
   const onSearch = (searchQuery: string) => {
-    // Always unset the selected recipient and hide the send/invite button
-    // when the search query is changed in order to prevent edge cases
-    // where the button appears but is bound to a recipient that is
-    // not present on the page.
+    // Clear any in-flight selection so a stale recipient can't auto-navigate
+    // once the user starts typing a different query.
     unsetSelectedRecipient()
-    setShowSendOrInviteButton(false)
     setShowSearchResults(!!searchQuery)
   }
   const { contactRecipients, recentRecipients } = useSendRecipients()
@@ -243,17 +187,31 @@ function SendSelectRecipient({ route }: Props) {
   const { recipientVerificationStatus, recipient, setSelectedRecipient, unsetSelectedRecipient } =
     useFetchRecipientVerificationStatus()
 
-  const showUnknownAddressInfo =
-    showSendOrInviteButton &&
-    showSearchResults &&
-    recipient &&
-    recipient.recipientType !== RecipientType.PhoneNumber &&
-    recipientVerificationStatus === RecipientVerificationStatus.UNVERIFIED
+  useEffect(() => {
+    // Auto-navigate once verification resolves. The picker stays mounted so the
+    // user's search text and selection are preserved when they come back.
+    if (!recipient || recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN) {
+      return
+    }
 
-  const setSelectedRecipientWrapper = (selectedRecipient: Recipient) => {
-    setSelectedRecipient(selectedRecipient)
-    setShowSendOrInviteButton(true)
-  }
+    const isUnverifiedPhone =
+      recipient.recipientType === RecipientType.PhoneNumber &&
+      recipientVerificationStatus === RecipientVerificationStatus.UNVERIFIED
+
+    if (isUnverifiedPhone) {
+      if (shareUrl) {
+        navigate(Screens.SendInvite, { recipient, shareUrl })
+      }
+      // Without shareUrl there's no invite flow and no send flow for an
+      // unverified phone — stay on the picker so the user can pick someone else.
+      return
+    }
+
+    AppAnalytics.track(SendEvents.send_select_recipient_send_press, {
+      recipientType: recipient.recipientType,
+    })
+    nextScreen(recipient)
+  }, [recipient, recipientVerificationStatus, shareUrl])
 
   const onContactsPermissionGranted = () => {
     dispatch(importContacts())
@@ -268,7 +226,6 @@ function SendSelectRecipient({ route }: Props) {
     AppAnalytics.track(SendEvents.send_select_recipient_recent_press, {
       recipientType: recentRecipient.recipientType,
     })
-    setSelectedRecipient(recentRecipient)
     nextScreen(recentRecipient)
   }
 
@@ -276,35 +233,28 @@ function SendSelectRecipient({ route }: Props) {
     // use the address from the recipient object
     let address: string | null | undefined = selectedRecipient.address
 
-    // if not present there must be a phone number, route through secure send or get
-    // the secure send mapped address
+    // if not present there must be a phone number, route through the address picker
+    // when multiple verified addresses exist, otherwise go directly to amount entry
     if (!address && recipientHasNumber(selectedRecipient)) {
-      const addressValidationType: AddressValidationType = getAddressValidationType(
-        selectedRecipient,
-        secureSendPhoneNumberMapping
-      )
-      if (addressValidationType !== AddressValidationType.NONE) {
-        navigate(Screens.ValidateRecipientIntro, {
-          defaultTokenIdOverride,
+      const phoneAddresses = e164NumberToAddress[selectedRecipient.e164PhoneNumber] ?? []
+      const verifiedAddresses = phoneAddresses.filter((a) => !!addressToVerifiedBy[a])
+
+      if (verifiedAddresses.length > 1) {
+        navigate(Screens.SelectRecipientAddress, {
           forceTokenId,
+          defaultTokenIdOverride,
           recipient: selectedRecipient,
           origin: SendOrigin.AppSendFlow,
         })
         return
       }
-      address = getAddressFromPhoneNumber(
-        selectedRecipient.e164PhoneNumber,
-        e164NumberToAddress,
-        secureSendPhoneNumberMapping,
-        undefined
-      )
+
+      address = verifiedAddresses[0] ?? phoneAddresses[0]
     }
 
     if (!address) {
       // this should never happen
-      throw new Error(
-        'No address found, this should never happen. Should have routed to invite or secure send.'
-      )
+      throw new Error('No address found, this should never happen. Should have routed to invite.')
     }
 
     navigate(Screens.SendEnterAmount, {
@@ -320,40 +270,6 @@ function SendSelectRecipient({ route }: Props) {
     })
   }
 
-  const onPressSendOrInvite = async (shouldInviteRecipient: boolean) => {
-    if (!recipient) return
-
-    // Invites
-    if (shouldInviteRecipient) {
-      if (!shareUrl) {
-        Logger.warn('SendSelectRecipient', 'No share URL found for invite')
-        return
-      }
-
-      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.warn('SendSelectRecipient', 'Share sheet failed', error)
-      }
-
-      return
-    }
-
-    // Sends
-    AppAnalytics.track(SendEvents.send_select_recipient_send_press, {
-      recipientType: recipient.recipientType,
-    })
-    nextScreen(recipient)
-  }
-
   const renderSearchResults = () => {
     if (mergedRecipients.length) {
       return (
@@ -362,7 +278,7 @@ function SendSelectRecipient({ route }: Props) {
           <RecipientPicker
             testID={'SelectRecipient/AllRecipientsPicker'}
             recipients={mergedRecipients}
-            onSelectRecipient={setSelectedRecipientWrapper}
+            onSelectRecipient={setSelectedRecipient}
             selectedRecipient={recipient}
             isSelectedRecipientLoading={
               !!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN
@@ -409,7 +325,7 @@ function SendSelectRecipient({ route }: Props) {
           <RecipientPicker
             testID={'SelectRecipient/ContactRecipientPicker'}
             recipients={contactRecipients}
-            onSelectRecipient={setSelectedRecipientWrapper}
+            onSelectRecipient={setSelectedRecipient}
             selectedRecipient={recipient}
             isSelectedRecipientLoading={
               !!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN
@@ -439,22 +355,6 @@ function SendSelectRecipient({ route }: Props) {
           </>
         )}
       </KeyboardAwareScrollView>
-      {showUnknownAddressInfo && (
-        <InLineNotification
-          variant={NotificationVariant.Info}
-          description={t('sendSelectRecipient.unknownAddressInfo')}
-          testID="UnknownAddressInfo"
-          style={styles.unknownAddressInfo}
-        />
-      )}
-      {showSendOrInviteButton && (
-        <SendOrInviteButton
-          recipient={recipient}
-          recipientVerificationStatus={recipientVerificationStatus}
-          onPress={onPressSendOrInvite}
-          shareUrl={shareUrl}
-        />
-      )}
     </SafeAreaView>
   )
 }
@@ -496,14 +396,6 @@ const styles = StyleSheet.create({
     padding: Spacing.Regular16,
     textAlign: 'center',
   },
-  unknownAddressInfo: {
-    margin: Spacing.Regular16,
-    marginBottom: variables.contentPadding,
-  },
-  sendOrInviteButton: {
-    margin: Spacing.Regular16,
-    marginTop: variables.contentPadding,
-  },
 })
 
 export default SendSelectRecipient

package/src/send/actions.ts

@@ -9,7 +9,6 @@ export type SVG = typeof Svg
 
 export enum Actions {
   BARCODE_DETECTED = 'SEND/BARCODE_DETECTED',
-  BARCODE_DETECTED_SECURE_SEND = 'SEND/BARCODE_DETECTED_SECURE_SEND',
   QRCODE_SHARE = 'SEND/QRCODE_SHARE',
   SEND_PAYMENT = 'SEND/SEND_PAYMENT',
   SEND_PAYMENT_SUCCESS = 'SEND/SEND_PAYMENT_SUCCESS',
@@ -23,15 +22,6 @@ export interface HandleQRCodeDetectedAction {
   defaultTokenIdOverride?: string
 }
 
-export interface HandleQRCodeDetectedSecureSendAction {
-  type: Actions.BARCODE_DETECTED_SECURE_SEND
-  qrCode: QrCode
-  requesterAddress?: string
-  recipient: Recipient
-  forceTokenId?: boolean
-  defaultTokenIdOverride?: string
-}
-
 export interface ShareQRCodeAction {
   type: Actions.QRCODE_SHARE
   qrCodeSvg: SVG
@@ -64,7 +54,6 @@ export interface UpdateLastUsedCurrencyAction {
 
 export type ActionTypes =
   | HandleQRCodeDetectedAction
-  | HandleQRCodeDetectedSecureSendAction
   | ShareQRCodeAction
   | SendPaymentAction
   | SendPaymentSuccessAction
@@ -83,21 +72,6 @@ export const handleQRCodeDetected = ({
   defaultTokenIdOverride,
 })
 
-export const handleQRCodeDetectedSecureSend = (
-  qrCode: QrCode,
-  recipient: Recipient,
-  requesterAddress?: string,
-  forceTokenId?: boolean,
-  defaultTokenIdOverride?: string
-): HandleQRCodeDetectedSecureSendAction => ({
-  type: Actions.BARCODE_DETECTED_SECURE_SEND,
-  qrCode,
-  requesterAddress,
-  recipient,
-  forceTokenId,
-  defaultTokenIdOverride,
-})
-
 export const shareQRCode = (qrCodeSvg: SVG): ShareQRCodeAction => ({
   type: Actions.QRCODE_SHARE,
   qrCodeSvg,

package/src/send/saga.ts

@@ -3,7 +3,7 @@ import AppAnalytics from 'src/analytics/AppAnalytics'
 import { CeloExchangeEvents, SendEvents } from 'src/analytics/Events'
 import { ErrorMessages } from 'src/app/ErrorMessages'
 import { navigateBack, navigateInitialTab } from 'src/navigator/NavigationService'
-import { handleQRCodeDefault, handleQRCodeSecureSend, shareSVGImage } from 'src/qrcode/utils'
+import { handleQRCodeDefault, shareSVGImage } from 'src/qrcode/utils'
 import {
   Actions,
   SendPaymentAction,
@@ -164,12 +164,7 @@ function* watchQrCodeDetections() {
   yield* takeEvery(Actions.BARCODE_DETECTED, safely(handleQRCodeDefault))
 }
 
-function* watchQrCodeDetectionsSecureSend() {
-  yield* takeEvery(Actions.BARCODE_DETECTED_SECURE_SEND, safely(handleQRCodeSecureSend))
-}
-
 export function* sendSaga() {
-  yield* spawn(watchQrCodeDetectionsSecureSend)
   yield* spawn(watchQrCodeDetections)
   yield* spawn(watchQrCodeShare)
   yield* spawn(watchSendPayment)

package/src/components/AccountNumberCard.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { StyleSheet, ViewStyle } from 'react-native'
-import AccountNumber from 'src/components/AccountNumber'
-import Card from 'src/components/Card'
-
-interface Props {
-  address: string
-  style?: ViewStyle
-}
-
-export default function AccountNumberCard({ address, style }: Props) {
-  return (
-    <Card style={[styles.container, style]} rounded={true}>
-      <AccountNumber address={address} touchDisabled={true} />
-    </Card>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-  },
-})

package/src/components/ErrorMessageInline.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { WithTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
-import { connect } from 'react-redux'
-import { hideAlert } from 'src/alert/actions'
-import { ErrorDisplayType } from 'src/alert/reducer'
-import { ErrorMessages } from 'src/app/ErrorMessages'
-import { withTranslation } from 'src/i18n'
-import { RootState } from 'src/redux/reducers'
-import colors from 'src/styles/colors'
-import { typeScale } from 'src/styles/fonts'
-
-const DISMISS_DEFAULT = 5
-
-interface StateProps {
-  displayMethod: ErrorDisplayType | null
-}
-
-interface OwnProps {
-  error?: ErrorMessages | null
-  dismissAfter?: number
-}
-
-interface DispatchProps {
-  hideAlert: typeof hideAlert
-}
-
-const mapStateToProps = (state: RootState): StateProps => {
-  const displayMethod = state.alert ? state.alert.displayMethod : null
-  return {
-    displayMethod,
-  }
-}
-
-const mapDispatchToProps = {
-  hideAlert,
-}
-
-type Props = DispatchProps & OwnProps & WithTranslation & StateProps
-
-function ErrorMessageInline(props: Props) {
-  const { error, displayMethod, dismissAfter, t } = props
-
-  // Want to initiate/cleanup a timer for each new error
-  React.useEffect(() => {
-    const timer = window.setTimeout(props.hideAlert, (dismissAfter || DISMISS_DEFAULT) * 1000)
-    return () => window.clearTimeout(timer)
-  }, [error])
-
-  // Keep the space empty when there isn't an inline error
-  // displayMethod lives in redux store and we want to be able to use this component
-  // without populating it so much check if other types are already displayed
-  // rather than if INLINE is
-  if (!error || displayMethod === ErrorDisplayType.BANNER) {
-    return <View style={dismissAfter !== null && styles.errorContainer} />
-  }
-
-  return (
-    <View style={dismissAfter !== null && styles.errorContainer}>
-      <Text style={styles.errorMessage}>{t(error)} </Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  errorContainer: {
-    height: 64,
-  },
-  errorMessage: {
-    ...typeScale.bodySmall,
-    color: colors.errorPrimary,
-  },
-})
-
-export default connect<StateProps, DispatchProps, OwnProps, RootState>(
-  (state: RootState) => mapStateToProps,
-  mapDispatchToProps
-)(withTranslation<Props>()(ErrorMessageInline))

package/src/components/SingleDigitInput.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react'
-import { StyleSheet } from 'react-native'
-import TextInput from 'src/components/TextInput'
-import colors from 'src/styles/colors'
-
-export interface SingleDigitInputProps {
-  inputValue: string
-  inputPlaceholder: string
-  onInputChange: (value: string) => void
-  testID?: string
-  forwardedRef: any
-}
-
-type Props = SingleDigitInputProps
-
-// Multiline enabled as to handle unexpected cursor behavior
-// https://github.com/facebook/react-native/issues/28794#issuecomment-877769852
-
-export function SingleDigitInput({
-  inputValue,
-  inputPlaceholder,
-  onInputChange,
-  testID,
-  forwardedRef,
-}: Props) {
-  return (
-    <TextInput
-      multiline={true}
-      textAlign={'center'}
-      value={inputValue}
-      placeholder={inputPlaceholder}
-      onChangeText={onInputChange}
-      maxLength={1}
-      showClearButton={false}
-      style={styles.codeInput}
-      testID={testID}
-      ref={forwardedRef}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  codeInput: {
-    borderColor: colors.borderPrimary,
-    borderRadius: 3,
-    borderWidth: 1,
-    flex: 0,
-    backgroundColor: colors.backgroundPrimary,
-    height: 50,
-    width: 50,
-    marginVertical: 5,
-  },
-})

package/src/icons/HamburgerCard.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Line, Svg } from 'react-native-svg'
-import { default as Colors, default as colors } from 'src/styles/colors'
-import globalStyles from 'src/styles/styles'
-
-function HamburgerCard() {
-  return (
-    <View style={styles.container}>
-      <Svg testID="Hamburger" width="32" height="32" viewBox="0 0 32 32" fill="none">
-        <Line
-          x1="7.25"
-          y1="9.75"
-          x2="24.75"
-          y2="9.75"
-          stroke={Colors.contentPrimary}
-          strokeWidth="2.5"
-          strokeLinecap="round"
-        />
-        <Line
-          x1="7.25"
-          y1="15.75"
-          x2="24.75"
-          y2="15.75"
-          stroke={Colors.contentPrimary}
-          strokeWidth="2.5"
-          strokeLinecap="round"
-        />
-        <Line
-          x1="7.25"
-          y1="21.75"
-          x2="24.75"
-          y2="21.75"
-          stroke={Colors.contentPrimary}
-          strokeWidth="2.5"
-          strokeLinecap="round"
-        />
-      </Svg>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: colors.backgroundPrimary,
-    ...globalStyles.softShadowLight,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 4,
-    height: 32,
-    width: 32,
-  },
-})
-
-export default React.memo(HamburgerCard)