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

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.135",
+  "version": "1.0.0-alpha.137",
   "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/identity/actions.ts

@@ -15,6 +15,7 @@ export enum Actions {
   CANCEL_IMPORT_CONTACTS = 'IDENTITY/CANCEL_IMPORT_CONTACTS',
   END_IMPORT_CONTACTS = 'IDENTITY/END_IMPORT_CONTACTS',
   FETCH_ADDRESS_VERIFICATION_STATUS = 'IDENTITY/FETCH_ADDRESS_VERIFICATION_STATUS',
+  RECIPIENT_LOOKUP_RESOLVED = 'IDENTITY/RECIPIENT_LOOKUP_RESOLVED',
   CONTACTS_SAVED = 'IDENTITY/CONTACTS_SAVED',
   STORED_PASSWORD_REFRESHED = 'IDENTITY/STORED_PASSWORD_REFRESHED',
 }
@@ -57,6 +58,10 @@ export interface FetchAddressVerificationAction {
   address: string
 }
 
+interface RecipientLookupResolvedAction {
+  type: Actions.RECIPIENT_LOOKUP_RESOLVED
+}
+
 interface ContactsSavedAction {
   type: Actions.CONTACTS_SAVED
   hash: string
@@ -74,6 +79,7 @@ export type ActionTypes =
   | EndImportContactsAction
   | FetchAddressesAndValidateAction
   | FetchAddressVerificationAction
+  | RecipientLookupResolvedAction
   | ContactsSavedAction
   | StoredPasswordRefreshedAction
 
@@ -87,6 +93,10 @@ export const fetchAddressVerification = (address: string): FetchAddressVerificat
   address,
 })
 
+export const recipientLookupResolved = (): RecipientLookupResolvedAction => ({
+  type: Actions.RECIPIENT_LOOKUP_RESOLVED,
+})
+
 export const updateE164PhoneNumberAddresses = (
   e164NumberToAddress: E164NumberToAddressType,
   addressToE164Number: AddressToE164NumberType,

package/src/identity/contactMapping.test.ts

@@ -15,6 +15,7 @@ import {
   contactsSaved,
   fetchAddressVerification,
   fetchAddressesAndValidate,
+  recipientLookupResolved,
   updateE164PhoneNumberAddresses,
 } from 'src/identity/actions'
 import {
@@ -118,6 +119,7 @@ describe('Fetch Addresses Saga', () => {
             {}
           )
         )
+        .put(recipientLookupResolved())
         .run()
 
       expect(mockFetch).toHaveBeenCalledTimes(1)
@@ -228,6 +230,7 @@ describe('Fetch Addresses Saga', () => {
           [call(retrieveSignedMessage), 'some signed message'],
         ])
         .put(showErrorOrFallback(expect.anything(), ErrorMessages.ADDRESS_LOOKUP_FAILURE))
+        .put(recipientLookupResolved())
         .run()
     })
   })
@@ -249,6 +252,7 @@ describe('Fetch Address Verification Saga', () => {
         [call(retrieveSignedMessage), 'some signed message'],
       ])
       .put(updateE164PhoneNumberAddresses({}, {}, { [mockAccount.toLowerCase()]: 'minipay' }))
+      .put(recipientLookupResolved())
       .run()
 
     expect(mockFetch).toHaveBeenCalledTimes(1)
@@ -296,6 +300,7 @@ describe('Fetch Address Verification Saga', () => {
       ])
       .not.put.actionType(Actions.UPDATE_E164_PHONE_NUMBER_ADDRESSES)
       .put(showErrorOrFallback(expect.anything(), ErrorMessages.ADDRESS_LOOKUP_FAILURE))
