Merge branch 'feature/v4-c2d' into fix/issue-1069-c2d-unsupported-networks

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: monthly
+      time: '03:00'
+      timezone: Europe/Berlin

.github/workflows/ci.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - v4
+      - v3
     tags:
       - '**'
   pull_request:
@@ -36,7 +37,7 @@ jobs:
           key: ${{ runner.os }}-${{ matrix.node }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-build-${{ env.cache-name }}-
 
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm run build
 
   test:
@@ -63,7 +64,7 @@ jobs:
           key: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-
 
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm test
 
       - name: Upload coverage artifact
@@ -95,7 +96,7 @@ jobs:
         with:
           name: coverage-${{ runner.os }}
 
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm run codegen:apollo
 
       - uses: paambaati/codeclimate-action@v3.0.0
@@ -126,6 +127,6 @@ jobs:
           key: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-
 
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm run pregenerate
       - run: npm run storybook:build

.github/workflows/deploy.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
 
       - run: npm run build
         env:

app.config.js

@@ -9,12 +9,20 @@ module.exports = {
     process.env.NEXT_PUBLIC_METADATACACHE_URI ||
     'https://v4.aquarius.oceanprotocol.com',
 
+  v3MetadataCacheUri:
+    process.env.NEXT_PUBLIC_V3_METADATACACHE_URI ||
+    'https://aquarius.oceanprotocol.com',
+
+  v3MarketUri:
+    process.env.NEXT_PUBLIC_V3_MARKET_URI ||
+    'https://v3.market.oceanprotocol.com',
+
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: [3, 4, 80001, 1287],
+  chainIds: [1, 137, 56, 246, 1285],
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: [3, 4, 80001, 1287],
+  chainIdsSupported: [1, 137, 56, 246, 1285, 3, 4, 80001, 1287],
 
   infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',
 

content/footer.json

@@ -12,5 +12,8 @@
       "name": "Discord",
       "url": "https://discord.gg/TnXjkR5"
     }
-  ]
+  ],
+  "stats": {
+    "note": "Counted on-chain from our NFT and pool factories. Includes assets in all Ocean Market forks and [purgatory](https://github.com/oceanprotocol/list-purgatory)."
+  }
 }

content/pages/edit.json

@@ -30,13 +30,22 @@
         "required": true
       },
       {
-        "name": "links",
+        "name": "files",
-        "label": "Sample file",
+        "label": "New file",
-        "placeholder": "e.g. https://file.com/samplefile.json",
+        "placeholder": "e.g. https://file.com/file.json",
-        "help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
+        "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. Leaving this field empty will not remove the current value.",
         "prominentHelp": true,
         "type": "files"
       },
+      {
+        "name": "links",
+        "label": "New sample file",
+        "placeholder": "e.g. https://file.com/samplefile.json",
+        "help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** Leaving this field empty will not remove the current value.",
+        "prominentHelp": true,
+        "type": "files"
+      },
+
       {
         "name": "timeout",
         "label": "Timeout",

content/site.json

@@ -1,7 +1,7 @@
 {
   "siteTitle": "Ocean Market",
   "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
-  "siteUrl": "https://v4.market.oceanprotocol.com",
+  "siteUrl": "https://market.oceanprotocol.com",
   "siteImage": "/share.png",
   "copyright": "All Rights Reserved. Powered by ",
   "menu": [
@@ -14,12 +14,8 @@
       "link": "/profile"
     }
   ],
+  "announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com/oceanonda-v4-production-has-arrived-cb4fe8faaf39).",
   "warning": {
-    "main": "",
+    "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
-    "polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
-  },
-  "announcement": {
-    "main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
-    "polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
   }
 }

package.json

@@ -17,28 +17,28 @@
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
     "postinstall": "husky install",
-    "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/",
+    "codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
     "storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet",
     "storybook:build": "cross-env NODE_ENV=test build-storybook"
   },
   "dependencies": {
-    "@coingecko/cryptoformat": "^0.4.4",
+    "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.44",
+    "@oceanprotocol/lib": "^1.1.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
     "@walletconnect/web3-provider": "^1.7.8",
     "axios": "^0.27.2",
-    "chart.js": "^3.7.1",
+    "chart.js": "^3.8.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "decimal.js": "^10.3.1",
     "dom-confetti": "^0.2.2",
     "dotenv": "^16.0.1",
-    "filesize": "^8.0.7",
+    "filesize": "^9.0.1",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
     "is-url-superb": "^6.1.0",
@@ -50,7 +50,7 @@
     "next": "^12.1.6",
     "query-string": "^7.1.1",
     "react": "^18.1.0",
-    "react-chartjs-2": "^4.1.0",
+    "react-chartjs-2": "^4.2.0",
     "react-clipboard.js": "^2.0.16",
     "react-data-table-component": "^6.11.7",
     "react-dom": "^18.1.0",
@@ -59,66 +59,66 @@
     "react-paginate": "^8.1.3",
     "react-spring": "^9.4.5",
     "react-tabs": "^5.1.0",
-    "react-toastify": "^8.2.0",
+    "react-toastify": "^9.0.4",
     "remark": "^13.0.0",
     "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.1",
-    "remove-markdown": "^0.3.0",
+    "remove-markdown": "^0.5.0",
     "slugify": "^1.6.5",
     "swr": "^1.3.0",
-    "urql": "^2.2.0",
+    "urql": "^2.2.1",
     "use-dark-mode": "^2.3.1",
     "web3": "^1.7.3",
     "web3modal": "^1.9.7",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.5.4",
+    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-storyshots": "^6.5.4",
+    "@storybook/addon-storyshots": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.4",
+    "@storybook/builder-webpack5": "^6.5.7",
-    "@storybook/manager-webpack5": "^6.5.4",
+    "@storybook/manager-webpack5": "^6.5.7",
-    "@storybook/react": "^6.5.4",
+    "@storybook/react": "^6.5.7",
     "@storybook/testing-library": "^0.0.11",
     "@storybook/testing-react": "^1.3.0",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "^13.3.0",
     "@types/chart.js": "^2.9.37",
-    "@types/js-cookie": "^3.0.1",
+    "@types/js-cookie": "^3.0.2",
-    "@types/loadable__component": "^5.13.1",
+    "@types/loadable__component": "^5.13.4",
-    "@types/lodash.debounce": "^4.0.3",
+    "@types/lodash.debounce": "^4.0.7",
-    "@types/lodash.omit": "^4.5.6",
+    "@types/lodash.omit": "^4.5.7",
-    "@types/node": "^17.0.35",
+    "@types/node": "^17.0.41",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.4",
+    "@types/react-dom": "^18.0.5",
     "@types/react-modal": "^3.13.1",
     "@types/react-paginate": "^7.1.1",
     "@types/remove-markdown": "^0.3.1",
-    "@types/yup": "^0.29.13",
+    "@types/yup": "^0.29.14",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.25.0",
+    "@typescript-eslint/parser": "^5.27.1",
-    "apollo": "^2.33.9",
+    "apollo": "^2.34.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-oceanprotocol": "^2.0.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-testing-library": "^5.5.0",
+    "eslint-plugin-testing-library": "^5.5.1",
     "file-loader": "^6.2.0",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.1",
-    "jest": "^28.1.0",
+    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.1",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
     "serve": "^13.0.2",
     "stream-http": "^3.2.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.3"
   },
   "repository": {
     "type": "git",

src/@context/Asset.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import { Config, LoggerInstance, Purgatory } from '@oceanprotocol/lib'
 import { CancelToken } from 'axios'
-import { retrieveAsset } from '@utils/aquarius'
+import { checkV3Asset, retrieveAsset } from '@utils/aquarius'
 import { useWeb3 } from './Web3'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getOceanConfig, getDevelopmentConfig } from '@utils/ocean'
@@ -18,7 +18,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from './MarketMetadata'
 
