易代币博客

使用Web3钱包将你的ICO众筹合约与网站连接


Web3 Integration

本教程将指导你使用Web3 Javascript库将已部署的众筹合约与你网站上的网页连接起来。 一旦你的以太坊合约与你的网站相关联,你就可以向创建成功的ICO众筹迈进一步。 剩下的唯一事情就是邀请你的投资者访问你的目标网页,这样他们只需点击几下即可从浏览器 中投资你的代币。如何获取流量到你的众筹网站和项目营销不在本教程的讨论范围。

本教程假设您已使用我们的众筹合约生成器部署了涨价众筹 智能合约。如果你想部署不同类型的众筹合约,请查看我们的创建众筹页面以获取更多选项。

众筹销售页面示例

我们已经在Ropsten测试网络部署了一个示例众筹合约,以展示如何与它进行交互。你将需要MetaMask插件钱包或任何其它Web3以太坊钱包 与其进行交互。我们还部署了与众筹合同交互的示例销售页面。我们已经包含了从合同中获取数据的功能,例如代币余额,代币的当前价格,以及更改合约状态的功能,例如购买代币,提取代币和申请退款等功能。我们在本教程中进一步解释的所有元素都包含在页面中。

示例销售页面

如你所见,该页面是一个没有任何CSS样式的简洁html文件。这是因为你希望在自己的网站上集成自己的销售页面,该页面应该有自己独特的样式。我们的页面仅展示功能。

示例页面使用web3库,该库位于同一文件夹中。 我们在zip文件中包含了这两个文件,可以在这里下载。你可以从示例页面开始在自己的html模板中集成web3,或者继续阅读本教程以了解它的工作原理。

设置页面

在调用合约函数之前,请确保将“web3.min.js”导入到你的页面。之后,你需要实例化合约实例,以便你可以调用合约方法。看看下面的代码:

我们导入了web3库,创建了一些变量以供以后使用,使用Metamask注入对象实例化web3对象,实例化javascript代表合约对象,并从web3获取以太坊帐户。确保从示例页面粘贴ABI字符串。

检查Web3钱包连接

接下来,你可能想要检查投资者是否正在使用Web3浏览器,并在必要时通知他下一步的步骤。我们将在网页头部创建一个函数来检查Web3对象是否存在,并向投资者显示一个提示:

获取帐户信息

由于我们有投资者账户的注入,我们现在可以获得一些信息,如ETH余额,代币余额等:

请注意,在加载页面主体时会调用函数getAccountInfo()。我们还添加了一个更新按钮,当用户点击它时调用getAccountInfo并按需更新页面上的文本。

购买代币

投资者可以通过两种方式购买代币:

  • - 通过直接发送ETH到众筹合约地址:0xCa7532c24aA2B2C1389AC8B1B6018e0eE0c8e9c4,或者
  • - 通过在众筹合约上调用buyTokens()方法函数。

直接发送ETH不需要Web3钱包,任何以太坊钱包都可以这样做。确保你向投资者提及此选项并在销售页面上列出合约地址。另请注意,由于将ETH作为正常交易发送到合约会调用合约的功能,因此21000Gas交易费可能还不够。你可能需要告诉他们增加交易费限制(gas limit)(不是交易费gas价格)。

以下是如何调用众筹合约的buyTokens()函数:

投资者将首先在输入框中指定他想要投资多少ETH,然后单击“购买代币”按钮。函数buyTokens()将在众筹合约上调用buyTokens(..)函数,其中包含帐户和值作为参数。只要交易号可用,该功能就会将其显示给投资者。

取回代币

由于涨价众筹合约是在完成众筹后交付代币,意味着代币和ETH都在成功结束后交付,投资者必须在众筹合约上调用withdrawFunds(..)方法函数,最终将他们的代币取回到他们的自己的钱包地址。在调用withdrawTokens函数之前,他们的代币被锁定在众筹合约中。这是一段代码片段:

申请退款

如果众筹失败(在达到众筹目标之前结束),投资者有权申请退款并获得他们的ETH。他们可以通过调用众筹合约的claimRefund(..)方法函数来实现。这是一段代码片段:

恭喜!你现在已将你的网站与以太坊众筹合约相关联,你的ICO众筹已准备好接受投资。

分享本文

接下来

如果你已完成本教程的学习,我们建议你按照以下教程进行操作:

支持Web 3.0的以太坊钱包和浏览器插件钱包
涨价众筹定义解释

与我们联系

感谢你阅读此内容!你可以:
- 在微博上关注我们
- 订阅我们的优酷频道

联系我们

我们是易代币专业区块链团队。

中国,北京