I'm building an application with next.js and web3. To connect the user wallet to the front-end I'm using web3modal as following:
const Home: NextPage = () => {
const [signer, setSigner] = useState<JsonRpcSigner | null>(null)
async function connect() {
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
setSigner(signer)
}
return (
<div className="flex justify-center">
<button onClick={() => connect()}>Connect wallet</button>
{ signer && (
<h3>wallet connected: {signer._address}</h3>
)}
</div>
)
}
The user can successfully connect the wallet, unfortunately signer._address is always null. I'd like to display to the user with address has just been connected, how can I fix this?
This is not a question about web3Modal, but a question about ethers.
You can get the address like this:
const [address, setAddress] = useState()
// ...
setAddress(await signer.getAddress())
The documentation is here: https://docs.ethers.io/v5/api/signer/#Signer-getaddress