embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

copy to clipboard gasPrice

This commit is contained in:
Jonathan Rainville 2018-08-28 13:34:08 -04:00 committed by Pascal Precht
parent 36bfc74c58
commit 452cb3a580
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
embark-ui/package.json
View File

@ -9,8 +9,9 @@
"connected-react-router": "^4.3.0", "connected-react-router": "^4.3.0",
"history": "^4.7.2", "history": "^4.7.2",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^16.4.1", "react": "^16.4.2",
"react-ace": "^6.1.4", "react-ace": "^6.1.4",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.4.1", "react-dom": "^16.4.1",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",

41
embark-ui/src/components/GasStation.js
View File

@ -1,20 +1,8 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Card, Form, Grid, StampCard} from 'tabler-react'; import {Card, Form, Grid, StampCard, Stamp} from 'tabler-react';
import {CopyToClipboard} from 'react-copy-to-clipboard';
const test = {
"fast": 50.0,
"speed": 0.998437456605574,
"fastest": 400.0,
"avgWait": 1.9,
"fastWait": 0.7,
"blockNum": 6228803,
"safeLowWait": 1.9,
"block_time": 14.326530612244898,
"fastestWait": 0.5,
"safeLow": 24.0,
"average": 24.0
};
const COLORS = { const COLORS = {
good: 'green', good: 'green',
medium: 'yellow', medium: 'yellow',
@ -28,7 +16,10 @@ class GasStation extends Component {
return console.error('gasStats is a needed Prop for GasStation'); return console.error('gasStats is a needed Prop for GasStation');
} }
this.state = {gasSliderIndex: 0}; this.state = {
gasSliderIndex: 0,
copied: false
};
this.formattedGasStats = GasStation.formatGasStats(props.gasStats); this.formattedGasStats = GasStation.formatGasStats(props.gasStats);
} }
@ -83,9 +74,17 @@ class GasStation extends Component {
<Card> <Card>
<Card.Header> <Card.Header>
<Card.Title>Gas Price Estimator</Card.Title> <Card.Title>Gas Price Estimator</Card.Title>
<Card.Options>
<CopyToClipboard text={currentGasStep.price}
onCopy={() => this.setState({copied: true})}
title="Copy gas price to clipboard">
<span><Stamp color="blue" icon="copy"/></span>
</CopyToClipboard>
</Card.Options>
</Card.Header> </Card.Header>
<Card.Body> <Card.Body>
{this.state.copied && <p>Copied Gas Price</p>}
<Grid.Row cards={true}> <Grid.Row cards={true}>
<Grid.Col lg={6} md={6} sm={12}> <Grid.Col lg={6} md={6} sm={12}>
<StampCard icon="sliders" color={GasStation.getColorForPrice(currentGasStep.price)}> <StampCard icon="sliders" color={GasStation.getColorForPrice(currentGasStep.price)}>
@ -101,11 +100,11 @@ class GasStation extends Component {
<Form.Group> <Form.Group>
<input type="range" className="slider" <input type="range" className="slider"
max={this.formattedGasStats.gasSteps.length - 1} max={this.formattedGasStats.gasSteps.length - 1}
min={0} min={0}
step={1} step={1}
value={this.state.gasSliderIndex} value={this.state.gasSliderIndex}
onChange={(e) => this.gasSliderChange(e)} onChange={(e) => this.gasSliderChange(e)}
/> />
</Form.Group> </Form.Group>
@ -113,7 +112,7 @@ class GasStation extends Component {
<Grid.Row cards={true}> <Grid.Row cards={true}>
<Grid.Col lg={4} md={6} sm={12}> <Grid.Col lg={4} md={6} sm={12}>
<StampCard icon="sliders" color="grey"> <StampCard icon="sliders" color="grey">
Average Price: {this.formattedGasStats.average.price / 10} Gwei Average Price: {this.formattedGasStats.average.price / 10} Gwei
</StampCard> </StampCard>
</Grid.Col> </Grid.Col>
<Grid.Col lg={4} md={6} sm={12}> <Grid.Col lg={4} md={6} sm={12}>