update enable function.

diff --git a/src/components/App.js b/src/components/App.js
index 327aedd..83fff5e 100644 (file)
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -6,6 +6,7 @@ import Saving from './layout/save'
 import Footer from './layout/footer'
 import Header from './layout/header'
 import Account from './layout/account'
+import Constants from './layout/constants'
 import action from './action'
 import bytomWrap from './layout/bytomWrap'
 import {connect} from "react-redux";
@@ -18,7 +19,6 @@ class App extends Component {
     const { bytom, setBytom } = this.props;
     if(!bytom){
       document.addEventListener('chromeBytomLoaded', bytomExtension => {
-        console.log('bytomloaded');
         const bytom = window.bytom;
         setBytom(bytom);
         this.bytomLoaded(bytom);
@@ -28,7 +28,7 @@ class App extends Component {
     }
   }
 
-  bytomLoaded (bytom){
+  async bytomLoaded (bytom){
     let bytomPollInterval = 3 * 1000;
     let networks = {
       solonet: 'http://app.bycoin.io:3000/',
@@ -37,7 +37,8 @@ class App extends Component {
     };
 
     try {
-      const BYTOM_ACCOUNT = bytom.default_account
+      const BYTOM_ACCOUNT = await bytom.enable()
+      this.props.updateConnection(true)
 
       const bytomAPI = new Bytom(networks, '')
       bytomAPI.setNetType(bytom.net)
@@ -60,7 +61,7 @@ class App extends Component {
     return  (
       <div>
         <Header />
-        <Constants />
+        <Constants/>
         <section className="portfolio" id="portfolio">
           <div className="container">
             <Main />
@@ -72,29 +73,6 @@ class App extends Component {
   }
 }
 
-const Constants = () =>(
-  <header className="masthead bg-primary text-white">
-    <div className="container">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <span className="mr-5">Deposit Asset ID: </span>
-            </td>
-            <td>{GetContractArgs().assetDeposited}</td>
-          </tr>
-          <tr>
-            <td>
-              <span className="mr-5">Bill Asset ID: </span>
-            </td>
-            <td>{GetContractArgs().assetBill}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </header>
-);
-
 const Main = () => (
   <Switch>
     <Route exact path='/' component={bytomWrap(Saving)}/>
@@ -110,6 +88,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   setBytom: (bytom) => dispatch(action.setBytom(bytom)),
+  updateConnection: (bytomConnection) => dispatch(action.updateConnection(bytomConnection)),
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
\ No newline at end of file

diff --git a/src/components/action.js b/src/components/action.js
index eb31889..5f1d79c 100644 (file)
--- a/src/components/action.js
+++ b/src/components/action.js
@@ -7,8 +7,18 @@ const setBytom = (bytom) => {
   }
 }
 
+const updateConnection = (bytomConnection) => {
+  return (dispatch) => {
+    dispatch({
+      type: "UPDATE_BYTOM_CONNECTION",
+      bytomConnection
+    })
+  }
+}
+
 let actions = {
   setBytom,
+  updateConnection
 }
 
 export default actions

diff --git a/src/components/constants.js b/src/components/constants.js
index 1c44bb6..758d162 100644 (file)
--- a/src/components/constants.js
+++ b/src/components/constants.js
@@ -13,26 +13,30 @@ let banker
 let gas
 let radio
 
-const GetContractArgs = function() {
-  if(window.bytom && window.bytom.default_account && window.bytom.net){
-    let network = window.bytom.net
+const GetContractArgs = function(bytom) {
+  let network
+  if(bytom && bytom.net){
+    network = bytom.net
+  }else if(window.bytom && window.bytom.default_account && window.bytom.net){
+    network = window.bytom.net
+  }
 
-    const object = config[network]
-    if(object){
-      depositProgram = object.depositProgram
-      profitProgram = object.profitProgram
-      assetDeposited = object.assetDeposited
-      assetBill = object.assetBill
-      totalAmountBill = object.totalAmountBill
-      totalAmountCapital = object.totalAmountCapital
-      dueBlockHeight = object.dueBlockHeight
-      expireBlockHeight = object.expireBlockHeight
-      banker = object.banker
-      gas = object.gas
-      radio =BigNumber(object.totalAmountCapital).div(object.totalAmountBill).toNumber()
-    }
+  const object = config[network]
+  if(object){
+    depositProgram = object.depositProgram
+    profitProgram = object.profitProgram
+    assetDeposited = object.assetDeposited
+    assetBill = object.assetBill
+    totalAmountBill = object.totalAmountBill
+    totalAmountCapital = object.totalAmountCapital
+    dueBlockHeight = object.dueBlockHeight
+    expireBlockHeight = object.expireBlockHeight
+    banker = object.banker
+    gas = object.gas
+    radio =BigNumber(object.totalAmountCapital).div(object.totalAmountBill).toNumber()
   }
 
+
   return {
       depositProgram,
       profitProgram,

diff --git a/src/components/layout/bytomWrap.jsx b/src/components/layout/bytomWrap.jsx
index 77f8024..d86ea76 100644 (file)
--- a/src/components/layout/bytomWrap.jsx
+++ b/src/components/layout/bytomWrap.jsx
@@ -18,7 +18,22 @@ export default function(WrappedComponent) {
       ) {
         return <WrappedComponent {...this.props} />
       }
-      else if (( window.bytom )) {
+      else if (( bytom && !this.props.bytomConnection)) {
+        return (
+            <div className="columns">
+              <div className="column" />
+              <div className="column is-two-thirds">
+                <h1 className="title">
+                  Authenticate <strong>Bytom-Chrome-Extension</strong>.
+                </h1>
+                <p className="lead">
+                  Please Authenticate the connection request.
+                </p>
+              </div>
+              <div className="column" />
+            </div>
+        )
+      } else if (( bytom )) {
         return (
             <div className="columns">
               <div className="column" />
@@ -62,6 +77,7 @@ export default function(WrappedComponent) {
   }
   const mapStateToProps = state => ({
     bytom: state.bytom,
+    bytomConnection: state.bytomConnection
   })
   return connect(mapStateToProps)(BytomWrap)
 }

diff --git a/src/components/layout/constants/index.jsx b/src/components/layout/constants/index.jsx
new file mode 100644 (file)
index 0000000..12acca1
--- /dev/null
+++ b/src/components/layout/constants/index.jsx
@@ -0,0 +1,39 @@
+import React, {
+  Component
+} from 'react'
+import GetContractArgs from "../../constants";
+import {connect} from "react-redux";
+
+class Constants extends Component {
+
+  render () {
+    return (
+      <header className="masthead bg-primary text-white">
+        <div className="container">
+          <table>
+            <tbody>
+            <tr>
+              <td>
+                <span className="mr-5">Deposit Asset ID: </span>
+              </td>
+              <td>{GetContractArgs(this.props.bytom).assetDeposited}</td>
+            </tr>
+            <tr>
+              <td>
+                <span className="mr-5">Bill Asset ID: </span>
+              </td>
+              <td>{GetContractArgs(this.props.bytom).assetBill}</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </header>
+    )
+  }
+
+}
+const mapStateToProps = state => ({
+  bytom: state.bytom
+})
+
+export default connect(mapStateToProps)(Constants)

diff --git a/src/components/layout/header/NetworkInfo.jsx b/src/components/layout/header/NetworkInfo.jsx
index a08ed06..0ac2ad6 100644 (file)
--- a/src/components/layout/header/NetworkInfo.jsx
+++ b/src/components/layout/header/NetworkInfo.jsx
@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import jdenticon from "jdenticon"
+import {connect} from "react-redux";
 
-const NetworkInfo = class extends Component {
+class NetworkInfo extends Component {
 
   constructor (props) {
     super(props)
@@ -12,9 +13,10 @@ const NetworkInfo = class extends Component {
   }
 
   componentDidMount() {
+    const bytom = this.props.bytom
     if (
-      window.bytom
-      && window.bytom.default_account
+      bytom
+      && bytom.default_account
     ) {
       this.setState({ account: bytom.default_account })
     }
@@ -22,10 +24,10 @@ const NetworkInfo = class extends Component {
 
   render() {
     const account = this.state.account
-
+    const bytom = this.props.bytom
     if (
-      window.bytom
-      && window.bytom.default_account
+      bytom
+      && bytom.default_account
     ) {
       const svg = jdenticon.toSvg(account.alias, 40)
       return (
@@ -33,7 +35,7 @@ const NetworkInfo = class extends Component {
           <div className="nav-item  d-flex ">
             <NavLink  exact activeClassName="active" className="d-flex nav-link rounded js-scroll-trigger" to='/account'>
               <div className="mr-2" dangerouslySetInnerHTML={{__html:svg}} />
-              <div className="mt-auto mb-auto ">{window.bytom.default_account.alias}</div>
+              <div className="mt-auto mb-auto ">{bytom.default_account.alias}</div>
             </NavLink>
           </div>
         </div>
@@ -44,5 +46,8 @@ const NetworkInfo = class extends Component {
   }
 }
 
+const mapStateToProps = state => ({
+  bytom: state.bytom
+})
 
-export default NetworkInfo
+export default connect(mapStateToProps)(NetworkInfo)

diff --git a/src/components/layout/header/index.jsx b/src/components/layout/header/index.jsx
index 0f61f0c..8efe21f 100644 (file)
--- a/src/components/layout/header/index.jsx
+++ b/src/components/layout/header/index.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import NetworkInfo from './NetworkInfo'
 
-const Header = class extends Component {
+class Header extends Component {
 
   constructor (props) {
     super(props)

diff --git a/src/reducers/rotateReducer.js b/src/reducers/rotateReducer.js
index e5a2667..0a0310f 100644 (file)
--- a/src/reducers/rotateReducer.js
+++ b/src/reducers/rotateReducer.js
@@ -15,6 +15,11 @@ export default (state, action) => {
         ...state,
         bytom: action.bytom
       };
+    case "UPDATE_BYTOM_CONNECTION":
+      return {
+        ...state,
+        bytomConnection: action.bytomConnection
+      };
     default:
       return state
   }

diff --git a/src/store.js b/src/store.js
index 2218f32..c0395bd 100644 (file)
--- a/src/store.js
+++ b/src/store.js
@@ -2,7 +2,7 @@ import rotateReducer from "./reducers/rotateReducer"
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 
-function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:'', bytom:''}) {
+function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:'', bytom:'', bytomConnection:false}) {
   return createStore(
     rotateReducer,
     state,