Merge pull request #103 from oceanprotocol/feature/pool-layout

new pool layout

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

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

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

@@ -1,36 +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'
-
-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 (
-    <div className={styles.statistics}>
-      <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>
-  )
-}

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 {

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

@@ -0,0 +1,47 @@
+.tokeninfo {
+  padding-top: calc(var(--spacer) / 1.5);
+}
+
+.tokens {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+/* 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 {
+  font-size: var(--font-size-base);
+  margin-bottom: calc(var(--spacer) / 3);
+  color: var(--color-secondary);
+}
+
+.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;
+}
+
+.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

@@ -0,0 +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}>
+        <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

@@ -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;
 }
 
@@ -21,30 +20,3 @@
   margin-left: calc(var(--spacer) / 3);
   margin-right: calc(var(--spacer) / 3);
 }
-
-.poolTokens {
-  display: grid;
-  gap: var(--spacer);
-  grid-template-columns: 1fr 1fr;
-}
-
-.title {
-  font-size: var(--font-size-base);
-  margin-bottom: calc(var(--spacer) / 1.5);
-}
-
-.totalLiquidity {
-  composes: token from './Token.module.css';
-  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 {
-  font-size: var(--font-size-base);
-  color: var(--brand-grey-dark);
-  line-height: 1;
-}

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

@@ -11,8 +11,8 @@ 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'
 
 export interface Balance {
   ocean: number
@@ -37,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)
 
@@ -49,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
 
@@ -145,30 +149,33 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             </div>
           </div>
 
-          <div className={styles.poolTokens}>
-            <div className={styles.tokens}>
-              <h3 className={styles.title}>
+          <TokenList
+            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 />
-              <Conversion
-                price={`${totalUserLiquidityInOcean}`}
-                className={styles.totalLiquidity}
-              />
-            </div>
+              </>
+            }
+            ocean={`${userLiquidity.ocean}`}
+            dt={`${userLiquidity.datatoken}`}
+            dtSymbol={dtSymbol}
+            poolShares={poolTokens}
+            conversion={totalUserLiquidityInOcean}
+            highlight
+          >
+            <Token symbol="% of pool" balance={poolShare} noIcon />
+          </TokenList>
 
-            <PoolStatistics
-              price={`${price.value}`}
-              totalPoolTokens={totalPoolTokens}
-              totalBalance={{ ocean: price.ocean, datatoken: price.datatoken }}
-              swapFee={swapFee}
-              dtSymbol={dtSymbol}
-            />
-          </div>
+          <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