一分钟做出自己的代币购买App

是否曾因为想买某个币安未上架的 ERC-20 代币,必须去注册其他交易所帐户而觉得麻烦?注册后还需要先把钱储值到交易所帐户内,会不会担心不安全?而且,成功买到币之后可能还需要通过 KYC 才能提币!这些问题,透过 0x Instant 就能解决,还能用来购买 ERC-721 的 NFTs!

  • 本文作者为 潘宣任(Robin Pan) 。
    Robin是区块链研究员及开发者,自 2017 年开始接触区块链,研究过多种加密货币,对此领域拥有无比热情。

这篇文章会有以下几个重点:

  1. 介绍 0x Instant
  2. 实作
  3. 深入瞭解 0x 在背后做了哪些事
  4. 贩售自己的 Token
  5. 浏览几项进阶参数

介绍

0x 团队在 2018 年底发行了 0x Instant(以下简称 Instant ),其目的在于降低开发 代币购买 功能的门槛与时间,开发者只需要撰写极少量的程式码,就能将这项功能加入自己的 app 或网站中。

1_B5al-KJUBf8MrsaYhESjsA.png
0x Instant 官网

Instant 除了解决複杂的交易串接之外,还提供了简易的 UI 给开发者使用。

1_8EVGcr71J6zaVJBruZuFtQ.png

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 的部分就好。

See the Pen
0x Instant 实作
by Robin Pan (@robinpan-tw)
on CodePen.

 

在这个简易的 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 = Ropsten4 = Rinkeby42 = 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 帮你做出来的购买页面了!

 

1_VqM66EmVZ4Z2YlOO2vF4RQ.png

若你的 Metamask 连结到的网路,与 Instant 连结的不同,Result 页面上方会提示你:

? 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 上查看此次交易的详细资讯

 

1_cqc6mNGUfaLccZwZ1_n0zw.png

选择 Token,填写数量,点击 Buy XXX

 

1_G-LIKla3QmCTHrxJXQ-IxA.png

Metamask 弹出的确认视窗,点击 Confirm

 

1_k6nAjw7W0V15d3BHoh6mLw.png

Instant 正在处理交易并等待区块确认

 

1_ZtIIyAr87rk7w0TBEU9MUw.png

交易成功

到此为止,恭喜你已经成功做出自己的第一个 Instant App 并完成交易了!


Behind the scenes…

交易完成后,点击 View Transaction 会连结到 Etherscan,可以查看交易的详细资讯。现在,我们来看的更深一点, 0x 到底在背后帮我们做了什麽事?

 

 

1_zZAFsN5zuhLQ74KNi1BNUQ.png

这笔交易在 Etherscan 上的详细资讯
  1. 从使用者钱包转出 ETH
  2. ETH 转进 0x-Forwarder合约(0x-Forwarder 是用来帮使用者处理 ETH 和 WETH 之间的转换,以购买 Token。因为要使用 0x protocol 必须遵守其规范,也就是必须使用 ERC-20 或 ERC-721 的 Token(未来可能会支援更多标准),但 ETH 是以太坊的原生代币,并不符合 ERC-20,因此必须先转换成 WETH 才能使用,而 WETH 其实也就只是 ERC-20 版的 ETH ,兑换比率恆定 1:1
  3. 0x-Forwarder合约 将 ETH 换成 WETH
  4. 0x-Forwarder合约 向卖家(卖单)索取 Token
  5. 支付 WETH 给卖家(卖单)(因此卖家最终收到的是 WETH ,在 Etherscan 会显示在 Token 栏位,须自行去 0x PortalRadar Relay 才能兑换回 ETH )
  6. 0x-Forwarder合约 将 Token 转交给使用者

这笔交易只用了最基本的功能,若我们在 Instant App 中实作了抽佣的功能,抑或是 orderSource 的交易所有抽成,交易中的 Token 转移将更複杂!至于要如何加入抽佣的功能,将在后面的进阶参数提到。


贩售自己的 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 IdERC-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 中抽取对应比例,并直接存入指定的钱包地址。

由 Instant 的推出,可以看到 0x 团队对于推动去中心化交易的努力,在熊市中仍然不遗馀力的开发,不断帮助使用者降低开发门槛,使用其产品也不要求一定要支付手续费,这样的方式更能吸引到开发者。2019,就让我们看看 0x 还会以哪些方式继续改变世界!


参考连结

一分钟做出自己的代币购买App

扫一扫手机访问

一分钟做出自己的代币购买App

发表评论