Merge pull request #1 from uvilchis/uvDevBranch

Redux refactor

package.json

@@ -4,13 +4,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "d3": "^4.13.0",
     "react": "^16.2.0",
     "react-cookies": "^0.1.0",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
+    "react-redux": "^5.0.7",
     "react-scripts": "1.1.0",
     "react-scroll-to-component": "^1.0.2",
     "react-select": "^1.2.1",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
     "web3": "1.0.0-beta.22"
   },
   "scripts": {

src/actions/exchange-actions.js

+import { 
+  SET_INPUT_BALANCE,
+  SET_OUTPUT_BALANCE,
+  SET_INPUT_TOKEN,
+  SET_OUTPUT_TOKEN,
+  SET_INVARIANT_1,
+  SET_INVARIANT_2,
+  SET_MARKET_ETH_1,
+  SET_MARKET_ETH_2,
+  SET_MARKET_TOKENS_1,
+  SET_MARKET_TOKENS_2, 
+  SET_ALLOWANCE_APPROVAL_STATE,
+  SET_EXCHANGE_INPUT_VALUE,
+  SET_EXCHANGE_OUTPUT_VALUE,
+  SET_EXCHANGE_RATE,
+  SET_EXCHANGE_FEE
+} from '../constants';
+
+export const setInputBalance = (inputBalance) => ({
+  type: SET_INPUT_BALANCE,
+  inputBalance
+});
+
+export const setOutputBalance = (outputBalance) => ({
+  type: SET_OUTPUT_BALANCE,
+  outputBalance
+})
+
+export const setInputToken = (inputToken) => ({
+  type: SET_INPUT_TOKEN,
+  inputToken
+});
+
+export const setOutputToken = (outputToken) => ({
+  type: SET_OUTPUT_TOKEN,
+  outputToken
+});
+
+export const setInvariant1 = (invariant1) => ({
+  type: SET_INVARIANT_1,
+  invariant1
+});
+
+export const setInvariant2 = (invariant2) => ({
+  type: SET_INVARIANT_2,
+  invariant2 
+});
+
+export const setMarketEth1 = (marketEth1) => ({
+  type: SET_MARKET_ETH_1,
+  marketEth1
+});
+
+export const setMarketEth2 = (marketEth2) => ({
+  type: SET_MARKET_ETH_2,
+  marketEth2
+});
+
+export const setMarketTokens1 = (marketTokens1) => ({
+  type: SET_MARKET_TOKENS_1,
+  marketTokens1
+});
+
+export const setMarketTokens2 = (marketTokens2) => ({
+  type: SET_MARKET_TOKENS_2,
+  marketTokens2
+});
+
+export const setAllowanceApprovalState = (allowanceApproved) => ({
+  type: SET_ALLOWANCE_APPROVAL_STATE,
+  allowanceApproved
+});
+
+export const setExchangeInputValue = (inputValue) => ({
+  type: SET_EXCHANGE_INPUT_VALUE,
+  inputValue
+});
+
+export const setExchangeOutputValue = (outputValue) => ({
+  type: SET_EXCHANGE_OUTPUT_VALUE, 
+  outputValue
+});
+
+export const setExchangeRate = (rate) => ({
+  type: SET_EXCHANGE_RATE,
+  rate
+})
+
+export const setExchangeFee = (fee) => ({
+  type: SET_EXCHANGE_FEE,
+  fee 
+})
\ No newline at end of file

src/actions/exchangeContract-actions.js

+import { 
+  UNI_EXCHANGE_CONTRACT_READY,
+  SWT_EXCHANGE_CONTRACT_READY
+} from '../constants';
+
+export const uniExchangeContractReady = (contract) => ({
+  type: UNI_EXCHANGE_CONTRACT_READY,
+  contract
+});
+
+export const swtExchangeContractReady = (contract) => ({
+  type: SWT_EXCHANGE_CONTRACT_READY,
+  contract
+});
\ No newline at end of file

src/actions/tokenContract-actions.js

+import {
+  UNI_TOKEN_CONTRACT_READY,
+  SWT_TOKEN_CONTRACT_READY
+} from '../constants';
+
+export const uniTokenContractReady = (contract) => ({
+  type: UNI_TOKEN_CONTRACT_READY,
+  contract
+});
+
+export const swtTokenContractReady = (contract) => ({
+  type: SWT_TOKEN_CONTRACT_READY,
+  contract
+});
\ No newline at end of file

src/actions/web3-actions.js

+import { 
+  WEB3_CONNECTION_SUCCESSFUL,
+  WEB3_CONNECTION_UNSUCCESSFUL,
+  SET_CURRENT_MASK_ADDRESS,
+  METAMASK_LOCKED,
+  METAMASK_UNLOCKED,
+  SET_INTERACTION_STATE,
+  FACTORY_CONTRACT_READY,
+  SET_NETWORK_MESSAGE,
+  SET_BLOCK_TIMESTAMP, 
+  SET_EXCHANGE_TYPE
+} from '../constants';
+
+// this actions folder is actually full of action creators 
+// your asynchronous calls are going to be in redux-thunk style action creators 
+
+export const web3ConnectionSuccessful = () => ({
+  type: WEB3_CONNECTION_SUCCESSFUL,
+  connected: true
+});
+
+export const web3ConnectionUnsuccessful = () => ({
+  type: WEB3_CONNECTION_UNSUCCESSFUL,
+  connected: false
+});
+
+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) => ({
+  type: SET_NETWORK_MESSAGE,
+  networkMessage
+});
+
+export const setBlockTimestamp = (timestamp) => ({ 
+  type: SET_BLOCK_TIMESTAMP,
+  timestamp
+});
+
+export const setExchangeType = (exchangeType) => ({
+  type: SET_EXCHANGE_TYPE,
+  exchangeType
+});

