more data output

src/components/organisms/AssetActions/Trade.module.css

@@ -0,0 +1,5 @@
+.symbol {
+  font-weight: var(--font-weight-base);
+  color: var(--color-secondary);
+  font-size: var(--font-size-base);
+}

src/components/organisms/AssetActions/Trade.tsx

@@ -1,6 +1,8 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
+import { formatCurrency } from '@coingecko/cryptoformat'
+import styles from './Trade.module.css'
 
 interface Balance {
   ocean: string
@@ -13,11 +15,24 @@ export default function Trade({ ddo }: { ddo: DDO }): ReactElement {
   const [numTokens, setNumTokens] = useState()
   const [balance, setBalance] = useState<Balance>()
   const [sharesBalance, setSharesBalance] = useState()
+  const [poolPrice, setPoolPrice] = useState<string>()
+  const [dtPrice, setDtPrice] = useState<string>()
+  const [dtSymbol, setDtSymbol] = useState<string>()
 
   useEffect(() => {
     async function init() {
       try {
         const { poolAddress, poolPrice } = await getBestPool(ddo.dataToken)
+        setPoolPrice(poolPrice)
+
+        const dtSymbol = await ocean.datatokens.getSymbol(
+          ddo.dataToken,
+          accountId
+        )
+        setDtSymbol(dtSymbol)
+
+        const dtPrice = await ocean.pool.getDTPrice(accountId, poolAddress)
+        setDtPrice(dtPrice)
 
         const numTokens = await ocean.pool.getNumTokens(accountId, poolAddress)
         setNumTokens(numTokens)
@@ -46,24 +61,37 @@ export default function Trade({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <>
-      <div>
-        Num Tokens: <br />
-        {numTokens}
-      </div>
-      <div>
-        Reserve: <br />
+      <p>
+        {numTokens} Pooled Tokens: <br />
         {balance && (
           <>
-            OCEAN {balance.ocean}
+            <span className={styles.symbol}>OCEAN</span>{' '}
+            {formatCurrency(Number(balance.ocean), '', 'en', false, true)}
             <br />
-            DT {balance.dt}
+            <span className={styles.symbol}>{dtSymbol}</span> {balance.dt}
           </>
         )}
-      </div>
-      <div>
-        Shares Balance: <br />
-        {sharesBalance}
-      </div>
+      </p>
+      {poolPrice && (
+        <p>
+          Pool Price: <br />
+          <span className={styles.symbol}>OCEAN</span>{' '}
+          {formatCurrency(Number(poolPrice), '', 'en', false, true)}
+        </p>
+      )}
+      {dtPrice && (
+        <p>
+          Data Token Price: <br />
+          <span className={styles.symbol}>OCEAN</span>{' '}
+          {formatCurrency(Number(dtPrice), '', 'en', false, true)}
+        </p>
+      )}
+      {sharesBalance && (
+        <p>
+          Your Pool Shares: <br />
+          {sharesBalance}
+        </p>
+      )}
     </>
   )
 }