Pool shares list (#163)

* refactor

* pool shares component

* bump ocean.js

* output shares and prices

* styling

* refactor

* bump ocean.js

* bump react hooks

package-lock.json

@@ -3850,9 +3850,9 @@
       "integrity": "sha512-p0oOHXr60hXZuLNsQ/PsOQtCfia79thm7MjPxTrnnBvD+csJoHzARYMB0IFj/KTw6U5vLXODgjJAn8x6QksLwg=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.9.6",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.6.tgz",
-      "integrity": "sha512-mZWF0SnNfQ/NGdAkcvXXCrhDxTr/5m2/N6/vpt4a3S1hrGu8iRLOMa7G1ue5yXoLjyGigKEPhOZ6L8V3bZseVQ==",
+      "version": "0.9.8",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.9.8.tgz",
+      "integrity": "sha512-jV7lobTXskqqmv23Vl3iQ4SZk+0FVFxLSVkXniOKOOFP0pJ0vllSNnM+wHkG4inF3HWHHyeh8AyFNTSxOUuirA==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.7",
@@ -3867,11 +3867,11 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.13.tgz",
-      "integrity": "sha512-plpZYtytZ2XTRJxcYGZcP3tzI32JG6xh9s4L1BU8mBTjFfS1lOLdXRFHTI90wVs4lF7EAMjp2TVoyIMwVy5UJg==",
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.14.tgz",
+      "integrity": "sha512-KezQQHfm745+h3VDEnhBJ4wQErpf0dR+en6l73cxAe7G6koSHQh4SbKI+avq5SlGwEcBP5HEi5SXZcNVKueMvQ==",
       "requires": {
-        "@oceanprotocol/lib": "^0.9.6",
+        "@oceanprotocol/lib": "^0.9.8",
         "axios": "^0.21.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",

package.json

@@ -22,8 +22,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.9.6",
-    "@oceanprotocol/react": "^0.3.13",
+    "@oceanprotocol/lib": "^0.9.8",
+    "@oceanprotocol/react": "^0.3.14",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",

src/components/molecules/AssetTitle.module.css

@@ -8,3 +8,8 @@
   font-size: var(--font-size-base);
   color: var(--brand-black);
 }
+
+.title a:hover,
+.title a:focus {
+  color: var(--brand-pink);
+}

src/components/molecules/AssetTitle.tsx

@@ -0,0 +1,13 @@
+import { useMetadata } from '@oceanprotocol/react'
+import { Link } from 'gatsby'
+import React, { ReactElement } from 'react'
+import styles from './AssetTitle.module.css'
+
+export default function AssetTitle({ did }: { did: string }): ReactElement {
+  const { title } = useMetadata(did)
+  return (
+    <h3 className={styles.title}>
+      <Link to={`/asset/${did}`}>{title || did}</Link>
+    </h3>
+  )
+}

src/components/molecules/Bookmarks.tsx

@@ -3,11 +3,10 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import Table from '../atoms/Table'
 import { DDO, Logger, MetadataCache } from '@oceanprotocol/lib'
 import { useOcean } from '@oceanprotocol/react'
-import { Link } from 'gatsby'
-import styles from './Bookmarks.module.css'
 import Price from '../atoms/Price'
 import Tooltip from '../atoms/Tooltip'
 import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
+import AssetTitle from './AssetTitle'
 
 async function getAssetsBookmarked(
   bookmarks: string[],
@@ -28,12 +27,7 @@ const columns = [
   {
     name: 'Data Set',
     selector: function getAssetRow(row: DDO) {
-      const { attributes } = row.findServiceByType('metadata')
-      return (
-        <h3 className={styles.title}>
-          <Link to={`/asset/${row.id}`}>{attributes.main.name}</Link>
-        </h3>
-      )
+      return <AssetTitle did={row.id} />
     },
     grow: 2
   },

src/components/organisms/AssetQueryList.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import AssetList from './AssetList'
+import AssetQueryList from './AssetQueryList'
 import asset from '../../../tests/unit/__fixtures__/ddo'
 
 const queryResult = {
@@ -16,4 +16,4 @@ export default {
   title: 'Organisms/Asset List'
 }
 
-export const Default = () => <AssetList queryResult={queryResult} />
+export const Default = () => <AssetQueryList queryResult={queryResult} />

src/components/organisms/AssetQueryList.tsx

@@ -4,15 +4,15 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
 import { useLocation, useNavigate } from '@reach/router'
 import Pagination from '../molecules/Pagination'
 import { updateQueryStringParameter } from '../../utils'
-import styles from './AssetList.module.css'
+import styles from './AssetQueryList.module.css'
 import { MetadataMarket } from '../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 
-declare type AssetListProps = {
+declare type AssetQueryListProps = {
   queryResult: QueryResult
 }
 
-const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
+const AssetQueryList: React.FC<AssetQueryListProps> = ({ queryResult }) => {
   const location = useLocation()
   const navigate = useNavigate()
 
@@ -74,4 +74,4 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
   )
 }
 
-export default AssetList
+export default AssetQueryList

src/components/pages/History/PoolShares.module.css

@@ -0,0 +1,13 @@
+.totalLiquidity {
+  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/pages/History/PoolShares.tsx

@@ -0,0 +1,85 @@
+import { useMetadata, useOcean } from '@oceanprotocol/react'
+import React, { ReactElement, useEffect, useState } from 'react'
+import Table from '../../atoms/Table'
+import { DDO, Logger, MetadataCache } from '@oceanprotocol/lib'
+import PriceUnit from '../../atoms/Price/PriceUnit'
+import Conversion from '../../atoms/Price/Conversion'
+import styles from './PoolShares.module.css'
+import AssetTitle from '../../molecules/AssetTitle'
+
+interface Asset {
+  ddo: DDO
+  shares: string
+}
+
+function TotalLiquidity({ ddo }: { ddo: DDO }): ReactElement {
+  const { price } = useMetadata(ddo)
+  const totalLiquidityInOcean = price?.ocean + price?.datatoken * price?.value
+
+  return (
+    <Conversion
+      price={`${totalLiquidityInOcean}`}
+      className={styles.totalLiquidity}
+    />
+  )
+}
+
+const columns = [
+  {
+    name: 'Data Set',
+    selector: function getAssetRow(row: Asset) {
+      const did = row.ddo.id
+      return <AssetTitle did={did} />
+    },
+    grow: 2
+  },
+  {
+    name: 'Datatoken',
+    selector: 'ddo.dataTokenInfo.symbol'
+  },
+  {
+    name: 'Your Pool Shares',
+    selector: function getAssetRow(row: Asset) {
+      return <PriceUnit price={row.shares} symbol="pool shares" small />
+    }
+  },
+  {
+    name: 'Total Pool Liquidity',
+    selector: function getAssetRow(row: Asset) {
+      return <TotalLiquidity ddo={row.ddo} />
+    }
+  }
+]
+
+export default function PoolShares(): ReactElement {
+  const { ocean, accountId, config } = useOcean()
+  const [assets, setAssets] = useState<Asset[]>()
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    async function getAssets() {
+      if (!ocean || !accountId) return
+      setIsLoading(true)
+
+      try {
+        const pools = await ocean.pool.getPoolSharesByAddress(accountId)
+        const metadataCache = new MetadataCache(config.metadataCacheUri, Logger)
+        const result: Asset[] = []
+
+        for (const pool of pools) {
+          const ddo = await metadataCache.retrieveDDO(pool.did)
+          ddo && result.push({ ddo, shares: pool.shares })
+        }
+
+        setAssets(result)
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    getAssets()
+  }, [ocean, accountId, config.metadataCacheUri])
+
+  return <Table columns={columns} data={assets} isLoading={isLoading} />
+}

src/components/pages/History/PoolTransactions.tsx

@@ -1,20 +1,10 @@
 import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool'
-import { useMetadata, useOcean } from '@oceanprotocol/react'
-import { Link } from 'gatsby'
+import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
-import Dotdotdot from 'react-dotdotdot'
 import Table from '../../atoms/Table'
-
-function AssetTitle({ did }: { did: string }): ReactElement {
-  const { title } = useMetadata(did)
-  return (
-    <Dotdotdot clamp={2}>
-      <Link to={`/asset/${did}`}>{title || did}</Link>
-    </Dotdotdot>
-  )
-}
+import AssetTitle from '../../molecules/AssetTitle'
 
 function Title({ row }: { row: PoolTransaction }) {
   const { ocean, networkId } = useOcean()

src/components/pages/History/PublishedList.tsx

@@ -3,7 +3,7 @@ import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/Metadata
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Loader from '../../atoms/Loader'
-import AssetList from '../../organisms/AssetList'
+import AssetQueryList from '../../organisms/AssetQueryList'
 
 export default function PublishedList(): ReactElement {
   const { ocean, status, accountId } = useOcean()
@@ -30,7 +30,7 @@ export default function PublishedList(): ReactElement {
   return isLoading ? (
     <Loader />
   ) : accountId && ocean ? (
-    <AssetList queryResult={queryResult} />
+    <AssetQueryList queryResult={queryResult} />
   ) : (
     <div>Connect your wallet to see your published data sets.</div>
   )

src/components/pages/History/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react'
 import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
+import PoolShares from './PoolShares'
 import PoolTransactions from './PoolTransactions'
 import PublishedList from './PublishedList'
 
@@ -9,6 +10,10 @@ const sections = [
     title: 'Published',
     component: <PublishedList />
   },
+  {
+    title: 'Pool Shares',
+    component: <PoolShares />
+  },
   {
     title: 'Pool Transactions',
     component: <PoolTransactions />

src/components/pages/Home.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import SearchBar from '../molecules/SearchBar'
 import styles from './Home.module.css'
 import { MetadataCache, Logger } from '@oceanprotocol/lib'
-import AssetList from '../organisms/AssetList'
+import AssetQueryList from '../organisms/AssetQueryList'
 import {
   QueryResult,
   SearchQuery
@@ -95,7 +95,9 @@ export default function HomePage(): ReactElement {
         {loading ? (
           <Loader />
         ) : (
-          queryResultHighest && <AssetList queryResult={queryResultHighest} />
+          queryResultHighest && (
+            <AssetQueryList queryResult={queryResultHighest} />
+          )
         )}
       </section>
 
@@ -105,7 +107,7 @@ export default function HomePage(): ReactElement {
           <Loader />
         ) : (
           queryResultPoolsLatest && (
-            <AssetList queryResult={queryResultPoolsLatest} />
+            <AssetQueryList queryResult={queryResultPoolsLatest} />
           )
         )}
       </section>
@@ -115,7 +117,9 @@ export default function HomePage(): ReactElement {
         {loading ? (
           <Loader />
         ) : (
-          queryResultLatest && <AssetList queryResult={queryResultLatest} />
+          queryResultLatest && (
+            <AssetQueryList queryResult={queryResultLatest} />
+          )
         )}
         {queryResultLatest?.results.length === 9 && (
           <Button style="text" to="/search">

src/components/templates/Search/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import SearchBar from '../../molecules/SearchBar'
-import AssetList from '../../organisms/AssetList'
+import AssetQueryList from '../../organisms/AssetQueryList'
 import styles from './index.module.css'
 import queryString from 'query-string'
 import { getResults } from './utils'
@@ -36,7 +36,7 @@ export default function SearchPage({
       </div>
 
       <div className={styles.results}>
-        {loading ? <Loader /> : <AssetList queryResult={queryResult} />}
+        {loading ? <Loader /> : <AssetQueryList queryResult={queryResult} />}
       </div>
     </section>
   )