Lesson 10: Strange behavior using web3uikit ConnectButton

[atenger]

I'm seeing some strange behavior using the ConnectButton from the web3uikit and I'm trying to understand what's going on. I'm currently in Lesson 10: NextJS Smart Contract Lottery (Full Stack / Front End), at about the 17:40 mark. We're using Moralis and web3uikit to create a Header to replace the ManualHeader we just worked on.

I followed Patrick's instructions, but when I started playing with my UI on localhost, the web3uikit ConnectButton started displaying different ENS names instead of my wallet address when I changed the connection between different networks. For example, I started on localhost (hardhat) and it showed my address as being connected, but when I switched to Rinkeby to see what would happen the button changed to show snoopy.eth as being connected. Anyone know what's going on behind the scenes?

Here are sceenshots of what I'm seeing.

Screenshot 1:

Smart Contract Lottery UI connected to my wallet on Hardhat local network - looks good!

Screenshot 2:

I changed to Ropsten network, the chainId of the network has changed (see console), but the ConnectButton now shows being connected to an address like dhruv...al.eth instead of my wallet address. Looks odd!

Screenshot 3:

I changed to Rinkeby network, the chainId of the network changed, but now ConnectButton says its connected to snoopy.eth.

[RoboCrypter]

@atenger : Someone gave that address an ENS name thats why its showing like that, rest assured everything else is fine.
In fact in one of my hardhat wallet addresses have the same name snoopy.eth, So don't worry.
If you are really annoyed by it just import another account from hardhat node accounts no : 3 or 4 in my case were not showing any ENS names.
Hopefully this helps!

[atenger]

That's what I was thinking but wasn't 100% sure. Can I ask some follow up questions to make sure I understand?

• Everyone who spins up a Hardhat local node will have the same 10 addresses (both private & public keys), correct?
• Did someone with one of the ENS names (i.e. snoopy.eth) use the ENS service to map their ENS name to one of these addresses?
• Where is the code that displays ENS name instead of the address name? Is that part of the web3uikit code?

Sorry for basic questions. I am trying to get through all of Patrick's course but javascript, react, vscode, yarn, git, etc. are all new to me.

[RoboCrypter]

@atenger : No problem my friend,
Yes every body do have the same addresses,
Yes off course someone did map their ENS name to it,
And no its not the part of web3uikit, that address is just been given an ENS name by someone,
Search https://ens.domains , If you wanna learn more about Ethereum Naming Service.

Hopefully it will clear your doubts!