output weights in pool statistics (#218)

* output weights in pool statistics

* switch to more simple output

* output weights only when present

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

@@ -23,15 +23,6 @@
   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 {
   composes: title from './index.module.css';
 }

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

@@ -26,12 +26,9 @@ export default function TokenList({
     <div className={`${styles.tokenlist} ${highlight ? styles.highlight : ''}`}>
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.tokens}>
+        <div>
           <Token symbol="OCEAN" balance={ocean} />
           <Token symbol={dtSymbol} balance={dt} />
-        <Token symbol="pool shares" balance={poolShares} noIcon />
-
-        {children}
-
           {conversion > 0 && (
             <Conversion
               price={`${conversion}`}
@@ -39,6 +36,13 @@ export default function TokenList({
             />
           )}
         </div>
+
+        <div>
+          <Token symbol="pool shares" balance={poolShares} noIcon />
+
+          {children}
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -31,6 +31,14 @@
   color: var(--color-secondary);
 }
 
+.titleInfo {
+  font-size: var(--font-size-mini);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-base);
+  display: inline-block;
+  margin-left: 0.3rem;
+}
+
 .update {
   composes: container;
   font-size: var(--font-size-mini);

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

@@ -12,7 +12,6 @@ import EtherscanLink from '../../../atoms/EtherscanLink'
 import Token from './Token'
 import TokenList from './TokenList'
 import { graphql, useStaticQuery } from 'gatsby'
-import PoolTransactions from '../../../molecules/PoolTransactions'
 import Transactions from './Transactions'
 
 export interface Balance {
@@ -53,6 +52,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
   const [userLiquidity, setUserLiquidity] = useState<Balance>()
   const [swapFee, setSwapFee] = useState<string>()
+  const [weightOcean, setWeightOcean] = useState<string>()
+  const [weightDt, setWeightDt] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
   const [showRemove, setShowRemove] = useState(false)
@@ -159,10 +160,19 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             2
           )
         setCreatorPoolShare(creatorPoolShare)
+
         // Get swap fee
         // swapFee is tricky: to get 0.1% you need to convert from 0.001
         const swapFee = await ocean.pool.getSwapFee(price.address)
         setSwapFee(`${Number(swapFee) * 100}`)
+
+        // Get weights
+        const weightDt = await ocean.pool.getDenormalizedWeight(
+          price.address,
+          ddo.dataToken
+        )
+        setWeightDt(`${Number(weightDt) * 10}`)
+        setWeightOcean(`${100 - Number(weightDt) * 10}`)
       } catch (error) {
         Logger.error(error.message)
       }
@@ -172,7 +182,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
     // Re-fetch price periodically, triggering re-calculation of everything
     const interval = setInterval(() => refreshPrice(), refreshInterval)
     return () => clearInterval(interval)
-  }, [ocean, accountId, price, ddo, refreshPool])
+  }, [ocean, accountId, price, ddo, refreshPool, owner])
 
   const refreshInfo = async () => {
     setRefreshPool(!refreshPool)
@@ -252,7 +262,19 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           </TokenList>
 
           <TokenList
-            title="Pool Statistics"
+            title={
+              <>
+                Pool Statistics
+                {weightDt && (
+                  <span
+                    className={styles.titleInfo}
+                    title={`Weight of ${weightOcean}% OCEAN & ${weightDt}% ${dtSymbol}`}
+                  >
+                    {weightOcean}/{weightDt}
+                  </span>
+                )}
+              </>
+            }
             ocean={`${price?.ocean}`}
             dt={`${price?.datatoken}`}
             dtSymbol={dtSymbol}