[WIP] Adding Redux

package.json

@@ -9,6 +9,7 @@
     "@material-ui/core": "3.7.1",
     "@material-ui/icons": "3.0.1",
     "axios": "^0.18.0",
+    "connected-react-router": "^6.0.0",
     "d3": "4.10.0",
     "d3-scale": "2.1.2",
     "downshift": "3.1.8",
@@ -17,16 +18,20 @@
     "eth-sig-util": "^2.1.0",
     "ethereum-blockies-base64": "1.0.2",
     "ganache-cli": "6.2.5",
+    "history": "^4.7.2",
     "notistack": "0.4.1",
     "react": "^16.6.0",
     "react-dom": "^16.6.3",
+    "react-redux": "^6.0.0",
     "react-router-dom": "4.3.1",
     "react-router-hash-link": "1.2.1",
     "react-scripts": "2.1.2",
     "react-step-wizard": "^5.0.0",
     "react-stepzilla": "^4.8.0",
     "react-text-loop": "1.1.0",
     "recharts": "1.4.2",
+    "redux": "^4.0.1",
+    "redux-saga": "^0.16.2",
     "styled-components": "4.1.3",
     "web3": "1.0.0-beta.37"
   },

src/App.jsx

@@ -11,15 +11,14 @@ import { kombatTheme, slateTheme } from './themes';
 /// Notistack
 import { SnackbarProvider } from 'notistack';
 
+// Router
+import { ConnectedRouter } from 'connected-react-router';
+
 export default class App extends Component {
   state = {
     lights: false,
   };
 
-  componentDidMount() {
-    // window.addEventListener
-  }
-
   toggleLights = () => {
     this.setState({ lights: !this.state.lights });
   };
@@ -34,26 +33,28 @@ export default class App extends Component {
         }}
       >
         <MuiThemeProvider theme={this.state.lights ? slateTheme : kombatTheme}>
-          <AppContainer>
-            <Switch>
-              <Route path="/" exact component={Landing} />
-              <Route path="/dashboard" exact component={Dashboard} />
-              <Route
-                path="/dashboard/:tokenAddress"
-                exact
-                render={props => (
-                  <Interface
-                    key={props.match.params.tokenAddress}
-                    lights={this.state.lights}
-                    toggleLights={this.toggleLights}
-                  />
-                )}
-              />
-              <Route path="/economies/:economyAddress" exact component={Profile} />
-              <Route path="/launch" component={Launch} />
-              <Route path="/leaderboard" component={Leaderboard} />
-            </Switch>
-          </AppContainer>
+          <ConnectedRouter history={this.props.history}>
+            <AppContainer>
+              <Switch>
+                <Route path="/" exact component={Landing} />
+                <Route path="/dashboard" exact component={Dashboard} />
+                <Route
+                  path="/dashboard/:tokenAddress"
+                  exact
+                  render={props => (
+                    <Interface
+                      key={props.match.params.tokenAddress}
+                      lights={this.state.lights}
+                      toggleLights={this.toggleLights}
+                    />
+                  )}
+                />
+                <Route path="/economies/:economyAddress" exact component={Profile} />
+                <Route path="/launch" component={Launch} />
+                <Route path="/leaderboard" component={Leaderboard} />
+              </Switch>
+            </AppContainer>
+          </ConnectedRouter>
         </MuiThemeProvider>
       </SnackbarProvider>
     );

src/actions.js

@@ -0,0 +1,6 @@
+export const CACHE_BLOCK = 'CACHE_BLOCK';
+
+export const cacheBlock = block => ({
+  type: CACHE_BLOCK,
+  block,
+});

src/components/AppContainer/Topbar/Web3StatusBar.jsx

@@ -27,7 +27,7 @@ const ColorIndicatorIcon = styled(FontAwesomeIcon)`
 
 class EthStatus extends React.Component {
   state = {
-    enabled: false,
+    enabled: true,
   };
 
   // componentDidMount() {

src/components/AppContainer/Topbar/index.jsx

@@ -8,7 +8,7 @@ import { withTheme } from '@material-ui/core/styles';
 import Web3Panel from './Web3StatusBar';
 
 import Logo from '../../../assets/logo.png';
-// import WhiteLogo from '../../../assets/logo_white.png';
+import WhiteLogo from '../../../assets/logo_white.png';
 
 const Bar = styled.div`
   position: static;
