npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ecns-ui

v1.0.4

Published

UI components and reusable code

Downloads

2

Readme

Reusable functions and components for the ENS apps

Most functions in this library are async functions and therefore return promises which can be awaited or chained with .then.

Contents

Setup

Setup for the library is done by calling the setupENS function. It can be optionally provided with a customProvider and an ENS address. Generally you won't need this unless you are running ganache.

It will return an object with the registrar and ens object. The ens object will deal with name resolution, reverse records and dealing with the registry. The registrar object has functions to interact the permanent registrar, legacy auction registrar and test registrar (just on test net)

import { setupENS } from '@ensdomains/ui'

window.addEventListener('load', async () => {
  const { registrar, ens } = await setupENS()
  const owner = await ens.getOwner('resolver.eth')
  // will instantiate with window.web3/window.ethereum if found, read-only if not.
  // Once setup has finished you can now call functions off the library
})

API

async function setupENS(options): void

setupENS must be called before anything other function in this library. We recommend calling it in a window.load event to make sure that your web3 object has loaded. You can provide a custom provider yourself, but by default it will look for window.web3 or window.ethereum if you do not give it a provider. We use the custom provider when we need to run automated tests with ganache. You can also it pass it the registry address, but by default it will derive the network you are on and instantiate ENS using that network's registry. You only need to provider it with an ens address if you are on a private network.

Arguments

options (object): {
  customProvider (object): Provider object from web3 (optional)
  ensAddress (String): Address of the ENS registry (optional)
}

Example

import { setupENS } from '@ensdomains/ui'

window.addEventListener('load', async () => {
  const { ens, registrar } = await setupENS()
})

async function getOwner(name): Address

Arguments

name (String): An ENS name (e.g: vitalik.eth)

Returns

owner (address): Ethereum address of the owner on the registry

Example

const name = 'vitalik.eth'
const owner = await ens.getOwner(name)
// 0x123...

async function getResolver(name): Address

Arguments

name (String): An ENS name (e.g: vitalik.eth)

Returns

owner (address): Ethereum address of the resolver contract

Example

import ens from 'ens'
const owner = await ens.getResolver('vitalik.eth')
// 0x123...

async function getOwnerWithLabelHash(labelHash, nodeHash): Address

Arguments

labelHash (String): Sha3 hash of the label e.g vitalik (vitalik.eth) nodeHash (String): Namehash of the rest of the name (minus the label) e.g eth (vitalik.eth)

Returns

owner (address): Ethereum address of the resolver contract

Example

import ens from 'ens'
const owner = await ens.getOwnerWithLabelHash(labelHash, nodeHash)
// 0x123...

async function getResolverWithLabelHash(labelHash, nodeHash): Address

Arguments

labelHash (String): Hash of the label e.g vitalik (vitalik.eth) nodeHash (String): Hash of the rest of the name (minus the library) e.g eth (vitalik.eth)

Returns

resolver (address): Ethereum address of the resolver contract

Example

const resolver = await ens.getResolverWithLabelHash(labelHash, nodeHash)
// 0x123...

async function getAddress(name): Address

This function will call the resolver to get the address, if it cannot find a resolver, it will return 0x000... as a fallback

Arguments

name (String): An ENS name (e.g: vitalik.eth)

Returns

address (address): An Ethereum address that was set on the resolver

Example

const addr = await ens.getAddress('vitalik.eth')
// 0x123...

async function getContent(name): Contenthash

This function will call the resolver to get the contentHash, if it cannot find a resolver, it will return 0x000... as a fallback. Otherwise it will return a contenthash in text format, as defined by EIP1577.

Arguments

name (String): An ENS name (e.g: vitalik.eth)

Returns

contentHash (String): A content hash String for IPFS or swarm

Example

const content = await ens.getContent('vitalik.eth')
// ipfs://Qsxz...

async function getName(address): Name

This function gets the reverse record of an address.

Arguments

address (String): An Ethereum address

Returns

name (String): An ENS name

Example

const name = await ens.getName('0x123abc...')
// vitalik.eth

async function setOwner(name, newOwner): TransactionResponse

Arguments

name (String): An ENS name newOwner (String): An Ethereum address or contract

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setOwner('vitalik.eth', '0x123abc...')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setSubnodeOwner(name, newOwner): TransactionResponse

Can only be called by the controller of the parent name.

Arguments

name (String): An ENS name newOwner (String): An Ethereum address or contract

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setSubnodeOwner('sub.vitalik.eth', '0x123abc')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setResolver(name, resolver): TransactionResponse

Can only be called by the controller of the name.

Arguments

name (String): An ENS name resolver (String): An ENS resolver contract

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setResolver('vitalik.eth', '0x123abc')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setAddress(name, address): TransactionResponse

Can only be called by the controller of the name.

Arguments

name (String): An ENS name address (String): An Ethereum address

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setAddress('vitalik.eth', '0x123abc')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setContent(name, content): TransactionResponse (DEPRECATED)

Can only be called by the controller of the name.

This function has been deprecated in favour of setContenthash which uses EIP1577

Arguments

name (String): An ENS name content (String): A content hash

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setContent('vitalik.eth', '0x123abc')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setContenthash(name, content): TransactionResponse

Can only be called by the controller of the name.

Arguments

name (String): An ENS name contenthash (String): A content hash defined by EIP1577

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setContent('vitalik.eth', '0x123abc')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function createSubdomain(name): TransactionResponse

