wip

src/components/CurrencyInputPanel/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { CSSTransitionGroup } from "react-transition-group";
 import classnames from 'classnames';
 import Fuse from '../../helpers/fuse';
+import { updateField } from '../../ducks/swap';
 import Modal from '../Modal';
 import TokenLogo from '../TokenLogo';
 import SearchIcon from '../../assets/images/magnifying-glass.svg';
@@ -40,7 +41,7 @@ class CurrencyInputPanel extends Component {
   };
 
   createTokenList = () => {
-    let tokens = this.props.web3.tokenAddresses.addresses;
+    let tokens = this.props.tokenAddresses.addresses;
     let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH', clearableValue: false } ];
 
     for (let i = 0; i < tokens.length; i++) {
@@ -140,7 +141,14 @@ class CurrencyInputPanel extends Component {
             <span className="currency-input-panel__extra-text">{extraText}</span>
           </div>
           <div className="currency-input-panel__input-row">
-            <input type="number" className="currency-input-panel__input" placeholder="0.0" />
+            <input
+              type="number"
+              className="currency-input-panel__input"
+              placeholder="0.0"
+              onChange={e => {
+                this.props.updateField('input', e.target.value);
+              }}
+            />
             <button
               className={classnames("currency-input-panel__currency-select", {
                 'currency-input-panel__currency-select--selected': selectedTokenAddress,
@@ -170,6 +178,10 @@ class CurrencyInputPanel extends Component {
 
 export default connect(
   state => ({
-    web3: state.web3,
+    tokenAddresses: state.web3.tokenAddresses,
+    balance: state.web3.balance,
   }),
+  dispatch => ({
+    updateField: (name, value) => dispatch(updateField({ name, value })),
+  })
 )(CurrencyInputPanel);

src/ducks/index.js

@@ -4,10 +4,12 @@ import web3 from './web3';
 import exchangeContracts from './exchange-contract';
 import tokenContracts from './token-contract';
 import exchange from './exchange';
+import swap from './swap';
 
 export default combineReducers({
   web3,
   exchangeContracts,
   tokenContracts,
-  exchange
+  exchange,
+  swap,
 });

src/ducks/swap.js

+const UPDATE_FIELD = 'app/swap/updateField';
+
+const initialState = {
+  input: '',
+  inputToken: '',
+  output: '',
+  outputToken: '',
+};
+
+export const updateField = ({ name, value }) => ({
+  type: UPDATE_FIELD,
+  payload: { name, value },
+});
+
+export default function swapReducer(state = initialState, { type, payload }) {
+  switch (type) {
+    case UPDATE_FIELD:
+      return {
+        ...state,
+        [payload.name]: payload.value,
+      };
+    default:
+      return state;
+  }
+}
\ No newline at end of file

src/ducks/web3.js

@@ -2,92 +2,31 @@ import Web3 from "web3";
 
 const INITIALIZE = 'app/web3/initialize';
 const UPDATE_CURRENT_ADDRESS = 'app/web3/updateCurrentAddress';
+const UPDATE_BALANCE = 'app/web3/updateBalance';
 
-// export const setWeb3ConnectionStatus = (connected) => ({
-//   type: SET_WEB3_CONNECTION_STATUS,
-//   connected
-// })
-//
-// export const setCurrentMaskAddress = (currentMaskAddress) => ({
-//   type: SET_CURRENT_MASK_ADDRESS,
-//   currentMaskAddress
-// });
-//
-// export const metamaskLocked = () => ({
-//   type: METAMASK_LOCKED,
-//   metamaskLocked: true
-// });
-//
-// export const metamaskUnlocked = () => ({
-//   type: METAMASK_UNLOCKED,
-//   metamaskLocked: false
-// });
-//
-// export const setInteractionState = (interaction) => ({
-//   type: SET_INTERACTION_STATE,
-//   interaction
-// })
-//
-// export const factoryContractReady = (factoryContract) => ({
-//   type: FACTORY_CONTRACT_READY,
-//   factoryContract
-// });
-//
-// export const setNetworkMessage = (networkMessage) => {
-//   return async (dispatch) => {
-//     let networkName;
-//     switch (networkMessage) {
-//       case "main":
-//         networkName = 'Ethereum Mainet'
-//         break;
-//       case "morden":
-//         networkName = 'Morden testnet'
-//         break;
-//       case "ropsten":
-//         networkName = 'Ropsten testnet'
-//         break;
-//       case "rinkeby":
-//         networkName = 'Rinkeby testnet'
-//         break;
-//       case "kovan":
-//         networkName = 'Kovan testnet'
-//         break;
-//       default:
-//         networkName = 'an unknown network'
-//     }
-//     dispatch ({
-//       type: SET_NETWORK_MESSAGE,
-//       networkMessage: networkName
-//     })
-//   }
-// };
-//
-// export const setBlockTimestamp = () => {
-//   return async (dispatch, getState) => {
-//     const { web3 } = getState().web3Store;
-//     await web3.eth.getBlock('latest', (error, blockInfo) => {
-//       dispatch({
-//         type: SET_BLOCK_TIMESTAMP,
-//         timestamp: blockInfo.timestamp
-//       })
-//     });
-//   }
-// }
-//
-// export const setExchangeType = (exchangeType) => ({
-//   type: SET_EXCHANGE_TYPE,
-//   exchangeType
-// });
-//
-// export const toggleAbout = (toggle) => ({
-//   type: TOGGLE_ABOUT,
-//   aboutToggle: toggle
-// });
-//
-// export const toggleInvest = (toggle) => ({
-//   type: TOGGLE_INVEST,
-//   investToggle: toggle
-// });
+const initialState = {
+  web3: {},
+  currentAddress: '',
+  balance: {},
+  exchangeAddresses: {
+    addresses: [
+      ['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'],
+      ['DAI','0x9eb0461bcc20229bE61319372cCA84d782823FCb'],
+      ['MKR','0x4c86a3b3cf926de3644f60658071ca604949609f'],
+      ['OMG','0x1033f09e293200de63AF16041e83000aFBBfF5c0'],
+      ['ZRX','0x42E109452F4055c82a513A527690F2D73251367e']
+    ]
+  },
+  tokenAddresses: {
+    addresses: [
+      ['BAT','0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B'],
+      ['DAI','0x2448eE2641d78CC42D7AD76498917359D961A783'],
+      ['MKR','0xf9ba5210f91d0474bd1e1dcdaec4c58e359aad85'],
+      ['OMG','0x879884c3C46A24f56089f3bBbe4d5e38dB5788C0'],
+      ['ZRX','0xF22e3F33768354c9805d046af3C0926f27741B43']
+    ]
+  },
+};
 
 export const initialize = () => dispatch => {
   if (typeof window.web3 !== 'undefined') {
@@ -119,35 +58,43 @@ export const updateCurrentAddress = () => (dispatch, getState) => {
   })
 };
 
+export const updateBalance = () => (dispatch, getState) => {
+  const { web3: { web3, currentAddress } } = getState();
+
+  if (!web3 || !currentAddress) {
+    return;
+  }
+
+  web3.eth.getBalance(currentAddress, (e, data) => {
+    if (e) {
+      return;
+    }
+
+    dispatch({
+      type: UPDATE_BALANCE,
+      payload: {
+        address: 'ETH',
+        balance: data,
+      }
+    })
+  });
+};
+
 
-export default (state = {}, { type, payload }) => {
+export default (state = initialState, { type, payload }) => {
   switch (type) {
     case INITIALIZE:
       return { ...state, web3: payload };
     case UPDATE_CURRENT_ADDRESS:
       return { ...state, currentAddress: payload };
-    // case SET_WEB3_CONNECTION_STATUS:
-    //   return Object.assign({}, state, { connected: connected });
-    // case SET_CURRENT_MASK_ADDRESS:
-    //   return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
-    // case METAMASK_LOCKED:
-    //   return Object.assign({}, state, { metamaskLocked: metamaskLocked });
-    // case METAMASK_UNLOCKED:
-    //   return Object.assign({}, state, { metamaskLocked: metamaskLocked });
-    // case SET_INTERACTION_STATE:
-    //   return Object.assign({}, state, { interaction: interaction });
-    // case FACTORY_CONTRACT_READY:
-    //   return Object.assign({}, state, { factoryContract: factoryContract});
-    // case SET_NETWORK_MESSAGE:
-    //   return Object.assign({}, state, { networkMessage: networkMessage });
-    // case SET_BLOCK_TIMESTAMP:
-    //   return Object.assign({}, state, { blockTimestamp: timestamp });
-    // case SET_EXCHANGE_TYPE:
-    //   return Object.assign({}, state, { exchangeType: exchangeType });
-    // case TOGGLE_ABOUT:
-    //   return Object.assign({}, state, { aboutToggle: aboutToggle })
-    // case TOGGLE_INVEST:
-    //   return Object.assign({}, state, { investToggle: investToggle })
+    case UPDATE_BALANCE:
+      return {
+        ...state,
+        balance: {
+          ...state.balance,
+          [payload.address]: payload.balance,
+        },
+      };
     default: return state;
   }
 }