Only store ether value

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 = [
+export const UPDATE_BASE_ETHER = 'UPDATE_BASE_ETHER';
-  { key: 'wei', name: 'Wei' },
+export function updateBaseEther(value) {
-  { 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,
+    type: UPDATE_BASE_ETHER,
-    payload: calculateUnits('1', 'ether')
+    payload: value
-  };
-}
-
-export const UPDATE_ETHER_CONVERSIONS = 'UPDATED_ETHER_CONVERSIONS';
-export function updateEtherConversions(value, key) {
-  return {
-    type: UPDATE_ETHER_CONVERSIONS,
-    payload: calculateUnits(value, key)
   };
 }
 

embark-ui/src/components/Converter.js

@@ -3,15 +3,34 @@ import React from 'react';
 import {Page, Form, Button, Icon} from "tabler-react";
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 
-const Converter = (props) => (
+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(
       <Page.Content title="Ether Converter">
         <Form.FieldSet>
           {
-        props.etherConversions.map(unit => {
+            this.state.etherConversions.map(unit => {
               return (
                 <Form.Group label={unit.name} key={unit.key}>
-              <Form.Input placeholder={unit.name} value={unit.value} onChange={e => props.updateEtherConversions(e.target.value, unit.key)} />
+                  <Form.Input placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
-              <CopyToClipboard text={this.state.units[unit.key]} title="Copy value to clipboard">
+                  <CopyToClipboard text={unit.value} title="Copy value to clipboard">
                     <Button color="primary"><Icon name="copy"/></Button>
                   </CopyToClipboard>
                 </Form.Group>
@@ -20,11 +39,13 @@ const Converter = (props) => (
           }
         </Form.FieldSet>
       </Page.Content>
-)
+    );
+  }
+}
 
 Converter.propTypes = {
-  etherConversions: PropTypes.arrayOf(PropTypes.object),
+  baseEther: PropTypes.string,
-  updateEtherConversions: PropTypes.func
+  updateBaseEther: PropTypes.func
 };
 
 export default Converter;

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 {updateBaseEther} from '../actions';
-import {getEtherConversions} from "../reducers/selectors";
+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 <Converter etherConversions={this.props.etherConversions}
+    return <Converter baseEther={this.props.baseEther}
-                      updateEtherConversions={this.props.updateEtherConversions} />;
+    updateBaseEther={this.props.updateBaseEther} />;
   }
 }
 
 function mapStateToProps(state) {
   return {
-    etherConversions: getEtherConversions(state)
+    baseEther: getBaseEther(state)
   };
 }
 
 ConverterContainer.propTypes = {
-  etherConversions: PropTypes.arrayOf(PropTypes.object),
+  baseEther: PropTypes.string,
-  updateEtherConversions: PropTypes.func,
+  updateBaseEther: PropTypes.func
-  initEtherConversions: PropTypes.func
 };
 
 export default connect(
   mapStateToProps,
   {
-    updateEtherConversions,
+    updateBaseEther
-    initEtherConversions
   }
 )(ConverterContainer);

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) {
+function baseEther(state = '1', action) {
-  if ([INIT_ETHER_CONVERSIONS, UPDATE_ETHER_CONVERSIONS].includes(action.type)) {
+  if (action.type === UPDATE_BASE_ETHER) {
     return action.payload;
   }
   return state;
@@ -217,7 +217,7 @@ const rootReducer = combineReducers({
   errorMessage,
   errorEntities,
   credentials,
-  etherConversions,
+  baseEther,
   tabs
 });
 

embark-ui/src/reducers/selectors.js

@@ -157,8 +157,8 @@ export function getCurrentFile(state) {
   return last(state.entities.currentFiles);
 }
 
-export function getEtherConversions(state) {
+export function getBaseEther(state) {
-  return state.etherConversions;
+  return state.baseEther;
 }
 
 export function getTabs(state) {

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;
+  });
+};