From 4123dae431f67548741b7062ab0bae6fb31d5c2c Mon Sep 17 00:00:00 2001
From: Norbi <37236152+KatunaNorbert@users.noreply.github.com>
Date: Wed, 1 Sep 2021 17:05:59 +0300
Subject: [PATCH] fix ocean symbol on Polygon (#487)

* updated Price component

* fixed on Pool Shares

* fixed on Pool

* fixed on Trade

* removed hardcoded data

* temp fixes

* fixes for subgraph2

* fixed token symbol in price for pools

* remove console.log

* remove comment default symbol

* remove temp values

* add tokens to query

* add token symbol

* remove console.log

Co-authored-by: Norbi <katunanorbert@gmai.com>
Co-authored-by: mihaisc <mihai@oceanprotocol.com>
---
 src/components/atoms/Price/PriceUnit.tsx      |  3 ++-
 src/components/atoms/Price/index.tsx          |  3 ++-
 src/components/molecules/AssetTeaser.tsx      |  4 +--
 src/components/molecules/Bookmarks.tsx        |  2 +-
 .../Compute/FormComputeDataset.tsx            |  3 ++-
 .../AssetActions/Compute/PriceOutput.tsx      |  2 +-
 .../organisms/AssetActions/Compute/index.tsx  |  4 +--
 .../organisms/AssetActions/Consume.tsx        |  3 ++-
 .../organisms/AssetActions/Pool/TokenList.tsx |  4 ++-
 .../organisms/AssetActions/Pool/index.tsx     | 20 +++++++++++---
 .../AssetActions/Trade/FormTrade.tsx          |  3 ++-
 .../organisms/AssetActions/Trade/Output.tsx   |  6 +++--
 .../organisms/AssetActions/Trade/Swap.tsx     | 10 ++++---
 src/components/pages/History/PoolShares.tsx   | 26 ++++++++++++-------
 src/hooks/usePricing.ts                       |  3 ++-
 src/models/BestPrice.ts                       | 12 +++++++++
 src/providers/Asset.tsx                       |  3 ++-
 src/utils/ocean.ts                            |  3 +--
 src/utils/subgraph.ts                         | 17 +++++++++---
 19 files changed, 93 insertions(+), 38 deletions(-)
 create mode 100644 src/models/BestPrice.ts

diff --git a/src/components/atoms/Price/PriceUnit.tsx b/src/components/atoms/Price/PriceUnit.tsx
index a1f3bf54f..ca6ab0d06 100644
--- a/src/components/atoms/Price/PriceUnit.tsx
+++ b/src/components/atoms/Price/PriceUnit.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useOcean } from '../../../providers/Ocean'
 import Badge from '../Badge'
 
 const cx = classNames.bind(styles)
