1.29.0-0.5.3: [feature] Adds ens support (#618)

* Adds ens support
* Fix PR template typo

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.29.0-0.4.3",
+  "version": "1.29.0-0.5.3",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",
@@ -54,11 +54,12 @@
   },
   "dependencies": {
     "@cvbb/eth-keyring": "^1.1.0",
+    "@ensdomains/ensjs": "^2.0.1",
+    "@ethereumjs/common": "^2.0.0",
+    "@ethereumjs/tx": "^3.0.0",
     "@gnosis.pm/safe-apps-provider": "^0.5.0",
     "@gnosis.pm/safe-apps-sdk": "^3.0.0",
     "@ledgerhq/hw-app-eth": "^5.49.0",
-    "@ethereumjs/common": "^2.0.0",
-    "@ethereumjs/tx": "^3.0.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
     "@ledgerhq/hw-transport-webusb": "5.53.0",
     "@portis/web3": "^4.0.0",

pull_request_template.md

@@ -5,4 +5,4 @@
 - [ ] The version field in `package.json` is incremented following [semantic versioning](https://semver.org/)
 - [ ] The box that allows repo maintainers to update this PR is checked
 - [ ] I tested locally to make sure this feature/fix works
-- [ ] This PR passes the Cicle CI checks
+- [ ] This PR passes the Circle CI checks

rollup.config.js

@@ -90,6 +90,7 @@ export default {
     '@shapeshiftoss/hdwallet-keepkey-webusb',
     '@shapeshiftoss/hdwallet-core',
     '@gnosis.pm/safe-apps-sdk',
-    '@gnosis.pm/safe-apps-provider'
+    '@gnosis.pm/safe-apps-provider',
+    '@ensdomains/ensjs'
   ]
 }

src/@types/index.d.ts

@@ -16,6 +16,7 @@ declare module '@ledgerhq/hw-app-eth'
 declare module '@ledgerhq/hw-transport-u2f'
 declare module '@ledgerhq/hw-transport-webusb'
 declare module 'eth-provider'
+declare module '@ensdomains/ensjs'
 
 declare module '@shapeshiftoss/hdwallet-core'
 declare module '@shapeshiftoss/hdwallet-keepkey-webusb'

src/interfaces.ts

@@ -13,6 +13,7 @@ export interface Initialization {
 
 export interface Subscriptions {
   address?: (address: string) => void
+  ens?: (ens: Ens) => void
   network?: (networkId: number) => void
   balance?: (balance: string) => void
   wallet?: (wallet: Wallet) => void
@@ -559,3 +560,9 @@ export interface TermsAgreementState {
   terms?: boolean
   privacy?: boolean
 }
+
+export interface Ens {
+  name?: string
+  contentHash?: string
+  getText?: (key: string) => Promise<string | undefined>
+}

src/onboard.ts

@@ -1,6 +1,6 @@
 import 'regenerator-runtime/runtime'
 
-import { get } from 'svelte/store'
+import { get, derived } from 'svelte/store'
 
 import Onboard from './views/Onboard.svelte'
 
@@ -16,7 +16,7 @@ import {
   initializeStores
 } from './stores'
 
-import { getDeviceInfo } from './utilities'
+import { getDeviceInfo, getEns } from './utilities'
 import { validateInit, validateConfig, isWalletInit } from './validation'
 
 import { version } from '../package.json'
@@ -28,7 +28,8 @@ import {
   ConfigOptions,
   UserState,
   Wallet,
-  WalletInitOptions
+  WalletInitOptions,
+  Ens
 } from './interfaces'
 
 import initializeModules from './modules'
@@ -145,6 +146,21 @@ function init(initialization: Initialization): API {
       })
     }
 
+    if (subscriptions.ens) {
+      derived([address, wallet], ([$address, $wallet], set) => {
+        if ($address && $wallet && $wallet.provider) {
+          getEns($wallet.provider, $address).then(set)
+        } else {
+          // Wallet not selected or reset
+          set(undefined)
+        }
+      }).subscribe(ens => {
+        if (ens !== null) {
+          subscriptions.ens && subscriptions.ens(ens as Ens)
+        }
+      })
+    }
+
     if (subscriptions.network) {
       network.subscribe((networkId: number | null) => {
         if (networkId !== null) {

src/utilities.ts

@@ -1,9 +1,10 @@
 import bowser from 'bowser'
 import BigNumber from 'bignumber.js'
 import { get } from 'svelte/store'
+import ENS, { getEnsAddress } from '@ensdomains/ensjs'
 
 import { app } from './stores'
-import { WalletInterface } from './interfaces'
+import { WalletInterface, Ens } from './interfaces'
 
 export function getNetwork(provider: any): Promise<number | any> {
   return new Promise((resolve, reject) => {
@@ -67,6 +68,27 @@ export function getAddress(provider: any): Promise<string | any> {
   })
 }
 
+export async function getEns(provider: any, address: string): Promise<Ens> {
+  const { networkId } = get(app)
+  const ens = new ENS({ provider, ensAddress: getEnsAddress(networkId) })
+  let name
+  let nameInterface
+  let contentHash
+  try {
+    ;({ name } = await ens.getName(address))
+    nameInterface = await ens.name(name)
+    contentHash = await nameInterface?.getContent()
+  } catch (e) {
+    // Error getting ens name
+  }
+
+  return {
+    name,
+    contentHash,
+    getText: nameInterface?.getText.bind(nameInterface)
+  }
+}
+
 export function getBalance(
   provider: any,
   address?: string

src/validation.ts

@@ -161,7 +161,8 @@ export function validateInit(init: Initialization): never | void {
 }
 
 function validateSubscriptions(subscriptions: Subscriptions): never | void {
-  const { address, network, balance, wallet, ...otherParams } = subscriptions
+  const { address, ens, network, balance, wallet, ...otherParams } =
+    subscriptions
 
   invalidParams(otherParams, validSubscriptionKeys, 'subscriptions')
 
@@ -172,6 +173,13 @@ function validateSubscriptions(subscriptions: Subscriptions): never | void {
     optional: true
   })
 
+  validateType({
+    name: 'subscriptions.ens',
+    value: ens,
+    type: 'function',
+    optional: true
+  })
+
   validateType({
     name: 'subscriptions.network',
     value: network,