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

package/package.json

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

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/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/EnterAmount.tsx

@@ -10,7 +10,7 @@ import BackButton from 'src/components/BackButton'
 import { BottomSheetModalRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes } from 'src/components/Button'
 import FeeInfoBottomSheet from 'src/components/FeeInfoBottomSheet'
-import { FilterChip } from 'src/components/FilterChipsCarousel'
+import { FilterChip, isNetworkChip } from 'src/components/FilterChipsCarousel'
 import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
 import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
 import { ReviewDetailsItem } from 'src/components/ReviewTransaction'
@@ -34,6 +34,7 @@ import { Spacing } from 'src/styles/styles'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import { TokenBalance } from 'src/tokens/slice'
 import { PreparedTransactionsResult } from 'src/viem/prepareTransactions'
+import networkConfig from 'src/web3/networkConfig'
 
 export interface ProceedArgs {
   tokenAmount: BigNumber
@@ -113,9 +114,20 @@ export default function EnterAmount({
 }: Props) {
   const { t } = useTranslation()
   const insets = useSafeAreaInsets()
-  const [token, setToken] = useState<TokenBalance>(() => defaultToken ?? tokens[0])
+  const [token, setToken] = useState<TokenBalance | undefined>(() => {
+    if (defaultToken) return defaultToken
+    const activeFilters = filterChips?.filter((chip) => chip.isSelected) ?? []
+    const selectableTokens = tokens.filter((t) =>
+      activeFilters.every((filter) =>
+        isNetworkChip(filter) ? filter.filterFn(t, filter.selectedNetworkIds) : filter.filterFn(t)
+      )
+    )
+    return selectableTokens[0]
+  })
   const [selectedPercentage, setSelectedPercentage] = useState<number | null>(null)
-  const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, token.networkId))
+  const feeCurrencies = useSelector((state) =>
+    feeCurrenciesSelector(state, token?.networkId ?? networkConfig.defaultNetworkId)
+  )
   const networkFee = useNetworkFee(prepareTransactionsResult)
   const localCurrencySymbol = useSelector(getLocalCurrencySymbol) ?? LocalCurrencySymbol.USD
 