-interface AssetProviderValue {
+export interface AssetProviderValue {
   isInPurgatory: boolean
   purgatoryData: Purgatory
   asset: AssetExtended
@@ -26,6 +26,7 @@ interface AssetProviderValue {
   owner: string
   error?: string
   isAssetNetwork: boolean
+  isV3Asset: boolean
   oceanConfig: Config
   loading: boolean
   fetchAsset: (token?: CancelToken) => Promise<void>
@@ -51,6 +52,7 @@ function AssetProvider({
   const [error, setError] = useState<string>()
   const [loading, setLoading] = useState(false)
   const [isAssetNetwork, setIsAssetNetwork] = useState<boolean>()
+  const [isV3Asset, setIsV3Asset] = useState<boolean>()
   const [oceanConfig, setOceanConfig] = useState<Config>()
 
   const newCancelToken = useCancelToken()
@@ -68,6 +70,7 @@ function AssetProvider({
       const asset = await retrieveAsset(did, token)
 
       if (!asset) {
+        setIsV3Asset(await checkV3Asset(did, token))
         setError(
           `\`${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.'
@@ -168,6 +171,7 @@ function AssetProvider({
           loading,
           fetchAsset,
           isAssetNetwork,
+          isV3Asset,
           oceanConfig
         } as AssetProviderValue
       }

src/@context/MarketMetadata/_types.ts

@@ -29,6 +29,8 @@ export interface AppConfig {
     classNameLight: string
     storageKey: string
   }
+  v3MetadataCacheUri: string
+  v3MarketUri: string
 }
 export interface SiteContent {
   siteTitle: string
@@ -40,13 +42,9 @@ export interface SiteContent {
     name: string
     link: string
   }[]
+  announcement: string
   warning: {
-    main: string
+    ctd: string
-    polygonPublish: string
-  }
-  announcement: {
-    main: string
-    polygon: string
   }
 }
 

src/@context/MarketMetadata/index.tsx

@@ -36,7 +36,7 @@ function MarketMetadataProvider({
 
         opcData.push({
           chainId: appConfig.chainIdsSupported[i],
-          approvedTokens: response.data?.opc.approvedTokens,
+          approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id),
           swapApprovedFee: response.data?.opc.swapOceanFee,
           swapNotApprovedFee: response.data?.opc.swapNonOceanFee
         } as unknown as OpcFee)

src/@context/UserPreferences.tsx

@@ -31,7 +31,7 @@ interface UserPreferencesValue {
 
 const UserPreferencesContext = createContext(null)
 
-const localStorageKey = 'ocean-user-preferences'
+const localStorageKey = 'ocean-user-preferences-v4'
 
 function getLocalStorage(): UserPreferencesValue {
   const storageParsed =

src/@utils/accessDetailsAndPricing.ts

@@ -319,15 +319,6 @@ export async function getOrderPriceAndFees(
   orderPriceAndFee.price = new Decimal(+orderPriceAndFee.price || 0)
     .add(new Decimal(+orderPriceAndFee?.consumeMarketOrderFee || 0))
     .add(new Decimal(+orderPriceAndFee?.publisherMarketOrderFee || 0))
-    .add(
-      new Decimal(
-        (await unitsToAmount(
-          web3,
-          orderPriceAndFee?.providerFee?.providerFeeToken,
-          orderPriceAndFee?.providerFee?.providerFeeAmount.toString()
-        )) || 0
-      )
-    )
     .toString()
   return orderPriceAndFee
 }

src/@utils/aquarius.ts

@@ -2,7 +2,7 @@ import { Asset, LoggerInstance } from '@oceanprotocol/lib'
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
-import { metadataCacheUri } from '../../app.config'
+import { metadataCacheUri, v3MetadataCacheUri } from '../../app.config'
 import {
   SortDirectionOptions,
   SortTermOptions
@@ -133,6 +133,28 @@ export async function retrieveAsset(
   }
 }
 
+export async function checkV3Asset(
+  did: string,
+  cancelToken: CancelToken
+): Promise<boolean> {
+  try {
+    const response: AxiosResponse<Asset> = await axios.get(
+      `${v3MetadataCacheUri}/api/v1/aquarius/assets/ddo/${did}`,
+      { cancelToken }
+    )
+    if (!response || response.status !== 200 || !response.data) return false
+
+    return true
+  } catch (error) {
+    if (axios.isCancel(error)) {
+      LoggerInstance.log(error.message)
+    } else {
+      LoggerInstance.error(error.message)
+    }
+    return false
+  }
+}
+
 export async function getAssetsNames(
   didList: string[],
   cancelToken: CancelToken

src/@utils/order.ts

@@ -1,13 +1,13 @@
 import {
   approve,
+  approveWei,
   Datatoken,
   FreOrderParams,
   LoggerInstance,
   OrderParams,
   ProviderComputeInitialize,
   ProviderFees,
-  ProviderInstance,
+  ProviderInstance
-  unitsToAmount
 } from '@oceanprotocol/lib'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import Web3 from 'web3'
@@ -53,17 +53,10 @@ export async function order(
       asset.services[0].serviceEndpoint
     ))
 
-  const providerFeesSanitized = providerFees || initializeData.providerFee
-  providerFeesSanitized.providerFeeAmount = await unitsToAmount(
-    web3,
-    providerFeesSanitized.providerFeeToken,
-    providerFeesSanitized.providerFeeAmount.toString()
-  )
-
   const orderParams = {
     consumer: computeConsumerAddress || accountId,
     serviceIndex: 0,
-    _providerFee: providerFeesSanitized,
+    _providerFee: providerFees || initializeData.providerFee,
     _consumeMarketFee: {
       consumeMarketFeeAddress: marketFeeAddress,
       consumeMarketFeeAmount: consumeMarketOrderFee,
@@ -71,7 +64,6 @@ export async function order(
     }
   } as OrderParams
 
-  // TODO: we need to approve provider fee
   switch (asset.accessDetails?.type) {
     case 'fixed': {
       // this assumes all fees are in ocean
@@ -94,8 +86,6 @@ export async function order(
         swapMarketFee: consumeMarketFixedSwapFee,
         marketFeeAddress
       } as FreOrderParams
-      console.log('freParams', freParams)
-      console.log('orderParams', orderParams)
       const tx = await datatoken.buyFromFreAndOrder(
         asset.accessDetails.datatoken.address,
         accountId,
@@ -155,30 +145,6 @@ export async function reuseOrder(
       asset.services[0].serviceEndpoint
     ))
 
-  if (
-    providerFees?.providerFeeAmount ||
-    initializeData?.providerFee?.providerFeeAmount
-  ) {
-    const txApprove = await approve(
-      web3,
-      accountId,
-      providerFees.providerFeeToken ||
-        initializeData.providerFee.providerFeeToken,
-      asset.accessDetails.datatoken.address,
-      await unitsToAmount(
-        web3,
-        providerFees.providerFeeToken ||
-          initializeData.providerFee.providerFeeToken,
-        providerFees.providerFeeAmount ||
-          initializeData.providerFee.providerFeeAmount
-      ),
-      false
-    )
-    if (!txApprove) {
-      return
-    }
-  }
-
   const tx = await datatoken.reuseOrder(
     asset.accessDetails.datatoken.address,
     accountId,
@@ -215,6 +181,23 @@ export async function handleComputeOrder(
     '[compute] Handle compute order for asset type: ',
     asset.metadata.type
   )
+
+  if (
+    initializeData.providerFee &&
+    initializeData.providerFee.providerFeeAmount !== '0'
+  ) {
+    const txApproveWei = await approveWei(
+      web3,
+      accountId,
+      asset.accessDetails.baseToken.address,
+      asset.accessDetails.datatoken.address,
+      initializeData.providerFee.providerFeeAmount
+    )
+    if (!txApproveWei) {
+      toast.error('Failed to approve provider fees!')
+      return
+    }
+  }
   if (initializeData.validOrder && !initializeData.providerFee) {
     LoggerInstance.log('[compute] Has valid order: ', initializeData.validOrder)
     return initializeData.validOrder

src/@utils/provider.ts

@@ -3,7 +3,7 @@ import {
   ComputeAsset,
   ComputeEnvironment,
   downloadFileBrowser,
-  FileMetadata,
+  FileInfo,
   LoggerInstance,
   ProviderComputeInitializeResults,
   ProviderInstance
@@ -53,7 +53,7 @@ export async function initializeProviderForCompute(
 
 // TODO: Why do we have these one line functions ?!?!?!
 export async function getEncryptedFiles(
-  files: FileMetadata[],
+  files: any,
   providerUrl: string
 ): Promise<string> {
   try {
@@ -69,7 +69,7 @@ export async function getFileDidInfo(
   did: string,
   serviceId: string,
   providerUrl: string
-): Promise<FileMetadata[]> {
+): Promise<FileInfo[]> {
   try {
     const response = await ProviderInstance.checkDidFiles(
       did,
@@ -85,7 +85,7 @@ export async function getFileDidInfo(
 export async function getFileUrlInfo(
   url: string,
   providerUrl: string
-): Promise<FileMetadata[]> {
+): Promise<FileInfo[]> {
   try {
     const response = await ProviderInstance.checkFileUrl(url, providerUrl)
     return response

src/components/@shared/ButtonBuy/index.module.css

@@ -3,6 +3,11 @@
   margin-top: calc(var(--spacer) / 2);
 }
 
+.actionsCenter {
+  margin: auto !important;
+  display: block;
+}
+
 .help {
   font-size: var(--font-size-mini);
   color: var(--color-secondary);

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

@@ -31,6 +31,7 @@ interface ButtonBuyProps {
   algorithmPriceType?: string
   isAlgorithmConsumable?: boolean
   isSupportedOceanNetwork?: boolean
+  hasProviderFee?: boolean
 }
 
 // TODO: we need to take a look at these messages
@@ -109,7 +110,8 @@ function getComputeAssetHelpText(
   selectedComputeAssetType?: string,
   isAlgorithmConsumable?: boolean,
   isSupportedOceanNetwork?: boolean,
-  web3?: any
+  web3?: any,
+  hasProviderFee?: boolean
 ) {
   const computeAssetHelpText = getConsumeHelpText(
     dtBalance,
@@ -138,11 +140,15 @@ function getComputeAssetHelpText(
     isSupportedOceanNetwork
   )
 
+  const providerFeeHelpText = hasProviderFee
+    ? 'In order to start the job you also need to pay the fees for renting the c2d resources.'
+    : 'C2D resources required to start the job are available, no payment required for those fees.'
+
   const computeHelpText = selectedComputeAssettLowPoolLiquidity
     ? computeAlgoHelpText
     : lowPoolLiquidity
     ? computeAssetHelpText
-    : `${computeAssetHelpText} ${computeAlgoHelpText}`
+    : `${computeAssetHelpText} ${computeAlgoHelpText} ${providerFeeHelpText}`
   return computeHelpText
 }
 
@@ -172,7 +178,8 @@ export default function ButtonBuy({
   priceType,
   algorithmPriceType,
   isAlgorithmConsumable,
-  isSupportedOceanNetwork
+  isSupportedOceanNetwork,
+  hasProviderFee
 }: ButtonBuyProps): ReactElement {
   const { web3 } = useWeb3()
   const buttonText =
@@ -182,7 +189,9 @@ export default function ButtonBuy({
         : priceType === 'free'
         ? 'Get'
         : `Buy ${assetTimeout === 'Forever' ? '' : ` for ${assetTimeout}`}`
-      : hasPreviousOrder && hasPreviousOrderSelectedComputeAsset
+      : hasPreviousOrder &&
+        hasPreviousOrderSelectedComputeAsset &&
+        !hasProviderFee
       ? 'Start Compute Job'
       : priceType === 'free' && algorithmPriceType === 'free'
       ? 'Order Compute Job'
@@ -199,7 +208,7 @@ export default function ButtonBuy({
             type={type}
             onClick={onClick}
             disabled={disabled}
-            className="center"
+            className={action === 'compute' ? styles.actionsCenter : ''}
           >
             {buttonText}
           </Button>
@@ -236,7 +245,8 @@ export default function ButtonBuy({
                   selectedComputeAssetType,
                   isAlgorithmConsumable,
                   isSupportedOceanNetwork,
-                  web3
+                  web3,
+                  hasProviderFee
                 )}
           </div>
         </>

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

@@ -4,7 +4,7 @@ import classNames from 'classnames/bind'
 import cleanupContentType from '@utils/cleanupContentType'
 import styles from './index.module.css'
 import Loader from '@shared/atoms/Loader'
-import { FileMetadata } from '@oceanprotocol/lib'
+import { FileInfo } from '@oceanprotocol/lib'
 
 const cx = classNames.bind(styles)
 
@@ -22,7 +22,7 @@ export default function FileIcon({
   small,
   isLoading
 }: {
-  file: FileMetadata
+  file: FileInfo
   className?: string
   small?: boolean
   isLoading?: boolean

src/components/@shared/FormFields/FilesInput/Info.tsx

@@ -2,13 +2,13 @@ import React, { ReactElement } from 'react'
 import { prettySize } from './utils'
 import cleanupContentType from '@utils/cleanupContentType'
 import styles from './Info.module.css'
-import { FileMetadata } from '@oceanprotocol/lib'
+import { FileInfo as FileInfoData } from '@oceanprotocol/lib'
 
 export default function FileInfo({
   file,
   handleClose
 }: {
-  file: FileMetadata
+  file: FileInfoData
   handleClose(): void
 }): ReactElement {
   const contentTypeCleaned = file.contentType

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

@@ -39,15 +39,10 @@ function getTitle(row: PoolTransaction, locale: string) {
     case 'SETUP': {
       const firstToken = row.baseToken
       const firstTokenSymbol = firstToken?.symbol
-      const secondToken = row.datatoken
-      const secondTokenSymbol = secondToken?.symbol
       title += `Create pool with ${formatPrice(
         Math.abs(row.baseTokenValue).toString(),
         locale
-      )}${firstTokenSymbol} and ${formatPrice(
+      )}${firstTokenSymbol}`
-        Math.abs(row.datatokenValue).toString(),
-        locale
-      )}${secondTokenSymbol}`
       break
     }
     case 'JOIN':

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

@@ -187,7 +187,7 @@ export default function PoolTransactions({
         poolTransactions.push({
           ...data[i],
           networkId: !minimal
-            ? getAsset(ddoList, data[i].pool.datatoken.id).chainId
+            ? getAsset(ddoList, data[i].pool.datatoken.id)?.chainId
             : poolChainId,
           asset: !minimal ? getAsset(ddoList, data[i].pool.datatoken.id) : null
         })

src/components/@shared/atoms/Badge/index.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)
 
 export interface BadgeProps {
-  label: string
+  label: string | ReactNode
   className?: string
 }
 

src/components/@shared/atoms/Button/index.module.css

@@ -20,15 +20,6 @@
   text-align: center;
 }
 
-.button:first-child {
-  margin-left: 0;
-}
-
-.button:last-child {
-  margin-right: 0;
-  min-width: auto;
-}
-
 .button:hover,
 .button:focus {
   color: var(--brand-white);
@@ -82,11 +73,6 @@
   min-width: auto;
 }
 
-.center {
-  margin: auto !important;
-  display: block;
-}
-
 /* Size Modifiers */
 .small {
   font-size: var(--font-size-small);

src/components/@shared/atoms/Loader/index.module.css

@@ -23,6 +23,11 @@
   margin-left: calc(var(--spacer) / 4);
 }
 
+.loader.white {
+  border-color: rgba(255 255 255 / 0.3);
+  border-top-color: var(--brand-white);
+}
+
 @keyframes loader {
   to {
     transform: rotate(360deg);

src/components/@shared/atoms/Loader/index.tsx

@@ -3,12 +3,13 @@ import styles from './index.module.css'
 
 export interface LoaderProps {
   message?: string
+  white?: boolean
 }
 
-export default function Loader({ message }: LoaderProps): ReactElement {
+export default function Loader({ message, white }: LoaderProps): ReactElement {
   return (
     <div className={styles.loaderWrap}>
-      <span className={styles.loader} />
+      <span className={`${styles.loader} ${white ? styles.white : ''}`} />
       {message && <span className={styles.message}>{message}</span>}
     </div>
   )

src/components/App/index.tsx

@@ -8,8 +8,7 @@ import AnnouncementBanner from '@shared/AnnouncementBanner'
 import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
 import styles from './index.module.css'
 import { ToastContainer } from 'react-toastify'
-import { useRouter } from 'next/router'
+import contentPurgatory from '../../../content/purgatory.json'
-import content from '../../../content/purgatory.json'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
 export default function App({
@@ -17,24 +16,22 @@ export default function App({
 }: {
   children: ReactElement
 }): ReactElement {
-  const router = useRouter()
-
   const { siteContent, appConfig } = useMarketMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
 
   return (
     <div className={styles.app}>
-      {router.pathname === '/' && siteContent?.warning.main !== '' && (
+      {siteContent?.announcement !== '' && (
-        <AnnouncementBanner text={siteContent?.warning.main} />
+        <AnnouncementBanner text={siteContent?.announcement} />
       )}
       <Header />
 
       {isInPurgatory && (
         <Alert
-          title={content.account.title}
+          title={contentPurgatory.account.title}
           badge={`Reason: ${purgatoryData?.reason}`}
-          text={content.account.description}
+          text={contentPurgatory.account.description}
           state="error"
         />
       )}

src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css

@@ -22,3 +22,7 @@
   border-right: 0;
   padding: 0;
 }
+
+.warning {
+  margin-bottom: var(--spacer);
+}

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

@@ -18,6 +18,8 @@ import {
 import { AssetExtended } from 'src/@types/AssetExtended'
 import Decimal from 'decimal.js'
 import { MAX_DECIMALS } from '@utils/constants'
+import { useMarketMetadata } from '@context/MarketMetadata'
+import Alert from '@shared/atoms/Alert'
 import { getDummyWeb3 } from '@utils/web3'
 
 export default function FormStartCompute({
@@ -45,7 +47,9 @@ export default function FormStartCompute({
   isConsumable,
   consumableFeedback,
   datasetOrderPriceAndFees,
-  algoOrderPriceAndFees
+  algoOrderPriceAndFees,
+  providerFeeAmount,
+  validUntil
 }: {
   algorithms: AssetSelectionAsset[]
   ddoListAlgorithms: Asset[]
@@ -72,7 +76,10 @@ export default function FormStartCompute({
   consumableFeedback: string
   datasetOrderPriceAndFees?: OrderPriceAndFees
   algoOrderPriceAndFees?: OrderPriceAndFees
+  providerFeeAmount?: string
+  validUntil?: string
 }): ReactElement {
+  const { siteContent } = useMarketMetadata()
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
@@ -140,8 +147,12 @@ export default function FormStartCompute({
             algoOrderPriceAndFees?.price ||
               selectedAlgorithmAsset.accessDetails.price
           ).toDecimalPlaces(MAX_DECIMALS)
+    const providerFees = providerFeeAmount
+      ? new Decimal(providerFeeAmount).toDecimalPlaces(MAX_DECIMALS)
+      : new Decimal(0)
     const totalPrice = priceDataset
       .plus(priceAlgo)
+      .plus(providerFees)
       .toDecimalPlaces(MAX_DECIMALS)
       .toString()
 
@@ -166,6 +177,11 @@ export default function FormStartCompute({
 
   return (
     <Form className={styles.form}>
+      <Alert
+        className={styles.warning}
+        state="info"
+        text={siteContent.warning.ctd}
+      />
       {content.form.data.map((field: FormFieldContent) => (
         <Field
           key={field.name}
@@ -190,6 +206,8 @@ export default function FormStartCompute({
         totalPrice={totalPrice}
         datasetOrderPrice={datasetOrderPrice}
         algoOrderPrice={algoOrderPrice}
+        providerFeeAmount={providerFeeAmount}
+        validUntil={validUntil}
       />
 
       <ButtonBuy
@@ -230,6 +248,7 @@ export default function FormStartCompute({
           selectedAlgorithmAsset?.accessDetails?.isPurchasable
         }
         isSupportedOceanNetwork={isSupportedOceanNetwork}
+        hasProviderFee={providerFeeAmount && providerFeeAmount !== '0'}
       />
     </Form>
   )

src/components/Asset/AssetActions/Compute/PriceOutput.module.css

@@ -36,8 +36,10 @@
   border-bottom: 1px solid var(--border-color);
   padding-top: calc(var(--spacer) / 7);
   padding-bottom: calc(var(--spacer) / 7);
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: 5% 1fr auto;
+  column-gap: calc(var(--spacer) / 10);
+  /* justify-content: space-between; */
 }
 
 .priceRow:last-child {
@@ -47,8 +49,14 @@
 
 .sign {
   display: inline-block;
-  width: 5%;
   text-align: left;
   color: var(--color-secondary);
   font-size: var(--font-size-base);
 }
+
+.type {
+  display: inline-block;
+  text-align: left;
+  color: var(--color-secondary);
+  font-size: var(--font-size-mini);
+}

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

@@ -19,6 +19,8 @@ interface PriceOutputProps {
   selectedComputeAssetTimeout: string
   datasetOrderPrice?: number
   algoOrderPrice?: number
+  providerFeeAmount?: string
+  validUntil?: string
 }
 
 function Row({
@@ -27,7 +29,8 @@ function Row({
   hasDatatoken,
   symbol,
   timeout,
-  sign
+  sign,
+  type
 }: {
   price: string
   hasPreviousOrder?: boolean
@@ -35,10 +38,12 @@ function Row({
   symbol?: string
   timeout?: string
   sign?: string
+  type?: string
 }) {
   return (
     <div className={styles.priceRow}>
       <div className={styles.sign}>{sign}</div>
+      <div className={styles.type}>{type}</div>
       <div>
         <PriceUnit
           price={hasPreviousOrder || hasDatatoken ? '0' : `${price}`}
@@ -68,7 +73,9 @@ export default function PriceOutput({
   algorithmConsumeDetails,
   selectedComputeAssetTimeout,
   datasetOrderPrice,
-  algoOrderPrice
+  algoOrderPrice,
+  providerFeeAmount,
+  validUntil
 }: PriceOutputProps): ReactElement {
   const { asset } = useAsset()
 
@@ -89,6 +96,7 @@ export default function PriceOutput({
                 .toString()}
               timeout={assetTimeout}
               symbol={symbol}
+              type="DATASET"
             />
             <Row
               hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
@@ -101,6 +109,14 @@ export default function PriceOutput({
               timeout={selectedComputeAssetTimeout}
               symbol={symbol}
               sign="+"
+              type="ALGORITHM"
+            />
+            <Row
+              price={providerFeeAmount} // initializeCompute.provider fee amount
+              timeout={`${validUntil} seconds`} // valid until value
+              symbol={symbol}
+              sign="+"
+              type="C2D RESOURCES"
             />
             <Row price={totalPrice} symbol={symbol} sign="=" />
           </div>

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

@@ -2,7 +2,7 @@ import React, { useState, ReactElement, useEffect, useCallback } from 'react'
 import {
   Asset,
   DDO,
-  FileMetadata,
+  FileInfo,
   Datatoken,
   ProviderInstance,
   ComputeAsset,
@@ -11,7 +11,8 @@ import {
   LoggerInstance,
   ComputeAlgorithm,
   ComputeOutput,
-  ProviderComputeInitializeResults
+  ProviderComputeInitializeResults,
+  unitsToAmount
 } from '@oceanprotocol/lib'
 import { toast } from 'react-toastify'
 import Price from '@shared/Price'
@@ -59,7 +60,7 @@ export default function Compute({
 }: {
   asset: AssetExtended
   dtBalance: string
-  file: FileMetadata
+  file: FileInfo
   fileIsLoading?: boolean
   isConsumable?: boolean
   consumableFeedback?: string
@@ -94,7 +95,8 @@ export default function Compute({
   const [computeEnv, setComputeEnv] = useState<ComputeEnvironment>()
   const [initializedProviderResponse, setInitializedProviderResponse] =
     useState<ProviderComputeInitializeResults>()
-  // const [computeValidUntil, setComputeValidUntil] = useState<number>()
+  const [providerFeeAmount, setProviderFeeAmount] = useState<string>('0')
+  const [computeValidUntil, setComputeValidUntil] = useState<string>('0')
   const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
   const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
@@ -147,7 +149,18 @@ export default function Compute({
       return
     }
     setInitializedProviderResponse(initializedProvider)
-
+    setProviderFeeAmount(
+      await unitsToAmount(
+        web3,
+        initializedProvider?.datasets?.[0]?.providerFee?.providerFeeToken,
+        initializedProvider?.datasets?.[0]?.providerFee?.providerFeeAmount
+      )
+    )
+    const computeDuration = (
+      parseInt(initializedProvider?.datasets?.[0]?.providerFee?.validUntil) -
+      Math.floor(Date.now() / 1000)
+    ).toString()
+    setComputeValidUntil(computeDuration)
     if (
       asset?.accessDetails?.addressOrId !== ZERO_ADDRESS &&
       asset?.accessDetails?.type !== 'free' &&
@@ -258,6 +271,7 @@ export default function Compute({
     setValidAlgorithmOrderTx(
       selectedAlgorithmAsset?.accessDetails?.validOrderTx
     )
+    setAlgoOrderPriceAndFees(null)
 
     async function initSelectedAlgo() {
       await checkAssetDTBalance(selectedAlgorithmAsset)
@@ -479,6 +493,8 @@ export default function Compute({
             consumableFeedback={consumableFeedback}
             datasetOrderPriceAndFees={datasetOrderPriceAndFees}
             algoOrderPriceAndFees={algoOrderPriceAndFees}
+            providerFeeAmount={providerFeeAmount}
+            validUntil={computeValidUntil}
           />
         </Formik>
       )}

src/components/Asset/AssetActions/Download.tsx

@@ -7,7 +7,7 @@ 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 { FileInfo, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
 import { order } from '@utils/order'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { buyDtFromPool } from '@utils/pool'
@@ -29,7 +29,7 @@ export default function Download({
   consumableFeedback
 }: {
   asset: AssetExtended
-  file: FileMetadata
+  file: FileInfo
   isBalanceSufficient: boolean
   dtBalance: string
   fileIsLoading?: boolean

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

@@ -149,7 +149,7 @@ export default function Add({
               />
             </div>
 
-            <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} />
+            {/* TODO: will be fixed in #1481 <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> */}
 
             <Actions
               isDisabled={!isValid || !values.amount || values.amount === 0}

src/components/Asset/AssetActions/Pool/Sections/Update.module.css

@@ -4,8 +4,8 @@
   font-size: var(--font-size-mini);
   color: var(--color-secondary);
   text-align: center;
-  padding-top: calc(var(--spacer) / 4);
+  padding-top: calc(var(--spacer) / 2);
-  padding-bottom: calc(var(--spacer) / 3);
+  padding-bottom: calc(var(--spacer) / 2);
 }
 
 .update:before {

src/components/Asset/AssetActions/Pool/Sections/index.module.css

@@ -18,3 +18,18 @@
   margin-left: calc(var(--spacer) / 3);
   margin-right: calc(var(--spacer) / 3);
 }
+
+.fees {
+  border-top: none;
+  padding-top: 0;
+  margin-top: -0.5rem;
+}
+
+.fees > div {
+  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
+  text-align: center;
+}
+
+.fees figure {
+  display: none;
+}

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

@@ -110,17 +110,9 @@ export default function PoolSections() {
         titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
       >
         <Graph />
-        <Token
+      </PoolSection>
-          symbol={poolInfo?.baseTokenSymbol}
-          balance={`${poolData?.baseTokenLiquidity}`}
-          size="mini"
-        />
-        <Token
-          symbol={poolInfo?.datatokenSymbol}
-          balance={`${poolData?.datatokenLiquidity}`}
-          size="mini"
-        />
 
+      <PoolSection className={styles.fees}>
         <Token
           symbol="% swap fee"
           balance={poolInfo?.liquidityProviderSwapFee}

src/components/Asset/AssetActions/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import Compute from './Compute'
 import Consume from './Download'
-import { FileMetadata, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
+import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
 import Tabs, { TabsItem } from '@shared/atoms/Tabs'
 import { compareAsBN } from '@utils/numbers'
 import Pool from './Pool'
@@ -37,7 +37,7 @@ export default function AssetActions({
 
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
   const [dtBalance, setDtBalance] = useState<string>()
-  const [fileMetadata, setFileMetadata] = useState<FileMetadata>()
+  const [fileMetadata, setFileMetadata] = useState<FileInfo>()
   const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
   const isCompute = Boolean(
     asset?.services.filter((service) => service.type === 'compute')[0]

src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx

@@ -5,13 +5,14 @@ import AddToken from '@shared/AddToken'
 import ExplorerLink from '@shared/ExplorerLink'
 import Publisher from '@shared/Publisher'
 import React, { ReactElement } from 'react'
+import { AssetExtended } from 'src/@types/AssetExtended'
 import styles from './MetaAsset.module.css'
 
 export default function MetaAsset({
   asset,
   isBlockscoutExplorer
 }: {
-  asset: Asset
+  asset: AssetExtended
   isBlockscoutExplorer: boolean
 }): ReactElement {
   const { isAssetNetwork } = useAsset()

src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx

@@ -1,16 +1,17 @@
-import { Asset } from '@oceanprotocol/lib'
+import { useAsset } from '@context/Asset'
 import AssetType from '@shared/AssetType'
 import Time from '@shared/atoms/Time'
 import Publisher from '@shared/Publisher'
 import { getServiceByName } from '@utils/ddo'
 import React, { ReactElement } from 'react'
+import { AssetExtended } from 'src/@types/AssetExtended'
 import styles from './MetaInfo.module.css'
 
 export default function MetaInfo({
   asset,
   nftPublisher
 }: {
-  asset: Asset
+  asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
   const isCompute = Boolean(getServiceByName(asset, 'compute'))

src/components/Asset/AssetContent/MetaMain/index.module.css

@@ -13,32 +13,3 @@
   height: calc(var(--spacer) * 2);
   border-bottom: 1px solid var(--border-color);
 }
-
-.nftImage {
-  position: relative;
-  margin: 0;
-  border-right: 1px solid var(--border-color);
-  width: calc(var(--spacer) * 2);
-  height: calc(var(--spacer) * 2);
-}
-
-.nftImage img,
-.nftImage > svg:first-of-type {
-  width: 100%;
-  height: 100%;
-}
-
-.nftImage > svg:first-of-type {
-  transform: scale(0.7);
-}
-
-.nftImage .tooltip {
-  position: absolute;
-  padding: 0;
-  left: 0;
-  bottom: 0;
-}
-
-.nftImage .tooltip svg {
-  fill: var(--font-color-text);
-}

src/components/Asset/AssetContent/MetaMain/index.tsx

@@ -1,14 +1,11 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { AssetExtended } from 'src/@types/AssetExtended'
-import { decodeTokenURI } from '@utils/nft'
 import MetaAsset from './MetaAsset'
 import MetaInfo from './MetaInfo'
-import Tooltip from '@shared/atoms/Tooltip'
+import Nft from '../Nft'
-import NftTooltip from './NftTooltip'
+import { AssetExtended } from 'src/@types/AssetExtended'
-import Logo from '@shared/atoms/Logo'
+
-import { FormPublishData } from '../../../Publish/_types'
+const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
-import { useFormikContext } from 'formik'
 
 export default function MetaMain({
   asset,
@@ -17,51 +14,12 @@ export default function MetaMain({
   asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
-  const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
-
-  const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
   const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId)
 
-  // TODO: using this for the publish preview works fine, but produces a console warning
-  // on asset details page as there is no formik context there:
-  // Warning: Formik context is undefined, please verify you are calling useFormikContext()
-  // as child of a <Formik> component.
-  const formikState = useFormikContext<FormPublishData>()
-
-  // checking if the NFT has an image associated (tokenURI)
-  // if tokenURI is undefined, then we are in Preview
-  // for Preview we need to show accessDetails.dataImage
-  // as this is where the NFT's SVG (during publish) is stored
-  const nftImage = nftMetadata?.image_data
-    ? nftMetadata.image_data
-    : formikState?.values?.metadata?.nft?.image_data
-    ? formikState.values.metadata.nft.image_data
-    : null
-
   return (
     <aside className={styles.meta}>
       <header className={styles.asset}>
-        <div className={styles.nftImage}>
+        <Nft isBlockscoutExplorer={isBlockscoutExplorer} />
-          {nftImage ? (
-            <img src={nftImage} alt={asset?.nft?.name} />
-          ) : (
-            <Logo noWordmark />
-          )}
-
-          {(nftMetadata || asset?.nftAddress) && (
-            <Tooltip
-              className={styles.tooltip}
-              content={
-                <NftTooltip
-                  nft={nftMetadata}
-                  address={asset?.nftAddress}
-                  chainId={asset?.chainId}
-                  isBlockscoutExplorer={isBlockscoutExplorer}
-                />
-              }
-            />
-          )}
-        </div>
         <MetaAsset asset={asset} isBlockscoutExplorer={isBlockscoutExplorer} />
       </header>
 

src/components/Asset/AssetContent/Nft/NftTooltip.tsx

@@ -7,6 +7,11 @@ import styles from './NftTooltip.module.css'
 import explorerLinkStyles from '@shared/ExplorerLink/index.module.css'
 import { accountTruncate } from '@utils/web3'
 
+// Supported OpenSea networks:
+// https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
+const openSeaNetworks = [1, 137]
+const openSeaTestNetworks = [4]
+
 export default function NftTooltip({
   nft,
   address,
@@ -18,26 +23,23 @@ export default function NftTooltip({
   chainId: number
   isBlockscoutExplorer: boolean
 }): ReactElement {
-  // Currently Ocean NFTs are not displayed correctly on OpenSea
+  const openSeaSupported = openSeaNetworks
-  // Code prepared to easily integrate this feature once this is fixed
+    .concat(openSeaTestNetworks)
-  //
-  // Supported OpeanSea networks:
-  // https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
-  const openseaNetworks = [1, 137]
-  const openseaTestNetworks = [4]
-  const openSeaSupported = openseaNetworks
-    .concat(openseaTestNetworks)
     .includes(chainId)
 
   const openSeaBaseUri = openSeaSupported
-    ? openseaTestNetworks.includes(chainId)
+    ? openSeaTestNetworks.includes(chainId)
       ? 'https://testnets.opensea.io'
       : 'https://opensea.io'
     : undefined
 
+  const openSeaUrl = `${openSeaBaseUri}/assets/${
+    chainId === 137 ? 'matic' : ''
+  }/${address}/1`
+
   return (
     <div className={styles.wrapper}>
-      {nft && <img src={nft.image_data} alt={nft?.name} />}
+      {nft && <img src={nft.image_data || nft.image} alt={nft?.name} />}
       <div className={styles.info}>
         {nft && <h5>{nft.name}</h5>}
         {address && (
@@ -53,25 +55,23 @@ export default function NftTooltip({
                 isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
               }
             >
-              View on explorer
+              View on Explorer
             </ExplorerLink>
           )}
 
-          {openSeaSupported && nft && address && (
+          {openSeaSupported && address && (
             <a
-              href={`${openSeaBaseUri}/assets/${address}/1`}
+              href={openSeaUrl}
               target="_blank"
               rel="noreferrer"
               className={explorerLinkStyles.link}
             >
-              View on OpeanSea <External />
+              View on OpenSea <External />
             </a>
           )}
         </div>
-        {!nft?.image_data && (
+        {!nft?.image_data && !nft?.image && (
-          <p className={styles.fallback}>
+          <p className={styles.fallback}>This Data NFT has no image set.</p>
-            This Data NFT was not created on Ocean Market
-          </p>
         )}
       </div>
     </div>

src/components/Asset/AssetContent/Nft/index.module.css

@@ -0,0 +1,28 @@
+.nftImage {
+  position: relative;
+  margin: 0;
+  border-right: 1px solid var(--border-color);
+  width: calc(var(--spacer) * 2);
+  height: calc(var(--spacer) * 2);
+}
+
+.nftImage img,
+.nftImage > svg:first-of-type {
+  width: 100%;
+  height: 100%;
+}
+
+.nftImage > svg:first-of-type {
+  transform: scale(0.7);
+}
+
+.nftImage .tooltip {
+  position: absolute;
+  padding: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.nftImage .tooltip svg {
+  fill: var(--font-color-text);
+}

src/components/Asset/AssetContent/Nft/index.tsx

@@ -0,0 +1,60 @@
+import { useAsset } from '@context/Asset'
+import Tooltip from '@shared/atoms/Tooltip'
+import { decodeTokenURI } from '@utils/nft'
+import { useFormikContext } from 'formik'
+import React from 'react'
+import { FormPublishData } from 'src/components/Publish/_types'
+import Logo from '@shared/atoms/Logo'
+import NftTooltip from './NftTooltip'
+import styles from './index.module.css'
+
+export default function Nft({
+  isBlockscoutExplorer
+}: {
+  isBlockscoutExplorer: boolean
+}) {
+  const { asset } = useAsset()
+  const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
+
+  // TODO: using this for the publish preview works fine, but produces a console warning
+  // on asset details page as there is no formik context there:
+  // Warning: Formik context is undefined, please verify you are calling useFormikContext()
+  // as child of a <Formik> component.
+  const formikState = useFormikContext<FormPublishData>()
+
+  // checking if the NFT has an image associated (tokenURI)
+  // if tokenURI is undefined, then we are in Preview
+  // for Preview we need to show accessDetails.dataImage
+  // as this is where the NFT's SVG (during publish) is stored
+  const nftImage = nftMetadata?.image_data
+    ? nftMetadata.image_data
+    : nftMetadata?.image
+    ? nftMetadata.image
+    : formikState?.values?.metadata?.nft?.image_data
+    ? formikState.values.metadata.nft.image_data
+    : null
+
+  return (
+    <div className={styles.nftImage}>
+      {nftImage ? (
+        <img src={nftImage} alt={asset?.nft?.name} />
+      ) : (
+        <Logo noWordmark />
+      )}
+
+      {(nftMetadata || asset?.nftAddress) && (
+        <Tooltip
+          className={styles.tooltip}
+          content={
+            <NftTooltip
+              nft={nftMetadata}
+              address={asset?.nftAddress}
+              chainId={asset?.chainId}
+              isBlockscoutExplorer={isBlockscoutExplorer}
+            />
+          }
+        />
+      )}
+    </div>
+  )
+}

src/components/Asset/Edit/EditMetadata.tsx

@@ -24,6 +24,7 @@ import EditFeedback from './EditFeedback'
 import { useAsset } from '@context/Asset'
 import { setNftMetadata } from '@utils/nft'
 import { sanitizeUrl } from '@utils/url'
+import { getEncryptedFiles } from '@utils/provider'
 
 export default function Edit({
   asset
@@ -64,6 +65,7 @@ export default function Edit({
     resetForm: () => void
   ) {
     try {
+      let updatedFiles = asset.services[0].files
       const linksTransformed = values.links?.length &&
         values.links[0].valid && [sanitizeUrl(values.links[0].url)]
       const updatedMetadata: Metadata = {
@@ -78,17 +80,43 @@ export default function Edit({
         values.price !== asset.accessDetails.price &&
         (await updateFixedPrice(values.price))
 
+      if (values.files[0]?.url) {
+        const file = {
+          nftAddress: asset.nftAddress,
+          datatokenAddress: asset.services[0].datatokenAddress,
+          files: [
+            {
+              type: 'url',
+              index: 0,
+              url: values.files[0].url,
+              method: 'GET'
+            }
+          ]
+        }
+        const filesEncrypted = await getEncryptedFiles(
+          file,
+          asset.services[0].serviceEndpoint
+        )
+        updatedFiles = filesEncrypted
+      }
       const updatedService: Service = {
         ...asset.services[0],
-        timeout: mapTimeoutStringToSeconds(values.timeout)
+        timeout: mapTimeoutStringToSeconds(values.timeout),
+        files: updatedFiles
       }
 
+      // TODO: remove version update at a later time
       const updatedAsset: Asset = {
-        ...asset,
+        ...(asset as Asset),
+        version: '4.1.0',
         metadata: updatedMetadata,
         services: [updatedService]
       }
 
+      // delete custom helper properties injected in the market so we don't write them on chain
+      delete (updatedAsset as AssetExtended).accessDetails
+      delete (updatedAsset as AssetExtended).datatokens
+      delete (updatedAsset as AssetExtended).stats
       const setMetadataTx = await setNftMetadata(
         updatedAsset,
         accountId,

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -1,9 +1,8 @@
-import React, { ChangeEvent, ReactElement, useState } from 'react'
+import React, { ChangeEvent, ReactElement } from 'react'
 import { Field, Form, FormikContextType, useFormikContext } from 'formik'
 import Input, { InputProps } from '@shared/FormInput'
 import FormActions from './FormActions'
 import styles from './FormEdit.module.css'
-import { FormPublishData } from '../../Publish/_types'
 import { useAsset } from '@context/Asset'
 import { MetadataEditForm } from './_types'
 

src/components/Asset/Edit/_constants.ts

@@ -1,4 +1,4 @@
-import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
+import { FileInfo, Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
 import { secondsToString } from '@utils/ddo'
 import * as Yup from 'yup'
 import { MetadataEditForm } from './_types'
@@ -10,6 +10,7 @@ export const validationSchema = Yup.object().shape({
   description: Yup.string().required('Required').min(10),
   price: Yup.number().required('Required'),
   links: Yup.array<any[]>().nullable(),
+  files: Yup.array<FileInfo[]>().nullable(),
   timeout: Yup.string().required('Required'),
   author: Yup.string().nullable()
 })
@@ -24,6 +25,7 @@ export function getInitialValues(
     description: metadata?.description,
     price,
     links: metadata?.links,
+    files: '',
     timeout: secondsToString(timeout),
     author: metadata?.author
   }

src/components/Asset/Edit/_types.ts

@@ -6,5 +6,6 @@ export interface MetadataEditForm {
   timeout: string
   price?: string
   links?: string | any[]
+  files: string | any[]
   author?: string
 }

src/components/Asset/index.tsx

@@ -1,27 +1,33 @@
 import React, { useState, useEffect, ReactElement } from 'react'
+import { useRouter } from 'next/router'
 import Page from '@shared/Page'
 import Alert from '@shared/atoms/Alert'
 import Loader from '@shared/atoms/Loader'
 import { useAsset } from '@context/Asset'
 import AssetContent from './AssetContent'
+import { v3MarketUri } from 'app.config'
 
 export default function AssetDetails({ uri }: { uri: string }): ReactElement {
-  const { asset, title, error, isInPurgatory, loading } = useAsset()
+  const router = useRouter()
+  const { asset, title, error, isInPurgatory, loading, isV3Asset } = useAsset()
   const [pageTitle, setPageTitle] = useState<string>()
 
   useEffect(() => {
+    if (isV3Asset) {
+      router.push(`${v3MarketUri}${uri}`)
+    }
     if (!asset || error) {
       setPageTitle('Could not retrieve asset')
       return
     }
     setPageTitle(isInPurgatory ? '' : title)
-  }, [asset, error, isInPurgatory, title])
+  }, [asset, error, isInPurgatory, isV3Asset, router, title, uri])
 
   return asset && pageTitle !== undefined && !loading ? (
     <Page title={pageTitle} uri={uri}>
       <AssetContent asset={asset} />
     </Page>
-  ) : error ? (
+  ) : error && isV3Asset === false ? (
     <Page title={pageTitle} noPageHeader uri={uri}>
       <Alert title={pageTitle} text={error} state="error" />
     </Page>

src/components/Footer/MarketStats/Tooltip.tsx

@@ -4,6 +4,8 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import NetworkName from '@shared/NetworkName'
 import styles from './Tooltip.module.css'
 import { StatsValue } from './_types'
+import content from '../../../../content/footer.json'
+import Markdown from '@shared/Markdown'
 
 export default function MarketStatsTooltip({
   totalValueLockedInOcean,
@@ -39,13 +41,7 @@ export default function MarketStatsTooltip({
           </li>
         ))}
       </ul>
-      <p className={styles.note}>
+      <Markdown className={styles.note} text={content.stats.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/index.tsx

@@ -61,7 +61,9 @@ export default function MarketStats(): ReactElement {
   //
   const getMarketStats = useCallback(async () => {
     if (!mainChainIds?.length) return
-
+    const newData: {
+      [chainId: number]: FooterStatsValuesGlobalStatistics
+    } = {}
     for (const chainId of mainChainIds) {
       const context: OperationContext = {
         url: `${getSubgraphUri(
@@ -73,15 +75,12 @@ export default function MarketStats(): ReactElement {
       try {
         const response = await fetchData(queryGlobalStatistics, null, context)
         if (!response?.data?.globalStatistics) return
-
+        newData[chainId] = response.data.globalStatistics[0]
-        setData((prevState) => ({
-          ...prevState,
-          [chainId]: response.data.globalStatistics[0]
-        }))
       } catch (error) {
         LoggerInstance.error('Error fetching global stats: ', error.message)
       }
     }
+    setData(newData)
   }, [mainChainIds])
 
   //
@@ -96,10 +95,12 @@ export default function MarketStats(): ReactElement {
   //
   useEffect(() => {
     if (!data || !mainChainIds?.length) return
-
     const newTotal: StatsTotal = {
       ...initialTotal // always start calculating beginning from initial 0 values
     }
+    const newTVLInOcean: StatsValue = {}
+    const newTotalLiquidity: StatsValue = {}
+    const newPoolCount: StatsValue = {}
 
     for (const chainId of mainChainIds) {
       const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
@@ -109,25 +110,15 @@ export default function MarketStats(): ReactElement {
           ? new Decimal(baseTokenValue).mul(2)
           : new Decimal(0)
 
-        setTotalValueLockedInOcean((prevState) => ({
+        newTVLInOcean[chainId] = `${totalValueLockedInOcean}`
-          ...prevState,
-          [chainId]: `${totalValueLockedInOcean}`
-        }))
 
         const totalOceanLiquidity = Number(baseTokenValue) || 0
 
-        setTotalOceanLiquidity((prevState) => ({
+        newTotalLiquidity[chainId] = `${totalOceanLiquidity}`
-          ...prevState,
-          [chainId]: `${totalOceanLiquidity}`
-        }))
 
         const poolCount = data[chainId]?.poolCount || 0
 
-        setPoolCount((prevState) => ({
+        newPoolCount[chainId] = `${poolCount}`
-          ...prevState,
-          [chainId]: `${poolCount}`
-        }))
-
         const nftCount = data[chainId]?.nftCount || 0
         const datatokenCount = data[chainId]?.datatokenCount || 0
         const orderCount = data[chainId]?.orderCount || 0
@@ -142,7 +133,9 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error data manipulation: ', error.message)
       }
     }
-
+    setTotalValueLockedInOcean(newTVLInOcean)
+    setTotalOceanLiquidity(newTotalLiquidity)
+    setPoolCount(newPoolCount)
     setTotal(newTotal)
   }, [data, mainChainIds, prices, currency])
 

src/components/Header/Menu.module.css

@@ -7,13 +7,24 @@
   flex-wrap: wrap;
 }
 
-.logo {
+.logo,
-  order: 1;
+.badge {
   white-space: nowrap;
   display: flex;
+}
+
+.logo {
+  order: 0;
   align-items: center;
 }
 
+.badge {
+  cursor: pointer;
+  margin-top: -0.25rem;
+  position: relative;
+  padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
+}
+
 .navigation {
   order: 3;
   margin-top: calc(var(--spacer) / 2);
@@ -60,10 +71,10 @@
 
   .title {
     margin: 0;
-    margin-right: var(--spacer);
     display: block;
     color: var(--color-secondary);
     font-size: var(--font-size-h4);
+    margin-right: calc(var(--spacer) / 6);
   }
 }
 
@@ -115,6 +126,10 @@
   padding-right: 0;
 }
 
+.link[aria-disabled] {
+  pointer-events: none;
+}
+
 .logo svg {
   margin-right: calc(var(--spacer) / 3);
 }
@@ -122,3 +137,36 @@
 .actions button {
   text-transform: none;
 }
+
+.tooltip[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+.caret,
+svg.caret {
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+  fill: var(--brand-white);
+  opacity: 0.7;
+  transition: transform 0.2s ease-out;
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 12);
+}
+
+@media screen and (min-width: 42rem) {
+  .caret,
+  svg.caret {
+    display: inline-block;
+  }
+}
+
+.versions {
+  padding: calc(var(--spacer) / 4);
+}
+
+.versions .link {
+  display: inline-block;
+  margin: 0 calc(var(--spacer) / 4);
+  padding: 0;
+  font-size: var(--font-size-small);
+}

src/components/Header/Menu.tsx

@@ -9,7 +9,8 @@ import SearchBar from './SearchBar'
 import styles from './Menu.module.css'
 import { useRouter } from 'next/router'
 import { useMarketMetadata } from '@context/MarketMetadata'
-
+import Tooltip from '@shared/atoms/Tooltip'
+import Caret from '@images/caret.svg'
 const Wallet = loadable(() => import('./Wallet'))
 
 declare type MenuItem = {
@@ -33,19 +34,41 @@ function MenuLink({ item }: { item: MenuItem }) {
 }
 
 export default function Menu(): ReactElement {
-  const { siteContent } = useMarketMetadata()
+  const { appConfig, siteContent } = useMarketMetadata()
 
   return (
     <nav className={styles.menu}>
       <Link href="/">
         <a className={styles.logo}>
           <Logo noWordmark />
-          <h1 className={styles.title}>
+          <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
-            {siteContent?.siteTitle} <Badge label="v4" />
-          </h1>
         </a>
       </Link>
 
+      <Tooltip
+        className={styles.tooltip}
+        content={
+          <div className={styles.versions}>
+            <a className={styles.link} href={appConfig.v3MarketUri}>
+              v3
+            </a>
+            <a className={styles.link} href="" aria-current aria-disabled>
+              v4
+            </a>
+          </div>
+        }
+        trigger="click focus"
+        placement="bottom"
+      >
+        <Badge
+          className={styles.badge}
+          label={
+            <>
+              v4 <Caret aria-hidden="true" className={styles.caret} />
+            </>
+          }
+        />
+      </Tooltip>
       <ul className={styles.navigation}>
         {siteContent?.menu.map((item: MenuItem) => (
           <li key={item.name}>

src/components/Profile/History/PoolShares/_utils.ts

@@ -39,7 +39,7 @@ export async function getAssetsFromPoolShares(
     assetList.push({
       poolShare: data[i],
       userLiquidity,
-      networkId: getAsset(ddoList, data[i].pool.datatoken.address).chainId,
+      networkId: getAsset(ddoList, data[i].pool.datatoken.address)?.chainId,
       createTime: data[i].pool.createdTimestamp,
       asset: getAsset(ddoList, data[i].pool.datatoken.address)
     })

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

@@ -7,6 +7,7 @@
 
 .actions button {
   margin: 0 calc(var(--spacer) / 2);
+  min-height: 40px;
 }
 
 .infoIcon {

src/components/Publish/Actions/index.tsx

@@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
 import Tooltip from '@shared/atoms/Tooltip'
 import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
 import Info from '@images/info.svg'
+import Loader from '@shared/atoms/Loader'
 
 export default function Actions({
   scrollToRef,
@@ -24,8 +25,7 @@ export default function Actions({
     values,
     errors,
     isValid,
-    isSubmitting,
+    isSubmitting
-    setFieldValue
   }: FormikContextType<FormPublishData> = useFormikContext()
   const { connect, accountId } = useWeb3()
 
@@ -60,6 +60,11 @@ export default function Actions({
     (values.user.stepCurrent === 2 && errors.services !== undefined) ||
     (values.user.stepCurrent === 3 && errors.pricing !== undefined)
 
+  const hasSubmitError =
+    values.feedback?.[1].status === 'error' ||
+    values.feedback?.[2].status === 'error' ||
+    values.feedback?.[3].status === 'error'
+
   return (
     <footer className={styles.actions}>
       {did ? (
@@ -108,7 +113,13 @@ export default function Actions({
               style="primary"
               disabled={isSubmitting || !isValid}
             >
-              Submit
+              {isSubmitting ? (
+                <Loader white />
+              ) : hasSubmitError ? (
+                'Retry'
+              ) : (
+                'Submit'
+              )}
             </Button>
           )}
         </>

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

@@ -4,3 +4,7 @@
   margin-left: 1.75rem;
   top: -3.2rem;
 }
+
+.fieldWarning {
+  composes: fieldWarning from '../index.module.css';
+}

src/components/Publish/Metadata/index.tsx

@@ -9,6 +9,8 @@ import IconDataset from '@images/dataset.svg'
 import IconAlgorithm from '@images/algorithm.svg'
 import styles from './index.module.css'
 import { algorithmContainerPresets } from '../_constants'
+import Alert from '@shared/atoms/Alert'
+import { useMarketMetadata } from '@context/MarketMetadata'
 
 const assetTypeOptionsTitles = getFieldContent(
   'type',
@@ -16,6 +18,8 @@ const assetTypeOptionsTitles = getFieldContent(
 ).options
 
 export default function MetadataFields(): ReactElement {
+  const { siteContent } = useMarketMetadata()
+
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
@@ -71,6 +75,13 @@ export default function MetadataFields(): ReactElement {
         name="metadata.type"
         options={assetTypeOptions}
       />
+      {values.services[0].access === 'compute' && (
+        <Alert
+          className={styles.fieldWarning}
+          state="info"
+          text={siteContent.warning.ctd}
+        />
+      )}
       <Field
         {...getFieldContent('name', content.metadata.fields)}
         component={Input}

src/components/Publish/Services/index.tsx

@@ -6,6 +6,9 @@ import IconCompute from '@images/compute.svg'
 import content from '../../../../content/publish/form.json'
 import { getFieldContent } from '../_utils'
 import { FormPublishData } from '../_types'
+import Alert from '@shared/atoms/Alert'
+import { useMarketMetadata } from '@context/MarketMetadata'
+import styles from '../index.module.css'
 
 const accessTypeOptionsTitles = getFieldContent(
   'access',
@@ -13,6 +16,8 @@ const accessTypeOptionsTitles = getFieldContent(
 ).options
 
 export default function ServicesFields(): ReactElement {
+  const { siteContent } = useMarketMetadata()
+
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
@@ -67,12 +72,21 @@ export default function ServicesFields(): ReactElement {
           name="services[0].algorithmPrivacy"
         />
       ) : (
-        <Field
+        <>
-          {...getFieldContent('access', content.services.fields)}
+          <Field
-          component={Input}
+            {...getFieldContent('access', content.services.fields)}
-          name="services[0].access"
+            component={Input}
-          options={accessTypeOptions}
+            name="services[0].access"
-        />
+            options={accessTypeOptions}
+          />
+          {values.services[0].access === 'compute' && (
+            <Alert
+              className={styles.fieldWarning}
+              state="info"
+              text={siteContent.warning.ctd}
+            />
+          )}
+        </>
       )}
       <Field
         {...getFieldContent('providerUrl', content.services.fields)}

src/components/Publish/Submission/index.tsx

@@ -1,12 +1,8 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { FormPublishData } from '../_types'
-import { useFormikContext } from 'formik'
 import { Feedback } from './Feedback'
 
 export default function Submission(): ReactElement {
-  const { values, handleSubmit } = useFormikContext<FormPublishData>()
-
   return (
     <div className={styles.submission}>
       <Feedback />

src/components/Publish/_types.ts

@@ -3,7 +3,7 @@ import { NftMetadata } from '@utils/nft'
 import { ReactElement } from 'react'
 import { PriceOptions } from 'src/@types/Price'
 
-interface FileMetadata {
+interface FileInfo {
   url: string
   valid?: boolean
   contentLength?: string
@@ -11,8 +11,8 @@ interface FileMetadata {
 }
 
 export interface FormPublishService {
-  files: FileMetadata[]
+  files: FileInfo[]
-  links?: FileMetadata[]
+  links?: FileInfo[]
   timeout: string
   dataTokenOptions: { name: string; symbol: string }
   access: 'Download' | 'Compute' | string

src/components/Publish/_utils.ts

@@ -144,13 +144,18 @@ export async function transformPublishFormToDdo(
   }
 
   // this is the default format hardcoded
-  const file = [
+  const file = {
-    {
+    nftAddress,
-      type: 'url',
+    datatokenAddress,
-      url: files[0].url,
+    files: [
-      method: 'GET'
+      {
-    }
+        type: 'url',
-  ]
+        index: 0,
+        url: files[0].url,
+        method: 'GET'
+      }
+    ]
+  }
   const filesEncrypted =
     !isPreview &&
     files?.length &&
@@ -173,7 +178,7 @@ export async function transformPublishFormToDdo(
     '@context': ['https://w3id.org/did/v1'],
     id: did,
     nftAddress,
-    version: '4.0.0',
+    version: '4.1.0',
     chainId,
     metadata: newMetadata,
     services: [newService],

src/components/Publish/_validation.ts

@@ -146,7 +146,7 @@ export const validationSchema: Yup.SchemaOf<any> = Yup.object().shape({
 //         .min(4, (param) => `Title must be at least ${param.min} characters`)
 //         .required('Required'),
 //       description: Yup.string().min(10).required('Required'),
-//       files: Yup.array<FileMetadata>().required('Required').nullable(),
+//       files: Yup.array<FileInfo>().required('Required').nullable(),
 //       timeout: Yup.string().required('Required'),
 //       dataTokenOptions: Yup.object()
 //         .shape({
@@ -167,6 +167,6 @@ export const validationSchema: Yup.SchemaOf<any> = Yup.object().shape({
 //       // ---- optional fields ----
 //       algorithmPrivacy: Yup.boolean().nullable(),
 //       tags: Yup.string().nullable(),
-//       links: Yup.array<FileMetadata[]>().nullable()
+//       links: Yup.array<FileInfo[]>().nullable()
 //     })
 //     .defined()

src/components/Publish/index.module.css

@@ -16,3 +16,8 @@
     padding-right: calc(var(--spacer) * 4);
   }
 }
+
+.fieldWarning {
+  margin-top: -2rem;
+  margin-bottom: var(--spacer);
+}

src/components/Publish/index.tsx

@@ -11,7 +11,7 @@ import Actions from './Actions'
 import Debug from './Debug'
 import Navigation from './Navigation'
 import { Steps } from './Steps'
-import { FormPublishData, PublishFeedback } from './_types'
+import { FormPublishData } from './_types'
 import { useUserPreferences } from '@context/UserPreferences'
 import useNftFactory from '@hooks/contracts/useNftFactory'
 import { ProviderInstance, LoggerInstance, DDO } from '@oceanprotocol/lib'
@@ -35,34 +35,34 @@ export default function PublishPage({
   const nftFactory = useNftFactory()
   const newAbortController = useAbortController()
 
-  const [feedback, setFeedback] = useState<PublishFeedback>(
+  // This `feedback` state is auto-synced into Formik context under `values.feedback`
-    initialPublishFeedback
+  // for use in other components. Syncing defined in ./Steps.tsx child component.
-  )
+  const [feedback, setFeedback] = useState(initialPublishFeedback)
+
+  // Collecting output of each publish step, enabling retry of failed steps
+  const [erc721Address, setErc721Address] = useState<string>()
+  const [datatokenAddress, setDatatokenAddress] = useState<string>()
+  const [ddo, setDdo] = useState<DDO>()
+  const [ddoEncrypted, setDdoEncrypted] = useState<string>()
   const [did, setDid] = useState<string>()
 
-  async function handleSubmit(values: FormPublishData) {
+  // --------------------------------------------------
-    let _erc721Address: string,
+  // 1. Create NFT & datatokens & create pricing schema
-      _datatokenAddress: string,
+  // --------------------------------------------------
-      _ddo: DDO,
+  async function create(values: FormPublishData): Promise<{
-      _encryptedDdo: string
+    erc721Address: string
+    datatokenAddress: string
+  }> {
+    setFeedback((prevState) => ({
+      ...prevState,
+      '1': {
+        ...prevState['1'],
+        status: 'active',
+        errorMessage: null
+      }
+    }))
 
-    // reset all feedback state
-    setFeedback(initialPublishFeedback)
-
-    // --------------------------------------------------
-    // 1. Create NFT & datatokens & create pricing schema
-    // --------------------------------------------------
     try {
-      setFeedback((prevState) => ({
-        ...prevState,
-        '1': {
-          ...prevState['1'],
-          status: 'active',
-          txCount: values.pricing.type === 'dynamic' ? 2 : 1,
-          description: prevState['1'].description
-        }
-      }))
-
       const config = getOceanConfig(chainId)
       LoggerInstance.log('[publish] using config: ', config)
 
@@ -76,8 +76,7 @@ export default function PublishPage({
         )
 
       const isSuccess = Boolean(erc721Address && datatokenAddress && txHash)
-      _erc721Address = erc721Address
+      if (!isSuccess) throw new Error('No Token created. Please try again.')
-      _datatokenAddress = datatokenAddress
 
       LoggerInstance.log('[publish] createTokensAndPricing tx', txHash)
       LoggerInstance.log('[publish] erc721Address', erc721Address)
@@ -87,14 +86,16 @@ export default function PublishPage({
         ...prevState,
         '1': {
           ...prevState['1'],
-          status: isSuccess ? 'success' : 'error',
+          status: 'success',
           txHash
         }
       }))
+
+      return { erc721Address, datatokenAddress }
     } catch (error) {
       LoggerInstance.error('[publish] error', error.message)
       if (error.message.length > 65) {
-        error.message = 'No Token created.'
+        error.message = 'No Token created. Please try again.'
       }
 
       setFeedback((prevState) => ({
@@ -102,58 +103,65 @@ export default function PublishPage({
         '1': {
           ...prevState['1'],
           status: 'error',
-          errorMessage: error.message,
+          errorMessage: error.message
-          description:
-            values.pricing.type === 'dynamic'
-              ? prevState['1'].description.replace(
-                  'a single transaction',
-                  'a single transaction, after an initial approve transaction'
-                )
-              : prevState['1'].description
         }
       }))
     }
+  }
+
+  // --------------------------------------------------
+  // 2. Construct and encrypt DDO
+  // --------------------------------------------------
+  async function encrypt(
+    values: FormPublishData,
+    erc721Address: string,
+    datatokenAddress: string
+  ): Promise<{ ddo: DDO; ddoEncrypted: string }> {
+    setFeedback((prevState) => ({
+      ...prevState,
+      '2': {
+        ...prevState['2'],
+        status: 'active',
+        errorMessage: null
+      }
+    }))
 
-    // --------------------------------------------------
-    // 2. Construct and encrypt DDO
-    // --------------------------------------------------
     try {
-      setFeedback((prevState) => ({
+      if (!datatokenAddress || !erc721Address)
-        ...prevState,
+        throw new Error('No NFT or Datatoken received. Please try again.')
-        '2': {
-          ...prevState['2'],
-          status: 'active'
-        }
-      }))
-
-      if (!_datatokenAddress || !_erc721Address)
-        throw new Error('No NFT or Datatoken received.')
 
       const ddo = await transformPublishFormToDdo(
         values,
-        _datatokenAddress,
+        datatokenAddress,
-        _erc721Address
+        erc721Address
       )
 
-      _ddo = ddo
+      if (!ddo) throw new Error('No DDO received. Please try again.')
+
+      setDdo(ddo)
       LoggerInstance.log('[publish] Got new DDO', ddo)
 
-      const encryptedResponse = await ProviderInstance.encrypt(
+      const ddoEncrypted = await ProviderInstance.encrypt(
         ddo,
         values.services[0].providerUrl.url,
         newAbortController()
       )
-      const encryptedDdo = encryptedResponse
+
-      _encryptedDdo = encryptedDdo
+      if (!ddoEncrypted)
-      LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo)
+        throw new Error('No encrypted DDO received. Please try again.')
+
+      setDdoEncrypted(ddoEncrypted)
+      LoggerInstance.log('[publish] Got encrypted DDO', ddoEncrypted)
 
       setFeedback((prevState) => ({
         ...prevState,
         '2': {
           ...prevState['2'],
-          status: encryptedDdo ? 'success' : 'error'
+          status: 'success'
         }
       }))
+
+      return { ddo, ddoEncrypted }
     } catch (error) {
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
@@ -165,43 +173,53 @@ export default function PublishPage({
         }
       }))
     }
+  }
+
+  // --------------------------------------------------
+  // 3. Write DDO into NFT metadata
+  // --------------------------------------------------
+  async function publish(
+    values: FormPublishData,
+    ddo: DDO,
+    ddoEncrypted: string
+  ): Promise<{ did: string }> {
+    setFeedback((prevState) => ({
+      ...prevState,
+      '3': {
+        ...prevState['3'],
+        status: 'active',
+        errorMessage: null
+      }
+    }))
 
-    // --------------------------------------------------
-    // 3. Write DDO into NFT metadata
-    // --------------------------------------------------
     try {
-      setFeedback((prevState) => ({
+      if (!ddo || !ddoEncrypted)
-        ...prevState,
+        throw new Error('No DDO received. Please try again.')
-        '3': {
-          ...prevState['3'],
-          status: 'active'
-        }
-      }))
-
-      if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.')
 
       const res = await setNFTMetadataAndTokenURI(
-        _ddo,
+        ddo,
         accountId,
         web3,
         values.metadata.nft,
         newAbortController()
       )
+      if (!res?.transactionHash)
+        throw new Error(
+          'Metadata could not be written into the NFT. Please try again.'
+        )
 
       LoggerInstance.log('[publish] setMetadata result', res)
 
-      const txHash = res.transactionHash
-
       setFeedback((prevState) => ({
         ...prevState,
         '3': {
           ...prevState['3'],
           status: res ? 'success' : 'error',
-          txHash
+          txHash: res?.transactionHash
         }
       }))
 
-      setDid(_ddo.id)
+      return { did: ddo.id }
     } catch (error) {
       LoggerInstance.error('[publish] error', error.message)
       setFeedback((prevState) => ({
@@ -215,6 +233,44 @@ export default function PublishPage({
     }
   }
 
+  // --------------------------------------------------
+  // Orchestrate publishing
+  // --------------------------------------------------
+  async function handleSubmit(values: FormPublishData) {
+    // Syncing variables with state, enabling retry of failed steps
+    let _erc721Address = erc721Address
+    let _datatokenAddress = datatokenAddress
+    let _ddo = ddo
+    let _ddoEncrypted = ddoEncrypted
+    let _did = did
+
+    if (!_erc721Address || !_datatokenAddress) {
+      const { erc721Address, datatokenAddress } = await create(values)
+      _erc721Address = erc721Address
+      _datatokenAddress = datatokenAddress
+      setErc721Address(erc721Address)
+      setDatatokenAddress(datatokenAddress)
+    }
+
+    if (!_ddo || !_ddoEncrypted) {
+      const { ddo, ddoEncrypted } = await encrypt(
+        values,
+        _erc721Address,
+        _datatokenAddress
+      )
+      _ddo = ddo
+      _ddoEncrypted = ddoEncrypted
+      setDdo(ddo)
+      setDdoEncrypted(ddoEncrypted)
+    }
+
+    if (!_did) {
+      const { did } = await publish(values, _ddo, _ddoEncrypted)
+      _did = did
+      setDid(did)
+    }
+  }
+
   return isInPurgatory && purgatoryData ? null : (
     <Formik
       initialValues={initialValues}
@@ -224,22 +280,20 @@ export default function PublishPage({
         await handleSubmit(values)
       }}
     >
-      {({ values }) => {
+      {({ values }) => (
-        return (
+        <>
-          <>
+          <PageHeader
-            <PageHeader
+            title={<Title networkId={values.user.chainId} />}
-              title={<Title networkId={values.user.chainId} />}
+            description={content.description}
-              description={content.description}
+          />
-            />
+          <Form className={styles.form} ref={scrollToRef}>
-            <Form className={styles.form} ref={scrollToRef}>
+            <Navigation />
-              <Navigation />
+            <Steps feedback={feedback} />
-              <Steps feedback={feedback} />
+            <Actions scrollToRef={scrollToRef} did={did} />
-              <Actions scrollToRef={scrollToRef} did={did} />
+          </Form>
-            </Form>
+          {debug && <Debug />}
-            {debug && <Debug />}
+        </>
-          </>
+      )}
-        )
-      }}
     </Formik>
   )
 }