From 80901b5bb47383e4be10b63bf2fcfe5129b905b9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 12:09:32 +0200
Subject: [PATCH 1/4] new pool layout

---
 .../Pool/PoolStatistics.module.css            |  7 +++-
 .../AssetActions/Pool/PoolStatistics.tsx      | 26 ++++++++----
 .../AssetActions/Pool/Token.module.css        |  4 +-
 .../AssetActions/Pool/index.module.css        | 25 +++++++----
 .../organisms/AssetActions/Pool/index.tsx     | 42 +++++++++++--------
 5 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
index e7935648e..2b8495629 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
@@ -1,4 +1,9 @@
-.statistics {
+.tokeninfo {
+  margin-top: calc(var(--spacer) / 1.5);
+}
+
+.tokens {
+  composes: tokens from './index.module.css';
 }
 
 .title {
diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
index f1d91656e..1e6e6bdf1 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@@ -21,16 +21,24 @@ export default function PoolStatistics({
     totalBalance.ocean + totalBalance.datatoken * Number(price)
 
   return (
-    <div className={styles.statistics}>
+    <div className={styles.tokeninfo}>
       <h3 className={styles.title}>Pool Statistics</h3>
-      <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
-      <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
-      <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
-      <Token symbol="% swap fee" balance={swapFee} noIcon />
-      <Conversion
-        price={`${totalLiquidityInOcean}`}
-        className={styles.totalLiquidity}
-      />
+
+      <div className={styles.tokens}>
+        <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}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/Token.module.css b/src/components/organisms/AssetActions/Pool/Token.module.css
index f0cd685e8..5ed46e562 100644
--- a/src/components/organisms/AssetActions/Pool/Token.module.css
+++ b/src/components/organisms/AssetActions/Pool/Token.module.css
@@ -1,6 +1,6 @@
 .token {
   font-weight: var(--font-weight-bold);
-  margin-bottom: calc(var(--spacer) / 3);
+  margin-bottom: calc(var(--spacer) / 4);
   white-space: nowrap;
 }
 
@@ -17,7 +17,7 @@
   padding: 0.3rem;
   vertical-align: middle;
   margin-right: calc(var(--spacer) / 8);
-  margin-top: -0.3rem;
+  margin-top: -0.2rem;
 }
 
 .icon svg {
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 7f55c3554..7dcd11a99 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -1,12 +1,11 @@
 .dataToken {
-  margin-bottom: var(--spacer);
   padding-bottom: calc(var(--spacer) / 1.5);
   font-size: var(--font-size-large);
   border-bottom: 1px solid var(--brand-grey-lighter);
   margin-left: -2rem;
   margin-right: -2rem;
-  padding-left: var(--spacer);
-  padding-right: var(--spacer);
+  padding-left: calc(var(--spacer) / 1.5);
+  padding-right: calc(var(--spacer) / 1.5);
   text-align: center;
 }
 
@@ -22,25 +21,33 @@
   margin-right: calc(var(--spacer) / 3);
 }
 
-.poolTokens {
+.tokeninfo {
+  background: var(--brand-grey-dimmed);
+  padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
+    var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.tokens {
   display: grid;
-  gap: var(--spacer);
   grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row;
 }
 
 .title {
   font-size: var(--font-size-base);
-  margin-bottom: calc(var(--spacer) / 1.5);
+  margin-bottom: 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) / 3);
-  width: 100%;
-  border-top: 1px solid var(--brand-grey-lighter);
+  min-height: 24px;
 }
 
 .totalLiquidity strong {
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 73902ca06..6f06cf854 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -145,31 +145,39 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             </div>
           </div>
 
-          <div className={styles.poolTokens}>
+          <div className={styles.tokeninfo}>
+            <h3 className={styles.title}>
+              Your Liquidity
+              <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
+            </h3>
+
             <div className={styles.tokens}>
-              <h3 className={styles.title}>
-                Your Liquidity
-                <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
-              </h3>
-              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
-              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
-              <Token symbol="pool shares" balance={poolTokens} noIcon />
-              <Token symbol="% of pool" balance={poolShare} noIcon />
+              <div>
+                <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>
               <Conversion
                 price={`${totalUserLiquidityInOcean}`}
                 className={styles.totalLiquidity}
               />
             </div>
-
-            <PoolStatistics
-              price={`${price.value}`}
-              totalPoolTokens={totalPoolTokens}
-              totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
-              swapFee={swapFee}
-              dtSymbol={dtSymbol}
-            />
           </div>
 
+          <PoolStatistics
+            price={`${price.value}`}
+            totalPoolTokens={totalPoolTokens}
+            totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
+            swapFee={swapFee}
+            dtSymbol={dtSymbol}
+          />
+
           <div className={stylesActions.actions}>
             <Button
               style="primary"

From 51ab425c358f34020a4c73d6d49ec099d4be50f5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 12:28:07 +0200
Subject: [PATCH 2/4] refactor

---
 .../AssetActions/Pool/PoolStatistics.tsx      | 33 +++++++-------
 .../AssetActions/Pool/TokenList.module.css    | 23 ++++++++++
 .../organisms/AssetActions/Pool/TokenList.tsx | 19 ++++++++
 .../AssetActions/Pool/index.module.css        | 20 ---------
 .../organisms/AssetActions/Pool/index.tsx     | 45 +++++++++----------
 5 files changed, 79 insertions(+), 61 deletions(-)
 create mode 100644 src/components/organisms/AssetActions/Pool/TokenList.module.css
 create mode 100644 src/components/organisms/AssetActions/Pool/TokenList.tsx

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
index 1e6e6bdf1..2b5620d97 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
@@ -3,6 +3,7 @@ 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,
@@ -21,24 +22,20 @@ export default function PoolStatistics({
     totalBalance.ocean + totalBalance.datatoken * Number(price)
 
   return (
-    <div className={styles.tokeninfo}>
-      <h3 className={styles.title}>Pool Statistics</h3>
-
-      <div className={styles.tokens}>
-        <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 title="Pool Statistics">
+      <div>
+        <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
+        <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
       </div>
-    </div>
+      <div>
+        <Token symbol="pool shares" balance={totalPoolTokens} noIcon />
+        <Token symbol="% swap fee" balance={swapFee} noIcon />
+      </div>
+
+      <Conversion
+        price={`${totalLiquidityInOcean}`}
+        className={styles.totalLiquidity}
+      />
+    </TokenList>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css
new file mode 100644
index 000000000..d2a06e420
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/TokenList.module.css
@@ -0,0 +1,23 @@
+.tokeninfo {
+  padding-top: calc(var(--spacer) / 1.5);
+}
+
+.tokens {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: row;
+}
+
+.title {
+  font-size: var(--font-size-base);
+  margin-bottom: calc(var(--spacer) / 3);
+}
+
+.highlight {
+  background: var(--brand-grey-dimmed);
+  padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
+    var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.tsx b/src/components/organisms/AssetActions/Pool/TokenList.tsx
new file mode 100644
index 000000000..91acdc066
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/TokenList.tsx
@@ -0,0 +1,19 @@
+import React, { ReactElement, ReactNode } from 'react'
+import styles from './TokenList.module.css'
+
+export default function TokenList({
+  title,
+  children,
+  highlight
+}: {
+  title: string | ReactNode
+  children: ReactNode
+  highlight?: boolean
+}): ReactElement {
+  return (
+    <div className={`${styles.tokeninfo} ${highlight ? styles.highlight : ''}`}>
+      <h3 className={styles.title}>{title}</h3>
+      <div className={styles.tokens}>{children}</div>
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 7dcd11a99..ffc4d0580 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -21,26 +21,6 @@
   margin-right: calc(var(--spacer) / 3);
 }
 
-.tokeninfo {
-  background: var(--brand-grey-dimmed);
-  padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2)
-    var(--spacer);
-  border-bottom: 1px solid var(--brand-grey-lighter);
-  margin-left: -2rem;
-  margin-right: -2rem;
-}
-
-.tokens {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-flow: row;
-}
-
-.title {
-  font-size: var(--font-size-base);
-  margin-bottom: calc(var(--spacer) / 3);
-}
-
 .totalLiquidity {
   composes: token from './Token.module.css';
   margin-bottom: 0;
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 6f06cf854..e68538160 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -13,6 +13,7 @@ import Conversion from '../../../atoms/Price/Conversion'
 import EtherscanLink from '../../../atoms/EtherscanLink'
 import PoolStatistics from './PoolStatistics'
 import Token from './Token'
+import TokenList from './TokenList'
 
 export interface Balance {
   ocean: number
@@ -145,30 +146,28 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             </div>
           </div>
 
-          <div className={styles.tokeninfo}>
-            <h3 className={styles.title}>
-              Your Liquidity
-              <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
-            </h3>
-
-            <div className={styles.tokens}>
-              <div>
-                <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>
-              <Conversion
-                price={`${totalUserLiquidityInOcean}`}
-                className={styles.totalLiquidity}
-              />
+          <TokenList
+            title={
+              <>
+                Your Liquidity
+                <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
+              </>
+            }
+            highlight
+          >
+            <div>
+              <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
+              <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
             </div>
-          </div>
+            <div>
+              <Token symbol="pool shares" balance={poolTokens} noIcon />
+              <Token symbol="% of pool" balance={poolShare} noIcon />
+            </div>
+            <Conversion
+              price={`${totalUserLiquidityInOcean}`}
+              className={styles.totalLiquidity}
+            />
+          </TokenList>
 
           <PoolStatistics
             price={`${price.value}`}

From a629112ebb0489db8a227e565733ace88633813e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 12:34:41 +0200
Subject: [PATCH 3/4] cleanup

---
 .../AssetActions/Pool/PoolStatistics.module.css      | 12 ------------
 .../organisms/AssetActions/Pool/TokenList.module.css |  1 +
 .../organisms/AssetActions/Pool/index.module.css     |  2 +-
 src/components/organisms/AssetActions/Pool/index.tsx | 10 ++++++----
 4 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
index 2b8495629..edf3b9cde 100644
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
+++ b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
@@ -1,15 +1,3 @@
-.tokeninfo {
-  margin-top: calc(var(--spacer) / 1.5);
-}
-
-.tokens {
-  composes: tokens from './index.module.css';
-}
-
-.title {
-  composes: title from './index.module.css';
-}
-
 .totalLiquidity {
   composes: totalLiquidity from './index.module.css';
 }
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css
index d2a06e420..eb94b2a25 100644
--- a/src/components/organisms/AssetActions/Pool/TokenList.module.css
+++ b/src/components/organisms/AssetActions/Pool/TokenList.module.css
@@ -11,6 +11,7 @@
 .title {
   font-size: var(--font-size-base);
   margin-bottom: calc(var(--spacer) / 3);
+  color: var(--color-secondary);
 }
 
 .highlight {
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index ffc4d0580..b886d7e22 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -27,7 +27,7 @@
   font-weight: var(--font-weight-base) !important;
   font-size: var(--font-size-small);
   padding-left: var(--font-size-base);
-  min-height: 24px;
+  padding-top: calc(var(--spacer) / 10);
 }
 
 .totalLiquidity strong {
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index e68538160..0d0dff7c6 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -163,10 +163,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               <Token symbol="pool shares" balance={poolTokens} noIcon />
               <Token symbol="% of pool" balance={poolShare} noIcon />
             </div>
-            <Conversion
-              price={`${totalUserLiquidityInOcean}`}
-              className={styles.totalLiquidity}
-            />
+            {totalUserLiquidityInOcean > 0 && (
+              <Conversion
+                price={`${totalUserLiquidityInOcean}`}
+                className={styles.totalLiquidity}
+              />
+            )}
           </TokenList>
 
           <PoolStatistics

From 53188875c027e8ab5c213fad845ca174214fa7f5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 12 Oct 2020 13:22:59 +0200
Subject: [PATCH 4/4] refactor

---
 .../Pool/PoolStatistics.module.css            |  3 --
 .../AssetActions/Pool/PoolStatistics.tsx      | 41 -------------------
 .../AssetActions/Pool/TokenList.module.css    | 25 ++++++++++-
 .../organisms/AssetActions/Pool/TokenList.tsx | 27 +++++++++++-
 .../AssetActions/Pool/index.module.css        | 15 -------
 .../organisms/AssetActions/Pool/index.tsx     | 40 +++++++++---------
 6 files changed, 69 insertions(+), 82 deletions(-)
 delete mode 100644 src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
 delete mode 100644 src/components/organisms/AssetActions/Pool/PoolStatistics.tsx

diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css b/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
deleted file mode 100644
index edf3b9cde..000000000
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.totalLiquidity {
-  composes: totalLiquidity from './index.module.css';
-}
diff --git a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx b/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
deleted file mode 100644
index 2b5620d97..000000000
--- a/src/components/organisms/AssetActions/Pool/PoolStatistics.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css
index eb94b2a25..da7e29f59 100644
--- a/src/components/organisms/AssetActions/Pool/TokenList.module.css
+++ b/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;
+}
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.tsx b/src/components/organisms/AssetActions/Pool/TokenList.tsx
index 91acdc066..c6ca8fa49 100644
--- a/src/components/organisms/AssetActions/Pool/TokenList.tsx
+++ b/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>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index b886d7e22..dc618def9 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/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;
-}
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 0d0dff7c6..6c17ffad7 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/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="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}
-              />
-            )}
+            <Token symbol="% of pool" balance={poolShare} noIcon />
           </TokenList>
 
-          <PoolStatistics
-            price={`${price.value}`}
-            totalPoolTokens={totalPoolTokens}
-            totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
-            swapFee={swapFee}
+          <TokenList
+            title="Pool Statistics"
+            ocean={`${price.ocean}`}
+            dt={`${price.datatoken}`}
             dtSymbol={dtSymbol}
-          />
+            poolShares={totalPoolTokens}
+            conversion={totalLiquidityInOcean}
+          >
+            <Token symbol="% swap fee" balance={swapFee} noIcon />
+          </TokenList>
 
           <div className={stylesActions.actions}>
             <Button