モチベーション

0xインスタントに関して技術的に解説すること。間違い、ご意見あればTwitter経由でご連絡ください。

0xインスタントとはなにか？

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

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択である。

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で取ってこれるアセットを表示する場合

zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
    },
    'body',
);

どのプロバイダーを使用するかしていする場合

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

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

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

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

zeroExInstant.render(
    {
        orderSource: 'https://api.relayer.com/sra/v2/',
        affiliateInfo: {
            feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230',
            feePercentage: 0.03,
        },
    },
    'body',
);

実行時に0.03%のアフィリエイト料が0x50ff5828a216170cf224389f1c5b0301a5d0a230に振り込まれる。

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

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',
);

参考

0x Instant

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

モチベーション

0xインスタントとはなにか？

0xインスタントのUIインテグレーション

０x Instantをカスタマイズする

参考