output pool shares by default

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>

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>
   )
 }

src/components/organisms/AssetActions/Pool/Token.module.css

@@ -30,7 +30,6 @@
   fill: var(--brand-violet);
 }
 
-.icon[class*='%'],
-.icon[class*='BPT'] {
+.noIcon {
   opacity: 0;
 }

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 />

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 {

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