使用 web3 获取 metamask 个人资料图片和名称

Question

我们是否有可能使用 web3 获取 Metamask 个人资料图片和名称？ 我正在使用 web3 的前端反应。 据我所知，我使用web3.eth.get.Accounts().then(rsp=>rsp[0]) 来获取钱包。谁能给我解释一下？

Answer 1

可能已经为时已晚，但经过一番研究，我发现了这一点。我将在下面以最好的方式解释它。它可以处理大多数边缘情况。

第一步

安装：

• 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)

第 2 步

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

获取钱包地址

useWeb3React() 是@web3-react/core 提供的钩子。这会在对象中返回 account 和一些其他值。由于您只要求提供名称和图像，因此我将在此处进行说明。

附：没有与任何加密钱包相关的名称。有地址。由于元掩码基于以太坊区块链，它的地址类似于0x0EfGhjuw....。你可以通过我提到的account 变量来获得它。

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])

把这些东西搞清楚了，我们来看看如何取回metamask的账号图片。

获取帐号图标

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>
)

我们使用jazzicon 的原因显然是metamask 也使用jazzicon 来生成钱包图像。上面的逻辑从你传递的钱包地址生成一个整数。该整数决定了您的帐户形象。这非常有效，据我所知，metamask 使用相同的算法来生成帐户图像。