一分鐘做出自己的代幣購買App

一分鐘做出自己的代幣購買App

0x Instant 實作及深入解析

是否曾因為想買某個幣安未上架的 ERC-20 代幣，必須去註冊其他交易所帳戶而覺得麻煩？註冊後還需要先把錢儲值到交易所帳戶內，會不會擔心不安全？而且，成功買到幣之後可能還需要通過 KYC 才能提幣！這些問題，透過 0x Instant 就能解決，還能用來購買 ERC-721 的 NFTs！

這篇文章會有以下幾個重點：

1. 介紹 0x Instant
2. 實作
3. 深入瞭解 0x 在背後做了哪些事
4. 販售自己的 Token
5. 瀏覽幾項進階參數

文章中將使用 Metamask ，如果你尚未安裝或是還不了解 Metamask 是什麼，建議你可以參考 區塊客的介紹 或是JOYSO的安裝教學。

介紹

0x 團隊在 2018 年底發行了 0x Instant （以下簡稱 Instant ），其目的在於降低開發 代幣購買 功能的門檻與時間，開發者只需要撰寫極少量的程式碼，就能將這項功能加入自己的 app 或網站中。

Instant 除了解決複雜的交易串接之外，還提供了簡易的 UI 給開發者使用。

然而，Instant 目前只允許使用 ETH 購買 ERC-20 和 ERC-721，無法用 Token 換回 ETH ，也暫不支援以 ERC-20 買 ERC-20 。

實作

在實作自己的 Instant 前，你可能會希望能先使用別人已經寫好的 Instant App 來玩玩看。因此，我在 Kovan 測試鏈上發行了 RobinToken（ROB） ，放進 Instant 販售（大家不用擔心， 在 Kovan 上可以領免費 ETH ，不需要花真錢），有興趣的人請連結到 Buy RobinToken Demo 。

為了方便教學與實作，我們將使用線上開發工具 CodePen 來編輯程式碼，並且能立即查看執行結果。下方嵌入在文章中的 CodePen 僅能展示成果，若覺得視窗太小，或是想自己動手做做看，可以點擊此 CodePen連結 以完整視窗檢視和編輯（或點擊 Run Pen 後，再點擊右上角的 Edit On CodePen 即可）。

此次的 CodePen，我們只需要看 JS 的部分就好。

在這個簡易的 app 中，其實只需要提供 orderSource 這個參數，就已經能提供最基本的功能了。

orderSource 參數的意思是： 能被購買的交易來源 。也就是使用者在點擊購買後， Instant 會自動幫你尋找賣單搓合的地方。範例裡傳入的值是一個去中心化交易所的 API ，然而這個交易所API 必須實作 0x protocol 的 order 格式 ，才能讓 Instant 讀到 orderbook 資料並且最終進行搓合。

除了傳入交易所API，使用交易所上架的幣和賣單，開發者也能自行提供賣單（ signedOrder ）給 Instant ，這些自行提供的賣單就可以包含自己發行的 ERC-20 或 ERC-721 Token！但這部分較為複雜，將留到 “ 販售自己的 Token ” 再來介紹。

而為了進行測試，我們不會希望要在主網上花真的 ETH 來購買，因此還會加上另一個參數： networkId ，用來告訴 Instant 我們要連結的是主網或是其他測試鏈。幾個較常使用的值為 1 = 主網 、 3 = Ropsten 、 4 = Rinkeby 、 42 = Kovan ，其餘有興趣可以連到 這篇回覆 看。

還要注意的一點是，有些 交易所API 會依照連結到的網路的不同（主網、測試鏈），而作些微的調整，以方便區分。因此，修改了 networkId ，也可能會需要修改 orderSource 才能正常運作。下面列出幾個 pair 給大家，有些交易所在測試鏈上可能沒有持續維護或更新 orderbook，練習時若發現想買的幣數量不足，可以切換其他幣種或是交易所再試試（更多資訊請參考 這裡 ）：

//####################################################

// {Radar Relay交易所}
// 主網
orderSource: 'https://api.radarrelay.com/0x/v2/',
networkId: 1

// Kovan測試鏈
orderSource: 'https://api.kovan.radarrelay.com/0x/v2/',
networkId: 42

//####################################################

// {OpenRelay交易所}
// 主網
orderSource: 'https://api.openrelay.xyz/v2/',
networkId: 1

// Ropsten測試鏈
orderSource: 'https://api.openrelay.xyz/v2/',
networkId: 3

// Kovan測試鏈
orderSource: 'https://api.openrelay.xyz/v2/',
networkId: 42

//####################################################

在 JS 區塊改完這兩個參數後，點擊上方的 Run 按鈕，Result 區塊就能看到 Instant 幫你做出來的購買頁面了！

若你的 Metamask 連結到的網路，與 Instant 連結的不同，Result 頁面上方會提示你：

:cry: Wrong network detected. Try switching to XXX.

