Add Navigation to Header

src/components/Header/header.scss

 @import "../../variables.scss";
 
 .header {
-  @extend %row-nowrap;
-  padding: 1.5rem;
-  align-items: center;
+  @extend %col-nowrap;
+
+  &__top {
+    @extend %row-nowrap;
+    padding: 1.5rem;
+    align-items: center;
+  }
 
   &__title {
     font-size: 1rem;
@@ -16,5 +20,9 @@
     flex: 1 1 auto;
     width: 0;
   }
+
+  &__navigation {
+    margin: 0 .75rem;
+  }
 }
 

src/components/Header/index.js

@@ -3,15 +3,19 @@ import Logo from '../Logo';
 import Web3Status from '../Web3Status';
 
 import "./header.scss";
+import NavigationTabs from "../NavigationTabs";
 
 export default function Header (props) {
   return (
     <div className="header">
-      <Logo />
-      <div className="header__center-group">
-        <span className="header__title">Uniswap</span>
+      <div className="header__top">
+        <Logo />
+        <div className="header__center-group">
+          <span className="header__title">Uniswap</span>
+        </div>
+        <Web3Status address="0xcf1de0b4d1e492080336909f70413a5f4e7eec62" isConnected />
       </div>
-      <Web3Status address="0xcf1de0b4d1e492080336909f70413a5f4e7eec62" isConnected />
+      <NavigationTabs className="header__navigation" />
     </div>
   )
 }

src/pages/App.js

@@ -27,11 +27,9 @@ class App extends Component {
 }
 
 export default connect(
-  state => ({
-    web3: state.web3.web3,
-    exchangeContracts: state.exchangeContracts,
-    tokenContracts: state.tokenContracts,
-    exchange: state.exchange,
+  ({ web3: { web3, currentAddress } }) => ({
+    address: currentAddress,
+    isConnected: !!(web3 && currentAddress),
   }),
   dispatch => ({
     initializeWeb3: () => dispatch(initialize()),

src/pages/Pool/index.js

@@ -26,7 +26,6 @@ class Pool extends Component {
     return (
       <div className="pool">
         <Header />
-        <NavigationTabs className="swap__navigation" />
         <div className="swap__content">
           <OversizedPanel hideTop>
             <div className="pool__liquidity-container">

src/pages/Send/index.js

@@ -22,7 +22,6 @@ class Send extends Component {
     return (
       <div className="send">
         <Header />
-        <NavigationTabs className="swap__navigation" />
         <div className="swap__content">
           <CurrencyInputPanel
             title="Input"

src/pages/Swap/index.js

@@ -21,7 +21,7 @@ class Swap extends Component {
     return (
       <div className="swap">
         <Header />
-        <NavigationTabs className="swap__navigation" />
+        {/*<NavigationTabs className="swap__navigation" />*/}
         <div className="swap__content">
           <CurrencyInputPanel
             title="Input"

src/pages/Swap/swap.scss

@@ -12,10 +12,6 @@
     overflow-y: auto;
   }
 
-  &__navigation {
-    margin: 0 .75rem;
-  }
-
   &__down-arrow {
     width: .625rem;
     height: .625rem;