@@ -142,6 +154,8 @@ export default function EnterAmount({
   useEffect(() => {
     onClearPreparedTransactions()
 
+    if (!token) return
+
     const canRefresh =
       processedAmounts.token.bignum &&
       processedAmounts.token.bignum.gt(0) &&
@@ -158,9 +172,9 @@ export default function EnterAmount({
   const onOpenTokenPicker = () => {
     tokenBottomSheetRef.current?.snapToIndex(0)
     AppAnalytics.track(SendEvents.token_dropdown_opened, {
-      currentTokenId: token.tokenId,
-      currentTokenAddress: token.address,
-      currentNetworkId: token.networkId,
+      currentTokenId: token?.tokenId ?? '',
+      currentTokenAddress: token?.address ?? null,
+      currentNetworkId: token?.networkId ?? null,
     })
   }
 
@@ -174,6 +188,7 @@ export default function EnterAmount({
   }
 
   const onSelectPercentageAmount = (percentage: number) => {
+    if (!token) return
     handleSelectPercentageAmount(percentage)
     setSelectedPercentage(percentage)
 
@@ -187,6 +202,7 @@ export default function EnterAmount({
   }
 
   const showLowerAmountError =
+    token &&
     processedAmounts.token.bignum &&
     !processedAmounts.token.bignum.lte(token.balance) &&
     !disableBalanceCheck
@@ -205,6 +221,7 @@ export default function EnterAmount({
     prepareTransactionsResult.transactions.length > 0
 
   const disabled =
+    !token ||
     disableProceed ||
     (disableBalanceCheck ? !!processedAmounts.token.bignum?.isZero() : !transactionIsPossible)
 
@@ -236,89 +253,95 @@ export default function EnterAmount({
             onOpenTokenPicker={tokenSelectionDisabled ? undefined : onOpenTokenPicker}
           />
 
-          {prepareTransactionsResult?.type !== 'not-enough-balance-for-gas' && !!networkFee && (
-            <View style={styles.feeContainer}>
-              <ReviewDetailsItem
-                approx
-                testID="SendEnterAmount/NetworkFee"
-                type="token-amount"
-                label={t('networkFee')}
-                tokenAmount={networkFee.amount}
-                localAmount={networkFee.localAmount}
-                tokenInfo={networkFee.token}
-                localCurrencySymbol={localCurrencySymbol}
-                onInfoPress={() => feeInfoBottomSheetRef.current?.snapToIndex(0)}
-              />
+          {token &&
+            prepareTransactionsResult?.type !== 'not-enough-balance-for-gas' &&
+            !!networkFee && (
+              <View style={styles.feeContainer}>
+                <ReviewDetailsItem
+                  approx
+                  testID="SendEnterAmount/NetworkFee"
+                  type="token-amount"
+                  label={t('networkFee')}
+                  tokenAmount={networkFee.amount}
+                  localAmount={networkFee.localAmount}
+                  tokenInfo={networkFee.token}
+                  localCurrencySymbol={localCurrencySymbol}
+                  onInfoPress={() => feeInfoBottomSheetRef.current?.snapToIndex(0)}
+                />
 
-              <FeeInfoBottomSheet forwardedRef={feeInfoBottomSheetRef} networkFee={networkFee} />
-            </View>
-          )}
+                <FeeInfoBottomSheet forwardedRef={feeInfoBottomSheetRef} networkFee={networkFee} />
+              </View>
+            )}
         </View>
 
-        {showLowerAmountError && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.insufficientBalanceWarning.title', {
-              tokenSymbol: token.symbol,
-            })}
-            description={t('sendEnterAmountScreen.insufficientBalanceWarning.description', {
-              tokenSymbol: token.symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/NotEnoughBalanceWarning"
-          />
-        )}
-        {showMaxAmountWarning && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.maxAmountWarning.title')}
-            description={t('sendEnterAmountScreen.maxAmountWarning.description', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrency.symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/MaxAmountWarning"
-          />
-        )}
-        {showNotEnoughBalanceForGasWarning && (
-          <InLineNotification
-            variant={NotificationVariant.Warning}
-            title={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.title', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
-            })}
-            description={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.description', {
-              feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
-            })}
-            style={styles.warning}
-            testID="SendEnterAmount/NotEnoughForGasWarning"
-          />
-        )}
-        {prepareTransactionError && (
-          <InLineNotification
-            variant={NotificationVariant.Error}
-            title={t('sendEnterAmountScreen.prepareTransactionError.title')}
-            description={t('sendEnterAmountScreen.prepareTransactionError.description')}
-            style={styles.warning}
-            testID="SendEnterAmount/PrepareTransactionError"
-          />
-        )}
+        {token && (
+          <>
+            {showLowerAmountError && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.insufficientBalanceWarning.title', {
+                  tokenSymbol: token.symbol,
+                })}
+                description={t('sendEnterAmountScreen.insufficientBalanceWarning.description', {
+                  tokenSymbol: token.symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/NotEnoughBalanceWarning"
+              />
+            )}
+            {showMaxAmountWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.maxAmountWarning.title')}
+                description={t('sendEnterAmountScreen.maxAmountWarning.description', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrency.symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/MaxAmountWarning"
+              />
+            )}
+            {showNotEnoughBalanceForGasWarning && (
+              <InLineNotification
+                variant={NotificationVariant.Warning}
+                title={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.title', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+                })}
+                description={t('sendEnterAmountScreen.notEnoughBalanceForGasWarning.description', {
+                  feeTokenSymbol: prepareTransactionsResult.feeCurrencies[0].symbol,
+                })}
+                style={styles.warning}
+                testID="SendEnterAmount/NotEnoughForGasWarning"
+              />
+            )}
+            {prepareTransactionError && (
+              <InLineNotification
+                variant={NotificationVariant.Error}
+                title={t('sendEnterAmountScreen.prepareTransactionError.title')}
+                description={t('sendEnterAmountScreen.prepareTransactionError.description')}
+                style={styles.warning}
+                testID="SendEnterAmount/PrepareTransactionError"
+              />
+            )}
 
-        {children}
+            {children}
 
-        <EnterAmountOptions
-          onPressAmount={onSelectPercentageAmount}
-          selectedAmount={selectedPercentage}
-          testID="SendEnterAmount/AmountOptions"
-        />
+            <EnterAmountOptions
+              onPressAmount={onSelectPercentageAmount}
+              selectedAmount={selectedPercentage}
+              testID="SendEnterAmount/AmountOptions"
+            />
 
-        <ProceedComponent
-          tokenAmount={processedAmounts.token.bignum}
-          localAmount={processedAmounts.local.bignum}
-          token={token}
-          amountEnteredIn={amountType}
-          onPressProceed={onPressProceed}
-          disabled={disabled}
-          showLoading={prepareTransactionsLoading}
-        />
+            <ProceedComponent
+              tokenAmount={processedAmounts.token.bignum}
+              localAmount={processedAmounts.local.bignum}
+              token={token}
+              amountEnteredIn={amountType}
+              onPressProceed={onPressProceed}
+              disabled={disabled}
+              showLoading={prepareTransactionsLoading}
+            />
+          </>
+        )}
       </KeyboardAwareScrollView>
       <TokenBottomSheet
         forwardedRef={tokenBottomSheetRef}

package/src/send/SendEnterAmount.test.tsx

@@ -308,6 +308,33 @@ describe('SendEnterAmount', () => {
       expect(queryByText('sendEnterAmountScreen.miniPayFilterChip')).toBeFalsy()
     })
 
+    it('should not select a default token when isMiniPayRecipient is true 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>
+      )
+
+      // "Select token" placeholder is rendered in place of the selected token
+      expect(getByText('tokenEnterAmount.selectToken')).toBeTruthy()
+      // Amount input, percentage options, and Review button are not rendered
+      expect(queryByTestId('SendEnterAmount/TokenAmountInput')).toBeNull()
+      expect(queryByTestId('SendEnterAmount/AmountOptions')).toBeNull()
+      expect(queryByTestId('SendEnterAmount/ReviewButton')).toBeNull()
+      // MiniPay filter chip is still present (inside the token picker)
+      expect(getByText('sendEnterAmountScreen.miniPayFilterChip')).toBeTruthy()
+      // Tapping the token row opens the picker
+      fireEvent.press(getByTestId('SendEnterAmount/TokenSelect'))
+      expect(getByTestId('TokenBottomSheet')).toBeTruthy()
+    })
+
     it('should include isMiniPayRecipient in send_amount_continue analytics', async () => {
       jest.mocked(usePrepareSendTransactions).mockReturnValue({
         prepareTransactionsResult: mockPrepareTransactionsResultPossible,

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,
   }
 }