migrate most components using GraphQL queries

2024-12-02 05:57:29 +01:00 · 2022-01-13 22:03:36 +00:00 · 2022-01-13 22:03:36 +00:00 · 68ad4cc160
commit 68ad4cc160
parent d78676fa3b
7 changed files with 94 additions and 106 deletions
--- a/src/@context/Profile.tsx
+++ b/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)
      }
--- a/src/@utils/aquarius.ts
+++ b/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 }) =>
-            datatokenId?.address.toLowerCase() ===
+          ({ token }) =>
+            token?.address.toLowerCase() ===
            ddo.services[0].datatokenAddress.toLowerCase()
        )

        return {
          ddo,
          networkId: ddo.chainId,
-          dtSymbol: order?.datatokenId?.symbol,
-          timestamp: order?.timestamp
+          dtSymbol: order?.token?.symbol,
+          timestamp: order?.createdTimestamp
        }
      })
      .sort((a, b) => b.timestamp - a.timestamp)
--- a/src/components/@shared/PoolTransactions/Title.tsx
+++ b/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) {
-  let title = ''
-  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}`
+// TODO: it seems we are missing a way in PoolTransaction to figure out
+// if e.g. in a swap token got in or out of the pool.

-      break
-    }
-    case 'setup': {
-      const firstToken = row.tokens.filter(
-        (x) =>
-          x.tokenAddress.toLowerCase() !==
-          row.poolAddress.datatokenAddress.toLowerCase()
-      )[0]
-      const firstTokenSymbol = firstToken?.poolToken.symbol
-      const secondToken = row.tokens.filter(
-        (x) =>
-          x.tokenAddress.toLowerCase() ===
-          row.poolAddress.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.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
-          Math.abs(row.tokens[i].value).toString(),
-          locale
-        )}${tokenSymbol}`
-      }
-      break
-    }
-  }
+// async function getTitle(row: PoolTransaction, locale: string) {
+//   let title = ''
+//   switch (row.type) {
+//     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}`

-  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)
-      setTitle(title)
+      // const title = await getTitle(row, locale)
+      // setTitle(title)
    }
    init()
  }, [row, locale])
--- a/src/components/Asset/AssetActions/Pool/index.tsx
+++ b/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() {
--- a/src/components/Asset/AssetContent/EditHistory.tsx
+++ b/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'

--- a/src/components/Footer/MarketStats.tsx
+++ b/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
-        }))
-        await setTotalOceanLiquidity((prevState) => ({
-          ...prevState,
-          [chainId]: totalOceanLiquidity
+          [chainId]: totalLiquidity.value
        }))
+        // TODO: how to get total OCEAN liquidity?
+        // await setTotalOceanLiquidity((prevState) => ({
+        //   ...prevState,
+        //   [chainId]: totalLiquidity
+        // }))
        await setPoolCount((prevState) => ({
          ...prevState,
          [chainId]: poolCount
        }))

-        newTotalValueLockedSum += parseInt(totalValueLocked)
-        newTotalOceanLiquiditySum += parseInt(totalOceanLiquidity)
+        newTotalValueLockedSum += parseInt(totalLiquidity.value)
+        // newTotalOceanLiquiditySum += parseInt(totalOceanLiquidity)
        newPoolCountSum += parseInt(poolCount)
      } catch (error) {
        LoggerInstance.error('Error fetchData: ', error.message)
      }
    }
    setTotalValueLockedSum(`${newTotalValueLockedSum}`)
-    setTotalOceanLiquiditySum(`${newTotalOceanLiquiditySum}`)
+    // setTotalOceanLiquiditySum(`${newTotalOceanLiquiditySum}`)
    setPoolCountSum(`${newPoolCountSum}`)
  }

--- a/src/components/Profile/History/PoolShares.tsx
+++ b/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 {
-  PoolShares_poolShares as PoolShare,
-  PoolShares_poolShares_poolId_tokens as PoolSharePoolIdTokens
-} from '../../../@types/apollo/PoolShares'
+import { PoolShares_poolShares as PoolShare } 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.poolId.datatokenReserve) &&
-      isValidNumber(row.poolShare.poolId.spotPrice)
-        ? new Decimal(row.poolShare.poolId.datatokenReserve)
-            .mul(new Decimal(row.poolShare.poolId.spotPrice))
-            .plus(row.poolShare.poolId.oceanReserve)
+      isValidNumber(row.poolShare.pool.baseTokenLiquidity) &&
+      isValidNumber(row.poolShare.pool.datatokenLiquidity) &&
+      isValidNumber(row.poolShare.pool.spotPrice)
+        ? new Decimal(row.poolShare.pool.datatokenLiquidity)
+            .mul(new Decimal(row.poolShare.pool.spotPrice))
+            .plus(row.poolShare.pool.baseTokenLiquidity)
            .toString()
        : '0'

-    oceanTokenBalance = row.poolShare.poolId.oceanReserve.toString()
-    dataTokenBalance = row.poolShare.poolId.datatokenReserve.toString()
+    oceanTokenBalance = row.poolShare.pool.baseTokenLiquidity.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]
    })
  }