当前位置:   article > 正文

DAPP:众筹项目 (三) goland+react开发dapp_window.ethereum.enable()

window.ethereum.enable()

接上一篇,接着开发我们的前端吧!!

1.创建目录结构:

eth 目录:主要是实现合约交互  提供了操作合约的方法

display 目录:主要显示界面

utils:主要是web3 负责提供引入web3的公共代码

2.初始化Web3实例

      在utils目录下创建InitWeb3.js文件,把web3实例化的代码定义在InitWeb3.js文件中,并导出web3实例

在app.js下创建构造函数来获取web3测试一下

然后打开浏览器,你会报这个错,那为什么呢?因为我们找不到用户的provider

解决办法,在浏览器上安装metamask插件,自动创建一个web3实例

附加组件--扩展程序--metamask插件

好的,hello又回来了。。

.....可是又出现了一个问题,为什么 web3.eth.getAccounts() 获取不到用户账号呢??无法使用呢??

       经过反复的试验,原来安装的版本过高,metaMask已经设置了隐私保护了,你没有权限访问。

      那么如何让高版本的metaMask来调用web3呢?

使用window.ethereum来判断是否新版metamask,如果是的话,就调用ethereum.enable() 方法来请求用户授权,这将在用户网页中弹出一个授权对话框,代码如下:

  1. var web3Provider;
  2. if (window.ethereum) {
  3. web3Provider = window.ethereum;
  4. try {
  5. // 请求用户授权
  6. // 不用同步的方式
  7. window.ethereum.enable();
  8. } catch (error) {
  9. // 用户不授权时
  10. console.error("User denied account access")
  11. }
  12. } else if (window.web3) { // 老版 MetaMask Legacy dapp browsers...
  13. web3Provider = window.web3.currentProvider;
  14. } else {
  15. web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
  16. }
  17. window.web3 = new Web3(web3Provider);//web3就是你需要的web3实例

     当出现Connected就说明你成功了,那让我们看看获取的账户信息吧     

   

3.实例化合约

第一步:在eth目录下创建instance.js文件。

第二步:复制abi。

第三步:复制合约地址。

node 02-deploy.js 
contract instance address :  0x48f294B386669c069dB01D5b9b38446328AD724d

第四步:在instance.js文件中加入以下代码,创建并导出合约实例。

2.界面搭建

     主界面搭建:

(1)在display目录下创建一个TabCenter.js文件,在该文件中定义一个Tab组件。

找组件,

(2)在App.js文件显示主界面内容

(3)在index.js文件中导入css。

4)创建三个子页面,分别对应着Tab1、Tab2、Tab3的内容。

主界面进行修改:

这样就可以直接改写子界面的代码了。现在让我们看看展示吧!!

(5).显示我发起的合约数组

在componentWillMount方法中获取我发起的众筹,并设置到state中

获取我们的创建的众筹合约

  1. state ={
  2. creatorFundings :[],
  3. }
  4. //在componentWillMount方法中获取我发起的众筹,并设置到state中。
  5. async componentWillMount() {
  6. let creatorFundings = await fundingFactoryInstance.methods.getCreatorFundings().call()
  7. console.log(creatorFundings)
  8. this.setState({
  9. creatorFundings
  10. })
  11. }
  12. //在render方法中从state获取数据。
  13. render(){
  14. return(
  15. <p>{this.state.creatorFundings}</p>
  16. )
  17. }
  18. }

