fix some bug that old version js-conflux-sdk cause

.env

@@ -1,2 +1,5 @@
-REACT_APP_CONFLUX_NODE_RPC=http://mainnet-jsonrpc.conflux-chain.org:12537
-REACT_APP_CONFLUX_COIN_ADDRESS=0x86dc863969187b9213c35a794b7dab0b3c188c94
+# 定义一些环境变量
+# update latest PRC
+REACT_APP_CONFLUX_NODE_RPC=https://test.confluxrpc.com
+# update the Contract address
+REACT_APP_CONFLUX_COIN_ADDRESS=0x81d575265c4deae9d341ee53a1893a135870f961

README.md

@@ -1,4 +1,7 @@
 # Conflux 前端
+[注意：New Feature分支变更如下：
+1.因conflux CIP37地址的增加， Master 分支的Js-Conflux-SDK版本老旧 出现Conflux Portal账户获取后报错 依赖源改为https://github.com/Conflux-Chain/js-conflux-sdk.git
+2.新的js-conflux-sdk已经不包含util类 将drip转换成cfx部分需要用到Drip类]
 
 完整 Conflux 教程可前往 [Conflux DApp 开发教程](https://github.com/ObsidianLabs/conflux-dapp-tutorial)
 

package.json

@@ -7,7 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "js-conflux-sdk": "git+https://git@github.com/qftgtr/js-conflux-sdk.git",
+    "js-conflux-sdk": "git+https://github.com/Conflux-Chain/js-conflux-sdk.git",
     "lodash": "^4.17.19",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/components/ConfluxPortal.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { util } from 'js-conflux-sdk'
+import { Drip } from 'js-conflux-sdk'
 
 import conflux from '../lib/conflux'
 import confluxPortal from '../lib/conflux-portal'
@@ -19,18 +19,22 @@ export default class ConfluxPortal extends PureComponent {
   connectConfluxPortal = async () => {
     this.setState({ status: PORTAL_STATE_CONNECTING })
     await confluxPortal.enable()
+
     const account = confluxPortal.getAccount()
+    console.log(account)
     this.setState({ status: PORTAL_STATE_CONNECTED, account, balance: '' })
     this.refreshBalance()
   }
 
   refreshBalance = async () => {
+
     if (!this.state.account) {
       return
     }
     this.setState({ balance: '' })
     const balance = await conflux.getBalance(this.state.account)
-    this.setState({ balance: util.unit.fromDripToCFX(balance) })
+    // This is different from https://github.com/ObsidianLabs/conflux-frontend-react
+    this.setState({ balance: Drip(balance).toCFX()})
   }
 
   renderPortalButton = () => {

src/lib/conflux-portal.js

@@ -1,4 +1,6 @@
+// 用于和Conflux Portal进行交互的一个代码 
 class ConfluxPortal {
+  // constructor会在创建Conflux Portal的实例时候检查浏览器环境是否有Conflux Portal
   constructor (conflux) {
     if (typeof conflux === 'undefined') {
       throw new Error('No Conflux detected')
@@ -8,7 +10,8 @@ class ConfluxPortal {
     }
     this.conflux = conflux
   }
-
+  // enable方法是点击前端conect to Conflux Portal按钮时调用的方法
+  // 它会去调用Conflux Portal的一个enable方法 得到用户授权 
   async enable () {
     this.accounts = await this.conflux.enable()
   }
@@ -20,6 +23,8 @@ class ConfluxPortal {
     return this.accounts[0]
   }
 
+  // 当用户构造一个交易时 比如说普通的转账交易或者合约交易的时候
+  // 会通过sendTransaction方法将交易推给Conflux Portal 由Conflux Portal进行交易签名的确认签名和推送
   async sendTransaction (params) {
     return new Promise((resolve, reject) => {
       this.conflux.sendAsync({

src/lib/conflux.js

@@ -1,15 +1,20 @@
+// 使用js conflux SDK
 import { Conflux } from 'js-conflux-sdk'
 
 import abiCoin from './abi/Coin.json'
 import abiSponsorWhitelistControl from './abi/SponsorWhitelistControl.json'
 
+// 根据PRC环境变量创建了一个SDK实例
 const conflux = new Conflux({
   url: process.env.REACT_APP_CONFLUX_NODE_RPC,
   defaultGasPrice: 100, // The default gas price of your following transactions
   defaultGas: 1000000, // The default gas of your following transactions
   logger: console,
+  networkId: 1
 })
 
+// 根据SDK实例去创建对应的合约的实例
+//  这样视图中才可以把合约的相关信息展示出来并且构造相关的合约交易
 export const ContractCoin = {
   name: 'Coin',
   abi: abiCoin,