Can only be called by the controller of the name. This is a simplified version of setSubnodeOwner which it uses underneath to create a subdomain. It will automatically set the owner to the parent's names owner. If you call this function on an existing subdomain, it will change its owner to the current parent owner.

Arguments

name (String): An ENS name (sub.vitalik.eth)

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.createSubdomain('sub', 'vitalik.eth')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function deleteSubdomain(label, name): TransactionResponse

Can only be called by the controller of the name. This function will set the controller to 0x000... and if it has a resolver, it will set the resolver 0x000..., which will be a second transaction. Alternatively you can manually call setSubnodeOwner and set the controller to 0x000...

Arguments

label (String): ENS Label e.g: sub (sub.vitalik.eth) name (String): An ENS name

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.deleteSubdomain('sub', 'vitalik.eth')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function claimAndSetReverseRecordName(name): TransactionResponse

This function will claim your Ethereum address on the reverse registrar, setup the reverse resolver and setup your name on the resolver all in one transaction. It can also be used to change your reverse record name to something else.

Arguments

name (String): An ENS name

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.claimAndSetReverseRecordName('vitalik.eth')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function setReverseRecordName(name): TransactionResponse

This function will set your reverse record name given that a resolver is already present on your ethereum address reverse name e.g. 123456abcdef.addr.reverse. This can be useful if you don't want to use claimAndSetReverseRecordName to setup the default reverse registrar

Arguments

name (String): An ENS name

Returns

transaction (object): Transaction Response Object

Example

const tx = await ens.setReverseRecordName('vitalik.eth')
console.log(tx.hash)
// 0x123456...
const receipt = await tx.wait() // Wait for transaction to be mined
// Transaction has been mined

async function getDomainDetails(name): DomainDetails

This is a helper function to get all the details for a particular domain.

Arguments

name (String): An ENS name

Returns

DomainDetails (object): {
  name (String): ENS name
  label (String): label of the name
  labelhash (String): labelhash of the name
  owner (String): Address of the controller of the ENS name
  resolver (String): ENS resolver contract
  addr (String): Address the ENS name resolves to
  content (String): Contenthash the ENS name resolves to
}

Example

const domainDetails = await ens.getDomainDetails('vitalik.eth')
console.log(domainDetails)
/* 
  {
    name: "vitalik.eth",
    label: "vitalik",
    labelhash: "0x123456abc...",
    owner: "0x123abcdef...",
    resolver: "0x1234abdef...",
    addr: "0xabcdef1234...",
    content: "bzz://Qra123..."
  }
*/

async function getSubdomains(name): Array<Subdomain>

This is a helper function to get all the subdomains for a name. Internally it will search for events for the NewOwner and filter out duplicates.

Arguments

name (String): An ENS name

Returns

Subdomains (Array<Subdomain>): {
  name (String): ENS name
  label (String): label of the name
  labelhash: labelhash of the name
  owner (String): Address of the controller of the ENS name
  decrypted (boolean): Whether the label is known or not
}

Example

const subdomains = await ens.getSubdomains('vitalik.eth')
console.log(subdomains)
/* 
  [{
    name: "vitalik.eth",
    label: "vitalik",
    labelhash: "0x123456abc...",
    owner: "0x123abcdef...",
    decrypted: true
  }, ...]
*/

Transaction Response

The transaction response object gets returned by the promise of all state modifying functions of the library. The most important properties is the wait function which can be called by the initial response, before the transaction has been mined. You can await this promise and it will give you the transaction receipt. The transaction receipt, is the same as the transaction response object, except is has a blockHash, blockNumber and timestamp of the block the transaction has been included in.

{
    // Only available for unmined transactions
    wait: function(){}, //this function is to wait for the transaction to be mined
    // Only available for mined transactions
    blockHash: "0x7f20ef60e9f91896b7ebb0962a18b8defb5e9074e62e1b6cde992648fe78794b",
    blockNumber: 3346463,
    timestamp: 1489440489,

    // Exactly one of these will be present (send vs. deploy contract)
    // They will always be a properly formatted checksum address
    creates: null,
    to: "0xc149Be1bcDFa69a94384b46A1F91350E5f81c1AB",

    // The transaction hash
    hash: "0xf517872f3c466c2e1520e35ad943d833fdca5a6739cfea9e686c4c1b3ab1022e",

    // See above "Transaction Requests" for details
    data: "0x",
    from: "0xEA674fdDe714fd979de3EdF0F56AA9716B898ec8",
    gasLimit: utils.bigNumberify("90000"),
    gasPrice: utils.bigNumberify("21488430592"),
    nonce: 0,
    value: utils.parseEther(1.0017071732629267),

    // The chain ID; 0 indicates replay-attack vulnerable
    // (eg. 1 = Homestead mainnet, 3 = Ropsten testnet)
    chainId: 1,

    // The signature of the transaction (TestRPC may fail to include these)
    r: "0x5b13ef45ce3faf69d1f40f9d15b0070cc9e2c92f3df79ad46d5b3226d7f3d1e8",
    s: "0x535236e497c59e3fba93b78e124305c7c9b20db0f8531b015066725e4bb31de6",
    v: 37,

    // The raw transaction (TestRPC may be missing this)
    raw: "0xf87083154262850500cf6e0083015f9094c149be1bcdfa69a94384b46a1f913" +
           "50e5f81c1ab880de6c75de74c236c8025a05b13ef45ce3faf69d1f40f9d15b0" +
           "070cc9e2c92f3df79ad46d5b3226d7f3d1e8a0535236e497c59e3fba93b78e1" +
           "24305c7c9b20db0f8531b015066725e4bb31de6",
}