From 753b5c2c9c30096a8d2a81c63b497f53be42f4d7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 11:41:05 +0200
Subject: [PATCH] output pool shares by default

---
 src/components/organisms/AssetActions/Pool/Add.tsx        | 4 +---
 .../organisms/AssetActions/Pool/PoolStatistics.tsx        | 7 ++-----
 .../organisms/AssetActions/Pool/Token.module.css          | 3 +--
 src/components/organisms/AssetActions/Pool/Token.tsx      | 8 ++++++--
 .../organisms/AssetActions/Pool/index.module.css          | 3 +++
 src/components/organisms/AssetActions/Pool/index.tsx      | 6 ++----
 6 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 970edcc20..c8b3fdbc7 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -9,7 +9,6 @@ import Token from './Token'
 import { Balance } from './'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 
@@ -30,7 +29,6 @@ export default function Add({
   dtSymbol: string
   dtAddress: string
 }): ReactElement {
-  const { debug } = useUserPreferences()
   const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState('')
   const [txId, setTxId] = useState<string>('')
@@ -141,7 +139,7 @@ export default function Add({
       <div className={styles.output}>
         <div>
           <p>You will receive</p>
-          {debug === true && <Token symbol="BPT" balance={newPoolTokens} />}
+          <Token symbol="pool shares" balance={newPoolTokens} />
           <Token symbol="% of pool" balance={newPoolShare} />
         </div>
         <div>
diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
index d400c650a..f1d91656e 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@@ -1,4 +1,3 @@
-import { useUserPreferences } from '../../../../providers/UserPreferences'
 import React, { ReactElement } from 'react'
 import { Balance } from '.'
 import styles from './PoolStatistics.module.css'
@@ -18,8 +17,6 @@ export default function PoolStatistics({
   totalPoolTokens: string
   swapFee: string
 }): ReactElement {
-  const { debug } = useUserPreferences()
-
   const totalLiquidityInOcean =
     totalBalance.ocean + totalBalance.datatoken * Number(price)
 
@@ -28,12 +25,12 @@ export default function PoolStatistics({
       <h3 className={styles.title}>Pool Statistics</h3>
       <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
       <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
-      {debug === true && <Token symbol="BPT" balance={totalPoolTokens} />}
+      <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
+      <Token symbol="% swap fee" balance={swapFee} noIcon />
       <Conversion
         price={`${totalLiquidityInOcean}`}
         className={styles.totalLiquidity}
       />
-      <Token symbol="% swap fee" balance={swapFee} />
     </div>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/Token.module.css b/src/components/organisms/AssetActions/Pool/Token.module.css
index 143295bd8..f0cd685e8 100644
--- a/src/components/organisms/AssetActions/Pool/Token.module.css
+++ b/src/components/organisms/AssetActions/Pool/Token.module.css
@@ -30,7 +30,6 @@
   fill: var(--brand-violet);
 }
 
-.icon[class*='%'],
-.icon[class*='BPT'] {
+.noIcon {
   opacity: 0;
 }
diff --git a/src/components/organisms/AssetActions/Pool/Token.tsx b/src/components/organisms/AssetActions/Pool/Token.tsx
index 920e79acb..6ab23cf68 100644
--- a/src/components/organisms/AssetActions/Pool/Token.tsx
+++ b/src/components/organisms/AssetActions/Pool/Token.tsx
@@ -5,14 +5,18 @@ import PriceUnit from '../../../atoms/Price/PriceUnit'
 
 export default function Token({
   symbol,
-  balance
+  balance,
+  noIcon
 }: {
   symbol: string
   balance: string
+  noIcon?: boolean
 }): ReactElement {
   return (
     <div className={styles.token}>
-      <figure className={`${styles.icon} ${symbol}`}>
+      <figure
+        className={`${styles.icon} ${symbol} ${noIcon ? styles.noIcon : ''}`}
+      >
         <Logo />
       </figure>
       <PriceUnit price={balance} symbol={symbol} small />
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 7bcfebba6..7f55c3554 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -38,6 +38,9 @@
   font-weight: var(--font-weight-base) !important;
   font-size: var(--font-size-small);
   padding-left: var(--font-size-base);
+  padding-top: calc(var(--spacer) / 3);
+  width: 100%;
+  border-top: 1px solid var(--brand-grey-lighter);
 }
 
 .totalLiquidity strong {
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 6338a2480..73902ca06 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -3,7 +3,6 @@ import { useOcean, useMetadata } from '@oceanprotocol/react'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import styles from './index.module.css'
 import stylesActions from './Actions.module.css'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Loader from '../../../atoms/Loader'
 import Button from '../../../atoms/Button'
@@ -25,7 +24,6 @@ export interface Balance {
 */
 
 export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
-  const { debug } = useUserPreferences()
   const { ocean, accountId } = useOcean()
   const { price } = useMetadata(ddo)
 
@@ -155,12 +153,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               </h3>
               <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
               <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
-              {debug === true && <Token symbol="BPT" balance={poolTokens} />}
+              <Token symbol="pool shares" balance={poolTokens} noIcon />
+              <Token symbol="% of pool" balance={poolShare} noIcon />
               <Conversion
                 price={`${totalUserLiquidityInOcean}`}
                 className={styles.totalLiquidity}
               />
-              <Token symbol="% of pool" balance={poolShare} />
             </div>
 
             <PoolStatistics