Update Add Liquidity detail message (#109)

src/pages/Pool/AddLiquidity.js

@@ -458,12 +458,13 @@ class AddLiquidity extends Component {
   }
 
   renderSummaryModal() {
-    const { selectors, exchangeAddresses: { fromToken } } = this.props;
+    const { selectors, exchangeAddresses: { fromToken }, account } = this.props;
     const {
       inputValue,
       outputValue,
       outputCurrency,
       showSummaryModal,
+      totalSupply,
     } = this.state;
     if (!showSummaryModal) {
       return null;
@@ -474,14 +475,17 @@ class AddLiquidity extends Component {
       action: 'Open',
     });
 
-    const { value, decimals, label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
+    const { value: tokenReserve, decimals, label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
+    const { value: ethReserve } = selectors().getBalance(fromToken[outputCurrency]);
+    const { decimals: poolTokenDecimals } = selectors().getBalance(account, fromToken[outputCurrency]);
 
     const SLIPPAGE = 0.025;
     const minOutput = BN(outputValue).multipliedBy(1 - SLIPPAGE);
     const maxOutput = BN(outputValue).multipliedBy(1 + SLIPPAGE);
-    const tokenReserve = value.dividedBy(10 ** decimals);
     const minPercentage = minOutput.dividedBy(minOutput.plus(tokenReserve)).multipliedBy(100);
     const maxPercentage = maxOutput.dividedBy(maxOutput.plus(tokenReserve)).multipliedBy(100);
+    const liquidityMinted = BN(inputValue).multipliedBy(totalSupply.dividedBy(ethReserve));
+    const adjTotalSupply = totalSupply.dividedBy(10 ** poolTokenDecimals);
 
     return (
       <Modal key="modal" onClose={() => this.setState({ showSummaryModal: false })}>
@@ -493,7 +497,7 @@ class AddLiquidity extends Component {
           transitionLeaveTimeout={200}
           transitionEnterTimeout={200}
         >
-          <div className="swap__summary-modal">
+          <div className="pool__summary-modal">
             <div
               key="open-details"
               className="swap__open-details-container"
@@ -503,10 +507,10 @@ class AddLiquidity extends Component {
               <img src={DropupBlue} />
             </div>
             <div>
-              <div>You are adding between {b(`${+minOutput.toFixed(7)} - ${+maxOutput.toFixed(7)} ${label}`)} + {b(`${+BN(inputValue).toFixed(7)} ETH`)} into the liquidity pool.</div>
-              <div className="pool__last-summary-text">
-                You will receive between {b(`${+minPercentage.toFixed(5)}%`)} and {b(`${+maxPercentage.toFixed(5)}%`)} of the {`${label}/ETH`} pool tokens.
-              </div>
+              <div className="pool__summary-modal__item">You are adding between {b(`${+BN(inputValue).toFixed(7)} ETH`)} and {b(`${+minOutput.toFixed(7)} - ${+maxOutput.toFixed(7)} ${label}`)} into the liquidity pool.</div>
+              <div className="pool__summary-modal__item">You will mint {b(+liquidityMinted.toFixed(7))} liquidity tokens.</div>
+              <div className="pool__summary-modal__item">Current total supply of liquidity tokens is {b(+adjTotalSupply.toFixed(7))}</div>
+              <div className="pool__summary-modal__item">At current exchange rate, each pool token is worth {b(+ethReserve.dividedBy(totalSupply).toFixed(7))} ETH and {b(+tokenReserve.dividedBy(totalSupply).toFixed(7))} {label}</div>
             </div>
           </div>
         </CSSTransitionGroup>

src/pages/Pool/pool.scss

@@ -79,6 +79,43 @@
       font-weight: 500;
     }
   }
+
+  &__summary-modal {
+    background-color: $white;
+    position: relative;
+    bottom: 20rem;
+    min-height: 20rem;
+    max-height: 20rem;
+    z-index: 2000;
+    padding: 1rem;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+    transition: 250ms ease-in-out;
+
+    @media only screen and (min-device-width : 768px) {
+      max-width: 560px;
+      position: absolute;
+      margin-left: auto;
+      margin-right: auto;
+      border-radius: 1rem;
+      padding-bottom: 1rem;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      margin-top: 4rem;
+    }
+
+    .swap__open-details-container {
+      padding: 0.5rem 0;
+      margin-bottom: 1rem;
+      cursor: pointer;
+    }
+
+    &__item {
+      margin-bottom: .5rem;
+    }
+  }
 }
 
 .pool-modal {

src/pages/Send/index.js

@@ -640,6 +640,7 @@ class Send extends Component {
     }
 
     let description;
+    const recipientText = b(`${recipient.slice(0, 6)}...${recipient.slice(-4)}`);
     if (lastEditedField === INPUT) {
       description = (
         <div>
@@ -647,7 +648,7 @@ class Send extends Component {
             You are selling {b(`${+inputValue} ${inputLabel}`)}.
           </div>
           <div className="send__last-summary-text">
-            {b(`${recipient.slice(0, 6)}...${recipient.slice(-4)}`)} will receive between {b(`${+minOutput} ${outputLabel}`)} and {b(`${+outputValue} ${outputLabel}`)}.
+            {recipientText} will receive at least {b(`${+minOutput} ${outputLabel}`)} or the transaction will fail.
           </div>
         </div>
       );
@@ -655,10 +656,12 @@ class Send extends Component {
       description = (
         <div>
           <div>
-            You are selling between {b(`${+inputValue} ${inputLabel}`)} to {b(`${+maxInput} ${inputLabel}`)}.
+            You are sending {b(`${+outputValue} ${outputLabel}`)} to {recipientText}.
+            {/*You are selling between {b(`${+inputValue} ${inputLabel}`)} to {b(`${+maxInput} ${inputLabel}`)}.*/}
           </div>
           <div className="send__last-summary-text">
-            {b(`${recipient.slice(0, 6)}...${recipient.slice(-4)}`)} will receive {b(`${+outputValue} ${outputLabel}`)}.
+            {/*{b(`${recipient.slice(0, 6)}...${recipient.slice(-4)}`)} will receive {b(`${+outputValue} ${outputLabel}`)}.*/}
+            It will cost at most {b(`${+maxInput} ${inputLabel}`)} or the transaction will fail.
           </div>
         </div>
       );

src/pages/Swap/index.js

@@ -629,7 +629,7 @@ class Swap extends Component {
             You are selling {b(`${+inputValue} ${inputLabel}`)}.
           </div>
           <div className="send__last-summary-text">
-            You will receive between {b(`${+minOutput} ${outputLabel}`)} and {b(`${+outputValue} ${outputLabel}`)}.
+            You will receive at least {b(`${+minOutput} ${outputLabel}`)} or the transaction will fail.
           </div>
         </div>
       );
@@ -637,10 +637,10 @@ class Swap extends Component {
       description = (
         <div>
           <div>
-            You are selling between {b(`${+inputValue} ${inputLabel}`)} to {b(`${+maxInput} ${inputLabel}`)}.
+            You are buying {b(`${+outputValue} ${outputLabel}`)}.
           </div>
           <div className="send__last-summary-text">
-            You will receive {b(`${+outputValue} ${outputLabel}`)}.
+            It will cost at most {b(`${+maxInput} ${inputLabel}`)} or the transaction will fail.
           </div>
         </div>
       );