In my previous tutorial, I explained how you can allow users to connect to your web3 dApp with their Ethereum address using Metamask. Now, let's take a little step further! You might have heard of Ethereum Name Service (ENS). That's all the .eth domains. The goal is to turn an ineffable blockchain address like: 0x390F8E93D55C0cF882286ec40CC2D13Ca0938708 into a neat human-readable name, in my case benjaminazoulay.eth. And your ENS name could 100% be used as your username on web3 site!
We just need to learn how to get a ENS name from the address you got with web3.js.
It's not yet possible to do this using the web3.js library (I was also very disappointed). Fortunately we can use the ensjs library instead, which you can get with npm:
npm i @ensdomains/ensjs
For this tutorial, you can use any framework. I am using Nuxt.js like in my previous tutorial.
First things first, don't forget to import the library:
import ENS, { getEnsAddress } from '@ensdomains/ensjs'
The code snippet to get the ENS name from the address is simply:
const ens = new ENS({ provider: window.ethereum, ensAddress: getEnsAddress('1') });
let name = await ens.getName(coinbase)
const ensName = name.name
Here window.ethereum is the Ethereum provider and coinbase is the user's Ethereum address we got from web3.js. The getName() method returns an object looking like { name: 'name.eth' } so we grab that 'name' attribute. That attribute is null by default so if the user didn't set a ENS domain as reverse record, name will be null.
Inserted into the whole web3 connection methods, it looks like this:
async initWeb3 () {
if (typeof window.ethereum !== 'undefined') {
try {
const instance = new Web3(window.ethereum)
console.log("instance", instance)
const networkId = await instance.eth.net.getId();
const coinbase = await instance.eth.getCoinbase();
const balance = await instance.eth.getBalance(coinbase);
const ens = new ENS({ provider: window.ethereum, ensAddress: getEnsAddress('1') });
let name = await ens.getName(coinbase)
const ensName = name.name
this.registerWeb3Instance({
networkId,
coinbase,
balance,
ensName
});
this.metamaskMessage = '';
this.onClose();
} catch (error) {
console.error('User denied web3 access', error);
this.metamaskMessage = 'Please connect to your Ethereum address on Metamask before connecting to this website';
return;
}
}
else {
console.error('No web3 provider detected');
this.metamaskMessage = "No web3 provider detected. Did you install the Metamask extension on this browser?";
return;
}
}
Don't forget to update the store mutation registerWeb3Instance:
registerWeb3Instance (state, payload) {
console.log('registerWeb3instance Mutation being executed', payload)
state.web3 = true
let result = payload
let web3Copy = {
networkId: null,
coinbase: null,
balance: null,
username: null,
}
web3Copy.coinbase = result.coinbase
web3Copy.networkId = result.networkId
web3Copy.balance = parseInt(result.balance, 10)
web3Copy.username = result.ensName
state.user = web3Copy
},
And that's it, you can display the ENS name with user.username!
Again don't forget to check out my tutorial on how to connect to a Nuxt dApp with Metamask to get the full picture!
You can leave me a little tip if this tutorial helped you:
ETH - benjaminazoulay.eth
BTC - bc1q2sf9deqxcyveslk6efrrxga7ch3n7wr97klfs6
BCH - bitcoincash:qqqm7g4cewyrk2gexklqshjactr3w6mkm5c6v6qtjr
