モチベーション
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択である。
<!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',
);
#参考