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] 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}`}