Merge branch 'main' into feature/account_page

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} />
             )}

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}

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

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'

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 {

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'

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/Profile/History/ComputeJobs'
+import { BestPrice } from '../../../../models/BestPrice'
 
 const SuccessAction = () => (
   <Button style="text" to="/profile?defaultTab=ComputeJobs" size="small">

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!) {

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

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}

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 {

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}

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}

src/components/pages/Profile/History/PoolShares.tsx

@@ -38,9 +38,9 @@ const poolSharesQuery = gql`
         datatokenAddress
         valueLocked
         tokens {
-          tokenId {
-            symbol
-          }
+          id
+          isDatatoken
+          symbol
         }
         oceanReserve
         datatokenReserve
@@ -60,13 +60,17 @@ interface Asset {
   createTime: number
 }
 
-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 }) {
@@ -104,9 +108,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
       />

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

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[]
+}

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

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
 }
 

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'
@@ -24,6 +24,7 @@ import {
   PoolShares as PoolSharesList,
   PoolShares_poolShares as PoolShare
 } from '../@types/apollo/PoolShares'
+import { BestPrice } from '../models/BestPrice'
 
 export interface UserTVL {
   price: string
@@ -104,6 +105,10 @@ const PoolQuery = gql`
       datatokenAddress
       datatokenReserve
       oceanReserve
+      tokens(where: { isDatatoken: false }) {
+        isDatatoken
+        symbol
+      }
     }
   }
 `
@@ -117,6 +122,9 @@ const AssetPoolPriceQuerry = gql`
       datatokenAddress
       datatokenReserve
       oceanReserve
+      tokens {
+        symbol
+      }
     }
   }
 `
@@ -281,6 +289,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'
@@ -293,7 +302,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: [],
@@ -305,7 +314,7 @@ function transformPriceToBestPrice(
       type: 'free',
       value: 0,
       address: freePrice[0]?.datatoken.id,
-      exchange_id: '',
+      exchangeId: '',
       ocean: 0,
       datatoken: 0,
       pools: [],
@@ -317,7 +326,7 @@ function transformPriceToBestPrice(
       type: '',
       value: 0,
       address: '',
-      exchange_id: '',
+      exchangeId: '',
       ocean: 0,
       datatoken: 0,
       pools: [],
@@ -563,7 +572,7 @@ export async function getAccountNumberOfOrders(
   return numberOfOrders
 }
 
-export function calculateUserLiquidity(poolShare: PoolShare) {
+export function calculateUserLiquidity(poolShare: PoolShare): number {
   const ocean =
     (poolShare.balance / poolShare.poolId.totalShares) *
     poolShare.poolId.oceanReserve