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

package/src/identity/reducer.ts

@@ -31,12 +31,11 @@ export interface ImportContactProgress {
   total: number
 }
 
-export interface AddressToVerificationStatus {
-  [address: string]: boolean | undefined
-}
-
 export interface AddressToVerifiedByType {
-  [address: string]: string | undefined
+  // undefined = never checked / unknown
+  // null      = checked, no known verifier
+  // string    = checked, verified by that verifier (e.g. "valora", "minipay")
+  [address: string]: string | null | undefined
 }
 
 interface State {
@@ -48,8 +47,6 @@ interface State {
   // Has the user already been asked for contacts permission
   askedContactsPermission: boolean
   importContactsProgress: ImportContactProgress
-  // Mapping of address to verification status; undefined entries represent a loading state
-  addressToVerificationStatus: AddressToVerificationStatus
   // Mapping of address to the entity that verified it (e.g. "valora", "minipay")
   addressToVerifiedBy: AddressToVerifiedByType
   lastSavedContactsHash: string | null
@@ -66,7 +63,6 @@ const initialState: State = {
     current: 0,
     total: 0,
   },
-  addressToVerificationStatus: {},
   addressToVerifiedBy: {},
   lastSavedContactsHash: null,
   shouldRefreshStoredPasswordHash: false,
@@ -144,21 +140,11 @@ export const reducer = (
         e164NumberToAddress: state.e164NumberToAddress,
       }
     case Actions.FETCH_ADDRESS_VERIFICATION_STATUS:
-      // If the current status is false or does not exist, we set it to undefined
-      // to mark it as being in a loading state.
-      return {
-        ...state,
-        addressToVerificationStatus: {
-          ...state.addressToVerificationStatus,
-          [action.address]: state.addressToVerificationStatus[action.address] || undefined,
-        },
-      }
-    case Actions.ADDRESS_VERIFICATION_STATUS_RECEIVED:
       return {
         ...state,
-        addressToVerificationStatus: {
-          ...state.addressToVerificationStatus,
-          [action.address]: action.addressVerified,
+        addressToVerifiedBy: {
+          ...state.addressToVerifiedBy,
+          [action.address]: undefined,
         },
       }
     case Actions.CONTACTS_SAVED:

package/src/identity/selectors.ts

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

package/src/recipients/RecipientItemV2.test.tsx

@@ -4,23 +4,12 @@ import 'react-native'
 import { Provider } from 'react-redux'
 import RecipientItem from 'src/recipients/RecipientItemV2'
 import { createMockStore } from 'test/utils'
-import {
-  mockAddressRecipient,
-  mockInvitableRecipient,
-  mockPhoneRecipient,
-  mockRecipient,
-} from 'test/values'
+import { mockAddressRecipient, mockInvitableRecipient, mockPhoneRecipient } from 'test/values'
 
 describe('RecipientItemV2', () => {
-  it('renders correctly with no app icon if phone number recipient is not a known app user (number never looked up)', () => {
-    const { queryByTestId, getByText } = render(
-      <Provider
-        store={createMockStore({
-          identity: {
-            e164NumberToAddress: {},
-          },
-        })}
-      >
+  it('renders contact name and phone number', () => {
+    const { getByText } = render(
+      <Provider store={createMockStore()}>
         <RecipientItem
           recipient={mockInvitableRecipient}
           onSelectRecipient={jest.fn()}
@@ -30,35 +19,23 @@ describe('RecipientItemV2', () => {
     )
     expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
     expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
-    expect(queryByTestId('RecipientItem/AppIcon')).toBeFalsy()
-    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
   })
 
-  it('renders correctly with no app icon if phone number recipient is not a known app user (number looked up before)', () => {
-    const { queryByTestId, getByText } = render(
-      <Provider
-        store={createMockStore({
-          identity: {
-            e164NumberToAddress: { [mockInvitableRecipient.e164PhoneNumber]: null },
-          },
-        })}
-      >
+  it('renders spinner while loading', () => {
+    const { getByTestId } = render(
+      <Provider store={createMockStore()}>
         <RecipientItem
           recipient={mockInvitableRecipient}
           onSelectRecipient={jest.fn()}
-          loading={false}
+          loading={true}
         />
       </Provider>
     )
-    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
-    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
-    expect(queryByTestId('RecipientItem/AppIcon')).toBeFalsy()
-    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
+    expect(getByTestId('RecipientItem/ActivityIndicator')).toBeTruthy()
   })
 
-  it('renders correctly with app icon if phone number recipient is an app user', () => {
-    const { queryByTestId, getByText, getByTestId } = render(
-      // default store includes a cached mapping
+  it('hides spinner when not loading', () => {
+    const { queryByTestId } = render(
       <Provider store={createMockStore()}>
         <RecipientItem
           recipient={mockInvitableRecipient}
@@ -67,47 +44,9 @@ describe('RecipientItemV2', () => {
         />
       </Provider>
     )
-    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
-    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
-    expect(getByTestId('RecipientItem/AppIcon')).toBeTruthy()
-    expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
-  })
-
-  it('renders correctly with app icon if address recipient is an app user', () => {
-    const { queryByTestId, getByText, getByTestId } = render(
-      // default store includes a cached mapping
-      <Provider
-        store={createMockStore({
-          identity: {
-            addressToVerificationStatus: {
-              [mockRecipient.address]: true,
-            },
-          },
-        })}
-      >
-        <RecipientItem recipient={mockRecipient} onSelectRecipient={jest.fn()} loading={false} />
-      </Provider>
-    )
-    expect(getByText(mockRecipient.name)).toBeTruthy()
-    expect(getByTestId('RecipientItem/AppIcon')).toBeTruthy()
     expect(queryByTestId('RecipientItem/ActivityIndicator')).toBeFalsy()
   })
 
-  it('renders correctly if loading is set to true', () => {
-    const { getByText, getByTestId } = render(
-      <Provider store={createMockStore()}>
-        <RecipientItem
-          recipient={mockInvitableRecipient}
-          onSelectRecipient={jest.fn()}
-          loading={true}
-        />
-      </Provider>
-    )
-    expect(getByText(mockInvitableRecipient.name)).toBeTruthy()
-    expect(getByText(mockInvitableRecipient.displayNumber)).toBeTruthy()
-    expect(getByTestId('RecipientItem/ActivityIndicator')).toBeTruthy()
-  })
-
   it('tapping item invokes onSelectRecipient', () => {
     const mockSelectRecipient = jest.fn()
     const { getByTestId } = render(

package/src/recipients/RecipientItemV2.tsx

@@ -1,23 +1,16 @@
-import React, { memo, useMemo } from 'react'
+import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActivityIndicator, Keyboard, StyleSheet, Text, View } from 'react-native'
 import ContactCircle from 'src/components/ContactCircle'
 import Touchable from 'src/components/Touchable'
 import PhoneIcon from 'src/icons/Phone'
 import WalletIcon from 'src/icons/navigator/Wallet'
-import {
-  addressToVerificationStatusSelector,
-  e164NumberToAddressSelector,
-} from 'src/identity/selectors'
-import Checkmark from 'src/icons/Checkmark'
 import {
   Recipient,
-  RecipientType,
   getDisplayDetail,
   getDisplayName,
   recipientHasNumber,
 } from 'src/recipients/recipient'
-import { useSelector } from 'src/redux/hooks'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
@@ -29,8 +22,6 @@ interface Props {
   selected?: boolean
 }
 
-const ICON_SIZE = 10
-
 function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Props) {
   const { t } = useTranslation()
 
@@ -39,17 +30,6 @@ function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Prop
     onSelectRecipient(recipient)
   }
 
-  const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
-  const addressToVerificationStatus = useSelector(addressToVerificationStatusSelector)
-
-  // TODO(ACT-980): avoid icon flash when a known contact is clicked
-  const showAppIcon = useMemo(() => {
-    if (recipient.recipientType === RecipientType.PhoneNumber) {
-      return recipient.e164PhoneNumber && !!e164NumberToAddress[recipient.e164PhoneNumber]
-    }
-    return recipient.address && addressToVerificationStatus[recipient.address]
-  }, [e164NumberToAddress, recipient])
-
   return (
     <Touchable onPress={onPress} testID="RecipientItem">
       <View style={[styles.row, selected && styles.rowSelected]}>
@@ -62,11 +42,6 @@ function RecipientItem({ recipient, onSelectRecipient, loading, selected }: Prop
             borderColor={Colors.borderPrimary}
             DefaultIcon={() => renderDefaultIcon(recipient)} // no need to honor color props here since the color we need match the defaults
           />
-          {!!showAppIcon && (
-            <View style={styles.appIcon} testID="RecipientItem/AppIcon">
-              <Checkmark color={Colors.contentTertiary} height={ICON_SIZE} width={ICON_SIZE} />
-            </View>
-          )}
         </View>
         <View style={styles.contentContainer}>
           <Text numberOfLines={1} ellipsizeMode={'tail'} style={styles.name}>
@@ -121,14 +96,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  appIcon: {
-    position: 'absolute',
-    top: 22,
-    left: 22,
-    backgroundColor: Colors.accent,
-    borderRadius: 100,
-    padding: 2,
-  },
 })
 
 export default memo(RecipientItem)

package/src/recipients/recipient.test.ts

@@ -76,15 +76,16 @@ describe('getRecipientVerificationStatus', () => {
     { recipient: mockRecipient, type: 'with phone number' },
   ])('address recipient $type', ({ recipient }) => {
     it('returns appropriate status', () => {
-      expect(getRecipientVerificationStatus(recipient, {}, { [recipient.address]: true })).toEqual(
+      const key = recipient.address.toLowerCase()
+      expect(getRecipientVerificationStatus(recipient, {}, { [key]: 'valora' })).toEqual(
         RecipientVerificationStatus.VERIFIED
       )
-      expect(getRecipientVerificationStatus(recipient, {}, { [recipient.address]: false })).toEqual(
+      expect(getRecipientVerificationStatus(recipient, {}, { [key]: null })).toEqual(
         RecipientVerificationStatus.UNVERIFIED
       )
-      expect(
-        getRecipientVerificationStatus(recipient, {}, { [recipient.address]: undefined })
-      ).toEqual(RecipientVerificationStatus.UNKNOWN)
+      expect(getRecipientVerificationStatus(recipient, {}, { [key]: undefined })).toEqual(
+        RecipientVerificationStatus.UNKNOWN
+      )
       expect(getRecipientVerificationStatus(recipient, {}, {})).toEqual(
         RecipientVerificationStatus.UNKNOWN
       )

package/src/recipients/recipient.ts

@@ -5,7 +5,7 @@ import { formatShortenedAddress } from 'src/account/utils'
 import {
   AddressToDisplayNameType,
   AddressToE164NumberType,
-  AddressToVerificationStatus,
+  AddressToVerifiedByType,
   E164NumberToAddressType,
 } from 'src/identity/reducer'
 import { RecipientVerificationStatus } from 'src/identity/types'
@@ -168,7 +168,7 @@ export function getRecipientFromAddress(
 export function getRecipientVerificationStatus(
   recipient: Recipient,
   e164NumberToAddress: E164NumberToAddressType,
-  addressToVerificationStatus: AddressToVerificationStatus
+  addressToVerifiedBy: AddressToVerifiedByType
 ): RecipientVerificationStatus {
   // phone recipients should always have a number, the extra check is to ensure typing
   if (recipient.recipientType === RecipientType.PhoneNumber && recipientHasNumber(recipient)) {
@@ -183,18 +183,13 @@ export function getRecipientVerificationStatus(
 
     return RecipientVerificationStatus.VERIFIED
   }
-  if (recipientHasAddress(recipient) && recipient.address in addressToVerificationStatus) {
-    switch (addressToVerificationStatus[recipient.address]) {
-      case true:
-        return RecipientVerificationStatus.VERIFIED
-      case false:
-        return RecipientVerificationStatus.UNVERIFIED
-      case undefined:
-        return RecipientVerificationStatus.UNKNOWN
-    }
-  } else {
+  if (recipientHasAddress(recipient)) {
+    const entry = addressToVerifiedBy[recipient.address.toLowerCase()]
+    if (entry) return RecipientVerificationStatus.VERIFIED
+    if (entry === null) return RecipientVerificationStatus.UNVERIFIED
     return RecipientVerificationStatus.UNKNOWN
   }
+  return RecipientVerificationStatus.UNKNOWN
 }
 
 type PreparedRecipient = Recipient & {

package/src/recipients/verifier.ts

@@ -0,0 +1,20 @@
+import { addressToVerifiedBySelector } from 'src/identity/selectors'
+import { miniPay, valora } from 'src/images/Images'
+import { useSelector } from 'src/redux/hooks'
+
+export const VERIFIERS = {
+  valora: { name: 'Valora', icon: valora },
+  minipay: { name: 'MiniPay', icon: miniPay },
+} as const
+
+export type Verifier = keyof typeof VERIFIERS
+
+export function isKnownVerifier(verifier: string | null | undefined): verifier is Verifier {
+  return !!verifier && Object.hasOwn(VERIFIERS, verifier)
+}
+
+export function useVerifierName(address: string | undefined): string | undefined {
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
+  const verifier = address ? addressToVerifiedBy[address.toLowerCase()] : undefined
+  return isKnownVerifier(verifier) ? VERIFIERS[verifier].name : undefined
+}

package/src/redux/migrations.test.ts

@@ -69,6 +69,7 @@ import {
   v253Schema,
   v254Schema,
   v255Schema,
+  v256Schema,
   v28Schema,
   v2Schema,
   v35Schema,
@@ -1959,4 +1960,28 @@ describe('Redux persist migrations', () => {
     const migratedSchema = migrations[256](oldSchema)
     expect(migratedSchema.identity.secureSendPhoneNumberMapping).toBeUndefined()
   })
+
+  it('works from 256 to 257', () => {
+    const oldSchema = {
+      ...v256Schema,
+      identity: {
+        ...v256Schema.identity,
+        addressToVerificationStatus: {
+          '0xAAA': true,
+          '0xbbb': false,
+          '0xccc': undefined,
+        },
+        addressToVerifiedBy: {
+          '0xddd': 'minipay',
+        },
+      },
+    }
+    const migratedSchema = migrations[257](oldSchema)
+    expect(migratedSchema.identity.addressToVerificationStatus).toBeUndefined()
+    expect(migratedSchema.identity.addressToVerifiedBy).toStrictEqual({
+      '0xddd': 'minipay',
+      '0xaaa': 'valora', // `true` carried over (and lowercased)
+      // `false` and `undefined` entries are dropped — `false` was ambiguous in the old schema
+    })
+  })
 })

package/src/redux/migrations.ts

@@ -2081,4 +2081,25 @@ export const migrations = {
     ...state,
     identity: _.omit(state.identity, 'secureSendPhoneNumberMapping'),
   }),
+  257: (state: any) => {
+    // Carry over previously confirmed verifications (all Valora)
+    const oldMap: Record<string, boolean | undefined> =
+      state.identity?.addressToVerificationStatus ?? {}
+    const carriedOver: Record<string, string> = {}
+    for (const [address, verified] of Object.entries(oldMap)) {
+      if (verified === true) {
+        carriedOver[address.toLowerCase()] = 'valora'
+      }
+    }
+    return {
+      ...state,
+      identity: {
+        ..._.omit(state.identity, 'addressToVerificationStatus'),
+        addressToVerifiedBy: {
+          ...state.identity.addressToVerifiedBy,
+          ...carriedOver,
+        },
+      },
+    }
+  },
 }

package/src/redux/store.test.ts

@@ -143,7 +143,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 256,
+          "version": 257,
         },
         "account": {
           "acceptedTerms": false,
@@ -244,7 +244,6 @@ describe('store state', () => {
         "identity": {
           "addressToDisplayName": {},
           "addressToE164Number": {},
-          "addressToVerificationStatus": {},
           "addressToVerifiedBy": {},
           "askedContactsPermission": false,
           "e164NumberToAddress": {},

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: 256,
+  version: 257,
   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/SelectRecipientAddress.tsx

@@ -9,13 +9,14 @@ 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 { miniPay, valora } from 'src/images/Images'
 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 { useSelector } from 'src/redux/hooks'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
@@ -23,19 +24,8 @@ import { Spacing } from 'src/styles/styles'
 
 type Props = NativeStackScreenProps<StackParamList, Screens.SelectRecipientAddress>
 
-const VERIFIERS = {
-  valora: { name: 'Valora', icon: valora },
-  minipay: { name: 'MiniPay', icon: miniPay },
-} as const
-
-export type Verifier = keyof typeof VERIFIERS
-
 const ICON_SIZE = 40
 
-function isKnownVerifier(verifier: string | undefined): verifier is Verifier {
-  return !!verifier && Object.hasOwn(VERIFIERS, verifier)
-}
-
 function VerifierIcon({ verifier }: { verifier: Verifier }) {
   return <Image source={VERIFIERS[verifier].icon} style={styles.icon} resizeMode="contain" />
 }
@@ -103,7 +93,10 @@ function SelectRecipientAddress({ route }: Props) {
               <VerifierIcon verifier={verifier} />
               <View style={styles.rowContent}>
                 <Text style={styles.address}>{formatShortenedAddress(address)}</Text>
-                <Text style={styles.verifier}>{VERIFIERS[verifier].name}</Text>
+                <View style={styles.verifier}>
+                  <VerifiedBadge color={Colors.contentSecondary} />
+                  <Text style={styles.verifierName}>{VERIFIERS[verifier].name}</Text>
+                </View>
               </View>
             </View>
           </Touchable>
@@ -156,6 +149,11 @@ const styles = StyleSheet.create({
     ...typeScale.labelMedium,
   },
   verifier: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.Tiny4,
+  },
+  verifierName: {
     ...typeScale.bodySmall,
     color: Colors.contentSecondary,
   },

package/src/send/SendConfirmation.test.tsx

@@ -174,7 +174,7 @@ describe('SendConfirmation', () => {
   it('shows the unknown address warning when the recipient address is not a known app user', () => {
     const { getByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerificationStatus: { [mockAccount]: false },
+        addressToVerifiedBy: { [mockAccount]: null },
       },
     })
 
@@ -184,7 +184,7 @@ describe('SendConfirmation', () => {
   it('does not show the unknown address warning when the recipient address is verified', () => {
     const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerificationStatus: { [mockAccount]: true },
+        addressToVerifiedBy: { [mockAccount]: 'valora' },
       },
     })
 
@@ -193,7 +193,7 @@ describe('SendConfirmation', () => {
 
   it('does not show the unknown address warning when the address has not been looked up yet', () => {
     const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
-      identity: { addressToVerificationStatus: {} },
+      identity: { addressToVerifiedBy: {} },
     })
 
     expect(queryByTestId('UnknownAddressInfo')).toBeNull()

package/src/send/SendConfirmation.tsx

@@ -24,7 +24,7 @@ import {
 } from 'src/components/ReviewTransaction'
 import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import TokenIcon from 'src/components/TokenIcon'
-import { addressToVerificationStatusSelector } from 'src/identity/selectors'
+import { addressToVerifiedBySelector } from 'src/identity/selectors'
 import { LocalCurrencySymbol } from 'src/localCurrency/consts'
 import { getLocalCurrencyCode, getLocalCurrencySymbol } from 'src/localCurrency/selectors'
 import { noHeader } from 'src/navigator/Headers'
@@ -91,11 +91,11 @@ export default function SendConfirmation({ route: { params } }: Props) {
   const localAmount = useTokenToLocalAmount(tokenAmount, tokenId)
   const usdAmount = useAmountAsUsd(tokenAmount, tokenId)
   const walletAddress = useSelector(walletAddressSelector)
-  const addressToVerificationStatus = useSelector(addressToVerificationStatusSelector)
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
   const showUnknownAddressInfo =
     recipient.recipientType === RecipientType.Address &&
     !!recipient.address &&
-    addressToVerificationStatus[recipient.address] === false
+    addressToVerifiedBy[recipient.address] === null
 
   const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, tokenInfo!.networkId))
   const {