From 1a0eb829e80113d99678b12388c4f9fd34fbff0c Mon Sep 17 00:00:00 2001 From: Anthony Laibe Date: Thu, 4 Oct 2018 13:48:09 +0100 Subject: [PATCH] Keep ether conversion in state --- embark-ui/src/actions/index.js | 48 ++++++++++ embark-ui/src/components/Converter.js | 96 +++++-------------- embark-ui/src/components/UtilsLayout.js | 8 +- .../src/containers/ConverterContainer.js | 40 ++++++++ embark-ui/src/reducers/index.js | 13 ++- embark-ui/src/reducers/selectors.js | 4 + 6 files changed, 132 insertions(+), 77 deletions(-) create mode 100644 embark-ui/src/containers/ConverterContainer.js diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index 21fb0bcb..383e2591 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -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) }; } diff --git a/embark-ui/src/components/Converter.js b/embark-ui/src/components/Converter.js index 63eb0c82..af3d6c7d 100644 --- a/embark-ui/src/components/Converter.js +++ b/embark-ui/src/components/Converter.js @@ -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 Converter = (props) => ( + + + { + props.etherConversions.map(unit => { + return ( + + props.updateEtherConversions(e.target.value, unit.key)} /> + + + + + ) + }) + } + + +) -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 ( - - - { - UNITS.map(unit => { - return ( - - - this.calculate(e.target.value, unit.key)} /> - - - - - - - ) - }) - } - - - ) - } -} +Converter.propTypes = { + etherConversions: PropTypes.arrayOf(PropTypes.object), + updateEtherConversions: PropTypes.func +}; export default Converter; diff --git a/embark-ui/src/components/UtilsLayout.js b/embark-ui/src/components/UtilsLayout.js index d2aa88b2..3dde0164 100644 --- a/embark-ui/src/components/UtilsLayout.js +++ b/embark-ui/src/components/UtilsLayout.js @@ -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 { - + - ) + ); } } diff --git a/embark-ui/src/containers/ConverterContainer.js b/embark-ui/src/containers/ConverterContainer.js new file mode 100644 index 00000000..dc92ddb6 --- /dev/null +++ b/embark-ui/src/containers/ConverterContainer.js @@ -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 ; + } +} + +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); diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index 0bc254a2..fc7fc1ad 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -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; diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index 2c63839b..0a66fcaa 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -156,3 +156,7 @@ export function getFiles(state) { export function getCurrentFile(state) { return last(state.entities.currentFiles); } + +export function getEtherConversions(state) { + return state.etherConversions; +}