metamask api 请求 一般操作

这篇具有很好参考价值的文章主要介绍了metamask api 请求 一般操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考文档:https://docs.metamask.io/guide/

注意 metamask 必须是运行在站点之下的 web 页进行操作。

一、检查 metamask 是否安装

metamask 提供了 window.ethereum 供开发者对 metamask(以太坊网络) 进行交互,当然是需要你已经在浏览器中安装了 metamask,否则 window.ethereum 将会是 undefined,那么此时就可以通过 window.ethereum 检查类型是否是 undefined 来判断浏览器中是否已经安装 metamask。

if (typeof window.ethereum !== 'undefined') {
    console.log('√ metamask');
} 

此时我们创建两个文件,一个叫做 test.html 一个叫做 metamaskTest.js 对 metamask 做测试:
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask
首先我们在 test.html 中编写 html 代码并且把 js 进行引入:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_bit metamask developer Test</title>
</head>
<body>
</body>
<script src="./metamaskTest.js"></script>
</html>

在 js 中添加 验证 metamask 的方法:

if (typeof window.ethereum !== 'undefined') {
    console.log('√ metamask');
}

运行网页后:
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask

二、请求 API 的方式

使用 metamask 需要使用 request 方法传入对应的API 名对 API 进行请求。

例如:ethereum.request({ method: 'eth_requestAccounts' });

以上实例中 ethereum 为当前 metamask 提供对以太坊操作的对象,而 request 就是请求的方法,你在 request 方法内传入对应的请求参数即可;在这里 { method: 'eth_requestAccounts' } 表示请求的方法是 eth_requestAccounts 获取当前 metamask 账户的地址,

此时我们应该也发现, ethereum 是 metamask 所封装的一个层,这个层封装了对 metamask 的操作,以及一些与 以太坊网络 交互的方法。

三、请求示例

现在我们使用 ethereum.request({ method: ‘eth_requestAccounts’ }); 请求当前所 metamask 所链接的地址。

首先创建一个 html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_bit metamask developer Test</title>
</head>

<body>
    <button class="enableEthereumButton">连接 metamask</button>
    <h2>地址: <span class="showAccount"></span></h2>
</body>
<script src="./metamaskTest.js"></script>

</html>

然后是 js:

//取得元素 通过 class 方式
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

//绑定 click 事件
ethereumButton.addEventListener('click', () => {
    getAccount();
});

async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    console.log(accounts);
    showAccount.innerHTML = accounts[0];//修改 showAccount 元神的 html 为 账户内容
}

以上是通过 querySelector 选择器选择对应的元素,在这里是使用 class 的方式,接着给对应的 btn ethereumButton 绑定监听事件,点击后调用 getAccount() 函数。

getAccount() 函数是一个异步的,在函数中,使用 ethereum.request 调用对应的 eth_requestAccounts 方法获取当前 metamask 的账户,其返回值是一个数组,最后显示在 html 元素之上:

metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask

四、监听账户改变

ethereum.on 可以对当前 metamask 进行监听,传入所需要监听的事件即可:

const showAccount = document.querySelector('.showAccount');

ethereum.on('accountsChanged', function (accounts) {
    showAccount.innerHTML = accounts[0];
});

以上代码监听 accountsChanged 事件,当我切换对应的账户时将会触发:
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask

五、交易

调用 metamask 进行交易,需要 request 调用 eth_sendTransaction 方法,并且传入对应的参数,参数有 from、to、value、gasPrice、gas,这些值都是以 16 进制值。

首先我们在 html 中增加两个按钮:

<button class="enableEthereumButton btn">获取当前 metamask 账户</button>
<button class="sendEthButton btn">发送 eth</button>

随后开始编写 js 内容,获取两个按钮:

//创建两个元素的对象
const ethereumButton = document.querySelector('.enableEthereumButton');
const sendEthButton = document.querySelector('.sendEthButton');

接着创建一个变量存储对应的当前登录的metamask 账号地址:

//记录账户
let accounts = [];
//获取账户
ethereumButton.addEventListener('click', () => {
    getAccount();
});
async function getAccount() {
    accounts = await ethereum.request({ method: 'eth_requestAccounts' });
}

接着响应对应的事件,再使用 request 发送请求:

//发送 eth
sendEthButton.addEventListener('click', () => {
    ethereum.request({
        method: 'eth_sendTransaction',
        params: [
            {
                from: accounts[0],
                to: '0xA0561defaa11Fa19A0A992d8DBEA0818c2Cc172f',
                value: '0xaa87bee538000',
                gasPrice: '0x09184e72a000',
                gas: '0x2710',
            },
        ],
    }).then(
        (txHash) => console.log(txHash)
    ).catch(
        (error) => console.error
    );
});

