Skip to content

Commit 278d307

Browse files
sergey-ilyashenkosergey-ilyashenko
committed
scaffold-summery improvement
1 parent 29860d2 commit 278d307

4 files changed

Lines changed: 101 additions & 142 deletions

File tree

‎frontend/src/actions/index.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,25 @@ export const fetchScaffolds = (page = 1, limit = 10) => async dispatch => {
3131
}
3232
};
3333

34-
export const fetchScaffoldItem = (scaffoldAddres) => async dispatch => {
34+
export const fetchScaffoldItem = (scaffoldAddress) => async dispatch => {
35+
dispatch({type: FETCH_ONCHAIN_SCAFFOLD_SUMMARY, payload: {}});
3536
try {
36-
const res = await axios.get(`/api/scaffolds/${scaffoldAddres}/summary`);
37+
const res = await axios.get(`/api/scaffolds/${scaffoldAddress}/summary`);
3738
dispatch({type: FETCH_ONCHAIN_SCAFFOLD_SUMMARY, payload: res.data});
3839
} catch (err) {
3940
console.log('Error getting scaffolds', err);
4041
}
4142
};
4243

44+
export const deactivateScaffold = (scaffoldAddress) => async dispatch => {
45+
try {
46+
await axios.post(`/api/scaffolds/${scaffoldAddress}/doDeactivate`);
47+
fetchScaffoldItem(scaffoldAddress)(dispatch);
48+
} catch (err) {
49+
console.log('Error deactivating scaffolds', err);
50+
}
51+
};
52+
4353
export const generatePublicKey = () => async dispatch => {
4454
let res = {};
4555
try {
@@ -72,8 +82,6 @@ export const deployContract = (formValues, history) => async dispatch => {
7282

7383
try {
7484
res = await axios.post('/api/scaffolds', formValues);
75-
76-
history.push('/scaffolds');
7785
dispatch({
7886
type: SHOW_MODAL,
7987
payload: {contract: res.data, showLoader: false},

‎frontend/src/components/Header.js‎

Lines changed: 48 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -4,111 +4,57 @@ import {Link} from 'react-router-dom';
44
import {Button, Icon, Menu} from 'semantic-ui-react';
55

66
class Header extends Component {
7-
renderContent() {
8-
switch (this.props.auth) {
9-
case null:
10-
return (
11-
<Menu fluid={true} style={{marginTop: '10px'}}>
12-
<Menu.Item position="left">
13-
<div>
14-
<img
15-
src="/img/svg/logo-circle.svg"
16-
alt="logo"
17-
/>
18-
<img
19-
style={{
20-
left: '8px',
21-
paddingBottom: '6px',
22-
paddingRight: '10px',
23-
}}
24-
src="/img/svg/logo-name.svg"
25-
alt="logo"
26-
/>
27-
</div>
28-
</Menu.Item>
29-
<Menu.Item position="right">
30-
<a className="item" href="/auth/google">
31-
<Button color="google plus">
32-
<Icon name="google plus"/> Login with
33-
Google
34-
</Button>
35-
</a>
36-
</Menu.Item>
37-
</Menu>
38-
);
39-
case false:
40-
return (
41-
<Menu fluid={true} style={{marginTop: '10px'}}>
42-
<Menu.Item position="left">
43-
<div>
44-
<img
45-
src="/img/svg/logo-circle.svg"
46-
alt="logo"
47-
/>
48-
<img
49-
style={{
50-
left: '8px',
51-
paddingBottom: '6px',
52-
paddingRight: '10px',
53-
}}
54-
src="/img/svg/logo-name.svg"
55-
alt="logo"
56-
/>
57-
</div>
58-
</Menu.Item>
59-
<Menu.Item position="right">
60-
<a className="item" href="/auth/google">
61-
<Button color="google plus">
62-
<Icon name="google plus"/> Login with
63-
Google
64-
</Button>
65-
</a>
66-
</Menu.Item>
67-
</Menu>
68-
);
69-
default:
70-
return (
71-
<Menu fluid={true} style={{marginTop: '10px'}}>
72-
<Menu.Item position="left">
73-
<div>
74-
<img
75-
src="/img/svg/logo-circle.svg"
76-
alt="logo"
77-
/>
78-
<img
79-
style={{
80-
left: '8px',
81-
paddingBottom: '6px',
82-
paddingRight: '10px',
83-
}}
84-
src="/img/svg/logo-name.svg"
85-
alt="logo"
86-
/>
87-
</div>
88-
</Menu.Item>
89-
<Menu.Item position="right">
90-
<Link className="item" to={'/scaffolds'}>
91-
Open Tokens: {this.props.auth.credits}
92-
</Link>
93-
<Link className="item" to={'/scaffolds'}>
94-
Scaffolds
95-
</Link>
96-
<a className="item" href="/api/logout">
97-
Log Out
98-
</a>
99-
</Menu.Item>
100-
</Menu>
101-
);
102-
}
103-
}
1047

105-
render() {
106-
return <div>{this.renderContent()}</div>;
8+
renderNotAuthorizedContent() {
9+
return (
10+
<Menu.Item position="right">
11+
<a className="item" href="/auth/google">
12+
<Button color="google plus">
13+
<Icon name="google plus"/>
14+
Login with Google
15+
</Button>
16+
</a>
17+
</Menu.Item>
18+
);
19+
}
20+
21+
renderAuthContent() {
22+
return (
23+
<Menu.Item position="right">
24+
<Link className="item" to={'/scaffolds'}>Open Tokens: {this.props.auth.credits}</Link>
25+
<Link className="item" to={'/scaffolds'}>Scaffolds</Link>
26+
<a className="item" href="/login?logout">Log Out</a>
27+
</Menu.Item>
28+
);
29+
}
30+
31+
renderContent() {
32+
if (!this.props.auth) {
33+
return this.renderNotAuthorizedContent()
10734
}
35+
36+
return this.renderAuthContent()
37+
}
38+
39+
render() {
40+
return (
41+
<Menu fluid={true} style={{marginTop: '10px'}}>
42+
<Menu.Item position="left">
43+
<Link to="/scaffolds">
44+
<img src="/img/svg/logo-circle.svg" alt="logo"/>
45+
<img src="/img/svg/logo-name.svg" alt="logo" style={{
46+
left: '8px',
47+
paddingBottom: '6px',
48+
paddingRight: '10px',
49+
}}/>
50+
</Link>
51+
</Menu.Item>
52+
{this.renderContent()}
53+
</Menu>
54+
);
55+
}
10856
}
10957

110-
const mapStateToProps = ({auth}) => {
111-
return {auth};
112-
};
58+
const mapStateToProps = ({auth}) => ({auth});
11359

11460
export default connect(mapStateToProps)(Header);

‎frontend/src/components/scaffolds/ScaffoldList.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,16 @@ class ScaffoldList extends Component {
2323
return (
2424
<Card fluid key={index}>
2525
<Card.Content>
26-
<Link
27-
to={`scaffolds/${
28-
scaffold.address
29-
}`}
30-
>
26+
<Link to={`scaffolds/${scaffold.address}`}>
3127
<Card.Header>
3228
{scaffoldData.description}
3329
</Card.Header>
3430
</Link>
3531
<div className="meta">
36-
Scaffold Address:{' '}{scaffold.address}
32+
Scaffold Address:{' '}
33+
<a href={`https://etherscan.io/address/${scaffold.address}`} target="_blank">
34+
{scaffold.address}
35+
</a>
3736
</div>
3837
</Card.Content>
3938
<Card.Content>

‎frontend/src/components/scaffolds/ScaffoldSummary.js‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, {Component} from 'react';
2-
import {Card, Grid} from 'semantic-ui-react';
2+
import {Button, Card, Grid} from 'semantic-ui-react';
33
import {bindActionCreators} from 'redux';
44
import {connect} from 'react-redux';
55
import {convertCurrencies} from '../../actions';
6-
import {fetchScaffoldItem} from "../../actions/index";
6+
import {deactivateScaffold, fetchScaffoldItem} from "../../actions/index";
77

88
class ScaffoldSummary extends Component {
99

@@ -12,46 +12,54 @@ class ScaffoldSummary extends Component {
1212
this.props.actions.fetchScaffoldItem(scaffoldAddress);
1313
}
1414

15+
renderStatus() {
16+
const {onchainScaffoldSummary} = this.props;
17+
const scaffoldAddress = this.props.match.params.scaffoldAddress;
18+
const status = onchainScaffoldSummary.enabled;
19+
const activateMessage = (
20+
<div style={{color: 'red'}}>
21+
Your scaffold is created but is inactive. To activate your scaffold you need to transfer 10 OPEN Tokens to it.
22+
</div>
23+
);
24+
const deactivateButton = <Button onClick={() => this.props.actions.deactivateScaffold(scaffoldAddress)}>Deactivate</Button>
25+
26+
return (
27+
<div>
28+
Status: {status ? 'Active' : 'Disabled'}
29+
<div style={{marginTop: '10px'}}>
30+
{status ? deactivateButton : activateMessage}
31+
</div>
32+
</div>
33+
)
34+
}
35+
1536
render() {
1637
const {onchainScaffoldSummary} = this.props;
1738

1839
return (
1940
<div style={{marginTop: '20px'}}>
20-
{/*<div style={{marginBottom: '20px'}}>Your scaffold is created but is inactive. To activate your scaffold you need to transfer 10 open tokens to it.</div>*/}
2141
<Grid>
2242
<Grid.Row>
2343
<Grid.Column width={16}>
2444
<Card fluid>
25-
<Card.Content
26-
header="On-chain Scaffold Summary"
27-
meta="This data is coming from the Ethereum Network"
28-
/>
45+
<Card.Content header="On-chain Scaffold Summary" meta="This data is coming from the Ethereum Network"/>
2946
<Card.Content>
30-
<div>
31-
Scaffold Description:{' '}
32-
{onchainScaffoldSummary.description}
33-
</div>
34-
<div>
35-
Scaffold Owner Address:{' '}
36-
{onchainScaffoldSummary.vendorAddress}
37-
</div>
47+
{this.renderStatus()}
48+
</Card.Content>
49+
<Card.Content>
50+
<div>Scaffold Description: {onchainScaffoldSummary.description}</div>
51+
<div>Scaffold Owner Address: {onchainScaffoldSummary.vendorAddress}</div>
3852
</Card.Content>
3953
<Card.Content>
4054
<div>
4155
<div style={{width: '64%', display: 'inline-block'}}>
42-
Scaffold Amount:{' '}
43-
{(Number.parseFloat(onchainScaffoldSummary.amount)).toFixed(5)} ether
56+
Scaffold Amount: {(Number.parseFloat(onchainScaffoldSummary.amount)).toFixed(5)} ether
4457
</div>
4558
<div style={{width: '34%', display: 'inline-block'}}>
46-
{onchainScaffoldSummary.fiatAmount}
47-
{' '}
48-
{onchainScaffoldSummary.fiatCurrency}
59+
{onchainScaffoldSummary.fiatAmount} {onchainScaffoldSummary.fiatCurrency}
4960
</div>
5061
</div>
51-
<div>
52-
Scaffold Transactions:{' '}
53-
{onchainScaffoldSummary.transactionIndex}
54-
</div>
62+
<div>Scaffold Transactions: {onchainScaffoldSummary.transactionIndex}</div>
5563
</Card.Content>
5664
</Card>
5765
</Grid.Column>
@@ -65,13 +73,11 @@ class ScaffoldSummary extends Component {
6573
}
6674
}
6775

68-
const mapStateToProps = ({auth, onchainScaffoldSummary, currencyConversionValue}) => {
69-
return {auth, onchainScaffoldSummary, currencyConversionValue};
70-
};
76+
const mapStateToProps = ({auth, onchainScaffoldSummary, currencyConversionValue}) =>
77+
({auth, onchainScaffoldSummary, currencyConversionValue});
7178

72-
const mapDispatchToProps = dispatch => ({
73-
actions: bindActionCreators({convertCurrencies, fetchScaffoldItem}, dispatch),
74-
});
79+
const mapDispatchToProps = dispatch =>
80+
({actions: bindActionCreators({convertCurrencies, fetchScaffoldItem, deactivateScaffold}, dispatch)});
7581

7682
ScaffoldSummary = connect(mapStateToProps, mapDispatchToProps)(ScaffoldSummary);
7783

0 commit comments

Comments
 (0)