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

package/locales/base/translation.json

@@ -2174,6 +2174,7 @@
     "recipient": "Recipient",
     "explanation": "<0>{{name}}</0> has more than one wallet linked to the phone number. Choose which one to send to."
   },
+  "unverifiedAddress": "Unverified",
   "sendSelectRecipient": {
     "searchText": "Search by name, phone, wallet...",
     "searchInputLabel": "To",

package/package.json

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

package/src/components/ReviewTransaction.test.tsx

@@ -172,6 +172,32 @@ describe('ReviewSummaryItemContact', () => {
     expect(subtitle).toHaveTextContent('MiniPay', { exact: false })
   })
 
+  it('shows the unverified warning in the subtitle for phone recipients with a known-unverified address', () => {
+    const address = '0x0123456789012345678901234567890123456789'
+    const recipient = {
+      name: 'John Doe',
+      e164PhoneNumber: '+222222222',
+      address,
+    } as Recipient
+    const tree = renderContact(recipient, {
+      identity: { addressToVerifiedBy: { [address]: null } },
+    })
+
+    const subtitle = tree.getByTestId('ContactItem/SecondaryValue')
+    expect(subtitle).toHaveTextContent('0x0123...6789', { exact: false })
+    expect(subtitle).toHaveTextContent('unverifiedAddress', { exact: false })
+  })
+
+  it('omits the unverified warning for address-only recipients (the address is already the primary value)', () => {
+    const address = '0x0123456789012345678901234567890123456789'
+    const recipient = { address } as Recipient
+    const tree = renderContact(recipient, {
+      identity: { addressToVerifiedBy: { [address]: null } },
+    })
+
+    expect(tree.queryByTestId('ContactItem/SecondaryValue')).toBeNull()
+  })
+
   it('logs an error if no name/phone/address exist', () => {
     const recipient = {} as Recipient
     const tree = renderContact(recipient)

package/src/components/ReviewTransaction.tsx

@@ -11,6 +11,7 @@ import CustomHeader from 'src/components/header/CustomHeader'
 import SkeletonPlaceholder from 'src/components/SkeletonPlaceholder'
 import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import Touchable from 'src/components/Touchable'
+import AttentionIcon from 'src/icons/Attention'
 import InfoIcon from 'src/icons/InfoIcon'
 import WalletIcon from 'src/icons/navigator/Wallet'
 import PhoneIcon from 'src/icons/Phone'
@@ -126,17 +127,31 @@ export function ReviewSummaryItem(props: {
 
 function renderAddressAndVerifier(
   shortAddress: string | undefined,
-  verifierName: string | undefined
+  verifierName: string | null | undefined
 ): ReactNode {
-  if (!shortAddress && !verifierName) return undefined
+  if (!shortAddress && verifierName === undefined) return undefined
+  const isUnverified = verifierName === null
   return (
     <>
-      {!!shortAddress && <Text style={styles.reviewSummaryItemSecondaryValue}>{shortAddress}</Text>}
-      {!!verifierName && (
+      {!!shortAddress && (
+        <Text style={[styles.reviewSummaryItemSecondaryValue, isUnverified && styles.warningText]}>
+          {shortAddress}
+        </Text>
+      )}
+      {isUnverified ? (
         <>
-          <VerifiedBadge color={colors.contentSecondary} />
-          <Text style={styles.reviewSummaryItemSecondaryValue}>{verifierName}</Text>
+          <AttentionIcon size={14} color={colors.warningPrimary} />
+          <Text style={[styles.reviewSummaryItemSecondaryValue, styles.warningText]}>
+            <Trans i18nKey="unverifiedAddress" />
+          </Text>
         </>
+      ) : (
+        !!verifierName && (
+          <>
+            <VerifiedBadge color={colors.contentSecondary} />
+            <Text style={styles.reviewSummaryItemSecondaryValue}>{verifierName}</Text>
+          </>
+        )
       )}
     </>
   )
@@ -155,6 +170,7 @@ export function ReviewSummaryItemContact({
     const phone = recipient.displayNumber || recipient.e164PhoneNumber
     // For recipients with a phone mapping, surface the resolved on-chain address (and verifier,
     // if known) as a subtitle so the user can verify the actual destination they are signing.
+    // When the address is known to be unverified, swap the verified badge for a warning.
     const shortAddress = recipient.address ? formatShortenedAddress(recipient.address) : undefined
     const phoneSubtitle = renderAddressAndVerifier(shortAddress, verifierName)
 
@@ -169,7 +185,9 @@ export function ReviewSummaryItemContact({
     if (recipient.address) {
       return {
         title: recipient.address,
-        subtitle: renderAddressAndVerifier(undefined, verifierName),
+        // For plain wallet recipients, suppress the unverified warning
+        // by collapsing `null` to `undefined`.
+        subtitle: renderAddressAndVerifier(undefined, verifierName ?? undefined),
         icon: WalletIcon,
       }
     }
@@ -513,6 +531,9 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     color: colors.contentSecondary,
   },
+  warningText: {
+    color: colors.warningPrimary,
+  },
   reviewSummaryItemSecondaryValueWrapper: {
     flexDirection: 'row',
     gap: Spacing.Smallest8,

package/src/recipients/verifier.ts

@@ -13,8 +13,10 @@ export function isKnownVerifier(verifier: string | null | undefined): verifier i
   return !!verifier && Object.hasOwn(VERIFIERS, verifier)
 }
 
-export function useVerifierName(address: string | undefined): string | undefined {
+export function useVerifierName(address: string | undefined): string | null | undefined {
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
-  const verifier = address ? addressToVerifiedBy[address.toLowerCase()] : undefined
-  return isKnownVerifier(verifier) ? VERIFIERS[verifier].name : undefined
+  if (!address) return undefined
+  const verifier = addressToVerifiedBy[address.toLowerCase()]
+  if (isKnownVerifier(verifier)) return VERIFIERS[verifier].name
+  return verifier === null ? null : undefined
 }

package/src/send/SendConfirmation.test.tsx

@@ -23,6 +23,7 @@ import {
   mockCusdTokenBalance,
   mockCusdTokenId,
   mockPoofTokenId,
+  mockRecipient,
   mockTokenBalances,
   mockTokenTransactionData,
 } from 'test/values'
@@ -174,7 +175,27 @@ describe('SendConfirmation', () => {
   it('shows the unknown address warning when the recipient address is not a known app user', () => {
     const { getByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerifiedBy: { [mockAccount]: null },
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: null },
+      },
+    })
+
+    expect(getByTestId('UnknownAddressInfo')).toBeTruthy()
+  })
+
+  it('shows the unknown address warning for phone recipients whose resolved address is known-unverified', () => {
+    const phoneRecipientProps = getMockStackScreenProps(Screens.SendConfirmation, {
+      ...mockBaseScreenProps,
+      transactionData: {
+        ...mockTokenTransactionData,
+        recipient: { ...mockRecipient, address: mockAccount },
+      },
+      prepareTransactionsResult: getSerializablePreparedTransactionsPossible(
+        mockPrepareTransactionsResultPossible
+      ),
+    })
+    const { getByTestId } = renderScreen(phoneRecipientProps, {
+      identity: {
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: null },
       },
     })
 
@@ -184,7 +205,7 @@ describe('SendConfirmation', () => {
   it('does not show the unknown address warning when the recipient address is verified', () => {
     const { queryByTestId } = renderScreen(mockSendConfirmationProps, {
       identity: {
-        addressToVerifiedBy: { [mockAccount]: 'valora' },
+        addressToVerifiedBy: { [mockAccount.toLowerCase()]: 'valora' },
       },
     })
 

package/src/send/SendConfirmation.tsx

@@ -30,7 +30,6 @@ import { getLocalCurrencyCode, getLocalCurrencySymbol } from 'src/localCurrency/
 import { noHeader } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
-import { RecipientType } from 'src/recipients/recipient'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { sendPayment } from 'src/send/actions'
 import { isSendingSelector } from 'src/send/selectors'
@@ -93,9 +92,7 @@ export default function SendConfirmation({ route: { params } }: Props) {
   const walletAddress = useSelector(walletAddressSelector)
   const addressToVerifiedBy = useSelector(addressToVerifiedBySelector)
   const showUnknownAddressInfo =
-    recipient.recipientType === RecipientType.Address &&
-    !!recipient.address &&
-    addressToVerifiedBy[recipient.address] === null
+    !!recipient.address && addressToVerifiedBy[recipient.address.toLowerCase()] === null
 
   const feeCurrencies = useSelector((state) => feeCurrenciesSelector(state, tokenInfo!.networkId))
   const {