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


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

これは便利！dAppsにも応用できる仕組みですので、まず一度体験してみましょう。というのが目的です。
ソースいじったりするのは[次回](https://qiita.com/hamakihito/items/75c8a438dd5004a27133)やります。

##準備
どこでもいいので、index.htmlを作って以下の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](https://twitter.com/ookimaki_JP)さんのソースを転載してます。

[WidgetGenerator](https://developer.kyber.network/docs/WidgetGenerator)
でいろいろ設定できるようです。

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

```html
<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](https://qiita-image-store.s3.amazonaws.com/0/91514/b4f7cc0e-6e49-3cb8-6e19-67046af9669a.png)
こんなボタンが現れたらクリックしてみましょう。

![Screen Shot 2018-09-01 at 17.31.21.png](https://qiita-image-store.s3.amazonaws.com/0/91514/29f38381-8d66-da00-d2db-6d96262d074a.png)

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

![Screen Shot 2018-09-01 at 17.32.50.png](https://qiita-image-store.s3.amazonaws.com/0/91514/d0a0e5c6-26ee-0a29-4404-09428c4632c9.png)

![Screen Shot 2018-09-01 at 17.46.39.png](https://qiita-image-store.s3.amazonaws.com/0/91514/a3fb0eab-42a5-3e09-9160-58c2ec691837.png)

![Screen Shot 2018-09-01 at 17.49.31.png](https://qiita-image-store.s3.amazonaws.com/0/91514/f5f56aac-a6c7-f548-6250-83cc1fb0bc7d.png)
Confirm！

![Screen Shot 2018-09-01 at 17.50.54.png](https://qiita-image-store.s3.amazonaws.com/0/91514/6040a19b-82cd-7122-9795-4a7a86606a03.png)

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

![Screen Shot 2018-09-01 at 17.55.28.png](https://qiita-image-store.s3.amazonaws.com/0/91514/27153128-e82d-7d86-31fe-b56d59926f14.png)

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

![Screen Shot 2018-09-01 at 17.56.10.png](https://qiita-image-store.s3.amazonaws.com/0/91514/52020488-e3f9-82b9-d82c-97a7061916ed.png)

完了。残高確認してみましょう
![Screen Shot 2018-09-01 at 17.56.45.png](https://qiita-image-store.s3.amazonaws.com/0/91514/d56efa47-4e80-989e-f1fe-744ad2c83120.png)

![Screen Shot 2018-09-01 at 18.31.09.png](https://qiita-image-store.s3.amazonaws.com/0/91514/5d269a84-dc7b-657f-2c04-6e1e84df042b.png)
送信完了です！

![Screen Shot 2018-09-02 at 9.26.52.png](https://qiita-image-store.s3.amazonaws.com/0/91514/adf8bbea-e73f-67a2-c80e-2b257777b887.png)
Transactionを見ると、1Etherが921.54ADXになっているのが確認できます。

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

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

![Screen Shot 2018-09-02 at 9.30.14.png](https://qiita-image-store.s3.amazonaws.com/0/91514/7e0447bc-0eb6-80ca-cef1-04dae6d7bb7c.png)
左上のメニューを開きます。
![Screen Shot 2018-09-02 at 9.30.53.png](https://qiita-image-store.s3.amazonaws.com/0/91514/fa0ecd10-269b-e806-f0f5-929c008c6bd4.png)
ADD TOKENをクリック
![Screen Shot 2018-09-02 at 9.40.20.png](https://qiita-image-store.s3.amazonaws.com/0/91514/8b0ce22f-66e1-28db-b25d-ae2adaf24186.png)
Token Address欄に特定のトークンアドレスを入れると、SymbolとDecimal Precisionは自動で埋まります。今回はADXトークンを使っています。

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

すると、ADXを追加できるはずです。
![Screen Shot 2018-09-02 at 9.40.41.png](https://qiita-image-store.s3.amazonaws.com/0/91514/f8fedd2f-a3ce-488d-c90a-d8eaa0bb5c23.png)


###トークンアドレスの取得の仕方
[KyberDeveloperのページ]
(https://developer.kyber.network/docs/Start)
から、
![Screen Shot 2018-09-02 at 9.31.44.png](https://qiita-image-store.s3.amazonaws.com/0/91514/e720d829-41eb-6281-068b-f82dccec2d3f.png)
左のEnvironments->Ropstenをクリック
![Screen Shot 2018-09-02 at 9.35.55.png](https://qiita-image-store.s3.amazonaws.com/0/91514/cbce5176-9cf9-5bf7-3e6e-19351c43cb23.png)
Token Addresses一覧が出てくるので、必要なトークンのアドレスをCopyして利用しましょう。

![Screen Shot 2018-09-02 at 9.41.25.png](https://qiita-image-store.s3.amazonaws.com/0/91514/259e7795-07af-1a9b-17c1-be7099f12177.png)
メニューから追加したトークンの残高を確認できます。

これで体験は完了です。

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

```:
receiveAddr=<受けとりたいアドレス（自分のメタマスクのアドレス）>
receiveToken=<受け取りたいトークンのトークンアドレス>
```
に変更すると、KyberNetworkで対応しているものについては自動で変換して受け取れます。
色々なトークンで試してみましょう！


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