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

package/package.json

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

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

package/src/send/SelectedRecipientCard.tsx

@@ -0,0 +1,197 @@
+import React, { memo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { formatShortenedAddress } from 'src/account/utils'
+import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
+import ContactCircle from 'src/components/ContactCircle'
+import Touchable from 'src/components/Touchable'
+import AttentionIcon from 'src/icons/Attention'
+import DownArrowIcon from 'src/icons/DownArrowIcon'
+import PhoneIcon from 'src/icons/Phone'
+import UserIcon from 'src/icons/User'
+import VerifiedBadge from 'src/icons/VerifiedBadge'
+import WalletIcon from 'src/icons/navigator/Wallet'
+import { Recipient } from 'src/recipients/recipient'
+import { useVerifierName } from 'src/recipients/verifier'
+import SelectRecipientAddressList, { type Entry } from 'src/send/SelectRecipientAddressList'
+import { type RecipientLookupStatus, type VerifiedAddressEntry } from 'src/send/useRecipientLookup'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+const SECONDARY_ROW_MIN_HEIGHT = 20
+
+interface Props {
+  recipient: Recipient & { address: string }
+  status: RecipientLookupStatus
+  verifiedAddresses: VerifiedAddressEntry[]
+  // The address the recipient was navigated in with. If it's not in the verified set
+  // (e.g. came from recents and the mapping no longer holds), it stays selectable in the
+  // sheet as an unverified option so the user can switch back after picking a verified one.
+  originalAddress: string
+  onSelectAddress(address: string): void
+}
+
+function SelectedRecipientCard({
+  recipient,
+  status,
+  verifiedAddresses,
+  originalAddress,
+  onSelectAddress,
+}: Props) {
+  const { t } = useTranslation()
+  const sheetRef = useRef<BottomSheetModalRefType>(null)
+
+  const verifierName = useVerifierName(recipient.address)
+  const isLoading = status === 'loading'
+
+  const originalIsVerified = verifiedAddresses.some(
+    (entry) => entry.address.toLowerCase() === originalAddress.toLowerCase()
+  )
+  const sheetEntries: Entry[] = originalIsVerified
+    ? verifiedAddresses
+    : [...verifiedAddresses, { address: originalAddress, verifier: null }]
+
+  const hasAlternative = sheetEntries.some(
+    (entry) => entry.address.toLowerCase() !== recipient.address.toLowerCase()
+  )
+  const isTappable = !isLoading && hasAlternative
+
+  const onPress = isTappable ? () => sheetRef.current?.snapToIndex(0) : undefined
+
+  const onSelectFromSheet = (address: string) => {
+    sheetRef.current?.close()
+    onSelectAddress(address)
+  }
+
+  const shortAddress = formatShortenedAddress(recipient.address)
+  const phone = recipient.displayNumber || recipient.e164PhoneNumber
+  const contact = recipient.name
+    ? { title: recipient.name, icon: UserIcon, shortAddress }
+    : phone
+      ? { title: phone, icon: PhoneIcon, shortAddress }
+      : { title: shortAddress, icon: WalletIcon, shortAddress: undefined as string | undefined }
+
+  const renderSecondary = () => {
+    const { shortAddress } = contact
+
+    // Address-only recipients (no name/phone) use the address as the title and have no secondary
+    // line — by design we don't show an extra "unverified" warning row in that case.
+    if (status === 'unverified' && shortAddress) {
+      return (
+        <View style={styles.secondaryRow} testID="SelectedRecipientCard/Unverified">
+          <Text style={[styles.secondaryText, styles.warningText]}>{shortAddress}</Text>
+          <AttentionIcon size={14} color={Colors.warningPrimary} />
+          <Text style={[styles.secondaryText, styles.warningText]}>{t('unverifiedAddress')}</Text>
+        </View>
+      )
+    }
+
+    if (!shortAddress && !verifierName) return null
+
+    return (
+      <View style={styles.secondaryRow}>
+        {!!shortAddress && <Text style={styles.secondaryText}>{shortAddress}</Text>}
+        {!!verifierName && (
+          <>
+            <VerifiedBadge color={Colors.contentSecondary} />
+            <Text style={styles.secondaryText}>{verifierName}</Text>
+          </>
+        )}
+      </View>
+    )
+  }
+
+  const secondary = renderSecondary()
+
+  return (
+    <View style={styles.summary} testID="SelectedRecipientCard">
+      <Touchable
+        style={styles.content}
+        onPress={onPress}
+        disabled={!onPress}
+        testID="SelectedRecipientCard/Touchable"
+      >
+        <>
+          <ContactCircle
+            size={32}
+            backgroundColor={Colors.backgroundTertiary}
+            foregroundColor={Colors.contentPrimary}
+            recipient={recipient}
+            DefaultIcon={contact.icon}
+          />
+          <View style={styles.values}>
+            <Text style={styles.primary} numberOfLines={1} ellipsizeMode="middle">
+              {contact.title}
+            </Text>
+            {secondary ? <View style={styles.secondaryWrapper}>{secondary}</View> : null}
+          </View>
+          {isLoading ? (
+            <ActivityIndicator
+              size="small"
+              color={Colors.loadingIndicator}
+              testID="SelectedRecipientCard/Spinner"
+            />
+          ) : isTappable ? (
+            <DownArrowIcon height={24} color={Colors.contentSecondary} />
+          ) : null}
+        </>
+      </Touchable>
+      {hasAlternative && (
+        <BottomSheet
+          forwardedRef={sheetRef}
+          title={t('selectRecipientAddress.header')}
+          snapPoints={['90%']}
+          testId="SelectRecipientAddressSheet"
+        >
+          <SelectRecipientAddressList
+            entries={sheetEntries}
+            onSelectAddress={onSelectFromSheet}
+            compact
+          />
+        </BottomSheet>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  summary: {
+    borderWidth: 1,
+    borderColor: Colors.borderPrimary,
+    borderRadius: Spacing.Small12,
+    backgroundColor: Colors.backgroundSecondary,
+    padding: Spacing.Regular16,
+  },
+  content: {
+    flexDirection: 'row',
+    gap: Spacing.Smallest8,
+    alignItems: 'center',
+  },
+  values: {
+    flex: 1,
+    flexShrink: 1,
+  },
+  primary: {
+    ...typeScale.labelMedium,
+  },
+  secondaryWrapper: {
+    minHeight: SECONDARY_ROW_MIN_HEIGHT,
+    justifyContent: 'center',
+  },
+  secondaryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.Tiny4,
+    flexShrink: 1,
+  },
+  secondaryText: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+  },
+  warningText: {
+    color: Colors.warningPrimary,
+  },
+})
+
+export default memo(SelectedRecipientCard)

package/src/send/SendEnterAmount.test.tsx

@@ -241,6 +241,14 @@ describe('SendEnterAmount', () => {
 
   describe('MiniPay filter', () => {
     const miniPayTokenIds = [mockCusdTokenId, mockUSDCTokenId]
+    // The screen now derives `isMiniPayRecipient` from the store rather than a route param,
+    // so set up the verifier mapping for the recipient address used in `params`.
+    const miniPayStore = createMockStore({
+      tokens: { tokenBalances },
+      identity: {
+        addressToVerifiedBy: { [params.recipient.address.toLowerCase()]: 'minipay' },
+      },
+    })
 
     beforeEach(() => {
       jest.mocked(getDynamicConfigParams).mockReturnValue({
@@ -248,13 +256,10 @@ describe('SendEnterAmount', () => {
       })
     })
 
-    it('should show MiniPay chip pre-selected and only MiniPay tokens when isMiniPayRecipient is true', () => {
+    it('should show MiniPay chip pre-selected and only MiniPay tokens when the recipient address is verified by minipay', () => {
       const { getAllByTestId, getByText } = render(
-        <Provider store={store}>
-          <MockedNavigator
-            component={SendEnterAmount}
-            params={{ ...params, isMiniPayRecipient: true }}
-          />
+        <Provider store={miniPayStore}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
         </Provider>
       )
 
@@ -269,11 +274,8 @@ describe('SendEnterAmount', () => {
 
     it('should select default token from MiniPay list', () => {
       const { getByTestId } = render(
-        <Provider store={store}>
-          <MockedNavigator
-            component={SendEnterAmount}
-            params={{ ...params, isMiniPayRecipient: true }}
-          />
+        <Provider store={miniPayStore}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
         </Provider>
       )
 
@@ -283,11 +285,8 @@ describe('SendEnterAmount', () => {
 
     it('should show all tokens when MiniPay chip is toggled off', () => {
       const { getAllByTestId, getByText } = render(
-        <Provider store={store}>
-          <MockedNavigator
-            component={SendEnterAmount}
-            params={{ ...params, isMiniPayRecipient: true }}
-          />
+        <Provider store={miniPayStore}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
         </Provider>
       )
 
@@ -298,7 +297,7 @@ describe('SendEnterAmount', () => {
       expect(tokens).toHaveLength(3)
     })
 
-    it('should not show MiniPay chip when isMiniPayRecipient is not set', () => {
+    it('should not show MiniPay chip when the recipient address is not verified by minipay', () => {
       const { queryByText } = render(
         <Provider store={store}>
           <MockedNavigator component={SendEnterAmount} params={params} />
@@ -308,17 +307,14 @@ describe('SendEnterAmount', () => {
       expect(queryByText('sendEnterAmountScreen.miniPayFilterChip')).toBeFalsy()
     })
 
-    it('should not select a default token when isMiniPayRecipient is true and user has no MiniPay tokens', () => {
+    it('should not select a default token when the recipient is minipay-verified and user has no MiniPay tokens', () => {
       jest.mocked(getDynamicConfigParams).mockReturnValue({
         miniPayTokenIds: ['celo-alfajores:0xNOT_HELD_BY_USER'],
       })
 
       const { getByText, queryByTestId, getByTestId } = render(
-        <Provider store={store}>
-          <MockedNavigator
-            component={SendEnterAmount}
-            params={{ ...params, isMiniPayRecipient: true }}
-          />
+        <Provider store={miniPayStore}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
         </Provider>
       )
 
@@ -335,7 +331,7 @@ describe('SendEnterAmount', () => {
       expect(getByTestId('TokenBottomSheet')).toBeTruthy()
     })
 
-    it('should include isMiniPayRecipient in send_amount_continue analytics', async () => {
+    it('should include isMiniPayRecipient=true in send_amount_continue analytics when the address is minipay-verified', async () => {
       jest.mocked(usePrepareSendTransactions).mockReturnValue({
         prepareTransactionsResult: mockPrepareTransactionsResultPossible,
         prepareTransactionLoading: false,
@@ -344,11 +340,8 @@ describe('SendEnterAmount', () => {
         prepareTransactionError: undefined,
       })
       const { getByTestId, getByText } = render(
-        <Provider store={store}>
-          <MockedNavigator
-            component={SendEnterAmount}
-            params={{ ...params, isMiniPayRecipient: true }}
-          />
+        <Provider store={miniPayStore}>
+          <MockedNavigator component={SendEnterAmount} params={params} />
         </Provider>
       )
 

package/src/send/SendEnterAmount.tsx

@@ -1,16 +1,19 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import BigNumber from 'bignumber.js'
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { SendEvents } from 'src/analytics/Events'
+import { addressToVerifiedBySelector } from 'src/identity/selectors'
 import { getLocalCurrencyCode, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import { useSelector } from 'src/redux/hooks'
 import EnterAmount, { ProceedArgs, SendProceed } from 'src/send/EnterAmount'
+import SelectedRecipientCard from 'src/send/SelectedRecipientCard'
 import { lastUsedTokenIdSelector } from 'src/send/selectors'
 import { usePrepareSendTransactions } from 'src/send/usePrepareSendTransactions'
+import { useRecipientLookup } from 'src/send/useRecipientLookup'
 import useSendFilterChips from 'src/send/useSendFilterChips'
 import { sortedTokensWithBalanceOrShowZeroBalanceSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
@@ -26,11 +29,29 @@ function SendEnterAmount({ route }: Props) {
   const {
     defaultTokenIdOverride,
     origin,
-    recipient,
+    recipient: initialRecipient,
     isFromScan,
     forceTokenId,
-    isMiniPayRecipient,
+    skipRecipientLookup,
   } = route.params
+
+  // Local state lets the user swap addresses (via SelectedRecipientCard) without re-navigating,
+  // so the typed amount is preserved.
+  const [selectedAddress, setSelectedAddress] = useState(initialRecipient.address)
+  const recipient = useMemo(
+    () => ({ ...initialRecipient, address: selectedAddress }),
+    [initialRecipient, selectedAddress]
+  )
+
+  const { status: lookupStatus, verifiedAddresses } = useRecipientLookup(recipient, {
+    skipFetch: skipRecipientLookup,
+  })
+
+  // Derive from the store so a fresh lookup that updates the verifier is reflected
+  // immediately (token filtering and analytics stay in sync with the selected address).
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
+  const isMiniPayRecipient = addressToVerifiedBy[selectedAddress.toLowerCase()] === 'minipay'
+
   // explicitly allow zero state tokens to be shown for exploration purposes for
   // new users with no balance
   const tokens = useSelector(sortedTokensWithBalanceOrShowZeroBalanceSelector)
@@ -79,7 +100,7 @@ function SendEnterAmount({ route }: Props) {
       amountEnteredIn,
       tokenId: token.tokenId,
       networkId: token.networkId,
-      isMiniPayRecipient: isMiniPayRecipient ?? false,
+      isMiniPayRecipient,
     })
   }
 
@@ -112,6 +133,10 @@ function SendEnterAmount({ route }: Props) {
     })
   }
 
+  const handleSelectAddress = useCallback((address: string) => {
+    setSelectedAddress(address)
+  }, [])
+
   return (
     <EnterAmount
       tokens={tokens}
@@ -123,8 +148,18 @@ function SendEnterAmount({ route }: Props) {
       prepareTransactionError={prepareTransactionError}
       tokenSelectionDisabled={!!forceTokenId}
       onPressProceed={handleReviewSend}
+      disableProceed={lookupStatus === 'loading'}
       ProceedComponent={SendProceed}
       filterChips={filterChips}
+      recipientSlot={
+        <SelectedRecipientCard
+          recipient={recipient}
+          status={lookupStatus}
+          verifiedAddresses={verifiedAddresses}
+          originalAddress={initialRecipient.address}
+          onSelectAddress={handleSelectAddress}
+        />
+      }
     />
   )
 }

package/src/send/SendSelectRecipient.test.tsx

@@ -1,5 +1,5 @@
 import Clipboard from '@react-native-clipboard/clipboard'
-import { act, fireEvent, render, waitFor } from '@testing-library/react-native'
+import { act, fireEvent, render, waitFor, within } from '@testing-library/react-native'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import AppAnalytics from 'src/analytics/AppAnalytics'
@@ -14,10 +14,10 @@ import {
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { RecipientType } from 'src/recipients/recipient'
+import { setupStore } from 'src/redux/store'
 import SendSelectRecipient from 'src/send/SendSelectRecipient'
 import { getDynamicConfigParams } from 'src/statsig'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
-import { setupStore } from 'src/redux/store'
 import { createMockStore, getMockStackScreenProps, getMockStoreData } from 'test/utils'
 import {
   mockAccount,
@@ -237,6 +237,38 @@ describe('SendSelectRecipient', () => {
     })
   })
 
+  it('passes skipRecipientLookup=false when a recent recipient is tapped (cached mappings may be stale)', async () => {
+    const store = createMockStore({
+      ...defaultStore,
+      send: {
+        recentRecipients: [{ ...mockRecipient, address: mockAccount2.toLowerCase() }],
+      },
+      identity: {
+        addressToVerifiedBy: { [mockAccount2.toLowerCase()]: 'valora' },
+      },
+    })
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SendSelectRecipient {...mockScreenProps({})} />
+      </Provider>
+    )
+
+    await act(() => {
+      fireEvent.press(
+        within(getByTestId('SelectRecipient/RecentRecipientPicker')).getByTestId('RecipientItem')
+      )
+    })
+
+    expect(AppAnalytics.track).toHaveBeenCalledWith(SendEvents.send_select_recipient_recent_press, {
+      recipientType: mockRecipient.recipientType,
+    })
+    expect(navigate).toHaveBeenCalledWith(
+      Screens.SendEnterAmount,
+      expect.objectContaining({ skipRecipientLookup: false })
+    )
+  })
+
   it('navigates to send amount when a verified phone recipient is tapped in search results', async () => {
     const store = createMockStore({
       ...storeWithPhoneVerified,
@@ -270,7 +302,7 @@ describe('SendSelectRecipient', () => {
       forceTokenId: undefined,
       recipient: expect.any(Object),
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: false,
+      skipRecipientLookup: true,
     })
   })
   it('navigates to send amount when an address is tapped and the user phone number is not verified', async () => {
@@ -304,7 +336,7 @@ describe('SendSelectRecipient', () => {
       forceTokenId: undefined,
       recipient: expect.any(Object),
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: false,
+      skipRecipientLookup: true,
     })
   })
 
@@ -549,44 +581,7 @@ describe('SendSelectRecipient', () => {
         recipientType: 'PhoneNumber',
       },
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: false,
-    })
-  })
-  it('navigates with isMiniPayRecipient when address is verified by minipay', async () => {
-    const store = createMockStore({
-      ...storeWithPhoneVerified,
-      identity: {
-        e164NumberToAddress: { [mockE164Number3]: [mockAccount3] },
-        addressToVerifiedBy: { [mockAccount3]: 'minipay' },
-      },
-    })
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <SendSelectRecipient {...mockScreenProps({})} />
-      </Provider>
-    )
-    const searchInput = getByTestId('SendSelectRecipientSearchInput')
-
-    await act(() => {
-      fireEvent.changeText(searchInput, mockE164Number3)
-    })
-    await act(() => {
-      fireEvent.press(getByTestId('RecipientItem'))
-    })
-
-    expect(navigate).toHaveBeenCalledWith(Screens.SendEnterAmount, {
-      isFromScan: false,
-      defaultTokenIdOverride: undefined,
-      forceTokenId: undefined,
-      recipient: {
-        address: mockAccount3,
-        displayNumber: '(415) 555-0123',
-        e164PhoneNumber: mockE164Number3,
-        recipientType: 'PhoneNumber',
-      },
-      origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: true,
+      skipRecipientLookup: true,
     })
   })
   it('navigates to address picker when phone number recipient has multiple verified addresses', async () => {
@@ -676,7 +671,7 @@ describe('SendSelectRecipient', () => {
         recipientType: 'PhoneNumber',
       },
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: false,
+      skipRecipientLookup: true,
     })
   })
   it.each([{ searchAddress: mockAccount2 }, { searchAddress: mockAccount3 }])(
@@ -730,7 +725,7 @@ describe('SendSelectRecipient', () => {
           thumbnailPath: undefined,
         },
         origin: SendOrigin.AppSendFlow,
-        isMiniPayRecipient: searchAddress.toLowerCase() === mockAccount3.toLowerCase(),
+        skipRecipientLookup: true,
       })
     }
   )

package/src/send/SendSelectRecipient.tsx

@@ -215,7 +215,8 @@ function SendSelectRecipient({ route }: Props) {
     AppAnalytics.track(SendEvents.send_select_recipient_send_press, {
       recipientType: recipient.recipientType,
     })
-    nextScreen(recipient)
+    // useFetchRecipientVerificationStatus already performed the lookup for search results.
+    nextScreen(recipient, true)
   }, [recipient, recipientVerificationStatus, shareUrl])
 
   const onContactsPermissionGranted = () => {
@@ -231,10 +232,11 @@ function SendSelectRecipient({ route }: Props) {
     AppAnalytics.track(SendEvents.send_select_recipient_recent_press, {
       recipientType: recentRecipient.recipientType,
     })
-    nextScreen(recentRecipient)
+    // Recents may carry stale mappings — let the enter-amount screen refresh.
+    nextScreen(recentRecipient, false)
   }
 
-  const nextScreen = (selectedRecipient: Recipient) => {
+  const nextScreen = (selectedRecipient: Recipient, skipRecipientLookup: boolean) => {
     // use the address from the recipient object
     let address: string | null | undefined = selectedRecipient.address
 
@@ -271,7 +273,7 @@ function SendSelectRecipient({ route }: Props) {
         address,
       },
       origin: SendOrigin.AppSendFlow,
-      isMiniPayRecipient: addressToVerifiedBy?.[address] === 'minipay',
+      skipRecipientLookup,
     })
   }
 

package/src/send/useRecipientLookup.test.tsx

@@ -0,0 +1,139 @@
+import { act, renderHook } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import {
+  fetchAddressVerification,
+  fetchAddressesAndValidate,
+  recipientLookupResolved,
+  updateE164PhoneNumberAddresses,
+} from 'src/identity/actions'
+import { Recipient, RecipientType } from 'src/recipients/recipient'
+import { setupStore } from 'src/redux/store'
+import { useRecipientLookup } from 'src/send/useRecipientLookup'
+import { getMockStoreData } from 'test/utils'
+import { mockAccount, mockAccount2, mockE164Number, mockName } from 'test/values'
+
+jest.mock('src/redux/sagas', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  rootSaga: jest.fn(function* () {}),
+}))
+
+const phoneRecipient: Recipient & { address: string } = {
+  name: mockName,
+  contactId: 'contactId',
+  e164PhoneNumber: mockE164Number,
+  recipientType: RecipientType.PhoneNumber,
+  address: mockAccount,
+}
+
+const addressRecipient: Recipient & { address: string } = {
+  address: mockAccount,
+  recipientType: RecipientType.Address,
+}
+
+function setupHook(
+  recipient: Recipient & { address: string },
+  options?: { skipFetch?: boolean },
+  storeOverrides: Parameters<typeof getMockStoreData>[0] = {}
+) {
+  const { store } = setupStore(getMockStoreData(storeOverrides))
+  const dispatchSpy = jest.spyOn(store, 'dispatch')
+  const { result, rerender } = renderHook(() => useRecipientLookup(recipient, options), {
+    wrapper: ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    ),
+  })
+  return { result, rerender, store, dispatchSpy }
+}
+
+describe('useRecipientLookup', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('dispatches fetchAddressesAndValidate for phone recipients', () => {
+    const { dispatchSpy } = setupHook(phoneRecipient)
+    expect(dispatchSpy).toHaveBeenCalledWith(fetchAddressesAndValidate(mockE164Number))
+  })
+
+  it('dispatches fetchAddressVerification for address-only recipients', () => {
+    const { dispatchSpy } = setupHook(addressRecipient)
+    expect(dispatchSpy).toHaveBeenCalledWith(fetchAddressVerification(mockAccount.toLowerCase()))
+  })
+
+  it('does not dispatch when skipFetch is set (caller already triggered the lookup)', () => {
+    const { dispatchSpy } = setupHook(phoneRecipient, { skipFetch: true })
+    expect(dispatchSpy).not.toHaveBeenCalledWith(fetchAddressesAndValidate(mockE164Number))
+  })
+
+  it('reports loading while the lookup is in flight and resolves to unknown when no verifier is recorded', () => {
+    const { result, store } = setupHook(addressRecipient)
+    expect(result.current.status).toBe('loading')
+
+    act(() => {
+      store.dispatch(recipientLookupResolved())
+    })
+    expect(result.current.status).toBe('unknown')
+  })
+
+  it('returns "unverified" for a phone recipient when the lookup resolved with no verified addresses', () => {
+    const { result, store } = setupHook(phoneRecipient, { skipFetch: true })
+    act(() => {
+      store.dispatch(updateE164PhoneNumberAddresses({ [mockE164Number]: null }, {}))
+    })
+    expect(result.current.status).toBe('unverified')
+  })
+
+  it('returns "verified" when the address has a known verifier', () => {
+    const { result } = setupHook(
+      addressRecipient,
+      { skipFetch: true },
+      {
+        identity: {
+          addressToVerifiedBy: { [mockAccount.toLowerCase()]: 'valora' },
+        },
+      }
+    )
+    expect(result.current.status).toBe('verified')
+  })
+
+  it('returns "unverified" when the address is known to be unverified (verifier=null)', () => {
+    const { result } = setupHook(
+      addressRecipient,
+      { skipFetch: true },
+      {
+        identity: {
+          addressToVerifiedBy: { [mockAccount.toLowerCase()]: null },
+        },
+      }
+    )
+    expect(result.current.status).toBe('unverified')
+  })
+
+  it('returns the verified addresses linked to a phone recipient, filtering out unverified ones', () => {
+    const { result, store } = setupHook(
+      phoneRecipient,
+      { skipFetch: true },
+      {
+        identity: {
+          addressToVerifiedBy: {
+            [mockAccount.toLowerCase()]: 'valora',
+            [mockAccount2.toLowerCase()]: null,
+          },
+        },
+      }
+    )
+    act(() => {
+      store.dispatch(
+        updateE164PhoneNumberAddresses(
+          { [mockE164Number]: [mockAccount.toLowerCase(), mockAccount2.toLowerCase()] },
+          {}
+        )
+      )
+    })
+
+    expect(result.current.verifiedAddresses).toEqual([
+      { address: mockAccount.toLowerCase(), verifier: 'valora' },
+    ])
+  })
+})

package/src/send/useRecipientLookup.ts

@@ -0,0 +1,74 @@
+import { useEffect } from 'react'
+import { fetchAddressVerification, fetchAddressesAndValidate } from 'src/identity/actions'
+import type { AddressToVerifiedByType } from 'src/identity/reducer'
+import {
+  addressToVerifiedBySelector,
+  e164NumberToAddressSelector,
+  recipientLookupLoadingSelector,
+} from 'src/identity/selectors'
+import { Recipient } from 'src/recipients/recipient'
+import { type Verifier, isKnownVerifier } from 'src/recipients/verifier'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+
+export type RecipientLookupStatus = 'unknown' | 'loading' | 'verified' | 'unverified'
+
+export interface VerifiedAddressEntry {
+  address: string
+  verifier: Verifier
+}
+
+function getVerifiedAddresses(
+  addresses: readonly string[],
+  addressToVerifiedBy: AddressToVerifiedByType
+): VerifiedAddressEntry[] {
+  return addresses
+    .map((address) => ({ address, verifier: addressToVerifiedBy[address] }))
+    .filter((entry): entry is VerifiedAddressEntry => isKnownVerifier(entry.verifier))
+}
+
+/**
+ * Dispatches a verification lookup for `recipient` and returns the status plus any verified
+ * addresses linked to the phone number. Pass `skipFetch` when the caller has already triggered
+ * a fresh lookup and re-fetching would be wasteful.
+ */
+export function useRecipientLookup(
+  recipient: Recipient & { address: string },
+  options: { skipFetch?: boolean } = {}
+): { status: RecipientLookupStatus; verifiedAddresses: VerifiedAddressEntry[] } {
+  const dispatch = useDispatch()
+  const e164PhoneNumber = recipient.e164PhoneNumber
+  const recipientAddress = recipient.address.toLowerCase()
+  const skipFetch = !!options.skipFetch
+
+  const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
+  const recipientLookupLoading = useSelector(recipientLookupLoadingSelector)
+
+  useEffect(() => {
+    if (skipFetch || !e164PhoneNumber) return
+    dispatch(fetchAddressesAndValidate(e164PhoneNumber))
+  }, [dispatch, e164PhoneNumber, skipFetch])
+
+  useEffect(() => {
+    if (skipFetch || e164PhoneNumber) return
+    dispatch(fetchAddressVerification(recipientAddress))
+  }, [dispatch, e164PhoneNumber, recipientAddress, skipFetch])
+
+  const cachedAddresses = e164PhoneNumber ? e164NumberToAddress[e164PhoneNumber] : undefined
+  const verifiedAddresses = getVerifiedAddresses(cachedAddresses ?? [], addressToVerifiedBy)
+
+  const verifier = addressToVerifiedBy[recipientAddress]
+
+  let status: RecipientLookupStatus
+  if (recipientLookupLoading) {
+    status = 'loading'
+  } else if (isKnownVerifier(verifier)) {
+    status = 'verified'
+  } else if (verifier === null || cachedAddresses === null) {
+    status = 'unverified'
+  } else {
+    status = 'unknown'
+  }
+
+  return { status, verifiedAddresses }
+}