11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

10分でKyberNetworkを体験してみる。MetamaskでETH to ERC20【Kyber入門その1】

Last updated at Posted at 2018-09-01

##この記事の目的
KyberNetworkというものを使うと、自動的にトークンを変換して受け取ることができます。
送トークン側は、相手の受け取りたいトークンを気にせず、自分の送りたいトークンを送ると勝手に変換される仕組みです。

これは便利!dAppsにも応用できる仕組みですので、まず一度体験してみましょう。というのが目的です。
ソースいじったりするのは次回やります。

##準備
どこでもいいので、index.htmlを作って以下のHTMLソースを貼り付ける。

<html>
<header>
    <title>Kyber Gadget</title>
    <link rel='stylesheet' href='https://widget.kyber.network/v0.1/widget.css' />
</header>

<body>
        <a href='https://widget.kyber.network/v0.1/?type=pay&mode=tab&theme=light&receiveAddr=0xd55e787cad81088debbdecad0260d4251901b816&receiveToken=ADX&callback=https%3A%2F%2Fkyberpay-sample.knstats.com%2Fcallback&paramForwarding=true&network=ropsten'

class='kyber-widget-button kyber-widget-button--dark' name='KyberWidget - Powered by KyberNetwork' title='Pay with tokens'
        target='_blank'>Pay with tokens</a>
</body>
</html>

上記のソースでは、
Ropsten上で僕のメタマスクのADXアドレスが指定されています。
@ookimaki_JPさんのソースを転載してます。

WidgetGenerator
でいろいろ設定できるようです。

##ETHを送ってみる(相手はADXで受け取る)
試しに僕に送ってくれてもいいですが笑(別にRopstenテストネットなので金銭的にはなんの得もないんですが、送ってくれたらなんか嬉しいです。)
上記のソースを変更して受け取りアドレスを自分のウォレットに指定すると、送られてきたのが確認できます。

<body>
        <a href='https://widget.kyber.network/v0.1/?type=pay&mode=tab&theme=light&receiveAddr=0xd55e787cad81088debbdecad0260d4251901b816&receiveToken=ADX&callback=https%3A%2F%2Fkyberpay-sample.knstats.com%2Fcallback&paramForwarding=true&network=ropsten'

の部分で、

receiveAddr=<受けとりたいアドレス(自分のメタマスクのアドレス)で、&の前までを置き換える>

のように変更しておきましょう。

Screen Shot 2018-09-01 at 17.30.02.png
こんなボタンが現れたらクリックしてみましょう。

Screen Shot 2018-09-01 at 17.31.21.png

自分のMetamaskに残高があることを確認。
一旦1ETHを送ってみます。

Screen Shot 2018-09-01 at 17.32.50.png

Screen Shot 2018-09-01 at 17.46.39.png

Screen Shot 2018-09-01 at 17.49.31.png
Confirm!

Screen Shot 2018-09-01 at 17.50.54.png

このまま送ろうとすると、結構時間がかかるのでGASを増やします

Screen Shot 2018-09-01 at 17.55.28.png

15GWEIくらいあると、速いです。
Confirm!

Screen Shot 2018-09-01 at 17.56.10.png

完了。残高確認してみましょう
Screen Shot 2018-09-01 at 17.56.45.png

Screen Shot 2018-09-01 at 18.31.09.png
送信完了です!

Screen Shot 2018-09-02 at 9.26.52.png
Transactionを見ると、1Etherが921.54ADXになっているのが確認できます。

##おまけ:メタマスクでADXの残高を確認できるようにする

メタマスクでのトークン追加の仕方です。

Screen Shot 2018-09-02 at 9.30.14.png
左上のメニューを開きます。
Screen Shot 2018-09-02 at 9.30.53.png
ADD TOKENをクリック
Screen Shot 2018-09-02 at 9.40.20.png
Token Address欄に特定のトークンアドレスを入れると、SymbolとDecimal Precisionは自動で埋まります。今回はADXトークンを使っています。

//Tokenアドレスに以下のADXトークンアドレスをコピペ
0x499990DB50b34687CDaFb2C8DaBaE4E99d6F38A7

すると、ADXを追加できるはずです。
Screen Shot 2018-09-02 at 9.40.41.png

###トークンアドレスの取得の仕方
[KyberDeveloperのページ]
(https://developer.kyber.network/docs/Start)
から、
Screen Shot 2018-09-02 at 9.31.44.png
左のEnvironments->Ropstenをクリック
Screen Shot 2018-09-02 at 9.35.55.png
Token Addresses一覧が出てくるので、必要なトークンのアドレスをCopyして利用しましょう。

Screen Shot 2018-09-02 at 9.41.25.png
メニューから追加したトークンの残高を確認できます。

これで体験は完了です。

ちなみに、上記HTMLの、body部分のリンクを

receiveAddr=<受けとりたいアドレス(自分のメタマスクのアドレス)>
receiveToken=<受け取りたいトークンのトークンアドレス>

に変更すると、KyberNetworkで対応しているものについては自動で変換して受け取れます。
色々なトークンで試してみましょう!

##実際にKyberコードを書いてみたいdApps開発者の方は以下の続きの記事をどうぞ(2018/09/02完了)
[Kyber Networkで ERC20 to ETH, ETH to ERC20 を、Solidityで実装してみる【Kyber入門その2】]
(https://qiita.com/drafts/75c8a438dd5004a27133)

11
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?