Add Unstoppable Domains Reverse Resolution (#1410)

* added UD resolution dependency

pinned to the same version uauth uses to avoid increasing package size

* renames shortenEns to domain agnostic

* added uns reverse resolution

* removed excess console log

* Bump core version and add alpha tag, but react and vuew versions, prettier and err checking

* Fix demo

Co-authored-by: Adam Carpenter <[email protected]>

Author: V-Shadbolt

examples/with-vuejs-v2/src/components/HelloWorld.vue

@@ -7,6 +7,7 @@
         <div class="avatar" />
         <div class="details">
           <div v-if="ens">{{ ens.name }}</div>
+          <div v-if="uns">{{ uns.name }}</div>
           <div v-if="address">{{ address }}</div>
 
           <span>Connected Wallet: {{ connectedWallet.label }}</span>
@@ -83,6 +84,14 @@ export default {
         return trunc(this.connectedWallet.accounts[0].ens);
       }
     },
+    uns: function () {
+      if (
+        this.connectedWallet.accounts &&
+        this.connectedWallet.accounts[0].uns?.name
+      ) {
+        return trunc(this.connectedWallet.accounts[0].uns);
+      }
+    },
   },
 };
 </script>

packages/core/README.md

@@ -510,6 +510,9 @@ type Account = {
     contentHash?: string
     getText?: (key: string) => Promise<string | undefined>
   }
+  uns: {
+    name?: string
+  }
   balance: Record<TokenSymbol, string>
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.12.1",
+  "version": "2.13.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -60,8 +60,9 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup-extras/plugin-copy": "~1.2.2",
+    "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.0.0",
     "@tsconfig/svelte": "^2.0.0",
@@ -84,6 +85,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
+    "@unstoppabledomains/resolution": "^8.0",
     "@web3-onboard/common": "^2.2.3",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.6.2",

packages/core/rollup.config.js

@@ -5,6 +5,7 @@ import json from '@rollup/plugin-json'
 import sveltePreprocess from 'svelte-preprocess'
 import typescript from '@rollup/plugin-typescript'
 import copy from '@rollup-extras/plugin-copy'
+import commonjs from '@rollup/plugin-commonjs'
 
 const production = !process.env.ROLLUP_WATCH
 
@@ -35,6 +36,9 @@ export default {
       sourceMap: !production,
       inlineSources: !production
     }),
+    commonjs({
+      include: /node_modules/
+    }),
     copy({
       src: 'src/i18n/en.json',
       dest: 'i18n'

packages/core/src/provider.ts

@@ -1,14 +1,15 @@
 import { fromEventPattern, Observable } from 'rxjs'
 import { filter, takeUntil, take, share, switchMap } from 'rxjs/operators'
 import partition from 'lodash.partition'
-import { providers } from 'ethers'
+import { providers, utils } from 'ethers'
 import { weiToEth } from '@web3-onboard/common'
 import { disconnectWallet$ } from './streams.js'
 import { updateAccount, updateWallet } from './store/actions.js'
 import { validEnsChain } from './utils.js'
 import disconnect from './disconnect.js'
 import { state } from './store/index.js'
 import { getBNMulitChainSdk } from './services.js'
+import { Resolution } from '@unstoppabledomains/resolution'
 
 import type {
   ChainId,
@@ -26,6 +27,7 @@ import type {
   Address,
   Balances,
   Ens,
+  Uns,
   WalletPermission,
   WalletState
 } from './types.js'
@@ -146,10 +148,15 @@ export function trackWallet(
       account => account.address === address
     )
 
-    // update accounts without ens and balance first
+    // update accounts without ens/uns and balance first
     updateWallet(label, {
       accounts: [
-        existingAccount || { address: address, ens: null, balance: null },
+        existingAccount || {
+          address: address,
+          ens: null,
+          uns: null,
+          balance: null
+        },
         ...restAccounts
       ]
     })
@@ -176,7 +183,7 @@ export function trackWallet(
     }
   })
 
-  // also when accounts change, update Balance and ENS
+  // also when accounts change, update Balance and ENS/UNS
   accountsChanged$
     .pipe(
       switchMap(async ([address]) => {
@@ -205,13 +212,23 @@ export function trackWallet(
             ? getEns(address, chain)
             : Promise.resolve(null)
 
-        return Promise.all([Promise.resolve(address), balanceProm, ensProm])
+        const unsProm =
+          account && account.uns
+            ? Promise.resolve(account.uns)
+            : getUns(address, chain)
+
+        return Promise.all([
+          Promise.resolve(address),
+          balanceProm,
+          ensProm,
+          unsProm
+        ])
       })
     )
     .subscribe(res => {
       if (!res) return
-      const [address, balance, ens] = res
-      updateAccount(label, address, { balance, ens })
+      const [address, balance, ens, uns] = res
+      updateAccount(label, address, { balance, ens, uns })
     })
 
   const chainChanged$ = listenChainChanged({ provider, disconnected$ }).pipe(
@@ -264,6 +281,7 @@ export function trackWallet(
         ({
           address,
           ens: null,
+          uns: null,
           balance: null
         } as Account)
     )
@@ -274,7 +292,7 @@ export function trackWallet(
     })
   })
 
-  // when chain changes get ens and balance for each account for wallet
+  // when chain changes get ens/uns and balance for each account for wallet
   chainChanged$
     .pipe(
       switchMap(async chainId => {
@@ -293,12 +311,21 @@ export function trackWallet(
               ? getEns(address, chain)
               : Promise.resolve(null)
 
-            const [balance, ens] = await Promise.all([balanceProm, ensProm])
+            const unsProm = validEnsChain(chainId)
+              ? getUns(address, chain)
+              : Promise.resolve(null)
+
+            const [balance, ens, uns] = await Promise.all([
+              balanceProm,
+              ensProm,
+              unsProm
+            ])
 
             return {
               address,
               balance,
-              ens
+              ens,
+              uns
             }
           })
         )
@@ -353,6 +380,33 @@ export async function getEns(
   }
 }
 
