merged v4 into c2d

.env.example

@@ -1,6 +1,15 @@
 
 #NEXT_PUBLIC_INFURA_PROJECT_ID="xxx"
 #NEXT_PUBLIC_MARKET_FEE_ADDRESS="0xxx"
+#NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
+#NEXT_PUBLIC_PUBLISHER_MARKET_POOL_SWAP_FEE="1"
+#NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE="1"
+#NEXT_PUBLIC_CONSUME_MARKET_ORDER_FEE="1"
+#NEXT_PUBLIC_CONSUME_MARKET_POOL_SWAP_FEE="1"
+#NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE="1"
+
+
+
 #NEXT_PUBLIC_PORTIS_ID="xxx"
 
 

.github/CODEOWNERS

@@ -1 +1 @@
-* @mihaisc @kremalicious @claudiaHash @bogdanfazakas @KatunaNorbert @jamiehewitt15 @DimitarSD
+* @mihaisc @kremalicious @claudiaHash @bogdanfazakas @EnzoVezzaro

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - v4
     tags:
       - '**'
   pull_request:

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: 'CodeQL'
 
 on:
   push:
-    branches: [main]
+    branches: [main, v4]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [main]
+    branches: [main, v4]
   schedule:
     - cron: '21 8 * * 4'
 

.gitignore

@@ -11,6 +11,7 @@ coverage
 repo-metadata.json
 networks-metadata.json
 src/@types/subgraph
+src/@types/apollo/
 graphql.schema.json
 src/@types/graph.types.ts
 tsconfig.tsbuildinfo

app.config.js

@@ -7,7 +7,7 @@ module.exports = {
   // return appConfig.metadataCacheUri
   metadataCacheUri:
     process.env.NEXT_PUBLIC_METADATACACHE_URI ||
-    'https://aquariusv4.oceanprotocol.com',
+    'https://v4.aquarius.oceanprotocol.com',
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
@@ -22,6 +22,25 @@ module.exports = {
   marketFeeAddress:
     process.env.NEXT_PUBLIC_MARKET_FEE_ADDRESS ||
     '0x9984b2453eC7D99a73A5B3a46Da81f197B753C8d',
+  // publisher market fee that is taken upon ordering an asset, it is an absolute value, it is declared on erc20 creation
+  publisherMarketOrderFee:
+    process.env.NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE || '0',
+  // fee recieved by the publisher market when a dt is swaped from a pool, percent
+  publisherMarketPoolSwapFee:
+    process.env.NEXT_PUBLIC_PUBLISHER_MARKET_POOL_SWAP_FEE || '0',
+  // fee recieved by the publisher market when a dt is bought from a fixed rate exchange, percent
+  publisherMarketFixedSwapFee:
+    process.env.NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE || '0',
+
+  // consume market fee that is taken upon ordering an asset, it is an absolute value, it is specified on order
+  consumeMarketOrderFee:
+    process.env.NEXT_PUBLIC_CONSUME_MARKET_ORDER_FEE || '0',
+  // fee recieved by the consume market when a dt is swaped from a pool, percent
+  consumeMarketPoolSwapFee:
+    process.env.NEXT_PUBLIC_CONSUME_MARKET_POOL_SWAP_FEE || '0',
+  // fee recieved by the consume market when a dt is bought from a fixed rate exchange, percent
+  consumeMarketFixedSwapFee:
+    process.env.NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE || '0',
 
   // Used for conversion display, can be whatever coingecko API supports
   // see: https://api.coingecko.com/api/v3/simple/supported_vs_currencies

content/price.json

@@ -28,7 +28,16 @@
     },
     "free": {
       "title": "Free",
-      "info": "Set your data set as free. The datatoken for this data set will be given for free via creating a faucet."
+      "info": "Set your data set as free. The datatoken for this data set will be given for free via creating a faucet.",
+      "fields": [
+        {
+          "name": "freeAgreement",
+          "type": "checkbox",
+          "options": [
+            "I want this asset to be free. I understand network fees are still to be paid"
+          ]
+        }
+      ]
     }
   },
   "pool": {

content/publish/form.json

@@ -6,7 +6,7 @@
         "name": "nft",
         "label": "Data NFT",
         "type": "nft",
-        "help": "All metadata is stored on-chain in a newly deployed ERC-721 contract representing this asset, created with this name & symbol.",
+        "help": "All metadata is stored on-chain in a newly deployed ERC-721 contract representing this asset, created with this name, symbol, description and image.",
         "required": true
       },
       {

next.config.js

@@ -17,24 +17,35 @@ module.exports = (phase, { defaultConfig }) => {
           type: 'asset/resource'
         }
       )
-
       // for old ocean.js, most likely can be removed later on
       config.plugins.push(
         new options.webpack.IgnorePlugin({
           resourceRegExp: /^electron$/
         })
       )
-
+      const fallback = config.resolve.fallback || {}
-      config.resolve.fallback = {
+      Object.assign(fallback, {
+        // crypto: require.resolve('crypto-browserify'),
+        // stream: require.resolve('stream-browserify'),
+        // assert: require.resolve('assert'),
+        // os: require.resolve('os-browserify'),
+        // url: require.resolve('url'),
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
         fs: false,
         crypto: false,
         os: false,
         stream: false,
-        http: false,
-        https: false,
         assert: false
-      }
+      })
+      config.resolve.fallback = fallback
 
+      config.plugins = (config.plugins || []).concat([
+        new options.webpack.ProvidePlugin({
+          process: 'process/browser',
+          Buffer: ['buffer', 'Buffer']
+        })
+      ])
       return typeof defaultConfig.webpack === 'function'
         ? defaultConfig.webpack(config, options)
         : config

package.json

@@ -15,13 +15,13 @@
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
     "postinstall": "husky install",
