gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 01:40:24 54 4
gpt4 key购买 nike

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

最佳答案

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

第一步

安装:

  • 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 使用相同的算法来生成帐户图像。

关于web3js - 获取 metamask 个人资料图片和名称使用 web3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71678374/

54 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com