output total pool liquidity

* convert everything in the pool to OCEAN, then convert to user currency

src/components/atoms/Price/Conversion.tsx

@@ -68,9 +68,9 @@ export default function Conversion({
   return (
     <span
       className={styleClasses}
-      title="Approximation based on current spot price on Coingecko"
+      title="Approximation based on current OCEAN spot price on Coingecko"
     >
-      ≈ {priceConverted} {currency}
+      ≈ <strong>{priceConverted}</strong> {currency}
     </span>
   )
 }

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

@@ -4,3 +4,7 @@
 .title {
   composes: title from './index.module.css';
 }
+
+.totalLiquidity {
+  composes: totalLiquidity from './index.module.css';
+}

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

@@ -21,7 +21,7 @@ export default function PoolStatistics({
   const { debug } = useUserPreferences()
 
   const totalLiquidityInOcean =
-    Number(totalBalance.ocean) + Number(totalBalance.datatoken) * Number(price)
+    totalBalance.ocean + totalBalance.datatoken * Number(price)
 
   return (
     <div className={styles.statistics}>
@@ -29,8 +29,11 @@ export default function PoolStatistics({
       <Token symbol="OCEAN" balance={`${totalBalance.ocean}`} />
       <Token symbol={dtSymbol} balance={`${totalBalance.datatoken}`} />
       {debug === true && <Token symbol="BPT" balance={totalPoolTokens} />}
+      <Conversion
+        price={`${totalLiquidityInOcean}`}
+        className={styles.totalLiquidity}
+      />
       <Token symbol="% swap fee" balance={swapFee} />
-      <Conversion price={`${totalLiquidityInOcean}`} />
     </div>
   )
 }

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

@@ -32,3 +32,16 @@
   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);
+}
+
+.totalLiquidity strong {
+  font-size: var(--font-size-base);
+  color: var(--brand-grey-dark);
+  line-height: 1;
+}

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

@@ -32,7 +32,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [poolTokens, setPoolTokens] = useState<string>()
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
-  const [userLiquidity, setUserBalance] = useState<Balance>()
+  const [userLiquidity, setUserLiquidity] = useState<Balance>()
   const [swapFee, setSwapFee] = useState<string>()
 
   const [showAdd, setShowAdd] = useState(false)
@@ -40,8 +40,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const [isLoading, setIsLoading] = useState(true)
 
   const hasAddedLiquidity =
-    userLiquidity &&
-    (Number(userLiquidity.ocean) > 0 || Number(userLiquidity.datatoken) > 0)
+    userLiquidity && (userLiquidity.ocean > 0 || userLiquidity.datatoken > 0)
 
   const poolShare =
     price?.ocean &&
@@ -49,6 +48,9 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
     userLiquidity &&
     ((Number(poolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
 
+  const totalUserLiquidityInOcean =
+    userLiquidity?.ocean + userLiquidity?.datatoken * price?.value
+
   useEffect(() => {
     if (!ocean || !accountId || !price || !price.value) return
 
@@ -79,18 +81,17 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
         // calculate user's provided liquidity based on pool tokens
         const userOceanBalance =
-          (Number(poolTokens) / Number(totalPoolTokens)) * Number(price.ocean)
+          (Number(poolTokens) / Number(totalPoolTokens)) * price.ocean
 
         const userDtBalance =
-          (Number(poolTokens) / Number(totalPoolTokens)) *
-          Number(price.datatoken)
+          (Number(poolTokens) / Number(totalPoolTokens)) * price.datatoken
 
         const userLiquidity = {
           ocean: userOceanBalance,
           datatoken: userDtBalance
         }
 
-        setUserBalance(userLiquidity)
+        setUserLiquidity(userLiquidity)
 
         // Get swap fee
         // swapFee is tricky: to get 0.1% you need to convert from 0.001
@@ -155,6 +156,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
               <Token symbol="OCEAN" balance={`${userLiquidity.ocean}`} />
               <Token symbol={dtSymbol} balance={`${userLiquidity.datatoken}`} />
               {debug === true && <Token symbol="BPT" balance={poolTokens} />}
+              <Conversion
+                price={`${totalUserLiquidityInOcean}`}
+                className={styles.totalLiquidity}
+              />
               <Token symbol="% of pool" balance={poolShare} />
             </div>
 

src/components/organisms/AssetContent/index.module.css

@@ -12,8 +12,7 @@
 
 @media (min-width: 60rem) {
   .grid {
-    /* lazy golden ratio */
-    grid-template-columns: 1.618fr minmax(0, 1fr);
+    grid-template-columns: 1.5fr minmax(0, 1fr);
   }
 
   .sticky {

src/components/pages/Home.tsx

@@ -14,7 +14,7 @@ import { useOcean } from '@oceanprotocol/react'
 const queryHighest = {
   page: 1,
   offset: 3,
-  query: { 'price.ocean': [0, 99999] },
+  query: { 'price.type': ['pool'] },
   sort: { 'price.value': 1 }
 }