Keep ether conversion in state

This commit is contained in:
Anthony Laibe 2018-10-04 13:48:09 +01:00 committed by Pascal Precht
parent 771953e8b5
commit 1a0eb829e8
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
6 changed files with 132 additions and 77 deletions

View File

@ -1,3 +1,5 @@
import Units from 'ethereumjs-units';
export const REQUEST = 'REQUEST'; export const REQUEST = 'REQUEST';
export const SUCCESS = 'SUCCESS'; export const SUCCESS = 'SUCCESS';
export const FAILURE = 'FAILURE'; export const FAILURE = 'FAILURE';
@ -296,6 +298,52 @@ export function listenToGasOracle(){
export function stopGasOracle(){ export function stopGasOracle(){
return { return {
type: STOP_GAS_ORACLE type: STOP_GAS_ORACLE
}
}
// Actions without Side Effect
const UNITS = [
{ key: 'wei', name: 'Wei' },
{ key: 'kwei', name: 'KWei' },
{ key: 'mwei', name: 'MWei' },
{ key: 'gwei', name: 'Szabo' },
{ key: 'finney', name: 'Finney' },
{ key: 'ether', name: 'Ether' },
{ key: 'kether', name: 'KEther' },
{ key: 'mether', name: 'MEther' },
{ key: 'gether', name: 'GEther' },
{ key: 'tether', namw: 'TEther' }
];
const safeConvert = (value, from, to) => {
try {
value = Units.convert(value, from, to);
} catch (e) {
value = '';
}
return value;
};
const calculateUnits = (value, from) => {
return UNITS.map((unit) => {
unit.value = safeConvert(value, from, unit.key);
return unit;
});
};
export const INIT_ETHER_CONVERSIONS = 'INIT_ETHER_CONVERSIONS';
export function initEtherConversions() {
return {
type: INIT_ETHER_CONVERSIONS,
payload: calculateUnits('1', 'ether')
};
}
export const UPDATE_ETHER_CONVERSIONS = 'UPDATED_ETHER_CONVERSIONS';
export function updateEtherConversions(value, key) {
return {
type: UPDATE_ETHER_CONVERSIONS,
payload: calculateUnits(value, key)
}; };
} }

View File

@ -1,76 +1,30 @@
import React, {Component} from 'react'; import PropTypes from "prop-types";
import {Page, Form, Icon, Button} from "tabler-react"; import React from 'react';
import Units from 'ethereumjs-units'; import {Page, Form, Button, Icon} from "tabler-react";
import {CopyToClipboard} from 'react-copy-to-clipboard'; import {CopyToClipboard} from 'react-copy-to-clipboard';
const UNITS = [ const Converter = (props) => (
{ key: 'wei', name: 'Wei' },
{ key: 'kwei', name: 'KWei' },
{ key: 'mwei', name: 'MWei' },
{ key: 'gwei', name: 'Szabo' },
{ key: 'finney', name: 'Finney' },
{ key: 'ether', name: 'Ether' },
{ key: 'kether', name: 'KEther' },
{ key: 'mether', name: 'MEther' },
{ key: 'gether', name: 'GEther' },
{ key: 'tether', namw: 'TEther' }
];
const safeConvert = (value, from, to) => {
try {
value = Units.convert(value, from, to);
} catch (e) {
value = ''
}
return value;
}
const calculateUnits = (value, from) => {
return UNITS.reduce((acc, unit) => {
acc[unit.key] = safeConvert(value, from, unit.key)
return acc;
}, {});
}
class Converter extends Component {
constructor(props) {
super(props);
const units = calculateUnits('1', 'ether')
this.state = {
units
};
}
calculate(value, from) {
const units = calculateUnits(value, from);
this.setState({ units })
}
render() {
return (
<Page.Content title="Ether Converter"> <Page.Content title="Ether Converter">
<Form.FieldSet> <Form.FieldSet>
{ {
UNITS.map(unit => { props.etherConversions.map(unit => {
return ( return (
<Form.Group label={unit.name} key={unit.key}> <Form.Group label={unit.name} key={unit.key}>
<Form.InputGroup> <Form.Input placeholder={unit.name} value={unit.value} onChange={e => props.updateEtherConversions(e.target.value, unit.key)} />
<Form.Input placeholder={unit.name} value={this.state.units[unit.key]} onChange={e => this.calculate(e.target.value, unit.key)} />
<CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard"> <CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard">
<Button color="primary"><Icon name="copy"/></Button> <Button color="primary"><Icon name="copy"/></Button>
</CopyToClipboard> </CopyToClipboard>
</Form.InputGroup>
</Form.Group> </Form.Group>
) )
}) })
} }
</Form.FieldSet> </Form.FieldSet>
</Page.Content> </Page.Content>
) )
}
} Converter.propTypes = {
etherConversions: PropTypes.arrayOf(PropTypes.object),
updateEtherConversions: PropTypes.func
};
export default Converter; export default Converter;

View File

@ -2,10 +2,10 @@ import React from 'react';
import {Page, Grid, List} from 'tabler-react' import {Page, Grid, List} from 'tabler-react'
import {NavLink, Route, Switch} from 'react-router-dom'; import {NavLink, Route, Switch} from 'react-router-dom';
import Converter from '../components/Converter'; import ConverterContainer from '../containers/ConverterContainer';
const groupItems = [ const groupItems = [
{to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"}, {to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"}
]; ];
const className = "d-flex align-items-center"; const className = "d-flex align-items-center";
@ -34,11 +34,11 @@ class UtilsLayout extends React.Component {
</Grid.Col> </Grid.Col>
<Grid.Col md={9}> <Grid.Col md={9}>
<Switch> <Switch>
<Route exact path="/embark/utilities/converter" component={Converter} /> <Route exact path="/embark/utilities/converter" component={ConverterContainer} />
</Switch> </Switch>
</Grid.Col> </Grid.Col>
</Grid.Row> </Grid.Row>
) );
} }
} }

