An awesome part of using a dApp is the fact that you can connect your wallet and and be logged in or signed up for the application right away. The problem that this may bring is that wallets are this large string of alphanumeric characters and don't make the best usernames. See example below:
0xd2f8ed343386FB042178c7e133A837CB8043d0dc
Ew right? This isn't the greatest way of displaying a username. You could do something like create a form and ask for a preferred username or we could leverage the decentralized web and look at using existing ENS usernames in our applications.
Let's take a look at how we can do this using React and the Ethers library.
I started off by scaffolding out a react application using:
npx create-react-app
Then I installed a dependency I need using yarn. (You can use npm instead if you prefer).
yarn add ethers
Afterwards I went into App.js and got rid of everything inside the div and then imported the ethers library and useState from React to keep track of the username of the signed in person. If you want to code along with this blog then here is what my App.js looked like:\
import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers';
function App() {
const [name, setName] = useState("");
return (
<div className="App">
<h1>{name}</h1>
</div>
);
}
export default App;
Not too much going on just yet. Let's add a button inside of our app div and give it a function that can execute on click.\
<div className="App">
<button className ="button" onClick={() => handleWalletConnect()}>connect</button>
<h1>{name}</h1>
</div>
So this handleWalletConnect function is going to accomplish a couple of things. We want to make sure we get access to the users wallet as well as their ens username if they have one. Here is the function which I'll break down line by line:\
const [name, setName] = useState("");
const handleWalletConnect = async () => {
const { ethereum } = window;
if(ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum)
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner()
const address = await signer.getAddress()
const ens = await provider.lookupAddress(address);
if (ens !== null) {
setName(ens)
} else {
setName(address)
}
} else {
alert('no wallet detected!')
}
}
The first thing we're doing is destructuring the Ethereum object from the Window:
const { ethereum } = window
This is something that is injected into the window from a wallet like Metamask. As long as it exists we will continue on with the rest of our code, otherwise we want to alert the user that we aren't detecting any wallets in their browser.
Next up is creating a provider that will give us access to a lot of methods that makes our life easier.
const provider = new ethers.providers.Web3Provider(ethereum)
A provider is a nice little abstraction of the connection to the Ethereum network. We're leveraging the work that the nice folks at Ethers have already done for us instead of reinventing the wheel.
The first thing we want to do with our provider is ask for permission to connect to the users wallet which is taken care of with this line:
await provider.send("eth_requestAccounts", [])
This sends a request over to the wallet asking the user to allow connection with our dApp.
Next we want to get information about the user. We do this by creating a signer object:
const signer = provider.getSigner()
This gives us access to more methods like this handy one for getting the signer's address:
const address = await signer.getAddress()
Now in theory we have everything we need to start building out our dApp. We have the address but we want to make things a little more human readable. Our provider has a nice little method of doing a reverse lookup to see if the Ethereum address is linked to an ENS username and that's done in the line below:
const ens = await provider.lookupAddress(address)
This will return the ens username if it exists otherwise we will get back null. Now we can either set the name to be the username or just fall back to the address if they do not have an ens username.
Now that we can access our user's decentralized identity we can allow for a greater user experience instead of forcing our users to fill out yet another form on profile details for a new service.
The final code for this can all be found on this repository:
https://github.com/Rahat-ch/reactensusernames
You can also watch a quick video of this tutorial below:
A review of web3 learning tools for devs
Note: None of the companies or projects mentioned in this blog post are paying me to write this. Would be cool though lol. Recently announced my full time dive into the web3 space and a few folks have been asking me what kind of roadmap or resources I used to get into the space. I’ll open with an honest and maybe brutal truth: anyone who tells you there is a definitive list of things you can do to just become a dev in this space is probably feeding you some bullshit. That said, there are a lo...
Token Gated Event Platform
Warning: Jumbled up thoughts about a product I may or not build. None of this is organized and may or may not make sense! I did this with an earlier post on a web3 music platform. I’ve been wanting to take any ideas I have for dApps and jot them down in case I move forward in building them or someone else can pick it up and bring it to life. This is a live writing things down as I think about the idea exercise. You aren’t reading it live but I’m thinking of it live and just jotting it down to...
Web3 Music Project Brain-dump
A couple of days ago I wrote up a little thread on Twitter about an idea I had on a web3 music project. This is an exercise in fleshing out the idea a little more in case I decide to build it out on a stream or on my own elsewhere. Here is the initial tweet thread if you want to see my first set of thoughts: https://twitter.com/Rahatcodes/status/1458594408413245440 So the idea came to me based on some of my own experiences. I was a very mediocre rapper once upon a time and used to pay a third...
An awesome part of using a dApp is the fact that you can connect your wallet and and be logged in or signed up for the application right away. The problem that this may bring is that wallets are this large string of alphanumeric characters and don't make the best usernames. See example below:
0xd2f8ed343386FB042178c7e133A837CB8043d0dc
Ew right? This isn't the greatest way of displaying a username. You could do something like create a form and ask for a preferred username or we could leverage the decentralized web and look at using existing ENS usernames in our applications.
Let's take a look at how we can do this using React and the Ethers library.
I started off by scaffolding out a react application using:
npx create-react-app
Then I installed a dependency I need using yarn. (You can use npm instead if you prefer).
yarn add ethers
Afterwards I went into App.js and got rid of everything inside the div and then imported the ethers library and useState from React to keep track of the username of the signed in person. If you want to code along with this blog then here is what my App.js looked like:\
import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers';
function App() {
const [name, setName] = useState("");
return (
<div className="App">
<h1>{name}</h1>
</div>
);
}
export default App;
Not too much going on just yet. Let's add a button inside of our app div and give it a function that can execute on click.\
<div className="App">
<button className ="button" onClick={() => handleWalletConnect()}>connect</button>
<h1>{name}</h1>
</div>
So this handleWalletConnect function is going to accomplish a couple of things. We want to make sure we get access to the users wallet as well as their ens username if they have one. Here is the function which I'll break down line by line:\
const [name, setName] = useState("");
const handleWalletConnect = async () => {
const { ethereum } = window;
if(ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum)
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner()
const address = await signer.getAddress()
const ens = await provider.lookupAddress(address);
if (ens !== null) {
setName(ens)
} else {
setName(address)
}
} else {
alert('no wallet detected!')
}
}
The first thing we're doing is destructuring the Ethereum object from the Window:
const { ethereum } = window
This is something that is injected into the window from a wallet like Metamask. As long as it exists we will continue on with the rest of our code, otherwise we want to alert the user that we aren't detecting any wallets in their browser.
Next up is creating a provider that will give us access to a lot of methods that makes our life easier.
const provider = new ethers.providers.Web3Provider(ethereum)
A provider is a nice little abstraction of the connection to the Ethereum network. We're leveraging the work that the nice folks at Ethers have already done for us instead of reinventing the wheel.
The first thing we want to do with our provider is ask for permission to connect to the users wallet which is taken care of with this line:
await provider.send("eth_requestAccounts", [])
This sends a request over to the wallet asking the user to allow connection with our dApp.
Next we want to get information about the user. We do this by creating a signer object:
const signer = provider.getSigner()
This gives us access to more methods like this handy one for getting the signer's address:
const address = await signer.getAddress()
Now in theory we have everything we need to start building out our dApp. We have the address but we want to make things a little more human readable. Our provider has a nice little method of doing a reverse lookup to see if the Ethereum address is linked to an ENS username and that's done in the line below:
const ens = await provider.lookupAddress(address)
This will return the ens username if it exists otherwise we will get back null. Now we can either set the name to be the username or just fall back to the address if they do not have an ens username.
Now that we can access our user's decentralized identity we can allow for a greater user experience instead of forcing our users to fill out yet another form on profile details for a new service.
The final code for this can all be found on this repository:
https://github.com/Rahat-ch/reactensusernames
You can also watch a quick video of this tutorial below:
A review of web3 learning tools for devs
Note: None of the companies or projects mentioned in this blog post are paying me to write this. Would be cool though lol. Recently announced my full time dive into the web3 space and a few folks have been asking me what kind of roadmap or resources I used to get into the space. I’ll open with an honest and maybe brutal truth: anyone who tells you there is a definitive list of things you can do to just become a dev in this space is probably feeding you some bullshit. That said, there are a lo...
Token Gated Event Platform
Warning: Jumbled up thoughts about a product I may or not build. None of this is organized and may or may not make sense! I did this with an earlier post on a web3 music platform. I’ve been wanting to take any ideas I have for dApps and jot them down in case I move forward in building them or someone else can pick it up and bring it to life. This is a live writing things down as I think about the idea exercise. You aren’t reading it live but I’m thinking of it live and just jotting it down to...
Web3 Music Project Brain-dump
A couple of days ago I wrote up a little thread on Twitter about an idea I had on a web3 music project. This is an exercise in fleshing out the idea a little more in case I decide to build it out on a stream or on my own elsewhere. Here is the initial tweet thread if you want to see my first set of thoughts: https://twitter.com/Rahatcodes/status/1458594408413245440 So the idea came to me based on some of my own experiences. I was a very mediocre rapper once upon a time and used to pay a third...
Share Dialog
Share Dialog

Subscribe to Rahat Chowdhury

Subscribe to Rahat Chowdhury
<100 subscribers
<100 subscribers
No activity yet