DEXのプロトコルである0xの0xインスタントを解説する。

# モチベーション
0xインスタントに関して技術的に解説すること。間違い、ご意見あれば[Twitter経由](https://twitter.com/WatanabeSota?lang=en)でご連絡ください。

# 0xインスタントとはなにか？
* 0xインスタントは、様々なトークンを数タップで購入できる非常にユーザービリティーが高いプロダクト。開発者は無料でオープンソースの数行のコードをインテグレートするだけで、アプリケーション内に0xインスタントの機能を盛り込むことができ、手数料を新たな収益源にすることもできる。

![Screen Shot 2018-12-21 at 9.18.33.png](https://qiita-image-store.s3.amazonaws.com/0/327904/adbbc92c-4477-afd4-2722-c08c6ff42b9e.png)

* 0xインスタントに接続すると、Metamaskが自動で接続される。買いたいトークンと、トークン量を指定し購入ボタンを押すことによって簡単にトークンの購入ができる。

* **革新的なのは、ETHとERC20を交換する時に、WETHを生成してからERC20と交換しなければいけないが、0xインスタントでは、WETHに裏で変えているので、ユーザー視点ではETHとERC20を交換しているように感じる。**

* 0xインスタントで使用するライブラリーは2つで`0x Instant UI Component`と`Asset Buyer`。

* `affiliateFee`のパラメーターにEthereumアドレスを指定することでアフィリエイト料を稼ぐことができる。パーセンテージはマックスで5%。

* 現在（2018/12/21）　ETHからERC20、ERC721を購入するというオプションのみだが、将来的には、ERC20をERC20と交換するなども可能になる予定。

# 0xインスタントのUIインテグレーション
`0x Instant UI Component`と`Asset Buyer`はJSパッケージとして提供されており、ローカル環境にダウンロードして使うか0xが管理するサーバー経由で使うのか2択である。

```html:0xInstant
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://instant.0x.org/instant.js" /></script>
    </head>
    <body>
        <script type='text/javascript'>
            function renderZeroExInstant() {
                zeroExInstant.render(
                    {
                        orderSource: 'https://api.relayer.com/sra/v2/',
                    },
                    'body',
                );
            }
        </script>
        <button onClick="renderZeroExInstant()">Hello World</button>
    </body>
</html>
```
HelloWorldを押すと、0xInstantが発動する。この場合、`https://api.relayer.com/sra/v2/`からオーダーが取られる。

# ０x Instantをカスタマイズする
`render()`の内部をカスタマイズすることにより編集を行う。

| オプション | 説明 | 
|:-----------:|:------------:|
| orderSource       |  Standard Relayer API HTTP endpointもしくは署名された0xのオーダーを特定する |  
| provider    |  Ethereum providerのインスタンス。指定されていなければインジェクトされているプロバイダーに指定される |  
| walletDisplayName    |  接続するWallet名（Metamaskとか） |    
| availableAssetDatas      | Instant経由で購入できるアセットのデータを指定する。デフォルトではorderSourceの全トークン |    
| defaultSelectedAssetData  | availableAssetDatasの中でデフォルトで表示するアセットの指定 |     
| defaultAssetBuyAmount      |   購入するトークンの量、デフォルトでは０ |   
| additionalAssetMetaDataMap	    |      | 
| networkId	    |   接続するネットワークID、デフォルトでは1（メインネット）   |   
| affiliateInfo	    |   アフィリエイト報酬をいくらもらうか。.05がMax   |   
| shouldDisableAnalyticsTracking  | Instantの分析をするかどうか。デフォルト値はfalse   |

**Standard Relayer APIで取ってこれるアセットを表示する場合**

```javascript
zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
    },
    'body',
);
```
 
**どのプロバイダーを使用するかしていする場合**

```javascript
zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
        provider: window.ethereum,
        walletDisplayName: 'Trust Wallet',
    },
    'body',
);
```

**デフォルトで表示するトークンを指定する場合**

```javascript
zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
        availableAssetDatas: ['0xf47261b04c32345ced77393b3530b1eed0f346429d'],
        defaultSelectedAssetData: '0xf47261b04c32345ced77393b3530b1eed0f346429d',
    },
    'body',
);
```

**アフィリエイト料を取る場合**

```javascript
zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
        affiliateInfo: {
            feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
            feePercentage: 0.03,
        },
    },
    'body',
);
```
実行時に0.03%のアフィリエイト料が`0x50ff5828a216170cf224389f1c5b0301a5d0a230`に振り込まれる。

**カスタムトークンを売買する場合**

```javascript
zeroExInstant.render(
    {
        // these can contain makerAssetDatas that are not supported by default
        orderSource: [signedOrder1, signedOrder2],
        additionalAssetMetaDataMap: {
            '0xf47261b0000000000000000000000000744d70fdbe2bc4cf95131626614a1764df805b9e': {
                assetProxyId: '0xf47261b0', // ERC20 Proxy Id
                decimals: 18,
                symbol: 'XXX',
                name: 'My Custom Token',
                primaryColor: '#F2F7FF', // Optional
                iconUrl: 'https://cdn.icons.com/my_icon.svg', // Optional
            },
        },
    },
    'body',
);
```



#参考
1. [0x Instant](https://0x.org/wiki#Get-Started-With-Instant)