add v3 assets redirect (#1446)

* feat: add v3 assets redirect

* feat: add fallback return value to checkV3Asset

* fix: rename env variables for v3 related uris

app.config.js

@@ -9,6 +9,14 @@ 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],

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/@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
@@ -127,6 +127,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/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>