此時只要將 Metamask 和 Instant 的設定調成一致就行，不論是切換 Metamask 的網路，或是更改 Instant 的參數都可以。

接下來，就可以用我們的 app 來實際購買 Token 了！

1. 點擊 Select Token ，在彈出列表中選擇你想購買的 Token（這個列表上能選擇的 Token 就是 orderSource 所能提供的 Token 種類，給 orderSource 傳入不同的值可能會有不同的結果）
2. 填入數量並按下 Buy XXX
3. 這時候 Metamask 會彈出視窗請你確認交易，點擊 Confirm ， Instant 就會幫你搓合並執行交易
4. 等待交易的區塊確認
5. 若交易成功， Instant 的頁面右上方會顯示 勾勾 表示交易成功，我們可以點擊 View Transaction 在 Etherscan 上查看此次交易的詳細資訊

到此為止，恭喜你已經成功做出自己的第一個 Instant App 並完成交易了！

販售自己的 Token

在介紹進階參數前，先進一步介紹前面提到的必填參數 orderSource ，除了可以傳入交易所API，開發者也能自行傳入賣單（ signedOrder ），以販售自己擁有的 Token（包括自己發行的 Token）。

開發者發行了自己的 Token 之後，只要使用 0x 產生 signedOrder 並放進 Instant ，即可提供使用者購買。

我認為這是 Instant 最重要的功能，有以下幾個原因：

1. 不用等待交易所審核上架
2. 使用者不需要註冊交易所帳號
3. 使用者不需要自行輸入合約地址
4. 支援 ERC-721
5. 提供了簡易 UI ，並且可以自行客製化
6. 可以嵌入至自己的網站中

而 signedOrder 顧名思義就是 被簽名的訂單 ，在這邊是由 maker 送出 Token 賣單的交易，並用 private key 簽名以證明交易的真實性。 signedOrder 的 Interface 如下：

{
  exchangeAddress: string,           //0x的exchange合約地址
  expirationTimeSeconds: BigNumber,  //order過期時間(UNIX時間)
  feeRecipientAddress: string,       //手續費接收的錢包地址
  makerAddress: string,              
  makerAssetAmount: BigNumber,       
  makerAssetData: string,            //賣單Token的assetData(後面會介紹)
  makerFee: BigNumber,              
  salt: BigNumber,                   //隨機數，用以確保orderHash的唯一性
  senderAddress: string,             
  signature: string,                 
  takerAddress: string,              
  takerAssetAmount: BigNumber,       
  takerAssetData: string,            //買單Token的assetData(後面會介紹)
  takerFee: BigNumber,               
}

至於如何填入 Token 資訊並產生 signedOrder ，可以參考 新手範例程式碼 中的幾個 scenario ，或是官方的 Create, Validate, Fill Order 完整教學。因篇幅因素，在此就不贅述了。

進階參數

1. provider ： 連結到 Ethereum 的方式 。如果沒有提供值給此參數， Instant 會嘗試尋找執行環境中是否已經有被嵌入的 provider ，若還是沒有，則會要求使用者安裝 Metamask 才能使用。
2. defaultSelectedAssetData ： 預設選取的 Token 種類 。
3. defaultAssetBuyAmount ： 預設填入的購買數量 。
4. availableAssetDatas ： 指定透過 Instant 所能購買的 Token 種類 ，預設是 orderSource 提供的所有 Token。參數接收一個陣列，陣列內的值是符合 0x 定義的一段 unique 識別碼（ assetData ）。如果你要使用的 Token 是 Instant 原本就支援的，可以直接抓 列表 上的值。 assetData 是由 代幣的 Transfer Proxy Id ＋ 合約地址 ＋ Token Id （ ERC-721才需要提供 ）所組成。以 ERC-20 的合約為例，ERC-20 的 Transfer Proxy Id = 0xf47261b0 ，合約地址 address = 0x1dc4c1cefef38a777b15aa20260a54e584b16c48 ，產生出的結果則為 assetData = 0xf47261b00000000000000000000000001dc4c1cefef38a777b15aa20260a54e584b16c48 。為了方便， Instant 目前有提供一個 method 來取得 ERC-20 的 assetData 值，透過呼叫 zeroExInstant.assetDataForERC20TokenAddress('contractAddress') 即可。
5. additionalAssetMetaDataMap ： 額外新增其他種類的 Token ，因為你的 Token 可能不在 Instant 預設支援的名單 中。需要傳入的參數包括 Token 的 assetData、使用的 Transfer Proxy Id、代幣名稱和縮寫等等。詳細資訊可以參考 Instant FAQs 內的 “ What is assetMetaData? ” 章節。
6. affiliateInfo ： 抽佣的比例以及佣金存入的錢包地址 。每個實作 Instant 的 App 都可以自行決定是否要抽佣，最高可以抽到 5%！部署後的每筆交易， Instant 會自動從 使用者支付的 ETH 中抽取對應比例，並直接存入指定的錢包地址。