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

package/src/send/SendSelectRecipient.test.tsx

@@ -7,10 +7,9 @@ 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 { RecipientVerificationStatus } from 'src/identity/types'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
-import { RecipientType, getRecipientVerificationStatus } from 'src/recipients/recipient'
+import { RecipientType } from 'src/recipients/recipient'
 import SendSelectRecipient from 'src/send/SendSelectRecipient'
 import { getDynamicConfigParams } from 'src/statsig'
 import { StatsigDynamicConfigs } from 'src/statsig/types'
@@ -31,10 +30,6 @@ import {
 jest.mock('@react-native-clipboard/clipboard')
 jest.mock('src/utils/IosVersionUtils')
 jest.mock('src/recipients/resolve-id')
-jest.mock('src/recipients/recipient', () => ({
-  ...(jest.requireActual('src/recipients/recipient') as any),
-  getRecipientVerificationStatus: jest.fn(),
-}))
 
 jest.mock('react-native-device-info', () => ({ getFontScaleSync: () => 1 }))
 jest.mock('src/statsig')
@@ -203,11 +198,13 @@ describe('SendSelectRecipient', () => {
     expect(getByTestId('SelectRecipient/NoResults')).toBeTruthy()
   })
   it('navigates to send amount when a verified phone recipient is tapped in search results', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
-    const store = createMockStore(storeWithPhoneVerified)
+    const store = createMockStore({
+      ...storeWithPhoneVerified,
+      identity: {
+        e164NumberToAddress: { [mockE164Number2Invite]: [mockAccount3] },
+        addressToVerifiedBy: { [mockAccount3]: 'valora' },
+      },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -237,7 +234,12 @@ describe('SendSelectRecipient', () => {
     })
   })
   it('navigates to send amount when an address is tapped and the user phone number is not verified', async () => {
-    const store = createMockStore(defaultStore)
+    const store = createMockStore({
+      ...defaultStore,
+      identity: {
+        addressToVerifiedBy: { [mockAddressRecipient.address.toLowerCase()]: 'valora' },
+      },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -267,11 +269,12 @@ describe('SendSelectRecipient', () => {
   })
 
   it('dispatches address verification when an address is tapped and the user phone number is verified', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
-    const store = createMockStore(storeWithPhoneVerified)
+    const store = createMockStore({
+      ...storeWithPhoneVerified,
+      identity: {
+        addressToVerifiedBy: { [mockAccount2.toLowerCase()]: 'valora' },
+      },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -299,11 +302,12 @@ describe('SendSelectRecipient', () => {
     expect(store.getActions()).toEqual([fetchAddressVerification(mockAccount2.toLowerCase())])
   })
   it('does not navigate when an unverified phone recipient is tapped and no share URL is configured', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.UNVERIFIED)
-
-    const store = createMockStore(storeWithPhoneVerified)
+    const store = createMockStore({
+      ...storeWithPhoneVerified,
+      identity: {
+        e164NumberToAddress: { [mockE164Number2Invite]: null },
+      },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -340,11 +344,13 @@ describe('SendSelectRecipient', () => {
         inviteFriends: { shareUrl },
       },
     })
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.UNVERIFIED)
 
-    const store = createMockStore(storeWithPhoneVerified)
+    const store = createMockStore({
+      ...storeWithPhoneVerified,
+      identity: {
+        e164NumberToAddress: { [mockE164Number2Invite]: null },
+      },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -373,11 +379,11 @@ describe('SendSelectRecipient', () => {
   })
 
   it('navigates and dispatches address verification when an unknown address is tapped and the user phone number is verified', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.UNVERIFIED)
-
-    const store = createMockStore(storeWithPhoneVerified)
+    // addressToVerifiedBy entry is `null` → checked and not verified
+    const store = createMockStore({
+      ...storeWithPhoneVerified,
+      identity: { addressToVerifiedBy: { [mockAccount2.toLowerCase()]: null } },
+    })
 
     const { getByTestId } = render(
       <Provider store={store}>
@@ -468,10 +474,6 @@ describe('SendSelectRecipient', () => {
   })
 
   it('navigates to send amount when a verified phone recipient with a single address is tapped', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
     const store = createMockStore({
       ...storeWithPhoneVerified,
       identity: {
@@ -511,10 +513,6 @@ describe('SendSelectRecipient', () => {
     })
   })
   it('navigates with isMiniPayRecipient when address is verified by minipay', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
     const store = createMockStore({
       ...storeWithPhoneVerified,
       identity: {
@@ -552,10 +550,6 @@ describe('SendSelectRecipient', () => {
     })
   })
   it('navigates to address picker when phone number recipient has multiple verified addresses', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
     const store = createMockStore({
       ...storeWithPhoneVerified,
       identity: {
@@ -598,10 +592,6 @@ describe('SendSelectRecipient', () => {
     })
   })
   it('navigates to send enter amount when phone number has multiple raw addresses but only one with a verifier', async () => {
-    jest
-      .mocked(getRecipientVerificationStatus)
-      .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
     const store = createMockStore({
       ...storeWithPhoneVerified,
       identity: {
@@ -652,10 +642,6 @@ describe('SendSelectRecipient', () => {
   it.each([{ searchAddress: mockAccount2 }, { searchAddress: mockAccount3 }])(
     'navigates to send enter amount with correct address if an address is entered which also maps to a phone number with multiple addresses',
     async ({ searchAddress }) => {
-      jest
-        .mocked(getRecipientVerificationStatus)
-        .mockReturnValue(RecipientVerificationStatus.VERIFIED)
-
       const store = createMockStore({
         ...storeWithPhoneVerified,
         identity: {

package/src/send/useFetchRecipientVerificationStatus.ts

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react'
 import { phoneNumberVerifiedSelector } from 'src/app/selectors'
 import { fetchAddressVerification, fetchAddressesAndValidate } from 'src/identity/actions'
-import {
-  addressToVerificationStatusSelector,
-  e164NumberToAddressSelector,
-} from 'src/identity/selectors'
+import { addressToVerifiedBySelector, e164NumberToAddressSelector } 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'
@@ -16,7 +13,7 @@ const useFetchRecipientVerificationStatus = () => {
   )
 
   const e164NumberToAddress = useSelector(e164NumberToAddressSelector)
-  const addressToVerificationStatus = useSelector(addressToVerificationStatusSelector)
+  const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
   const phoneNumberVerified = useSelector(phoneNumberVerifiedSelector)
   const dispatch = useDispatch()
 
@@ -36,9 +33,7 @@ const useFetchRecipientVerificationStatus = () => {
     ) {
       dispatch(fetchAddressesAndValidate(selectedRecipient.e164PhoneNumber))
     } else if (selectedRecipient?.address) {
-      if (addressToVerificationStatus[selectedRecipient.address]) {
-        setRecipientVerificationStatus(RecipientVerificationStatus.VERIFIED)
-      } else if (phoneNumberVerified) {
+      if (phoneNumberVerified) {
         dispatch(fetchAddressVerification(selectedRecipient.address))
       } else {
         setRecipientVerificationStatus(RecipientVerificationStatus.UNVERIFIED)
@@ -49,12 +44,12 @@ const useFetchRecipientVerificationStatus = () => {
   useEffect(() => {
     if (recipient && recipientVerificationStatus === RecipientVerificationStatus.UNKNOWN) {
       // e164NumberToAddress is updated after a successful phone number lookup,
-      // addressToVerificationStatus is updated after a successful address lookup
+      // addressToVerifiedBy is updated after a successful address lookup
       setRecipientVerificationStatus(
-        getRecipientVerificationStatus(recipient, e164NumberToAddress, addressToVerificationStatus)
+        getRecipientVerificationStatus(recipient, e164NumberToAddress, addressToVerifiedBy)
       )
     }
-  }, [e164NumberToAddress, addressToVerificationStatus, recipient, recipientVerificationStatus])
+  }, [e164NumberToAddress, addressToVerifiedBy, recipient, recipientVerificationStatus])
 
   return {
     recipient,

package/src/transactions/UserSection.tsx

@@ -1,14 +1,17 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { LayoutAnimation, StyleSheet, Text, View } from 'react-native'
+import { formatShortenedAddress } from 'src/account/utils'
 import AccountNumber from 'src/components/AccountNumber'
 import Expandable from 'src/components/Expandable'
 import Touchable from 'src/components/Touchable'
+import VerifiedBadge from 'src/icons/VerifiedBadge'
 import { Screens } from 'src/navigator/Screens'
 import { getDisplayName, Recipient, recipientHasNumber } from 'src/recipients/recipient'
+import { useVerifierName } from 'src/recipients/verifier'
 import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
-import { getDisplayNumberInternational } from 'src/utils/phoneNumbers'
+import { Spacing } from 'src/styles/styles'
 
 interface Props {
   type: 'sent' | 'received' | 'withdrawn'
@@ -36,11 +39,30 @@ export default function UserSection({
   }
 
   const displayName = getDisplayName(recipient, t)
-  const displayNumber = recipientHasNumber(recipient)
-    ? getDisplayNumberInternational(recipient.e164PhoneNumber)
-    : undefined
   const address = recipient.address || ''
 
+  const verifierName = useVerifierName(recipient.address)
+
+  // Show short address in the secondary row when the primary (displayName) isn't already
+  // a formatted address — i.e., when the recipient has a name or phone number so the
+  // address would add information rather than duplicating the primary.
+  const hasIdentity = !!recipient.name || recipientHasNumber(recipient)
+  const shortAddress =
+    hasIdentity && recipient.address ? formatShortenedAddress(recipient.address) : undefined
+
+  const secondaryContent = verifierName ? (
+    <View style={styles.secondaryContent}>
+      {!!shortAddress && <Text style={styles.secondaryText}>{shortAddress}</Text>}
+      <VerifiedBadge
+        color={colors.contentSecondary}
+        testID={testID ? `${testID}/VerifierBadge` : undefined}
+      />
+      <Text style={styles.secondaryText}>{verifierName}</Text>
+    </View>
+  ) : shortAddress ? (
+    <Text style={styles.secondaryText}>{shortAddress}</Text>
+  ) : null
+
   const sectionLabel = {
     received: t('receivedFrom'),
     sent: t('sentTo'),
@@ -54,16 +76,14 @@ export default function UserSection({
           <Text style={styles.sectionLabel}>{sectionLabel}</Text>
           <Touchable onPress={toggleExpanded} disabled={!expandable}>
             <>
-              <Expandable isExpandable={expandable && !displayNumber} isExpanded={expanded}>
+              <Expandable isExpandable={expandable && !secondaryContent} isExpanded={expanded}>
                 <Text style={styles.username} testID={`${testID}/name`}>
                   {displayName}
                 </Text>
               </Expandable>
-              {!!displayNumber && (
-                <Expandable isExpandable={expandable && !!displayNumber} isExpanded={expanded}>
-                  <Text style={styles.phoneNumber} testID={`${testID}/number`}>
-                    {displayNumber}
-                  </Text>
+              {!!secondaryContent && (
+                <Expandable isExpandable={expandable} isExpanded={expanded}>
+                  <View testID={`${testID}/address`}>{secondaryContent}</View>
                 </Expandable>
               )}
             </>
@@ -104,10 +124,16 @@ const styles = StyleSheet.create({
   username: {
     ...typeScale.bodyMedium,
   },
-  phoneNumber: {
+  secondaryText: {
     ...typeScale.bodySmall,
     color: colors.contentSecondary,
   },
+  secondaryContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.Tiny4,
+    flexShrink: 1,
+  },
   avatarContainer: {
     flex: 1,
     justifyContent: 'center',

package/src/transactions/feed/TransactionDetailsScreen.test.tsx

@@ -47,7 +47,6 @@ import {
   mockClaimRewardTransaction,
   mockCusdAddress,
   mockCusdTokenId,
-  mockDisplayNumber2,
   mockE164Number2,
   mockEarnClaimRewardTransaction,
   mockEarnDepositTransaction,
@@ -326,8 +325,8 @@ describe('TransactionDetailsScreen', () => {
     const nameComponent = getByTestId('TransferSent/name')
     expect(getElementText(nameComponent)).toEqual(mockName)
 
-    const numberComponent = getByTestId('TransferSent/number')
-    expect(getElementText(numberComponent)).toEqual(mockDisplayNumber2)
+    const addressComponent = getByTestId('TransferSent/address')
+    expect(getElementText(addressComponent)).toEqual('0x8C3b...ca4E')
 
     expect(getByTestId('TransactionDetails/FeeRowItem')).toHaveTextContent('0.01 CELO', {
       exact: false,
@@ -359,8 +358,8 @@ describe('TransactionDetailsScreen', () => {
     const nameComponent = getByTestId('TransferReceived/name')
     expect(getElementText(nameComponent)).toEqual(mockName)
 
-    const numberComponent = getByTestId('TransferReceived/number')
-    expect(getElementText(numberComponent)).toEqual(mockDisplayNumber2)
+    const addressComponent = getByTestId('TransferReceived/address')
+    expect(getElementText(addressComponent)).toEqual('0x8C3b...ca4E')
 
     const totalComponent = getByTestId('TotalLineItem/Total')
     expect(getElementText(totalComponent)).toEqual('€4.00')
@@ -381,7 +380,8 @@ describe('TransactionDetailsScreen', () => {
     const nameComponent = getByTestId('RewardReceived/name')
     expect(getElementText(nameComponent)).toEqual('feedItemRewardReceivedTitle')
 
-    expect(queryByTestId('RewardReceived/number')).toBeNull()
+    // Rewards senders don't have a known verifier, so the verifier composite isn't shown.
+    expect(queryByTestId('RewardReceived/VerifierBadge')).toBeNull()
 
     const totalComponent = getByTestId('TotalLineItem/Total')
     expect(getElementText(totalComponent)).toEqual('€4.00')

package/src/utils/phoneNumbers.ts

@@ -69,17 +69,6 @@ export function getDisplayPhoneNumber(phoneNumber: string, defaultCountryCode: s
   }
 }
 
-export function getDisplayNumberInternational(e164PhoneNumber: string) {
-  const countryCode = getCountryCode(e164PhoneNumber)
-  const phoneDetails = parsePhoneNumber(e164PhoneNumber, (countryCode || '').toString())
-  if (phoneDetails) {
-    return phoneDetails.displayNumberInternational
-  } else {
-    // Fallback to input instead of showing nothing for invalid numbers
-    return e164PhoneNumber
-  }
-}
-
 export function isE164NumberStrict(phoneNumber: string) {
   try {
     const parsedPhoneNumber = phoneUtil.parse(phoneNumber)