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

Question

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

Answer 1

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

第一步

安装:

• web3(npm install web3)
• @web3-react/core (npm install @web3-react/core)
• @web3-react/注入(inject)连接器(npm install @web3-react/注入(inject)连接器)
• @metamask/jazzicon(npm install @metamask/jazzicon)

第二步

从“@web3-react/core”导入 {useWeb3React}

获取钱包地址

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

附言没有与任何加密钱包关联的名称。有一个地址。由于 metamask 基于以太坊区 block 链，它的地址将类似于 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 的帐户图像。

获取账户图标

从“@metamask/jazzicon”导入 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 使用相同的算法来生成帐户图像。