-    "codegen:apollo": "apollo client:codegen --endpoint=https://subgraphv4.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/"
+    "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/"
   },
   "dependencies": {
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.11",
+    "@oceanprotocol/lib": "^1.0.0-next.21",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.6",
     "@tippyjs/react": "^4.2.6",
@@ -30,7 +30,6 @@
     "bignumber.js": "^9.0.2",
     "chart.js": "^3.7.0",
     "classnames": "^2.3.1",
-    "d3": "^7.3.0",
     "date-fns": "^2.28.0",
     "decimal.js": "^10.3.1",
     "dom-confetti": "^0.2.2",
@@ -44,7 +43,7 @@
     "jwt-decode": "^3.1.2",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
-    "next": "^12.0.9",
+    "next": "^12.1.0",
     "query-string": "^7.1.0",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
@@ -95,10 +94,13 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "file-loader": "^6.2.0",
+    "https-browserify": "^1.0.0",
     "husky": "^7.0.4",
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
+    "process": "^0.11.10",
     "serve": "^13.0.2",
+    "stream-http": "^2.8.3",
     "typescript": "^4.5.4"
   },
   "repository": {

src/@context/Asset.tsx

@@ -69,7 +69,8 @@ function AssetProvider({
 
       if (!asset) {
         setError(
-          `[asset] The asset for ${did} was not found in MetadataCache. If you just published a new data set, wait some seconds and refresh this page.`
+          `\`${did}\`` +
+            '\n\nWe could not find an asset for this DID in the cache. If you just published a new asset, wait some seconds and refresh this page.'
         )
         LoggerInstance.error(`[asset] Failed getting asset for ${did}`, asset)
       } else {
@@ -95,7 +96,6 @@ function AssetProvider({
   // -----------------------------------
   const fetchAccessDetails = useCallback(async (): Promise<void> => {
     if (!asset?.chainId || !asset?.services) return
-
     const accessDetails = await getAccessDetails(
       asset.chainId,
       asset.services[0].datatokenAddress,

src/@context/Pool/_queries.ts

@@ -10,9 +10,9 @@ export const poolDataQuery = gql`
     poolData: pool(id: $pool) {
       id
       totalShares
-      poolFee
+      liquidityProviderFee
-      opfFee
+      opcFee
-      marketFee
+      marketSwapFee
       spotPrice
       baseToken {
         address

src/@context/Pool/index.tsx

@@ -30,7 +30,8 @@ const initialPoolInfo: Partial<PoolInfo> = {
 }
 
 const initialPoolInfoUser: Partial<PoolInfoUser> = {
-  liquidity: new Decimal(0)
+  liquidity: new Decimal(0),
+  poolShares: '0'
 }
 
 const initialPoolInfoCreator: Partial<PoolInfoUser> = initialPoolInfoUser
@@ -68,7 +69,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
     setPoolData(response.poolData)
     setPoolInfoUser((prevState) => ({
       ...prevState,
-      poolShares: response.poolDataUser?.shares[0]?.shares
+      poolShares: response.poolDataUser?.shares[0]?.shares || '0'
     }))
     setPoolSnapshots(response.poolSnapshots)
     LoggerInstance.log('[pool] Fetched pool data:', response.poolData)
@@ -77,8 +78,6 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   }, [asset?.chainId, asset?.accessDetails?.addressOrId, owner, accountId])
 
   // Helper: start interval fetching
-  // Having `accountId` as dependency is important for interval to
-  // change after user account switch.
   const initFetchInterval = useCallback(() => {
     if (fetchInterval) return
 
@@ -89,6 +88,10 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
       )
     }, refreshInterval)
     setFetchInterval(newInterval)
+
+    // Having `accountId` as dependency is important for interval to
+    // change after user account switch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchInterval, fetchAllData, accountId])
 
   useEffect(() => {
@@ -115,10 +118,10 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   useEffect(() => {
     if (!poolData) return
 
-    // Fees
+    // Fees - this will be renamed again in subgraph
-    const poolFee = getFee(poolData.poolFee)
+    const poolFee = getFee(poolData.liquidityProviderFee)
-    const marketFee = getFee(poolData.marketFee)
+    const marketFee = getFee(poolData.marketSwapFee)
-    const opfFee = getFee(poolData.opfFee)
+    const opfFee = getFee(poolData.opcFee)
 
     // Total Liquidity
     const totalLiquidityInOcean = isValidNumber(poolData.spotPrice)
@@ -191,13 +194,13 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
       !poolData ||
       !poolInfo?.totalPoolTokens ||
       !asset?.chainId ||
-      !accountId
+      !accountId ||
+      !poolInfoUser
     )
       return
-
     // Staking bot receives half the pool shares so for display purposes
     // we can multiply by 2 as we have a hardcoded 50/50 pool weight.
-    const userPoolShares = new Decimal(poolInfoUser.poolShares)
+    const userPoolShares = new Decimal(poolInfoUser.poolShares || 0)
       .mul(2)
       .toString()
 
@@ -235,6 +238,8 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
       poolShares: userPoolShares,
       ...newPoolInfoUser
     })
+    // poolInfoUser was not added on purpose, we use setPoolInfoUser so it will just loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     poolData,
     poolInfoUser?.poolShares,

src/@context/Profile.tsx

@@ -220,18 +220,14 @@ function ProfileProvider({
     async (cancelToken: CancelToken) => {
       if (!accountId || !chainIds) return
 
-      const didList: string[] = []
+      const dtList: string[] = []
       const tokenOrders = await getUserTokenOrders(accountId, chainIds)
 
       for (let i = 0; i < tokenOrders?.length; i++) {
-        const did = web3.utils
+        dtList.push(tokenOrders[i].datatoken.address)
-          .toChecksumAddress(tokenOrders[i].datatoken.address)
-          .replace('0x', 'did:op:')
-        didList.push(did)
       }
-
       const downloads = await getDownloadAssets(
-        didList,
+        dtList,
         tokenOrders,
         chainIds,
         cancelToken

src/@hooks/useConsume.ts

@@ -1,159 +0,0 @@
-import { useState } from 'react'
-import { consumeFeedback } from '@utils/feedback'
-import {
-  approve,
-  Datatoken,
-  FreOrderParams,
-  LoggerInstance,
-  OrderParams,
-  Pool,
-  ProviderFees,
-  ProviderInstance,
-  signHash,
-  ZERO_ADDRESS
-} from '@oceanprotocol/lib'
-import { useWeb3 } from '@context/Web3'
-import { getOceanConfig } from '@utils/ocean'
-
-interface UseConsume {
-  consume: (
-    did: string,
-    dataTokenAddress: string,
-    serviceType: string,
-    marketFeeAddress: string,
-    orderId?: string
-  ) => Promise<string>
-  consumeStep?: number
-  consumeStepText?: string
-  consumeError?: string
-  isLoading: boolean
-}
-
-function useConsume(): UseConsume {
-  const { accountId, web3, chainId } = useWeb3()
-  const [isLoading, setIsLoading] = useState(false)
-  const [consumeStep, setConsumeStep] = useState<number | undefined>()
-  const [consumeStepText, setConsumeStepText] = useState<string | undefined>()
-  const [consumeError, setConsumeError] = useState<string | undefined>()
-
-  function setStep(index: number) {
-    setConsumeStep(index)
-    setConsumeStepText(consumeFeedback[index])
-  }
-
-  // TODO: this will be done in another PR
-  async function consume(
-    did: string,
-    datatokenAddress: string,
-    serviceType = 'access',
-    marketFeeAddress: string,
-    orderId?: string
-  ): Promise<string> {
-    if (!accountId) return
-
-    setIsLoading(true)
-    setConsumeError(undefined)
-
-    try {
-      setStep(0)
-      if (!orderId) {
-        const datatoken = new Datatoken(web3)
-        // if we don't have a previous valid order, get one
-        const userOwnedTokens = await datatoken.balance(
-          datatokenAddress,
-          accountId
-        )
-
-        setStep(1)
-        try {
-          const config = getOceanConfig(chainId)
-          // const txApprove = await approve(
-          //   web3,
-          //   accountId,
-          //   config.oceanTokenAddress,
-          //   accountId,
-          //   '1',
-          //   false
-          // )
-          // console.log('approve tx', txApprove)
-
-          // const txApprove1 = await approve(
-          //   web3,
-          //   accountId,
-          //   config.oceanTokenAddress,
-          //   datatokenAddress,
-          //   '1',
-          //   false
-          // )
-          // console.log('approve tx', txApprove1)
-
-          // diference between timeout and validUntil?
-          const initializeData = await ProviderInstance.initialize(
-            did,
-            'fca052c239a62523be30ab8ee70c4046867f6cd89f228185fe2996ded3d23c3c',
-            0,
-            accountId,
-            'https://providerv4.rinkeby.oceanprotocol.com'
-          )
-          const orderParams = {
-            consumer: accountId,
-            serviceIndex: 1,
-            _providerFees: initializeData.providerFee
-          } as OrderParams
-          const freParams = {
-            exchangeContract: config.fixedRateExchangeAddress,
-            exchangeId:
-              '0x7ac824fef114255e5e3521a161ef692ec32003916fb6f3fe985cb74790d053ca',
-            maxBaseTokenAmount: web3.utils.toWei('2'),
-            swapMarketFee: web3.utils.toWei('0'),
-            marketFeeAddress: ZERO_ADDRESS
-          } as FreOrderParams
-
-          const esttx = await datatoken.estGasBuyFromFreAndOrder(
-            datatokenAddress,
-            accountId,
-            orderParams,
-            freParams
-          )
-          const tx = await datatoken.buyFromFreAndOrder(
-            datatokenAddress,
-            accountId,
-            orderParams,
-            freParams
-          )
-
-          LoggerInstance.log('ordercreated', orderId)
-          setStep(2)
-        } catch (error) {
-          setConsumeError(error.message)
-          return error.message
-        }
-      }
-
-      setStep(3)
-      if (orderId)
-        // await ocean.assets.download(
-        //   did as string,
-        //   orderId,
-        //   dataTokenAddress,
-        //   account,
-        //   ''
-        // )
-        setStep(4)
-    } catch (error) {
-      setConsumeError(error.message)
-      LoggerInstance.error(error)
-      return error.message
-    } finally {
-      setConsumeStep(undefined)
-      setConsumeStepText(undefined)
-      setIsLoading(false)
-    }
-    return undefined
-  }
-
-  return { consume, consumeStep, consumeStepText, consumeError, isLoading }
-}
-
-export { useConsume }
-export default useConsume

src/@hooks/usePricing.ts

@@ -1,244 +0,0 @@
-import { Asset, Config, LoggerInstance } from '@oceanprotocol/lib'
-import { useEffect, useState } from 'react'
-import { TransactionReceipt } from 'web3-core'
-import { Decimal } from 'decimal.js'
-import {
-  getCreatePricingPoolFeedback,
-  getCreatePricingExchangeFeedback,
-  getBuyDTFeedback,
-  getCreateFreePricingFeedback,
-  getDispenseFeedback
-} from '@utils/feedback'
-import { useWeb3 } from '@context/Web3'
-import { getOceanConfig } from '@utils/ocean'
-
-interface UsePricing {
-  getDTSymbol: (ddo: Asset) => Promise<string>
-  getDTName: (ddo: Asset) => Promise<string>
-  mint: (tokensToMint: string, ddo: Asset) => Promise<TransactionReceipt | void>
-  buyDT: (
-    amountDataToken: number | string,
-    accessDetails: AccessDetails,
-    ddo: Asset
-  ) => Promise<TransactionReceipt | void>
-  pricingStep?: number
-  pricingStepText?: string
-  pricingError?: string
-  pricingIsLoading: boolean
-}
-
-function usePricing(): UsePricing {
-  const { accountId, networkId } = useWeb3()
-  const [pricingIsLoading, setPricingIsLoading] = useState(false)
-  const [pricingStep, setPricingStep] = useState<number>()
-  const [pricingStepText, setPricingStepText] = useState<string>()
-  const [pricingError, setPricingError] = useState<string>()
-  const [oceanConfig, setOceanConfig] = useState<Config>()
-
-  // Grab ocen config based on passed networkId
-  useEffect(() => {
-    if (!networkId) return
-
-    const oceanConfig = getOceanConfig(networkId)
-    setOceanConfig(oceanConfig)
-  }, [networkId])
-
-  async function getDTSymbol(ddo: Asset): Promise<string> {
-    if (!accountId) return
-
-    const { datatokens } = ddo
-    return datatokens[0].symbol
-    // return dataTokenInfo
-    //   ? dataTokenInfo.symbol
-    //   : await ocean?.datatokens.getSymbol(dataTokenInfo.address)
-  }
-
-  async function getDTName(ddo: Asset): Promise<string> {
-    if (!accountId) return
-    const { datatokens } = ddo
-    return datatokens[0].name
-    // return dataTokenInfo
-    //   ? dataTokenInfo.name
-    //   : await ocean?.datatokens.getName(dataTokenInfo.address)
-  }
-
-  // Helper for setting steps & feedback for all flows
-  async function setStep(
-    index: number,
-    type: 'pool' | 'exchange' | 'free' | 'buy' | 'dispense',
-    ddo: Asset
-  ) {
-    const dtSymbol = await getDTSymbol(ddo)
-    setPricingStep(index)
-    if (!dtSymbol) return
-
-    let messages
-
-    switch (type) {
-      case 'pool':
-        messages = getCreatePricingPoolFeedback(dtSymbol)
-        break
-      case 'exchange':
-        messages = getCreatePricingExchangeFeedback(dtSymbol)
-        break
-      case 'free':
-        messages = getCreateFreePricingFeedback(dtSymbol)
-        break
-      case 'buy':
-        messages = getBuyDTFeedback(dtSymbol)
-        break
-      case 'dispense':
-        messages = getDispenseFeedback(dtSymbol)
-        break
-    }
-
-    setPricingStepText(messages[index])
-  }
-
-  async function mint(
-    tokensToMint: string,
-    ddo: Asset
-  ): Promise<TransactionReceipt | void> {
-    const { datatokens } = ddo
-    LoggerInstance.log('mint function', datatokens[0].address, accountId)
-    // const balance = new Decimal(
-    //   await ocean.datatokens.balance(dataTokenInfo.address, accountId)
-    // )
-    // const tokens = new Decimal(tokensToMint)
-    // if (tokens.greaterThan(balance)) {
-    //   const mintAmount = tokens.minus(balance)
-    //   const tx = await ocean.datatokens.mint(
-    //     dataTokenInfo.address,
-    //     accountId,
-    //     mintAmount.toString()
-    //   )
-    //   return tx
-    // }
-  }
-
-  async function buyDT(
-    amountDataToken: number | string,
-    accessDetails: AccessDetails,
-    ddo: Asset
-  ): Promise<TransactionReceipt | void> {
-    if (!accountId) return
-
-    let tx
-
-    try {
-      setPricingIsLoading(true)
-      setPricingError(undefined)
-      setStep(1, 'buy', ddo)
-
-      LoggerInstance.log('Price found for buying', accessDetails)
-      Decimal.set({ precision: 18 })
-
-      switch (accessDetails?.type) {
-        case 'dynamic': {
-          const oceanAmmount = new Decimal(accessDetails.price)
-            .times(1.05)
-            .toString()
-          const maxPrice = new Decimal(accessDetails.price).times(2).toString()
-
-          setStep(2, 'buy', ddo)
-          LoggerInstance.log(
-            'Buying token from pool',
-            accessDetails,
-            accountId,
-            oceanAmmount,
-            maxPrice
-          )
-          // tx = await ocean.pool.buyDT(
-          //   accountId,
-          //   price.address,
-          //   String(amountDataToken),
-          //   oceanAmmount,
-          //   maxPrice
-          // )
-          setStep(3, 'buy', ddo)
-          LoggerInstance.log('DT buy response', tx)
-          break
-        }
-        case 'fixed': {
-          if (!oceanConfig.oceanTokenAddress) {
-            LoggerInstance.error(`'oceanTokenAddress' not set in oceanConfig`)
-            return
-          }
-          if (!oceanConfig.fixedRateExchangeAddress) {
-            LoggerInstance.error(
-              `'fixedRateExchangeAddress' not set in oceanConfig`
-            )
-            return
-          }
-          LoggerInstance.log(
-            'Buying token from exchange',
-            accessDetails,
-            accountId
-          )
-          // await ocean.datatokens.approve(
-          //   oceanConfig.oceanTokenAddress,
-          //   oceanConfig.fixedRateExchangeAddress,
-          //   `${price.value}`,
-          //   accountId
-          // )
-          setStep(2, 'buy', ddo)
-          // tx = await ocean.fixedRateExchange.buyDT(
-          //   price.address,
-          //   `${amountDataToken}`,
-          //   accountId
-          // )
-          setStep(3, 'buy', ddo)
-          LoggerInstance.log('DT exchange buy response', tx)
-          break
-        }
-        case 'free': {
-          setStep(1, 'dispense', ddo)
-          // const isDispensable = await ocean.OceanDispenser.isDispensable(
-          //   ddo?.services[0].datatokenAddress,
-          //   accountId,
-          //   '1'
-          // )
-
-          // if (!isDispensable) {
-          //   LoggerInstance.error(
-          //     `Dispenser for ${ddo?.services[0].datatokenAddress} failed to dispense`
-          //   )
-          //   return
-          // }
-
-          // tx = await ocean.OceanDispenser.dispense(
-          //   ddo?.services[0].datatokenAddress,
-          //   accountId,
-          //   '1'
-          // )
-          setStep(2, 'dispense', ddo)
-          LoggerInstance.log('DT dispense response', tx)
-          break
-        }
-      }
-    } catch (error) {
-      setPricingError(error.message)
-      LoggerInstance.error(error)
-    } finally {
-      setStep(0, 'buy', ddo)
-      setPricingStepText(undefined)
-      setPricingIsLoading(false)
-    }
-
-    return tx
-  }
-
-  return {
-    getDTSymbol,
-    getDTName,
-    buyDT,
-    mint,
-    pricingStep,
-    pricingStepText,
-    pricingIsLoading,
-    pricingError
-  }
-}
-
-export { usePricing }
-export default usePricing

src/@hooks/useSiteMetadata/index.ts

@@ -1,12 +1,6 @@
 import { UseSiteMetadata } from './types'
-import siteContent from '../../../content/site.json'
+import { getSiteMetadata } from '@utils/siteConfig'
-import appConfig from '../../../app.config'
 
 export function useSiteMetadata(): UseSiteMetadata {
-  const siteMeta: UseSiteMetadata = {
+  return getSiteMetadata()
-    ...siteContent,
-    appConfig
-  }
-
-  return siteMeta
 }

src/@hooks/useSiteMetadata/types.ts

@@ -23,6 +23,12 @@ export interface UseSiteMetadata {
     chainIds: number[]
     chainIdsSupported: number[]
     marketFeeAddress: string
+    publisherMarketOrderFee: string
+    publisherMarketPoolSwapFee: string
+    publisherMarketFixedSwapFee: string
+    consumeMarketOrderFee: string
+    consumeMarketPoolSwapFee: string
+    consumeMarketFixedSwapFee: string
     currencies: string[]
     portisId: string
     allowFixedPricing: string

src/@types/Price.d.ts

@@ -1,14 +1,54 @@
+import { ProviderFees } from '@oceanprotocol/lib'
+
+/**
+ * @interface OrderPriceAndFee
+ * @prop {string}  price total price including fees
+ * @prop {string}  publisherMarketOrderFee fee received by the market where the asset was published. It is set on erc20 creation. It is a absolute value
+ * @prop {string}  publisherMarketPoolSwapFee fee received by the market where the asset was published on any swap (pool or fre). Absolute value based on the configured percentage
+ * @prop {string}  publisherMarketFixedSwapFee fee received by the market where the asset was published on any swap (pool or fre). Absolute value based on the configured percentage
+ * @prop {string}  consumeMarketOrderFee fee received by the market where the asset is ordered. It is set on erc20 creation. It is a absolute value
+ * @prop {string}  consumeMarketPoolSwapFee fee received by the market where the asset is ordered on any swap (pool or fre). Absolute value based on the configured percentage
+ * @prop {string}  consumeMarketFixedSwapFee fee received by the market where the asset is ordered on any swap (pool or fre). Absolute value based on the configured percentage
+ * @prop {string}  liquidityProviderSwapFee fee received by the liquidity providers of the pool. It is a percentage  ( ex 50% means liquidityProviderSwapFee=0.5)
+ * @prop {ProviderFees} providerFee received from provider
+ * @prop {string}  opcFee ocean protocol community fee, Absolute value based on the configured percentage
+ */
+interface OrderPriceAndFees {
+  price: string
+  publisherMarketOrderFee: string
+  publisherMarketPoolSwapFee: string
+  publisherMarketFixedSwapFee: string
+  consumeMarketOrderFee: string
+  consumeMarketPoolSwapFee: string
+  consumeMarketFixedSwapFee: string
+  liquidityProviderSwapFee: string
+  providerFee: ProviderFees
+  opcFee: string
+}
+
+/**
+ * @interface AccessDetails
+ * @prop {'dynamic' | 'fixed' | 'free' | ''}  type
+ * @prop {string} price can be either spotPrice/rate
+ * @prop {string} addressOrId if type is dynamic this is the pool address, for fixed/free this is an id.
+ * @prop {TokenInfo} baseToken
+ * @prop {TokenInfo} datatoken
+ * @prop {bool} isPurchasable checks if you can buy a datatoken from fixed rate exchange/pool/dispenser. For pool it also checks if there is enough dt liquidity
+ * @prop {bool} isOwned checks if there are valid orders for this, it also takes in consideration timeout
+ * @prop {string} validOrderTx  the latest valid order tx, it also takes in consideration timeout
+ * @prop {string} publisherMarketOrderFee this is here just because it's more efficient, it's allready in the query
+ * @prop {FeeInfo} feeInfo  values of the relevant fees
+ */
 interface AccessDetails {
   type: 'dynamic' | 'fixed' | 'free' | ''
-  price: number
+  price: string
-  // if type is dynamic this is the pool address, for fixed/free this is an id.
   addressOrId: string
   baseToken: TokenInfo
   datatoken: TokenInfo
-  isConsumable?: boolean
+  isPurchasable?: boolean
-  // if there are valid orders for this
+  isOwned: bool
-  owned: bool
   validOrderTx: string
+  publisherMarketOrderFee: string
 }
 
 interface PriceOptions {
@@ -20,4 +60,5 @@ interface PriceOptions {
   weightOnOcean: string
   // easier to keep this as number for Yup input validation
   swapFee: number
+  freeAgreement: boolean
 }

src/@types/aquarius/SearchResponse.d.ts

@@ -20,7 +20,10 @@ interface SearchResponse {
   _scroll_id?: string | undefined
   _shards: ShardsResponse
   hits: {
-    total: number
+    total: {
+      relation: string
+      value: number
+    }
     max_score: number
     hits: Array<{
       _index: string

src/@utils/SvgWaves.ts

@@ -0,0 +1,191 @@
+import { computeControlPoints } from './bezier-spline'
+import { randomIntFromInterval } from './numbers'
+
+export interface WaveProperties {
+  width?: number
+  height?: number
+  color?: string
+  fill?: boolean
+  layerCount?: number
+  pointsPerLayer?: number
+  variance?: number
+  maxOpacity?: number
+  opacitySteps?: number
+}
+
+class Point {
+  x: number
+  y: number
+
+  constructor(x: number, y: number) {
+    this.x = Math.floor(x)
+    this.y = Math.floor(y)
+  }
+}
+
+enum WaveColors {
+  Violet = '#e000cf',
+  Pink = '#ff4092',
+  Grey = '#8b98a9'
+}
+
+export class SvgWaves {
+  properties: WaveProperties
+  layers: Point[][]
+
+  static xmlns = 'http://www.w3.org/2000/svg'
+
+  /**
+   * Helper function to get randomly generated WaveProperties
+   * These are generated with a focus on small file size for the svg
+   * meaning low character count.
+   * - width & height: default is 2 digits max (99)
+   * - color pink is selected per default
+   * - set coloring to fill or stroke (fill is selected per default)
+   * - randomly decide if fill or stroke coloring should be used
+   * - create 4 layers with 4 - 5 points per layers
+   *     -> results in random looking, yet small enough svgs
+   * - variance between 0.5 and 0.7 returns smooth & different results
+   *
+   * @returns new randomly generated WaveProperties
+   */
+  static getProps(): WaveProperties {
+    return {
+      width: 99,
+      height: 99,
+      color: WaveColors.Pink,
+      fill: true,
+      layerCount: 4,
+      pointsPerLayer: randomIntFromInterval(3, 4),
+      variance: Math.random() * 0.2 + 0.5, // 0.5 - 0.7
+      maxOpacity: 255, // 0xff
+      opacitySteps: 68 // 0x44
+    }
+  }
+
+  static generatePoint(
+    x: number,
+    y: number,
+    moveX: number,
+    moveY: number,
+    width: number
+  ): Point {
+    const varianceY = y - moveY / 2 + Math.random() * moveY
+    const varianceX =
+      x === 0 || x === width ? x : x - moveX / 2 + Math.random() * moveX
+    return new Point(varianceX, varianceY)
+  }
+
+  constructor() {
+    this.properties = SvgWaves.getProps()
+    this.layers = this.generateLayers()
+  }
+
+  generateLayers(): Point[][] {
+    const { width, height, layerCount, pointsPerLayer, variance } =
+      this.properties
+
+    const cellWidth = width / pointsPerLayer
+    const cellHeight = height / layerCount
+
+    // define movement constraints for point generation
+    // lower smoothness results in steeper curves in waves
+    const horizontalSmoothness = 0.5
+    const moveX = cellWidth * variance * (1 - horizontalSmoothness)
+    const moveY = cellHeight * variance
+
+    const layers = []
+    for (let y = cellHeight; y < height; y += cellHeight) {
+      const points = []
+      for (let x = 0; x <= width; x += cellWidth) {
+        points.push(SvgWaves.generatePoint(x, y, moveX, moveY, width))
+      }
+      layers.push(points)
+    }
+    return layers
+  }
+
+  generateSvg(): Element {
+    const svg = document.createElementNS(SvgWaves.xmlns, 'svg')
+    svg.setAttribute('width', this.properties.width.toString())
+    svg.setAttribute('height', this.properties.height.toString())
+    svg.setAttribute('fill', this.properties.fill ? undefined : 'transparent')
+    svg.setAttribute('xmlns', SvgWaves.xmlns)
+
+    for (let i = 0; i < this.layers.length; i++) {
+      const path = this.generatePath(
+        this.layers[i],
+        this.getOpacityForLayer(i + 1)
+      )
+      svg.appendChild(path)
+    }
+    return svg
+  }
+
+  generatePath(points: Point[], opacity = 'ff'): Element {
+    const xPoints = points.map((p) => Math.floor(p.x))
+    const yPoints = points.map((p) => Math.floor(p.y))
+
+    // get bezier control points
+    const xControlPoints = computeControlPoints(xPoints)
+    const yControlPoints = computeControlPoints(yPoints)
+
+    // Should the path be closed & filled or stroke only
+    const closed = this.properties.fill
+
+    // For closed paths define bottom corners as start & end point
+    const bottomLeftPoint = new Point(0, this.properties.height)
+    const bottomRightPoint = new Point(
+      this.properties.width,
+      this.properties.height
+    )
+    const startPoint = closed ? bottomLeftPoint : points[0]
+    const endPoint = closed ? bottomRightPoint : points[points.length - 1]
+
+    // start constructing the 'd' attribute for the <path>
+    let path = `M${startPoint.x},${startPoint.y}`
+
+    // if starting in bottom corner, move to start of wave first
+    if (closed) path += `L${xPoints[0]},${yPoints[0]}`
+
+    // add path curves
+    for (let i = 0; i < xPoints.length - 1; i++) {
+      path +=
+        `C${xControlPoints.p1[i]},${yControlPoints.p1[i]} ` +
+        `${xControlPoints.p2[i]},${yControlPoints.p2[i]} ` +
+        `${xPoints[i + 1]},${yPoints[i + 1]}`
+    }
+
+    path = closed
+      ? `${path}L${endPoint.x},${endPoint.y}Z` // if closing in bottom corners move there and close
+      : `${path}AZ` // else just close the path
+
+    // create the path element
+    const svgPath = document.createElementNS(SvgWaves.xmlns, 'path')
+    const colorStyle = closed ? 'fill' : 'stroke'
+    svgPath.setAttributeNS(
+      null,
+      colorStyle,
+      `${this.properties.color}${opacity}`
+    )
+    svgPath.setAttributeNS(null, 'd', path)
+
+    return svgPath
+  }
+
+  getOpacityForLayer(layer: number): string {
+    const { layerCount, maxOpacity, opacitySteps } = this.properties
+
+    const minOpacity = maxOpacity - (layerCount - 1) * opacitySteps
+    // calculate decimal opacity value for layer
+    const opacityDec = minOpacity + layer * opacitySteps
+
+    // translate to hex string
+    return opacityDec.toString(16)
+  }
+
+  setProps(properties: WaveProperties): void {
+    this.properties = { ...SvgWaves.getProps(), ...properties }
+    this.layers = this.generateLayers()
+  }
+}

src/@utils/accessDetailsAndPricing.ts

@@ -8,8 +8,13 @@ import {
   TokensPriceQuery,
   TokensPriceQuery_tokens as TokensPrice
 } from '../@types/subgraph/TokensPriceQuery'
-import { Asset } from '@oceanprotocol/lib'
+import { Asset, ProviderInstance } from '@oceanprotocol/lib'
 import { AssetExtended } from 'src/@types/AssetExtended'
+import { calculateBuyPrice } from './pool'
+import { getFixedBuyPrice } from './fixedRateExchange'
+import { getSiteMetadata } from './siteConfig'
+import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
+import Decimal from 'decimal.js'
 
 const TokensPriceQuery = gql`
   query TokensPriceQuery($datatokenIds: [ID!], $account: String) {
@@ -39,6 +44,7 @@ const TokensPriceQuery = gql`
       }
       fixedRateExchanges {
         id
+        exchangeId
         price
         baseToken {
           symbol
@@ -99,6 +105,7 @@ const TokenPriceQuery = gql`
       }
       fixedRateExchanges {
         id
+        exchangeId
         price
         baseToken {
           symbol
@@ -132,25 +139,33 @@ const TokenPriceQuery = gql`
   }
 `
 
+// TODO: fill in fees after subgraph update
 function getAccessDetailsFromTokenPrice(
   tokenPrice: TokenPrice | TokensPrice,
   timeout?: number
 ): AccessDetails {
   const accessDetails = {} as AccessDetails
-
+  if (
-  if (!timeout && !tokenPrice.orders && tokenPrice.orders.length > 0) {
+    tokenPrice &&
+    timeout &&
+    tokenPrice.orders &&
+    tokenPrice.orders.length > 0
+  ) {
     const order = tokenPrice.orders[0]
-    accessDetails.owned = Date.now() / 1000 - order.createdTimestamp < timeout
+    accessDetails.isOwned = Date.now() / 1000 - order.createdTimestamp < timeout
     accessDetails.validOrderTx = order.tx
   }
 
+  // TODO: fetch order fee from sub query
+  accessDetails.publisherMarketOrderFee = '0'
+
   // free is always the best price
   if (tokenPrice.dispensers && tokenPrice.dispensers.length > 0) {
     const dispenser = tokenPrice.dispensers[0]
     accessDetails.type = 'free'
-    accessDetails.addressOrId = dispenser.id
+    accessDetails.addressOrId = dispenser.token.id
-    accessDetails.price = 0
+    accessDetails.price = '0'
-    accessDetails.isConsumable = dispenser.active
+    accessDetails.isPurchasable = dispenser.active
     accessDetails.datatoken = {
       address: dispenser.token.id,
       name: dispenser.token.name,
@@ -164,21 +179,21 @@ function getAccessDetailsFromTokenPrice(
     tokenPrice.fixedRateExchanges &&
     tokenPrice.fixedRateExchanges.length > 0
   ) {
-    const fre = tokenPrice.fixedRateExchanges[0]
+    const fixed = tokenPrice.fixedRateExchanges[0]
     accessDetails.type = 'fixed'
-    accessDetails.addressOrId = fre.id
+    accessDetails.addressOrId = fixed.exchangeId
-    accessDetails.price = fre.price
+    accessDetails.price = fixed.price
     // in theory we should check dt balance here, we can skip this because in the market we always create fre with minting capabilities.
-    accessDetails.isConsumable = fre.active
+    accessDetails.isPurchasable = fixed.active
     accessDetails.baseToken = {
-      address: fre.baseToken.address,
+      address: fixed.baseToken.address,
-      name: fre.baseToken.name,
+      name: fixed.baseToken.name,
-      symbol: fre.baseToken.symbol
+      symbol: fixed.baseToken.symbol
     }
     accessDetails.datatoken = {
-      address: fre.datatoken.address,
+      address: fixed.datatoken.address,
-      name: fre.datatoken.name,
+      name: fixed.datatoken.name,
-      symbol: fre.datatoken.symbol
+      symbol: fixed.datatoken.symbol
     }
     return accessDetails
   }
@@ -188,10 +203,10 @@ function getAccessDetailsFromTokenPrice(
     const pool = tokenPrice.pools[0]
     accessDetails.type = 'dynamic'
     accessDetails.addressOrId = pool.id
-    // TODO: this needs to be consumePrice
     accessDetails.price = pool.spotPrice
     // TODO: pool.datatokenLiquidity > 3 is kinda random here, we shouldn't run into this anymore now , needs more thinking/testing
-    accessDetails.isConsumable = pool.isFinalized && pool.datatokenLiquidity > 3
+    accessDetails.isPurchasable =
+      pool.isFinalized && pool.datatokenLiquidity > 3
     accessDetails.baseToken = {
       address: pool.baseToken.address,
       name: pool.baseToken.name,
@@ -208,20 +223,92 @@ function getAccessDetailsFromTokenPrice(
 }
 
 /**
- * returns various consume details for the desired datatoken
+ * This will be used to get price including feed before ordering
- * @param chain chain on which the datatoken is preset
+ * @param {AssetExtended} asset
- * @param datatokenAddress address of the datatoken
+ * @return {Promise<OrdePriceAndFee>}
- * @param timeout timeout of the service, only needed if you want order details like owned and validOrderId
+ */
- * @param account account that wants to consume, only needed if you want order details like owned and validOrderId
+export async function getOrderPriceAndFees(
- * @returns AccessDetails
+  asset: AssetExtended,
+  accountId?: string
+): Promise<OrderPriceAndFees> {
+  const orderPriceAndFee = {
+    price: '0',
+    publisherMarketOrderFee: '0',
+    publisherMarketPoolSwapFee: '0',
+    publisherMarketFixedSwapFee: '0',
+    consumeMarketOrderFee: '0',
+    consumeMarketPoolSwapFee: '0',
+    consumeMarketFixedSwapFee: '0',
+    providerFee: {},
+    opcFee: '0'
+  } as OrderPriceAndFees
+  const { accessDetails } = asset
+  const { appConfig } = getSiteMetadata()
+
+  // fetch publish market order fee
+  orderPriceAndFee.publisherMarketOrderFee =
+    asset.accessDetails.publisherMarketOrderFee
+  // fetch consume market order fee
+  orderPriceAndFee.consumeMarketOrderFee = appConfig.consumeMarketOrderFee
+  // fetch provider fee
+  const initializeData = await ProviderInstance.initialize(
+    asset.id,
+    asset.services[0].id,
+    0,
+    accountId,
+    asset.services[0].serviceEndpoint
+  )
+  orderPriceAndFee.providerFee = initializeData.providerFee
+
+  // fetch price and swap fees
+  switch (accessDetails.type) {
+    case 'dynamic': {
+      const poolPrice = await calculateBuyPrice(accessDetails, asset.chainId)
+      orderPriceAndFee.price = poolPrice.tokenAmount
+      orderPriceAndFee.liquidityProviderSwapFee =
+        poolPrice.liquidityProviderSwapFeeAmount
+      orderPriceAndFee.publisherMarketPoolSwapFee =
+        poolPrice.publishMarketSwapFeeAmount
+      orderPriceAndFee.consumeMarketPoolSwapFee =
+        poolPrice.consumeMarketSwapFeeAmount
+      break
+    }
+    case 'fixed': {
+      const fixed = await getFixedBuyPrice(accessDetails, asset.chainId)
+      orderPriceAndFee.price = fixed.baseTokenAmount
+      orderPriceAndFee.opcFee = fixed.oceanFeeAmount
+      orderPriceAndFee.publisherMarketFixedSwapFee = fixed.marketFeeAmount
+      // hack because we don't have it in contracts
+      orderPriceAndFee.consumeMarketFixedSwapFee = fixed.consumeMarketFeeAmount
+
+      break
+    }
+  }
+
+  // calculate full price, we assume that all the values are in ocean, otherwise this will be incorrect
+  orderPriceAndFee.price = new Decimal(orderPriceAndFee.price)
+    .add(new Decimal(orderPriceAndFee.consumeMarketOrderFee))
+    .add(new Decimal(orderPriceAndFee.publisherMarketOrderFee))
+    .add(new Decimal(orderPriceAndFee.providerFee.providerFeeAmount))
+    .toString()
+  return orderPriceAndFee
+}
+
+/**
+ * @param {number} chain
+ * @param {string} datatokenAddress
+ * @param {number=} timeout timout of the service, this is needed to return order details
+ * @param {string=} account account that wants to buy, is needed to return order details
+ * @param {bool=} includeOrderPriceAndFees if false price will be spot price (pool) and rate (fre), if true you will get the order price including fees !! fees not yet done
+ * @returns {Promise<AccessDetails>}
  */
 export async function getAccessDetails(
-  chain: number,
+  chainId: number,
   datatokenAddress: string,
   timeout?: number,
   account = ''
 ): Promise<AccessDetails> {
-  const queryContext = getQueryContext(Number(chain))
+  const queryContext = getQueryContext(Number(chainId))
   const tokenQueryResult: OperationResult<
     TokenPriceQuery,
     { datatokenId: string; account: string }
@@ -229,7 +316,7 @@ export async function getAccessDetails(
     TokenPriceQuery,
     {
       datatokenId: datatokenAddress.toLowerCase(),
-      account: account.toLowerCase()
+      account: account?.toLowerCase()
     },
     queryContext
   )
@@ -247,15 +334,14 @@ export async function getAccessDetailsForAssets(
   const chainAssetLists: { [key: number]: string[] } = {}
 
   for (const asset of assets) {
-    //  harcoded until we have chainId on assets
     if (chainAssetLists[asset.chainId]) {
       chainAssetLists[asset.chainId].push(
-        asset?.services[0].datatokenAddress.toLowerCase()
+        asset.services[0].datatokenAddress.toLowerCase()
       )
     } else {
       chainAssetLists[asset.chainId] = []
       chainAssetLists[asset.chainId].push(
-        asset?.services[0].datatokenAddress.toLowerCase()
+        asset.services[0].datatokenAddress.toLowerCase()
       )
     }
   }
@@ -264,20 +350,24 @@ export async function getAccessDetailsForAssets(
     const queryContext = getQueryContext(Number(chainKey))
     const tokenQueryResult: OperationResult<
       TokensPriceQuery,
-      { datatokenId: string; account: string }
+      { datatokenIds: [string]; account: string }
     > = await fetchData(
       TokensPriceQuery,
       {
         datatokenIds: chainAssetLists[chainKey],
-        account: account.toLowerCase()
+        account: account?.toLowerCase()
       },
       queryContext
     )
     tokenQueryResult.data?.tokens.forEach((token) => {
-      const accessDetails = getAccessDetailsFromTokenPrice(token)
       const currentAsset = assetsExtended.find(
         (asset) => asset.services[0].datatokenAddress.toLowerCase() === token.id
       )
+      const accessDetails = getAccessDetailsFromTokenPrice(
+        token,
+        currentAsset?.services[0]?.timeout
+      )
+
       currentAsset.accessDetails = accessDetails
     })
   }

src/@utils/aquarius.ts

@@ -79,7 +79,7 @@ export function transformQueryResult(
   result.results = (queryResult.hits.hits || []).map(
     (hit) => hit._source as Asset
   )
-  result.totalResults = queryResult.hits.total
+  result.totalResults = queryResult.hits.total.value
   result.totalPages =
     result.totalResults / size < 1
       ? Math.floor(result.totalResults / size)
@@ -163,7 +163,7 @@ export async function getAssetsFromDidList(
 
     const baseParams = {
       chainIds: chainIds,
-      filters: [getFilterTerm('id', didList)],
+      filters: [getFilterTerm('_id', didList)],
       ignorePurgatory: true
     } as BaseQueryParams
     const query = generateBaseQuery(baseParams)
@@ -180,19 +180,21 @@ export async function retrieveDDOListByDIDs(
   chainIds: number[],
   cancelToken: CancelToken
 ): Promise<Asset[]> {
+  if (didList?.length === 0 || chainIds?.length === 0) return []
+
   try {
-    if (didList?.length === 0 || chainIds?.length === 0) return []
     const orderedDDOListByDIDList: Asset[] = []
     const baseQueryparams = {
       chainIds,
-      filters: [getFilterTerm('id', didList)],
+      filters: [getFilterTerm('_id', didList)],
       ignorePurgatory: true
     } as BaseQueryParams
     const query = generateBaseQuery(baseQueryparams)
     const result = await queryMetadata(query, cancelToken)
+
     didList.forEach((did: string) => {
       const ddo = result.results.find((ddo: Asset) => ddo.id === did)
-      orderedDDOListByDIDList.push(ddo)
+      if (ddo) orderedDDOListByDIDList.push(ddo)
     })
     return orderedDDOListByDIDList
   } catch (error) {
@@ -330,22 +332,21 @@ export async function getPublishedAssets(
 }
 
 export async function getDownloadAssets(
-  didList: string[],
+  dtList: string[],
   tokenOrders: OrdersData[],
   chainIds: number[],
   cancelToken: CancelToken
 ): Promise<DownloadedAsset[]> {
+  const baseQueryparams = {
+    chainIds,
+    filters: [
+      getFilterTerm('services.datatokenAddress', dtList),
+      getFilterTerm('services.type', 'access')
+    ]
+  } as BaseQueryParams
+  const query = generateBaseQuery(baseQueryparams)
   try {
-    const baseQueryparams = {
-      chainIds,
-      filters: [
-        getFilterTerm('id', didList),
-        getFilterTerm('service.type', 'access')
-      ]
-    } as BaseQueryParams
-    const query = generateBaseQuery(baseQueryparams)
     const result = await queryMetadata(query, cancelToken)
-
     const downloadedAssets: DownloadedAsset[] = result.results
       .map((asset) => {
         const order = tokenOrders.find(
@@ -365,6 +366,10 @@ export async function getDownloadAssets(
 
     return downloadedAssets
   } catch (error) {
-    LoggerInstance.error(error.message)
+    if (axios.isCancel(error)) {
+      LoggerInstance.log(error.message)
+    } else {
+      LoggerInstance.error(error.message)
+    }
   }
 }

src/@utils/bezier-spline.ts

@@ -0,0 +1,63 @@
+/* bezier-spline.js
+ *
+ * computes cubic bezier coefficients to generate a smooth
+ * line through specified points. couples with SVG graphics
+ * for interactive processing.
+ *
+ * For more info see:
+ * http://www.particleincell.com/2012/bezier-splines/
+ *
+ * Lubos Brieda, Particle In Cell Consulting LLC, 2012
+ * you may freely use this algorithm in your codes however where feasible
+ * please include a link/reference to the source article
+ */
+
+/* computes control points given knots K, this is the brain of the operation */
+export function computeControlPoints(K: number[]) {
+  const p1 = []
+  const p2 = []
+  const n = K.length - 1
+
+  /* rhs vector */
+  const a = []
+  const b = []
+  const c = []
+  const r = []
+
+  /* left most segment */
+  a[0] = 0
+  b[0] = 2
+  c[0] = 1
+  r[0] = K[0] + 2 * K[1]
+
+  /* internal segments */
+  for (let i = 1; i < n - 1; i++) {
+    a[i] = 1
+    b[i] = 4
+    c[i] = 1
+    r[i] = 4 * K[i] + 2 * K[i + 1]
+  }
+
+  /* right segment */
+  a[n - 1] = 2
+  b[n - 1] = 7
+  c[n - 1] = 0
+  r[n - 1] = 8 * K[n - 1] + K[n]
+
+  /* solves Ax=b with the Thomas algorithm (from Wikipedia) */
+  for (let i = 1; i < n; i++) {
+    const m: number = a[i] / b[i - 1]
+    b[i] = b[i] - m * c[i - 1]
+    r[i] = r[i] - m * r[i - 1]
+  }
+
+  p1[n - 1] = r[n - 1] / b[n - 1]
+  for (let i = n - 2; i >= 0; --i) p1[i] = (r[i] - c[i] * p1[i + 1]) / b[i]
+
+  /* we have p1, now compute p2 */
+  for (let i = 0; i < n - 1; i++) p2[i] = 2 * K[i + 1] - p1[i + 1]
+
+  p2[n - 1] = 0.5 * (K[n] + p1[n - 1])
+
+  return { p1: p1.map((p) => Math.floor(p)), p2: p2.map((p) => Math.floor(p)) }
+}

src/@utils/feedback.ts

@@ -1,89 +1,19 @@
-export const feedback: { [key in number]: string } = {
+// TODO: can be better
-  99: 'Decrypting file URL...',
+export function getOrderFeedback(
-  0: '1/3 Looking for data token. Buying if none found...',
+  baseTokenSymbol: string,
-  1: '2/3 Transfering data token.',
+  datatokenSymbol: string
-  2: '3/3 Payment confirmed. Requesting access...'
+): { [key in number]: string } {
-}
+  return {
-
+    0: `Approving and buying one ${datatokenSymbol} from pool`,
-export const publishFeedback: { [key in number]: string } = {
+    1: `Ordering asset`,
-  0: '1/5 Creating datatoken ...',
+    2: `Approving ${baseTokenSymbol} and ordering asset`,
-  2: '2/5 Encrypting files ...',
+    3: 'Generating signature to access download url'
-  4: '3/5 Storing ddo ...',
+  }
-  6: '4/5 Minting tokens ...',
-  8: '5/5 Asset published succesfully'
-}
-
-// TODO: do something with this object,
-// consumeStep should probably return one of those strings
-// instead of just a number
-export const consumeFeedback: { [key in number]: string } = {
-  ...feedback,
-  3: '3/3 Access granted. Consuming file...'
 }
 
 // TODO: customize for compute
 export const computeFeedback: { [key in number]: string } = {
-  0: '1/3 Ordering asset...',
+  0: 'Ordering asset...',
-  1: '2/3 Transfering data token.',
+  1: 'Transfering datatoken.',
-  2: '3/3 Access granted. Starting job...'
+  2: 'Access granted. Starting job...'
-}
-
-export function getCreatePricingPoolFeedback(dtSymbol: string): {
-  [key: number]: string
-} {
-  return {
-    99: `Minting ${dtSymbol} ...`,
-    0: 'Creating pool ...',
-    1: `Approving ${dtSymbol} ...`,
-    2: 'Approving OCEAN ...',
-    3: 'Setup pool ...',
-    4: 'Pool created.'
-  }
-}
-
-export function getCreatePricingExchangeFeedback(dtSymbol: string): {
-  [key: number]: string
-} {
-  return {
-    99: `Minting ${dtSymbol} ...`,
-    0: 'Creating exchange ...',
-    1: `Approving ${dtSymbol} ...`,
-    2: 'Fixed exchange created.'
-  }
-}
-
-export function getCreateFreePricingFeedback(dtSymbol: string): {
-  [key: number]: string
-} {
-  return {
-    99: `Creating ${dtSymbol} faucet...`,
-    0: 'Setting faucet as minter ...',
-    1: 'Approving minter...',
-    2: 'Faucet created.'
-  }
-}
-
-export function getBuyDTFeedback(dtSymbol: string): { [key: number]: string } {
-  return {
-    1: '1/3 Approving OCEAN ...',
-    2: `2/3 Buying ${dtSymbol} ...`,
-    3: `3/3 ${dtSymbol} bought.`
-  }
-}
-
-export function getSellDTFeedback(dtSymbol: string): { [key: number]: string } {
-  return {
-    1: '1/3 Approving OCEAN ...',
-    2: `2/3 Selling ${dtSymbol} ...`,
-    3: `3/3 ${dtSymbol} sold.`
-  }
-}
-
-export function getDispenseFeedback(dtSymbol: string): {
-  [key: number]: string
-} {
-  return {
-    1: `1/2 Requesting ${dtSymbol}...`,
-    2: `2/2 Received ${dtSymbol}.`
-  }
 }

src/@utils/fixedRateExchange.ts

@@ -0,0 +1,34 @@
+import { FixedRateExchange, PriceAndFees } from '@oceanprotocol/lib'
+import { AccessDetails } from 'src/@types/Price'
+import Web3 from 'web3'
+import { getOceanConfig } from './ocean'
+import { getDummyWeb3 } from './web3'
+
+/**
+ * This is used to calculate the price to buy one datatoken from a fixed rate exchange. You need to pass either a web3 object or a chainId. If you pass a chainId a dummy web3 object will be created
+ * @param {AccessDetails} accessDetails
+ * @param {number} chainId
+ * @param {Web3?} web3
+ * @return {Promise<PriceAndFees>}
+ */
+export async function getFixedBuyPrice(
+  accessDetails: AccessDetails,
+  chainId?: number,
+  web3?: Web3
+): Promise<PriceAndFees> {
+  if (!web3 && !chainId)
+    throw new Error("web3 and chainId can't be undefined at the same time!")
+
+  if (!web3) {
+    web3 = await getDummyWeb3(chainId)
+  }
+
+  const config = getOceanConfig(chainId)
+
+  const fixed = new FixedRateExchange(web3, config.fixedRateExchangeAddress)
+  const estimatedPrice = await fixed.calcBaseInGivenOutDT(
+    accessDetails.addressOrId,
+    '1'
+  )
+  return estimatedPrice
+}

src/@utils/markdownPages.tsx

@@ -6,8 +6,8 @@ import matter from 'gray-matter'
 // Next.js specifics to be used in getStaticProps / getStaticPaths
 // to automatically generate pages from Markdown files in `src/pages/[slug].tsx`.
 //
-const pagesDirectory = join(process.cwd(), 'content', 'pages')
+// const pagesDirectory = join(process.cwd(), 'content', 'pages')
-
+const pagesDirectory = './content/pages'
 export interface PageData {
   slug: string
   frontmatter: { [key: string]: any }

src/@utils/nft.ts

@@ -1,4 +1,4 @@
-import { renderStaticWaves } from './oceanWaves'
+import { SvgWaves } from './SvgWaves'
 
 // https://docs.opensea.io/docs/metadata-standards
 export interface NftMetadata {
@@ -21,6 +21,7 @@ function encodeSvg(svgString: string): string {
         ? '<svg'
         : '<svg xmlns="http://www.w3.org/2000/svg"'
     )
+    .replace('></path>', '/>')
     .replace(/"/g, "'")
     .replace(/%/g, '%25')
     .replace(/#/g, '%23')
@@ -32,41 +33,40 @@ function encodeSvg(svgString: string): string {
 }
 
 export function generateNftMetadata(): NftMetadata {
-  // TODO: crop image properly in the end as generated SVG waves are a super-wide image,
+  const waves = new SvgWaves()
-  // and add a filled background deciding on either black or white.
+  const svg = waves.generateSvg()
-  const image = renderStaticWaves()
+
-  // const image = new XMLSerializer().serializeToString(waves)
+  // TODO: figure out if also image URI needs base64 encoding
-  // const image = `<svg><path d="M0 10.4304L16.3396 10.4304L8.88727 17.6833L10.2401 19L20 9.5L10.2401 0L8.88727 1.31491L16.3396 8.56959L0 8.56959V10.4304Z" /></svg>`
+  // e.g. 'data:image/svg+xml;base64,'
+  // generated SVG embedded as 'data:image/svg+xml' and encoded characters
+  const imageData = `data:image/svg+xml,${encodeSvg(svg.outerHTML)}`
 
   const newNft: NftMetadata = {
-    name: 'Ocean Asset v4 NFT',
+    name: 'Ocean Asset NFT',
     symbol: 'OCEAN-NFT',
     description: `This NFT represents an asset in the Ocean Protocol v4 ecosystem.`,
     // TODO: ideally this includes the final DID
     external_url: 'https://market.oceanprotocol.com',
     background_color: '141414', // dark background
-    // TODO: figure out if also image URI needs base64 encoding
+    image_data: imageData
-    // generated SVG embedded as 'data:image/svg+xml' and encoded characters
-    image_data: `data:image/svg+xml,${encodeSvg(image)}`
-    // generated SVG embedded as 'data:image/svg+xml;base64'
-    // image: `data:image/svg+xml;base64,${window?.btoa(image)}`
-    // image: `data:image/svg+xml;base64,${Buffer.from(image).toString('base64')}`
   }
 
   return newNft
 }
 
 export function generateNftCreateData(nftMetadata: NftMetadata): any {
+  // TODO: figure out if Buffer.from method is working in browser in final build
+  // as BTOA is deprecated.
+  // tokenURI: window?.btoa(JSON.stringify(nftMetadata))
+  const encodedMetadata = Buffer.from(JSON.stringify(nftMetadata)).toString(
+    'base64'
+  )
+
   const nftCreateData = {
     name: nftMetadata.name,
     symbol: nftMetadata.symbol,
     templateIndex: 1,
-    // Gas estimation fails if we add our huge tokenURI
+    tokenURI: `data:application/json;base64,${encodedMetadata}`
-    tokenURI: '{url:"https://coolImage.com, name: "just for test"}'
-    // TODO: figure out if Buffer.from method is working in browser in final build
-    // as BTOA is deprecated.
-    // tokenURI: window?.btoa(JSON.stringify(nftMetadata))
-    // tokenURI: Buffer.from(JSON.stringify(nftMetadata)).toString('base64') // should end up as data:application/json;base64
   }
 
   return nftCreateData

src/@utils/numbers.ts

@@ -24,3 +24,9 @@ export function compareAsBN(balance: string, price: string): boolean {
       return false
   }
 }
+
+// Random number from interval
+export function randomIntFromInterval(min: number, max: number): number {
+  // min and max are included
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}

src/@utils/oceanWaves.ts

@@ -1,49 +0,0 @@
-import * as d3 from 'd3'
-
-/*
- * Ocean Protocol D3 waves
- * https://oceanprotocol.com/art
- * Based off of Bostock's Circle Wave
- * https://bl.ocks.org/mbostock/2d466ec3417722e3568cd83fc35338e3
- */
-export function renderStaticWaves(): string {
-  const svg = d3.create('svg')
-  const width = 1000
-  const height = 250
-  const x = d3.scaleLinear().range([0, width])
-  const angles = d3.range(Math.random(), 4 * Math.PI, Math.PI / 20)
-
-  const path = svg
-    // .append('rect')
-    // .attr('fill', '#fff')
-    // .attr('width', '100%')
-    // .attr('height', '100%')
-    .append('g')
-    .attr('transform', `translate(${width / -4}, ${height / 2})`)
-    .attr('fill', 'none')
-    .attr('stroke-width', 2)
-    .selectAll('path')
-    .data(['#FF4092', '#E000CF', '#8B98A9', '#E2E2E2'])
-    .enter()
-    .append('path')
-    .attr('stroke', (d) => d)
-    .style('mix-blend-mode', 'darken')
-    .datum((d, i) => {
-      return d3
-        .line()
-        .curve(d3.curveBasisOpen)
-        .x((angles: any) => x(angles / 4))
-        .y((angles: any) => {
-          const t = d3.now() / 3000
-          return (
-            Math.cos(angles * 8 - (i * 2 * Math.PI) / 10 + t) *
-            Math.pow((2 + Math.cos(angles - t)) / 2, 4) *
-            15
-          )
-        })
-    })
-
-  path.attr('d', (d) => d(angles as any))
-
-  return `<svg>${svg.node().innerHTML}</svg>`
-}

src/@utils/order.ts

@@ -0,0 +1,101 @@
+import {
+  approve,
+  Datatoken,
+  FreOrderParams,
+  OrderParams,
+  ProviderInstance
+} from '@oceanprotocol/lib'
+import { AssetExtended } from 'src/@types/AssetExtended'
+import Web3 from 'web3'
+import { getOceanConfig } from './ocean'
+import { TransactionReceipt } from 'web3-eth'
+import { getSiteMetadata } from './siteConfig'
+import { OrderPriceAndFees } from 'src/@types/Price'
+
+/**
+ * For pool you need to buy the datatoken beforehand, this always assumes you want to order the first service
+ * @param web3
+ * @param asset
+ * @param accountId
+ * @returns {TransactionReceipt} receipt of the order
+ */
+export async function order(
+  web3: Web3,
+  asset: AssetExtended,
+  orderPriceAndFees: OrderPriceAndFees,
+  accountId: string
+): Promise<TransactionReceipt> {
+  const datatoken = new Datatoken(web3)
+  const config = getOceanConfig(asset.chainId)
+  const { appConfig } = getSiteMetadata()
+
+  const initializeData = await ProviderInstance.initialize(
+    asset.id,
+    asset.services[0].id,
+    0,
+    accountId,
+    asset.services[0].serviceEndpoint
+  )
+
+  const orderParams = {
+    consumer: accountId,
+    serviceIndex: 0,
+    _providerFee: initializeData.providerFee,
+    _consumeMarketFee: {
+      consumeMarketFeeAddress: appConfig.marketFeeAddress,
+      consumeMarketFeeAmount: appConfig.consumeMarketOrderFee,
+      consumeMarketFeeToken: config.oceanTokenAddress
+    }
+  } as OrderParams
+
+  // TODO: we need to approve provider fee
+  switch (asset.accessDetails?.type) {
+    case 'fixed': {
+      // this assumes all fees are in ocean
+      const txApprove = await approve(
+        web3,
+        accountId,
+        asset.accessDetails.baseToken.address,
+        asset.accessDetails.datatoken.address,
+        orderPriceAndFees.price,
+        false
+      )
+
+      const freParams = {
+        exchangeContract: config.fixedRateExchangeAddress,
+        exchangeId: asset.accessDetails.addressOrId,
+        maxBaseTokenAmount: orderPriceAndFees.price,
+        swapMarketFee: appConfig.consumeMarketFixedSwapFee,
+        marketFeeAddress: appConfig.marketFeeAddress
+      } as FreOrderParams
+      const tx = await datatoken.buyFromFreAndOrder(
+        asset.accessDetails.datatoken.address,
+        accountId,
+        orderParams,
+        freParams
+      )
+
+      return tx
+    }
+    case 'dynamic': {
+      const tx = await datatoken.startOrder(
+        asset.accessDetails.datatoken.address,
+        accountId,
+        accountId,
+        0,
+        initializeData.providerFee
+      )
+      return tx
+    }
+
+    case 'free': {
+      const tx = await datatoken.buyFromDispenserAndOrder(
+        asset.services[0].datatokenAddress,
+        accountId,
+        orderParams,
+        config.dispenserAddress
+      )
+      return tx
+    }
+  }
+}

src/@utils/pool.ts

@@ -0,0 +1,75 @@
+import { approve, Pool, PoolPriceAndFees } from '@oceanprotocol/lib'
+import Web3 from 'web3'
+import { getSiteMetadata } from './siteConfig'
+import { getDummyWeb3 } from './web3'
+import { TransactionReceipt } from 'web3-eth'
+import Decimal from 'decimal.js'
+import { AccessDetails } from 'src/@types/Price'
+
+/**
+ * This is used to calculate the price to buy one datatoken from a pool, that is different from spot price. You need to pass either a web3 object or a chainId. If you pass a chainId a dummy web3 object will be created
+ * @param {AccessDetails} accessDetails
+ * @param {Web3?} [web3]
+ * @param {number?} [chainId]
+ * @return {Promise<PoolPriceAndFees>}
+ */
+export async function calculateBuyPrice(
+  accessDetails: AccessDetails,
+  chainId?: number,
+  web3?: Web3
+): Promise<PoolPriceAndFees> {
+  if (!web3 && !chainId)
+    throw new Error("web3 and chainId can't be undefined at the same time!")
+
+  if (!web3) {
+    web3 = await getDummyWeb3(chainId)
+  }
+
+  const pool = new Pool(web3)
+  const { appConfig } = getSiteMetadata()
+  const estimatedPrice = await pool.getAmountInExactOut(
+    accessDetails.addressOrId,
+    accessDetails.baseToken.address,
+    accessDetails.datatoken.address,
+    '1',
+    appConfig.consumeMarketPoolSwapFee
+  )
+
+  return estimatedPrice
+}
+
+export async function buyDtFromPool(
+  accessDetails: AccessDetails,
+  accountId: string,
+  web3: Web3
+): Promise<TransactionReceipt> {
+  const pool = new Pool(web3)
+  const { appConfig } = getSiteMetadata()
+  // we need to calculate the actual price to buy one datatoken
+  const dtPrice = await calculateBuyPrice(accessDetails, null, web3)
+  const approveTx = await approve(
+    web3,
+    accountId,
+    accessDetails.baseToken.address,
+    accessDetails.addressOrId,
+    dtPrice.tokenAmount,
+    false
+  )
+  const result = await pool.swapExactAmountOut(
+    accountId,
+    accessDetails.addressOrId,
+    {
+      marketFeeAddress: appConfig.marketFeeAddress,
+      tokenIn: accessDetails.baseToken.address,
+      tokenOut: accessDetails.datatoken.address
+    },
+    {
+      // this is just to be safe
+      maxAmountIn: new Decimal(dtPrice.tokenAmount).mul(10).toString(),
+      swapMarketFee: appConfig.consumeMarketPoolSwapFee,
+      tokenAmountOut: '1'
+    }
+  )
+
+  return result
+}

src/@utils/provider.ts

@@ -1,10 +1,13 @@
 import {
+  downloadFileBrowser,
   FileMetadata,
   LoggerInstance,
   ProviderInstance
 } from '@oceanprotocol/lib'
+import { AssetExtended } from 'src/@types/AssetExtended'
+import Web3 from 'web3'
 
-// TODO: Why do we have these functions ?!?!?!
+// TODO: Why do we have these one line functions ?!?!?!
 export async function getEncryptedFiles(
   files: FileMetadata[],
   providerUrl: string
@@ -46,3 +49,21 @@ export async function getFileUrlInfo(
     LoggerInstance.error(error.message)
   }
 }
+
+export async function downloadFile(
+  web3: Web3,
+  asset: AssetExtended,
+  accountId: string,
+  validOrderTx?: string
+) {
+  const downloadUrl = await ProviderInstance.getDownloadUrl(
+    asset.id,
+    accountId,
+    asset.services[0].id,
+    0,
+    validOrderTx || asset.accessDetails.validOrderTx,
+    asset.services[0].serviceEndpoint,
+    web3
+  )
+  await downloadFileBrowser(downloadUrl)
+}

src/@utils/siteConfig.ts

@@ -0,0 +1,12 @@
+import { UseSiteMetadata } from '@hooks/useSiteMetadata/types'
+import siteContent from '../../content/site.json'
+import appConfig from '../../app.config'
+
+export function getSiteMetadata(): UseSiteMetadata {
+  const siteMeta: UseSiteMetadata = {
+    ...siteContent,
+    appConfig
+  }
+
+  return siteMeta
+}

src/@utils/subgraph.ts

@@ -12,7 +12,10 @@ import {
   PoolShares as PoolSharesList,
   PoolShares_poolShares as PoolShare
 } from '../@types/subgraph/PoolShares'
-import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
+import {
+  OrdersData_orders as OrdersData,
+  OrdersData_orders_datatoken as OrdersDatatoken
+} from '../@types/subgraph/OrdersData'
 import { UserSalesQuery as UsersSalesList } from '../@types/subgraph/UserSalesQuery'
 
 export interface UserLiquidity {
@@ -71,6 +74,7 @@ const HighestLiquidityAssets = gql`
         symbol
       }
       baseTokenLiquidity
+      datatokenLiquidity
     }
   }
 `
@@ -140,7 +144,11 @@ const UserTokenOrders = gql`
       orderDirection: desc
       where: { consumer: $user }
     ) {
+      consumer {
+        id
+      }
       datatoken {
+        id
         address
         symbol
       }
@@ -154,14 +162,11 @@ const UserTokenOrders = gql`
   }
 `
 
-// TODO: counting orders might be enough here to get sales for a user
 const UserSalesQuery = gql`
-  query UserSalesQuery($userSalesId: ID) {
+  query UserSalesQuery($user: String!) {
-    users(where: { id: $userSalesId }) {
+    users(where: { id: $user }) {
       id
-      orders(first: 10000) {
+      totalSales
-        id
-      }
     }
   }
 `
@@ -294,6 +299,7 @@ export async function getHighestLiquidityDatatokens(
   highestLiquidityAssets.sort(
     (a, b) => b.baseTokenLiquidity - a.baseTokenLiquidity
   )
+
   for (let i = 0; i < highestLiquidityAssets.length; i++) {
     if (!highestLiquidityAssets[i]?.datatoken?.address) continue
     dtList.push(highestLiquidityAssets[i].datatoken.address)
@@ -376,9 +382,8 @@ export async function getUserTokenOrders(
       variables,
       chainIds
     )
-
     for (let i = 0; i < tokenOrders?.length; i++) {
-      tokenOrders[i].tokenOrders.forEach((tokenOrder: OrdersData) => {
+      tokenOrders[i].orders.forEach((tokenOrder: OrdersData) => {
         data.push(tokenOrder)
       })
     }
@@ -393,7 +398,7 @@ export async function getUserSales(
   accountId: string,
   chainIds: number[]
 ): Promise<number> {
-  const variables = { userSalesId: accountId?.toLowerCase() }
+  const variables = { user: accountId?.toLowerCase() }
   try {
     const userSales = await fetchDataForMultipleChains(
       UserSalesQuery,
@@ -403,7 +408,7 @@ export async function getUserSales(
     let salesSum = 0
     for (let i = 0; i < userSales.length; i++) {
       if (userSales[i].users.length > 0) {
-        salesSum += userSales[i].users[0].nrSales
+        salesSum += parseInt(userSales[i].users[0].totalSales)
       }
     }
     return salesSum
@@ -432,7 +437,7 @@ export async function getTopAssetsPublishers(
       if (publishersIndex === -1) {
         const publisher: AccountTeaserVM = {
           address: fetchedUsers.data.users[i].id,
-          nrSales: fetchedUsers.data.users[i].orders.length
+          nrSales: fetchedUsers.data.users[i].totalSales
         }
         publisherSales.push(publisher)
       } else {

src/@utils/web3.ts

@@ -1,5 +1,6 @@
 import { getNetworkDisplayName } from '@hooks/useNetworkMetadata'
 import { LoggerInstance } from '@oceanprotocol/lib'
+import Web3 from 'web3'
 import { getOceanConfig } from './ocean'
 
 export function accountTruncate(account: string): string {
@@ -8,6 +9,15 @@ export function accountTruncate(account: string): string {
   const truncated = account.replace(middle, '…')
   return truncated
 }
+/**
+ * returns a dummy web3 instance, only usable to get info from the chain
+ * @param chainId
+ * @returns Web3 instance
+ */
+export async function getDummyWeb3(chainId: number): Promise<Web3> {
+  const config = getOceanConfig(chainId)
+  return new Web3(config.nodeUri)
+}
 
 export async function addCustomNetwork(
   web3Provider: any,

src/components/@shared/AssetList/index.tsx

@@ -10,6 +10,7 @@ import { useIsMounted } from '@hooks/useIsMounted'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { Asset } from '@oceanprotocol/lib'
 import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
+import { useWeb3 } from '@context/Web3'
 
 const cx = classNames.bind(styles)
 
@@ -43,6 +44,7 @@ export default function AssetList({
   noPublisher
 }: AssetListProps): ReactElement {
   const { chainIds } = useUserPreferences()
+  const { accountId } = useWeb3()
   const [assetsWithPrices, setAssetsWithPrices] = useState<AssetExtended[]>()
   const [loading, setLoading] = useState<boolean>(isLoading)
   const isMounted = useIsMounted()
@@ -51,14 +53,16 @@ export default function AssetList({
     if (!assets) return
     setAssetsWithPrices(assets as AssetExtended[])
     setLoading(false)
-
     async function fetchPrices() {
-      const assetsWithPrices = await getAccessDetailsForAssets(assets)
+      const assetsWithPrices = await getAccessDetailsForAssets(
+        assets,
+        accountId || ''
+      )
       if (!isMounted()) return
       setAssetsWithPrices([...assetsWithPrices])
     }
     fetchPrices()
-  }, [assets, isMounted])
+  }, [assets, isMounted, accountId])
 
   // // This changes the page field inside the query
   function handlePageChange(selected: number) {

src/components/@shared/ButtonBuy/index.tsx

@@ -31,6 +31,8 @@ interface ButtonBuyProps {
   algorithmConsumableStatus?: number
 }
 
+// TODO: we need to take a look at these messages
+
 function getConsumeHelpText(
   dtBalance: string,
   dtSymbol: string,

src/components/@shared/FormFields/Datatoken/index.module.css

@@ -1,7 +1,8 @@
 .datatoken {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: 1fr 11fr;
+  grid-template-columns: none;
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -20,9 +21,16 @@
   border: 1px solid var(--border-color);
   fill: var(--brand-violet);
   border-radius: 50%;
+  margin: 0;
 }
 
 .image svg {
   width: 100%;
   height: 100%;
 }
+
+@media (min-width: 40rem) {
+  .datatoken {
+    grid-template-columns: 1fr 11fr;
+  }
+}

src/components/@shared/FormFields/Nft/TxFee.tsx

@@ -0,0 +1,67 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { usePrices } from '@context/Prices'
+import { useWeb3 } from '@context/Web3'
+import useNftFactory from '@hooks/contracts/useNftFactory'
+import { NftFactory } from '@oceanprotocol/lib'
+import Conversion from '@shared/Price/Conversion'
+import { generateNftCreateData, NftMetadata } from '@utils/nft'
+
+const getEstGasFee = async (
+  address: string,
+  nftFactory: NftFactory,
+  nftMetadata: NftMetadata,
+  ethToOceanConversionRate: number
+): Promise<string> => {
+  if (!address || !nftFactory || !nftMetadata || !ethToOceanConversionRate)
+    return
+
+  const { web3 } = nftFactory
+  const nft = generateNftCreateData(nftMetadata)
+
+  const gasPrice = await web3.eth.getGasPrice()
+  const gasLimit = await nftFactory?.estGasCreateNFT(address, nft)
+  const gasFeeEth = web3.utils.fromWei(
+    (+gasPrice * +gasLimit).toString(),
+    'ether'
+  )
+  const gasFeeOcean = (+gasFeeEth / +ethToOceanConversionRate).toString()
+  return gasFeeOcean
+}
+
+export default function TxFee({
+  nftMetadata
+}: {
+  nftMetadata: NftMetadata
+}): ReactElement {
+  const { accountId } = useWeb3()
+  const { prices } = usePrices()
+  const nftFactory = useNftFactory()
+  const [gasFee, setGasFee] = useState('')
+
+  useEffect(() => {
+    const calculateGasFee = async () =>
+      setGasFee(
+        await getEstGasFee(
+          accountId,
+          nftFactory,
+          nftMetadata,
+          (prices as any)?.eth
+        )
+      )
+    calculateGasFee()
+  }, [accountId, nftFactory, nftMetadata, prices])
+
+  return gasFee ? (
+    <p>
+      Gas fee estimation for this artwork
+      <Conversion price={gasFee} />
+    </p>
+  ) : accountId ? (
+    <p>
+      An error occurred while estimating the gas fee for this artwork, please
+      try again.
+    </p>
+  ) : (
+    <p>Please connect your wallet to get a gas fee estimate for this artwork</p>
+  )
+}

src/components/@shared/FormFields/Nft/index.module.css

@@ -1,7 +1,8 @@
 .nft {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: 1fr 11fr;
+  grid-template-columns: none;
+  margin-top: calc(var(--spacer) / 2);
   margin-bottom: var(--spacer);
   align-items: center;
 }
@@ -19,16 +20,32 @@
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   position: relative;
+  margin: 0;
 }
 
-.refresh {
+.actions {
   position: absolute;
-  right: calc(var(--spacer) / 4);
+  left: 0;
-  bottom: calc(var(--spacer) / 4);
+  bottom: 0;
+  padding: 0 calc(var(--spacer) / 4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.actions svg {
+  margin: 0;
+  fill: var(--font-color-text);
 }
 
 .refresh svg {
-  fill: var(--brand-pink);
+  transform: scale(0.9);
-  width: var(--font-size-mini);
+  transform-origin: center;
-  height: var(--font-size-mini);
+}
+
+@media (min-width: 40rem) {
+  .nft {
+    grid-template-columns: 1fr 11fr;
+  }
 }

src/components/@shared/FormFields/Nft/index.tsx

@@ -5,35 +5,43 @@ import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import Refresh from '@images/refresh.svg'
 import styles from './index.module.css'
+import Tooltip from '@shared/atoms/Tooltip'
+import TxFee from './TxFee'
 
 export default function Nft(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
 
+  const refreshNftMetadata = () => {
+    const nftMetadata = generateNftMetadata()
+    helpers.setValue({ ...nftMetadata })
+  }
+
   // Generate on first mount
   useEffect(() => {
     if (field.value?.name !== '') return
 
-    const nftOptions = generateNftMetadata()
+    refreshNftMetadata()
-    helpers.setValue({ ...nftOptions })
   }, [field.value?.name])
 
   return (
     <div className={styles.nft}>
       <figure className={styles.image}>
         <img src={field?.value?.image_data} width="128" height="128" />
-        <Button
+        <div className={styles.actions}>
-          style="text"
+          <Tooltip content={<TxFee nftMetadata={field.value} />} />
-          size="small"
+          <Button
-          className={styles.refresh}
+            style="text"
-          title="Generate new image"
+            size="small"
-          onClick={(e) => {
+            className={styles.refresh}
-            e.preventDefault()
+            title="Generate new image"
-            const nftMetadata = generateNftMetadata()
+            onClick={(e) => {
-            helpers.setValue({ ...nftMetadata })
+              e.preventDefault()
-          }}
+              refreshNftMetadata()
-        >
+            }}
-          <Refresh />
+          >
-        </Button>
+            <Refresh />
+          </Button>
+        </div>
       </figure>
 
       <div className={styles.token}>

src/components/@shared/FormInput/InputElement.module.css

@@ -96,7 +96,6 @@
   padding: 0;
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-small);
-  color: var(--font-color-text);
   padding-left: 0.5rem;
 }
 

src/components/@shared/Price/index.tsx

@@ -3,21 +3,24 @@ import styles from './index.module.css'
 import Loader from '../atoms/Loader'
 import Tooltip from '../atoms/Tooltip'
 import PriceUnit from './PriceUnit'
+import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
 
 export default function Price({
   accessDetails,
+  orderPriceAndFees,
   className,
   small,
   conversion
 }: {
   accessDetails: AccessDetails
+  orderPriceAndFees?: OrderPriceAndFees
   className?: string
   small?: boolean
   conversion?: boolean
 }): ReactElement {
   return accessDetails?.price || accessDetails?.type === 'free' ? (
     <PriceUnit
-      price={`${accessDetails.price}`}
+      price={`${orderPriceAndFees?.price || accessDetails?.price}`}
       symbol={accessDetails.baseToken?.symbol}
       className={className}
       small={small}

src/components/@shared/atoms/Alert.module.css

@@ -45,6 +45,13 @@
   margin-bottom: 0;
 }
 
+.text code {
+  font-size: 0.8rem;
+  color: inherit;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .action,
 button.action {
   margin-top: calc(var(--spacer) / 2);

src/components/@shared/atoms/Tabs.module.css

@@ -2,6 +2,8 @@
   text-align: center;
   border-bottom: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 2);
+  display: flex;
+  justify-content: center;
 }
 
 .tab {
@@ -15,7 +17,7 @@
   background-color: var(--background-body);
   border: 1px solid var(--border-color);
   margin-right: -1px;
-  min-width: 100px;
+  min-width: 90px;
 }
 
 .tab:first-child {
@@ -38,6 +40,10 @@
   cursor: not-allowed;
 }
 
+.tab > div {
+  margin: 0;
+}
+
 .tabContent {
   padding: calc(var(--spacer) / 2);
 }

src/components/@shared/atoms/Tabs.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
 import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
+import InputElement from '@shared/FormInput/InputElement'
 import styles from './Tabs.module.css'
 
 export interface TabsItem {
@@ -12,12 +13,14 @@ export default function Tabs({
   items,
   className,
   handleTabChange,
-  defaultIndex
+  defaultIndex,
+  showRadio
 }: {
   items: TabsItem[]
   className?: string
   handleTabChange?: (tabName: string) => void
   defaultIndex?: number
+  showRadio?: boolean
 }): ReactElement {
   return (
     <ReactTabs
@@ -25,14 +28,24 @@ export default function Tabs({
       defaultIndex={defaultIndex}
     >
       <TabList className={styles.tabList}>
-        {items.map((item) => (
+        {items.map((item, index) => (
           <Tab
             className={styles.tab}
             key={item.title}
             onClick={handleTabChange ? () => handleTabChange(item.title) : null}
             disabled={item.disabled}
           >
-            {item.title}
+            {showRadio ? (
+              <InputElement
+                name={item.title}
+                type="radio"
+                checked={defaultIndex === index}
+                options={[item.title]}
+                readOnly
+              />
+            ) : (
+              item.title
+            )}
           </Tab>
         ))}
       </TabList>

src/components/@shared/atoms/Tags.tsx

@@ -15,7 +15,9 @@ const Tag = ({ tag, noLinks }: { tag: string; noLinks?: boolean }) => {
   return noLinks ? (
     <span className={styles.tag}>{tag}</span>
   ) : (
-    <Link href={`/search?tags=${urlEncodedTag}&sort=created&sortOrder=desc`}>
+    <Link
+      href={`/search?tags=${urlEncodedTag}&sort=metadata.created&sortOrder=desc`}
+    >
       <a className={styles.tag} title={tag}>
         {tag}
       </a>

src/components/Asset/AssetActions/Compute/AlgorithmDatasetsListForCompute.tsx

@@ -6,12 +6,13 @@ import AssetComputeList from '@shared/AssetList/AssetComputeList'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getServiceByName } from '@utils/ddo'
 import { Asset } from '@oceanprotocol/lib'
+import { AssetExtended } from 'src/@types/AssetExtended'
 
 export default function AlgorithmDatasetsListForCompute({
-  ddo,
+  asset,
   algorithmDid
 }: {
-  ddo: Asset
+  asset: AssetExtended
   algorithmDid: string
 }): ReactElement {
   const [datasetsForCompute, setDatasetsForCompute] =
@@ -19,24 +20,24 @@ export default function AlgorithmDatasetsListForCompute({
   const newCancelToken = useCancelToken()
 
   useEffect(() => {
-    if (!ddo) return
+    if (!asset) return
 
     async function getDatasetsAllowedForCompute() {
-      const isCompute = Boolean(getServiceByName(ddo, 'compute'))
+      const isCompute = Boolean(getServiceByName(asset, 'compute'))
       const datasetComputeService = getServiceByName(
-        ddo,
+        asset,
         isCompute ? 'compute' : 'access'
       )
       const datasets = await getAlgorithmDatasetsForCompute(
         algorithmDid,
         datasetComputeService?.serviceEndpoint,
-        ddo?.chainId,
+        asset?.chainId,
         newCancelToken()
       )
       setDatasetsForCompute(datasets)
     }
-    ddo.metadata.type === 'algorithm' && getDatasetsAllowedForCompute()
+    asset.metadata.type === 'algorithm' && getDatasetsAllowedForCompute()
-  }, [ddo?.metadata?.type])
+  }, [asset?.metadata?.type])
 
   return (
     <div className={styles.datasetsContainer}>

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -11,6 +11,7 @@ import { useWeb3 } from '@context/Web3'
 import { checkIfConsumable } from '@utils/ddo'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset } from '@oceanprotocol/lib'
+import { AccessDetails } from 'src/@types/Price'
 
 export default function FormStartCompute({
   algorithms,
@@ -104,7 +105,7 @@ export default function FormStartCompute({
         ? 0
         : Number(algorithmConsumeDetails.price)
 
-    setTotalPrice(priceDataset + priceAlgo)
+    setTotalPrice((priceDataset + priceAlgo).toString())
   }, [
     asset?.accessDetails,
     algorithmConsumeDetails,
@@ -143,7 +144,7 @@ export default function FormStartCompute({
         hasDatatokenSelectedComputeAsset={hasDatatokenSelectedComputeAsset}
         algorithmConsumeDetails={algorithmConsumeDetails}
         symbol={oceanSymbol}
-        totalPrice={totalPrice}
+        totalPrice={Number.parseFloat(totalPrice)}
       />
 
       <ButtonBuy

src/components/Asset/AssetActions/Compute/PriceOutput.tsx

@@ -3,6 +3,7 @@ import { useAsset } from '@context/Asset'
 import PriceUnit from '@shared/Price/PriceUnit'
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './PriceOutput.module.css'
+import { AccessDetails } from 'src/@types/Price'
 
 interface PriceOutputProps {
   totalPrice: number
@@ -74,14 +75,14 @@ export default function PriceOutput({
             <Row
               hasPreviousOrder={hasPreviousOrder}
               hasDatatoken={hasDatatoken}
-              price={asset?.accessDetails?.price}
+              price={Number.parseFloat(asset?.accessDetails?.price)}
               timeout={assetTimeout}
               symbol={symbol}
             />
             <Row
               hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
               hasDatatoken={hasDatatokenSelectedComputeAsset}
-              price={algorithmConsumeDetails?.price}
+              price={Number.parseFloat(algorithmConsumeDetails?.price)}
               timeout={selectedComputeAssetTimeout}
               symbol={symbol}
               sign="+"

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

@@ -26,7 +26,6 @@ import FileIcon from '@shared/FileIcon'
 import Alert from '@shared/atoms/Alert'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useWeb3 } from '@context/Web3'
-import { usePricing } from '@hooks/usePricing'
 import {
   generateBaseQuery,
   getFilterTerm,
@@ -59,6 +58,7 @@ import { Decimal } from 'decimal.js'
 import { TransactionReceipt } from 'web3-core'
 import { useAbortController } from '@hooks/useAbortController'
 import { getAccessDetails } from '@utils/accessDetailsAndPricing'
+import { AccessDetails } from 'src/@types/Price'
 
 export default function Compute({
   asset,
@@ -78,8 +78,7 @@ export default function Compute({
   consumableFeedback?: string
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { accountId, web3 } = useWeb3()
+  const { accountId } = useWeb3()
-  const { pricingError, pricingStepText } = usePricing()
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [error, setError] = useState<string>()
   const newAbortController = useAbortController()
@@ -156,13 +155,13 @@ export default function Compute({
   useEffect(() => {
     if (!algorithmConsumeDetails) return
 
-    setIsAlgoConsumablePrice(algorithmConsumeDetails.isConsumable)
+    setIsAlgoConsumablePrice(algorithmConsumeDetails.isPurchasable)
   }, [algorithmConsumeDetails])
 
   useEffect(() => {
     if (!accessDetails) return
 
-    setIsConsumablePrice(accessDetails.isConsumable)
+    setIsConsumablePrice(accessDetails.isPurchasable)
   }, [accessDetails])
 
   // useEffect(() => {
@@ -217,10 +216,10 @@ export default function Compute({
 
   // Output errors in toast UI
   useEffect(() => {
-    const newError = error || pricingError
+    const newError = error
     if (!newError) return
     toast.error(newError)
-  }, [error, pricingError])
+  }, [error])
 
   async function startJob(algorithmId: string): Promise<string> {
     try {
@@ -646,7 +645,7 @@ export default function Compute({
           />
           <AlgorithmDatasetsListForCompute
             algorithmDid={asset.id}
-            ddo={asset}
+            asset={asset}
           />
         </>
       ) : (
@@ -680,7 +679,8 @@ export default function Compute({
             selectedComputeAssetLowPoolLiquidity={!isAlgoConsumablePrice}
             selectedComputeAssetType="algorithm"
             selectedComputeAssetTimeout={algorithmTimeout}
-            stepText={pricingStepText || 'Starting Compute Job...'}
+            // lazy comment when removing pricingStepText
+            stepText={'pricingStepText' || 'Starting Compute Job...'}
             algorithmConsumeDetails={algorithmConsumeDetails}
             isConsumable={isConsumable}
             consumableFeedback={consumableFeedback}

src/components/Asset/AssetActions/Consume.tsx

@@ -1,154 +0,0 @@
-import React, { ReactElement, useEffect, useState } from 'react'
-import { toast } from 'react-toastify'
-import FileIcon from '@shared/FileIcon'
-import Price from '@shared/Price'
-import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import { useAsset } from '@context/Asset'
-import { useWeb3 } from '@context/Web3'
-import { usePricing } from '@hooks/usePricing'
-import { useConsume } from '@hooks/useConsume'
-import ButtonBuy from '@shared/ButtonBuy'
-import { secondsToString } from '@utils/ddo'
-import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
-import styles from './Consume.module.css'
-import { useIsMounted } from '@hooks/useIsMounted'
-import { Asset, FileMetadata } from '@oceanprotocol/lib'
-
-export default function Consume({
-  ddo,
-  accessDetails,
-  file,
-  isBalanceSufficient,
-  dtBalance,
-  fileIsLoading,
-  isConsumable,
-  consumableFeedback
-}: {
-  ddo: Asset
-  accessDetails: AccessDetails
-  file: FileMetadata
-  isBalanceSufficient: boolean
-  dtBalance: string
-  fileIsLoading?: boolean
-  isConsumable?: boolean
-  consumableFeedback?: string
-}): ReactElement {
-  const { accountId } = useWeb3()
-  const { appConfig } = useSiteMetadata()
-  const [hasPreviousOrder, setHasPreviousOrder] = useState(false)
-  const [previousOrderId, setPreviousOrderId] = useState<string>()
-  const { isInPurgatory, isAssetNetwork } = useAsset()
-  const { buyDT, pricingStepText, pricingError, pricingIsLoading } =
-    usePricing()
-  const { consumeStepText, consume, consumeError, isLoading } = useConsume()
-  const [isDisabled, setIsDisabled] = useState(true)
-  const [hasDatatoken, setHasDatatoken] = useState(false)
-  const [isConsumablePrice, setIsConsumablePrice] = useState(true)
-  const [assetTimeout, setAssetTimeout] = useState('')
-  const isMounted = useIsMounted()
-
-  useEffect(() => {
-    if (!ddo) return
-
-    const { timeout } = ddo.services[0]
-    setAssetTimeout(`${timeout}`)
-  }, [ddo])
-
-  useEffect(() => {
-    if (!accessDetails) return
-
-    setIsConsumablePrice(accessDetails.isConsumable)
-    setHasPreviousOrder(accessDetails.owned)
-    setPreviousOrderId(accessDetails.validOrderTx)
-  }, [accessDetails])
-
-  useEffect(() => {
-    setHasDatatoken(Number(dtBalance) >= 1)
-  }, [dtBalance])
-
-  useEffect(() => {
-    if (!accountId) return
-    setIsDisabled(
-      !isConsumable ||
-        ((!isBalanceSufficient ||
-          !isAssetNetwork ||
-          typeof consumeStepText !== 'undefined' ||
-          pricingIsLoading ||
-          !isConsumablePrice) &&
-          !hasPreviousOrder &&
-          !hasDatatoken)
-    )
-  }, [
-    hasPreviousOrder,
-    isBalanceSufficient,
-    isAssetNetwork,
-    consumeStepText,
-    pricingIsLoading,
-    isConsumablePrice,
-    hasDatatoken,
-    isConsumable,
-    accountId
-  ])
-
-  async function handleConsume() {
-    // if (!hasPreviousOrder && !hasDatatoken) {
-    //   const tx = await buyDT('1', price, ddo)
-    //   if (tx === undefined) return
-    // }
-    const error = await consume(
-      ddo.id,
-      ddo.services[0].datatokenAddress,
-      'access',
-      appConfig.marketFeeAddress,
-      previousOrderId
-    )
-    error || setHasPreviousOrder(true)
-  }
-
-  // Output errors in UI
-  useEffect(() => {
-    consumeError && toast.error(consumeError)
-  }, [consumeError])
-
-  useEffect(() => {
-    pricingError && toast.error(pricingError)
-  }, [pricingError])
-
-  const PurchaseButton = () => (
-    <ButtonBuy
-      action="download"
-      disabled={isDisabled}
-      hasPreviousOrder={hasPreviousOrder}
-      hasDatatoken={hasDatatoken}
-      dtSymbol={ddo?.datatokens[0]?.symbol}
-      dtBalance={dtBalance}
-      datasetLowPoolLiquidity={!isConsumablePrice}
-      onClick={handleConsume}
-      assetTimeout={secondsToString(parseInt(assetTimeout))}
-      assetType={ddo?.metadata?.type}
-      stepText={consumeStepText || pricingStepText}
-      isLoading={pricingIsLoading || isLoading}
-      priceType={accessDetails?.type}
-      isConsumable={isConsumable}
-      isBalanceSufficient={isBalanceSufficient}
-      consumableFeedback={consumableFeedback}
-    />
-  )
-
-  return (
-    <aside className={styles.consume}>
-      <div className={styles.info}>
-        <div className={styles.filewrapper}>
-          <FileIcon file={file} isLoading={fileIsLoading} />
-        </div>
-        <div className={styles.pricewrapper}>
-          <Price accessDetails={accessDetails} conversion />
-          {!isInPurgatory && <PurchaseButton />}
-        </div>
-      </div>
-      {ddo?.metadata?.type === 'algorithm' && (
-        <AlgorithmDatasetsListForCompute algorithmDid={ddo.id} ddo={ddo} />
-      )}
-    </aside>
-  )
-}

src/components/Asset/AssetActions/Download.tsx

@@ -0,0 +1,175 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import FileIcon from '@shared/FileIcon'
+import Price from '@shared/Price'
+import { useAsset } from '@context/Asset'
+import { useWeb3 } from '@context/Web3'
+import ButtonBuy from '@shared/ButtonBuy'
+import { secondsToString } from '@utils/ddo'
+import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
+import styles from './Download.module.css'
+import { FileMetadata, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
+import { order } from '@utils/order'
+import { AssetExtended } from 'src/@types/AssetExtended'
+import { buyDtFromPool, calculateBuyPrice } from '@utils/pool'
+import { downloadFile } from '@utils/provider'
+import { getOrderFeedback } from '@utils/feedback'
+import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
+import { OrderPriceAndFees } from 'src/@types/Price'
+import { toast } from 'react-toastify'
+
+export default function Download({
+  asset,
+  file,
+  isBalanceSufficient,
+  dtBalance,
+  fileIsLoading,
+  consumableFeedback
+}: {
+  asset: AssetExtended
+  file: FileMetadata
+  isBalanceSufficient: boolean
+  dtBalance: string
+  fileIsLoading?: boolean
+  consumableFeedback?: string
+}): ReactElement {
+  const { accountId, web3 } = useWeb3()
+  const { isInPurgatory, isAssetNetwork } = useAsset()
+  const [isDisabled, setIsDisabled] = useState(true)
+  const [hasDatatoken, setHasDatatoken] = useState(false)
+  const [statusText, setStatusText] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isOwned, setIsOwned] = useState(false)
+  const [validOrderTx, setValidOrderTx] = useState('')
+  const [orderPriceAndFees, setOrderPriceAndFees] =
+    useState<OrderPriceAndFees>()
+  useEffect(() => {
+    if (!asset?.accessDetails) return
+
+    setIsOwned(asset?.accessDetails?.isOwned)
+    setValidOrderTx(asset?.accessDetails?.validOrderTx)
+    // get full price and fees
+    async function init() {
+      if (asset?.accessDetails?.addressOrId === ZERO_ADDRESS) return
+      setIsLoading(true)
+      setStatusText('Calculating price including fees.')
+      const orderPriceAndFees = await getOrderPriceAndFees(asset, ZERO_ADDRESS)
+      setOrderPriceAndFees(orderPriceAndFees)
+
+      setIsLoading(false)
+    }
+
+    init()
+  }, [asset, accountId])
+
+  useEffect(() => {
+    setHasDatatoken(Number(dtBalance) >= 1)
+  }, [dtBalance])
+
+  useEffect(() => {
+    if (!accountId || !asset?.accessDetails) return
+    setIsDisabled(
+      !asset?.accessDetails.isPurchasable ||
+        ((!isBalanceSufficient || !isAssetNetwork) && !isOwned && !hasDatatoken)
+    )
+  }, [
+    asset?.accessDetails,
+    isBalanceSufficient,
+    isAssetNetwork,
+    hasDatatoken,
+    accountId,
+    isOwned
+  ])
+
+  async function handleOrderOrDownload() {
+    setIsLoading(true)
+    if (isOwned) {
+      setStatusText(
+        getOrderFeedback(
+          asset.accessDetails?.baseToken?.symbol,
+          asset.accessDetails?.datatoken?.symbol
+        )[3]
+      )
+      await downloadFile(web3, asset, accountId, validOrderTx)
+    } else {
+      try {
+        if (!hasDatatoken && asset.accessDetails.type === 'dynamic') {
+          setStatusText(
+            getOrderFeedback(
+              asset.accessDetails.baseToken?.symbol,
+              asset.accessDetails.datatoken?.symbol
+            )[0]
+          )
+
+          const tx = await buyDtFromPool(asset.accessDetails, accountId, web3)
+
+          if (!tx) {
+            toast.error('Failed to buy datatoken from pool!')
+            setIsLoading(false)
+            return
+          }
+        }
+        setStatusText(
+          getOrderFeedback(
+            asset.accessDetails.baseToken?.symbol,
+            asset.accessDetails.datatoken?.symbol
+          )[asset.accessDetails?.type === 'fixed' ? 2 : 1]
+        )
+        const orderTx = await order(web3, asset, orderPriceAndFees, accountId)
+
+        setIsOwned(true)
+        setValidOrderTx(orderTx.transactionHash)
+      } catch (ex) {
+        LoggerInstance.log(ex.message)
+        setIsLoading(false)
+      }
+    }
+
+    setIsLoading(false)
+  }
+
+  const PurchaseButton = () => (
+    <ButtonBuy
+      action="download"
+      disabled={isDisabled}
+      hasPreviousOrder={isOwned}
+      hasDatatoken={hasDatatoken}
+      dtSymbol={asset?.datatokens[0]?.symbol}
+      dtBalance={dtBalance}
+      datasetLowPoolLiquidity={!asset.accessDetails?.isPurchasable}
+      onClick={handleOrderOrDownload}
+      assetTimeout={secondsToString(asset.services[0].timeout)}
+      assetType={asset?.metadata?.type}
+      stepText={statusText}
+      // isLoading={pricingIsLoading || isLoading}
+      isLoading={isLoading}
+      priceType={asset.accessDetails?.type}
+      isConsumable={asset.accessDetails?.isPurchasable}
+      isBalanceSufficient={isBalanceSufficient}
+      consumableFeedback={consumableFeedback}
+    />
+  )
+
+  return (
+    <aside className={styles.consume}>
+      <div className={styles.info}>
+        <div className={styles.filewrapper}>
+          <FileIcon file={file} isLoading={fileIsLoading} />
+        </div>
+        <div className={styles.pricewrapper}>
+          <Price
+            accessDetails={asset.accessDetails}
+            orderPriceAndFees={orderPriceAndFees}
+            conversion
+          />
+          {!isInPurgatory && <PurchaseButton />}
+        </div>
+      </div>
+      {asset?.metadata?.type === 'algorithm' && (
+        <AlgorithmDatasetsListForCompute
+          algorithmDid={asset.id}
+          asset={asset}
+        />
+      )}
+    </aside>
+  )
+}

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

@@ -106,7 +106,6 @@ export default function Add({
       const result = await poolInstance.joinswapExternAmountIn(
         accountId,
         poolAddress,
-        tokenInAddress,
         amount,
         minPoolAmountOut
       )

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

@@ -64,7 +64,6 @@ export default function Remove({
       const result = await poolInstance.exitswapPoolAmountIn(
         accountId,
         poolAddress,
-        tokenOutAddress,
         amountPoolShares,
         minOceanAmount
       )

src/components/Asset/AssetActions/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import Compute from './Compute'
-import Consume from './Consume'
+import Consume from './Download'
 import { FileMetadata, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
 import Tabs, { TabsItem } from '@shared/atoms/Tabs'
 import { compareAsBN } from '@utils/numbers'
@@ -141,13 +141,11 @@ export default function AssetActions({
     />
   ) : (
     <Consume
-      ddo={asset}
+      asset={asset}
-      accessDetails={asset?.accessDetails}
       dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
       file={fileMetadata}
       fileIsLoading={fileIsLoading}
-      isConsumable={isConsumable}
       consumableFeedback={consumableFeedback}
     />
   )

src/components/Footer/MarketStats.tsx

@@ -1,199 +0,0 @@
-import React, { ReactElement, useEffect, useState } from 'react'
-import { gql, OperationContext } from 'urql'
-import Conversion from '@shared/Price/Conversion'
-import PriceUnit from '@shared/Price/PriceUnit'
-import Tooltip from '@shared/atoms/Tooltip'
-import NetworkName from '@shared/NetworkName'
-import { fetchData, getSubgraphUri } from '@utils/subgraph'
-import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import useNetworkMetadata, {
-  filterNetworksByType
-} from '@hooks/useNetworkMetadata'
-import { LoggerInstance } from '@oceanprotocol/lib'
-import styles from './MarketStats.module.css'
-import { FooterStatsValues_globalStats_totalLiquidity_token as LiquidityToken } from 'src/@types/subgraph/FooterStatsValues'
-
-const getGlobalStatsValues = gql`
-  query FooterStatsValues {
-    globalStats {
-      poolCount
-      nftCount
-      datatokenCount
-      orderCount
-      totalLiquidity {
-        token {
-          id
-          name
-          symbol
-        }
-        value
-      }
-    }
-  }
-`
-
-interface Value {
-  [chainId: number]: string
-}
-
-function MarketNetworkStats({
-  totalValueLocked,
-  poolCount,
-  totalOceanLiquidity
-}: {
-  totalValueLocked: string
-  poolCount: string
-  totalOceanLiquidity: string
-}): ReactElement {
-  return (
-    <>
-      <Conversion price={totalValueLocked} hideApproximateSymbol />{' '}
-      <abbr title="Total Value Locked">TVL</abbr> across{' '}
-      <strong>{poolCount}</strong> asset pools that contain{' '}
-      <PriceUnit price={totalOceanLiquidity} small className={styles.total} />,
-      plus datatokens for each pool.
-    </>
-  )
-}
-
-function MarketNetworkStatsTooltip({
-  totalValueLocked,
-  poolCount,
-  totalOceanLiquidity,
-  mainChainIds
-}: {
-  totalValueLocked: Value
-  poolCount: Value
-  totalOceanLiquidity: Value
-  mainChainIds: number[]
-}): ReactElement {
-  return (
-    <>
-      <ul className={styles.statsList}>
-        {totalValueLocked &&
-          totalOceanLiquidity &&
-          poolCount &&
-          mainChainIds?.map((chainId, key) => (
-            <li className={styles.tooltipStats} key={key}>
-              <NetworkName networkId={chainId} className={styles.network} />
-              <br />
-              <Conversion
-                price={totalValueLocked[chainId] || '0'}
-                hideApproximateSymbol
-              />{' '}
-              <abbr title="Total Value Locked">TVL</abbr>
-              {' | '}
-              <strong>{poolCount[chainId] || '0'}</strong> pools
-              {' | '}
-              <PriceUnit price={totalOceanLiquidity[chainId] || '0'} small />
-            </li>
-          ))}
-      </ul>
-      <p className={styles.note}>
-        Counted on-chain from our pool factory. Does not filter out assets in{' '}
-        <a href="https://github.com/oceanprotocol/list-purgatory">
-          list-purgatory
-        </a>
-      </p>
-    </>
-  )
-}
-
-export default function MarketStats(): ReactElement {
-  const [totalValueLocked, setTotalValueLocked] = useState<Value>()
-  const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<Value>()
-  const [poolCount, setPoolCount] = useState<Value>()
-  const [totalValueLockedSum, setTotalValueLockedSum] = useState<string>()
-  const [totalOceanLiquiditySum, setTotalOceanLiquiditySum] = useState<string>()
-  const [poolCountSum, setPoolCountSum] = useState<string>()
-  const [mainChainIds, setMainChainIds] = useState<number[]>()
-  const { appConfig } = useSiteMetadata()
-  const { networksList } = useNetworkMetadata()
-
-  async function getMarketStats() {
-    const mainChainIdsList = await filterNetworksByType(
-      'mainnet',
-      appConfig.chainIdsSupported,
-      networksList
-    )
-    setMainChainIds(mainChainIdsList)
-
-    let newTotalValueLockedSum = 0
-    const newTotalOceanLiquiditySum = 0
-    let newPoolCountSum = 0
-
-    for (const chainId of mainChainIdsList) {
-      const context: OperationContext = {
-        url: `${getSubgraphUri(
-          chainId
-        )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
-        requestPolicy: 'network-only'
-      }
-
-      try {
-        const response = await fetchData(getGlobalStatsValues, null, context)
-        if (!response) continue
-
-        const {
-          poolCount,
-          nftCount,
-          datatokenCount,
-          orderCount,
-          totalLiquidity
-        } = response?.data?.globalStats[0]
-
-        await setTotalValueLocked((prevState) => ({
-          ...prevState,
-          [chainId]: totalLiquidity.value
-        }))
-        // TODO: how to get total OCEAN liquidity? Does this work?
-        await setTotalOceanLiquidity((prevState) => ({
-          ...prevState,
-          [chainId]: totalLiquidity.filter(
-            (token: LiquidityToken) => token.symbol === 'OCEAN'
-          )[0]
-        }))
-        await setPoolCount((prevState) => ({
-          ...prevState,
-          [chainId]: poolCount
-        }))
-
-        newTotalValueLockedSum += parseInt(totalLiquidity.value)
-        // newTotalOceanLiquiditySum += parseInt(totalOceanLiquidity.value)
-        newPoolCountSum += parseInt(poolCount)
-      } catch (error) {
-        LoggerInstance.error('Error fetchData: ', error.message)
-      }
-    }
-    setTotalValueLockedSum(`${newTotalValueLockedSum}`)
-    setTotalOceanLiquiditySum(`${newTotalOceanLiquiditySum}`)
-    setPoolCountSum(`${newPoolCountSum}`)
-  }
-
-  useEffect(() => {
-    getMarketStats()
-  }, [])
-
-  return (
-    <div className={styles.stats}>
-      <>
-        <MarketNetworkStats
-          totalValueLocked={totalValueLockedSum || '0'}
-          totalOceanLiquidity={totalOceanLiquiditySum || '0'}
-          poolCount={poolCountSum || '0'}
-        />{' '}
-        <Tooltip
-          className={styles.info}
-          content={
-            <MarketNetworkStatsTooltip
-              totalValueLocked={totalValueLocked}
-              poolCount={poolCount}
-              totalOceanLiquidity={totalOceanLiquidity}
-              mainChainIds={mainChainIds}
-            />
-          }
-        />
-      </>
-    </div>
-  )
-}

src/components/Footer/MarketStats/Tooltip.module.css

@@ -1,28 +1,12 @@
-.stats {
-  margin-bottom: calc(var(--spacer) * 2);
-}
-
-/* specificity sledgehammer override without !important */
-.stats,
-.stats *,
-.statsList * {
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  margin-left: 0;
-}
-
 .tooltipStats {
   margin-bottom: calc(var(--spacer) / 3);
   padding-bottom: calc(var(--spacer) / 3);
   border-bottom: 1px solid var(--border-color);
 }
 
-.network {
+.statsList {
-  font-weight: var(--font-weight-bold);
+  composes: statsList from './index.module.css';
-}
+  padding-bottom: 0;
-
-.info {
-  width: 0.85rem;
 }
 
 .statsList,
@@ -30,13 +14,13 @@
   padding: calc(var(--spacer) / 4);
 }
 
-.statsList {
-  padding-bottom: 0;
-}
-
 .note {
   margin-bottom: 0;
   padding-top: 0;
   font-size: var(--font-size-mini);
   color: var(--color-secondary);
 }
+
+.network {
+  font-weight: var(--font-weight-bold);
+}

src/components/Footer/MarketStats/Tooltip.tsx

@@ -0,0 +1,51 @@
+import React, { ReactElement } from 'react'
+import Conversion from '@shared/Price/Conversion'
+import PriceUnit from '@shared/Price/PriceUnit'
+import NetworkName from '@shared/NetworkName'
+import styles from './Tooltip.module.css'
+import { StatsValue } from './_types'
+
+export default function MarketStatsTooltip({
+  totalValueLockedInOcean,
+  poolCount,
+  totalOceanLiquidity,
+  mainChainIds
+}: {
+  totalValueLockedInOcean: StatsValue
+  poolCount: StatsValue
+  totalOceanLiquidity: StatsValue
+  mainChainIds: number[]
+}): ReactElement {
+  return (
+    <>
+      <ul className={styles.statsList}>
+        {mainChainIds?.map((chainId, key) => (
+          <li className={styles.tooltipStats} key={key}>
+            <NetworkName networkId={chainId} className={styles.network} />
+            <br />
+            <Conversion
+              price={totalValueLockedInOcean?.[chainId] || '0'}
+              hideApproximateSymbol
+            />{' '}
+            <abbr title="Total Value Locked">TVL</abbr>
+            {' | '}
+            <strong>{poolCount?.[chainId] || '0'}</strong> pools
+            {' | '}
+            <PriceUnit
+              price={totalOceanLiquidity?.[chainId] || '0'}
+              symbol="OCEAN"
+              small
+            />
+          </li>
+        ))}
+      </ul>
+      <p className={styles.note}>
+        Counted on-chain from our NFT and pool factories. Does not filter out
+        assets in{' '}
+        <a href="https://github.com/oceanprotocol/list-purgatory">
+          list-purgatory
+        </a>
+      </p>
+    </>
+  )
+}

src/components/Footer/MarketStats/Total.tsx

@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react'
+import Conversion from '@shared/Price/Conversion'
+import PriceUnit from '@shared/Price/PriceUnit'
+import { StatsTotal } from './_types'
+
+export default function MarketStatsTotal({
+  total
+}: {
+  total: StatsTotal
+}): ReactElement {
+  return (
+    <>
+      <p>
+        <strong>{total.orders}</strong> orders across{' '}
+        <strong>{total.nfts}</strong> assets with{' '}
+        <strong>{total.datatokens}</strong> different datatokens.
+      </p>
+      <Conversion
+        price={`${total.totalValueLockedInOcean}`}
+        hideApproximateSymbol
+      />{' '}
+      <abbr title="Total Value Locked">TVL</abbr> across{' '}
+      <strong>{total.pools}</strong> asset pools that contain{' '}
+      <PriceUnit price={`${total.totalOceanLiquidity}`} symbol="OCEAN" small />,
+      plus datatokens for each pool.
+    </>
+  )
+}

src/components/Footer/MarketStats/_queries.ts

@@ -0,0 +1,20 @@
+import { gql } from 'urql'
+
+export const queryGlobalStatistics = gql`
+  query FooterStatsValues {
+    globalStatistics {
+      poolCount
+      nftCount
+      datatokenCount
+      orderCount
+      totalLiquidity {
+        value
+        token {
+          address
+          name
+          symbol
+        }
+      }
+    }
+  }
+`

src/components/Footer/MarketStats/_types.ts

@@ -0,0 +1,12 @@
+export interface StatsValue {
+  [chainId: number]: string
+}
+
+export interface StatsTotal {
+  totalValueLockedInOcean: number
+  totalOceanLiquidity: number
+  pools: number
+  nfts: number
+  datatokens: number
+  orders: number
+}

src/components/Footer/MarketStats/index.module.css

@@ -0,0 +1,21 @@
+.stats {
+  margin-bottom: calc(var(--spacer) * 2);
+}
+
+/* specificity sledgehammer override without !important */
+.stats,
+.stats *,
+.statsList * {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin-left: 0;
+}
+
+.info {
+  width: 0.85rem;
+}
+
+.stats p {
+  display: block;
+  margin-bottom: 0;
+}

src/components/Footer/MarketStats/index.tsx

@@ -0,0 +1,166 @@
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
+import { OperationContext } from 'urql'
+import Tooltip from '@shared/atoms/Tooltip'
+import { fetchData, getSubgraphUri } from '@utils/subgraph'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import useNetworkMetadata, {
+  filterNetworksByType
+} from '@hooks/useNetworkMetadata'
+import { LoggerInstance } from '@oceanprotocol/lib'
+import styles from './index.module.css'
+import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from 'src/@types/subgraph/FooterStatsValues'
+import MarketStatsTooltip from './Tooltip'
+import MarketStatsTotal from './Total'
+import { queryGlobalStatistics } from './_queries'
+import { usePrices } from '@context/Prices'
+import { useUserPreferences } from '@context/UserPreferences'
+import Decimal from 'decimal.js'
+import { StatsTotal, StatsValue } from './_types'
+
+const initialTotal: StatsTotal = {
+  totalValueLockedInOcean: 0,
+  totalOceanLiquidity: 0,
+  pools: 0,
+  nfts: 0,
+  datatokens: 0,
+  orders: 0
+}
+
+export default function MarketStats(): ReactElement {
+  const { appConfig } = useSiteMetadata()
+  const { networksList } = useNetworkMetadata()
+  const { currency } = useUserPreferences()
+  const { prices } = usePrices()
+
+  const [mainChainIds, setMainChainIds] = useState<number[]>()
+  const [data, setData] =
+    useState<{ [chainId: number]: FooterStatsValuesGlobalStatistics }>()
+  const [totalValueLockedInOcean, setTotalValueLockedInOcean] =
+    useState<StatsValue>()
+  const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<StatsValue>()
+  const [poolCount, setPoolCount] = useState<StatsValue>()
+  const [total, setTotal] = useState(initialTotal)
+
+  //
+  // Set the main chain ids we want to display stats for
+  //
+  useEffect(() => {
+    if (!networksList) return
+
+    const mainChainIdsList = filterNetworksByType(
+      'mainnet',
+      appConfig.chainIdsSupported,
+      networksList
+    )
+    setMainChainIds(mainChainIdsList)
+  }, [appConfig.chainIdsSupported, networksList])
+
+  //
+  // Helper: fetch data from subgraph
+  //
+  const getMarketStats = useCallback(async () => {
+    if (!mainChainIds?.length) return
+
+    for (const chainId of mainChainIds) {
+      const context: OperationContext = {
+        url: `${getSubgraphUri(
+          chainId
+        )}/subgraphs/name/oceanprotocol/ocean-subgraph`,
+        requestPolicy: 'network-only'
+      }
+
+      try {
+        const response = await fetchData(queryGlobalStatistics, null, context)
+        if (!response?.data?.globalStatistics) return
+
+        setData((prevState) => ({
+          ...prevState,
+          [chainId]: response.data.globalStatistics[0]
+        }))
+      } catch (error) {
+        LoggerInstance.error('Error fetching global stats: ', error.message)
+      }
+    }
+  }, [mainChainIds])
+
+  //
+  // 1. Fetch Data
+  //
+  useEffect(() => {
+    getMarketStats()
+  }, [getMarketStats])
+
+  //
+  // 2. Data Manipulation
+  //
+  useEffect(() => {
+    if (!data || !mainChainIds?.length) return
+
+    const newTotal: StatsTotal = {
+      ...initialTotal // always start calculating beginning from initial 0 values
+    }
+
+    for (const chainId of mainChainIds) {
+      const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
+
+      try {
+        const totalValueLockedInOcean = baseTokenValue
+          ? new Decimal(baseTokenValue).mul(2)
+          : new Decimal(0)
+
+        setTotalValueLockedInOcean((prevState) => ({
+          ...prevState,
+          [chainId]: `${totalValueLockedInOcean}`
+        }))
+
+        const totalOceanLiquidity = Number(baseTokenValue) || 0
+
+        setTotalOceanLiquidity((prevState) => ({
+          ...prevState,
+          [chainId]: `${totalOceanLiquidity}`
+        }))
+
+        const poolCount = data[chainId]?.poolCount || 0
+
+        setPoolCount((prevState) => ({
+          ...prevState,
+          [chainId]: `${poolCount}`
+        }))
+
+        const nftCount = data[chainId]?.nftCount || 0
+        const datatokenCount = data[chainId]?.datatokenCount || 0
+        const orderCount = data[chainId]?.orderCount || 0
+
+        newTotal.totalValueLockedInOcean += totalValueLockedInOcean.toNumber()
+        newTotal.totalOceanLiquidity += totalOceanLiquidity
+        newTotal.pools += poolCount
+        newTotal.nfts += nftCount
+        newTotal.datatokens += datatokenCount
+        newTotal.orders += orderCount
+      } catch (error) {
+        LoggerInstance.error('Error data manipulation: ', error.message)
+      }
+    }
+
+    setTotal(newTotal)
+  }, [data, mainChainIds, prices, currency])
+
+  return (
+    <div className={styles.stats}>
+      <>
+        <MarketStatsTotal total={total} />{' '}
+        <Tooltip
+          className={styles.info}
+          content={
+            <MarketStatsTooltip
+              totalValueLockedInOcean={totalValueLockedInOcean}
+              poolCount={poolCount}
+              totalOceanLiquidity={totalOceanLiquidity}
+              mainChainIds={mainChainIds}
+            />
+          }
+        />
+      </>
+    </div>
+  )
+}

src/components/Home/Bookmarks.tsx

@@ -1,12 +1,11 @@
 import { useUserPreferences } from '@context/UserPreferences'
-import React, { ReactElement, useEffect, useState, useCallback } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import Table from '@shared/atoms/Table'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import Price from '@shared/Price'
 import Tooltip from '@shared/atoms/Tooltip'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
 import { retrieveDDOListByDIDs } from '@utils/aquarius'
-import { CancelToken } from 'axios'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { AssetExtended } from 'src/@types/AssetExtended'
@@ -53,26 +52,6 @@ export default function Bookmarks(): ReactElement {
   const { chainIds } = useUserPreferences()
   const newCancelToken = useCancelToken()
 
-  const getAssetsBookmarked = useCallback(
-    async (
-      bookmarks: string[],
-      chainIds: number[],
-      cancelToken: CancelToken
-    ) => {
-      try {
-        const result = await retrieveDDOListByDIDs(
-          bookmarks,
-          chainIds,
-          cancelToken
-        )
-        return result
-      } catch (error) {
-        LoggerInstance.error(error.message)
-      }
-    },
-    []
-  )
-
   useEffect(() => {
     if (!appConfig?.metadataCacheUri || bookmarks === []) return
 
@@ -85,21 +64,23 @@ export default function Bookmarks(): ReactElement {
       setIsLoading(true)
 
       try {
-        const resultPinned = await getAssetsBookmarked(
+        const result = await retrieveDDOListByDIDs(
           bookmarks,
           chainIds,
           newCancelToken()
         )
+        if (!result?.length) return
+
         const pinnedAssets: AssetExtended[] = await getAccessDetailsForAssets(
-          resultPinned,
+          result,
           accountId
         )
         setPinned(pinnedAssets)
       } catch (error) {
-        LoggerInstance.error(error.message)
+        LoggerInstance.error(`Bookmarks error:`, error.message)
+      } finally {
+        setIsLoading(false)
       }
-
-      setIsLoading(false)
     }
     init()
   }, [
@@ -107,7 +88,6 @@ export default function Bookmarks(): ReactElement {
     bookmarks,
     chainIds,
     accountId,
-    getAssetsBookmarked,
     newCancelToken
   ])
 

src/components/Home/index.tsx

@@ -24,10 +24,9 @@ async function getQueryHighest(
     esPaginationOptions: {
       size: dtList.length > 0 ? dtList.length : 1
     },
-    filters: [getFilterTerm('dataToken', dtList)]
+    filters: [getFilterTerm('services.datatokenAddress', dtList)]
   } as BaseQueryParams
   const queryHighest = generateBaseQuery(baseQueryParams)
-
   return [queryHighest, dtList]
 }
 

src/components/Profile/Header/Stats.tsx

@@ -17,7 +17,6 @@ async function getPoolSharesLiquidity(
   poolShares: PoolShare[]
 ): Promise<number> {
   let totalLiquidity = 0
-
   for (const poolShare of poolShares) {
     const poolLiquidity = calculateUserLiquidity(poolShare)
     totalLiquidity += poolLiquidity

src/components/Publish/Preview/index.tsx

@@ -4,37 +4,36 @@ import { FormPublishData } from '../_types'
 import { useFormikContext } from 'formik'
 import AssetContent from 'src/components/Asset/AssetContent'
 import { transformPublishFormToDdo } from '../_utils'
-import { Asset } from '@oceanprotocol/lib'
+import { AssetExtended } from 'src/@types/AssetExtended'
+import { ZERO_ADDRESS } from '@oceanprotocol/lib'
 
 export default function Preview(): ReactElement {
-  const [asset, setAsset] = useState<Asset>()
+  const [asset, setAsset] = useState<AssetExtended>()
-  const [accessDetails, setAccessDetails] = useState<AccessDetails>()
   const { values } = useFormikContext<FormPublishData>()
 
   useEffect(() => {
     async function makeDdo() {
-      const asset = await transformPublishFormToDdo(values)
+      const asset = (await transformPublishFormToDdo(values)) as AssetExtended
-      setAsset(asset as Asset)
-
       // dummy BestPrice to trigger certain AssetActions
-      const accessDetails: AccessDetails = {
+      asset.accessDetails = {
         type: values.pricing.type,
-        addressOrId: '0x...',
+        addressOrId: ZERO_ADDRESS,
         price: values.pricing.price,
         baseToken: {
-          address: '0x..',
+          address: ZERO_ADDRESS,
-          name: '',
+          name: 'OCEAN',
-          symbol: ''
+          symbol: 'OCEAN'
         },
         datatoken: {
-          address: '0x..',
+          address: ZERO_ADDRESS,
           name: '',
           symbol: ''
         },
-        owned: false,
+        isPurchasable: true,
+        isOwned: false,
         validOrderTx: ''
       }
-      setAccessDetails(accessDetails)
+      setAsset(asset)
     }
     makeDdo()
   }, [values])
@@ -44,7 +43,7 @@ export default function Preview(): ReactElement {
       <h2 className={styles.previewTitle}>Preview</h2>
 
       <h3 className={styles.assetTitle}>{values.metadata.name}</h3>
-      <AssetContent asset={asset} />
+      {asset && <AssetContent asset={asset} />}
     </div>
   )
 }

src/components/Publish/Pricing/Coin.module.css

@@ -10,7 +10,7 @@
 .token {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   margin-bottom: calc(var(--spacer) / 2);
 }
 
@@ -60,8 +60,7 @@
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
-  max-width: 12rem;
+  margin: auto 0;
-  margin: auto;
 }
 
 .max {
@@ -73,3 +72,13 @@
 .weight strong {
   color: var(--font-color-text);
 }
+
+@media screen and (min-width: 41rem) {
+  .token {
+    justify-content: center;
+  }
+  .data {
+    margin: auto;
+    max-width: 12rem;
+  }
+}

src/components/Publish/Pricing/Fees.module.css

@@ -1,14 +1,14 @@
 .fees {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-  padding: var(--spacer);
+  padding: var(--spacer) 0;
   text-align: center;
 }
 
 .fees > div {
   margin-bottom: 0;
-  justify-self: center;
+  justify-self: start;
 }
 
 .fees label {
@@ -18,3 +18,10 @@
 .fees input {
   max-width: 5rem;
 }
+
+@media screen and (min-width: 25rem) {
+  .fees {
+    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+    padding: var(--spacer);
+  }
+}

src/components/Publish/Pricing/Free.tsx

@@ -1,14 +1,31 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
+import { useFormikContext } from 'formik'
+import { FormPublishData } from '../_types'
 import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 import styles from './Dynamic.module.css'
 
 export default function Free({ content }: { content: any }): ReactElement {
+  // connect with Form state, use for conditional field rendering
+  const { values, setFieldValue } = useFormikContext<FormPublishData>()
+
+  useEffect(() => {
+    // if the user has agreed, then set pricing to continue
+    if (values.pricing.freeAgreement) {
+      setFieldValue('pricing.price', 1)
+      setFieldValue('pricing.amountDataToken', 1000)
+    } else {
+      // disabled continue button if the user hasn't agree to the "free agreement"
+      setFieldValue('pricing.price', 0)
+      setFieldValue('pricing.amountDataToken', 0)
+    }
+  }, [setFieldValue, values])
+
   return (
     <>
       <FormHelp>{content.info}</FormHelp>
       <h4 className={styles.title}>Price</h4>
-      <Price />
+      <Price content={content} />
     </>
   )
 }

src/components/Publish/Pricing/Price.module.css

@@ -62,7 +62,11 @@
 }
 
 .free {
-  text-align: center;
+  text-align: left;
-  margin: calc(var(--spacer) / 2) 0;
+  margin: calc(var(--spacer) / 2);
   font-size: var(--font-size-base);
 }
+
+.free [class*='FormInput_field'] {
+  margin: 0;
+}

src/components/Publish/Pricing/Price.tsx

@@ -1,16 +1,19 @@
 import Conversion from '@shared/Price/Conversion'
-import { useField, useFormikContext } from 'formik'
+import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import Input from '@shared/FormInput'
 import Error from './Error'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'
+import { getFieldContent } from '../_utils'
 
 export default function Price({
-  firstPrice
+  firstPrice,
+  content
 }: {
   firstPrice?: string
+  content?: any
 }): ReactElement {
   const [field, meta] = useField('pricing.price')
 
@@ -20,7 +23,13 @@ export default function Price({
   return (
     <div className={styles.price}>
       {values.pricing.type === 'free' ? (
-        <h4 className={styles.free}>Free</h4>
+        <div className={styles.free}>
+          <Field
+            {...getFieldContent('freeAgreement', content.fields)}
+            component={Input}
+            name="pricing.freeAgreement"
+          />
+        </div>
       ) : (
         <>
           <div className={styles.grid}>

src/components/Publish/Pricing/index.module.css

@@ -2,6 +2,10 @@
   text-align: center;
 }
 
+.pricing ul > li[class*='Tabs_tab'] {
+  padding: calc(var(--spacer) / 4) var(--spacer);
+}
+
 .pricing [class*='Tabs_tabContent'] {
   padding-left: 0;
   padding-right: 0;

src/components/Publish/Pricing/index.tsx

@@ -23,7 +23,9 @@ export default function PricingFields(): ReactElement {
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     setFieldValue('pricing.type', type)
-    type === 'dynamic' && setFieldValue('pricing.amountDataToken', 1000)
+    setFieldValue('pricing.price', 0)
+    setFieldValue('pricing.freeAgreement', false)
+    type !== 'free' && setFieldValue('pricing.amountDataToken', 1000)
   }
 
   // Always update everything when price value changes
@@ -42,7 +44,14 @@ export default function PricingFields(): ReactElement {
         : 0
 
     setFieldValue('pricing.amountDataToken', amountDataToken)
-  }, [price, amountOcean, weightOnOcean, weightOnDataToken, type])
+  }, [
+    price,
+    amountOcean,
+    weightOnOcean,
+    weightOnDataToken,
+    type,
+    setFieldValue
+  ])
 
   const tabs = [
     appConfig.allowFixedPricing === 'true'
@@ -71,6 +80,7 @@ export default function PricingFields(): ReactElement {
       handleTabChange={handleTabChange}
       defaultIndex={type === 'dynamic' ? 1 : type === 'free' ? 2 : 0}
       className={styles.pricing}
+      showRadio
     />
   )
 }

src/components/Publish/Submission/Feedback.module.css

@@ -58,7 +58,15 @@
 .title {
   font-size: var(--font-size-large);
   display: inline-block;
+  margin-bottom: 0;
+}
+
+.txs {
+  display: block;
+  margin-left: 1.5rem;
   margin-bottom: calc(var(--spacer) / 4);
+  white-space: nowrap;
+  width: 100%;
 }
 
 .description {
@@ -78,3 +86,18 @@
     transform: rotate(360deg);
   }
 }
+
+@media screen and (min-width: 30rem) {
+  .txs {
+    display: inline;
+  }
+}
+
+@media screen and (min-width: 40rem) {
+  .title {
+    margin-bottom: calc(var(--spacer) / 2);
+  }
+  .txs {
+    margin-left: calc(var(--spacer) / 4);
+  }
+}

src/components/Publish/Submission/Feedback.tsx

@@ -9,8 +9,8 @@ export function Feedback(): ReactElement {
 
   const items = Object.entries(values.feedback).map(([key, value], index) => (
     <li key={index} className={styles[value.status]}>
-      <h3 className={styles.title}>
+      <h3 className={styles.title}>{value.name}</h3>
-        {value.name}
+      <div className={styles.txs}>
         {value.txCount > 0 && (
           <TransactionCount
             txCount={value.txCount}
@@ -18,7 +18,7 @@ export function Feedback(): ReactElement {
             txHash={value.txHash}
           />
         )}
-      </h3>
+      </div>
       <p className={styles.description}>{value.description}</p>
       {value.errorMessage && (
         <span className={styles.errorMessage}>{value.errorMessage}</span>

src/components/Publish/Submission/TransactionCount.module.css

@@ -1,7 +1,6 @@
 .txHash {
   display: inline-block;
-  margin-left: calc(var(--spacer) / 2);
+  margin: calc(var(--spacer) / 4) calc(var(--spacer) / 4);
-  margin-top: calc(var(--spacer) / 2);
   font-size: var(--font-size-small);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-base);

src/components/Publish/_constants.tsx

@@ -96,7 +96,8 @@ export const initialValues: FormPublishData = {
     amountOcean: 50,
     weightOnOcean: '5', // 50% on OCEAN
     weightOnDataToken: '5', // 50% on datatoken
-    swapFee: 0.1 // in %
+    swapFee: 0.1, // in %
+    freeAgreement: false
   }
 }
 

src/components/Publish/_types.ts

@@ -1,6 +1,7 @@
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
 import { NftMetadata } from '@utils/nft'
 import { ReactElement } from 'react'
+import { PriceOptions } from 'src/@types/Price'
 
 interface FileMetadata {
   url: string

src/components/Publish/_utils.ts

@@ -18,6 +18,8 @@ import {
 import { mapTimeoutStringToSeconds } from '@utils/ddo'
 import { generateNftCreateData } from '@utils/nft'
 import { getEncryptedFiles } from '@utils/provider'
+import { getSiteMetadata } from '@utils/siteConfig'
+import Decimal from 'decimal.js'
 import slugify from 'slugify'
 import Web3 from 'web3'
 import {
@@ -191,7 +193,6 @@ export async function transformPublishFormToDdo(
 export async function createTokensAndPricing(
   values: FormPublishData,
   accountId: string,
-  marketFeeAddress: string,
   config: Config,
   nftFactory: NftFactory,
   web3: Web3
@@ -199,19 +200,17 @@ export async function createTokensAndPricing(
   const nftCreateData: NftCreateData = generateNftCreateData(
     values.metadata.nft
   )
-
+  const { appConfig } = getSiteMetadata()
   LoggerInstance.log('[publish] Creating NFT with metadata', nftCreateData)
 
   // TODO: cap is hardcoded for now to 1000, this needs to be discussed at some point
-  // fee is default 0 for now
-  // TODO: templateIndex is hardcoded for now but this is incorrect, in the future it should be something like 1 for pools, and 2 for fre and free
   const ercParams: Erc20CreateParams = {
     templateIndex: values.pricing.type === 'dynamic' ? 1 : 2,
     minter: accountId,
     feeManager: accountId,
-    mpFeeAddress: marketFeeAddress,
+    mpFeeAddress: appConfig.marketFeeAddress,
     feeToken: config.oceanTokenAddress,
-    feeAmount: `0`,
+    feeAmount: appConfig.publisherMarketOrderFee,
     cap: '1000',
     name: values.services[0].dataTokenOptions.name,
     symbol: values.services[0].dataTokenOptions.symbol
@@ -226,21 +225,22 @@ export async function createTokensAndPricing(
     case 'dynamic': {
       // no vesting in market by default, maybe at a later time , vestingAmount and vestedBlocks are hardcoded
       // we use only ocean as basetoken
-      // TODO: discuss swapFeeLiquidityProvider, swapFeeMarketPlaceRunner
+      // swapFeeLiquidityProvider is the swap fee of the liquidity providers
+      // swapFeeMarketRunner is the swap fee of the market where the swap occurs
       const poolParams: PoolCreationParams = {
         ssContract: config.sideStakingAddress,
         baseTokenAddress: config.oceanTokenAddress,
         baseTokenSender: config.erc721FactoryAddress,
         publisherAddress: accountId,
-        marketFeeCollector: marketFeeAddress,
+        marketFeeCollector: appConfig.marketFeeAddress,
         poolTemplateAddress: config.poolTemplateAddress,
-        rate: values.pricing.price.toString(),
+        rate: new Decimal(1).div(values.pricing.price).toString(),
         baseTokenDecimals: 18,
         vestingAmount: '0',
         vestedBlocks: 2726000,
         initialBaseTokenLiquidity: values.pricing.amountOcean.toString(),
-        swapFeeLiquidityProvider: 1e15,
+        swapFeeLiquidityProvider: (values.pricing.swapFee / 100).toString(),
-        swapFeeMarketRunner: 1e15
+        swapFeeMarketRunner: appConfig.publisherMarketPoolSwapFee
       }
 
       LoggerInstance.log(
@@ -249,18 +249,17 @@ export async function createTokensAndPricing(
       )
 
       // the spender in this case is the erc721Factory because we are delegating
-      const pool = new Pool(web3)
       const txApprove = await approve(
         web3,
         accountId,
         config.oceanTokenAddress,
         config.erc721FactoryAddress,
-        '200',
+        values.pricing.amountOcean.toString(),
         false
       )
-      LoggerInstance.log('[publish] pool.approve tx', txApprove)
+      LoggerInstance.log('[publish] pool.approve tx', txApprove, nftFactory)
 
-      const result = await nftFactory.createNftErcWithPool(
+      const result = await nftFactory.createNftErc20WithPool(
         accountId,
         nftCreateData,
         ercParams,
@@ -279,11 +278,11 @@ export async function createTokensAndPricing(
         fixedRateAddress: config.fixedRateExchangeAddress,
         baseTokenAddress: config.oceanTokenAddress,
         owner: accountId,
-        marketFeeCollector: marketFeeAddress,
+        marketFeeCollector: appConfig.marketFeeAddress,
         baseTokenDecimals: 18,
         datatokenDecimals: 18,
         fixedRate: values.pricing.price.toString(),
-        marketFee: 1e15,
+        marketFee: appConfig.publisherMarketFixedSwapFee,
         withMint: true
       }
 
@@ -292,7 +291,7 @@ export async function createTokensAndPricing(
         freParams
       )
 
-      const result = await nftFactory.createNftErcWithFixedRate(
+      const result = await nftFactory.createNftErc20WithFixedRate(
         accountId,
         nftCreateData,
         ercParams,
@@ -324,7 +323,7 @@ export async function createTokensAndPricing(
         dispenserParams
       )
 
-      const result = await nftFactory.createNftErcWithDispenser(
+      const result = await nftFactory.createNftErc20WithDispenser(
         accountId,
         nftCreateData,
         ercParams,

src/components/Publish/index.tsx

@@ -21,7 +21,6 @@ import {
   LoggerInstance,
   DDO
 } from '@oceanprotocol/lib'
-import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { getOceanConfig } from '@utils/ocean'
 import { validationSchema } from './_validation'
 import { useAbortController } from '@hooks/useAbortController'
@@ -38,7 +37,6 @@ export default function PublishPage({
   const { accountId, web3, chainId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
   const scrollToRef = useRef()
-  const { appConfig } = useSiteMetadata()
   const nftFactory = useNftFactory()
   const newAbortController = useAbortController()
 
@@ -75,7 +73,6 @@ export default function PublishPage({
         await createTokensAndPricing(
           values,
           accountId,
-          appConfig.marketFeeAddress,
           config,
           nftFactory,
           web3

src/components/Search/index.tsx

@@ -61,8 +61,9 @@ export default function SearchPage({
       setTotalResults(undefined)
       const queryResult = await getResults(parsed, chainIds, newCancelToken())
       setQueryResult(queryResult)
-      setTotalResults(queryResult.totalResults)
+
-      setTotalPagesNumber(queryResult.totalPages)
+      setTotalResults(queryResult?.totalResults || 0)
+      setTotalPagesNumber(queryResult?.totalPages || 0)
       setLoading(false)
     },
     [newCancelToken, setTotalPagesNumber, setTotalResults]

src/components/Search/utils.ts

@@ -123,7 +123,7 @@ export function getSearchQuery(
 
   const filters: FilterTerm[] = []
   accessType !== undefined &&
-    filters.push(getFilterTerm('nft.type', accessType))
+    filters.push(getFilterTerm('services.type', accessType))
   serviceType !== undefined &&
     filters.push(getFilterTerm('metadata.type', serviceType))