wallet-stack 1.0.0-alpha.136 → 1.0.0-alpha.138

package/locales/base/translation.json

@@ -2174,6 +2174,7 @@
     "recipient": "Recipient",
     "explanation": "<0>{{name}}</0> has more than one wallet linked to the phone number. Choose which one to send to."
   },
+  "unverifiedAddress": "Unverified",
   "sendSelectRecipient": {
     "searchText": "Search by name, phone, wallet...",
     "searchInputLabel": "To",

package/package.json

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

package/src/components/ReviewTransaction.test.tsx

@@ -172,6 +172,32 @@ describe('ReviewSummaryItemContact', () => {
     expect(subtitle).toHaveTextContent('MiniPay', { exact: false })
   })
 
+  it('shows the unverified warning in the subtitle for phone recipients with a known-unverified address', () => {
+    const address = '0x0123456789012345678901234567890123456789'
+    const recipient = {
+      name: 'John Doe',
+      e164PhoneNumber: '+222222222',
+      address,
+    } as Recipient
+    const tree = renderContact(recipient, {
+      identity: { addressToVerifiedBy: { [address]: null } },
+    })
+
+    const subtitle = tree.getByTestId('ContactItem/SecondaryValue')
+    expect(subtitle).toHaveTextContent('0x0123...6789', { exact: false })
+    expect(subtitle).toHaveTextContent('unverifiedAddress', { exact: false })
+  })
+
+  it('omits the unverified warning for address-only recipients (the address is already the primary value)', () => {
+    const address = '0x0123456789012345678901234567890123456789'
+    const recipient = { address } as Recipient
+    const tree = renderContact(recipient, {
+      identity: { addressToVerifiedBy: { [address]: null } },
+    })
+
+    expect(tree.queryByTestId('ContactItem/SecondaryValue')).toBeNull()
+  })
+
   it('logs an error if no name/phone/address exist', () => {
     const recipient = {} as Recipient
     const tree = renderContact(recipient)

package/src/components/ReviewTransaction.tsx

@@ -11,6 +11,7 @@ import CustomHeader from 'src/components/header/CustomHeader'
 import SkeletonPlaceholder from 'src/components/SkeletonPlaceholder'
 import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import Touchable from 'src/components/Touchable'
+import AttentionIcon from 'src/icons/Attention'
 import InfoIcon from 'src/icons/InfoIcon'
 import WalletIcon from 'src/icons/navigator/Wallet'
 import PhoneIcon from 'src/icons/Phone'
@@ -126,17 +127,31 @@ export function ReviewSummaryItem(props: {
 
 function renderAddressAndVerifier(
   shortAddress: string | undefined,
-  verifierName: string | undefined
+  verifierName: string | null | undefined
 ): ReactNode {
-  if (!shortAddress && !verifierName) return undefined
+  if (!shortAddress && verifierName === undefined) return undefined
+  const isUnverified = verifierName === null
   return (
     <>
-      {!!shortAddress && <Text style={styles.reviewSummaryItemSecondaryValue}>{shortAddress}</Text>}
-      {!!verifierName && (
+      {!!shortAddress && (
+        <Text style={[styles.reviewSummaryItemSecondaryValue, isUnverified && styles.warningText]}>
+          {shortAddress}
+        </Text>
+      )}
+      {isUnverified ? (
         <>
-          <VerifiedBadge color={colors.contentSecondary} />
-          <Text style={styles.reviewSummaryItemSecondaryValue}>{verifierName}</Text>
+          <AttentionIcon size={14} color={colors.warningPrimary} />
+          <Text style={[styles.reviewSummaryItemSecondaryValue, styles.warningText]}>
+            <Trans i18nKey="unverifiedAddress" />
+          </Text>
         </>
+      ) : (
+        !!verifierName && (
+          <>
+            <VerifiedBadge color={colors.contentSecondary} />
+            <Text style={styles.reviewSummaryItemSecondaryValue}>{verifierName}</Text>
+          </>
+        )
       )}
     </>
   )
@@ -155,6 +170,7 @@ export function ReviewSummaryItemContact({
     const phone = recipient.displayNumber || recipient.e164PhoneNumber
     // For recipients with a phone mapping, surface the resolved on-chain address (and verifier,
     // if known) as a subtitle so the user can verify the actual destination they are signing.
+    // When the address is known to be unverified, swap the verified badge for a warning.
     const shortAddress = recipient.address ? formatShortenedAddress(recipient.address) : undefined
     const phoneSubtitle = renderAddressAndVerifier(shortAddress, verifierName)
 
@@ -169,7 +185,9 @@ export function ReviewSummaryItemContact({
     if (recipient.address) {
       return {
         title: recipient.address,
-        subtitle: renderAddressAndVerifier(undefined, verifierName),
+        // For plain wallet recipients, suppress the unverified warning
+        // by collapsing `null` to `undefined`.
+        subtitle: renderAddressAndVerifier(undefined, verifierName ?? undefined),
         icon: WalletIcon,
       }
     }
@@ -513,6 +531,9 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     color: colors.contentSecondary,
   },
+  warningText: {
+    color: colors.warningPrimary,
+  },
   reviewSummaryItemSecondaryValueWrapper: {
     flexDirection: 'row',
     gap: Spacing.Smallest8,

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/recipients/verifier.ts

@@ -13,8 +13,10 @@ export function isKnownVerifier(verifier: string | null | undefined): verifier i
   return !!verifier && Object.hasOwn(VERIFIERS, verifier)
 }
 
-export function useVerifierName(address: string | undefined): string | undefined {
+export function useVerifierName(address: string | undefined): string | null | undefined {
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
-  const verifier = address ? addressToVerifiedBy[address.toLowerCase()] : undefined
-  return isKnownVerifier(verifier) ? VERIFIERS[verifier].name : undefined
+  if (!address) return undefined
+  const verifier = addressToVerifiedBy[address.toLowerCase()]
+  if (isKnownVerifier(verifier)) return VERIFIERS[verifier].name
+  return verifier === null ? null : undefined
 }

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)
+  })
+})