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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallet-stack",
-  "version": "1.0.0-alpha.135",
+  "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/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,
   }
 }