Add Pool screen

src/pages/App.js

@@ -10,9 +10,9 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 // import About from '../components/About';
 // import Links from '../components/Links';
 // import SharePurchase from '../components/SharePurchase';
-
 import Swap from './Swap';
 import Send from './Send';
+import Pool from './Pool';
 
 import './App.scss';
 
@@ -68,7 +68,7 @@ class App extends Component {
         <Switch>
           <Route exact path="/swap" component={Swap} />
           <Route exact path="/send" component={Send} />
-          <Route exact path="/pool" component={Swap} />
+          <Route exact path="/pool" component={Pool} />
         </Switch>
       </BrowserRouter>
     )

src/pages/Pool/index.js

+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import PropTypes from 'prop-types';
+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';
+import Dropdown from '../../assets/images/dropdown.svg';
+
+import "./pool.scss";
+
+function b(text) {
+  return <span className="swap__highlight-text">{text}</span>
+}
+
+class Pool extends Component {
+  static propTypes = {
+    // Injected by React Router Dom
+    push: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="pool">
+        <Header />
+        <NavigationTabs className="swap__navigation" />
+        <div className="swap__content">
+          <OversizedPanel hideTop>
+            <div className="pool__liquidity-container">
+              <span className="pool__liquidity-label">Add Liquidity</span>
+              <img src={Dropdown} />
+            </div>
+          </OversizedPanel>
+          <CurrencyInputPanel
+            title="Input"
+            extraText="Balance: 0.03141"
+          />
+          <OversizedPanel>
+            <div className="swap__down-arrow-background">
+              <img className="swap__down-arrow" src={ArrowDown} />
+            </div>
+          </OversizedPanel>
+          <CurrencyInputPanel
+            title="Output"
+            description="(estimated)"
+            extraText="Balance: 0.0"
+          />
+          <OversizedPanel hideBottom>
+            <div className="pool__summary-panel">
+              <div className="pool__exchange-rate-wrapper">
+                <span className="pool__exchange-rate">Exchange Rate</span>
+                <span>1 ETH = 1283.878 BAT</span>
+              </div>
+              <div className="pool__exchange-rate-wrapper">
+                <span className="swap__exchange-rate">Current Pool Size</span>
+                <span>321 ETH / 321,000 BAT</span>
+              </div>
+            </div>
+          </OversizedPanel>
+          <div className="swap__summary-wrapper">
+            <div>You are adding between {b`212000.00 - 216000.00 BAT`} + {b`166.683543 ETH`} into the liquidity pool.</div>
+            <div className="pool__last-summary-text">You will receive between {b`66%`} and {b`67%`} of the BAT/ETH pool tokens.</div>
+          </div>
+        </div>
+        <button className="swap__cta-btn">Add Liquidity</button>
+      </div>
+    );
+  }
+}
+
+export default withRouter(
+  connect(
+    (state, ownProps) => ({
+      push: ownProps.history.push,
+      pathname: ownProps.location.pathname,
+    }),
+  )(Pool)
+);

src/pages/Pool/pool.scss

+@import "../../variables.scss";
+
+.pool {
+  @extend %col-nowrap;
+  height: 100%;
+
+  &__liquidity-container {
+    @extend %row-nowrap;
+    align-items: center;
+    padding: 1rem;
+    font-size: .75rem;
+
+    img {
+      height: .75rem;
+      width: .75rem;
+    }
+  }
+
+  &__liquidity-label {
+    flex: 1 0 auto;
+  }
+
+  &__summary-panel {
+    @extend %col-nowrap;
+    padding: 1rem 0;
+  }
+
+  &__last-summary-text {
+    margin-top: 1rem;
+  }
+
+  &__exchange-rate-wrapper {
+    @extend %row-nowrap;
+    align-items: center;
+    color: $dove-gray;
+    font-size: .75rem;
+    padding: .25rem 1rem 0;
+  }
+
+  &__exchange-rate {
+    flex: 1 1 auto;
+    width: 0;
+    color: $chalice-gray;
+  }
+}

src/pages/Swap/swap.scss

@@ -45,7 +45,7 @@
   }
 
   &__summary-wrapper {
-    margin-top: 2rem;
+    margin: 2rem 1rem 0;
     color: #737373;
     font-size: .75rem;
     text-align: center;