+      .put(recipientLookupResolved())
       .run()
     expect(AppAnalytics.track).toHaveBeenCalledWith(IdentityEvents.address_lookup_error, {
       error: 'Unable to fetch verification status for this address',

package/src/identity/contactMapping.ts

@@ -13,6 +13,7 @@ import {
   FetchAddressesAndValidateAction,
   contactsSaved,
   endImportContacts,
+  recipientLookupResolved,
   updateE164PhoneNumberAddresses,
   updateImportContactsProgress,
 } from 'src/identity/actions'
@@ -212,6 +213,8 @@ export function* fetchAddressesAndValidateSaga({ e164Number }: FetchAddressesAnd
     AppAnalytics.track(IdentityEvents.phone_number_lookup_error, {
       error: error.message,
     })
+  } finally {
+    yield* put(recipientLookupResolved())
   }
 }
 
@@ -239,6 +242,8 @@ export function* fetchAddressVerificationSaga({ address }: FetchAddressVerificat
     )
     yield* put(showErrorOrFallback(error, ErrorMessages.ADDRESS_LOOKUP_FAILURE))
     AppAnalytics.track(IdentityEvents.address_lookup_error, { error: error.message })
+  } finally {
+    yield* put(recipientLookupResolved())
   }
 }
 

package/src/identity/reducer.test.ts

@@ -0,0 +1,29 @@
+import {
+  Actions,
+  fetchAddressVerification,
+  fetchAddressesAndValidate,
+  recipientLookupResolved,
+} from 'src/identity/actions'
+import { reducer } from 'src/identity/reducer'
+
+const initialState = reducer(undefined, { type: 'INIT' } as any)
+
+describe('identity reducer', () => {
+  describe('recipientLookupLoading', () => {
+    it(`is set true on ${Actions.FETCH_ADDRESSES_AND_VALIDATION_STATUS}`, () => {
+      const next = reducer(initialState, fetchAddressesAndValidate('+15551234567'))
+      expect(next.recipientLookupLoading).toBe(true)
+    })
+
+    it(`is set true on ${Actions.FETCH_ADDRESS_VERIFICATION_STATUS}`, () => {
+      const next = reducer(initialState, fetchAddressVerification('0xabc'))
+      expect(next.recipientLookupLoading).toBe(true)
+    })
+
+    it(`is cleared on ${Actions.RECIPIENT_LOOKUP_RESOLVED}`, () => {
+      const loadingState = { ...initialState, recipientLookupLoading: true }
+      const next = reducer(loadingState, recipientLookupResolved())
+      expect(next.recipientLookupLoading).toBe(false)
+    })
+  })
+})

package/src/identity/reducer.ts

@@ -49,6 +49,8 @@ interface State {
   importContactsProgress: ImportContactProgress
   // Mapping of address to the entity that verified it (e.g. "valora", "minipay")
   addressToVerifiedBy: AddressToVerifiedByType
+  // Single boolean is safe because both lookup sagas use `takeLatest` — at most one in flight.
+  recipientLookupLoading: boolean
   lastSavedContactsHash: string | null
   shouldRefreshStoredPasswordHash: boolean
 }
@@ -64,6 +66,7 @@ const initialState: State = {
     total: 0,
   },
   addressToVerifiedBy: {},
+  recipientLookupLoading: false,
   lastSavedContactsHash: null,
   shouldRefreshStoredPasswordHash: false,
 }
@@ -85,6 +88,7 @@ export const reducer = (
           current: 0,
           total: 0,
         },
+        recipientLookupLoading: false,
       }
     }
     case Actions.UPDATE_E164_PHONE_NUMBER_ADDRESSES:
@@ -139,6 +143,11 @@ export const reducer = (
         addressToE164Number: state.addressToE164Number,
         e164NumberToAddress: state.e164NumberToAddress,
       }
