merge main into v4-c2d fix conflicts

2024-12-02 05:57:29 +01:00 · 2022-06-08 17:08:50 +03:00 · 2022-06-08 17:08:50 +03:00 · 0d3464848d
commit 0d3464848d
parent 7ef70100fb 3b87122043
31 changed files with 4517 additions and 4071 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -0,0 +1,8 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: monthly
+      time: '03:00'
+      timezone: Europe/Berlin
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/.github/workflows/deploy.yml
+++ b/.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:
--- a/app.config.js
+++ b/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',

--- a/content/footer.json
+++ b/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)."
+  }
 }
--- a/content/site.json
+++ b/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": "",
-    "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."
+    "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -25,20 +25,20 @@
    "@coingecko/cryptoformat": "^0.4.4",
    "@loadable/component": "^5.15.2",
    "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.44",
+    "@oceanprotocol/lib": "^1.0.0",
    "@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-storyshots": "^6.5.4",
-    "@storybook/builder-webpack5": "^6.5.4",
-    "@storybook/manager-webpack5": "^6.5.4",
-    "@storybook/react": "^6.5.4",
+    "@storybook/addon-essentials": "^6.5.7",
+    "@storybook/addon-storyshots": "^6.5.7",
+    "@storybook/builder-webpack5": "^6.5.7",
+    "@storybook/manager-webpack5": "^6.5.7",
+    "@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/loadable__component": "^5.13.1",
-    "@types/lodash.debounce": "^4.0.3",
-    "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/js-cookie": "^3.0.2",
+    "@types/loadable__component": "^5.13.4",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.omit": "^4.5.7",
+    "@types/node": "^17.0.41",
+    "@types/react": "^18.0.12",
+    "@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",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "apollo": "^2.33.9",
+    "@types/yup": "^0.29.14",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "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-environment-jsdom": "^28.1.0",
+    "jest": "^28.1.1",
+    "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",
--- a/src/@context/Asset.tsx
+++ b/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'
@ -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
      }
--- a/src/@context/MarketMetadata/_types.ts
+++ b/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
-    polygonPublish: string
-  }
-  announcement: {
-    main: string
-    polygon: string
+    ctd: string
  }
 }

--- a/src/@context/UserPreferences.tsx
+++ b/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 =
--- a/src/@utils/aquarius.ts
+++ b/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
--- a/src/components/@shared/PoolTransactions/Title.tsx
+++ b/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(
-        Math.abs(row.datatokenValue).toString(),
-        locale
-      )}${secondTokenSymbol}`
+      )}${firstTokenSymbol}`
      break
    }
    case 'JOIN':
--- a/src/components/@shared/PoolTransactions/index.tsx
+++ b/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
        })
--- a/src/components/@shared/atoms/Badge/index.tsx
+++ b/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
 }

--- a/src/components/App/index.tsx
+++ b/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 content from '../../../content/purgatory.json'
+import contentPurgatory 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 !== '' && (
-        <AnnouncementBanner text={siteContent?.warning.main} />
+      {siteContent?.announcement !== '' && (
+        <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"
        />
      )}
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
@ -22,3 +22,7 @@
  border-right: 0;
  padding: 0;
 }
+
+.warning {
+  margin-bottom: var(--spacer);
+}
--- a/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@ -10,14 +10,13 @@ import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset } from '@oceanprotocol/lib'
-import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
-import {
-  getAccessDetailsForAssets,
-  getAccessDetails
-} from '@utils/accessDetailsAndPricing'
+import { OrderPriceAndFees } from 'src/@types/Price'
+import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 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'

 export default function FormStartCompute({
  algorithms,
@ -72,6 +71,7 @@ export default function FormStartCompute({
  datasetOrderPriceAndFees?: OrderPriceAndFees
  algoOrderPriceAndFees?: OrderPriceAndFees
 }): ReactElement {
+  const { siteContent } = useMarketMetadata()
  const { isValid, values }: FormikContextType<{ algorithm: string }> =
    useFormikContext()
  const { asset, isAssetNetwork } = useAsset()
@ -163,6 +163,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}
--- a/src/components/Asset/AssetActions/Pool/Add/index.tsx
+++ b/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}
--- a/src/components/Asset/AssetActions/Pool/Sections/Update.module.css
+++ b/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-bottom: calc(var(--spacer) / 3);
+  padding-top: calc(var(--spacer) / 2);
+  padding-bottom: calc(var(--spacer) / 2);
 }

 .update:before {
--- a/src/components/Asset/AssetActions/Pool/Sections/index.module.css
+++ b/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;
+}
--- a/src/components/Asset/AssetActions/Pool/Sections/index.tsx
+++ b/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
-          symbol={poolInfo?.baseTokenSymbol}
-          balance={`${poolData?.baseTokenLiquidity}`}
-          size="mini"
-        />
-        <Token
-          symbol={poolInfo?.datatokenSymbol}
-          balance={`${poolData?.datatokenLiquidity}`}
-          size="mini"
-        />
+      </PoolSection>

+      <PoolSection className={styles.fees}>
        <Token
          symbol="% swap fee"
          balance={poolInfo?.liquidityProviderSwapFee}
--- a/src/components/Asset/index.tsx
+++ b/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>
--- a/src/components/Footer/MarketStats/Tooltip.tsx
+++ b/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}>
-        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>
+      <Markdown className={styles.note} text={content.stats.note} />
    </>
  )
 }
--- a/src/components/Header/Menu.module.css
+++ b/src/components/Header/Menu.module.css
@ -7,13 +7,24 @@
  flex-wrap: wrap;
 }

-.logo {
-  order: 1;
+.logo,
+.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);
+}
--- a/src/components/Header/Menu.tsx
+++ b/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}>
-            {siteContent?.siteTitle} <Badge label="v4" />
-          </h1>
+          <h1 className={styles.title}>{siteContent?.siteTitle}</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}>
--- a/src/components/Profile/History/PoolShares/_utils.ts
+++ b/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)
    })
--- a/src/components/Publish/Metadata/index.module.css
+++ b/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';
+}
--- a/src/components/Publish/Metadata/index.tsx
+++ b/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}
--- a/src/components/Publish/Services/index.tsx
+++ b/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)}
-          component={Input}
-          name="services[0].access"
-          options={accessTypeOptions}
-        />
+        <>
+          <Field
+            {...getFieldContent('access', content.services.fields)}
+            component={Input}
+            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)}
--- a/src/components/Publish/index.module.css
+++ b/src/components/Publish/index.module.css
@ -16,3 +16,8 @@
    padding-right: calc(var(--spacer) * 4);
  }
 }
+
+.fieldWarning {
+  margin-top: -2rem;
+  margin-bottom: var(--spacer);
+}