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";
const { bytom, setBytom } = this.props;
if(!bytom){
document.addEventListener('chromeBytomLoaded', bytomExtension => {
- console.log('bytomloaded');
const bytom = window.bytom;
setBytom(bytom);
this.bytomLoaded(bytom);
}
}
- bytomLoaded (bytom){
+ async bytomLoaded (bytom){
let bytomPollInterval = 3 * 1000;
let networks = {
solonet: 'http://app.bycoin.io:3000/',
};
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)
return (
<div>
<Header />
- <Constants />
+ <Constants/>
<section className="portfolio" id="portfolio">
<div className="container">
<Main />
}
}
-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)}/>
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
}
}
+const updateConnection = (bytomConnection) => {
+ return (dispatch) => {
+ dispatch({
+ type: "UPDATE_BYTOM_CONNECTION",
+ bytomConnection
+ })
+ }
+}
+
let actions = {
setBytom,
+ updateConnection
}
export default actions
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,
) {
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" />
}
const mapStateToProps = state => ({
bytom: state.bytom,
+ bytomConnection: state.bytomConnection
})
return connect(mapStateToProps)(BytomWrap)
}
--- /dev/null
+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)
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)
}
componentDidMount() {
+ const bytom = this.props.bytom
if (
- window.bytom
- && window.bytom.default_account
+ bytom
+ && bytom.default_account
) {
this.setState({ account: bytom.default_account })
}
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 (
<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>
}
}
+const mapStateToProps = state => ({
+ bytom: state.bytom
+})
-export default NetworkInfo
+export default connect(mapStateToProps)(NetworkInfo)
import { NavLink } from 'react-router-dom'
import NetworkInfo from './NetworkInfo'
-const Header = class extends Component {
+class Header extends Component {
constructor (props) {
super(props)
...state,
bytom: action.bytom
};
+ case "UPDATE_BYTOM_CONNECTION":
+ return {
+ ...state,
+ bytomConnection: action.bytomConnection
+ };
default:
return state
}
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,