migrate most components using GraphQL queries

src/@context/Profile.tsx

@@ -226,7 +226,7 @@ function ProfileProvider({
 
       for (let i = 0; i < tokenOrders?.length; i++) {
         const did = web3.utils
-          .toChecksumAddress(tokenOrders[i].datatokenId.address)
+          .toChecksumAddress(tokenOrders[i].token.address)
           .replace('0x', 'did:op:')
         didList.push(did)
       }

src/@utils/aquarius.ts

@@ -6,7 +6,7 @@ import {
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
-import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'
+import { OrdersData_orders as OrdersData } from '../@types/apollo/OrdersData'
 import { metadataCacheUri } from '../../app.config'
 import {
   SortDirectionOptions,
@@ -348,16 +348,16 @@ export async function getDownloadAssets(
     const downloadedAssets: DownloadedAsset[] = result.results
       .map((ddo) => {
         const order = tokenOrders.find(
-          ({ datatokenId }) =>
+          ({ token }) =>
-            datatokenId?.address.toLowerCase() ===
+            token?.address.toLowerCase() ===
             ddo.services[0].datatokenAddress.toLowerCase()
         )
 
         return {
           ddo,
           networkId: ddo.chainId,
-          dtSymbol: order?.datatokenId?.symbol,
+          dtSymbol: order?.token?.symbol,
-          timestamp: order?.timestamp
+          timestamp: order?.createdTimestamp
         }
       })
       .sort((a, b) => b.timestamp - a.timestamp)

src/components/@shared/PoolTransactions/Title.tsx

@@ -5,62 +5,65 @@ import ExplorerLink from '@shared/ExplorerLink'
 import { formatPrice } from '@shared/Price/PriceUnit'
 import styles from './Title.module.css'
 
-async function getTitle(row: PoolTransaction, locale: string) {
+// TODO: it seems we are missing a way in PoolTransaction to figure out
-  let title = ''
+// if e.g. in a swap token got in or out of the pool.
-  switch (row.event) {
-    case 'swap': {
-      const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-      const inTokenSymbol = inToken?.poolToken.symbol
-      const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      const outTokenSymbol = outToken?.poolToken.symbol
-      title += `Swap ${formatPrice(
-        Math.abs(inToken?.value).toString(),
-        locale
-      )}${inTokenSymbol} for ${formatPrice(
-        Math.abs(outToken?.value).toString(),
-        locale
-      )}${outTokenSymbol}`
 
-      break
+// async function getTitle(row: PoolTransaction, locale: string) {
-    }
+//   let title = ''
-    case 'setup': {
+//   switch (row.type) {
-      const firstToken = row.tokens.filter(
+//     case 'SWAP': {
-        (x) =>
+//       const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-          x.tokenAddress.toLowerCase() !==
+//       const inTokenSymbol = inToken?.poolToken.symbol
-          row.poolAddress.datatokenAddress.toLowerCase()
+//       const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      )[0]
+//       const outTokenSymbol = outToken?.poolToken.symbol
-      const firstTokenSymbol = firstToken?.poolToken.symbol
+//       title += `Swap ${formatPrice(
-      const secondToken = row.tokens.filter(
+//         Math.abs(inToken?.value).toString(),
-        (x) =>
+//         locale
-          x.tokenAddress.toLowerCase() ===
+//       )}${inTokenSymbol} for ${formatPrice(
-          row.poolAddress.datatokenAddress.toLowerCase()
+//         Math.abs(outToken?.value).toString(),
-      )[0]
+//         locale
-      const secondTokenSymbol = secondToken?.poolToken.symbol
+//       )}${outTokenSymbol}`
-      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 = row.tokens[i].poolToken.symbol
-        if (i > 0) title += '\n'
-        title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
-          Math.abs(row.tokens[i].value).toString(),
-          locale
-        )}${tokenSymbol}`
-      }
-      break
-    }
-  }
 
-  return title
+//       break
-}
+//     }
+//     case 'SETUP': {
+//       const firstToken = row.tokens.filter(
+//         (x) =>
+//           x.tokenAddress.toLowerCase() !==
+//           row.pool.id.datatoken.address.toLowerCase()
+//       )[0]
+//       const firstTokenSymbol = firstToken?.poolToken.symbol
+//       const secondToken = row.tokens.filter(
+//         (x) =>
+//           x.tokenAddress.toLowerCase() ===
+//           row.pool.id.datatokenAddress.toLowerCase()
+//       )[0]
+//       const secondTokenSymbol = secondToken?.poolToken.symbol
+//       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 = row.tokens[i].poolToken.symbol
+//         if (i > 0) title += '\n'
+//         title += `${row.type === 'JOIN' ? 'Add' : 'Remove'} ${formatPrice(
+//           Math.abs(row.tokens[i].value).toString(),
+//           locale
+//         )}${tokenSymbol}`
+//       }
+//       break
+//     }
+//   }
+
+//   return title
+// }
 
 export default function Title({ row }: { row: PoolTransaction }): ReactElement {
   const [title, setTitle] = useState<string>()
@@ -70,8 +73,8 @@ export default function Title({ row }: { row: PoolTransaction }): ReactElement {
     if (!locale || !row) return
 
     async function init() {
-      const title = await getTitle(row, locale)
+      // const title = await getTitle(row, locale)
-      setTitle(title)
+      // setTitle(title)
     }
     init()
   }, [row, locale])

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

@@ -133,7 +133,7 @@ export default function Pool(): ReactElement {
       queryVariables,
       queryContext
     )
-    return queryResult?.data.pool.shares[0]?.balance
+    return queryResult?.data.pool.shares[0]?.shares
   }
 
   function refetchLiquidity() {

src/components/Asset/AssetContent/EditHistory.tsx

@@ -3,7 +3,7 @@ import { useAsset } from '@context/Asset'
 import ExplorerLink from '@shared/ExplorerLink'
 import Time from '@shared/atoms/Time'
 import { gql, OperationContext, useQuery } from 'urql'
-import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
+import { ReceiptData_nftUpdates as ReceiptData } from '../../../@types/apollo/ReceiptData'
 import { getQueryContext } from '@utils/subgraph'
 import styles from './EditHistory.module.css'
 

src/components/Footer/MarketStats.tsx

@@ -116,7 +116,7 @@ export default function MarketStats(): ReactElement {
     setMainChainIds(mainChainIdsList)
 
     let newTotalValueLockedSum = 0
-    let newTotalOceanLiquiditySum = 0
+    // let newTotalOceanLiquiditySum = 0
     let newPoolCountSum = 0
 
     for (const chainId of mainChainIdsList) {
@@ -141,26 +141,27 @@ export default function MarketStats(): ReactElement {
 
         await setTotalValueLocked((prevState) => ({
           ...prevState,
-          [chainId]: totalValueLocked
+          [chainId]: totalLiquidity.value
-        }))
-        await setTotalOceanLiquidity((prevState) => ({
-          ...prevState,
-          [chainId]: totalOceanLiquidity
         }))
+        // TODO: how to get total OCEAN liquidity?
+        // await setTotalOceanLiquidity((prevState) => ({
+        //   ...prevState,
+        //   [chainId]: totalLiquidity
+        // }))
         await setPoolCount((prevState) => ({
           ...prevState,
           [chainId]: poolCount
         }))
 
-        newTotalValueLockedSum += parseInt(totalValueLocked)
+        newTotalValueLockedSum += parseInt(totalLiquidity.value)
-        newTotalOceanLiquiditySum += parseInt(totalOceanLiquidity)
+        // newTotalOceanLiquiditySum += parseInt(totalOceanLiquidity)
         newPoolCountSum += parseInt(poolCount)
       } catch (error) {
         LoggerInstance.error('Error fetchData: ', error.message)
       }
     }
     setTotalValueLockedSum(`${newTotalValueLockedSum}`)
-    setTotalOceanLiquiditySum(`${newTotalOceanLiquiditySum}`)
+    // setTotalOceanLiquiditySum(`${newTotalOceanLiquiditySum}`)
     setPoolCountSum(`${newPoolCountSum}`)
   }
 

src/components/Profile/History/PoolShares.tsx

@@ -3,10 +3,7 @@ import Table from '@shared/atoms/Table'
 import Conversion from '@shared/Price/Conversion'
 import styles from './PoolShares.module.css'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
-import {
+import { PoolShares_poolShares as PoolShare } from '../../../@types/apollo/PoolShares'
-  PoolShares_poolShares as PoolShare,
-  PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
-} from '../../../@types/apollo/PoolShares'
 import web3 from 'web3'
 import Token from '../../Asset/AssetActions/Pool/Token'
 import { calculateUserLiquidity } from '@utils/subgraph'
@@ -33,46 +30,33 @@ interface AssetPoolShare {
   ddo: Asset
 }
 
-function findTokenByType(tokens: PoolSharePoolIdTokens[], type: string) {
-  const { symbol } = tokens.find((token) =>
-    type === 'datatoken'
-      ? token.isDatatoken === true
-      : token.isDatatoken === false
-  )
-  return symbol
-}
-
-function Symbol({ tokens }: { tokens: PoolSharePoolIdTokens[] }) {
-  return <>{findTokenByType(tokens, 'datatoken')}</>
-}
-
 function Liquidity({ row, type }: { row: AssetPoolShare; type: string }) {
   let price = ``
   let oceanTokenBalance = ''
   let dataTokenBalance = ''
   if (type === 'user') {
     price = `${row.userLiquidity}`
-    const userShare = row.poolShare.balance / row.poolShare.poolId.totalShares
+    const userShare = row.poolShare.shares / row.poolShare.pool.totalShares
     oceanTokenBalance = (
-      userShare * row.poolShare.poolId.oceanReserve
+      userShare * row.poolShare.pool.baseTokenLiquidity
     ).toString()
     dataTokenBalance = (
-      userShare * row.poolShare.poolId.datatokenReserve
+      userShare * row.poolShare.pool.datatokenLiquidity
     ).toString()
   }
   if (type === 'pool') {
     price =
-      isValidNumber(row.poolShare.poolId.oceanReserve) &&
+      isValidNumber(row.poolShare.pool.baseTokenLiquidity) &&
-      isValidNumber(row.poolShare.poolId.datatokenReserve) &&
+      isValidNumber(row.poolShare.pool.datatokenLiquidity) &&
-      isValidNumber(row.poolShare.poolId.spotPrice)
+      isValidNumber(row.poolShare.pool.spotPrice)
-        ? new Decimal(row.poolShare.poolId.datatokenReserve)
+        ? new Decimal(row.poolShare.pool.datatokenLiquidity)
-            .mul(new Decimal(row.poolShare.poolId.spotPrice))
+            .mul(new Decimal(row.poolShare.pool.spotPrice))
-            .plus(row.poolShare.poolId.oceanReserve)
+            .plus(row.poolShare.pool.baseTokenLiquidity)
             .toString()
         : '0'
 
-    oceanTokenBalance = row.poolShare.poolId.oceanReserve.toString()
+    oceanTokenBalance = row.poolShare.pool.baseTokenLiquidity.toString()
-    dataTokenBalance = row.poolShare.poolId.datatokenReserve.toString()
+    dataTokenBalance = row.poolShare.pool.datatokenLiquidity.toString()
   }
   return (
     <div className={styles.userLiquidity}>
@@ -82,12 +66,12 @@ function Liquidity({ row, type }: { row: AssetPoolShare; type: string }) {
         hideApproximateSymbol
       />
       <Token
-        symbol={findTokenByType(row.poolShare.poolId.tokens, 'ocean')}
+        symbol={row.poolShare.pool.baseToken.symbol}
         balance={oceanTokenBalance}
         noIcon
       />
       <Token
-        symbol={findTokenByType(row.poolShare.poolId.tokens, 'datatoken')}
+        symbol={row.poolShare.pool.datatoken.symbol}
         balance={dataTokenBalance}
         noIcon
       />
@@ -112,7 +96,7 @@ const columns = [
   {
     name: 'Datatoken',
     selector: function getSymbol(row: AssetPoolShare) {
-      return <Symbol tokens={row.poolShare.poolId.tokens} />
+      return <>{row.poolShare.pool.datatoken.symbol}</>
     }
   },
   {
@@ -143,7 +127,7 @@ async function getPoolSharesAssets(
 
   for (let i = 0; i < data.length; i++) {
     const did = web3.utils
-      .toChecksumAddress(data[i].poolId.datatokenAddress)
+      .toChecksumAddress(data[i].pool.datatoken.address)
       .replace('0x', 'did:op:')
     didList.push(did)
   }
@@ -155,7 +139,7 @@ async function getPoolSharesAssets(
       poolShare: data[i],
       userLiquidity: userLiquidity,
       networkId: ddoList[i].chainId,
-      createTime: data[i].poolId.createTime,
+      createTime: data[i].pool.createdTimestamp,
       ddo: ddoList[i]
     })
   }