@@ -48,7 +49,7 @@ export default function PriceUnit({
         <>
           <div>
             {Number.isNaN(Number(price)) ? '-' : formatPrice(price, locale)}{' '}
-            <span className={styles.symbol}>{symbol || 'OCEAN'}</span>
+            <span className={styles.symbol}>{symbol}</span>
             {type && type === 'pool' && (
               <Badge label="pool" className={styles.badge} />
             )}
diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx
index 940aca870..8c31eceba 100644
--- a/src/components/atoms/Price/index.tsx
+++ b/src/components/atoms/Price/index.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { BestPrice } from '@oceanprotocol/lib'
 import Loader from '../Loader'
 import Tooltip from '../Tooltip'
 import PriceUnit from './PriceUnit'
+import { BestPrice } from '../../../models/BestPrice'
 
 export default function Price({
   price,
@@ -19,6 +19,7 @@ export default function Price({
   return price?.value || price?.type === 'free' ? (
     <PriceUnit
       price={`${price.value}`}
+      symbol={price.oceanSymbol}
       className={className}
       small={small}
       conversion={conversion}
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx
index b1afece30..2543e1ba1 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/src/components/molecules/AssetTeaser.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { Link } from 'gatsby'
 import Dotdotdot from 'react-dotdotdot'
 import Price from '../atoms/Price'
-import { DDO, BestPrice } from '@oceanprotocol/lib'
+import { DDO } from '@oceanprotocol/lib'
 import removeMarkdown from 'remove-markdown'
 import Publisher from '../atoms/Publisher'
 import AssetType from '../atoms/AssetType'
 import NetworkName from '../atoms/NetworkName'
-import { useOcean } from '../../providers/Ocean'
 import styles from './AssetTeaser.module.css'
+import { BestPrice } from '../../models/BestPrice'
 
 declare type AssetTeaserProps = {
   ddo: DDO
diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx
index 58fc09e87..e2a882560 100644
--- a/src/components/molecules/Bookmarks.tsx
+++ b/src/components/molecules/Bookmarks.tsx
@@ -1,7 +1,7 @@
 import { useUserPreferences } from '../../providers/UserPreferences'
 import React, { ReactElement, useEffect, useState } from 'react'
 import Table from '../atoms/Table'
-import { DDO, Logger, BestPrice } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
 import Price from '../atoms/Price'
 import Tooltip from '../atoms/Tooltip'
 import AssetTitle from './AssetListTitle'
diff --git a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx b/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
index 81d38dcb3..262a7eab2 100644
--- a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
@@ -4,7 +4,7 @@ import { Field, Form, FormikContextType, useFormikContext } from 'formik'
 import Input from '../../../atoms/Input'
 import { FormFieldProps } from '../../../../@types/Form'
 import { useStaticQuery, graphql } from 'gatsby'
-import { DDO, BestPrice } from '@oceanprotocol/lib'
+import { DDO } from '@oceanprotocol/lib'
 import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
 import compareAsBN from '../../../../utils/compareAsBN'
 import ButtonBuy from '../../../atoms/ButtonBuy'
@@ -12,6 +12,7 @@ import PriceOutput from './PriceOutput'
 import { useAsset } from '../../../../providers/Asset'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
+import { BestPrice } from '../../../../models/BestPrice'
 
 const contentQuery = graphql`
   query StartComputeDatasetQuery {
diff --git a/src/components/organisms/AssetActions/Compute/PriceOutput.tsx b/src/components/organisms/AssetActions/Compute/PriceOutput.tsx
index 804b6bf9c..311c5db00 100644
--- a/src/components/organisms/AssetActions/Compute/PriceOutput.tsx
+++ b/src/components/organisms/AssetActions/Compute/PriceOutput.tsx
@@ -1,5 +1,5 @@
-import { BestPrice } from '@oceanprotocol/lib'
 import React, { ReactElement } from 'react'
+import { BestPrice } from '../../../../models/BestPrice'
 import { useAsset } from '../../../../providers/Asset'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Tooltip from '../../../atoms/Tooltip'
diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx
index a338ff254..b3ef7b75e 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -3,8 +3,7 @@ import {
   DDO,
   File as FileMetadata,
   Logger,
-  publisherTrustedAlgorithm,
-  BestPrice
+  publisherTrustedAlgorithm
 } from '@oceanprotocol/lib'
 import { toast } from 'react-toastify'
 import Price from '../../../atoms/Price'
@@ -40,6 +39,7 @@ import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDataset
 import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
 import AssetActionHistoryTable from '../../AssetActionHistoryTable'
 import ComputeJobs from '../../../pages/History/ComputeJobs'
+import { BestPrice } from '../../../../models/BestPrice'
 
 const SuccessAction = () => (
   <Button style="text" to="/history?defaultTab=ComputeJobs" size="small">
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 3e6aa5a25..d83498cc8 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
-import { File as FileMetadata, DDO, BestPrice } from '@oceanprotocol/lib'
+import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import File from '../../atoms/File'
 import Price from '../../atoms/Price'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
@@ -16,6 +16,7 @@ import ButtonBuy from '../../atoms/ButtonBuy'
 import { secondsToString } from '../../../utils/metadata'
 import AlgorithmDatasetsListForCompute from '../AssetContent/AlgorithmDatasetsListForCompute'
 import styles from './Consume.module.css'
+import { BestPrice } from '../../../models/BestPrice'
 
 const previousOrderQuery = gql`
   query PreviousOrder($id: String!, $account: String!) {
diff --git a/src/components/organisms/AssetActions/Pool/TokenList.tsx b/src/components/organisms/AssetActions/Pool/TokenList.tsx
index dc01677cd..b23940302 100644
--- a/src/components/organisms/AssetActions/Pool/TokenList.tsx
+++ b/src/components/organisms/AssetActions/Pool/TokenList.tsx
@@ -8,6 +8,7 @@ export default function TokenList({
   title,
   children,
   ocean,
+  oceanSymbol,
   dt,
   dtSymbol,
   poolShares,
@@ -18,6 +19,7 @@ export default function TokenList({
   title: string | ReactNode
   children: ReactNode
   ocean: string
+  oceanSymbol: string
   dt: string
   dtSymbol: string
   poolShares: string
@@ -30,7 +32,7 @@ export default function TokenList({
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.tokens}>
         <div>
-          <Token symbol="OCEAN" balance={ocean} />
+          <Token symbol={oceanSymbol} balance={ocean} />
           <Token symbol={dtSymbol} balance={dt} />
           {conversion.greaterThan(0) && (
             <Conversion
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 80025c48e..c9ac5d338 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -55,7 +55,9 @@ const poolLiquidityQuery = gql`
       swapFee
       spotPrice
       tokens {
-        tokenAddress
+        address
+        symbol
+        isDatatoken
         balance
         denormWeight
       }
@@ -85,9 +87,10 @@ export default function Pool(): ReactElement {
 
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
+  const [dtSymbol, setDtSymbol] = useState<string>()
+  const [oceanSymbol, setOceanSymbol] = useState<string>()
   const { isInPurgatory, ddo, owner, price, refreshInterval, isAssetNetwork } =
     useAsset()
-  const dtSymbol = ddo?.dataTokenInfo.symbol
 
   const [poolTokens, setPoolTokens] = useState<string>()
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
@@ -174,6 +177,12 @@ export default function Pool(): ReactElement {
         return
       }
 
+      // Set symbols
+      dataLiquidity.pool.tokens.forEach((token) => {
+        token.isDatatoken
+          ? setDtSymbol(token.symbol)
+          : setOceanSymbol(token.symbol)
+      })
       // Total pool shares
       const totalPoolTokens = dataLiquidity.pool.totalShares
       setTotalPoolTokens(totalPoolTokens)
@@ -188,7 +197,7 @@ export default function Pool(): ReactElement {
 
       // Get weights
       const weightDt = dataLiquidity.pool.tokens.filter(
-        (token: any) => token.tokenAddress === ddo.dataToken.toLowerCase()
+        (token: any) => token.address === ddo.dataToken.toLowerCase()
       )[0].denormWeight
 
       const weightDtDecimal = isValidNumber(weightDt)
@@ -391,7 +400,7 @@ export default function Pool(): ReactElement {
         <>
           <div className={styles.dataToken}>
             <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
-            <PriceUnit price={`${price?.value}`} />
+            <PriceUnit price={`${price?.value}`} symbol={oceanSymbol} />
             <Tooltip content={content.tooltips.price} />
             <div className={styles.dataTokenLinks}>
               <ExplorerLink
@@ -426,6 +435,7 @@ export default function Pool(): ReactElement {
               </>
             }
             ocean={`${userLiquidity?.ocean}`}
+            oceanSymbol={oceanSymbol}
             dt={`${userLiquidity?.datatoken}`}
             dtSymbol={dtSymbol}
             poolShares={poolTokens}
@@ -438,6 +448,7 @@ export default function Pool(): ReactElement {
           <TokenList
             title="Pool Creator Statistics"
             ocean={`${creatorLiquidity?.ocean}`}
+            oceanSymbol={oceanSymbol}
             dt={`${creatorLiquidity?.datatoken}`}
             dtSymbol={dtSymbol}
             poolShares={creatorPoolTokens}
@@ -462,6 +473,7 @@ export default function Pool(): ReactElement {
               </>
             }
             ocean={`${price?.ocean}`}
+            oceanSymbol={oceanSymbol}
             dt={`${price?.datatoken}`}
             dtSymbol={dtSymbol}
             poolShares={totalPoolTokens}
diff --git a/src/components/organisms/AssetActions/Trade/FormTrade.tsx b/src/components/organisms/AssetActions/Trade/FormTrade.tsx
index 8342d1ae4..b86647fc5 100644
--- a/src/components/organisms/AssetActions/Trade/FormTrade.tsx
+++ b/src/components/organisms/AssetActions/Trade/FormTrade.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react'
-import { BestPrice, DDO, Logger } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import * as Yup from 'yup'
 import { Formik } from 'formik'
 import Actions from '../Pool/Actions'
@@ -15,6 +15,7 @@ import Decimal from 'decimal.js'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
 import { useAsset } from '../../../../providers/Asset'
+import { BestPrice } from '../../../../models/BestPrice'
 
 const contentQuery = graphql`
   query TradeQuery {
diff --git a/src/components/organisms/AssetActions/Trade/Output.tsx b/src/components/organisms/AssetActions/Trade/Output.tsx
index 61879b753..8c4071954 100644
--- a/src/components/organisms/AssetActions/Trade/Output.tsx
+++ b/src/components/organisms/AssetActions/Trade/Output.tsx
@@ -12,9 +12,11 @@ Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
 
 export default function Output({
   dtSymbol,
+  oceanSymbol,
   poolAddress
 }: {
   dtSymbol: string
+  oceanSymbol: string
   poolAddress: string
 }): ReactElement {
   const { ocean } = useOcean()
@@ -78,14 +80,14 @@ export default function Output({
       <div>
         <p>Minimum Received</p>
         <Token
-          symbol={values.type === 'buy' ? dtSymbol : 'OCEAN'}
+          symbol={values.type === 'buy' ? dtSymbol : oceanSymbol}
           balance={maxOutput}
         />
       </div>
       <div>
         <p>Swap fee</p>
         <Token
-          symbol={`${values.type === 'buy' ? `OCEAN` : dtSymbol} ${
+          symbol={`${values.type === 'buy' ? oceanSymbol : dtSymbol} ${
             swapFee ? `(${swapFee}%)` : ''
           }`}
           balance={swapFeeValue}
diff --git a/src/components/organisms/AssetActions/Trade/Swap.tsx b/src/components/organisms/AssetActions/Trade/Swap.tsx
index 59fa26202..63dd2fbe7 100644
--- a/src/components/organisms/AssetActions/Trade/Swap.tsx
+++ b/src/components/organisms/AssetActions/Trade/Swap.tsx
@@ -33,10 +33,10 @@ export default function Swap({
   setMaximumDt: (value: string) => void
   setMaximumOcean: (value: string) => void
 }): ReactElement {
-  const { ocean } = useOcean()
+  const { ocean, config } = useOcean()
   const [oceanItem, setOceanItem] = useState<TradeItem>({
     amount: '0',
-    token: 'OCEAN',
+    token: config.oceanTokenSymbol,
     maxAmount: '0'
   })
   const [dtItem, setDtItem] = useState<TradeItem>({
@@ -194,7 +194,11 @@ export default function Swap({
         handleValueChange={handleValueChange}
       />
 
-      <Output dtSymbol={dtItem.token} poolAddress={price?.address} />
+      <Output
+        dtSymbol={dtItem.token}
+        oceanSymbol={oceanItem.token}
+        poolAddress={price?.address}
+      />
 
       <PriceImpact
         totalValue={totalValue}
diff --git a/src/components/pages/History/PoolShares.tsx b/src/components/pages/History/PoolShares.tsx
index fcd6548db..63cf4b0e9 100644
--- a/src/components/pages/History/PoolShares.tsx
+++ b/src/components/pages/History/PoolShares.tsx
@@ -37,9 +37,9 @@ const poolSharesQuery = gql`
         datatokenAddress
         valueLocked
         tokens {
-          tokenId {
-            symbol
-          }
+          id
+          isDatatoken
+          symbol
         }
         oceanReserve
         datatokenReserve
@@ -70,13 +70,17 @@ function calculateUserLiquidity(poolShare: PoolShare) {
   return totalLiquidity
 }
 
-function findValidToken(tokens: PoolSharePoolIdTokens[]) {
-  const symbol = tokens.find((token) => token.tokenId !== null)
-  return symbol.tokenId.symbol
+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 <>{findValidToken(tokens)}</>
+  return <>{findTokenByType(tokens, 'datatoken')}</>
 }
 
 function Liquidity({ row, type }: { row: Asset; type: string }) {
@@ -114,9 +118,13 @@ function Liquidity({ row, type }: { row: Asset; type: string }) {
         className={styles.totalLiquidity}
         hideApproximateSymbol
       />
-      <Token symbol="OCEAN" balance={oceanTokenBalance} noIcon />
       <Token
-        symbol={findValidToken(row.poolShare.poolId.tokens)}
+        symbol={findTokenByType(row.poolShare.poolId.tokens, 'ocean')}
+        balance={oceanTokenBalance}
+        noIcon
+      />
+      <Token
+        symbol={findTokenByType(row.poolShare.poolId.tokens, 'datatoken')}
         balance={dataTokenBalance}
         noIcon
       />
diff --git a/src/hooks/usePricing.ts b/src/hooks/usePricing.ts
index cc956c279..bf9432936 100644
--- a/src/hooks/usePricing.ts
+++ b/src/hooks/usePricing.ts
@@ -1,4 +1,4 @@
-import { DDO, Logger, BestPrice } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { useState } from 'react'
 import { TransactionReceipt } from 'web3-core'
 import { Decimal } from 'decimal.js'
@@ -13,6 +13,7 @@ import { sleep } from '../utils'
 
 import { useOcean } from '../providers/Ocean'
 import { useWeb3 } from '../providers/Web3'
+import { BestPrice } from '../models/BestPrice'
 
 interface PriceOptions {
   price: number
diff --git a/src/models/BestPrice.ts b/src/models/BestPrice.ts
new file mode 100644
index 000000000..65ad72e58
--- /dev/null
+++ b/src/models/BestPrice.ts
@@ -0,0 +1,12 @@
+export interface BestPrice {
+  type: 'pool' | 'exchange' | 'free' | ''
+  address: string
+  value: number
+  isConsumable?: 'true' | 'false' | ''
+  ocean?: number
+  oceanSymbol?: string
+  datatoken?: number
+  datatokenSymbol?: string
+  exchangeId?: string
+  pools: string[]
+}
diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx
index 5f6659206..ed9800310 100644
--- a/src/providers/Asset.tsx
+++ b/src/providers/Asset.tsx
@@ -7,7 +7,7 @@ import React, {
   useCallback,
   ReactNode
 } from 'react'
-import { Logger, DDO, BestPrice, MetadataMain } from '@oceanprotocol/lib'
+import { Logger, DDO, MetadataMain } from '@oceanprotocol/lib'
 import { PurgatoryData } from '@oceanprotocol/lib/dist/node/ddo/interfaces/PurgatoryData'
 import getAssetPurgatoryData from '../utils/purgatory'
 import axios, { CancelToken } from 'axios'
@@ -16,6 +16,7 @@ import { getPrice } from '../utils/subgraph'
 import { MetadataMarket } from '../@types/MetaData'
 import { useWeb3 } from './Web3'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
+import { BestPrice } from '../models/BestPrice'
 
 interface AssetProviderValue {
   isInPurgatory: boolean
diff --git a/src/utils/ocean.ts b/src/utils/ocean.ts
index 5a4245045..f10174c34 100644
--- a/src/utils/ocean.ts
+++ b/src/utils/ocean.ts
@@ -15,8 +15,7 @@ export function getOceanConfig(network: string | number): ConfigHelperConfig {
       network === 2021000
       ? undefined
       : process.env.GATSBY_INFURA_PROJECT_ID
-  )
-
+  ) as ConfigHelperConfig
   return config as ConfigHelperConfig
 }
 
diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts
index 0d11cef74..d9af5dfd3 100644
--- a/src/utils/subgraph.ts
+++ b/src/utils/subgraph.ts
@@ -1,5 +1,5 @@
 import { gql, OperationResult, TypedDocumentNode, OperationContext } from 'urql'
-import { DDO, BestPrice } from '@oceanprotocol/lib'
+import { DDO } from '@oceanprotocol/lib'
 import { getUrqlClientInstance } from '../providers/UrqlProvider'
 import { getOceanConfig } from './ocean'
 import web3 from 'web3'
@@ -20,6 +20,7 @@ import {
   HighestLiquidityAssets_pools as HighestLiquidityAssetsPools,
   HighestLiquidityAssets as HighestLiquidityGraphAssets
 } from '../@types/apollo/HighestLiquidityAssets'
+import { BestPrice } from '../models/BestPrice'
 
 export interface PriceList {
   [key: string]: string
@@ -95,6 +96,10 @@ const PoolQuery = gql`
       datatokenAddress
       datatokenReserve
       oceanReserve
+      tokens(where: { isDatatoken: false }) {
+        isDatatoken
+        symbol
+      }
     }
   }
 `
@@ -108,6 +113,9 @@ const AssetPoolPriceQuerry = gql`
       datatokenAddress
       datatokenReserve
       oceanReserve
+      tokens {
+        symbol
+      }
     }
   }
 `
@@ -235,6 +243,7 @@ function transformPriceToBestPrice(
           ? poolPrice[0]?.spotPrice
           : poolPrice[0]?.consumePrice,
       ocean: poolPrice[0]?.oceanReserve,
+      oceanSymbol: poolPrice[0]?.tokens[0]?.symbol,
       datatoken: poolPrice[0]?.datatokenReserve,
       pools: [poolPrice[0]?.id],
       isConsumable: poolPrice[0]?.consumePrice === '-1' ? 'false' : 'true'
@@ -247,7 +256,7 @@ function transformPriceToBestPrice(
       type: 'exchange',
       value: frePrice[0]?.rate,
       address: frePrice[0]?.id,
-      exchange_id: frePrice[0]?.id,
+      exchangeId: frePrice[0]?.id,
       ocean: 0,
       datatoken: 0,
       pools: [],
@@ -259,7 +268,7 @@ function transformPriceToBestPrice(
       type: 'free',
       value: 0,
       address: freePrice[0]?.datatoken.id,
-      exchange_id: '',
+      exchangeId: '',
       ocean: 0,
       datatoken: 0,
       pools: [],
@@ -271,7 +280,7 @@ function transformPriceToBestPrice(
       type: '',
       value: 0,
       address: '',
-      exchange_id: '',
+      exchangeId: '',
       ocean: 0,
       datatoken: 0,
       pools: [],