目次
はじめに
みなさん、こんにちは。GMOインターネット株式会社の斉藤です。
今回はMetamaskを使ったWebページ作成の第2回です。第1回も併せてご覧ください。
前回はWebページとMetamaskを接続するところまで実装を行いました。今回は暗号資産ウォレットらしく、残高照会や送金の実装を行っていきたいと思います。
引き続きMetamaskの開発者ガイドは必読です。
Getting Started | MetaMask Docs
メインネットとテストネット
Metamaskは基本的にイーサリアムネットワーク用のウォレットです。暗号資産であるEther(ETH)を扱うネットワークですね。これはメインネットと呼ばれています。
一方で、イーサリアムプロトコルのテストなどを目的としたネットワークも存在しています。これらはテストネットと呼ばれています。今回のようにアプリのテストを行ったり、スマートコントラクトのテストなどに使います。
前回の記事でMetamaskの設定を変更してテストネットワークを有効にしたので、Metamask上でいくつかのテストネットを確認することができます。
どれを使っても良いですが、今回はRopsten Test Networkを利用していきます。
それぞれのテストネットには、そのテストネット上で使うEtherを取得するための方法が用意されています。これはFaucetと呼ばれています。日本語では蛇口という意味です。ひねると水が出てくるイメージですね。
RopstenのFaucetはこちらです。Metamaskから自分のRopstenネットワークのウォレットアドレスを確認して、それを入力しましょう。0.2ETHが付与されます。
ウォレットの残高を取得する
無事にRepstenネットワークのETHが取得できたら、さっそく残高を取得する実装をしていきましょう。
前回の記事で説明したwindow.ethereum オブジェクトを使います。requestメソッドでeth_getBalanceを呼び出します。またaccountはウォレットアドレスで、取得方法は前回の記事にあります。
const wei = 0.000000000000000001;
const amount = await window.ethereum.request({
method: "eth_getBalance",
params: [
account,
"latest",
],
});
// wei -> ether
const balance = parseInt(amount) * wei;
setBalance(balance)
返り値のamountが残高で、単位はWeiです。weiはイーサリアムの最小単位で、
1 Wei == 0.000000000000000001 ETH
です。
送金する
次に送金を実装してみましょう。ウォレットアプリっぽくなってきました。
まず一番最初に大事なことです。前回の ネットワークを取得する を利用してメインネットに接続しているときは送金を実行しないようにしておきます。
一応ですが、実際に送金を実行してもMetamaskが確認を求めてきますので、そこで気づくこともできます。ただ今回作っているのはテストアプリですので、実装上メインネットでは送金不可にしておくのが良いでしょう。
// メインネットでは実行しない
const chainId = await getChainID();
if (chainId == 1 || chainId == 61) {
console.warn("Do not send any transactions to the mainnet");
return;
}
次に送金部分を実装していきます。Metamaskのドキュメントも併せて見ておきましょう。
const weiSendAmount = sendAmount * wei;
const hexSendAmount = "0x" + weiSendAmount.toString(16);
const transactionParameters = {
nonce: '0x00', // ignored by MetaMask
gasPrice: '', // customizable by user during MetaMask confirmation.
gas: '', // customizable by user during MetaMask confirmation.
to: sendTo, // Required except during contract publications.
from: window.ethereum.selectedAddress, // must match user's active address.
value: hexSendAmount, // Only required to send ether to the recipient from the initiating external account.
data: '', // Optional, but used for defining smart contract creation and interaction.
chainId: '', // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
};
sendAmountが送金する額(ETH)です。それをweiにして16進変換します。
transactionParametersのsendToが送信先ウォレットアドレス、valueが送信額です。その他の項目はMetamaskが自動で埋めてくれます。
// txHash is a hex string
// As with any RPC call, it may throw an error
const txHash = await window.ethereum.request({
method: 'eth_sendTransaction',
params: [transactionParameters],
});
送金は eth_sendTransaction を呼びます。返り値は送金トランザクションのハッシュ値です。
実際に送金を実行するとブロックチェーン上に反映されます。Etherscanで自分のトランザクションを確認してみましょう。
おわりに
完成したデモページはこちらです。実際に送金もできますので試してみてください。
2回にわたってMetamaskと連携したWebページを実装してきました。HTMLとJavaScriptの知識があれば実装できるので、非常に手軽です。これでWeb 3.0できますね!笑
それではまた次回お目にかかりましょう。
[PR]
私が働いているGMOインターネット株式会社ではエンジニアを含め採用を強化しています。
「いきなり応募するもなぁ」と言う方は、Twitter DMで私に直接ご相談いただいても構いません。社内の雰囲気、開発現場の雰囲気、人間関係、待遇など、社内の人物からリアルな情報を知りたいという方はお気軽にどうぞ。
ブログの著者欄
採用情報
関連記事
KEYWORD
CATEGORY
-
技術情報(409)
-
イベント(148)
-
カルチャー(35)
-
デザイン(13)
TAG
- 5G
- Adam byGMO
- AI
- AWX
- BIT VALLEY
- blockchain
- ChatGPT
- cloudnative
- CloudStack
- CM
- CNDO
- CNDT
- CODEGYM Academy
- ConoHa
- CS
- CSS
- CTF
- DC
- Designship
- DevSecOpsThon
- Docker
- DTF
- GitLab
- GMO Developers Day
- GMO Developers Night
- GMO GPUクラウド
- GMO Hacking Night
- GMO kitaQ
- GMO SONIC
- GMOアドパートナーズ
- GMOアドマーケティング
- GMOイエラエ
- GMOグローバルサイン
- GMOデジキッズ
- GMOペイメントゲートウェイ
- GMOペパボ
- GMOリサーチ
- Go
- GTB
- Hardning
- Harvester
- HCI
- iOS
- IoT
- ISUCON
- JapanDrone
- Java
- JJUG
- K8s
- Kids VALLEY
- MetaMask
- MySQL
- NFT
- NVIDIA
- OpenStack
- Perl
- PHP
- PHPcon
- PHPerKaigi
- QUIC
- Rancher
- RPA
- Ruby
- Selenium
- splunk
- SRE
- SSL
- Terraform
- TLS
- TypeScript
- UI/UX
- VLAN
- VS Code
- インターンシップ
- オブジェクト指向
- オンボーディング
- お名前.com
- カルチャー
- コンテナ
- スクラム
- スペシャリスト
- ソフトウェアテスト
- チームビルディング
- ドローン
- ネットワーク
- プログラミング教育
- ブロックチェーン
- ゆめみらいワーク
- リモートワーク
- 基礎
- 多拠点開発
- 大学授業
- 宮崎オフィス
- 応用
- 技育プロジェクト
- 新卒
- 暗号
- 機械学習
- 決済
PICKUP
-
生成AI開発に最適なNVIDIA H200 Tensor コア GPU超高速マルチクラスタ導入秘話
技術情報
-
Vue Fes Japan 2024にゴールドスポンサー/アフターパーティースポンサーとして協賛決定!
イベント
-
[開催レポート]Designship 2024 プレイベント 2025年のデザインを解き明かす4つの視点
デザイン
-
Japan Robot Week 〜 Maker Faire Tokyo 2024
技術情報
-
[開催レポート]GMOインターネットグループ・DeNA「サマーキャンプ2024」
イベント
-
[開催レポート]サマーインターン2024 at GMO kitaQ
カルチャー