(6),获取每个合约的详细信息(名称,金额。。)

           接下来我们就要根据合约地址获取合约的详细信息,然后再显示在界面上。

              a,获取合约实例

                              abi,地址

                   修改instance.js文件,定义变量分别保存FundingFactory和Funding的ABI和合约地址。

  1. // ABI接口
  2. let factoryABI = [...]
  3. //地址先不指定,在程序中动态增加,完成实例化
  4. let fundingInstance = new web3.eth.Contract(fundingABI)
  5. // 导出合约实例
  6. export {fundingFactoryInstance,fundingInstance,}

                   创建FundingFactory和Funding的实例。因为一个众筹合约对应一个Funding实例,所以,这里需要创建多次Funding实例。而且创建Funding实例时候不需要传入合约地址,可以动态设置。

              b,使用方法调用fundingInstance.methods.projectName().call()

  1. let details =creatorFundings.map(async function(fundingAddress){
  2. console.log(fundingAddress)
  3. //1.把funding实例拿过来
  4. // 2.对实例进行填充地址,可以使用了
  5. let newInstance=newFundingInstance()
  6. newInstance.options.address = fundingAddress
  7. //3.使用方法调用fundingInstance.methods.projectName().call()
  8. let manager = await newInstance.methods.manager().call()
  9. let projectName = await newInstance.methods.projectName().call()
  10. let targetMoney = await newInstance.methods.targetMoney().call()
  11. let supportMoney = await newInstance.methods.supportMoney().call()
  12. let leftTime = await newInstance.methods.getLeftTime().call()
  13. let detail ={manager,projectName,targetMoney,supportMoney,leftTime}
  14. //console.table(detail)
  15. return detail
  16. })
  17. //4. 把多个promise处理成一个promise
  18. let detailInfo = Promise.all(details)
  19. detailInfo.then(detail =>{
  20. console.table(detail)
  21. })

            看看结果吧:

           将实现的细节提取到界面:

在display目录下新建common子目录,然后在子目录下新建CardList.js文件。

在文件中定义一个CardList方法,该方法负责把details中的合约信息设置到Card组件中。关于semantic-ui的card组件的具体用法,请自行参考:https://react.semantic-ui.com/views/card/#variations-colored

  1. import React from "react";
  2. import {Card,Image,Icon,List, Progress} from "semantic-ui-react";
  3. const src ='/images/daniel.jpg'
  4. const CardList =(props)=>{
  5. let details=props.details
  6. console.log('bbb',details)
  7. let cards = details.map(detail =>{
  8. return <CardFunding key={detail.fundingAddress} detail1={detail}/>
  9. })
  10. return(
  11. <Card.Group itemsPerRow={4}>
  12. {
  13. cards
  14. }
  15. </Card.Group>
  16. )}
  17. const CardFunding = (props) => {
  18. let detail2 =props.detail1
  19. console.log('de2:'.detail2)
  20. let {fundingAddress,manager, projectName, targetMoney, supportMoney, leftTime,balance,investorCount}=detail2
  21. let percent =parseFloat(balance)/parseFloat(targetMoney)*100
  22. return(
  23. <Card>
  24. <Image src='/images/daniel.jpg'/>
  25. <Card.Content>
  26. <Card.Header>{projectName}</Card.Header>
  27. <Card.Meta>
  28. <span className='date'>剩余时间:{leftTime}</span>
  29. <Progress percent={percent} progress size='small'/>
  30. </Card.Meta>
  31. <Card.Description>参加临港公路比赛</Card.Description>
  32. </Card.Content>
  33. <Card.Content extra>
  34. <List horizontal style={{display: 'flex', justifyContent: 'space-around'}}>
  35. <List.Item>
  36. <List.Content>
  37. <List.Header>已筹</List.Header>
  38. <List.Description>{balance}eth</List.Description>
  39. </List.Content>
  40. </List.Item>
  41. <List.Item>
  42. <List.Content>
  43. <List.Header>已达</List.Header>
  44. <List.Description>{percent}%</List.Description>
  45. </List.Content>
  46. </List.Item>
  47. <List.Item>
  48. <List.Content>
  49. <List.Header>参与人数</List.Header>
  50. <List.Description>{investorCount}人</List.Description>
  51. </List.Content>
  52. </List.Item>
  53. </List>
  54. </Card.Content>
  55. </Card>
  56. )}
  57. export default CardList

写的有点渣,,改太多代码了。。。。马上写下一篇吧。。。

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/717038
推荐阅读
相关标签
  

闽ICP备14008679号