Comment on page
Basic Integration - Namekit
Learn how to seamlessly integrate Decentraweb names for wallet addresses into your website or dApp with our Namekit
Our Namekit allows developers to integrate reading of Decentraweb Domain and ENS Domain Records allowing developers to utilise human-friendly domains against crypto wallet addresses
If you need to manage domain data/interact with our Smart Contracts you'll need to integrate our Core Library
View our NPM Package :
Domain name provider is detected using following logic:
- 1.If domain name ends with
.eththen it is resolved through ENS - 2.If domain name TLD matches one of the ICANN TLDs, then it is resolved through regular DNS.
- 3.All other domains are resolved with DWEB contracts.
Important Note: This logic may change in the future.
To install Decentraweb Namekit, run the following within your terminal to your project directory
npm install --save @decentraweb/namekit ethers@5
Decentraweb supports both Ethereum and Polygon networks. Namekit will automatically detect which network to use based on where domain name is located currently. To initialize Namekit instance you need to pass Ethereum and Polygon network name (
mainnet is used with 'matic' and goerli is used with 'maticmum') and ethers.js providers for each networkimport {providers, Wallet} from "ethers";
import DwebNamekit, {NamekitConfig} from "@decentraweb/namekit";
const ETH_NETWORK = 'goerli';
const ETH_JSONRPC_URL = 'https://goerli.infura.io/v3/00000000000000000000000000000000';
const POLYGON_NETWORK = 'maticmum';
const POLYGON_JSONRPC_URL = 'https://polygon-mumbai.infura.io/v3/00000000000000000000000000000000';
const config: NamekitConfig = {
ethereum: {
network: ETH_NETWORK,
provider: new providers.JsonRpcProvider(ETH_JSONRPC_URL, ETH_NETWORK),
},
polygon: {
network: POLYGON_NETWORK,
provider: new providers.JsonRpcProvider(POLYGON_JSONRPC_URL, POLYGON_NETWORK)
}
};
const namekit = new DwebNamekit(config);
Alternatively, if you use one of supported providers, you can initialize Namekit in a simpler way:
const config: NamekitConfig = {
apiProvider: 'infura', //Supported providers: 'etherscan', 'infura', 'alchemy', 'cloudflare', 'pocket', 'ankr'
apiKey: '00000000000000000000000000000000', //
production: false //If true, then mainnet and matic networks will be used, otherwise goerli and maticmum
};
const namekit = new DwebNamekit(config);
Browser Bundle
In most cases importing library using
npm is preferred way, but for fast prototyping you can load it from our CDN:<script src="https://cdn.ethers.io/lib/ethers-5.7.umd.min.js" type="application/javascript"></script>
<script src="https://cdn.decentraweb.org/decentraweb-namekit-2.2.2.min.js" type="application/javascript"></script>
<script>
window.addEventListener('load', async () => {
const {DwebNamekit} = Decentraweb;
const namekit = new DwebNamekit({
ethereum: {
network: 'mainnet',
provider: ethers.getDefaultProvider('mainnet')
},
polygon: {
network: 'matic',
provider: ethers.getDefaultProvider('matic')
}
})
</script>
Ethereum address can be resolved through both Decentraweb and ENS contracts or through one specified system.
const names = await namekit.address.resolve('0x4323E6b155BCf0b25f8c4C0B37dA808e3550b521');
/*
Returns:
[
{ provider: 'dweb', name: 'vitalik' },
{ provider: 'ens', name: 'vitalik.eth' }
]
*/
To query Decentraweb names only :
//To query Decentraweb only
const dwebName = await namekit.address.resolve('0x4323E6b155BCf0b25f8c4C0B37dA808e3550b521', 'dweb');
/*
Returns: 'vitalik'
*/
In this case Namekit will detect which domain name system name belongs to and will look for Ethereum address associated with given name. Note that classic domains will always return
null.const address = await namekit.address.lookup('vitalik');
/*
Returns: '0x4323E6b155BCf0b25f8c4C0B37dA808e3550b521'
*/
By calling
namekit.domain(domainName) you can get instance of class that will allow to read extended data associated with domain name. Depending on domain name provider you will get either DWEBDomain, ENSDomain or ICANNDomain instance. Below you can see feature support table for different domain name systems.DWEB | ENS | ICANN | |
|---|---|---|---|
Wallet Address | Yes | Yes | No |
Content Hash | Yes | Yes | Yes* |
Text Records | Yes | Yes | No |
DNS Records | Yes | Yes | Yes |
const domain = await namekit.domain('vitalik');
if (domain) {
const domainProvider = domain.provider; // 'ens'
const ethAddress = await domain.address('ETH'); // '0x4323E6b155BCf0b25f8c4C0B37dA808e3550b521'
const contentHash = await domain.contentHash(); // 'ipfs://bafybeiaysi4s6lnjev27ln5icwm6tueaw2vdykrtjkwiphwekaywqhcjze'
const githubName = await domain.txt('email'); // '[email protected]'
const records = await domain.dns('A'); // [{ name: 'vitalik', type: 'A', ttl: 3600, class: 'IN', data: '127.0.0.1'}]
}
All domain name wrapper classes (
DWEBDomain, ENSDomain and ICANNDomain) have same interface to provide consistent API for developers.interface BaseDomain {
//Domain name
readonly name: string;
//Which domain name system is used to query the data
readonly provider: 'dweb' | 'ens' | 'icann';
//Supported features for domain
readonly features: {
address: boolean;
contentHash: boolean;
dns: boolean;
txt: boolean;
};
//Get cryptocurrency address for given coinId
address(coinId: string): Promise<string | null>;
//Get contenthash associated with domain name
contentHash(): Promise<string | null>;
//Get DNS records of given type. Response contains JSON representation of records
dns(recordType: string): Promise<dnspacket.Answer[]>;
//Check if domain name is registered
exists(): Promise<boolean>;
//Read text records on domain
txt(key: string): Promise<string | null>;
}
Notes:
- 1.
- 2.Unsupported feature methods will always return
nulland won't throw an error. - 3.There is no reliable way to check if domain name is registered for classic DNS. Because of this
domain.exists()will always returntrueforicanndomains. - 4.DNS records are stored in binary format. This library uses dns-packet library to encode/decode data.