Resolve ZcashNames (.zec) in Zcash send and tx history

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - added: Show swap KYC/terms modal for NExchange
 - added: Nym mixnet warning in Stake, Unstake, and Claim Rewards scenes
+- added: Resolve and display ZcashNames (.zec) in the Zcash send flow and transaction history.
 - changed: Migrate Thorchain Savers and Thorchain Yield endpoints off NineRealms to gateway.liquify.com.
 
 ## 4.48.0 (staging)

eslint.config.mjs

@@ -167,7 +167,7 @@ export default [
       'src/components/layout/Peek.tsx',
 
       'src/components/modals/AccelerateTxModal.tsx',
-      'src/components/modals/AddressModal.tsx',
+
       'src/components/modals/AirshipFullScreenSpinner.tsx',
       'src/components/modals/AutoLogoutModal.tsx',
       'src/components/modals/BackupModal.tsx',
@@ -288,8 +288,6 @@ export default [
       'src/components/scenes/SwapSettingsScene.tsx',
       'src/components/scenes/SwapSuccessScene.tsx',
 
-      'src/components/scenes/TransactionDetailsScene.tsx',
-
       'src/components/scenes/TransactionsExportScene.tsx',
 
       'src/components/scenes/WalletRestoreScene.tsx',
@@ -360,7 +358,6 @@ export default [
       'src/components/themed/Thermostat.tsx',
       'src/components/themed/Title.tsx',
       'src/components/themed/TransactionListComponents.tsx',
-      'src/components/themed/TransactionListRow.tsx',
 
       'src/components/themed/VectorIcon.tsx',
       'src/components/themed/WalletList.tsx',
@@ -374,7 +371,7 @@ export default [
 
       'src/components/themed/WalletListSwipeableCurrencyRow.tsx',
       'src/components/themed/WalletListSwipeableLoadingRow.tsx',
-      'src/components/tiles/AddressTile2.tsx',
+
       'src/components/tiles/AprCard.tsx',
       'src/components/tiles/CountdownTile.tsx',
       'src/components/tiles/CryptoFiatAmountTile.tsx',

jest.config.js

@@ -11,6 +11,6 @@ module.exports = {
   preset: 'react-native',
   setupFilesAfterEnv: ['./jestSetup.js'],
   transformIgnorePatterns: [
-    '<rootDir>/node_modules/(?!(@react-native|react-native|@react-navigation))'
+    '<rootDir>/node_modules/(?!(@react-native|react-native|@react-navigation|zcashname-sdk|@noble/ed25519))'
   ]
 }

package.json

@@ -186,7 +186,8 @@
     "url-parse": "^1.5.2",
     "use-context-selector": "^2.0.0",
     "yaob": "^0.3.12",
-    "yavent": "^0.1.5"
+    "yavent": "^0.1.5",
+    "zcashname-sdk": "^0.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/components/modals/AddressModal.tsx

@@ -29,6 +29,7 @@ import {
   getFioAddressCache
 } from '../../util/FioAddressUtils'
 import { resolveName } from '../../util/resolveName'
+import { isZnsName, resolveZnsName } from '../../util/zns'
 import { EdgeButton } from '../buttons/EdgeButton'
 import { EdgeTouchableWithoutFeedback } from '../common/EdgeTouchableWithoutFeedback'
 import { showDevError, showError } from '../services/AirshipInstance'
@@ -183,6 +184,7 @@ export class AddressModalComponent extends React.Component<Props, State> {
     return (
       this.checkIfUnstoppableDomain(domain) ||
       this.checkIfEnsDomain(domain) ||
+      this.checkIfZnsName(domain) ||
       this.checkIfAlias(domain)
     )
   }
@@ -193,6 +195,8 @@ export class AddressModalComponent extends React.Component<Props, State> {
   checkIfEnsDomain = (name: string): boolean =>
     ENS_DOMAINS.some(domain => name.endsWith(domain))
 
+  checkIfZnsName = (name: string): boolean => isZnsName(name)
+
   fetchUnstoppableDomainAddress = async (
     resolver: Resolver,
     domain: string,
@@ -232,6 +236,13 @@ export class AddressModalComponent extends React.Component<Props, State> {
     return address
   }
 
+  fetchZnsAddress = async (domain: string): Promise<string> => {
+    const address = await resolveZnsName(domain)
+    if (address == null)
+      throw new ResolutionError('UnregisteredDomain', { domain })
+    return address
+  }
+
   resolveName = async (name: string, currencyTicker: string): Promise<void> => {
     this.setState({ errorLabel: undefined })
     if (name === '') return
@@ -255,6 +266,11 @@ export class AddressModalComponent extends React.Component<Props, State> {
         )
       } else if (this.checkIfEnsDomain(name)) {
         address = await this.fetchEnsAddress(name)
+      } else if (
+        this.checkIfZnsName(name) &&
+        this.props.coreWallet.currencyInfo.pluginId === 'zcash'
+      ) {
+        address = await this.fetchZnsAddress(name)
       }
       if (address == null) {
         throw new ResolutionError('UnsupportedDomain', { domain: name })

src/components/scenes/SendScene2.tsx

@@ -428,7 +428,7 @@ const SendComponent = (props: Props): React.ReactElement => {
   const handleChangeAddress =
     (spendTarget: EdgeSpendTarget) =>
     async (changeAddressResult: ChangeAddressResult): Promise<void> => {
-      const { addressEntryMethod, parsedUri, fioAddress, alias } =
+      const { addressEntryMethod, parsedUri, fioAddress, alias, znsName } =
         changeAddressResult
 
       if (parsedUri != null) {
@@ -468,7 +468,8 @@ const SendComponent = (props: Props): React.ReactElement => {
         }
         spendTarget.otherParams = {
           fioAddress,
-          zanoAlias: alias
+          zanoAlias: alias,
+          znsName
         }
 
         // We can assume the spendTarget object came from the Component spendInfo so simply resetting the spendInfo
@@ -495,10 +496,12 @@ const SendComponent = (props: Props): React.ReactElement => {
     spendTarget: EdgeSpendTarget
   ): React.ReactElement => {
     const { publicAddress, nativeAmount, otherParams = {} } = spendTarget
-    const { fioAddress } = otherParams
+    const { fioAddress, znsName } = otherParams
     let title = ''
     if (fioAddress != null) {
       title = `Send To (${fioAddress}) ${publicAddress}`
+    } else if (znsName != null) {
+      title = `Send To (${znsName}) ${publicAddress}`
     } else {
       title = `Send To ${publicAddress}`
     }
@@ -1320,6 +1323,15 @@ const SendComponent = (props: Props): React.ReactElement => {
             payeeName = zanoAliases[0]
           }
         }
+        // Same idea for ZNS (.zec) names on Zcash
+        if (coreWallet.currencyInfo.pluginId === 'zcash') {
+          const znsNames = spendInfo.spendTargets
+            .map(t => t.otherParams?.znsName)
+            .filter((a): a is string => a != null && a.length > 0)
+          if (znsNames.length === 1) {
+            payeeName = znsNames[0]
+          }
+        }
         for (const target of spendInfo.spendTargets) {
           const { fioAddress } = target.otherParams ?? {}
           if (fioAddress != null) {

src/components/scenes/TransactionDetailsScene.tsx

@@ -27,6 +27,7 @@ import { useHandler } from '../../hooks/useHandler'
 import { useHistoricalRate } from '../../hooks/useHistoricalRate'
 import { useIconColor } from '../../hooks/useIconColor'
 import { useWatch } from '../../hooks/useWatch'
+import { useZnsName } from '../../hooks/useZnsName'
 import { toPercentString } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { getExchangeDenom } from '../../selectors/DenominationSelectors'
@@ -444,7 +445,12 @@ export const TransactionDetailsComponent: React.FC<Props> = props => {
     direction === 'receive'
       ? lstrings.transaction_details_sender
       : lstrings.transaction_details_recipient
-  const personName = localMetadata.name ?? personLabel
+  const recipientAddress = transaction.spendTargets?.[0]?.publicAddress
+  const znsName = useZnsName(wallet.currencyInfo.pluginId, recipientAddress)
+  const personName =
+    localMetadata.name != null && localMetadata.name !== ''
+      ? localMetadata.name
+      : znsName ?? personLabel
   const personHeader = sprintf(
     lstrings.transaction_details_person_name,
     personLabel

src/components/themed/TransactionListRow.tsx

@@ -24,6 +24,7 @@ import { useDisplayDenom } from '../../hooks/useDisplayDenom'
 import { displayFiatAmount } from '../../hooks/useFiatText'
 import { useHandler } from '../../hooks/useHandler'
 import { useHistoricalRate } from '../../hooks/useHistoricalRate'
+import { useZnsName } from '../../hooks/useZnsName'
 import { formatNumber } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { getExchangeDenom } from '../../selectors/DenominationSelectors'
@@ -57,15 +58,7 @@ interface TransactionViewInnerProps extends TransactionListRowProps {
   isCard?: boolean
 }
 
-export const TransactionView = (props: TransactionListRowProps) => {
-  return <TransactionViewInner {...props} />
-}
-
-export const TransactionCard = (props: TransactionListRowProps) => {
-  return <TransactionViewInner {...props} isCard />
-}
-
-function TransactionViewInner(props: TransactionViewInnerProps) {
+const TransactionViewInner: React.FC<TransactionViewInnerProps> = props => {
   const theme = useTheme()
   const styles = getStyles(theme)
 
@@ -109,7 +102,13 @@ function TransactionViewInner(props: TransactionViewInnerProps) {
     account,
     wallet
   )
-  const { category, name } = mergedData
+  const { category, name: metadataName } = mergedData
+  const recipientAddress = transaction.spendTargets?.[0]?.publicAddress
+  const znsName = useZnsName(currencyInfo.pluginId, recipientAddress)
+  const name =
+    metadataName != null && metadataName !== ''
+      ? metadataName
+      : znsName ?? metadataName
   const isSentTransaction = direction === 'send'
 
   const cryptoAmount = div(
@@ -130,7 +129,9 @@ function TransactionViewInner(props: TransactionViewInnerProps) {
   )
 
   const cryptoAmountString = `${isSentTransaction ? '-' : '+'}${
-    denominationSymbol ? denominationSymbol + ' ' : ''
+    denominationSymbol != null && denominationSymbol !== ''
+      ? denominationSymbol + ' '
+      : ''
   }${cryptoAmountFormat}`
 
   // Fiat Amount
@@ -249,13 +250,13 @@ function TransactionViewInner(props: TransactionViewInnerProps) {
       failOnCancel: false,
       url
     }
-    Share.open(shareOptions).catch(e => {
+    Share.open(shareOptions).catch((e: unknown) => {
       showError(e)
     })
   })
 
   // HACK: Handle 100% of the margins because of SceneHeader usage on this scene
-  return isCard ? (
+  return isCard === true ? (
     <EdgeCard icon={icon} onPress={handlePress} onLongPress={handleLongPress}>
       <SectionView dividerMarginRem={[0.2, 0.5]} marginRem={0.25}>
         <>
@@ -334,6 +335,14 @@ function TransactionViewInner(props: TransactionViewInnerProps) {
   )
 }
 
+export const TransactionView: React.FC<TransactionListRowProps> = props => {
+  return <TransactionViewInner {...props} />
+}
+
+export const TransactionCard: React.FC<TransactionListRowProps> = props => {
+  return <TransactionViewInner {...props} isCard />
+}
+
 const getStyles = cacheStyles((theme: Theme) => ({
   cardlessView: {
     flexDirection: 'column',

src/components/tiles/AddressTile2.tsx

@@ -25,6 +25,7 @@ import { parseDeepLink } from '../../util/DeepLinkParser'
 import { checkPubAddress } from '../../util/FioAddressUtils'
 import { resolveName } from '../../util/resolveName'
 import { isEmail } from '../../util/utils'
+import { isZnsName, resolveZnsName } from '../../util/zns'
 import { EdgeAnim } from '../common/EdgeAnim'
 import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
 import { AddressModal } from '../modals/AddressModal'
@@ -47,6 +48,7 @@ export interface ChangeAddressResult {
   parsedUri?: EdgeParsedUri
   addressEntryMethod: AddressEntryMethod
   alias?: string
+  znsName?: string
 }
 
 export interface AddressTileRef {
@@ -150,6 +152,7 @@ export const AddressTile2 = React.forwardRef(
         const enteredInput = address.trim()
         address = enteredInput
         let zanoAlias: string | undefined
+        let znsName: string | undefined
         let fioAddress
         if (fioPlugin != null) {
           try {
@@ -226,6 +229,20 @@ export const AddressTile2 = React.forwardRef(
           } catch (_) {}
         }
 
+        // Preserve and resolve ZcashNames like "alice.zec"
+        if (
+          coreWallet.currencyInfo.pluginId === 'zcash' &&
+          isZnsName(enteredInput)
+        ) {
+          try {
+            const resolved = await resolveZnsName(enteredInput)
+            if (resolved != null) {
+              znsName = enteredInput.toLowerCase()
+              address = resolved
+            }
+          } catch (_) {}
+        }
+
         try {
           const parsedUri: EdgeParsedUri & { paymentProtocolUrl?: string } =
             await coreWallet.parseUri(address, currencyCode)
@@ -270,7 +287,8 @@ export const AddressTile2 = React.forwardRef(
             fioAddress,
             parsedUri,
             addressEntryMethod,
-            alias: zanoAlias
+            alias: zanoAlias,
+            znsName
           })
         } catch (e: unknown) {
           const currencyInfo = coreWallet.currencyInfo

src/hooks/useZnsName.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+
+import { reverseResolveZnsAddress } from '../util/zns'
+
+const cache = new Map<string, string | null>()
+const inflight = new Map<string, Promise<string | null>>()
+
+const lookupZnsName = async (address: string): Promise<string | null> => {
+  if (cache.has(address)) return cache.get(address) ?? null
+  let promise = inflight.get(address)
+  if (promise == null) {
+    promise = reverseResolveZnsAddress(address).catch((_err: unknown) => null)
+    inflight.set(address, promise)
+  }
+  const result = await promise
+  cache.set(address, result)
+  inflight.delete(address)
+  return result
+}
+
+export const useZnsName = (
+  pluginId: string,
+  address: string | undefined
+): string | null => {
+  const enabled = pluginId === 'zcash' && address != null && address !== ''
+  const [name, setName] = useState<string | null>(
+    enabled ? cache.get(address) ?? null : null
+  )
+
+  useEffect(() => {
+    if (!enabled) return
+    let cancelled = false
+    lookupZnsName(address)
+      .then(result => {
+        if (!cancelled) setName(result)
+      })
+      .catch((_err: unknown) => null)
+    return () => {
+      cancelled = true
+    }
+  }, [enabled, address])
+
+  return name
+}