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 SUCCESS = 'SUCCESS';
export const FAILURE = 'FAILURE';
@ -296,6 +298,52 @@ export function listenToGasOracle(){
export function stopGasOracle(){
return {
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 {Page, Form, Icon, Button} from "tabler-react";
import Units from 'ethereumjs-units';
import PropTypes from "prop-types";
import React from 'react';
import {Page, Form, Button, Icon} from "tabler-react";
import {CopyToClipboard} from 'react-copy-to-clipboard';
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.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 (
const Converter = (props) => (
<Page.Content title="Ether Converter">
<Form.FieldSet>
{
UNITS.map(unit => {
props.etherConversions.map(unit => {
return (
<Form.Group label={unit.name} key={unit.key}>
<Form.InputGroup>
<Form.Input placeholder={unit.name} value={this.state.units[unit.key]} onChange={e => this.calculate(e.target.value, unit.key)} />
<Form.Input placeholder={unit.name} value={unit.value} onChange={e => props.updateEtherConversions(e.target.value, unit.key)} />
<CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard">
<Button color="primary"><Icon name="copy"/></Button>
</CopyToClipboard>
</Form.InputGroup>
</Form.Group>
)
})
}
</Form.FieldSet>
</Page.Content>
)
}
}
)
Converter.propTypes = {
etherConversions: PropTypes.arrayOf(PropTypes.object),
updateEtherConversions: PropTypes.func
};
export default Converter;

View File

@ -2,10 +2,10 @@ import React from 'react';
import {Page, Grid, List} from 'tabler-react'
import {NavLink, Route, Switch} from 'react-router-dom';
import Converter from '../components/Converter';
import ConverterContainer from '../containers/ConverterContainer';
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";
@ -34,11 +34,11 @@ class UtilsLayout extends React.Component {
</Grid.Col>
<Grid.Col md={9}>
<Switch>
<Route exact path="/embark/utilities/converter" component={Converter} />
<Route exact path="/embark/utilities/converter" component={ConverterContainer} />
</Switch>
</Grid.Col>
</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 {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 VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
@ -180,13 +181,21 @@ function credentials(state = DEFAULT_CREDENTIALS_STATE, action) {
return state;
}
function etherConversions(state = [], action) {
if ([INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS].includes(action.type)) {
return action.payload;
}
return state;
}
const rootReducer = combineReducers({
entities,
loading,
compilingContract,
errorMessage,
errorEntities,
credentials
credentials,
etherConversions
});
export default rootReducer;

View File

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