Pool tx history (#307)

* graphql

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* ignore generated

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* delete generated

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix travis

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix travis

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix fetch

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix travis

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix fetch

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* update readme

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* pool creator liquidit& statistics

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* graph with the graph

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* cleanup

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix query

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* update poll interval

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* update graph url

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* ocean bump

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* run apollo codegen before starting gatsby

* put back graph loading state

* typing fix

* graph tweak, add error state

* readme update

* remove unused functions, move graph provider

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix package-lock

* fix graph when switching tabs

* generate apollo files into one folder

* fix loading

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* graph query

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* tx query

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix titles

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix text issues

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix query

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* local pagination

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* return refreshInterval to 10 sec

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* add

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* fix data set column

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

package.json

@@ -87,7 +87,8 @@
     "slugify": "^1.4.6",
     "swr": "^0.3.11",
     "use-dark-mode": "^2.3.1",
-    "yup": "^0.32.8"
+    "web3": "^1.3.1",
+    "yup": "^0.32.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/components/App.tsx

@@ -15,6 +15,7 @@ import {
   NormalizedCacheObject
 } from '@apollo/client'
 import fetch from 'cross-fetch'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 const contentQuery = graphql`
   query AppQuery {
     purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
@@ -54,7 +55,7 @@ export default function App({
     const newClient = new ApolloClient({
       link: new HttpLink({
         uri: `${
-          (config as any).subgraphUri
+          (config as ConfigHelperConfig).subgraphUri
         }/subgraphs/name/oceanprotocol/ocean-subgraph`,
         fetch
       }),

src/components/molecules/AssetListTitle.tsx

@@ -19,8 +19,7 @@ export default function AssetListTitle({
   const [assetTitle, setAssetTitle] = useState<string>(title)
 
   useEffect(() => {
-    if (assetTitle || !config?.metadataCacheUri) return
+    if (title || !config?.metadataCacheUri) return
-
     if (ddo) {
       const { attributes } = ddo.findServiceByType('metadata')
       setAssetTitle(attributes.main.name)
@@ -31,6 +30,8 @@ export default function AssetListTitle({
 
     async function getDDO() {
       const ddo = await retrieveDDO(did, config.metadataCacheUri, source.token)
+
+      if (!ddo) return
       const { attributes } = ddo.findServiceByType('metadata')
       setAssetTitle(attributes.main.name)
     }
@@ -38,9 +39,10 @@ export default function AssetListTitle({
     !ddo && did && getDDO()
 
     return () => {
+      console.log('canceled?')
       source.cancel()
     }
-  }, [assetTitle, config?.metadataCacheUri, ddo, did])
+  }, [assetTitle, config?.metadataCacheUri, ddo, did, title])
 
   return (
     <h3 className={styles.title}>

src/components/molecules/PoolTransactions.module.css

@@ -1,3 +1,7 @@
 .time {
   color: var(--color-secondary);
 }
+
+.titleText {
+  white-space: pre;
+}

src/components/molecules/PoolTransactions.tsx

@@ -1,4 +1,3 @@
-import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool'
 import { useOcean } from '@oceanprotocol/react'
 import React, { ReactElement, useEffect, useState } from 'react'
 import EtherscanLink from '../atoms/EtherscanLink'
@@ -9,41 +8,61 @@ import styles from './PoolTransactions.module.css'
 import { useUserPreferences } from '../../providers/UserPreferences'
 import { Ocean } from '@oceanprotocol/lib'
 import { formatPrice } from '../atoms/Price/PriceUnit'
-import { gql } from '@apollo/client'
+import { gql, useQuery } from '@apollo/client'
+import {
+  TransactionHistory,
+  TransactionHistoryPoolTransactions
+} from '../../@types/apollo/TransactionHistory'
 
-const txHistoryQuery = gql`
+import web3 from 'web3'
-  query Pool($id: ID!, $user: String!) {
+
-    pool(id: $id) {
+const txHistoryQueryByPool = gql`
-      transactions(orderBy: timestamp, where: { userAddressStr: $user }) {
+  query TransactionHistoryByPool($user: String, $pool: String) {
+    poolTransactions(
+      orderBy: timestamp
+      orderDirection: desc
+      where: { userAddress: $user, poolAddress: $pool }
+      first: 1000
+    ) {
       tx
-        timestamp
-        spotPrice
       event
-        sharesTransferAmount
+      timestamp
+      poolAddress {
+        datatokenAddress
+      }
       tokens {
-          type
         value
+        type
         tokenAddress
-          poolToken {
-            tokenId {
-              symbol
-              name
-            }
-            tokenAddress
-          }
-        }
       }
     }
   }
 `
-
+const txHistoryQuery = gql`
-async function getSymbol(
+  query TransactionHistory($user: String) {
-  ocean: Ocean,
+    poolTransactions(
-  tokenAddress: string,
+      orderBy: timestamp
-  oceanTokenAddress: string
+      orderDirection: desc
+      where: { userAddress: $user }
+      first: 1000
     ) {
+      tx
+      event
+      timestamp
+      poolAddress {
+        datatokenAddress
+      }
+      tokens {
+        value
+        type
+        tokenAddress
+      }
+    }
+  }
+`
+async function getSymbol(ocean: Ocean, tokenAddress: string) {
   const symbol =
-    oceanTokenAddress === tokenAddress
+    ocean.pool.oceanAddress.toLowerCase() === tokenAddress.toLowerCase()
       ? 'OCEAN'
       : await ocean.datatokens.getSymbol(tokenAddress)
 
@@ -52,52 +71,81 @@ async function getSymbol(
 
 async function getTitle(
   ocean: Ocean,
-  row: PoolTransaction,
+  row: TransactionHistoryPoolTransactions,
-  locale: string,
+  locale: string
-  oceanTokenAddress: string
 ) {
-  const addRemoveSymbol = await getSymbol(
+  let title = ''
-    ocean,
-    row.tokenIn || row.tokenOut,
-    oceanTokenAddress
-  )
 
-  const title =
+  switch (row.event) {
-    row.type === 'join'
+    case 'swap': {
-      ? `Add ${formatPrice(row.tokenAmountIn, locale)} ${addRemoveSymbol}`
+      const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-      : row.type === 'exit'
+      const inTokenSymbol = await getSymbol(ocean, inToken.tokenAddress)
-      ? `Remove ${formatPrice(row.tokenAmountOut, locale)} ${addRemoveSymbol}`
+      const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      : `Swap ${formatPrice(row.tokenAmountIn, locale)} ${await getSymbol(
+      const outTokenSymbol = await getSymbol(ocean, outToken.tokenAddress)
-          ocean,
+      title += `Swap ${formatPrice(
-          row.tokenIn,
+        Math.abs(inToken.value).toString(),
-          oceanTokenAddress
+        locale
-        )} for ${formatPrice(row.tokenAmountOut, locale)} ${await getSymbol(
+      )}${inTokenSymbol} for ${formatPrice(
-          ocean,
+        Math.abs(outToken.value).toString(),
-          row.tokenOut,
+        locale
-          oceanTokenAddress
+      )}${outTokenSymbol}`
-        )}`
+      break
+    }
+    case 'setup': {
+      const firstToken = row.tokens.filter(
+        (x) =>
+          x.tokenAddress.toLowerCase() === ocean.pool.oceanAddress.toLowerCase()
+      )[0]
+      const firstTokenSymbol = await getSymbol(ocean, firstToken.tokenAddress)
+      const secondToken = row.tokens.filter(
+        (x) =>
+          x.tokenAddress.toLowerCase() !== ocean.pool.oceanAddress.toLowerCase()
+      )[0]
+      const secondTokenSymbol = await getSymbol(ocean, secondToken.tokenAddress)
+      title += `Create pool with ${formatPrice(
+        Math.abs(firstToken.value).toString(),
+        locale
+      )}${firstTokenSymbol} and ${formatPrice(
+        Math.abs(secondToken.value).toString(),
+        locale
+      )}${secondTokenSymbol}`
+      break
+    }
+    case 'join':
+    case 'exit': {
+      for (let i = 0; i < row.tokens.length; i++) {
+        const tokenSymbol = await getSymbol(ocean, row.tokens[i].tokenAddress)
+        if (i > 0) title += '\n'
+        title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
+          Math.abs(row.tokens[i].value).toString(),
+          locale
+        )}${tokenSymbol}`
+      }
+      break
+    }
+  }
 
   return title
 }
 
-function Title({ row }: { row: PoolTransaction }) {
+function Title({ row }: { row: TransactionHistoryPoolTransactions }) {
-  const { ocean, networkId, config } = useOcean()
+  const { ocean, networkId } = useOcean()
   const [title, setTitle] = useState<string>()
   const { locale } = useUserPreferences()
 
   useEffect(() => {
-    if (!ocean || !locale || !row || !config?.oceanTokenAddress) return
+    if (!ocean || !locale || !row) return
 
     async function init() {
-      const title = await getTitle(ocean, row, locale, config.oceanTokenAddress)
+      const title = await getTitle(ocean, row, locale)
       setTitle(title)
     }
     init()
-  }, [ocean, row, locale, config?.oceanTokenAddress])
+  }, [ocean, row, locale])
 
   return title ? (
-    <EtherscanLink networkId={networkId} path={`/tx/${row.transactionHash}`}>
+    <EtherscanLink networkId={networkId} path={`/tx/${row.tx}`}>
-      {title}
+      <span className={styles.titleText}>{title}</span>
     </EtherscanLink>
   ) : null
 }
@@ -106,21 +154,24 @@ function getColumns(minimal?: boolean) {
   return [
     {
       name: 'Title',
-      selector: function getTitleRow(row: PoolTransaction) {
+      selector: function getTitleRow(row: TransactionHistoryPoolTransactions) {
         return <Title row={row} />
       }
     },
     {
       name: 'Data Set',
-      selector: function getAssetRow(row: PoolTransaction) {
+      selector: function getAssetRow(row: TransactionHistoryPoolTransactions) {
-        const did = row.dtAddress.replace('0x', 'did:op:')
+        const did = web3.utils
+          .toChecksumAddress(row.poolAddress.datatokenAddress)
+          .replace('0x', 'did:op:')
+
         return <AssetTitle did={did} />
       },
       omit: minimal
     },
     {
       name: 'Time',
-      selector: function getTimeRow(row: PoolTransaction) {
+      selector: function getTimeRow(row: TransactionHistoryPoolTransactions) {
         return (
           <Time
             className={styles.time}
@@ -142,35 +193,30 @@ export default function PoolTransactions({
   poolAddress?: string
   minimal?: boolean
 }): ReactElement {
-  const { ocean, accountId } = useOcean()
+  const { accountId } = useOcean()
-  const [logs, setLogs] = useState<PoolTransaction[]>()
+  const [logs, setLogs] = useState<TransactionHistoryPoolTransactions[]>()
-  const [isLoading, setIsLoading] = useState(false)
+
+  const { data, loading } = useQuery<TransactionHistory>(
+    poolAddress ? txHistoryQueryByPool : txHistoryQuery,
+    {
+      variables: {
+        user: accountId?.toLowerCase(),
+        pool: poolAddress?.toLowerCase()
+      },
+      pollInterval: 20000
+    }
+  )
 
   useEffect(() => {
-    async function getLogs() {
+    if (!data) return
-      if (!ocean || !accountId) return
+    setLogs(data.poolTransactions)
-
+  }, [data, loading])
-      setIsLoading(true)
-      const logs = poolAddress
-        ? await ocean.pool.getPoolLogs(poolAddress, 0, accountId)
-        : await ocean.pool.getAllPoolLogs(accountId)
-      // sort logs by date, newest first
-      const logsSorted = logs.sort((a, b) => {
-        if (a.timestamp > b.timestamp) return -1
-        if (a.timestamp < b.timestamp) return 1
-        return 0
-      })
-      setLogs(logsSorted)
-      setIsLoading(false)
-    }
-    getLogs()
-  }, [ocean, accountId, poolAddress])
 
   return (
     <Table
       columns={getColumns(minimal)}
       data={logs}
-      isLoading={isLoading}
+      isLoading={loading}
       noTableHead={minimal}
       dense={minimal}
       pagination={minimal ? logs?.length >= 4 : logs?.length >= 9}

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

@@ -3,14 +3,11 @@ import Button from '../../../atoms/Button'
 import PoolTransactions from '../../../molecules/PoolTransactions'
 import styles from './Transactions.module.css'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
+import { useAsset } from '../../../../providers/Asset'
 
-export default function Transactions({
+export default function Transactions(): ReactElement {
-  poolAddress
-}: {
-  poolAddress: string
-}): ReactElement {
   const [open, setOpen] = useState(false)
-
+  const { ddo } = useAsset()
   function handleClick() {
     setOpen(!open)
   }
@@ -31,7 +28,9 @@ export default function Transactions({
           {open ? 'Hide' : 'Show'} <Caret />
         </Button>
       </h3>
-      {open === true && <PoolTransactions poolAddress={poolAddress} minimal />}
+      {open === true && (
+        <PoolTransactions poolAddress={ddo.price?.address} minimal />
+      )}
     </div>
   )
 }

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

@@ -343,7 +343,7 @@ export default function Pool(): ReactElement {
             )}
           </div>
 
-          {accountId && <Transactions poolAddress={price?.address} />}
+          {accountId && <Transactions />}
         </>
       )}
     </>

src/providers/Asset.tsx

@@ -68,7 +68,7 @@ function AssetProvider({
       ddo.price.address
     )
     setPrice(newPrice)
-    Logger.log(`Refreshed asset price: ${newPrice?.value}`)
+    Logger.log(`Refreshed asset price: ${newPrice?.value}`, newPrice)
   }, [ocean, config, ddo, networkId, status])
 
   const fetchDdo = async (token?: CancelToken) => {