refactor

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

@@ -1,3 +0,0 @@
-.totalLiquidity {
-  composes: totalLiquidity from './index.module.css';
-}

src/components/organisms/AssetActions/Pool/PoolStatistics.tsx

@@ -1,41 +0,0 @@
-import React, { ReactElement } from 'react'
-import { Balance } from '.'
-import styles from './PoolStatistics.module.css'
-import Token from './Token'
-import Conversion from '../../../atoms/Price/Conversion'
-import TokenList from './TokenList'
-
-export default function PoolStatistics({
-  price,
-  dtSymbol,
-  totalBalance,
-  totalPoolTokens,
-  swapFee
-}: {
-  price: string
-  dtSymbol: string
-  totalBalance: Balance
-  totalPoolTokens: string
-  swapFee: string
-}): ReactElement {
-  const totalLiquidityInOcean =
-    totalBalance.ocean + totalBalance.datatoken * Number(price)
-
-  return (
-    <TokenList title="Pool Statistics">
-      <div>
-        <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
-        <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
-      </div>
-      <div>
-        <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
-        <Token symbol="% swap fee" balance={swapFee} noIcon />
-      </div>
-
-      <Conversion
-        price={`${totalLiquidityInOcean}`}
-        className={styles.totalLiquidity}
-      />
-    </TokenList>
-  )
-}

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

@@ -5,7 +5,15 @@
 .tokens {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-auto-flow: row;
+}
+
+/* visually tweak the order so tokens are underneath each other */
+.tokens > *:nth-child(1) {
+  grid-row: 1 / 2;
+}
+
+.tokens > *:nth-child(2) {
+  grid-row: 2 / 2;
 }
 
 .title {
@@ -22,3 +30,18 @@
   margin-left: -2rem;
   margin-right: -2rem;
 }
+
+.totalLiquidity {
+  composes: token from './Token.module.css';
+  margin-bottom: 0;
+  font-weight: var(--font-weight-base) !important;
+  font-size: var(--font-size-small);
+  padding-left: var(--font-size-base);
+  padding-top: calc(var(--spacer) / 10);
+}
+
+.totalLiquidity strong {
+  font-size: var(--font-size-base);
+  color: var(--brand-grey-dark);
+  line-height: 1;
+}

src/components/organisms/AssetActions/Pool/TokenList.tsx

@@ -1,19 +1,44 @@
+import Conversion from '../../../atoms/Price/Conversion'
 import React, { ReactElement, ReactNode } from 'react'
+import Token from './Token'
 import styles from './TokenList.module.css'
 
 export default function TokenList({
   title,
   children,
+  ocean,
+  dt,
+  dtSymbol,
+  poolShares,
+  conversion,
   highlight
 }: {
   title: string | ReactNode
   children: ReactNode
+  ocean: string
+  dt: string
+  dtSymbol: string
+  poolShares: string
+  conversion: number
   highlight?: boolean
 }): ReactElement {
   return (
     <div className={`${styles.tokeninfo} ${highlight ? styles.highlight : ''}`}>
       <h3 className={styles.title}>{title}</h3>
-      <div className={styles.tokens}>{children}</div>
+      <div className={styles.tokens}>
+        <Token symbol="OCEAN" balance={ocean} />
+        <Token symbol={dtSymbol} balance={dt} />
+        <Token symbol="pool shares" balance={poolShares} noIcon />
+
+        {children}
+
+        {conversion > 0 && (
+          <Conversion
+            price={`${conversion}`}
+            className={styles.totalLiquidity}
+          />
+        )}
+      </div>
     </div>
   )
 }

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

@@ -20,18 +20,3 @@
   margin-left: calc(var(--spacer) / 3);
   margin-right: calc(var(--spacer) / 3);
 }
-
-.totalLiquidity {
-  composes: token from './Token.module.css';
-  margin-bottom: 0;
-  font-weight: var(--font-weight-base) !important;
-  font-size: var(--font-size-small);
-  padding-left: var(--font-size-base);
-  padding-top: calc(var(--spacer) / 10);
-}
-
-.totalLiquidity strong {
-  font-size: var(--font-size-base);
-  color: var(--brand-grey-dark);
-  line-height: 1;
-}

src/components/organisms/AssetActions/Pool/index.tsx

@@ -11,7 +11,6 @@ import Remove from './Remove'
 import Tooltip from '../../../atoms/Tooltip'
 import Conversion from '../../../atoms/Price/Conversion'
 import EtherscanLink from '../../../atoms/EtherscanLink'
-import PoolStatistics from './PoolStatistics'
 import Token from './Token'
 import TokenList from './TokenList'
 
@@ -38,6 +37,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [showRemove, setShowRemove] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
 
+  // TODO: put all these variables behind some useEffect
+  // to prevent unneccessary updating on every render
   const hasAddedLiquidity =
     userLiquidity && (userLiquidity.ocean > 0 || userLiquidity.datatoken > 0)
 
@@ -50,6 +51,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const totalUserLiquidityInOcean =
     userLiquidity?.ocean + userLiquidity?.datatoken * price?.value
 
+  const totalLiquidityInOcean = price?.ocean + price?.datatoken * price?.value
+
   useEffect(() => {
     if (!ocean || !accountId || !price || !price.value) return
 
@@ -153,31 +156,26 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
                 <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
               </>
             }
+            ocean={`${userLiquidity.ocean}`}
+            dt={`${userLiquidity.datatoken}`}
+            dtSymbol={dtSymbol}
+            poolShares={poolTokens}
+            conversion={totalUserLiquidityInOcean}
             highlight
           >
-            <div>
+            <Token symbol="% of pool" balance={poolShare} noIcon />
-              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
-              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
-            </div>
-            <div>
-              <Token symbol="pool shares" balance={poolTokens} noIcon />
-              <Token symbol="% of pool" balance={poolShare} noIcon />
-            </div>
-            {totalUserLiquidityInOcean > 0 && (
-              <Conversion
-                price={`${totalUserLiquidityInOcean}`}
-                className={styles.totalLiquidity}
-              />
-            )}
           </TokenList>
 
-          <PoolStatistics
+          <TokenList
-            price={`${price.value}`}
+            title="Pool Statistics"
-            totalPoolTokens={totalPoolTokens}
+            ocean={`${price.ocean}`}
-            totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
+            dt={`${price.datatoken}`}
-            swapFee={swapFee}
             dtSymbol={dtSymbol}
-          />
+            poolShares={totalPoolTokens}
+            conversion={totalLiquidityInOcean}
+          >
+            <Token symbol="% swap fee" balance={swapFee} noIcon />
+          </TokenList>
 
           <div className={stylesActions.actions}>
             <Button