0xaa87bee538000 是 0.003:
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask
此时注意,价格是以 wei 为单位,我们运行后点击访问 metamask 账户后点击 sendeth 即可调起 metamask 进行转账操作(读者可以自行设置 gas 相关,Gas 单位(限额) * Gas 单价 21,000 * 200 = 4,200,000 gwei):
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask

交易成功返回交易 hash:
metamask api,NFT web3 solidity ethers.js 实战,区块链,web3,metamask文章来源地址https://www.toymoban.com/news/detail-780894.html

到了这里,关于metamask api 请求 一般操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web3 solidity订单池操作

    前面一篇文章因为一些原因 被设为了进自己可见 需要的朋友可以私信我 之前 我们编写的程序上来看 交易所无非是一个代币的托管上 只是它会更加专业 本文 我们继续来看交易所的一个功能 叫游泳池 例如 我们 100grToken 兑换 1ETH 前提 我们的代币已经能被估值了 例如 你想用

    2024年02月12日
    浏览(45)
  • Web3 开发指南:使用 NFTScan NFT API 构建一个 NFT 链上追踪器

    对于大多数 Web3 团队来说,构建一个完整的链上 NFT 数据追踪系统是一项具有挑战性的任务,构建一个 NFT 链上追踪器更是如此。涉及到处理区块链上的智能合约和交易数据,并将其与外部数据源进行整合和分析工作量是十分巨大的: 区块链数据的复杂性:区块链上的数据结

    2024年02月15日
    浏览(43)
  • 如何使用 NFTScan NFT API 在 PlatON 网络上开发 Web3 应用

    PlatON 是由万向区块链和矩阵元主导开发的面向下一代的全球计算架构,创新性的采用元计算框架 Monad 和基于 Reload 覆盖网络的同构多链架构,其愿景是成为全球首个提供完备隐私保护能力的运营服务网络。它提供计算、存储、通讯服务,并提供算力、算法、数据等众多基础资

    2024年02月02日
    浏览(34)
  • 如何使用 NFTScan NFT API 在 Base 网络上开发 Web3 应用

    Base 是 Coinbase 使用 OP Stack 开发的最新以太坊第 2 层(L2)网络,用于解决以太坊等主要区块链面临的可扩展性和成本挑战。Coinbase 将其描述为“安全、低成本、对开发人员友好的以太坊 L2,旨在将下一个 10 亿用户带入 Web3”。BASE 被设计为一个标准的、模块化的、rollup 不可知

    2024年01月21日
    浏览(44)
  • 【Web3】MetaMask钱包配置

    目录 主网更换测试网 私钥如何登录钱包 主网更换测试网 私钥如何登录钱包

    2024年02月12日
    浏览(88)
  • Web3简述MetaMask并演示谷歌安装MetaMask扩展程序方式

    我们会基本使用显然不够啊 我们要去了解mustache的原理 乃至自己去写一个mustache 首先 mustache 不是不能用简单的正则表达式来实现 但是 这里为了让大家理解 为什么不能 我们还是用简单正则写一下 我们创建一个 html文件 然后 编写代码如下 这里 我们定义了一个模板字符串 t

    2024年02月09日
    浏览(57)
  • 使用 React、Web3.js 和 Metamask 构建 Web3 dApp 身份验证

    我相信您和我一样对 Web3 充满热情。本文介绍了一种新的区块链开发登录方法:使用 MetaMask 扩展的一键式加密安全登录流程,所有数据都存储在我们自己的后端。它还可以保护我们的数据和加密货币的安全。 在这里,我们将构建一个允许用户使用 MetaMask 登录的身份验证解决

    2024年02月04日
    浏览(59)
  • MetaMask与Web3中智能合约调用(2)

    智能合约交易区别于点对点交易,智能合约交易只需付费给矿工费用,也就是gas fee,是支付给矿工的手续费,当我们在以太坊区块链上进行转账时,矿工要把我们的交易打包并放上区块链,才能使交易完成,在这过程中会消耗区块链的运算资源,所以要支付费用 这个过程为

    2024年01月16日
    浏览(47)
  • Web3在HTML中获取 MetaMask 启用的用户列表

    当然 我们还是要先启动ganache环境 然后 通过MetaMask 导入一些用户 然后 我们需要在页面中引入 web3.min.js 如果您还没有这个文件 可以查看我的文章web3.js获取导入 然后我访问官网 https://learnblockchain.cn/docs/web3.js/web3-eth.html#getchainid 打开后 先来到 web3.eth 下面 下面有一个 getAccount

    2024年02月11日
    浏览(53)
  • MetaMask Mobile +Chrome DevTools 调试Web3应用教程

    注:本教程来源网络,有兴趣的可以直接到这里查看。 写好了WEB3应用,在本地调试用得好好的,但是用钱包软件访问就报莫名的错,但是又不知道是什么原因,排查的过程非常浪费时间 。 因此在本地同一局域网进行调试就非常有必要,本教程有下面几个重点,包含MetaMask

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包