src/components/Candlesticks.js

+import React, { Component } from 'react';
+import * as d3 from 'd3';
+import axios from 'axios';
+
+class Candlesticks extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      data: null
+    }
+    this.visualizeData.bind(this)
+  }
+
+  // note, this url is being used for development
+  // the actual url will be wherever the API is hosted 
+  componentDidMount() {
+    let query = `{
+      Event(input:"UNI") {
+        ethValueOfToken
+        createdAt
+      }
+    }`;
+
+    axios.get('http://localhost:3000/graphql', { params: { query: query } })
+    .then(data => this.setState({data: data.data.data.Event}))
+    .then(()=> this.visualizeData())
+    .catch(err => console.error(err));
+  }
+
+  visualizeData() {
+    let svg = d3.select('svg');
+    let coeff = 1000 * 60 * 15
+
+    let nested_date = d3.nest()
+      .key((d) => new Date (Math.round(new Date(d.createdAt).getTime() / coeff) * coeff))
+      .sortValues()
+      .entries(this.state.data)
+    
+    console.log(nested_date, 'something better happen here')
+
+    // var enter = svg.selectAll('rect')
+    //  .data(this.state.data)
+    //  .enter()
+    //  .append('rect')
+  
+  }
+
+
+  render() {
+    return (
+     <svg>
+     </svg>
+    )
+  }
+}
+
+export default Candlesticks;
\ No newline at end of file

src/constants.js

+// here is where we put the string literals for the actions 
+// maybe there's an action to see if you've been connected to web3
+
+// web3 actions, all set from action creator to reducer to app 
+export const CHECK_WEB3_CONNECTION = 'CHECK_WEB3_CONNECTION';
+export const WEB3_CONNECTION_SUCCESSFUL = 'WEB3_CONNECTION_SUCCESSFUL';
+export const WEB3_CONNECTION_UNSUCCESSFUL = 'WEB3_CONNECTION_UNSUCCESSFUL';
+export const SET_CURRENT_MASK_ADDRESS = 'SET_CURRENT_MASK_ADDRESS';
+
+export const METAMASK_LOCKED = 'METAMASK_LOCKED';
+export const METAMASK_UNLOCKED = 'METAMASK_UNLOCKED';
+export const SET_INTERACTION_STATE = 'SET_INTERACTION_STATE';
+export const SET_NETWORK_MESSAGE = 'SET_NETWORK_MESSAGE';
+
+export const SET_BLOCK_TIMESTAMP = 'SET_BLOCK_TIMESTAMP';
+export const SET_EXCHANGE_TYPE = 'SET_EXCHANGE_TYPE';
+
+// factory contract action, also set
+export const FACTORY_CONTRACT_READY = 'FACTORY_CONTRACT_READY';
+
+// token EXCHANGE contract actions, in action creator, reducer, and app
+export const UNI_EXCHANGE_CONTRACT_READY = 'UNI_EXCHANGE_CONTRACT_READY';
+export const SWT_EXCHANGE_CONTRACT_READY = 'SWT_EXCHANGE_CONTRACT_READY';
+
+// token CONTRACT actions in actions, action creator, reducer
+export const UNI_TOKEN_CONTRACT_READY = 'UNI_TOKEN_CONTRACT_READY';
+export const SWT_TOKEN_CONTRACT_READY = 'SWT_TOKEN_CONTRACT_READY';
+
+// actions for the exchange, all in one place 
+export const SET_INPUT_BALANCE = 'SET_INPUT_BALANCE';
+export const SET_OUTPUT_BALANCE = 'SET_OUTPUT_BALANCE';
+export const SET_INPUT_TOKEN = 'SET_INPUT_TOKEN';
+export const SET_OUTPUT_TOKEN = 'SET_OUTPUT_TOKEN';
+export const SET_INVARIANT_1 = 'SET_INVARIANT_1';
+export const SET_INVARIANT_2 = 'SET_INVARIANT_2';
+export const SET_MARKET_ETH_1 = 'SET_MARKET_ETH_1';
+export const SET_MARKET_ETH_2 = 'SET_MARKET_ETH_2';
+export const SET_MARKET_TOKENS_1 = 'SET_MARKET_TOKENS_1';
+export const SET_MARKET_TOKENS_2 = 'SET_MARKET_TOKENS_2';
+export const SET_ALLOWANCE_APPROVAL_STATE = 'SET_ALLOWANCE_APPROVAL_STATE';
+export const SET_EXCHANGE_INPUT_VALUE = 'SET_EXCHANGE_INPUT_VALUE';
+export const SET_EXCHANGE_OUTPUT_VALUE = 'SET_EXCHANGE_OUTPUT_VALUE';
+export const SET_EXCHANGE_RATE = 'SET_EXCHANGE_RATE';
+export const SET_EXCHANGE_FEE = 'SET_EXCHANGE_FEE';
\ No newline at end of file

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 
+import { Provider } from 'react-redux';
+import store from './store';
+
+import './index.css';
+
 import registerServiceWorker from './registerServiceWorker';
