From ca55a8091e9a6d668858ec198d9f5130ff3b1d25 Mon Sep 17 00:00:00 2001 From: Anthony Laibe Date: Thu, 4 Oct 2018 16:08:13 +0100 Subject: [PATCH] Only store ether value --- embark-ui/src/actions/index.js | 47 ++------------ embark-ui/src/components/Converter.js | 63 ++++++++++++------- .../src/containers/ConverterContainer.js | 24 +++---- embark-ui/src/reducers/index.js | 8 +-- embark-ui/src/reducers/selectors.js | 4 +- embark-ui/src/services/unitConverter.js | 31 +++++++++ 6 files changed, 91 insertions(+), 86 deletions(-) create mode 100644 embark-ui/src/services/unitConverter.js diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index 383e25918..3ba18dd7a 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -1,5 +1,3 @@ -import Units from 'ethereumjs-units'; - export const REQUEST = 'REQUEST'; export const SUCCESS = 'SUCCESS'; export const FAILURE = 'FAILURE'; @@ -302,48 +300,11 @@ export function stopGasOracle(){ } // 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() { +export const UPDATE_BASE_ETHER = 'UPDATE_BASE_ETHER'; +export function updateBaseEther(value) { 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) + type: UPDATE_BASE_ETHER, + payload: value }; } diff --git a/embark-ui/src/components/Converter.js b/embark-ui/src/components/Converter.js index af3d6c7d6..89c909a47 100644 --- a/embark-ui/src/components/Converter.js +++ b/embark-ui/src/components/Converter.js @@ -3,28 +3,49 @@ import React from 'react'; import {Page, Form, Button, Icon} from "tabler-react"; import {CopyToClipboard} from 'react-copy-to-clipboard'; -const Converter = (props) => ( - - - { - props.etherConversions.map(unit => { - return ( - - props.updateEtherConversions(e.target.value, unit.key)} /> - - - - - ) - }) - } - - -) +import { calculateUnits } from '../services/unitConverter'; +class Converter extends React.Component { + constructor(props) { + super(props); + this.state = { etherConversions: []}; + } + + componentDidMount() { + this.setState({etherConversions: calculateUnits(this.props.baseEther, 'Ether')}); + } + + handleOnChange(event, key) { + const newUnits = calculateUnits(event.target.value, key); + this.setState({etherConversions: newUnits}); + const newBaseEther = newUnits.find(unit => unit.key === 'ether'); + this.props.updateBaseEther(newBaseEther.value); + } + + render() { + return( + + + { + this.state.etherConversions.map(unit => { + return ( + + this.handleOnChange(e, unit.key)} /> + + + + + ) + }) + } + + + ); + } +} Converter.propTypes = { - etherConversions: PropTypes.arrayOf(PropTypes.object), - updateEtherConversions: PropTypes.func + baseEther: PropTypes.string, + updateBaseEther: PropTypes.func }; -export default Converter; +export default Converter; \ No newline at end of file diff --git a/embark-ui/src/containers/ConverterContainer.js b/embark-ui/src/containers/ConverterContainer.js index dc92ddb6f..b4dfb0455 100644 --- a/embark-ui/src/containers/ConverterContainer.js +++ b/embark-ui/src/containers/ConverterContainer.js @@ -2,39 +2,31 @@ 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 {updateBaseEther} from '../actions'; +import {getBaseEther} 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 ; + return ; } } function mapStateToProps(state) { return { - etherConversions: getEtherConversions(state) + baseEther: getBaseEther(state) }; } ConverterContainer.propTypes = { - etherConversions: PropTypes.arrayOf(PropTypes.object), - updateEtherConversions: PropTypes.func, - initEtherConversions: PropTypes.func + baseEther: PropTypes.string, + updateBaseEther: PropTypes.func }; export default connect( mapStateToProps, { - updateEtherConversions, - initEtherConversions + updateBaseEther } )(ConverterContainer); diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index f68a9b64b..043ab56e8 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -1,6 +1,6 @@ import {combineReducers} from 'redux'; import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE, - FETCH_CREDENTIALS, INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS} from "../actions"; + FETCH_CREDENTIALS, UPDATE_BASE_ETHER} from "../actions"; const BN_FACTOR = 10000; const VOID_ADDRESS = '0x0000000000000000000000000000000000000000'; @@ -181,8 +181,8 @@ function credentials(state = DEFAULT_CREDENTIALS_STATE, action) { return state; } -function etherConversions(state = [], action) { - if ([INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS].includes(action.type)) { +function baseEther(state = '1', action) { + if (action.type === UPDATE_BASE_ETHER) { return action.payload; } return state; @@ -217,7 +217,7 @@ const rootReducer = combineReducers({ errorMessage, errorEntities, credentials, - etherConversions, + baseEther, tabs }); diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index 57a0c2fd1..e3d965e0b 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -157,8 +157,8 @@ export function getCurrentFile(state) { return last(state.entities.currentFiles); } -export function getEtherConversions(state) { - return state.etherConversions; +export function getBaseEther(state) { + return state.baseEther; } export function getTabs(state) { diff --git a/embark-ui/src/services/unitConverter.js b/embark-ui/src/services/unitConverter.js new file mode 100644 index 000000000..196ab9663 --- /dev/null +++ b/embark-ui/src/services/unitConverter.js @@ -0,0 +1,31 @@ +import Units from 'ethereumjs-units'; + +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', name: 'TEther' } +]; + +const safeConvert = (value, from, to) => { + try { + value = Units.convert(value, from, to); + } catch (e) { + value = ''; + } + return value; +}; + + +export const calculateUnits = (value, from) => { + return UNITS.map((unit) => { + unit.value = safeConvert(value, from, unit.key); + return unit; + }); +};