+export async function getUns(
+  address: Address,
+  chain: Chain
+): Promise<Uns | null> {
+  // check if address is valid ETH address before attempting to resolve
+  // chain we don't recognize and don't have a rpcUrl for requests
+  if (!utils.isAddress(address) || !chain) return null
+
+  const resolutionInstance = new Resolution()
+
+  try {
+    const name = await resolutionInstance.reverse(address)
+    let uns = null
+
+    if (name) {
+      uns = {
+        name
+      }
+    }
+
+    return uns
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}
+
 export async function getBalance(
   address: string,
   chain: Chain

packages/core/src/types.ts

@@ -105,6 +105,7 @@ export interface WalletState {
 export type Account = {
   address: Address
   ens: Ens | null
+  uns: Uns | null
   balance: Balances | null
 }
 
@@ -117,6 +118,10 @@ export interface Ens {
   getText: (key: string) => Promise<string | undefined>
 }
 
+export interface Uns {
+  name: string
+}
+
 export type Avatar = {
   url: string
   linkage: Array<{ type: string; content: string }>

packages/core/src/utils.ts

@@ -81,8 +81,10 @@ export function shortenAddress(add: string): string {
   return `${add.slice(0, 6)}...${add.slice(-4)}`
 }
 
-export function shortenEns(ens: string): string {
-  return ens.length > 11 ? `${ens.slice(0, 4)}...${ens.slice(-6)}` : ens
+export function shortenDomain(domain: string): string {
+  return domain.length > 11
+    ? `${domain.slice(0, 4)}...${domain.slice(-6)}`
+    : domain
 }
 
 export async function copyWalletAddress(text: string): Promise<void> {

packages/core/src/validation.ts

@@ -46,6 +46,13 @@ const ens = Joi.any().allow(
   null
 )
 
+const uns = Joi.any().allow(
+  Joi.object({
+    name: Joi.string().required()
+  }),
+  null
+)
+
 const balance = Joi.any().allow(
   Joi.object({
     eth: Joi.number()
@@ -56,6 +63,7 @@ const balance = Joi.any().allow(
 const account = Joi.object({
   address: Joi.string().required(),
   ens,
+  uns,
   balance
 })
 

packages/core/src/views/account-center/Minimized.svelte

@@ -4,7 +4,7 @@
   import {
     getDefaultChainStyles,
     shortenAddress,
-    shortenEns,
+    shortenDomain,
     unrecognizedChainStyle
   } from '../../utils.js'
   import { updateAccountCenter } from '../../store/actions.js'
@@ -25,7 +25,10 @@
   $: [firstAccount] = primaryWallet ? primaryWallet.accounts : []
 
   $: ensName =
-    firstAccount && firstAccount.ens && shortenEns(firstAccount.ens.name)
+    firstAccount && firstAccount.ens && shortenDomain(firstAccount.ens.name)
+
+  $: unsName =
+    firstAccount && firstAccount.uns && shortenDomain(firstAccount.uns.name)
 
   $: shortenedFirstAddress = firstAccount
     ? shortenAddress(firstAccount.address)
@@ -179,7 +182,11 @@
       <!-- address and balance -->
       <div class="flex flex-column" style="height: 40px;">
         <div class="address">
-          {ensName ? shortenEns(ensName) : shortenedFirstAddress}
+          {ensName
+            ? shortenDomain(ensName)
+            : unsName
+            ? shortenDomain(unsName)
+            : shortenedFirstAddress}
         </div>
         {#if firstAddressBalance}
           <div in:fade class="balance">

packages/core/src/views/account-center/WalletRow.svelte

@@ -3,7 +3,11 @@
   import { fade } from 'svelte/transition'
   import { ProviderRpcErrorCode } from '@web3-onboard/common'
   import type { WalletState } from '../../types.js'
-  import { shortenAddress, shortenEns, copyWalletAddress } from '../../utils.js'
+  import {
+    shortenAddress,
+    shortenDomain,
+    copyWalletAddress
+  } from '../../utils.js'
   import en from '../../i18n/en.json'
   import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
   import WalletAppBadge from '../shared/WalletAppBadge.svelte'
@@ -87,7 +91,7 @@
     );
   }
 
-  .address-ens {
+  .address-domain {
     margin-left: 0.5rem;
     font-weight: 700;
     color: var(
@@ -156,7 +160,7 @@
   }
 </style>
 
-{#each wallet.accounts as { address, ens, balance }, i}
+{#each wallet.accounts as { address, ens, uns, balance }, i}
   <div class="relative">
     <div
       on:click={() => setPrimaryWallet(wallet, address)}
@@ -188,9 +192,13 @@
           {/if}
         </div>
 
-        <!-- ADDRESS / ENS -->
-        <span class="address-ens"
-          >{ens ? shortenEns(ens.name) : shortenAddress(address)}</span
+        <!-- ADDRESS / DOMAIN -->
+        <span class="address-domain"
+          >{ens
+            ? shortenDomain(ens.name)
+            : uns
+            ? shortenDomain(uns.name)
+            : shortenAddress(address)}</span
         >
       </div>
 
@@ -249,9 +257,11 @@
         </li>
         <li
           on:click|stopPropagation={() => {
-            copyWalletAddress(ens ? ens.name : address).then(() => {
-              changeText()
-            })
+            copyWalletAddress(ens ? ens.name : uns ? uns.name : address).then(
+              () => {
+                changeText()
+              }
+            )
           }}
         >
           {en.accountCenter.copyAddress}