# 目录 [TOC=2,9] ## 介绍 GreenBelt是一个访问分布式网络节点的浏览器插件,它可以让您在浏览器中运行TrueChain网络上的Dapps,而不用专门为访问DApp而搭建一个TrueChain的全节点。目前可以在Chrome浏览器上使用,以后会扩展到各个主流浏览器。GreenBelt是基于MetaMask的MIT开源协议扩展开发,与它有同样的安全性。用户可以通过GreenBelt安全地管理不同站点上的身份并为交易做安全签名。所有用户信息只在本地浏览器上有记录,因此创建完帐户后,必须安全地保存相应的助记词与私钥。GreenBelt的目标是为TrueChain网络的DApp开发者与用户提供更简洁、更安全、更好用的连接工具。 ## 安装 GreenBelt 1.访问GreenBelt插件下载页面,[下载](https://chrome.google.com/webstore/detail/greenbelt/cgmhechlnfbnfcnomkmcillkgnipocfh) >[warning] 提示:该下载页面需要翻墙才可以访问 <br/> 2.进入下载页面后,点击“添加至Chrome”,会自动下载安装。 ![](https://box.kancloud.cn/e7fbdcd9eabfaeaa3b7c1cae08df91a5_2134x1626.png) 3.安装成功后,可以在Chrome浏览器的右上角看到GreenBelt的logo “![](http://dev.truedapp.net/greenbelt/images/icon-64.png)”图标。 ## 使用说明 >[info] 全局说明 > * GreenBelt 当前页面中所有的账户、钱包账户、钱包均指区块链上账户。 > * GreenBelt 默认为TrueChain主网;如果需要其他网络,可以通过自定义方式来添加。 > * GreenBelt 只显示网络的主币,例如:TrueChain主网下只显示TRUE。 ### 打开GreenBelt 点击Chrome浏览器的右上角“![](http://dev.truedapp.net/greenbelt/images/icon-64.png)”图标打开GreenBelt。 1.如果没有添加账户,会进入钱包添加界面,需要先添加一个账户。可以通过创建新或助记词导入两种方式添加账户。 ![](https://box.kancloud.cn/86a0fcf91abfeb5860b43413ea611b4a_764x1346.png =x500) 2.如果已经添加了账户,点击直接进入账户中心。 ![](https://box.kancloud.cn/3345c58bb952f4850370f11f37ee544d_742x1228.png =x500) ### 创建账户 1.首先在主页输入新密码、确认密码,点击“创建 - 下一步”,滚动协议文档最下方,点击接受; ![](https://box.kancloud.cn/8aef8a6e29157ef36a7254c964134654_764x1350.png =x500) 2.协议接受后,账户就添加成功了页面中会显示账户的助记词;为了数字资产的丢失,创建完成后必须要备份账户的助记词,通过笔和纸来抄写进行备份; >[danger] 注意:账户创建成功后,必须要备份钱包,通过笔和纸来抄写进行备份;切勿截屏,备份时确保周围没有摄像头、无人。 ![](https://box.kancloud.cn/361b9f095c72a7d6f810d12609bbe9da_1735x934.png) 3.备份的账户助记词必须要完成验证,才可以正常使用GreenBelt的账户。 ![](https://box.kancloud.cn/926c7e7ba001ad9c752bb727dc0679f4_1735x1544.png) ### 导入账户 1.点击页面中的“使用助记词导入账户”可以通过已有的助记词导入钱包。 ![](https://box.kancloud.cn/6bbc0fa6a2534cbe7dbbc969059303fa_1528x2692.png =x500) 2.输入助记词、密码、确认密码,点击“恢复”即可。 ![](https://box.kancloud.cn/44762304c2a367d69c9e7e23965a41dd_1735x1667.png =x500) ### 发送 / 转账 点击“![](http://dev.truedapp.net/greenbelt/images/icon-64.png)”打开GreenBelt【下图1】,点击“发送”进入转账界面【下图2】,输入收款地址、数量,点击“下一步”,进行转账确认页【下图3】,点击“确认”。 ![](https://box.kancloud.cn/08f68543798b06647fa27be902c4c333_1735x2907.png =x500) **\>** ![](https://box.kancloud.cn/fad2af4391f286f94f79251665e39e2b_1734x2914.png =x500) **\>** ![](https://box.kancloud.cn/9889290818e424ce2665a98704d3c728_1735x2896.png =x500) ### 存入 / 收款 第一种方式:点击“![](http://dev.truedapp.net/greenbelt/images/icon-64.png)”打开GreenBelt,点地址复制账户地址发送给对方来接收Token。 ![](https://box.kancloud.cn/ed95506ffe35dccae4440c3cf007a11d_742x1228.png =x500) 第二种方式:可以提供收款二维码给对方扫码来接收Token。操作步骤:点击“![](http://dev.truedapp.net/greenbelt/images/icon-64.png)”打开GreenBelt【下图1】,点击【存入】-【查看账户】就显示了自己的收款二维码,对方可直接扫二维码进行转账。 ![](https://box.kancloud.cn/bce7a928a1d87ebb6a7c183e2a8d3737_1735x2914.png =x500) **\>** ![](https://box.kancloud.cn/a717ab32bc37208254334abea9a0c4ca_1731x2914.png =x500) **\>** ![](https://box.kancloud.cn/c520905acc80633bf1d74fd70ce18397_708x1194.png =x500) ### 应用授权 当外部应用接入了GreenBelt后,在应用首次需要使用GreenBelt时,会弹出授权界面进行授权,点击“链接”完成授权。 ![](https://box.kancloud.cn/3a641ee3e5966acc3975af9dbef32633_1440x2520.png =x500) ## 开发说明 ### GreenBelt做了什么? GreenBelt将会管理用户的区块链网络账号(主要是它们的私钥)。当你需要提供一个Web端的DAPP应用的用户界面时,通过使用GreenBelt,你可以不必再让用户在Web端输入他们的私钥或者其他敏感的信息。GrennBelt会在浏览器全局注入`web3t`和`truechain`两个变量。其中`truechain`是一个与GreenBelt提供的替代`HttpProvider`的对象,而`web3t`则是通过其初始化的[Web3](https://www.npmjs.com/package/web3)对象。由于`web3t`为0.20.3版本(目前已经有1.0.0版本)的Web3对象,所以在实际开发中建议引用自己选择的版本重新初始化。 常见的一种初始化的方法: ~~~ let web3 if (web3t) { // 使用自己指定版本的Web3进行初始化 web3 = new Web3(web3t.currentProvider) // 或者 web3 = new Web3(truechain) 这两个是同一个对象 } else { console.log('GreenBelt没有运行') // 请使用备选不依靠GreenBelt的方式运行 } ~~~ ### 获取GreenBelt访问权限 虽然GreenBelt默认是不使用隐私模式(隐私模式指未申请访问权限的网站无法使用GreenBelt提供的服务)的,但是为了确保你的应用可以正常运行,同时也是对你的用户负责,在需要使用GreenBelt提供的接口前应当先申请访问权限,申请访问权限的方法为: `truechain.enable()` 第一次调用此方法后,用户会看到GreenBelt插件弹出的授权申请页面。如果用户确认后,此后调用此方法不会再次频繁弹出而是直接返回成功信息。 ![](https://dev.truedapp.net/greenbelt/assets/i1.png =x500) 如果用户确认链接授权,则会返回用户当前可用的账户地址的数组,如果用户拒绝,则会抛出`"User rejected provider access"`的异常。完整的获取授权的参考代码如下: ~~~ truechain.enable() .then(addresses => { addresses.forEach(console.log) // 获取用户可用的地址 }) .catch(err => { console.error(err) // 请使用备选不依靠GreenBelt的方式运行 }) ~~~ 同时作为用户,你可以在GreenBelt的设置菜单中通过「清除批准数据」来重置所有网站的授权记录。 ### 发送交易... 到目前为止,开发工作中和传统模式下不同的准备工作已经结束,理论上来说你只需要和通常的基于Web3的开发模式一样:提供用户界面、构建交易、发送交易即可。关于如何使用Web3发送交易或者调用智能合约如果你还有疑问,应该更多参考[Web3官方提供的文档](https://web3js.readthedocs.io/en/1.0/)。 和直接使用Web3调用不同的一些点是:你可以不必在指定交易发起的`from`地址,GreenBelt会默认使用用户当前选中的地址进行交易的签名。基于同样的理由,你也可以不指定`gasPrice`和`gas`(gasLimit)。不过如果你的应用场景需要确保这些字段都符合你的预期,那么建议你仍然不要将其置空,GreenBelt对于地址和Gas费用的推理都是简单的,很有可能造成预期外的交易,DAPP开发者应当自己控制这些因素。 一个转账的示例: ~~~ // 由于web3t的版本问题,不能使用Promise形式的回调处理 // 这也是为什么推荐使用自己指定的Web3版本进行初始化 web3t.eth.sendTransaction({ to: '0x0000000000000000000000000000000000000000', value: '1000000000000000000', gasPrice: '10000000000' }, result => { alert(result.message || result) }) ~~~ 正常来说你应该会看到这样的弹出页面,GreenBelt展示了交易的细节,交给用户决定是否签名这笔交易。在本例中,由于账户余额不足因此无法确认交易,前端也会相应的收到交易签名被拒绝的异常。 ![](https://dev.truedapp.net/greenbelt/assets/i2.png =x500) ### 注意 虽然可以通过GreenBelt来管理用户的账户,从而进行交易的签名工作,但是对于开发者来说,并不能确保用户有使用该插件。在开发时要注意考虑没有插件时的替代解决方案,或者合理的引导来让用户首先安装插件。 由于加入了GreenBelt管理交易的签名,因此会增加若干由用户选择而导致的交易失败,从交互的角度考虑,开发者应当跟踪这些错误并且针对用户的选择进行反馈调节。