Copy changes and add Create Exchange button

src/components/CurrencyInputPanel/currency-panel.scss

@@ -211,7 +211,20 @@
     &--no-exchange {
       color: $dove-gray;
       justify-content: center;
-      background-color: darken($concrete-gray, 1);;
+      background-color: darken($concrete-gray, 1);
+    }
+
+    &--create-exchange {
+      color: $white;
+      justify-content: center;
+      background-color: $malibu-blue;
+      &:hover {
+        background-color: lighten($malibu-blue, 1)
+      }
+
+      &:active {
+        background-color: darken($malibu-blue, 1);
+      }
     }
   }
 

src/components/CurrencyInputPanel/index.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { CSSTransitionGroup } from "react-transition-group";
 import classnames from 'classnames';
+import { withRouter } from 'react-router-dom';
 import Fuse from '../../helpers/fuse';
 import Modal from '../Modal';
 import TokenLogo from '../TokenLogo';
@@ -110,6 +111,7 @@ class CurrencyInputPanel extends Component {
       factoryAddress,
       exchangeAddresses: { fromToken },
       addExchange,
+      history,
     } = this.props;
 
     if (web3 && web3.utils && web3.utils.isAddress(searchQuery)) {
@@ -140,6 +142,25 @@ class CurrencyInputPanel extends Component {
       results = fuse.search(this.state.searchQuery);
     }
 
+    if (!results.length && web3.utils.isAddress(searchQuery)) {
+      const { label } = selectors().getBalance(account, searchQuery);
+      return [
+        <div key="token-modal-no-exchange" className="token-modal__token-row token-modal__token-row--no-exchange">
+          <div>No Exchange Found</div>
+        </div>,
+        <div
+          key="token-modal-create-exchange"
+          className="token-modal__token-row token-modal__token-row--create-exchange"
+          onClick={() => {
+            this.setState({ isShowingModal: false });
+            history.push(`/create-exchange/${searchQuery}`);
+          }}
+        >
+          <div>{`Create exchange fro ${label}`}</div>
+        </div>
+      ]
+    }
+
     if (!results.length) {
       return (
         <div className="token-modal__token-row token-modal__token-row--no-exchange">
@@ -346,18 +367,20 @@ class CurrencyInputPanel extends Component {
   }
 }
 
-export default connect(
-  state => ({
-    factoryAddress: state.addresses.factoryAddress,
-    exchangeAddresses: state.addresses.exchangeAddresses,
-    tokenAddresses: state.addresses.tokenAddresses,
-    contracts: state.contracts,
-    account: state.web3connect.account,
-    approvals: state.web3connect.approvals,
-    web3: state.web3connect.web3,
-  }),
-  dispatch => ({
-    selectors: () => dispatch(selectors()),
-    addExchange: opts => dispatch(addExchange(opts)),
-  }),
-)(CurrencyInputPanel);
+export default withRouter(
+  connect(
+    state => ({
+      factoryAddress: state.addresses.factoryAddress,
+      exchangeAddresses: state.addresses.exchangeAddresses,
+      tokenAddresses: state.addresses.tokenAddresses,
+      contracts: state.contracts,
+      account: state.web3connect.account,
+      approvals: state.web3connect.approvals,
+      web3: state.web3connect.web3,
+    }),
+    dispatch => ({
+      selectors: () => dispatch(selectors()),
+      addExchange: opts => dispatch(addExchange(opts)),
+    }),
+  )(CurrencyInputPanel)
+);

src/pages/App.js

@@ -55,7 +55,7 @@ class App extends Component {
             <Route exact path="/send" component={Send} />
             <Route exact path="/add-liquidity" component={Pool} />
             <Route exact path="/remove-liquidity" component={Pool} />
-            <Route exact path="/create-exchange" component={Pool} />
+            <Route exact path="/create-exchange/:tokenAddress?" component={Pool} />
             <Redirect exact from="/" to="/swap" />
           </AnimatedSwitch>
         </BrowserRouter>

src/pages/Pool/AddLiquidity.js

@@ -38,6 +38,7 @@ class AddLiquidity extends Component {
     inputCurrency: 'ETH',
     outputCurrency: '',
     lastEditedField: '',
+    totalSupply: BN(0),
     showSummaryModal: false,
   };
 
@@ -71,20 +72,29 @@ class AddLiquidity extends Component {
     this.recalcForm();
   }
 
-  recalcForm = () => {
+  recalcForm = async () => {
     const {
       outputCurrency,
       inputValue,
       outputValue,
       lastEditedField,
+      totalSupply: oldTotalSupply,
     } = this.state;
+    const { exchangeAddresses: { fromToken }, web3 } = this.props;
+    const exchangeAddress = fromToken[outputCurrency];
     const exchangeRate = this.getExchangeRate();
     const append = {};
 
-    if (!outputCurrency || this.isNewExchange()) {
+    if (!outputCurrency || this.isNewExchange() || !web3) {
       return;
     }
 
+    const exchange = new web3.eth.Contract(EXCHANGE_ABI, exchangeAddress);
+    const totalSupply = await exchange.methods.totalSupply().call();
+    if (!oldTotalSupply.isEqualTo(BN(totalSupply))) {
+      append.totalSupply = BN(totalSupply);
+    }
+
     if (lastEditedField === INPUT) {
       const newOutputValue = exchangeRate.multipliedBy(inputValue).toFixed(7);
       if (newOutputValue !== outputValue) {
@@ -100,7 +110,7 @@ class AddLiquidity extends Component {
     }
 
     this.setState(append);
-  }
+  };
 
   getBalance(currency) {
     const { selectors, account } = this.props;
@@ -298,21 +308,32 @@ class AddLiquidity extends Component {
           <span className="swap__exchange-rate">Current Pool Size</span>
           <span> - </span>
         </div>
+        <div className="pool__exchange-rate-wrapper">
+          <span className="swap__exchange-rate">Your Pool Share</span>
+          <span> - </span>
+        </div>
       </div>
     );
 
-    const { selectors, exchangeAddresses: { fromToken } } = this.props;
+    const { selectors, exchangeAddresses: { fromToken }, account } = this.props;
     const { getBalance } = selectors();
-    const { inputCurrency, outputCurrency, inputValue, outputValue } = this.state;
+    const { inputCurrency, outputCurrency, inputValue, outputValue, totalSupply } = this.state;
     const eth = [inputCurrency, outputCurrency].filter(currency => currency === 'ETH')[0];
     const token = [inputCurrency, outputCurrency].filter(currency => currency !== 'ETH')[0];
+    const exchangeAddress = fromToken[token];
 
-    if (!eth || !token) {
+    if (!eth || !token || !exchangeAddress) {
       return blank;
     }
 
-    const { value: tokenValue, decimals, label } = getBalance(fromToken[token], token);
-    const { value: ethValue } = getBalance(fromToken[token]);
+    const { value: tokenValue, decimals, label } = getBalance(exchangeAddress, token);
+    const { value: ethValue } = getBalance(exchangeAddress);
+    const { value: liquidityBalance } = getBalance(account, exchangeAddress);
+    const ownership = liquidityBalance.dividedBy(totalSupply);
+    const ethPer = ethValue.dividedBy(totalSupply);
+    const tokenPer = tokenValue.dividedBy(totalSupply);
+    const ownedEth = ethPer.multipliedBy(liquidityBalance).dividedBy(10 ** 18);
+    const ownedToken = tokenPer.multipliedBy(liquidityBalance).dividedBy(10 ** decimals);
 
     if (this.isNewExchange()) {
       const rate = BN(outputValue).dividedBy(inputValue);
@@ -325,7 +346,13 @@ class AddLiquidity extends Component {
           </div>
           <div className="pool__exchange-rate-wrapper">
             <span className="swap__exchange-rate">Current Pool Size</span>
-            <span>{` ${ethValue.dividedBy(10 ** 18).toFixed(2)} ${eth} / ${tokenValue.dividedBy(10 ** decimals).toFixed(2)} ${label}`}</span>
+            <span>{` ${ethValue.dividedBy(10 ** 18).toFixed(2)} ${eth} + ${tokenValue.dividedBy(10 ** decimals).toFixed(2)} ${label}`}</span>
+          </div>
+          <div className="pool__exchange-rate-wrapper">
+            <span className="swap__exchange-rate">
+              Your Pool Share ({ownership.multipliedBy(100).toFixed(2)}%)
+            </span>
+            <span>{`${ownedEth.toFixed(2)} ETH + ${ownedToken.toFixed(2)} ${label}`}</span>
           </div>
         </div>
       )
@@ -345,6 +372,12 @@ class AddLiquidity extends Component {
           <span className="swap__exchange-rate">Current Pool Size</span>
           <span>{` ${ethValue.dividedBy(10 ** 18).toFixed(2)} ${eth} + ${tokenValue.dividedBy(10 ** decimals).toFixed(2)} ${label}`}</span>
         </div>
+        <div className="pool__exchange-rate-wrapper">
+            <span className="swap__exchange-rate">
+              Your Pool Share ({ownership.multipliedBy(100).toFixed(2)}%)
+            </span>
+          <span>{`${ownedEth.toFixed(2)} ETH + ${ownedToken.toFixed(2)} ${label}`}</span>
+        </div>
       </div>
     )
   }

src/pages/Pool/CreateExchange.js

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
 import {selectors} from "../../ducks/web3connect";
 import classnames from "classnames";
 import NavigationTabs from "../../components/NavigationTabs";
@@ -24,11 +25,16 @@ class CreateExchange extends Component {
     }).isRequired,
   };
 
-  state = {
-    tokenAddress: '',
-    label: '',
-    decimals: 0,
-  };
+  constructor(props) {
+    super(props);
+    const { match: { params: { tokenAddress } } } = this.props;
+
+    this.state = {
+      tokenAddress,
+      label: '',
+      decimals: 0,
+    };
+  }
 
   validate() {
     const { tokenAddress } = this.state;
@@ -210,17 +216,19 @@ class CreateExchange extends Component {
   }
 }
 
-export default connect(
-  state => ({
-    isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
-    account: state.web3connect.account,
-    balances: state.web3connect.balances,
-    web3: state.web3connect.web3,
-    exchangeAddresses: state.addresses.exchangeAddresses,
-    factoryAddress: state.addresses.factoryAddress,
-  }),
-  dispatch => ({
-    selectors: () => dispatch(selectors()),
-    addExchange: opts => dispatch(addExchange(opts)),
-  })
-)(CreateExchange);
+export default withRouter(
+  connect(
+    state => ({
+      isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+      account: state.web3connect.account,
+      balances: state.web3connect.balances,
+      web3: state.web3connect.web3,
+      exchangeAddresses: state.addresses.exchangeAddresses,
+      factoryAddress: state.addresses.factoryAddress,
+    }),
+    dispatch => ({
+      selectors: () => dispatch(selectors()),
+      addExchange: opts => dispatch(addExchange(opts)),
+    })
\ No newline at end of file
+  )(CreateExchange)
+);
\ No newline at end of file

src/pages/Pool/ModeSelector.js

 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import OversizedPanel from "../../components/OversizedPanel";
-import Dropdown from "../../assets/images/dropdown.svg";
+import Dropdown from "../../assets/images/dropdown-blue.svg";
 import Modal from "../../components/Modal";
 import {CSSTransitionGroup} from "react-transition-group";
 

src/pages/Pool/RemoveLiquidity.js

@@ -8,7 +8,7 @@ import ModeSelector from "./ModeSelector";
 import CurrencyInputPanel from "../../components/CurrencyInputPanel";
 import { selectors } from '../../ducks/web3connect';
 import OversizedPanel from "../../components/OversizedPanel";
-import ArrowPlus from "../../assets/images/plus-blue.svg";
+import ArrowPlus from "../../assets/images/arrow-down-blue.svg";
 import EXCHANGE_ABI from "../../abi/exchange";
 import promisify from "../../helpers/web3-promisfy";
 import ReactGA from "react-ga";
@@ -232,13 +232,13 @@ class RemoveLiquidity extends Component {
           </div>
           <div className="pool__exchange-rate-wrapper">
             <span className="swap__exchange-rate">Current Pool Size</span>
-            <span>{`${ethReserve.dividedBy(10 ** 18).toFixed(2)} ETH / ${tokenReserve.dividedBy(10 ** tokenDecimals).toFixed(2)} ${label}`}</span>
+            <span>{`${ethReserve.dividedBy(10 ** 18).toFixed(2)} ETH + ${tokenReserve.dividedBy(10 ** tokenDecimals).toFixed(2)} ${label}`}</span>
           </div>
           <div className="pool__exchange-rate-wrapper">
             <span className="swap__exchange-rate">
               Your Pool Share ({ownership.multipliedBy(100).toFixed(2)}%)
             </span>
-            <span>{`${ownedEth.toFixed(2)} ETH / ${ownedToken.toFixed(2)} ${label}`}</span>
+            <span>{`${ownedEth.toFixed(2)} ETH + ${ownedToken.toFixed(2)} ${label}`}</span>
           </div>
         </div>
       </OversizedPanel>

src/pages/Pool/index.js

@@ -22,7 +22,7 @@ class Pool extends Component {
         <Switch>
           <Route exact path="/add-liquidity" component={AddLiquidity} />
           <Route exact path="/remove-liquidity" component={RemoveLiquidity} />
-          <Route exact path="/create-exchange" component={CreateExchange} />
+          <Route exact path="/create-exchange/:tokenAddress?" component={CreateExchange} />
         </Switch>
       </div>
     );

src/pages/Pool/pool.scss

@@ -11,7 +11,9 @@
     font-size: .75rem;
     padding: .625rem 1rem;
     font-size: .75rem;
-    color: $dove-gray;
+    color: $royal-blue;
+    font-weight: 500;
+    cursor: pointer;
 
     img {
       height: .75rem;

src/pages/Send/index.js

@@ -792,7 +792,7 @@ class Send extends Component {
 }
 
 export default connect(
-  state => console.log(state) || ({
+  state => ({
     balances: state.web3connect.balances,
     isConnected: !!state.web3connect.account && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
     account: state.web3connect.account,