Add inactive state to views

src/pages/App.js

@@ -22,15 +22,12 @@ class App extends Component {
           <Route exact path="/pool" component={Pool} />
         </Switch>
       </BrowserRouter>
-    )
+    );
   }
 }
 
 export default connect(
-  ({ web3: { web3, currentAddress } }) => ({
-    address: currentAddress,
-    isConnected: !!(web3 && currentAddress),
-  }),
+  null,
   dispatch => ({
     initializeWeb3: () => dispatch(initialize()),
   })

src/pages/Pool/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import classnames from "classnames";
 import Header from '../../components/Header';
-import NavigationTabs from '../../components/NavigationTabs';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
 import ArrowDown from '../../assets/images/arrow-down-blue.svg';
@@ -20,13 +20,20 @@ class Pool extends Component {
     // Injected by React Router Dom
     push: PropTypes.func.isRequired,
     pathname: PropTypes.string.isRequired,
+    web3: PropTypes.object.isRequired,
+    currentAddress: PropTypes.string,
+    isConnected: PropTypes.bool.isRequired,
   };
 
   render() {
     return (
       <div className="pool">
         <Header />
-        <div className="swap__content">
+        <div
+          className={classnames('swap__content', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
           <OversizedPanel hideTop>
             <div className="pool__liquidity-container">
               <span className="pool__liquidity-label">Add Liquidity</span>
@@ -75,6 +82,9 @@ export default withRouter(
     (state, ownProps) => ({
       push: ownProps.history.push,
       pathname: ownProps.location.pathname,
+      web3: state.web3.web3,
+      currentAddress: state.web3.currentAddress,
+      isConnected: !!(state.web3.web3 && state.web3.currentAddress),
     }),
   )(Pool)
 );

src/pages/Send/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Header from '../../components/Header';
-import NavigationTabs from '../../components/NavigationTabs';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import AddressInputPanel from '../../components/AddressInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
@@ -16,13 +16,20 @@ class Send extends Component {
     // Injected by React Router Dom
     push: PropTypes.func.isRequired,
     pathname: PropTypes.string.isRequired,
+    web3: PropTypes.object.isRequired,
+    currentAddress: PropTypes.string,
+    isConnected: PropTypes.bool.isRequired,
   };
 
   render() {
     return (
       <div className="send">
         <Header />
-        <div className="swap__content">
+        <div
+          className={classnames('swap__content', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
           <CurrencyInputPanel
             title="Input"
             extraText="Balance: 0.03141"
@@ -65,6 +72,9 @@ export default withRouter(
     (state, ownProps) => ({
       push: ownProps.history.push,
       pathname: ownProps.location.pathname,
+      web3: state.web3.web3,
+      currentAddress: state.web3.currentAddress,
+      isConnected: !!(state.web3.web3 && state.web3.currentAddress),
     }),
   )(Send)
 );

src/pages/Swap/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Header from '../../components/Header';
-import NavigationTabs from '../../components/NavigationTabs';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
 import ArrowDown from '../../assets/images/arrow-down-blue.svg';
@@ -13,16 +13,22 @@ import "./swap.scss";
 class Swap extends Component {
   static propTypes = {
     // Injected by React Router Dom
-      push: PropTypes.func.isRequired,
-      pathname: PropTypes.string.isRequired,
+    push: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    web3: PropTypes.object.isRequired,
+    currentAddress: PropTypes.string,
+    isConnected: PropTypes.bool.isRequired,
   };
 
   render() {
     return (
       <div className="swap">
         <Header />
-        {/*<NavigationTabs className="swap__navigation" />*/}
-        <div className="swap__content">
+        <div
+          className={classnames('swap__content', {
+            'swap--inactive': !this.props.isConnected,
+          })}
+        >
           <CurrencyInputPanel
             title="Input"
             extraText="Balance: 0.03141"
@@ -59,6 +65,9 @@ export default withRouter(
     (state, ownProps) => ({
       push: ownProps.history.push,
       pathname: ownProps.location.pathname,
+      web3: state.web3.web3,
+      currentAddress: state.web3.currentAddress,
+      isConnected: !!(state.web3.web3 && state.web3.currentAddress),
     }),
   )(Swap)
 );

src/pages/Swap/swap.scss

@@ -4,6 +4,10 @@
   @extend %col-nowrap;
   height: 100%;
 
+  &--inactive {
+    opacity: .5;
+  }
+
   &__content {
     padding: 1rem .75rem;
     margin-top: 1rem;