+// provider is going to need a store object passed into it 
+ReactDOM.render(
+  <Provider store={store}>
+    <App metamask={window.web3} />
+  </Provider>
+, document.getElementById('root')
+);
 
-ReactDOM.render(<App metamask={window.web3} />, document.getElementById('root'));
 registerServiceWorker();

src/reducers/exchange-reducer.js

+import { 
+  SET_INPUT_BALANCE,
+  SET_OUTPUT_BALANCE,
+  SET_INPUT_TOKEN,
+  SET_OUTPUT_TOKEN,
+  SET_INVARIANT_1,
+  SET_INVARIANT_2,
+  SET_MARKET_ETH_1,
+  SET_MARKET_ETH_2,
+  SET_MARKET_TOKENS_1,
+  SET_MARKET_TOKENS_2,
+  SET_ALLOWANCE_APPROVAL_STATE,
+  SET_EXCHANGE_INPUT_VALUE,
+  SET_EXCHANGE_OUTPUT_VALUE,
+  SET_EXCHANGE_RATE,
+  SET_EXCHANGE_FEE
+  
+} from '../constants';
+
+export default (state = {}, action) => {
+  const { 
+    inputBalance, 
+    outputBalance, 
+    inputToken, 
+    outputToken, 
+    invariant1, 
+    invariant2, 
+    marketEth1, 
+    marketEth2, 
+    marketTokens1, 
+    marketTokens2, 
+    allowanceApproved, 
+    inputValue, 
+    outputValue, 
+    rate, 
+    fee
+   } = action;
+
+  switch(action.type) {
+    case SET_INPUT_BALANCE: 
+      return Object.assign({}, state, { inputBalance: inputBalance });
+    case SET_OUTPUT_BALANCE:
+      return Object.assign({}, state, { outputBalance: outputBalance });
+    case SET_INPUT_TOKEN: 
+      return Object.assign({}, state, { inputToken: inputToken });
+    case SET_OUTPUT_TOKEN:
+      return Object.assign({}, state, { outputToken: outputToken });
+    case SET_INVARIANT_1: 
+      return Object.assign({}, state, { invariant1: invariant1 });
+    case SET_INVARIANT_2:
+      return Object.assign({}, state, { invariant2: invariant2 });
+    case SET_MARKET_ETH_1: 
+      return Object.assign({}, state, { marketEth1: marketEth1 });
+    case SET_MARKET_ETH_2:
+      return Object.assign({}, state, { marketEth2: marketEth2 });
+    case SET_MARKET_TOKENS_1: 
+      return Object.assign({}, state, { marketTokens1: marketTokens1 });
+    case SET_MARKET_TOKENS_2: 
+      return Object.assign({}, state, { marketTokens2: marketTokens2 });
+    case SET_ALLOWANCE_APPROVAL_STATE: 
+      return Object.assign({}, state, { allowanceApproved: allowanceApproved });
+    case SET_EXCHANGE_INPUT_VALUE: 
+      return Object.assign({}, state, { inputValue: inputValue });
+    case SET_EXCHANGE_OUTPUT_VALUE: 
+      return Object.assign({}, state, { outputValue: outputValue });
+    case SET_EXCHANGE_RATE:
+      return Object.assign({}, state, { rate: rate });
+    case SET_EXCHANGE_FEE:
+      return Object.assign({}, state, { fee: fee });
+    default: return state; 
+  }
+}
\ No newline at end of file

src/reducers/exchangeContract-reducer.js

