Handle first liquidity deposit and add warning message (#88)

src/assets/images/plus-blue.svg

+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 6H6M11 6L6 6M6 1V6M6 6L6 11" stroke="#2F80ED" stroke-linecap="round"/>
+</svg>

src/ducks/web3connect.js

@@ -260,7 +260,7 @@ export const sync = () => async (dispatch, getState) => {
         const decimals = tokenBalance.decimals || await contract.methods.decimals().call();
         const symbol = TOKEN_LABEL_FALLBACK[tokenAddress] || tokenBalance.label || await contract.methods.symbol().call();
 
-        if (tokenBalance.value.isEqualTo(BN(balance))) {
+        if (tokenBalance.value.isEqualTo(BN(balance)) && tokenBalance.label && tokenBalance.decimals) {
           return;
         }
 

src/pages/Pool/AddLiquidity.js

@@ -7,8 +7,8 @@ import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import OversizedPanel from '../../components/OversizedPanel';
 import NavigationTabs from '../../components/NavigationTabs';
 import Modal from '../../components/Modal';
-import { selectors, sync } from '../../ducks/web3connect';
-import ArrowDown from '../../assets/images/arrow-down-blue.svg';
+import { selectors } from '../../ducks/web3connect';
+import ArrowDown from '../../assets/images/plus-blue.svg';
 import DropdownBlue from "../../assets/images/dropdown-blue.svg";
 import DropupBlue from "../../assets/images/dropup-blue.svg";
 import ModeSelector from './ModeSelector';
@@ -57,6 +57,41 @@ class AddLiquidity extends Component {
       showSummaryModal !== nextState.showSummaryModal;
   }
 
+  componentWillReceiveProps() {
+    this.recalcForm();
+  }
+
+  recalcForm = () => {
+    const {
+      outputCurrency,
+      inputValue,
+      outputValue,
+      lastEditedField,
+    } = this.state;
+    const exchangeRate = this.getExchangeRate();
+    const append = {};
+
+    if (!outputCurrency || this.isNewExchange()) {
+      return;
+    }
+
+    if (lastEditedField === INPUT) {
+      const newOutputValue = exchangeRate.multipliedBy(inputValue).toFixed(7);
+      if (newOutputValue !== outputValue) {
+        append.outputValue = newOutputValue;
+      }
+    }
+
+    if (lastEditedField === OUTPUT) {
+      const newInputValue = BN(outputValue).dividedBy(exchangeRate).toFixed(7);
+      if (newInputValue !== inputValue) {
+        append.inputValue = newInputValue;
+      }
+    }
+
+    this.setState(append);
+  }
+
   getBalance(currency) {
     const { selectors, account } = this.props;
 
@@ -130,11 +165,16 @@ class AddLiquidity extends Component {
       outputValue = BN(value).dividedBy(exchangeRate).toFixed(7);
     }
 
-    this.setState({
-      outputValue,
+    const append = {
       inputValue: value,
       lastEditedField: INPUT,
-    });
+    };
+
+    if (!this.isNewExchange()) {
+      append.outputValue = outputValue;
+    }
+
+    this.setState(append);
   };
 
   onOutputChange = value => {
@@ -150,13 +190,34 @@ class AddLiquidity extends Component {
       inputValue = exchangeRate.multipliedBy(value).toFixed(7);
     }
 
-    this.setState({
-      inputValue,
+    const append = {
       outputValue: value,
-      lastEditedField: OUTPUT,
-    });
+      lastEditedField: INPUT,
+    };
+
+    if (!this.isNewExchange()) {
+      append.inputValue = inputValue;
+    }
+
+    this.setState(append);
   };
 
+  isNewExchange() {
+    const { selectors, exchangeAddresses: { fromToken } } = this.props;
+    const { inputCurrency, outputCurrency } = this.state;
+    const eth = [inputCurrency, outputCurrency].filter(currency => currency === 'ETH')[0];
+    const token = [inputCurrency, outputCurrency].filter(currency => currency !== 'ETH')[0];
+
+    if (!eth || !token) {
+      return false;
+    }
+
+    const { value: tokenValue } = selectors().getBalance(fromToken[token], token);
+    const { value: ethValue } = selectors().getBalance(fromToken[token], eth);
+
+    return tokenValue.isZero() && ethValue.isZero();
+  }
+
   getExchangeRate() {
     const { selectors, exchangeAddresses: { fromToken } } = this.props;
     const { inputCurrency, outputCurrency } = this.state;
@@ -209,33 +270,52 @@ class AddLiquidity extends Component {
   }
 
   renderInfo() {
+    const blank = (
+      <div className="pool__summary-panel">
+        <div className="pool__exchange-rate-wrapper">
+          <span className="pool__exchange-rate">Exchange Rate</span>
+          <span> - </span>
+        </div>
+        <div className="pool__exchange-rate-wrapper">
+          <span className="swap__exchange-rate">Current Pool Size</span>
+          <span> - </span>
+        </div>
+      </div>
+    );
+
     const { selectors, exchangeAddresses: { fromToken } } = this.props;
-    const { inputCurrency, outputCurrency } = this.state;
+    const { getBalance } = selectors();
+    const { inputCurrency, outputCurrency, inputValue, outputValue } = this.state;
     const eth = [inputCurrency, outputCurrency].filter(currency => currency === 'ETH')[0];
     const token = [inputCurrency, outputCurrency].filter(currency => currency !== 'ETH')[0];
 
     if (!eth || !token) {
+      return blank;
+    }
+
+    const { value: tokenValue, decimals, label } = getBalance(fromToken[token], token);
+    const { value: ethValue } = getBalance(fromToken[token]);
+
+    if (this.isNewExchange()) {
+      const rate = BN(outputValue).dividedBy(inputValue);
+      const rateText = rate.isNaN() ? '---' : rate.toFixed(4);
       return (
         <div className="pool__summary-panel">
           <div className="pool__exchange-rate-wrapper">
             <span className="pool__exchange-rate">Exchange Rate</span>
-            <span> - </span>
+            <span>{`1 ETH = ${rateText} ${label}`}</span>
           </div>
           <div className="pool__exchange-rate-wrapper">
             <span className="swap__exchange-rate">Current Pool Size</span>
-            <span> - </span>
+            <span>{` ${ethValue.dividedBy(10 ** 18).toFixed(2)} ${eth} + ${tokenValue.dividedBy(10 ** decimals).toFixed(2)} ${label}`}</span>
           </div>
         </div>
       )
     }
 
-    const {
-      value: tokenValue,
-      decimals,
-      label
-    } = selectors().getTokenBalance(token, fromToken[token]);
-
-    const { value: ethValue } = selectors().getBalance(fromToken[token]);
+    if (tokenValue.dividedBy(ethValue).isNaN()) {
+      return blank;
+    }
 
     return (
       <div className="pool__summary-panel">
@@ -302,7 +382,7 @@ class AddLiquidity extends Component {
       )
     }
 
-    const { value, decimals, label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
+    const { label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
 
     if (!inputValue || !outputValue) {
       return (
@@ -330,7 +410,6 @@ class AddLiquidity extends Component {
     const {
       inputValue,
       outputValue,
-      inputCurrency,
       outputCurrency,
       showSummaryModal,
     } = this.state;
@@ -381,6 +460,8 @@ class AddLiquidity extends Component {
   render() {
     const {
       isConnected,
+      exchangeAddresses: { fromToken },
+      selectors,
     } = this.props;
 
     const {
@@ -388,10 +469,10 @@ class AddLiquidity extends Component {
       outputValue,
       inputCurrency,
       outputCurrency,
-      lastEditedField,
     } = this.state;
 
     const { inputError, outputError, isValid } = this.validate();
+    const { label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
 
     return [
       <div
@@ -405,6 +486,20 @@ class AddLiquidity extends Component {
             'header--inactive': !isConnected,
           })}
         />
+        {
+          this.isNewExchange()
+            ? (
+              <div className="pool__new-exchange-warning">
+                <div className="pool__new-exchange-warning-text">
+                  You are the first person to add liquidity🚰!
+                </div>
+                <div className="pool__new-exchange-warning-text">
+                  {`A new exchange rate will be set based on your deposits. Please make sure that your ETH and ${label} deposits have the same fiat value.`}
+                </div>
+              </div>
+            )
+            : null
+        }
         <ModeSelector />
         <CurrencyInputPanel
           title="Deposit"
@@ -426,7 +521,9 @@ class AddLiquidity extends Component {
           extraText={this.getBalance(outputCurrency)}
           selectedTokenAddress={outputCurrency}
           onCurrencySelected={currency => {
-            this.setState({ outputCurrency: currency });
+            this.setState({
+              outputCurrency: currency,
+            }, this.recalcForm);
           }}
           onValueChange={this.onOutputChange}
           value={outputValue}
@@ -465,7 +562,6 @@ export default drizzleConnect(
   }),
   dispatch => ({
     selectors: () => dispatch(selectors()),
-    sync: () => dispatch(sync()),
   })
 )
 

src/pages/Pool/pool.scss

@@ -58,6 +58,25 @@
       background: $mercury-gray;
     }
   }
+
+  &__new-exchange-warning {
+    padding: 1rem;
+    margin-bottom: 2rem;
+    border: 1px solid rgba($pizazz-orange, .4);
+    background-color: rgba($pizazz-orange, .1);
+    border-radius: 1rem;
+  }
+
+  &__new-exchange-warning-text {
+    font-size: .75rem;
+    line-height: 1rem;
+    text-align: center;
+
+    &:first-child {
+      padding-bottom: .3rem;
+      font-weight: 500;
+    }
+  }
 }
 
 .pool-modal {

src/variables.scss

@@ -18,7 +18,10 @@ $royal-blue: #2F80ED;
 $wisteria-purple: #AE60B9;
 
 // Red
-$salmon-red: #FF8368;
+$salmon-red: #FF6871;
+
+// Orange
+$pizazz-orange: #FF8F05;
 
 %col-nowrap {
   display: flex;