start interacting with balancer

src/components/organisms/AssetActions/Trade.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
+
+export default function Trade({ ddo }: { ddo: DDO }): ReactElement {
+  const { ocean, accountId } = useOcean()
+  const [finalTokens, setFinalTokens] = useState()
+
+  const poolAddress = '0xunknown' // How to get this?
+
+  useEffect(() => {
+    async function init() {
+      const finalTokens = await ocean.pool.getFinalTokens(
+        accountId,
+        poolAddress
+      )
+      setFinalTokens(finalTokens)
+    }
+    init()
+  }, [])
+
+  return <div>Final Tokens: {finalTokens}</div>
+}

src/components/organisms/AssetActions/index.tsx

@@ -7,6 +7,7 @@ import { DDO } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
 import { useOcean } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
+import Trade from './Trade'
 
 export default function AssetActions({
   metadata,
@@ -55,7 +56,7 @@ export default function AssetActions({
     },
     {
       title: 'Trade',
-      content: 'Trade Me'
+      content: <Trade ddo={ddo} />
     }
   ]