草庐IT

metamask api 请求 一般操作

1_bit 2023-07-30 原文

参考文档: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 做测试:


首先我们在 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');
}

运行网页后:

二、请求 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 元素之上:

四、监听账户改变

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

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

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

以上代码监听 accountsChanged 事件,当我切换对应的账户时将会触发:

五、交易

调用 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:

此时注意,价格是以 wei 为单位,我们运行后点击访问 metamask 账户后点击 sendeth 即可调起 metamask 进行转账操作(读者可以自行设置 gas 相关,Gas 单位(限额) * Gas 单价 21,000 * 200 = 4,200,000 gwei):

交易成功返回交易 hash:

有关metamask api 请求 一般操作的更多相关文章

  1. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. ruby-on-rails - 一般建议和推荐的文件夹结构 - Sinatra - 2

    您将如何构建一个简单的Sinatra应用程序?我正在制作,我希望该应用具有以下功能:“应用程序”更像是一个包含所有信息的管理仪表板。然后另一个应用程序将通过REST访问信息。我还没有创建仪表板,只是从数据库中获取东西session和身份验证(尚未实现)您可以上传图片,其他应用可以显示这些图片我已经使用RSpec创建了一个测试文件通过Prawn生成报告目前的设置是这样的:app.rbtest_app.rb因为我实际上只有应用程序和测试文件。到目前为止,我已经将Datamapper用于ORM,将SQLite用于数据库。这是我的第一个Ruby/Sinatra项目,所以欢迎任何和所有建议-我应

  4. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作? - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类,然后对于那个类对应的每个div,我想根据div的内容执行一个Action。例如,我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面,我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div,对于每个检查它的.descriptiondiv是否包含单词“adoption

  5. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前? - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证,而另一些则不需要身份验证。例如,我有users端点,看起来像这样:moduleBackendmoduleV1classUsers现在如您所见,除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义,比如passwords并且只是删除password/forget从逻辑上讲,这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项,我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况?

  6. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  7. ruby - HTTP 请求中的用户代理,Ruby - 2

    我是Ruby的新手。我试过查看在线文档,但没有找到任何有效的方法。我想在以下HTTP请求botget_response()和get()中包含一个用户代理。有人可以指出我正确的方向吗?#PreliminarycheckthatProggitisupcheck=Net::HTTP.get_response(URI.parse(proggit_url))ifcheck.code!="200"puts"ErrorcontactingProggit"returnend#Attempttogetthejsonresponse=Net::HTTP.get(URI.parse(proggit_url)

  8. ruby - 在 Ruby 中是否有一种惯用的方法来操作 2 个数组? - 2

    a=[3,4,7,8,3]b=[5,3,6,8,3]假设数组长度相同,是否有办法使用each或其他一些惯用方法从两个数组的每个元素中获取结果?不使用计数器?例如获取每个元素的乘积:[15,12,42,64,9](0..a.count-1).eachdo|i|太丑了...ruby1.9.3 最佳答案 使用Array.zip怎么样?:>>a=[3,4,7,8,3]=>[3,4,7,8,3]>>b=[5,3,6,8,3]=>[5,3,6,8,3]>>c=[]=>[]>>a.zip(b)do|i,j|c[[3,5],[4,3],[7,6],

  9. ruby-on-rails - 如何让 Rails View 返回其关联的操作名称? - 2

    我有一个非常简单的Controller来管理我的Rails应用程序中的静态页面:classPagesController我怎样才能让View模板返回它自己的名字,这样我就可以做这样的事情:#pricing.html.erb#-->"Pricing"感谢您的帮助。 最佳答案 4.3RoutingParametersTheparamshashwillalwayscontainthe:controllerand:actionkeys,butyoushouldusethemethodscontroller_nameandaction_nam

  10. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件,但有一段代码我不完全理解,我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法,但我在插件的任何地方都找不到定义为常量的CLASS_METHODS,而且我也不确定是什么here,并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕,我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

随机推荐