Get metamask profile picture and name use web3

Question

Is there possible we get Metamask profile picture and name using web3? I'm using react for Frontend with web3. as I know I use web3.eth.get.Accounts().then(rsp=>rsp[0]) to get the wallet. can someone explain to me?

Answer 1

Probaby too late already, but I figured this out after some research. I'll explain it in the best way down below. It takes care of most edge cases.

Step 1

Install :

• web3 (npm install web3)
• @web3-react/core (npm install @web3-react/core)
• @web3-react/injected-connector (npm install @web3-react/injected-connector)
• @metamask/jazzicon (```npm install @metamask/jazzicon)

Step 2

import { useWeb3React } from "@web3-react/core"

Get the wallet address

useWeb3React() is a hook provided by @web3-react/core. This gives back account and a few other values back in an object. Since you only asked for name and image, I'll clarify them here.

P.S. There is no name associated with any crypto wallet. There is an address. Since metamask is based on ethereum blockchain it will have an address like 0x0EfGhjuw..... You can get this via the account variable I mentioned.

const {account, active} = useWeb3React()
useEffect(()=>{
   console.log(account) //prints to console the wallet address of metamask (0xfEgh67...)
// also prints it everytime you change the account in metamask
}, [account])

With these things clarified, let's see how we can get back the account image of metamask.

Get the account icon

import jazzicon from "@metamask/jazzicon"

const {account} = useWeb3React()
const avatarRef = useRef()
useEffect(() => {
    const element = avatarRef.current;
    if (element && account) {
        const addr = account.slice(2, 10);
        const seed = parseInt(addr, 16);
        const icon = jazzicon(20, seed); //generates a size 20 icon
        if (element.firstChild) {
            element.removeChild(element.firstChild);
        }
        element.appendChild(icon);
    }
}, [account, avatarRef]);

return(
   <div ref={avatarRef}></div>
)

The reason why we are using jazzicon is apparently metamask too uses jazzicon for generating the wallet images. The above logic generates an integer from the wallet address you pass. That integer determines your account image. This works perfectly and as far as I believe, metamask uses the same algorithm for generating the account images.