From 717ff8d09511a0c75840272cf3188652c195b264 Mon Sep 17 00:00:00 2001 From: Zhiting Lin Date: Wed, 26 Jun 2019 15:25:37 +0800 Subject: [PATCH] update enable function. --- src/components/App.js | 33 +++++------------------ src/components/action.js | 10 +++++++ src/components/constants.js | 38 +++++++++++++++------------ src/components/layout/bytomWrap.jsx | 18 ++++++++++++- src/components/layout/constants/index.jsx | 39 ++++++++++++++++++++++++++++ src/components/layout/header/NetworkInfo.jsx | 21 +++++++++------ src/components/layout/header/index.jsx | 2 +- src/reducers/rotateReducer.js | 5 ++++ src/store.js | 2 +- 9 files changed, 113 insertions(+), 55 deletions(-) create mode 100644 src/components/layout/constants/index.jsx diff --git a/src/components/App.js b/src/components/App.js index 327aedd..83fff5e 100644 --- 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 (
- +
@@ -72,29 +73,6 @@ class App extends Component { } } -const Constants = () =>( -
-
- - - - - - - - - - - -
- Deposit Asset ID: - {GetContractArgs().assetDeposited}
- Bill Asset ID: - {GetContractArgs().assetBill}
-
-
-); - const Main = () => ( @@ -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 --- 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 --- 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 --- a/src/components/layout/bytomWrap.jsx +++ b/src/components/layout/bytomWrap.jsx @@ -18,7 +18,22 @@ export default function(WrappedComponent) { ) { return } - else if (( window.bytom )) { + else if (( bytom && !this.props.bytomConnection)) { + return ( +
+
+
+

+ Authenticate Bytom-Chrome-Extension. +

+

+ Please Authenticate the connection request. +

+
+
+
+ ) + } else if (( bytom )) { return (
@@ -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 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 ( +
+
+ + + + + + + + + + + +
+ Deposit Asset ID: + {GetContractArgs(this.props.bytom).assetDeposited}
+ Bill Asset ID: + {GetContractArgs(this.props.bytom).assetBill}
+
+
+ ) + } + +} +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 --- 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 {
-
{window.bytom.default_account.alias}
+
{bytom.default_account.alias}
@@ -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 --- 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 --- 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 --- 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, -- 2.11.0