+    case Actions.FETCH_ADDRESSES_AND_VALIDATION_STATUS:
+      return {
+        ...state,
+        recipientLookupLoading: true,
+      }
     case Actions.FETCH_ADDRESS_VERIFICATION_STATUS:
       return {
         ...state,
@@ -146,6 +155,12 @@ export const reducer = (
           ...state.addressToVerifiedBy,
           [action.address]: undefined,
         },
+        recipientLookupLoading: true,
+      }
+    case Actions.RECIPIENT_LOOKUP_RESOLVED:
+      return {
+        ...state,
+        recipientLookupLoading: false,
       }
     case Actions.CONTACTS_SAVED:
       return {

package/src/identity/saga.ts

@@ -7,7 +7,7 @@ import {
 import { Actions } from 'src/identity/actions'
 import Logger from 'src/utils/Logger'
 import { safely } from 'src/utils/safely'
-import { cancelled, spawn, takeEvery, takeLatest, takeLeading } from 'typed-redux-saga'
+import { cancelled, spawn, takeLatest, takeLeading } from 'typed-redux-saga'
 
 const TAG = 'identity/saga'
 
@@ -20,7 +20,7 @@ function* watchContactMapping() {
 }
 
 function* watchFetchAddressVerification() {
-  yield* takeEvery(Actions.FETCH_ADDRESS_VERIFICATION_STATUS, safely(fetchAddressVerificationSaga))
+  yield* takeLatest(Actions.FETCH_ADDRESS_VERIFICATION_STATUS, safely(fetchAddressVerificationSaga))
 }
 
 export function* identitySaga() {

package/src/identity/selectors.ts

@@ -3,6 +3,8 @@ import { RootState } from 'src/redux/reducers'
 export const e164NumberToAddressSelector = (state: RootState) => state.identity.e164NumberToAddress
 export const addressToE164NumberSelector = (state: RootState) => state.identity.addressToE164Number
 export const addressToVerifiedBySelector = (state: RootState) => state.identity.addressToVerifiedBy
+export const recipientLookupLoadingSelector = (state: RootState) =>
+  state.identity.recipientLookupLoading
 export const importContactsProgressSelector = (state: RootState) =>
   state.identity.importContactsProgress
 export const addressToDisplayNameSelector = (state: RootState) =>

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/redux/migrations.ts

@@ -2102,4 +2102,11 @@ export const migrations = {
       },
     }
   },
+  258: (state: any) => ({
+    ...state,
+    identity: {
+      ...state.identity,
+      recipientLookupLoading: false,
+    },
+  }),
 }

package/src/redux/store.test.ts

