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

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)