+import {
+  UNI_EXCHANGE_CONTRACT_READY,
+  SWT_EXCHANGE_CONTRACT_READY
+} from '../constants'
+
+export default (state = {}, action) => {
+  const { contract } = action;
+  switch(action.type) {
+    case UNI_EXCHANGE_CONTRACT_READY:
+      return Object.assign({}, state, { UNI: contract });
+    case SWT_EXCHANGE_CONTRACT_READY: 
+      return Object.assign({}, state, { SWT: contract });
+    default: return state;
+  }
+}
\ No newline at end of file

src/reducers/index.js

+import { combineReducers } from 'redux';
+import web3 from './web3-reducer';
+import exchangeContracts from './exchangeContract-reducer';
+import tokenContracts from './tokenContract-reducer';
+import exchange from './exchange-reducer';
+
+export default combineReducers({
+  web3,
+  exchangeContracts,
+  tokenContracts,
+  exchange
+});
\ No newline at end of file

src/reducers/tokenContract-reducer.js

+import { 
+  UNI_TOKEN_CONTRACT_READY,
+  SWT_TOKEN_CONTRACT_READY
+} from '../constants';
+
+export default (state = {}, action) => {
+  const { contract } = action;
+  switch(action.type) {
+    case UNI_TOKEN_CONTRACT_READY:
+      return Object.assign({}, state, { UNI: contract });
+    case SWT_TOKEN_CONTRACT_READY: 
+      return Object.assign({}, state, { SWT: contract });
+    default: return state;
+  }
+}
\ No newline at end of file

src/reducers/web3-reducer.js

+// these will take in an action, have a default state set in the arguments and return a new state
+import { 
+  WEB3_CONNECTION_SUCCESSFUL, 
+  WEB3_CONNECTION_UNSUCCESSFUL,
+  SET_CURRENT_MASK_ADDRESS,
+  METAMASK_LOCKED,
+  METAMASK_UNLOCKED,
+  SET_INTERACTION_STATE,
+  FACTORY_CONTRACT_READY, 
+  SET_NETWORK_MESSAGE,
+  SET_BLOCK_TIMESTAMP,
+  SET_EXCHANGE_TYPE
+} from '../constants';
+
+export default (state = {}, action) => {
+  const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType } = action
+  switch (action.type) {
+    case WEB3_CONNECTION_SUCCESSFUL:
+      return Object.assign({}, state, { connected: connected });
+    case WEB3_CONNECTION_UNSUCCESSFUL:
+      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 });
+    default: return state;
+  }
+}

src/store/index.js

+import store from './store.dev';
+
+export default store;
\ No newline at end of file

src/store/initial-state.js

+// what states do you need upon initialization?
+
+// connected: are you connnected? default state = false 
+// props.metamask --> maybe we should keep this in global state too?
+
+// both of these are set to false in the default state 
+// fire dispatch functions to check for installation and connection in the default store 
+// you are probably going to be storing stuff like invariants and all that jazz here 
+
+export default {
+  // lets check if metamask is installed 
+  // also, lets assume that we're disconnected initially 
+  // we're going to need to include a seperate nest for exchange actions
+  web3: { 
+    connected: false,
+    currentMaskAddress: '',
+    metamaskLocked: true,
+    interaction: '',
+    networkMessage: '',
+    factoryAddress: '0xD6D22d102A4237F3D35361BC022a78789E6174Aa',
+    factoryContract: '',
+    blockTimestamp: '',
+    exchangeType: 'ETH to Token',
+    exchangeAddresses: {
+      UNI: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
+      SWT: '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7'
+    },
+    tokenAddresses: {
+      UNI: '0x350E5DD084ecF271e8d3531D4324443952F47756',
+      SWT: '0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA'
+    }
+  },
+  exchangeContracts: {
+    UNI: '',
+    SWT: ''
+  },
+  tokenContracts: {
+    UNI: '',
+    SWT: ''
+  },
+  exchange: {
+    inputBalance: 0,
+    outputBalance: 0,
+    inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
+    outputToken: { value: 'UNI', label: 'UNI', clearableValue: false },
+    invariant1: 0,
+    invariant2: 0,
+    marketEth1: 0,
+    marketEth2: 0,
+    marketTokens1: 0,
+    marketTokens2: 0,
+    allowanceApproved: true,
+    inputValue: 0,
+    outputValue: 0,
+    rate: 0,
+    fee: 0,
+  }
+}
\ No newline at end of file

src/store/store.dev.js

+import { applyMiddleware, compose, createStore } from 'redux';
+import reducer from '../reducers';
+import thunk from 'redux-thunk'
+import initialState from './initial-state';
+
+const middleware = [thunk];
+const enhancers = [];
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+  reducer,
+  initialState,
+  composeEnhancers(applyMiddleware(...middleware), ...enhancers)
+)
+
+export default store;
\ No newline at end of file