wallet-stack 1.0.0-alpha.137 → 1.0.0-alpha.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-stack",
-  "version": "1.0.0-alpha.137",
+  "version": "1.0.0-alpha.139",
   "author": "Valora Inc",
   "license": "Apache-2.0",
   "repository": {

package/src/app/saga.ts

@@ -260,9 +260,8 @@ function* watchDeepLinks() {
 
 export function* handleOpenUrl(action: OpenUrlAction) {
   const { url, openExternal, isSecureOrigin } = action
-  const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, url)
   Logger.debug(TAG, 'Handling url', url)
-  if (isDeepLink(url) || (walletConnectEnabled && isWalletConnectDeepLink(url))) {
+  if (isDeepLink(url) || (isWalletConnectDeepLink(url) && (yield* call(isWalletConnectEnabled)))) {
     // Handle celo links directly, this avoids showing the "Open with App" sheet on Android
     yield* call(handleDeepLink, openDeepLink(url, isSecureOrigin))
   } else if (/^https?:\/\//i.test(url) === true && !openExternal) {

package/src/dapps/saga.ts

@@ -43,8 +43,10 @@ export function* handleOpenDapp(action: PayloadAction<DappSelectedAction>) {
   ).inAppWebviewEnabled
 
   if (dappsWebViewEnabled) {
-    const walletConnectEnabled: boolean = yield* call(isWalletConnectEnabled, dappUrl)
-    if (isDeepLink(dappUrl) || (walletConnectEnabled && isWalletConnectDeepLink(dappUrl))) {
+    if (
+      isDeepLink(dappUrl) ||
+      (isWalletConnectDeepLink(dappUrl) && (yield* call(isWalletConnectEnabled)))
+    ) {
       yield* call(handleDeepLink, openDeepLink(dappUrl, true))
     } else {
       navigate(Screens.WebViewScreen, { uri: dappUrl })

package/src/navigator/types.tsx

@@ -42,7 +42,9 @@ type SendEnterAmountParams = {
   origin: SendOrigin
   forceTokenId?: boolean
   defaultTokenIdOverride?: string
-  isMiniPayRecipient?: boolean
+  // Set to true when the caller has just performed a fresh phone-number lookup
+  // (e.g. recipient picker) so the enter-amount screen can skip re-fetching mappings.
+  skipRecipientLookup?: boolean
 }
 
 interface SelectRecipientAddressParams {

package/src/qrcode/utils.ts

@@ -88,11 +88,9 @@ export function* handleQRCodeDefault({
 }: 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) {
+  if (qrCode.data.startsWith('wc:') && (yield* call(isWalletConnectEnabled))) {
     yield* fork(handleLoadingWithTimeout, WalletConnectPairingOrigin.Scan)
     yield* call(initialiseWalletConnect, qrCode.data, WalletConnectPairingOrigin.Scan)
     return

package/src/send/EnterAmount.tsx

@@ -30,6 +30,7 @@ import { useSelector } from 'src/redux/hooks'
 import EnterAmountOptions from 'src/send/EnterAmountOptions'
 import { AmountEnteredIn } from 'src/send/types'
 import { typeScale } from 'src/styles/fonts'
+import Colors from 'src/styles/colors'
 import { Spacing } from 'src/styles/styles'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
@@ -69,6 +70,7 @@ interface Props {
   ProceedComponent: ComponentType<ProceedComponentProps>
   disableBalanceCheck?: boolean
   filterChips?: FilterChip<TokenBalance>[]
+  recipientSlot?: React.ReactNode
 }
 
 export const SendProceed = ({
@@ -111,6 +113,7 @@ export default function EnterAmount({
   ProceedComponent,
   disableBalanceCheck = false,
   filterChips,
+  recipientSlot,
 }: Props) {
   const { t } = useTranslation()
   const insets = useSafeAreaInsets()
@@ -253,6 +256,13 @@ export default function EnterAmount({
             onOpenTokenPicker={tokenSelectionDisabled ? undefined : onOpenTokenPicker}
           />
 
+          {!!recipientSlot && (
+            <>
+              <View style={styles.connectorLine} />
+              {recipientSlot}
+            </>
+          )}
+
           {token &&
             prepareTransactionsResult?.type !== 'not-enough-balance-for-gas' &&
             !!networkFee && (
@@ -384,4 +394,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.Regular16,
     borderRadius: 16,
   },
+  connectorLine: {
+    width: 2,
+    height: 12,
+    backgroundColor: Colors.borderPrimary,
+    alignSelf: 'center',
+    marginVertical: Spacing.Tiny4,
+  },
 })

package/src/send/SelectRecipientAddress.test.tsx

@@ -102,7 +102,7 @@ describe('SelectRecipientAddress', () => {
     expect(queryByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`)).toBeNull()
   })
 
-  it('navigates to SendEnterAmount on Valora row tap with isMiniPayRecipient=false', () => {
+  it('navigates to SendEnterAmount on Valora row tap', () => {
     const { getByTestId } = renderScreen({})
     fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`))
 
@@ -115,7 +115,7 @@ describe('SelectRecipientAddress', () => {
         address: mockAccount2.toLowerCase(),
       },
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: false,
+      skipRecipientLookup: true,
     })
     expect(AppAnalytics.track).toHaveBeenCalledWith(
       SendEvents.send_select_recipient_address_select,
@@ -123,7 +123,7 @@ describe('SelectRecipientAddress', () => {
     )
   })
 
-  it('navigates to SendEnterAmount on MiniPay row tap with isMiniPayRecipient=true', () => {
+  it('navigates to SendEnterAmount on MiniPay row tap', () => {
     const { getByTestId } = renderScreen({})
     fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount3.toLowerCase()}`))
 
@@ -136,7 +136,7 @@ describe('SelectRecipientAddress', () => {
         address: mockAccount3.toLowerCase(),
       },
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: true,
+      skipRecipientLookup: true,
     })
     expect(AppAnalytics.track).toHaveBeenCalledWith(
       SendEvents.send_select_recipient_address_select,

package/src/send/SelectRecipientAddress.tsx

@@ -1,35 +1,27 @@
 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 { ScrollView, StyleSheet, Text } 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 VerifiedBadge from 'src/icons/VerifiedBadge'
 import { addressToVerifiedBySelector, e164NumberToAddressSelector } from 'src/identity/selectors'
 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 { VERIFIERS, Verifier, isKnownVerifier } from 'src/recipients/verifier'
+import { Verifier, isKnownVerifier } from 'src/recipients/verifier'
 import { useSelector } from 'src/redux/hooks'
+import SelectRecipientAddressList from 'src/send/SelectRecipientAddressList'
 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 ICON_SIZE = 40
-
-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
@@ -63,7 +55,7 @@ function SelectRecipientAddress({ route }: Props) {
         address,
       },
       origin,
-      isMiniPayRecipient: verifier === 'minipay',
+      skipRecipientLookup: true,
     })
   }
 
@@ -83,24 +75,7 @@ function SelectRecipientAddress({ route }: Props) {
             <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>
-                <View style={styles.verifier}>
-                  <VerifiedBadge color={Colors.contentSecondary} />
-                  <Text style={styles.verifierName}>{VERIFIERS[verifier].name}</Text>
-                </View>
-              </View>
-            </View>
-          </Touchable>
-        ))}
+        <SelectRecipientAddressList entries={verifiedEntries} onSelectAddress={onSelectAddress} />
       </ScrollView>
     </SafeAreaView>
   )
@@ -131,32 +106,6 @@ const styles = StyleSheet.create({
   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: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: Spacing.Tiny4,
-  },
-  verifierName: {
-    ...typeScale.bodySmall,
-    color: Colors.contentSecondary,
-  },
 })
 
 SelectRecipientAddress.navigationOptions = noHeader

package/src/send/SelectRecipientAddressList.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import SelectRecipientAddressList from 'src/send/SelectRecipientAddressList'
+
+const mockAddress = '0x0000000000000000000000000000000000000001'
+const mockAddress2 = '0x0000000000000000000000000000000000000002'
+
+describe('SelectRecipientAddressList', () => {
+  it('renders one row per entry with the verifier name and a shortened address', () => {
+    const { getByTestId } = render(
+      <SelectRecipientAddressList
+        entries={[
+          { address: mockAddress, verifier: 'valora' },
+          { address: mockAddress2, verifier: 'minipay' },
+        ]}
+        onSelectAddress={jest.fn()}
+      />
+    )
+
+    const valoraRow = getByTestId(`SelectRecipientAddress/Row/${mockAddress}`)
+    expect(valoraRow).toHaveTextContent('Valora', { exact: false })
+    expect(valoraRow).toHaveTextContent('0x0000...0001', { exact: false })
+
+    const minipayRow = getByTestId(`SelectRecipientAddress/Row/${mockAddress2}`)
+    expect(minipayRow).toHaveTextContent('MiniPay', { exact: false })
+    expect(minipayRow).toHaveTextContent('0x0000...0002', { exact: false })
+  })
+
+  it('renders an unverified row with a warning label when verifier is null', () => {
+    const { getByTestId } = render(
+      <SelectRecipientAddressList
+        entries={[{ address: mockAddress, verifier: null }]}
+        onSelectAddress={jest.fn()}
+      />
+    )
+
+    const row = getByTestId(`SelectRecipientAddress/Row/${mockAddress}`)
+    expect(row).toHaveTextContent('unverifiedAddress', { exact: false })
+    expect(row).toHaveTextContent('0x0000...0001', { exact: false })
+  })
+
+  it('invokes onSelectAddress with null verifier when an unverified row is tapped', () => {
+    const onSelectAddress = jest.fn()
+    const { getByTestId } = render(
+      <SelectRecipientAddressList
+        entries={[{ address: mockAddress, verifier: null }]}
+        onSelectAddress={onSelectAddress}
+      />
+    )
+
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAddress}`))
+    expect(onSelectAddress).toHaveBeenCalledWith(mockAddress, null)
+  })
+
+  it('invokes onSelectAddress with the row address and verifier when tapped', () => {
+    const onSelectAddress = jest.fn()
+    const { getByTestId } = render(
+      <SelectRecipientAddressList
+        entries={[{ address: mockAddress, verifier: 'minipay' }]}
+        onSelectAddress={onSelectAddress}
+      />
+    )
+
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAddress}`))
+
+    expect(onSelectAddress).toHaveBeenCalledWith(mockAddress, 'minipay')
+  })
+})

package/src/send/SelectRecipientAddressList.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { formatShortenedAddress } from 'src/account/utils'
+import Touchable from 'src/components/Touchable'
+import AttentionIcon from 'src/icons/Attention'
+import WalletIcon from 'src/icons/navigator/Wallet'
+import VerifiedBadge from 'src/icons/VerifiedBadge'
+import { VERIFIERS, Verifier } from 'src/recipients/verifier'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+const ICON_SIZE = 40
+
+function VerifierIcon({ verifier }: { verifier: Verifier | null }) {
+  if (!verifier) {
+    return (
+      <View style={styles.unverifiedIcon}>
+        <WalletIcon color={Colors.contentPrimary} size={24} />
+      </View>
+    )
+  }
+  return <Image source={VERIFIERS[verifier].icon} style={styles.icon} resizeMode="contain" />
+}
+
+export interface Entry {
+  address: string
+  verifier: Verifier | null
+}
+
+interface Props {
+  entries: Entry[]
+  onSelectAddress(address: string, verifier: Verifier | null): void
+  // Compact rows for the in-sheet variant — the standalone screen keeps the original padding.
+  compact?: boolean
+}
+
+export default function SelectRecipientAddressList({ entries, onSelectAddress, compact }: Props) {
+  const { t } = useTranslation()
+  return (
+    <>
+      {entries.map(({ address, verifier }) => (
+        <Touchable
+          key={address}
+          onPress={() => onSelectAddress(address, verifier)}
+          testID={`SelectRecipientAddress/Row/${address}`}
+        >
+          <View style={[styles.row, compact && styles.rowCompact]}>
+            <VerifierIcon verifier={verifier} />
+            <View style={styles.rowContent}>
+              <Text style={styles.address}>{formatShortenedAddress(address)}</Text>
+              {verifier ? (
+                <View style={styles.verifier}>
+                  <VerifiedBadge color={Colors.contentSecondary} />
+                  <Text style={styles.verifierName}>{VERIFIERS[verifier].name}</Text>
+                </View>
+              ) : (
+                <View style={styles.verifier}>
+                  <AttentionIcon size={14} color={Colors.warningPrimary} />
+                  <Text style={styles.unverifiedText}>{t('unverifiedAddress')}</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        </Touchable>
+      ))}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+  unverifiedIcon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    borderRadius: ICON_SIZE / 2,
+    backgroundColor: Colors.backgroundSecondary,
+    borderWidth: 1,
+    borderColor: Colors.borderPrimary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: Spacing.Regular16,
+    paddingVertical: Spacing.Regular16,
+  },
+  rowCompact: {
+    paddingHorizontal: 0,
+    paddingVertical: Spacing.Smallest8,
+  },
+  rowContent: {
+    flex: 1,
+    marginLeft: Spacing.Small12,
+  },
+  address: {
+    ...typeScale.labelMedium,
+  },
+  verifier: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.Tiny4,
+  },
+  verifierName: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+  },
+  unverifiedText: {
+    ...typeScale.bodySmall,
+    color: Colors.warningPrimary,
+  },
+})

package/src/send/SelectedRecipientCard.test.tsx

@@ -0,0 +1,96 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { Recipient, RecipientType } from 'src/recipients/recipient'
+import SelectedRecipientCard from 'src/send/SelectedRecipientCard'
+import { createMockStore } from 'test/utils'
+import { mockAccount, mockAccount2, mockE164Number, mockName } from 'test/values'
+
+jest.mock('src/components/BottomSheet', () => {
+  const React = require('react')
+  const { View } = require('react-native')
+  // Render the sheet's children inline so the verified rows are queryable in tests.
+  const BottomSheet = React.forwardRef(({ children }: any, _ref: any) =>
+    React.createElement(View, { testID: 'BottomSheet' }, children)
+  )
+  return { __esModule: true, default: BottomSheet }
+})
+
+const phoneRecipient = {
+  name: mockName,
+  e164PhoneNumber: mockE164Number,
+  recipientType: RecipientType.PhoneNumber,
+  address: mockAccount,
+} as Recipient & { address: string }
+
+function renderCard(
+  props: Partial<React.ComponentProps<typeof SelectedRecipientCard>> = {},
+  storeOverrides: Record<string, unknown> = {}
+) {
+  const onSelectAddress = jest.fn()
+  const utils = render(
+    <Provider store={createMockStore(storeOverrides)}>
+      <SelectedRecipientCard
+        recipient={phoneRecipient}
+        status="verified"
+        verifiedAddresses={[]}
+        originalAddress={phoneRecipient.address}
+        onSelectAddress={onSelectAddress}
+        {...props}
+      />
+    </Provider>
+  )
+  return { ...utils, onSelectAddress }
+}
+
+describe('SelectedRecipientCard', () => {
+  it('shows the recipient name as the title and a spinner while the lookup is loading', () => {
+    const { getByTestId } = renderCard({ status: 'loading' })
+    expect(getByTestId('SelectedRecipientCard')).toHaveTextContent(mockName, { exact: false })
+    expect(getByTestId('SelectedRecipientCard/Spinner')).toBeTruthy()
+  })
+
+  it('shows an unverified warning subtitle when the resolved address is known-unverified', () => {
+    const { getByTestId } = renderCard({ status: 'unverified' })
+    expect(getByTestId('SelectedRecipientCard/Unverified')).toHaveTextContent('unverifiedAddress', {
+      exact: false,
+    })
+  })
+
+  it('is not tappable when there is only one address option (the current one)', () => {
+    const { getByTestId } = renderCard({
+      status: 'verified',
+      verifiedAddresses: [{ address: mockAccount.toLowerCase(), verifier: 'valora' }],
+    })
+    const touchable = getByTestId('SelectedRecipientCard/Touchable')
+    expect(touchable).toBeDisabled()
+  })
+
+  it('opens the sheet and invokes onSelectAddress when tapping a row', () => {
+    const { getByTestId, onSelectAddress } = renderCard({
+      status: 'verified',
+      verifiedAddresses: [
+        { address: mockAccount.toLowerCase(), verifier: 'valora' },
+        { address: mockAccount2.toLowerCase(), verifier: 'minipay' },
+      ],
+    })
+
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount2.toLowerCase()}`))
+    expect(onSelectAddress).toHaveBeenCalledWith(mockAccount2.toLowerCase())
+  })
+
+  it('keeps the original (unverified) address selectable in the sheet alongside verified options', () => {
+    const { getByTestId, onSelectAddress } = renderCard({
+      status: 'verified',
+      // Verified set does not include the original address — common after the user picked a
+      // verified option from a recipient that came in via recents with a stale mapping.
+      verifiedAddresses: [{ address: mockAccount2.toLowerCase(), verifier: 'valora' }],
+      originalAddress: mockAccount,
+      recipient: { ...phoneRecipient, address: mockAccount2.toLowerCase() },
+    })
+
+    // The original (unverified) address still renders as a selectable row.
+    fireEvent.press(getByTestId(`SelectRecipientAddress/Row/${mockAccount}`))
+    expect(onSelectAddress).toHaveBeenCalledWith(mockAccount)
+  })
+})