EOS [从零开始 DAPP 开发] 22 - 实现 DAPP 通证的充值、提现功能

pendingauth · 2019年09月05日 · 26 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1814828065

这篇文章介绍DAPP开发中经常使用到的业务场景:充值、提现的实现过程。

前端入口

在主界面的用户信息栏,当点击WEI代币数量时,弹出气泡框:

使用antd提供的组件实现:

提现(withdraw)

提现由weiwendappss合约的withdraw Action实现,代码如下:

ACTION withdraw(name account, asset quantity) {
  require_auth(account);

  auto itr = users.find(account.value);

  check(quantity.amount > 0, "withdraw amount must be positive");
  check(itr->balance >= quantity, "overdrawn balance");

  transfer_token(account, quantity);
  users.modify(itr, account, [&](auto& user){
    user.balance -= quantity;
  });
}

transfer_token函数内联调用weiwentokens::transfer Action,把WEI代币从合约账户转账到用户的EOS账户:

void transfer_token(name to, asset quantity){
  action(
    permission_level{_self,"active"_n},
    "weiwentokens"_n,
    "transfer"_n,
    std::make_tuple(_self, to, quantity, std::string("transfer token"))
  ).send();
}

调用内联Action,合约会要求调用者进行授权,即让weiwendappss@eosio.code权限作为合约调用者active权限的子权限,如图所示:

  • 提现时,调用者是weiwendappss账户本身,可以授权;

  • 充值时,调用者是EOS用户,如果授权就相当于把账户控制权交给了合约账户;

因此,充值时一般不使用Action方式来实现(下面会讲)。

frontend目前的项目结构如下:

在src/api/service.js中,编写提现相关的withdraw接口:

使用pushAction调用weiwendappss::withdraw Action。

提现的前端代码在src/components/User.js中实现,当点击“提现”按钮时,会使用antd提供的组件弹出对话框:

效果如下:

调用Scatter向EOS区块链发送交易:

提现成功后可以到区块浏览器查询这笔交易:

充值(deposit)

和提现不一样,为了权限安全,充值不能使用合约Action的方式来实现,weiwendappss合约使用on_notify监听转入的WEI代币,并做相应操作:

[[eosio::on_notify("weiwentokens::transfer")]] 
void deposit(name from, name to, asset quantity, std::string memo) {
  if(to != _self) return;

  if(quantity.symbol == TOKEN_SYMBOL){ 
    auto itr = users.find(from.value);    

    if(itr != users.end()){
      users.modify(itr, _self, [&](auto& user){
        user.balance += quantity;
      });
    }    
  }
}

充值功能的前端实现,需要用到两个第三方node模块:

react-copy-to-clipboard(拷贝字符串到剪贴板)

npm install react-copy-to-clipboard --save

qrcode.react(生成二维码)

npm install qrcode.react --save

安装好后,package.json的dependencies如下:

除去React自带的react、react-dom、react-scripts外,已安装16个第三方模块。

点击气泡框中的“充值”按钮,弹出使用Modal.info创建的充值信息对话框:

效果如下:

使用上面安装的两个node模块:react-copy-to-clipboard、qrcode.react,方便的实现了显示充值账户二维码和点击充值账户名复制到剪贴板的功能。

songguo54321账户原本有106481.0795个WEI:

充值100000个WEI到weiwendappss账户:

songguo54321账户的WEI余额变为206481.0795:

Tips

项目代码在Github同步更新:https://github.com/songguo6/weiwen-dapp

更多内容

EOS开发系列目录

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册