@@ -18,14 +18,14 @@ const Bar = styled.div`
   padding: 0 4% 0 4%;
   display: flex;
   flex-flow: row wrap;
-  background: #c3c3c3;
+  background: ${props => props.bg};
 `;
 
 const Topbar = props => (
-  <Bar>
+  <Bar bg={props.theme.palette.type === 'dark' ? '#151515' : '#FFF'}>
     <NavLink to={'/'}>
       <img
-        src={props.theme.palette.type === 'dark' ? Logo : Logo}
+        src={props.theme.palette.type === 'dark' ? WhiteLogo : Logo}
         alt="Convergent"
         width="25px"
         height="25px"

src/components/Dashboard/DashboardInterface/Events/Events.jsx

@@ -50,10 +50,10 @@ class Events extends React.Component {
             </TableCell>
             <TableCell>{row.returnValues.who && row.returnValues.who}</TableCell>
             <TableCell>{row.returnValues.message ? row.returnValues.message : ''}</TableCell>
-            <TableCell numeric>
+            <TableCell>
               {row.returnValues.amount ? removeDecimals(row.returnValues.amount) : ''}
             </TableCell>
-            <TableCell numeric>
+            <TableCell>
               {row.returnValues.totalCost ? removeDecimals(row.returnValues.totalCost) : ''}
             </TableCell>
           </TableRow>

src/index.js

@@ -1,12 +1,16 @@
 /* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter } from 'react-router-dom';
+// import { HashRouter } from 'react-router-dom';
 
 /// Drizzle
 import { Drizzle, generateStore } from 'drizzle';
 import { DrizzleContext } from 'drizzle-react';
 
+/// Redux
+import { Provider } from 'react-redux';
+import { history, store } from './store';
+
 /// Styles
 import './styles/index.css';
 
@@ -26,9 +30,9 @@ const drizzle = new Drizzle(options, drizzleStore);
 
 ReactDOM.render(
   <DrizzleContext.Provider drizzle={drizzle}>
-    <HashRouter>
-      <App />
-    </HashRouter>
+    <Provider store={store}>
+      <App history={history} />
+    </Provider>
   </DrizzleContext.Provider>,
   document.getElementById('root')
 );

src/reducers.js

@@ -0,0 +1,24 @@
+import { combineReducers } from 'redux';
+import { drizzleReducers } from 'drizzle';
+import { connectRouter } from 'connected-react-router';
+
+// import { CACHE_BLOCK } from './actions';
+
+// const cacheBlock = (state = [], action) => {
+//   switch (action.type) {
+//     case CACHE_BLOCK:
+//       return [
+//         ...state,
+//         action.block.event,
+//       ];
+//     default:
+//       return state;
+//   };
+// };
+
+export default history =>
+  combineReducers({
+    router: connectRouter(history),
+    ...drizzleReducers,
+    // cacheBlock,
+  });

src/store.js

@@ -0,0 +1,31 @@
+import { routerMiddleware } from 'connected-react-router';
+import { drizzleSagas } from 'drizzle';
+import { createHashHistory } from 'history';
+import { applyMiddleware, compose, createStore } from 'redux';
+import createSagaMiddleware from 'redux-saga';
+import { all, fork } from 'redux-saga/effects';
+import rootReducer from './reducers';
+
+function* rootSaga() {
+  yield all(drizzleSagas.map(saga => fork(saga)));
+}
+
+function configureStore(initialState = {}, history) {
+  const sagaMiddleware = createSagaMiddleware();
+
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+  const store = createStore(
+    rootReducer(history),
+    initialState,
+    composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
+  );
+
+  sagaMiddleware.run(rootSaga);
+  return store;
+}
+
+const history = createHashHistory();
+const store = configureStore({}, history);
+
+export { store, history };