A simple deposit and profit bytom dapp demo
Révision | 717ff8d09511a0c75840272cf3188652c195b264 (tree) |
---|---|
l'heure | 2019-06-26 16:25:37 |
Auteur | Zhiting Lin <zlin035@uott...> |
Commiter | Zhiting Lin |
update enable function.
@@ -6,6 +6,7 @@ import Saving from './layout/save' | ||
6 | 6 | import Footer from './layout/footer' |
7 | 7 | import Header from './layout/header' |
8 | 8 | import Account from './layout/account' |
9 | +import Constants from './layout/constants' | |
9 | 10 | import action from './action' |
10 | 11 | import bytomWrap from './layout/bytomWrap' |
11 | 12 | import {connect} from "react-redux"; |
@@ -18,7 +19,6 @@ class App extends Component { | ||
18 | 19 | const { bytom, setBytom } = this.props; |
19 | 20 | if(!bytom){ |
20 | 21 | document.addEventListener('chromeBytomLoaded', bytomExtension => { |
21 | - console.log('bytomloaded'); | |
22 | 22 | const bytom = window.bytom; |
23 | 23 | setBytom(bytom); |
24 | 24 | this.bytomLoaded(bytom); |
@@ -28,7 +28,7 @@ class App extends Component { | ||
28 | 28 | } |
29 | 29 | } |
30 | 30 | |
31 | - bytomLoaded (bytom){ | |
31 | + async bytomLoaded (bytom){ | |
32 | 32 | let bytomPollInterval = 3 * 1000; |
33 | 33 | let networks = { |
34 | 34 | solonet: 'http://app.bycoin.io:3000/', |
@@ -37,7 +37,8 @@ class App extends Component { | ||
37 | 37 | }; |
38 | 38 | |
39 | 39 | try { |
40 | - const BYTOM_ACCOUNT = bytom.default_account | |
40 | + const BYTOM_ACCOUNT = await bytom.enable() | |
41 | + this.props.updateConnection(true) | |
41 | 42 | |
42 | 43 | const bytomAPI = new Bytom(networks, '') |
43 | 44 | bytomAPI.setNetType(bytom.net) |
@@ -60,7 +61,7 @@ class App extends Component { | ||
60 | 61 | return ( |
61 | 62 | <div> |
62 | 63 | <Header /> |
63 | - <Constants /> | |
64 | + <Constants/> | |
64 | 65 | <section className="portfolio" id="portfolio"> |
65 | 66 | <div className="container"> |
66 | 67 | <Main /> |
@@ -72,29 +73,6 @@ class App extends Component { | ||
72 | 73 | } |
73 | 74 | } |
74 | 75 | |
75 | -const Constants = () =>( | |
76 | - <header className="masthead bg-primary text-white"> | |
77 | - <div className="container"> | |
78 | - <table> | |
79 | - <tbody> | |
80 | - <tr> | |
81 | - <td> | |
82 | - <span className="mr-5">Deposit Asset ID: </span> | |
83 | - </td> | |
84 | - <td>{GetContractArgs().assetDeposited}</td> | |
85 | - </tr> | |
86 | - <tr> | |
87 | - <td> | |
88 | - <span className="mr-5">Bill Asset ID: </span> | |
89 | - </td> | |
90 | - <td>{GetContractArgs().assetBill}</td> | |
91 | - </tr> | |
92 | - </tbody> | |
93 | - </table> | |
94 | - </div> | |
95 | - </header> | |
96 | -); | |
97 | - | |
98 | 76 | const Main = () => ( |
99 | 77 | <Switch> |
100 | 78 | <Route exact path='/' component={bytomWrap(Saving)}/> |
@@ -110,6 +88,7 @@ const mapStateToProps = state => ({ | ||
110 | 88 | |
111 | 89 | const mapDispatchToProps = dispatch => ({ |
112 | 90 | setBytom: (bytom) => dispatch(action.setBytom(bytom)), |
91 | + updateConnection: (bytomConnection) => dispatch(action.updateConnection(bytomConnection)), | |
113 | 92 | }) |
114 | 93 | |
115 | 94 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)) |
\ No newline at end of file |
@@ -7,8 +7,18 @@ const setBytom = (bytom) => { | ||
7 | 7 | } |
8 | 8 | } |
9 | 9 | |
10 | +const updateConnection = (bytomConnection) => { | |
11 | + return (dispatch) => { | |
12 | + dispatch({ | |
13 | + type: "UPDATE_BYTOM_CONNECTION", | |
14 | + bytomConnection | |
15 | + }) | |
16 | + } | |
17 | +} | |
18 | + | |
10 | 19 | let actions = { |
11 | 20 | setBytom, |
21 | + updateConnection | |
12 | 22 | } |
13 | 23 | |
14 | 24 | export default actions |
@@ -13,26 +13,30 @@ let banker | ||
13 | 13 | let gas |
14 | 14 | let radio |
15 | 15 | |
16 | -const GetContractArgs = function() { | |
17 | - if(window.bytom && window.bytom.default_account && window.bytom.net){ | |
18 | - let network = window.bytom.net | |
16 | +const GetContractArgs = function(bytom) { | |
17 | + let network | |
18 | + if(bytom && bytom.net){ | |
19 | + network = bytom.net | |
20 | + }else if(window.bytom && window.bytom.default_account && window.bytom.net){ | |
21 | + network = window.bytom.net | |
22 | + } | |
19 | 23 | |
20 | - const object = config[network] | |
21 | - if(object){ | |
22 | - depositProgram = object.depositProgram | |
23 | - profitProgram = object.profitProgram | |
24 | - assetDeposited = object.assetDeposited | |
25 | - assetBill = object.assetBill | |
26 | - totalAmountBill = object.totalAmountBill | |
27 | - totalAmountCapital = object.totalAmountCapital | |
28 | - dueBlockHeight = object.dueBlockHeight | |
29 | - expireBlockHeight = object.expireBlockHeight | |
30 | - banker = object.banker | |
31 | - gas = object.gas | |
32 | - radio =BigNumber(object.totalAmountCapital).div(object.totalAmountBill).toNumber() | |
33 | - } | |
24 | + const object = config[network] | |
25 | + if(object){ | |
26 | + depositProgram = object.depositProgram | |
27 | + profitProgram = object.profitProgram | |
28 | + assetDeposited = object.assetDeposited | |
29 | + assetBill = object.assetBill | |
30 | + totalAmountBill = object.totalAmountBill | |
31 | + totalAmountCapital = object.totalAmountCapital | |
32 | + dueBlockHeight = object.dueBlockHeight | |
33 | + expireBlockHeight = object.expireBlockHeight | |
34 | + banker = object.banker | |
35 | + gas = object.gas | |
36 | + radio =BigNumber(object.totalAmountCapital).div(object.totalAmountBill).toNumber() | |
34 | 37 | } |
35 | 38 | |
39 | + | |
36 | 40 | return { |
37 | 41 | depositProgram, |
38 | 42 | profitProgram, |
@@ -18,7 +18,22 @@ export default function(WrappedComponent) { | ||
18 | 18 | ) { |
19 | 19 | return <WrappedComponent {...this.props} /> |
20 | 20 | } |
21 | - else if (( window.bytom )) { | |
21 | + else if (( bytom && !this.props.bytomConnection)) { | |
22 | + return ( | |
23 | + <div className="columns"> | |
24 | + <div className="column" /> | |
25 | + <div className="column is-two-thirds"> | |
26 | + <h1 className="title"> | |
27 | + Authenticate <strong>Bytom-Chrome-Extension</strong>. | |
28 | + </h1> | |
29 | + <p className="lead"> | |
30 | + Please Authenticate the connection request. | |
31 | + </p> | |
32 | + </div> | |
33 | + <div className="column" /> | |
34 | + </div> | |
35 | + ) | |
36 | + } else if (( bytom )) { | |
22 | 37 | return ( |
23 | 38 | <div className="columns"> |
24 | 39 | <div className="column" /> |
@@ -62,6 +77,7 @@ export default function(WrappedComponent) { | ||
62 | 77 | } |
63 | 78 | const mapStateToProps = state => ({ |
64 | 79 | bytom: state.bytom, |
80 | + bytomConnection: state.bytomConnection | |
65 | 81 | }) |
66 | 82 | return connect(mapStateToProps)(BytomWrap) |
67 | 83 | } |
@@ -0,0 +1,39 @@ | ||
1 | +import React, { | |
2 | + Component | |
3 | +} from 'react' | |
4 | +import GetContractArgs from "../../constants"; | |
5 | +import {connect} from "react-redux"; | |
6 | + | |
7 | +class Constants extends Component { | |
8 | + | |
9 | + render () { | |
10 | + return ( | |
11 | + <header className="masthead bg-primary text-white"> | |
12 | + <div className="container"> | |
13 | + <table> | |
14 | + <tbody> | |
15 | + <tr> | |
16 | + <td> | |
17 | + <span className="mr-5">Deposit Asset ID: </span> | |
18 | + </td> | |
19 | + <td>{GetContractArgs(this.props.bytom).assetDeposited}</td> | |
20 | + </tr> | |
21 | + <tr> | |
22 | + <td> | |
23 | + <span className="mr-5">Bill Asset ID: </span> | |
24 | + </td> | |
25 | + <td>{GetContractArgs(this.props.bytom).assetBill}</td> | |
26 | + </tr> | |
27 | + </tbody> | |
28 | + </table> | |
29 | + </div> | |
30 | + </header> | |
31 | + ) | |
32 | + } | |
33 | + | |
34 | +} | |
35 | +const mapStateToProps = state => ({ | |
36 | + bytom: state.bytom | |
37 | +}) | |
38 | + | |
39 | +export default connect(mapStateToProps)(Constants) |
@@ -1,8 +1,9 @@ | ||
1 | 1 | import React, { Component } from 'react' |
2 | 2 | import { NavLink } from 'react-router-dom' |
3 | 3 | import jdenticon from "jdenticon" |
4 | +import {connect} from "react-redux"; | |
4 | 5 | |
5 | -const NetworkInfo = class extends Component { | |
6 | +class NetworkInfo extends Component { | |
6 | 7 | |
7 | 8 | constructor (props) { |
8 | 9 | super(props) |
@@ -12,9 +13,10 @@ const NetworkInfo = class extends Component { | ||
12 | 13 | } |
13 | 14 | |
14 | 15 | componentDidMount() { |
16 | + const bytom = this.props.bytom | |
15 | 17 | if ( |
16 | - window.bytom | |
17 | - && window.bytom.default_account | |
18 | + bytom | |
19 | + && bytom.default_account | |
18 | 20 | ) { |
19 | 21 | this.setState({ account: bytom.default_account }) |
20 | 22 | } |
@@ -22,10 +24,10 @@ const NetworkInfo = class extends Component { | ||
22 | 24 | |
23 | 25 | render() { |
24 | 26 | const account = this.state.account |
25 | - | |
27 | + const bytom = this.props.bytom | |
26 | 28 | if ( |
27 | - window.bytom | |
28 | - && window.bytom.default_account | |
29 | + bytom | |
30 | + && bytom.default_account | |
29 | 31 | ) { |
30 | 32 | const svg = jdenticon.toSvg(account.alias, 40) |
31 | 33 | return ( |
@@ -33,7 +35,7 @@ const NetworkInfo = class extends Component { | ||
33 | 35 | <div className="nav-item d-flex "> |
34 | 36 | <NavLink exact activeClassName="active" className="d-flex nav-link rounded js-scroll-trigger" to='/account'> |
35 | 37 | <div className="mr-2" dangerouslySetInnerHTML={{__html:svg}} /> |
36 | - <div className="mt-auto mb-auto ">{window.bytom.default_account.alias}</div> | |
38 | + <div className="mt-auto mb-auto ">{bytom.default_account.alias}</div> | |
37 | 39 | </NavLink> |
38 | 40 | </div> |
39 | 41 | </div> |
@@ -44,5 +46,8 @@ const NetworkInfo = class extends Component { | ||
44 | 46 | } |
45 | 47 | } |
46 | 48 | |
49 | +const mapStateToProps = state => ({ | |
50 | + bytom: state.bytom | |
51 | +}) | |
47 | 52 | |
48 | -export default NetworkInfo | |
53 | +export default connect(mapStateToProps)(NetworkInfo) |
@@ -2,7 +2,7 @@ import React, { Component } from 'react' | ||
2 | 2 | import { NavLink } from 'react-router-dom' |
3 | 3 | import NetworkInfo from './NetworkInfo' |
4 | 4 | |
5 | -const Header = class extends Component { | |
5 | +class Header extends Component { | |
6 | 6 | |
7 | 7 | constructor (props) { |
8 | 8 | super(props) |
@@ -15,6 +15,11 @@ export default (state, action) => { | ||
15 | 15 | ...state, |
16 | 16 | bytom: action.bytom |
17 | 17 | }; |
18 | + case "UPDATE_BYTOM_CONNECTION": | |
19 | + return { | |
20 | + ...state, | |
21 | + bytomConnection: action.bytomConnection | |
22 | + }; | |
18 | 23 | default: |
19 | 24 | return state |
20 | 25 | } |
@@ -2,7 +2,7 @@ import rotateReducer from "./reducers/rotateReducer" | ||
2 | 2 | import { createStore, applyMiddleware, compose } from 'redux' |
3 | 3 | import thunkMiddleware from 'redux-thunk' |
4 | 4 | |
5 | -function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:'', bytom:''}) { | |
5 | +function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:'', bytom:'', bytomConnection:false}) { | |
6 | 6 | return createStore( |
7 | 7 | rotateReducer, |
8 | 8 | state, |