From b9665b3a3de2a6c7f9a0da3133321811d823e27d Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Sat, 6 Oct 2018 19:30:55 -0700
Subject: [PATCH] Add Send screen and fixed react-router

---
 .../address-input-panel.scss                  |  19 +++
 src/components/AddressInputPanel/index.js     |  42 ++++++
 src/components/Web3Status/index.js            |   4 +
 src/index.js                                  |   6 +-
 src/pages/App.js                              | 122 +++++++++---------
 src/pages/Send/index.js                       |  71 ++++++++++
 src/pages/Send/send.scss                      |   6 +
 7 files changed, 207 insertions(+), 63 deletions(-)
 create mode 100644 src/components/AddressInputPanel/address-input-panel.scss
 create mode 100644 src/components/AddressInputPanel/index.js
 create mode 100644 src/pages/Send/index.js
 create mode 100644 src/pages/Send/send.scss

diff --git a/src/components/AddressInputPanel/address-input-panel.scss b/src/components/AddressInputPanel/address-input-panel.scss
new file mode 100644
index 0000000000..722254bef4
--- /dev/null
+++ b/src/components/AddressInputPanel/address-input-panel.scss
@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+
+.address-input-panel {
+  @extend %col-nowrap;
+
+  &__input {
+    color: $mine-shaft-gray;
+    font-size: .9rem;
+    outline: none;
+    border: none;
+    flex: 1 1 auto;
+    width: 0;
+    color: $royal-blue;
+
+    &::placeholder {
+      color: $chalice-gray;
+    }
+  }
+}
diff --git a/src/components/AddressInputPanel/index.js b/src/components/AddressInputPanel/index.js
new file mode 100644
index 0000000000..9f830e9c90
--- /dev/null
+++ b/src/components/AddressInputPanel/index.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import './address-input-panel.scss';
+
+class AddressInputPanel extends Component {
+  static propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    extraText: PropTypes.string,
+  };
+
+  render() {
+    const {
+      title,
+      description,
+      extraText,
+    } = this.props;
+
+    return (
+      <div className="currency-input-panel">
+        <div className="currency-input-panel__container">
+          <div className="currency-input-panel__label-row">
+            <div className="currency-input-panel__label-container">
+              <span className="currency-input-panel__label">Recipient Address</span>
+            </div>
+          </div>
+          <div className="currency-input-panel__input-row">
+            <input
+              type="text"
+              className="address-input-panel__input"
+              placeholder="0x1234..."
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect()(AddressInputPanel);
diff --git a/src/components/Web3Status/index.js b/src/components/Web3Status/index.js
index f378ab5658..7ca1f0ffe1 100644
--- a/src/components/Web3Status/index.js
+++ b/src/components/Web3Status/index.js
@@ -18,6 +18,10 @@ function Web3Status(props) {
       <div
         className="web3-status__identicon"
         ref={el => {
+          if (!el) {
+            return;
+          }
+
           if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
             return;
           }
diff --git a/src/index.js b/src/index.js
index d753c0dd55..dfb0a0abdb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom'
+// import { BrowserRouter } from 'react-router-dom'
 import App from './pages/App';
 
 import { Provider } from 'react-redux';
@@ -12,11 +12,9 @@ import registerServiceWorker from './registerServiceWorker';
 // provider is going to need a store object passed into it 
 ReactDOM.render(
   <Provider store={store}>
-    <BrowserRouter>
       <App metamask={window.web3} />
-    </BrowserRouter>
   </Provider>
-, document.getElementById('root')
+  , document.getElementById('root')
 );
 
 registerServiceWorker();
diff --git a/src/pages/App.js b/src/pages/App.js
index b8602dd33c..8efb1fed81 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -1,72 +1,76 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
-import UniHead from '../components/UniHead'
-import Header from '../components/Header';
-import ConnectionHelper from '../components/ConnectionHelper'
-import Exchange from '../components/Exchange';
-import RateAndFee from '../components/RateAndFee';
-import Purchase from '../components/Purchase';
-import About from '../components/About';
-import Links from '../components/Links';
-import SharePurchase from '../components/SharePurchase';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+// import UniHead from '../components/UniHead'
+// import Header from '../components/Header';
+// import ConnectionHelper from '../components/ConnectionHelper'
+// import Exchange from '../components/Exchange';
+// import RateAndFee from '../components/RateAndFee';
+// import Purchase from '../components/Purchase';
+// import About from '../components/About';
+// import Links from '../components/Links';
+// import SharePurchase from '../components/SharePurchase';
 
 import Swap from './Swap';
+import Send from './Send';
+
 import './App.scss';
 
 class App extends Component {
-  renderMain() {
-    return (
-      <div className="app">
-        <UniHead />
-        <Header metamask={this.props.metamask}/>
-        <ConnectionHelper
-          metamask={this.props.metamask}
-          approveAllowance={this.approveAllowance}
-          toggleAbout={this.toggleAbout}
-        />
-        <Exchange
-          getAccountInfo={this.getAccountInfo}
-          getMarketInfo={this.getMarketInfo}
-          symbolToTokenContract={this.symbolToTokenContract}
-          symbolToExchangeAddress={this.symbolToExchangeAddress}
-        />
-        <RateAndFee
-          exchangeRate={this.props.exchange.rate}
-          outputTokenValue={this.props.exchange.outputToken.value}
-          inputTokenValue={this.props.exchange.inputToken.value}
-          exchangeFee={this.props.exchange.fee}
-        />
-        <Purchase
-          symbolToExchangeContract={this.symbolToExchangeContract}
-          symbolToTokenAddress={this.symbolToTokenAddress}
-        />
-        {/* <Visualization /> */}
-        <Links
-          toggleInvest={this.toggleInvest}
-          location={this}
-          symbolToTokenContract={this.symbolToTokenContract}
-          symbolToExchangeContract={this.symbolToExchangeContract}
-          symbolToExchangeAddress={this.symbolToExchangeAddress}
-        />
-        <SharePurchase
-          symbolToTokenContract={this.symbolToTokenContract}
-          symbolToExchangeContract={this.symbolToExchangeContract}
-          symbolToTokenAddress={this.symbolToTokenAddress}
-          symbolToExchangeAddress={this.symbolToExchangeAddress}
-        />
-        <About toggleAbout={this.toggleAbout} location={this}/>
-      </div>
-    )
-  }
+  // renderMain() {
+  //   return (
+  //     <div className="app">
+  //       <UniHead />
+  //       <Header metamask={this.props.metamask}/>
+  //       <ConnectionHelper
+  //         metamask={this.props.metamask}
+  //         approveAllowance={this.approveAllowance}
+  //         toggleAbout={this.toggleAbout}
+  //       />
+  //       <Exchange
+  //         getAccountInfo={this.getAccountInfo}
+  //         getMarketInfo={this.getMarketInfo}
+  //         symbolToTokenContract={this.symbolToTokenContract}
+  //         symbolToExchangeAddress={this.symbolToExchangeAddress}
+  //       />
+  //       <RateAndFee
+  //         exchangeRate={this.props.exchange.rate}
+  //         outputTokenValue={this.props.exchange.outputToken.value}
+  //         inputTokenValue={this.props.exchange.inputToken.value}
+  //         exchangeFee={this.props.exchange.fee}
+  //       />
+  //       <Purchase
+  //         symbolToExchangeContract={this.symbolToExchangeContract}
+  //         symbolToTokenAddress={this.symbolToTokenAddress}
+  //       />
+  //       {/* <Visualization /> */}
+  //       <Links
+  //         toggleInvest={this.toggleInvest}
+  //         location={this}
+  //         symbolToTokenContract={this.symbolToTokenContract}
+  //         symbolToExchangeContract={this.symbolToExchangeContract}
+  //         symbolToExchangeAddress={this.symbolToExchangeAddress}
+  //       />
+  //       <SharePurchase
+  //         symbolToTokenContract={this.symbolToTokenContract}
+  //         symbolToExchangeContract={this.symbolToExchangeContract}
+  //         symbolToTokenAddress={this.symbolToTokenAddress}
+  //         symbolToExchangeAddress={this.symbolToExchangeAddress}
+  //       />
+  //       <About toggleAbout={this.toggleAbout} location={this}/>
+  //     </div>
+  //   )
+  // }
 
   render() {
     return (
-      <Switch>
-        <Route exact path="/swap" component={Swap} />
-        <Route exact path="/send" component={Swap} />
-        <Route exact path="/pool" component={Swap} />
-      </Switch>
+      <BrowserRouter>
+        <Switch>
+          <Route exact path="/swap" component={Swap} />
+          <Route exact path="/send" component={Send} />
+          <Route exact path="/pool" component={Swap} />
+        </Switch>
+      </BrowserRouter>
     )
   }
 }
diff --git a/src/pages/Send/index.js b/src/pages/Send/index.js
new file mode 100644
index 0000000000..8c973ff3be
--- /dev/null
+++ b/src/pages/Send/index.js
@@ -0,0 +1,71 @@
+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 AddressInputPanel from '../../components/AddressInputPanel';
+import OversizedPanel from '../../components/OversizedPanel';
+import ArrowDown from '../../assets/images/arrow-down-blue.svg';
+
+import "./send.scss";
+
+class Send extends Component {
+  static propTypes = {
+    // Injected by React Router Dom
+    push: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return (
+      <div className="send">
+        <Header />
+        <NavigationTabs className="swap__navigation" />
+        <div className="swap__content">
+          <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>
+            <div className="swap__down-arrow-background">
+              <img className="swap__down-arrow" src={ArrowDown} />
+            </div>
+          </OversizedPanel>
+          <AddressInputPanel />
+          <OversizedPanel hideBottom>
+            <div className="swap__exchange-rate-wrapper">
+              <span className="swap__exchange-rate">Exchange Rate</span>
+              <span>1 ETH = 1283.878 BAT</span>
+            </div>
+          </OversizedPanel>
+          <div className="swap__summary-wrapper">
+            <div>You are selling <span className="swap__highlight-text">0.01 ETH</span></div>
+            <div>You will receive between <span className="swap__highlight-text">12.80</span> and <span className="swap__highlight-text">12.83 BAT</span></div>
+          </div>
+        </div>
+        <button className="swap__cta-btn">Send</button>
+      </div>
+    );
+  }
+}
+
+export default withRouter(
+  connect(
+    (state, ownProps) => ({
+      push: ownProps.history.push,
+      pathname: ownProps.location.pathname,
+    }),
+  )(Send)
+);
diff --git a/src/pages/Send/send.scss b/src/pages/Send/send.scss
new file mode 100644
index 0000000000..9eea81f7f1
--- /dev/null
+++ b/src/pages/Send/send.scss
@@ -0,0 +1,6 @@
+@import "../../variables.scss";
+
+.send {
+  @extend %col-nowrap;
+  height: 100%;
+}