• R/O
  • HTTP
  • SSH
  • HTTPS

Bytom-Dapp-Demo: Commit

A simple deposit and profit bytom dapp demo


Commit MetaInfo

Revision52fa85809b411e91f78d4695eb9a923562c1f27f (tree)
Zeit2019-06-12 15:54:50
AutorZhiting Lin <zlin035@uott...>
CommiterZhiting Lin

Log Message

update the dapp demo to fit the latest bycoin and byone

Ändern Zusammenfassung

Diff

--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ Under the `./src/components/util/submitContract.js`, you will see the basic and
2323 - list utxo from buffer server
2424 - create the custom contract transaction
2525 - lock utxo
26-- call `window.bytom.advancedTransfer` to create the advanced Transaction
26+- call `window.bytom.send_advanced_transaction` to create the advanced Transaction
2727 - update balance if success.
2828
2929 ### Input and Output Object
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,28 +1,76 @@
11 import React, { Component } from "react";
22 import '../styles/App.css';
3-import { Switch, Route } from 'react-router-dom';
3+import { Switch, Route, withRouter } from 'react-router-dom';
44 import Profit from './layout/profit'
55 import Saving from './layout/save'
66 import Footer from './layout/footer'
77 import Header from './layout/header'
88 import Account from './layout/account'
9+import action from './action'
910 import bytomWrap from './layout/bytomWrap'
10-
11+import {connect} from "react-redux";
1112
1213 import GetContractArgs from "./constants";
14+import Bytom from 'bytom-js-sdk'
15+
16+class App extends Component {
17+ componentDidMount(){
18+ const { bytom, setBytom } = this.props;
19+ if(!bytom){
20+ document.addEventListener('chromeBytomLoaded', bytomExtension => {
21+ console.log('bytomloaded');
22+ const bytom = window.bytom;
23+ setBytom(bytom);
24+ this.bytomLoaded(bytom);
25+ });
26+ }else {
27+ this.bytomLoaded(bytom);
28+ }
29+ }
30+
31+ bytomLoaded (bytom){
32+ let bytomPollInterval = 3 * 1000;
33+ let networks = {
34+ solonet: 'http://app.bycoin.io:3000/',
35+ testnet: 'http://app.bycoin.io:3020/',
36+ mainnet: 'https://api.bycoin.im:8000/'
37+ };
38+
39+ try {
40+ const BYTOM_ACCOUNT = bytom.default_account
41+
42+ const bytomAPI = new Bytom(networks, '')
43+ bytomAPI.setNetType(bytom.net)
44+
45+ global.bytomAPI = bytomAPI
1346
14-const App = () => (
15- <div>
16- <Header />
17- <Constants />
18- <section className="portfolio" id="portfolio">
19- <div className="container">
20- <Main />
47+ // Check to see if the user has signed in/out of their
48+ // bytom wallet or switched accounts
49+ let accountInterval = setInterval(function () {
50+ if (BYTOM_ACCOUNT.accountId !== bytom.default_account.accountId) {
51+ location.reload(true);
52+ }
53+ }, bytomPollInterval);
54+ } catch (err) {
55+ console.log(err);
56+ }
57+ }
58+
59+ render() {
60+ return (
61+ <div>
62+ <Header />
63+ <Constants />
64+ <section className="portfolio" id="portfolio">
65+ <div className="container">
66+ <Main />
67+ </div>
68+ </section>
69+ <Footer />
2170 </div>
22- </section>
23- <Footer />
24- </div>
25-);
71+ )
72+ }
73+}
2674
2775 const Constants = () =>(
2876 <header className="masthead bg-primary text-white">
@@ -55,4 +103,13 @@ const Main = () => (
55103 </Switch>
56104 );
57105
58-export default App;
106+
107+const mapStateToProps = state => ({
108+ bytom: state.bytom,
109+})
110+
111+const mapDispatchToProps = dispatch => ({
112+ setBytom: (bytom) => dispatch(action.setBytom(bytom)),
113+})
114+
115+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
\ No newline at end of file
--- /dev/null
+++ b/src/components/action.js
@@ -0,0 +1,14 @@
1+const setBytom = (bytom) => {
2+ return (dispatch) => {
3+ dispatch({
4+ type: "UPDATE_BYTOM",
5+ bytom
6+ })
7+ }
8+}
9+
10+let actions = {
11+ setBytom,
12+}
13+
14+export default actions
--- a/src/components/constants.js
+++ b/src/components/constants.js
@@ -14,8 +14,8 @@ let gas
1414 let radio
1515
1616 const GetContractArgs = function() {
17- if(window.bytom && window.bytom.defaultAccount && window.bytom.defaultAccount.net){
18- let network = window.bytom.defaultAccount.net
17+ if(window.bytom && window.bytom.default_account && window.bytom.net){
18+ let network = window.bytom.net
1919
2020 const object = config[network]
2121 if(object){
--- a/src/components/layout/account/index.jsx
+++ b/src/components/layout/account/index.jsx
@@ -19,14 +19,15 @@ class Account extends Component {
1919 }
2020
2121 componentDidMount() {
22+ const bytom = this.props.bytom
2223 if (
23- window.bytom
24- && window.bytom.defaultAccount
24+ bytom
25+ && bytom.default_account
2526 ) {
26- const account = window.bytom.defaultAccount
27+ const account = bytom.default_account
2728 this.setState({ account })
2829 if(account){
29- this.props.updateBalances(account.guid)
30+ this.props.updateBalances(account.accountId)
3031 this.listBalance(account, GetContractArgs().assetDeposited)
3132 }
3233 }
@@ -119,7 +120,8 @@ class Account extends Component {
119120
120121 const mapStateToProps = state => ({
121122 depositAssetBalance: state.depositAssetBalance,
122- billAssetBalance: state.billAssetBalance
123+ billAssetBalance: state.billAssetBalance,
124+ bytom: state.bytom
123125 })
124126
125127 const mapDispatchToProps = dispatch => ({
--- a/src/components/layout/bytomWrap.jsx
+++ b/src/components/layout/bytomWrap.jsx
@@ -1,4 +1,5 @@
11 import React, { Component } from 'react'
2+import {connect} from "react-redux";
23
34 // This is a Higher Order Component (HOC) that wraps up any components that require
45 // an unlocked Bytom account instance
@@ -10,9 +11,10 @@ export default function(WrappedComponent) {
1011 render () {
1112 let contents = <div />
1213
14+ const bytom = this.props.bytom
1315 if (
14- window.bytom
15- && window.bytom.defaultAccount
16+ bytom
17+ && bytom.default_account
1618 ) {
1719 return <WrappedComponent {...this.props} />
1820 }
@@ -58,7 +60,8 @@ export default function(WrappedComponent) {
5860 }
5961
6062 }
61-
62- return BytomWrap;
63-
63+ const mapStateToProps = state => ({
64+ bytom: state.bytom,
65+ })
66+ return connect(mapStateToProps)(BytomWrap)
6467 }
--- a/src/components/layout/header/NetworkInfo.jsx
+++ b/src/components/layout/header/NetworkInfo.jsx
@@ -14,9 +14,9 @@ const NetworkInfo = class extends Component {
1414 componentDidMount() {
1515 if (
1616 window.bytom
17- && window.bytom.defaultAccount
17+ && window.bytom.default_account
1818 ) {
19- this.setState({ account: window.bytom.defaultAccount })
19+ this.setState({ account: bytom.default_account })
2020 }
2121 }
2222
@@ -24,7 +24,8 @@ const NetworkInfo = class extends Component {
2424 const account = this.state.account
2525
2626 if (
27- account
27+ window.bytom
28+ && window.bytom.default_account
2829 ) {
2930 const svg = jdenticon.toSvg(account.alias, 40)
3031 return (
@@ -32,7 +33,7 @@ const NetworkInfo = class extends Component {
3233 <div className="nav-item d-flex ">
3334 <NavLink exact activeClassName="active" className="d-flex nav-link rounded js-scroll-trigger" to='/account'>
3435 <div className="mr-2" dangerouslySetInnerHTML={{__html:svg}} />
35- <div className="mt-auto mb-auto ">{account.alias}</div>
36+ <div className="mt-auto mb-auto ">{window.bytom.default_account.alias}</div>
3637 </NavLink>
3738 </div>
3839 </div>
@@ -43,4 +44,5 @@ const NetworkInfo = class extends Component {
4344 }
4445 }
4546
47+
4648 export default NetworkInfo
--- a/src/components/layout/profit/action.js
+++ b/src/components/layout/profit/action.js
@@ -86,7 +86,7 @@ function createContractTransaction(resp, amountBill, saver) {
8686 }
8787
8888 function updateDatatbaseBalance(resp, saver, amountBill, account){
89- const transactionHash = resp.message.result.data.transaction_hash
89+ const transactionHash = resp.transaction_hash
9090 const radio = BigNumber( GetContractArgs().radio )
9191 const profitAmount = radio.multipliedBy(amountBill).toNumber()
9292 return updateBalances({
--- a/src/components/layout/profit/index.jsx
+++ b/src/components/layout/profit/index.jsx
@@ -2,6 +2,7 @@ import React from 'react'
22 import { FixedLimitProfit } from './action'
33 import GetContractArgs from "../../constants";
44 import BigNumber from 'bignumber.js'
5+import {connect} from "react-redux";
56
67 class Profit extends React.Component {
78
@@ -19,11 +20,12 @@ class Profit extends React.Component {
1920 }
2021
2122 componentDidMount() {
23+ const bytom = this.props.bytom
2224 if (
23- window.bytom
24- && window.bytom.defaultAccount
25+ bytom
26+ && bytom.default_account
2527 ) {
26- this.setState({ account: window.bytom.defaultAccount })
28+ this.setState({ account: bytom.default_account })
2729 }
2830 }
2931
@@ -109,4 +111,8 @@ class Profit extends React.Component {
109111 }
110112 }
111113
112-export default Profit
114+const mapStateToProps = state => ({
115+ bytom: state.bytom,
116+})
117+
118+export default connect(mapStateToProps)(Profit)
--- a/src/components/layout/save/action.js
+++ b/src/components/layout/save/action.js
@@ -77,13 +77,13 @@ function createContractTransaction(resp, amount, address){
7777
7878 function updateDatatbaseBalance(resp, amount, address){
7979 return updateBalances({
80- "tx_id": resp.message.result.data.transaction_hash,
80+ "tx_id": resp.transaction_hash,
8181 address,
8282 "asset": GetContractArgs().assetDeposited,
8383 "amount": -amount
8484 }).then(()=>{
8585 return updateBalances({
86- "tx_id": resp.message.result.data.transaction_hash,
86+ "tx_id": resp.transaction_hash,
8787 address,
8888 "asset": GetContractArgs().assetBill,
8989 "amount": amount
--- a/src/components/layout/save/index.jsx
+++ b/src/components/layout/save/index.jsx
@@ -1,6 +1,7 @@
11 import React from 'react'
22 import { FixedLimitDeposit} from './action'
33 import GetContractArgs from '../../constants'
4+import {connect} from "react-redux";
45
56 class Save extends React.Component {
67
@@ -18,11 +19,12 @@ class Save extends React.Component {
1819 }
1920
2021 componentDidMount() {
22+ const bytom = this.props.bytom
2123 if (
22- window.bytom
23- && window.bytom.defaultAccount
24+ bytom
25+ && bytom.default_account
2426 ) {
25- this.setState({ account: window.bytom.defaultAccount })
27+ this.setState({ account: bytom.default_account })
2628 }
2729 }
2830
@@ -100,5 +102,8 @@ class Save extends React.Component {
100102 )
101103 }
102104 }
105+const mapStateToProps = state => ({
106+ bytom: state.bytom,
107+})
103108
104-export default Save
109+export default connect(mapStateToProps)(Save)
--- a/src/components/util/api.js
+++ b/src/components/util/api.js
@@ -11,7 +11,7 @@ export function listAddress(guid)
1111 export function listDappUTXO(params)
1212 {
1313 let url
14- switch (window.bytom.defaultAccount.net){
14+ switch (window.bytom.net){
1515 case "testnet":
1616 url = "/dapptestnet/list-utxos"
1717 break
@@ -24,7 +24,7 @@ export function listDappUTXO(params)
2424 export function updateUtxo(params)
2525 {
2626 let url
27- switch (window.bytom.defaultAccount.net) {
27+ switch (window.bytom.net) {
2828 case "testnet":
2929 url = "/dapptestnet/update-utxo"
3030 break
@@ -37,7 +37,7 @@ export function updateUtxo(params)
3737 export function updateBalances(params)
3838 {
3939 let url
40- switch (window.bytom.defaultAccount.net) {
40+ switch (window.bytom.net) {
4141 case "testnet":
4242 url = "/dapptestnet/update-balance"
4343 break
@@ -50,7 +50,7 @@ export function updateBalances(params)
5050 export function listBalances(params)
5151 {
5252 let url
53- switch (window.bytom.defaultAccount.net) {
53+ switch (window.bytom.net) {
5454 case "testnet":
5555 url = "/dapptestnet/list-balances"
5656 break
--- a/src/components/util/submitContract.js
+++ b/src/components/util/submitContract.js
@@ -23,22 +23,17 @@ export function submitContract(listDepositUTXO, createContractTransaction, updat
2323 .then(()=>{
2424
2525 //Transactions
26- window.bytom.advancedTransfer(input, output, GetContractArgs().gas*100000000, args, 1)
26+ return window.bytom.send_advanced_transaction({input, output, gas: GetContractArgs().gas*100000000, args})
2727 .then((resp) => {
28- if(resp.action === 'reject'){
29- reject('user reject the request')
30- }else if(resp.action === 'success'){
31-
3228 //Update Balance
3329 return updateDatatbaseBalance(resp, ...updateParameters).then(()=>{
3430 resolve()
3531 }).catch(err => {
3632 throw err
3733 })
38- }
3934 })
4035 .catch(err => {
41- throw err
36+ throw err.message
4237 })
4338 })
4439 .catch(err => {
--- a/src/index.js
+++ b/src/index.js
@@ -10,51 +10,16 @@ import { BrowserRouter } from 'react-router-dom';
1010 import { Provider } from "react-redux";
1111 import configureStore from "./store";
1212
13-import Bytom from 'bytom-js-sdk'
14-
1513 require("babel-core/register");
1614 require("babel-polyfill");
1715
18-window.addEventListener('load', async function() {
19- if (typeof window.bytom !== 'undefined') {
20- let bytomPollInterval = 3 * 1000;
21-
22- let networks = {
23- solonet: 'http://app.bycoin.io:3000/',
24- testnet: 'http://app.bycoin.io:3020/',
25- mainnet: 'https://api.bycoin.im:8000/'
26- };
27-
28- try {
29- window.bytom.defaultAccount = await window.bytom.request('currentAccount')
30-
31- const bytom = new Bytom(networks, '')
32- bytom.setNetType(window.bytom.defaultAccount.net)
33-
34- global.bytomAPI = bytom
35-
36- // Check to see if the user has signed in/out of their
37- // bytom wallet or switched accounts
38- let accountInterval = setInterval(async function() {
39- const account = await window.bytom.request('currentAccount')
40- if ( account.guid !== window.bytom.defaultAccount.guid) {
41- location.reload(true);
42- }
43- }, bytomPollInterval);
44- } catch (err) {
45- console.log(err);
46- }
47-
48- }
49-
50- ReactDOM.render((
51- <Provider store={configureStore()}>
52- <BrowserRouter>
53- <App />
54- </BrowserRouter>
55- </Provider>
56- ), document.getElementById('root'));
57-});
16+ReactDOM.render((
17+ <Provider store={configureStore()}>
18+ <BrowserRouter>
19+ <App />
20+ </BrowserRouter>
21+ </Provider>
22+), document.getElementById('root'));
5823
5924
6025
--- a/src/reducers/rotateReducer.js
+++ b/src/reducers/rotateReducer.js
@@ -10,6 +10,11 @@ export default (state, action) => {
1010 ...state,
1111 depositAssetBalance: action.depositAssetBalance
1212 };
13+ case "UPDATE_BYTOM":
14+ return {
15+ ...state,
16+ bytom: action.bytom
17+ };
1318 default:
1419 return state
1520 }
--- a/src/store.js
+++ b/src/store.js
@@ -2,7 +2,7 @@ import rotateReducer from "./reducers/rotateReducer"
22 import { createStore, applyMiddleware, compose } from 'redux'
33 import thunkMiddleware from 'redux-thunk'
44
5-function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:''}) {
5+function configureStore(state = { account: '' , depositAssetBalance:'',billAssetBalance:'', bytom:''}) {
66 return createStore(
77 rotateReducer,
88 state,
Show on old repository browser