@@ -143,7 +143,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 257,
+          "version": 258,
         },
         "account": {
           "acceptedTerms": false,
@@ -253,6 +253,7 @@ describe('store state', () => {
             "total": 0,
           },
           "lastSavedContactsHash": null,
+          "recipientLookupLoading": false,
           "shouldRefreshStoredPasswordHash": true,
         },
         "imports": {

package/src/redux/store.ts

@@ -30,7 +30,7 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-xyz/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 257,
+  version: 258,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
   blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', transactionFeedV2Api.reducerPath],

package/src/send/SendConfirmation.test.tsx

@@ -23,6 +23,7 @@ import {
   mockCusdTokenBalance,
   mockCusdTokenId,
   mockPoofTokenId,
+  mockRecipient,
   mockTokenBalances,
   mockTokenTransactionData,
 } from 'test/values'
@@ -174,7 +175,27 @@ describe('SendConfirmation', () => {
   it('shows the unknown address warning when the recipient address is not a known app user', () => {
     const { getByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerifiedBy: { [mockAccount]: null },
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: null },
+      },
+    })
+
+    expect(getByTestId('UnknownAddressInfo')).toBeTruthy()
+  })
+
+  it('shows the unknown address warning for phone recipients whose resolved address is known-unverified', () => {
+    const phoneRecipientProps = getMockStackScreenProps(Screens.SendConfirmation, {
+      ...mockBaseScreenProps,
+      transactionData: {
+        ...mockTokenTransactionData,
+        recipient: { ...mockRecipient, address: mockAccount },
+      },
+      prepareTransactionsResult: getSerializablePreparedTransactionsPossible(
+        mockPrepareTransactionsResultPossible
+      ),
+    })
+    const { getByTestId } = renderScreen(phoneRecipientProps, {
+      identity: {
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: null },
       },
     })
 
@@ -184,7 +205,7 @@ describe('SendConfirmation', () => {
   it('does not show the unknown address warning when the recipient address is verified', () => {
     const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerifiedBy: { [mockAccount]: 'valora' },
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: 'valora' },
       },
     })
 

package/src/send/SendConfirmation.tsx

@@ -30,7 +30,6 @@ import { getLocalCurrencyCode, getLocalCurrencySymbol } from 'src/localCurrency/
 import { noHeader } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
-import { RecipientType } from 'src/recipients/recipient'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { sendPayment } from 'src/send/actions'
 import { isSendingSelector } from 'src/send/selectors'
@@ -93,9 +92,7 @@ export default function SendConfirmation({ route: { params } }: Props) {
   const walletAddress = useSelector(walletAddressSelector)
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
   const showUnknownAddressInfo =
-    recipient.recipientType === RecipientType.Address &&
-    !!recipient.address &&
-    addressToVerifiedBy[recipient.address] === null
+    !!recipient.address && addressToVerifiedBy[recipient.address.toLowerCase()] === null
 
   const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, tokenInfo!.networkId))
   const {

package/src/send/SendSelectRecipient.test.tsx

@@ -6,14 +6,19 @@ import AppAnalytics from 'src/analytics/AppAnalytics'
 import { SendEvents } from 'src/analytics/Events'
 import { SendOrigin } from 'src/analytics/types'
 import { getAppConfig } from 'src/appConfig'
-import { fetchAddressVerification, fetchAddressesAndValidate } from 'src/identity/actions'
+import {
+  fetchAddressVerification,
+  fetchAddressesAndValidate,
+  recipientLookupResolved,
+} from 'src/identity/actions'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { RecipientType } from 'src/recipients/recipient'
 import SendSelectRecipient from 'src/send/SendSelectRecipient'
 import { getDynamicConfigParams } from 'src/statsig'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
-import { createMockStore, getMockStackScreenProps } from 'test/utils'
+import { setupStore } from 'src/redux/store'
+import { createMockStore, getMockStackScreenProps, getMockStoreData } from 'test/utils'
 import {
   mockAccount,
   mockAccount2,
@@ -33,6 +38,10 @@ jest.mock('src/recipients/resolve-id')
 
 jest.mock('react-native-device-info', () => ({ getFontScaleSync: () => 1 }))
 jest.mock('src/statsig')
+jest.mock('src/redux/sagas', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  rootSaga: jest.fn(function* () {}),
+}))
 
 const mockScreenProps = ({
   defaultTokenIdOverride,
@@ -197,6 +206,37 @@ describe('SendSelectRecipient', () => {
     })
     expect(getByTestId('SelectRecipient/NoResults')).toBeTruthy()
   })
+  describe('selection spinner', () => {
+    it('shows the spinner while the lookup is in flight and hides it once the saga resolves (error path)', async () => {
+      // Reducer-backed store: tapping a recipient dispatches `fetchAddressesAndValidate`
+      // which flips `recipientLookupLoading` to true; dispatching `recipientLookupResolved`
+      // (the saga's `finally` branch) flips it back to false. We assert the row spinner
+      // tracks the actual state transition, including the no-mapping (error) end state.
+      const { store } = setupStore(getMockStoreData(storeWithPhoneVerified))
+
+      const { getByTestId, queryByTestId } = render(
+        <Provider store={store}>
+          <SendSelectRecipient {...mockScreenProps({})} />
+        </Provider>
+      )
+
+      await act(() => {
+        fireEvent.changeText(getByTestId('SendSelectRecipientSearchInput'), 'George Bogart')
+      })
+      await act(() => {
+        fireEvent.press(getByTestId('RecipientItem'))
+      })
+
+      expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeTruthy()
+
+      await act(() => {
+        store.dispatch(recipientLookupResolved())
+      })
+
+      expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+    })
+  })
+
   it('navigates to send amount when a verified phone recipient is tapped in search results', async () => {
     const store = createMockStore({
       ...storeWithPhoneVerified,

package/src/send/SendSelectRecipient.tsx

@@ -184,8 +184,13 @@ function SendSelectRecipient({ route }: Props) {
   const { contactRecipients, recentRecipients } = useSendRecipients()
   const { mergedRecipients, searchQuery, setSearchQuery } = useMergedSearchRecipients(onSearch)
 
-  const { recipientVerificationStatus, recipient, setSelectedRecipient, unsetSelectedRecipient } =
-    useFetchRecipientVerificationStatus()
+  const {
+    recipientVerificationStatus,
+    recipient,
+    setSelectedRecipient,
+    unsetSelectedRecipient,
+    isSelectedRecipientLoading,
+  } = useFetchRecipientVerificationStatus()
 
   useEffect(() => {
     // Auto-navigate once verification resolves. The picker stays mounted so the
@@ -280,9 +285,7 @@ function SendSelectRecipient({ route }: Props) {
             recipients={mergedRecipients}
             onSelectRecipient={setSelectedRecipient}
             selectedRecipient={recipient}
-            isSelectedRecipientLoading={
-              !!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN
-            }
+            isSelectedRecipientLoading={isSelectedRecipientLoading}
           />
         </>
       )
@@ -327,9 +330,7 @@ function SendSelectRecipient({ route }: Props) {
             recipients={contactRecipients}
             onSelectRecipient={setSelectedRecipient}
             selectedRecipient={recipient}
-            isSelectedRecipientLoading={
-              !!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN
-            }
+            isSelectedRecipientLoading={isSelectedRecipientLoading}
           />
         ) : (
           <>
@@ -344,9 +345,7 @@ function SendSelectRecipient({ route }: Props) {
                 title={t('sendSelectRecipient.recents')}
                 onSelectRecipient={onSelectRecentRecipient}
                 selectedRecipient={recipient}
-                isSelectedRecipientLoading={
-                  !!recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN
-                }
+                isSelectedRecipientLoading={isSelectedRecipientLoading}
                 style={styles.recentRecipientPicker}
               />
             ) : (

package/src/send/useFetchRecipientVerificationStatus.test.tsx

@@ -0,0 +1,131 @@
+import { act, renderHook } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import {
+  fetchAddressVerification,
+  fetchAddressesAndValidate,
+  recipientLookupResolved,
+} from 'src/identity/actions'
+import { RecipientVerificationStatus } from 'src/identity/types'
+import { Recipient, RecipientType } from 'src/recipients/recipient'
+import { setupStore } from 'src/redux/store'
+import useFetchRecipientVerificationStatus from 'src/send/useFetchRecipientVerificationStatus'
+import { getMockStoreData } from 'test/utils'
+import { mockAccount, 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 = {
+  name: mockName,
+  contactId: 'contactId',
+  e164PhoneNumber: mockE164Number,
+  recipientType: RecipientType.PhoneNumber,
+}
+
+const addressRecipient: Recipient = {
+  address: mockAccount,
+  recipientType: RecipientType.Address,
+}
+
+function setupHook(storeOverrides: Parameters<typeof getMockStoreData>[0] = {}) {
+  const { store } = setupStore(getMockStoreData(storeOverrides))
+  const dispatchSpy = jest.spyOn(store, 'dispatch')
+  const { result, rerender } = renderHook(() => useFetchRecipientVerificationStatus(), {
+    wrapper: ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    ),
+  })
+  return { result, rerender, store, dispatchSpy }
+}
+
+describe('useFetchRecipientVerificationStatus', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('starts with no recipient and not loading', () => {
+    const { result } = setupHook()
+    expect(result.current.recipient).toBeNull()
+    expect(result.current.recipientVerificationStatus).toBe(RecipientVerificationStatus.UNKNOWN)
+    expect(result.current.isSelectedRecipientLoading).toBe(false)
+  })
+
+  describe('phone-number recipient', () => {
+    it('dispatches fetchAddressesAndValidate when selected', () => {
+      const { result, dispatchSpy } = setupHook()
+      act(() => {
+        result.current.setSelectedRecipient(phoneRecipient)
+      })
+      expect(dispatchSpy).toHaveBeenCalledWith(fetchAddressesAndValidate(mockE164Number))
+    })
+
+    it('reports loading once the lookup is dispatched and stops once it resolves', () => {
+      const { result, store } = setupHook()
+
+      act(() => {
+        result.current.setSelectedRecipient(phoneRecipient)
+      })
+      expect(result.current.isSelectedRecipientLoading).toBe(true)
+
+      act(() => {
+        store.dispatch(recipientLookupResolved())
+      })
+      expect(result.current.isSelectedRecipientLoading).toBe(false)
+    })
+  })
+
+  describe('address recipient', () => {
+    it('dispatches fetchAddressVerification when phone is verified', () => {
+      const { result, dispatchSpy } = setupHook({
+        app: { phoneNumberVerified: true },
+      })
+      act(() => {
+        result.current.setSelectedRecipient(addressRecipient)
+      })
+      expect(dispatchSpy).toHaveBeenCalledWith(fetchAddressVerification(mockAccount))
+    })
+
+    it('marks address recipient as unverified when phone is not verified', () => {
+      const { result } = setupHook({ app: { phoneNumberVerified: false } })
+      act(() => {
+        result.current.setSelectedRecipient(addressRecipient)
+      })
+      expect(result.current.recipientVerificationStatus).toBe(
+        RecipientVerificationStatus.UNVERIFIED
+      )
+      expect(result.current.isSelectedRecipientLoading).toBe(false)
+    })
+
+    it('reports loading once the lookup is dispatched and stops once it resolves', () => {
+      const { result, store } = setupHook({ app: { phoneNumberVerified: true } })
+
+      act(() => {
+        result.current.setSelectedRecipient(addressRecipient)
+      })
+      expect(result.current.isSelectedRecipientLoading).toBe(true)
+
+      act(() => {
+        store.dispatch(recipientLookupResolved())
+      })
+      expect(result.current.isSelectedRecipientLoading).toBe(false)
+    })
+  })
+
+  it('clears recipient and verification status on unset', () => {
+    const { result } = setupHook()
+    act(() => {
+      result.current.setSelectedRecipient(phoneRecipient)
+    })
+    expect(result.current.isSelectedRecipientLoading).toBe(true)
+
+    act(() => {
+      result.current.unsetSelectedRecipient()
+    })
+    expect(result.current.recipient).toBeNull()
+    expect(result.current.recipientVerificationStatus).toBe(RecipientVerificationStatus.UNKNOWN)
+    expect(result.current.isSelectedRecipientLoading).toBe(false)
+  })
+})

package/src/send/useFetchRecipientVerificationStatus.ts

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react'
 import { phoneNumberVerifiedSelector } from 'src/app/selectors'
 import { fetchAddressVerification, fetchAddressesAndValidate } from 'src/identity/actions'
-import { addressToVerifiedBySelector, e164NumberToAddressSelector } from 'src/identity/selectors'
+import {
+  addressToVerifiedBySelector,
+  e164NumberToAddressSelector,
+  recipientLookupLoadingSelector,
+} from 'src/identity/selectors'
 import { RecipientVerificationStatus } from 'src/identity/types'
 import { Recipient, RecipientType, getRecipientVerificationStatus } from 'src/recipients/recipient'
 import { useDispatch, useSelector } from 'src/redux/hooks'
@@ -14,6 +18,7 @@ const useFetchRecipientVerificationStatus = () => {
 
   const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
+  const recipientLookupLoading = useSelector(recipientLookupLoadingSelector)
   const phoneNumberVerified = useSelector(phoneNumberVerifiedSelector)
   const dispatch = useDispatch()
 
@@ -51,11 +56,14 @@ const useFetchRecipientVerificationStatus = () => {
     }
   }, [e164NumberToAddress, addressToVerifiedBy, recipient, recipientVerificationStatus])
 
+  const isSelectedRecipientLoading = !!recipient && recipientLookupLoading
+
   return {
     recipient,
     setSelectedRecipient,
     unsetSelectedRecipient,
     recipientVerificationStatus,
+    isSelectedRecipientLoading,
   }
 }