merge main into v4-c2d fix conflicts

.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/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

@@ -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-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'
@@ -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/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/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/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/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

@@ -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 { OrderPriceAndFees } from 'src/@types/Price'
-import {
+import { getAccessDetails } from '@utils/accessDetailsAndPricing'
-  getAccessDetailsForAssets,
-  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}

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/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/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/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/index.module.css

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