View File

@ -0,0 +1,40 @@
import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {updateEtherConversions, initEtherConversions} from '../actions';
import {getEtherConversions} from "../reducers/selectors";
import Converter from '../components/Converter';
class ConverterContainer extends React.Component {
componentDidMount() {
if(this.props.etherConversions.length === 0) {
this.props.initEtherConversions();
}
}
render() {
return <Converter etherConversions={this.props.etherConversions}
updateEtherConversions={this.props.updateEtherConversions} />;
}
}
function mapStateToProps(state) {
return {
etherConversions: getEtherConversions(state)
};
}
ConverterContainer.propTypes = {
etherConversions: PropTypes.arrayOf(PropTypes.object),
updateEtherConversions: PropTypes.func,
initEtherConversions: PropTypes.func
};
export default connect(
mapStateToProps,
{
updateEtherConversions,
initEtherConversions
}
)(ConverterContainer);

View File

@ -1,5 +1,6 @@
import {combineReducers} from 'redux'; import {combineReducers} from 'redux';
import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, FETCH_CREDENTIALS} from "../actions"; import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE,
FETCH_CREDENTIALS, INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS} from "../actions";
const BN_FACTOR = 10000; const BN_FACTOR = 10000;
const VOID_ADDRESS = '0x0000000000000000000000000000000000000000'; const VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
@ -180,13 +181,21 @@ function credentials(state = DEFAULT_CREDENTIALS_STATE, action) {
return state; return state;
} }
function etherConversions(state = [], action) {
if ([INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS].includes(action.type)) {
return action.payload;
}
return state;
}
const rootReducer = combineReducers({ const rootReducer = combineReducers({
entities, entities,
loading, loading,
compilingContract, compilingContract,
errorMessage, errorMessage,
errorEntities, errorEntities,
credentials credentials,
etherConversions
}); });
export default rootReducer; export default rootReducer;

View File

@ -156,3 +156,7 @@ export function getFiles(state) {
export function getCurrentFile(state) { export function getCurrentFile(state) {
return last(state.entities.currentFiles); return last(state.entities.currentFiles);
} }
export function getEtherConversions(state) {
return state.etherConversions;
}