package updates & technical debt cleanup (#1771)

* package updates

* bump Next.js

* update for Next.js v13 new `Link` behavior

* see https://nextjs.org/docs/upgrading#link-component

* test tweaks, simplify getNetworkDisplayName()

* modify codeclimate excludes

* test tweaks and cleanup

* more cleanup

* switch to Node.js v18

* back to Node.js v16

* temporarily run CI against Node.js v16 & v18

* update codeowners

* fixtures fixes for asset price

* switch to Node.js v18

* package updates

* remark updates, typescript and test fixes

* fix

* test run fixes

* yet another lockfileVersion update

* package updates

* test run fixes

.codeclimate.yml

@@ -42,7 +42,7 @@ exclude_patterns:
   - '**/*.d.ts'
   - '**/@types/'
   - '**/_types.*'
-  - '**/*.stories.tsx'
+  - '**/*.stories.*'
-  - '**/*.test.tsx'
+  - '**/*.test.*'
   - '.storybook/'
   - '.jest/'

.github/CODEOWNERS

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

.github/workflows/ci.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - v4
       - v3
     tags:
       - '**'
@@ -20,7 +19,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: ['16']
+        node: ['18']
 
     steps:
       - uses: actions/checkout@v3
@@ -47,7 +46,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: ['16']
+        node: ['18']
 
     steps:
       - uses: actions/checkout@v3
@@ -82,7 +81,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - name: Cache node_modules
         uses: actions/cache@v3
         env:
@@ -110,7 +109,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
-        node: ['16']
+        node: ['18']
 
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -8,6 +8,7 @@ coverage
 .next
 .artifacts
 .vercel
+.swc
 repo-metadata.json
 networks-metadata.json
 src/@types/subgraph

.jest/__mocks__/tar.ts

@@ -0,0 +1,3 @@
+// mocked, as this module makes Jest go all
+// "Uncaught SyntaxError: Octal escape sequences are not allowed in strict mode"
+export default jest.fn().mockImplementation(() => 'hello')

.jest/jest.config.js

@@ -9,13 +9,13 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   rootDir: '../',
   // Add more setup options before each test is run
-  setupFilesAfterEnv: ['<rootDir>/.jest/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/.jest/jest.setup.tsx'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/src'],
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: 'jsdom',
   moduleNameMapper: {
     '^.+\\.(svg)$': '<rootDir>/.jest/__mocks__/svgrMock.tsx',
-    // '^@/components/(.*)$': '<rootDir>/components/$1',
+    '@components/(.*)$': '<rootDir>/src/components/$1',
     '@shared(.*)$': '<rootDir>/src/components/@shared/$1',
     '@hooks/(.*)$': '<rootDir>/src/@hooks/$1',
     '@context/(.*)$': '<rootDir>/src/@context/$1',
@@ -29,8 +29,25 @@ const customJestConfig = {
     '!src/**/*.{stories,test}.{ts,tsx}',
     '!src/@types/**/*.{ts,tsx}'
   ],
-  testPathIgnorePatterns: ['node_modules', '\\.cache', '.next', 'coverage']
+  // Add ignores so ESM packages are not transformed by Jest
+  // note: this does not work with Next.js, hence workaround further down
+  // see: https://github.com/vercel/next.js/issues/35634#issuecomment-1115250297
+  // transformIgnorePatterns: ['node_modules/(?!(uuid|remark)/)'],
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/.next/',
+    '<rootDir>/coverage'
+  ]
 }
 
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+// https://github.com/vercel/next.js/issues/35634#issuecomment-1115250297
-module.exports = createJestConfig(customJestConfig)
+async function jestConfig() {
+  const nextJestConfig = await createJestConfig(customJestConfig)()
+
+  // Add ignores for specific ESM packages so they are transformed by Jest
+  // /node_modules/ is the first pattern
+  nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!uuid|remark)/'
+  return nextJestConfig
+}
+
+module.exports = jestConfig

.jest/jest.setup.js

@@ -1,3 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import './__mocks__/matchMedia'
-import './__mocks__/hooksMocks'

.jest/jest.setup.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect'
+import { jest } from '@jest/globals'
+import './__mocks__/matchMedia'
+import './__mocks__/hooksMocks'
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn().mockImplementation(() => ({
+    route: '/',
+    pathname: '/'
+  }))
+}))
+
+// jest.mock('next/head', () => {
+//   return {
+//     __esModule: true,
+//     default: ({ children }: { children: Array<React.ReactElement> }) => {
+//       return <>{children}</>
+//     }
+//   }
+// })

.nvmrc

@@ -1 +1 @@
-16
+18

README.md

@@ -253,7 +253,7 @@ export default function NetworkName(): ReactElement {
   const { networkId, isTestnet } = useWeb3()
   const { networksList } = useNetworkMetadata()
   const networkData = getNetworkDataById(networksList, networkId)
-  const networkName = getNetworkDisplayName(networkData, networkId)
+  const networkName = getNetworkDisplayName(networkData)
 
   return (
     <>

package.json

@@ -32,12 +32,12 @@
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^1.0.0",
     "@walletconnect/web3-provider": "^1.8.0",
-    "axios": "^1.1.3",
+    "axios": "^1.2.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
-    "decimal.js": "^10.3.1",
+    "decimal.js": "^10.4.2",
     "dom-confetti": "^0.2.2",
-    "dotenv": "^16.0.1",
+    "dotenv": "^16.0.3",
     "filesize": "^10.0.5",
     "formik": "^2.2.9",
     "gray-matter": "^4.0.3",
@@ -46,28 +46,28 @@
     "js-cookie": "^3.0.1",
     "match-sorter": "^6.3.1",
     "myetherwallet-blockies": "^0.1.1",
-    "next": "12.3.1",
+    "next": "13.0.5",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
-    "react-data-table-component": "^7.5.2",
+    "react-data-table-component": "^7.5.3",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-dotdotdot": "^1.3.1",
-    "react-modal": "^3.15.1",
+    "react-modal": "^3.16.1",
-    "react-paginate": "^8.1.3",
+    "react-paginate": "^8.1.4",
-    "react-select": "^5.4.0",
+    "react-select": "^5.6.1",
-    "react-spring": "^9.5.2",
+    "react-spring": "^9.5.5",
     "react-tabs": "^5.1.0",
-    "react-toastify": "^9.0.4",
+    "react-toastify": "^9.1.1",
-    "remark": "^13.0.0",
+    "remark": "^14.0.2",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^3.0.1",
-    "remark-html": "^13.0.1",
+    "remark-html": "^15.0.1",
     "remove-markdown": "^0.5.0",
     "slugify": "^1.6.5",
     "swr": "^1.3.0",
     "urql": "^3.0.3",
-    "web3": "^1.8.0",
+    "web3": "^1.8.1",
-    "web3modal": "^1.9.9",
+    "web3modal": "^1.9.10",
     "yup": "^0.32.11"
   },
   "devDependencies": {
@@ -78,37 +78,38 @@
     "@svgr/webpack": "^6.5.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.3",
     "@types/js-cookie": "^3.0.2",
     "@types/loadable__component": "^5.13.4",
     "@types/node": "^18.8.5",
-    "@types/react": "^18.0.21",
+    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.0.9",
     "@types/react-modal": "^3.13.1",
     "@types/react-paginate": "^7.1.1",
     "@types/remove-markdown": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "apollo": "^2.34.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.25.0",
+    "eslint": "^8.28.0",
     "eslint-config-oceanprotocol": "^2.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest-dom": "^4.0.2",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.7.2",
+    "eslint-plugin-testing-library": "^5.9.1",
     "https-browserify": "^1.0.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
-    "jest": "^29.1.2",
+    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "pretty-quick": "^3.1.3",
     "process": "^0.11.10",
-    "serve": "^14.0.1",
+    "serve": "^14.1.2",
     "stream-http": "^3.2.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   },
   "overrides": {
     "graphql": "15.8.0"
@@ -118,7 +119,7 @@
     "url": "https://github.com/oceanprotocol/market"
   },
   "engines": {
-    "node": "16"
+    "node": "18"
   },
   "browserslist": [
     ">0.2%",

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 { getAsset } from '@utils/aquarius'
 import { useWeb3 } from './Web3'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getOceanConfig, getDevelopmentConfig } from '@utils/ocean'
@@ -66,7 +66,7 @@ function AssetProvider({
 
       LoggerInstance.log('[asset] Fetching asset...')
       setLoading(true)
-      const asset = await retrieveAsset(did, token)
+      const asset = await getAsset(did, token)
 
       if (!asset) {
         setError(

src/@context/MarketMetadata/index.tsx

@@ -7,7 +7,7 @@ import React, {
   useEffect,
   useState
 } from 'react'
-import { OpcQuery } from 'src/@types/subgraph/OpcQuery'
+import { OpcQuery } from '../../../src/@types/subgraph/OpcQuery'
 import { OperationResult } from 'urql'
 import { opcQuery } from './_queries'
 import { MarketMetadataProviderValue, OpcFee } from './_types'

src/@context/Web3.tsx

@@ -307,7 +307,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     )
 
     // Construct network display name
-    const networkDisplayName = getNetworkDisplayName(networkData, networkId)
+    const networkDisplayName = getNetworkDisplayName(networkData)
     setNetworkDisplayName(networkDisplayName)
 
     setIsTestnet(getNetworkType(networkData) !== NetworkType.Mainnet)

src/@hooks/useNetworkMetadata/utils.test.ts

@@ -0,0 +1,43 @@
+import { getNetworkType, getNetworkDisplayName } from './utils'
+
+describe('useNetworkMetadata/utils', () => {
+  test('getNetworkType returns mainnet', () => {
+    const type = getNetworkType({
+      name: 'Eth',
+      title: 'Eth'
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
+
+    expect(type).toBe('mainnet')
+  })
+
+  test('getNetworkType returns testnet if "Test" is in name', () => {
+    const type = getNetworkType({
+      name: 'Testnet',
+      title: 'Testnet'
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
+
+    expect(type).toBe('testnet')
+  })
+
+  test('getNetworkDisplayName returns correct values', () => {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    const type1 = getNetworkDisplayName({
+      chainId: 1,
+      chain: 'ETH',
+      name: 'Ethereum Mainnet'
+    } as any)
+    expect(type1).toBe('ETH')
+
+    const type2 = getNetworkDisplayName({ chainId: 80001 } as any)
+    expect(type2).toBe('Mumbai')
+
+    const type3 = getNetworkDisplayName({ chainId: 8996 } as any)
+    expect(type3).toBe('Development')
+
+    const type4 = getNetworkDisplayName({ chainId: 2021000 } as any)
+    expect(type4).toBe('GAIA-X')
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+  })
+})

src/@hooks/useNetworkMetadata/utils.ts

@@ -11,9 +11,8 @@ export function getNetworkType(network: EthereumListsChain): string {
   // We hack in mainnet detection for moonriver.
   if (
     network &&
-    !network.name.includes('Testnet') &&
+    !network.name?.includes('Testnet') &&
-    !network.title?.includes('Testnet') &&
+    !network.title?.includes('Testnet')
-    network.name !== 'Moonbase Alpha'
   ) {
     return NetworkType.Mainnet
   } else {
@@ -21,19 +20,13 @@ export function getNetworkType(network: EthereumListsChain): string {
   }
 }
 
-export function getNetworkDisplayName(
+export function getNetworkDisplayName(data: EthereumListsChain): string {
-  data: EthereumListsChain,
-  networkId: number
-): string {
   let displayName
 
-  switch (networkId) {
+  switch (data.chainId) {
     case 137:
       displayName = 'Polygon'
       break
-    case 1287:
-      displayName = 'Moonbase'
-      break
     case 1285:
       displayName = 'Moonriver'
       break
@@ -43,9 +36,6 @@ export function getNetworkDisplayName(
     case 8996:
       displayName = 'Development'
       break
-    case 3:
-      displayName = 'Ropsten'
-      break
     case 5:
       displayName = 'Görli'
       break
@@ -54,7 +44,9 @@ export function getNetworkDisplayName(
       break
     default:
       displayName = data
-        ? `${data.chain} ${getNetworkType(data) === 'mainnet' ? '' : data.name}`
+        ? `${data.chain}${
+            getNetworkType(data) === 'mainnet' ? '' : ` ${data.name}`
+          }`
         : 'Unknown'
       break
   }

src/@utils/aquarius/index.test.ts

@@ -0,0 +1,70 @@
+import {
+  SortDirectionOptions,
+  SortTermOptions
+} from '../../@types/aquarius/SearchQuery'
+import { escapeEsReservedCharacters, getFilterTerm, generateBaseQuery } from '.'
+
+const defaultBaseQueryReturn = {
+  from: 0,
+  query: {
+    bool: {
+      filter: [
+        { terms: { chainId: [1, 3] } },
+        { term: { _index: 'aquarius' } },
+        { term: { 'purgatory.state': false } },
+        { bool: { must_not: [{ term: { 'nft.state': 5 } }] } }
+      ]
+    }
+  },
+  size: 1000
+}
+
+describe('@utils/aquarius', () => {
+  test('escapeEsReservedCharacters', () => {
+    expect(escapeEsReservedCharacters('<')).toBe('\\<')
+  })
+
+  test('getFilterTerm with string value', () => {
+    expect(getFilterTerm('hello', 'world')).toStrictEqual({
+      term: { hello: 'world' }
+    })
+  })
+
+  test('getFilterTerm with array value', () => {
+    expect(getFilterTerm('hello', ['world', 'domination'])).toStrictEqual({
+      terms: { hello: ['world', 'domination'] }
+    })
+  })
+
+  test('generateBaseQuery', () => {
+    expect(generateBaseQuery({ chainIds: [1, 3] })).toStrictEqual(
+      defaultBaseQueryReturn
+    )
+  })
+
+  test('generateBaseQuery aggs are passed through', () => {
+    expect(
+      generateBaseQuery({ chainIds: [1, 3], aggs: 'hello world' })
+    ).toStrictEqual({
+      ...defaultBaseQueryReturn,
+      aggs: 'hello world'
+    })
+  })
+
+  test('generateBaseQuery sortOptions are passed through', () => {
+    expect(
+      generateBaseQuery({
+        chainIds: [1, 3],
+        sortOptions: {
+          sortBy: SortTermOptions.Created,
+          sortDirection: SortDirectionOptions.Ascending
+        }
+      })
+    ).toStrictEqual({
+      ...defaultBaseQueryReturn,
+      sort: {
+        'nft.created': 'asc'
+      }
+    })
+  })
+})

src/@utils/aquarius/index.ts

@@ -1,13 +1,13 @@
 import { Asset, LoggerInstance } from '@oceanprotocol/lib'
 import { AssetSelectionAsset } from '@shared/FormInput/InputElement/AssetSelection'
 import axios, { CancelToken, AxiosResponse } from 'axios'
-import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
+import { OrdersData_orders as OrdersData } from '../../@types/subgraph/OrdersData'
-import { metadataCacheUri } from '../../app.config'
+import { metadataCacheUri } from '../../../app.config'
 import {
   SortDirectionOptions,
   SortTermOptions
-} from '../@types/aquarius/SearchQuery'
+} from '../../@types/aquarius/SearchQuery'
-import { transformAssetToAssetSelection } from './assetConvertor'
+import { transformAssetToAssetSelection } from '../assetConvertor'
 
 export interface UserSales {
   id: string
@@ -55,13 +55,13 @@ export function generateBaseQuery(
           ...(baseQueryParams.filters || []),
           baseQueryParams.chainIds
             ? getFilterTerm('chainId', baseQueryParams.chainIds)
-            : '',
+            : [],
           getFilterTerm('_index', 'aquarius'),
           ...(baseQueryParams.ignorePurgatory
-            ? ''
+            ? []
             : [getFilterTerm('purgatory.state', false)]),
           ...(baseQueryParams.ignoreState
-            ? ''
+            ? []
             : [
                 {
                   bool: {
@@ -143,7 +143,7 @@ export async function queryMetadata(
   }
 }
 
-export async function retrieveAsset(
+export async function getAsset(
   did: string,
   cancelToken: CancelToken
 ): Promise<Asset> {
@@ -186,73 +186,7 @@ export async function getAssetsNames(
   }
 }
 
-export async function getAssetsFromDidList(
+export async function getAssetsFromDids(
-  didList: string[],
-  chainIds: number[],
-  cancelToken: CancelToken
-): Promise<PagedAssets> {
-  try {
-    if (!didList.length) return
-
-    const baseParams = {
-      chainIds,
-      filters: [getFilterTerm('_id', didList)],
-      ignorePurgatory: true
-    } as BaseQueryParams
-    const query = generateBaseQuery(baseParams)
-
-    const queryResult = await queryMetadata(query, cancelToken)
-    return queryResult
-  } catch (error) {
-    LoggerInstance.error(error.message)
-  }
-}
-
-export async function getAssetsFromDtList(
-  dtList: string[],
-  chainIds: number[],
-  cancelToken: CancelToken
-): Promise<Asset[]> {
-  try {
-    if (!dtList.length) return
-
-    const baseParams = {
-      chainIds,
-      filters: [getFilterTerm('services.datatokenAddress', dtList)],
-      ignorePurgatory: true
-    } as BaseQueryParams
-    const query = generateBaseQuery(baseParams)
-
-    const queryResult = await queryMetadata(query, cancelToken)
-    return queryResult?.results
-  } catch (error) {
-    LoggerInstance.error(error.message)
-  }
-}
-
-export async function getAssetsFromNftList(
-  nftList: string[],
-  chainIds: number[],
-  cancelToken: CancelToken
-): Promise<Asset[]> {
-  try {
-    if (!(nftList.length > 0)) return
-
-    const baseParams = {
-      chainIds,
-      filters: [getFilterTerm('nftAddress', nftList)],
-      ignorePurgatory: true
-    } as BaseQueryParams
-    const query = generateBaseQuery(baseParams)
-
-    const queryResult = await queryMetadata(query, cancelToken)
-    return queryResult?.results
-  } catch (error) {
-    LoggerInstance.error(error.message)
-  }
-}
-
-export async function retrieveDDOListByDIDs(
   didList: string[],
   chainIds: number[],
   cancelToken: CancelToken
@@ -368,7 +302,7 @@ export async function getPublishedAssets(
   }
 }
 
-export async function getTopPublishers(
+async function getTopPublishers(
   chainIds: number[],
   cancelToken: CancelToken,
   page?: number,

src/@utils/compute.ts

@@ -17,7 +17,7 @@ import {
   queryMetadata,
   getFilterTerm,
   generateBaseQuery,
-  retrieveDDOListByDIDs
+  getAssetsFromDids
 } from './aquarius'
 import { fetchDataForMultipleChains } from './subgraph'
 import { getServiceById, getServiceByName } from './ddo'
@@ -338,7 +338,7 @@ export async function createTrustedAlgorithmList(
   if (!selectedAlgorithms || selectedAlgorithms.length === 0)
     return trustedAlgorithms
 
-  const selectedAssets = await retrieveDDOListByDIDs(
+  const selectedAssets = await getAssetsFromDids(
     selectedAlgorithms,
     [assetChainId],
     cancelToken
@@ -393,31 +393,3 @@ export async function transformComputeFormToServiceComputeOptions(
 
   return privacy
 }
-
-export async function checkComputeResourcesValidity(
-  asset: Asset,
-  accountId: string,
-  computeEnvMaxJobDuration: number,
-  datasetTimeout?: number,
-  algorithmTimeout?: number,
-  cancelToken?: CancelToken
-): Promise<boolean> {
-  const jobs = await getComputeJobs(
-    [asset?.chainId],
-    accountId,
-    asset,
-    cancelToken
-  )
-  if (jobs.computeJobs.length <= 0) return false
-  const inputValues = []
-  computeEnvMaxJobDuration && inputValues.push(computeEnvMaxJobDuration * 60)
-  datasetTimeout && inputValues.push(datasetTimeout)
-  algorithmTimeout && inputValues.push(algorithmTimeout)
-  const minValue = Math.min(...inputValues)
-  const jobStartDate = new Date(
-    parseInt(jobs.computeJobs[0].dateCreated) * 1000
-  )
-  jobStartDate.setMinutes(jobStartDate.getMinutes() + Math.floor(minValue / 60))
-  const currentTime = new Date().getTime() / 1000
-  return Math.floor(jobStartDate.getTime() / 1000) > currentTime
-}

src/@utils/ens/index.test.ts

@@ -1,5 +1,7 @@
-import { getEnsName, getEnsAddress, getEnsProfile } from './ens'
+import { getEnsName, getEnsAddress, getEnsProfile } from '.'
 
+// TODO: this directly hits the ENS registry, which is not ideal
+// so we need to rewrite this to mock responses instead for more reliable test runs.
 describe('@utils/ens', () => {
   jest.setTimeout(10000)
   jest.retryTimes(2)

src/@utils/ens/index.ts

@@ -1,4 +1,4 @@
-import { fetchData } from './fetch'
+import { fetchData } from '../fetch'
 
 const apiUrl = 'https://ens-proxy.oceanprotocol.com/api'
 

src/@utils/index.ts

@@ -3,12 +3,6 @@ import { Asset } from '@oceanprotocol/lib'
 // Boolean value that will be true if we are inside a browser, false otherwise
 export const isBrowser = typeof window !== 'undefined'
 
-export function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
-
 export function removeItemFromArray<T>(arr: Array<T>, value: T): Array<T> {
   const index = arr.indexOf(value)
   if (index > -1) {

src/@utils/markdown.ts

@@ -1,4 +1,4 @@
-import remark from 'remark'
+import { remark } from 'remark'
 import remarkHtml from 'remark-html'
 import remarkGfm from 'remark-gfm'
 
@@ -6,7 +6,7 @@ export function markdownToHtml(markdown: string): string {
   const result = remark()
     .use(remarkGfm)
     .use(remarkHtml) // serializes through remark-rehype and rehype-stringify
-    .processSync(markdown).contents
+    .processSync(markdown)
 
   return result.toString()
 }

src/@utils/url/index.test.ts

@@ -1,4 +1,4 @@
-import { sanitizeUrl } from './url'
+import { sanitizeUrl } from '.'
 
 describe('@utils/url', () => {
   test('sanitizeUrl', () => {

src/@utils/veAllocation.ts

@@ -1,7 +1,7 @@
-import { AllLockedQuery } from 'src/@types/subgraph/AllLockedQuery'
+import { AllLockedQuery } from '../../src/@types/subgraph/AllLockedQuery'
-import { OwnAllocationsQuery } from 'src/@types/subgraph/OwnAllocationsQuery'
+import { OwnAllocationsQuery } from '../../src/@types/subgraph/OwnAllocationsQuery'
-import { NftOwnAllocationQuery } from 'src/@types/subgraph/NftOwnAllocationQuery'
+import { NftOwnAllocationQuery } from '../../src/@types/subgraph/NftOwnAllocationQuery'
-import { OceanLockedQuery } from 'src/@types/subgraph/OceanLockedQuery'
+import { OceanLockedQuery } from '../../src/@types/subgraph/OceanLockedQuery'
 import { gql, OperationResult } from 'urql'
 import { fetchData, getQueryContext } from './subgraph'
 import axios from 'axios'
@@ -11,9 +11,6 @@ import {
   getNetworkType,
   NetworkType
 } from '@hooks/useNetworkMetadata'
-import { getAssetsFromNftList } from './aquarius'
-import { chainIdsSupported } from '../../app.config'
-import { Asset } from '@oceanprotocol/lib'
 
 const AllLocked = gql`
   query AllLockedQuery {
@@ -80,6 +77,7 @@ export function getVeChainNetworkIds(assetNetworkIds: number[]): number[] {
   })
   return veNetworkIds
 }
+
 export async function getNftOwnAllocation(
   userAddress: string,
   nftAddress: string,
@@ -177,17 +175,3 @@ export async function getOwnAllocations(
 
   return allocations
 }
-
-export async function getOwnAssetsWithAllocation(
-  networkIds: number[],
-  userAddress: string
-): Promise<Asset[]> {
-  const allocations = await getOwnAllocations(networkIds, userAddress)
-  const assets = await getAssetsFromNftList(
-    allocations.map((x) => x.nftAddress),
-    chainIdsSupported,
-    null
-  )
-
-  return assets
-}

src/@utils/web3.ts

@@ -33,7 +33,7 @@ export async function addCustomNetwork(
 
   const newNetworkData = {
     chainId: `0x${network.chainId.toString(16)}`,
-    chainName: getNetworkDisplayName(network, network.chainId),
+    chainName: getNetworkDisplayName(network),
     nativeCurrency: network.nativeCurrency,
     rpcUrls: network.rpc,
     blockExplorerUrls

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

@@ -41,9 +41,7 @@ export default function AssetListTitle({
 
   return (
     <h3 className={styles.title}>
-      <Link href={`/asset/${did || asset?.id}`}>
+      <Link href={`/asset/${did || asset?.id}`}>{assetTitle}</Link>
-        <a>{assetTitle}</a>
-      </Link>
     </h3>
   )
 }

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

@@ -35,83 +35,77 @@ export default function AssetTeaser({
 
   return (
     <article className={`${styles.teaser} ${styles[type]}`}>
-      <Link href={`/asset/${asset.id}`}>
+      <Link href={`/asset/${asset.id}`} className={styles.link}>
-        <a className={styles.link}>
+        <aside className={styles.detailLine}>
-          <aside className={styles.detailLine}>
+          <AssetType
-            <AssetType
+            className={styles.typeLabel}
-              className={styles.typeLabel}
+            type={type}
-              type={type}
+            accessType={accessType}
-              accessType={accessType}
+          />
-            />
+          <span className={styles.typeLabel}>
-            <span className={styles.typeLabel}>
+            {datatokens[0]?.symbol.substring(0, 9)}
-              {datatokens[0]?.symbol.substring(0, 9)}
+          </span>
-            </span>
+          <NetworkName networkId={asset.chainId} className={styles.typeLabel} />
-            <NetworkName
+        </aside>
-              networkId={asset.chainId}
+        <header className={styles.header}>
-              className={styles.typeLabel}
+          <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
-            />
+            {name.slice(0, 200)}
-          </aside>
+          </Dotdotdot>
-          <header className={styles.header}>
+          {!noPublisher && <Publisher account={owner} minimal />}
-            <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
+        </header>
-              {name.slice(0, 200)}
+        {!noDescription && (
+          <div className={styles.content}>
+            <Dotdotdot tagName="p" clamp={3}>
+              {removeMarkdown(description?.substring(0, 300) || '')}
             </Dotdotdot>
-            {!noPublisher && <Publisher account={owner} minimal />}
+          </div>
-          </header>
+        )}
-          {!noDescription && (
+        {!noPrice && (
-            <div className={styles.content}>
+          <div className={styles.price}>
-              <Dotdotdot tagName="p" clamp={3}>
+            {isUnsupportedPricing || !asset.services.length ? (
-                {removeMarkdown(description?.substring(0, 300) || '')}
+              <strong>No pricing schema available</strong>
-              </Dotdotdot>
+            ) : (
-            </div>
+              <Price accessDetails={asset.accessDetails} size="small" />
-          )}
+            )}
-          {!noPrice && (
+          </div>
-            <div className={styles.price}>
+        )}
-              {isUnsupportedPricing || !asset.services.length ? (
+        <footer className={styles.footer}>
-                <strong>No pricing schema available</strong>
+          {allocated && allocated > 0 ? (
+            <span className={styles.typeLabel}>
+              {allocated < 0 ? (
+                ''
               ) : (
-                <Price accessDetails={asset.accessDetails} size="small" />
+                <>
+                  <strong>{formatNumber(allocated, locale, '0')}</strong>{' '}
+                  veOCEAN
+                </>
               )}
-            </div>
+            </span>
-          )}
+          ) : null}
-
+          {orders && orders > 0 ? (
-          <footer className={styles.footer}>
+            <span className={styles.typeLabel}>
-            {allocated && allocated > 0 ? (
+              {orders < 0 ? (
-              <span className={styles.typeLabel}>
+                'N/A'
-                {allocated < 0 ? (
+              ) : (
-                  ''
+                <>
-                ) : (
+                  <strong>{orders}</strong> {orders === 1 ? 'sale' : 'sales'}
-                  <>
+                </>
-                    <strong>{formatNumber(allocated, locale, '0')}</strong>{' '}
+              )}
-                    veOCEAN
+            </span>
-                  </>
+          ) : null}
-                )}
+          {asset.views && asset.views > 0 ? (
-              </span>
+            <span className={styles.typeLabel}>
-            ) : null}
+              {asset.views < 0 ? (
-            {orders && orders > 0 ? (
+                'N/A'
-              <span className={styles.typeLabel}>
+              ) : (
-                {orders < 0 ? (
+                <>
-                  'N/A'
+                  <strong>{asset.views}</strong>{' '}
-                ) : (
+                  {asset.views === 1 ? 'view' : 'views'}
-                  <>
+                </>
-                    <strong>{orders}</strong> {orders === 1 ? 'sale' : 'sales'}
+              )}
-                  </>
+            </span>
-                )}
+          ) : null}
-              </span>
+        </footer>
-            ) : null}
-            {asset.views && asset.views > 0 ? (
-              <span className={styles.typeLabel}>
-                {asset.views < 0 ? (
-                  'N/A'
-                ) : (
-                  <>
-                    <strong>{asset.views}</strong>{' '}
-                    {asset.views === 1 ? 'view' : 'views'}
-                  </>
-                )}
-              </span>
-            ) : null}
-          </footer>
-        </a>
       </Link>
     </article>
   )

src/components/@shared/FormInput/InputElement/ContainerInput/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from 'react'
 import { useField, useFormikContext } from 'formik'
 import UrlInput from '../URLInput'
 import { InputProps } from '@shared/FormInput'
-import { FormPublishData } from 'src/components/Publish/_types'
+import { FormPublishData } from '@components/Publish/_types'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import ImageInfo from './Info'
 import { getContainerChecksum } from '@utils/docker'

src/components/@shared/FormInput/InputElement/Provider/index.tsx

@@ -6,7 +6,7 @@ import FileInfo from '../FilesInput/Info'
 import styles from './index.module.css'
 import Button from '@shared/atoms/Button'
 import { LoggerInstance, ProviderInstance } from '@oceanprotocol/lib'
-import { FormPublishData } from 'src/components/Publish/_types'
+import { FormPublishData } from '@components/Publish/_types'
 import { getOceanConfig } from '@utils/ocean'
 import { useWeb3 } from '@context/Web3'
 import axios from 'axios'

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

@@ -17,7 +17,7 @@ export default function NetworkName({
 }): ReactElement {
   const { networksList } = useNetworkMetadata()
   const networkData = getNetworkDataById(networksList, networkId)
-  const networkName = getNetworkDisplayName(networkData, networkId)
+  const networkName = getNetworkDisplayName(networkData)
 
   return (
     <span

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

@@ -41,8 +41,8 @@ export default function Publisher({
         name
       ) : (
         <>
-          <Link href={`/profile/${account}`}>
+          <Link href={`/profile/${account}`} title="Show profile page.">
-            <a title="Show profile page.">{name}</a>
+            {name}
           </Link>
         </>
       )}

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

@@ -18,10 +18,10 @@ export default function WalletNetworkSwitcher(): ReactElement {
   const walletNetworkData = getNetworkDataById(networksList, networkId)
 
   const ddoNetworkName = (
-    <strong>{getNetworkDisplayName(ddoNetworkData, asset.chainId)}</strong>
+    <strong>{getNetworkDisplayName(ddoNetworkData)}</strong>
   )
   const walletNetworkName = (
-    <strong>{getNetworkDisplayName(walletNetworkData, networkId)}</strong>
+    <strong>{getNetworkDisplayName(walletNetworkData)}</strong>
   )
 
   async function switchWalletNetwork() {

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

@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useWeb3 } from '@context/Web3'
 import Status from '@shared/atoms/Status'
 import styles from './index.module.css'
 import WalletNetworkSwitcher from '../WalletNetworkSwitcher'

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

@@ -41,10 +41,8 @@ export default function Button({
   })
 
   return to ? (
-    <Link href={to}>
+    <Link href={to} className={styleClasses} {...props}>
-      <a className={styleClasses} {...props}>
+      {children}
-        {children}
-      </a>
     </Link>
   ) : href ? (
     <a href={href} className={styleClasses} {...props}>

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

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

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

@@ -24,24 +24,26 @@ export default function AssetComputeSelection({
           <Empty />
         ) : (
           assets.map((asset: AssetSelectionAsset) => (
-            <Link href={`/asset/${asset.did}`} key={asset.did}>
+            <Link
-              <a className={styles.row}>
+              href={`/asset/${asset.did}`}
-                <div className={styles.info}>
+              key={asset.did}
-                  <h3 className={styles.title}>
+              className={styles.row}
-                    <Dotdotdot clamp={1} tagName="span">
+            >
-                      {asset.name}
+              <div className={styles.info}>
-                    </Dotdotdot>
+                <h3 className={styles.title}>
-                  </h3>
+                  <Dotdotdot clamp={1} tagName="span">
-                  <Dotdotdot clamp={1} tagName="code" className={styles.did}>
+                    {asset.name}
-                    {asset.symbol} | {asset.did}
                   </Dotdotdot>
-                </div>
+                </h3>
-                <PriceUnit
+                <Dotdotdot clamp={1} tagName="code" className={styles.did}>
-                  price={Number(asset.price)}
+                  {asset.symbol} | {asset.did}
-                  size="small"
+                </Dotdotdot>
-                  className={styles.price}
+              </div>
-                />
+              <PriceUnit
-              </a>
+                price={Number(asset.price)}
+                size="small"
+                className={styles.price}
+              />
             </Link>
           ))
         )}

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

@@ -10,7 +10,7 @@ export default function ComputeHistory({
 }: {
   title: string
   children: ReactNode
-  refetchJobs?: any
+  refetchJobs?: React.Dispatch<React.SetStateAction<boolean>>
 }): ReactElement {
   const [open, setOpen] = useState(false)
 

src/components/Asset/AssetActions/index.tsx

@@ -13,7 +13,7 @@ import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'
 import styles from './index.module.css'
 import { useFormikContext } from 'formik'
-import { FormPublishData } from 'src/components/Publish/_types'
+import { FormPublishData } from '@components/Publish/_types'
 import { getTokenBalanceFromSymbol } from '@utils/web3'
 import AssetStats from './AssetStats'
 

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

@@ -3,7 +3,7 @@ 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 { FormPublishData } from '@components/Publish/_types'
 import Logo from '@shared/atoms/Logo'
 import NftTooltip from './NftTooltip'
 import styles from './index.module.css'

src/components/Asset/Edit/FormActions.test.tsx

@@ -5,7 +5,7 @@ import FormActions from './FormActions'
 
 jest.mock('formik')
 
-describe('src/components/Asset/Edit/FormActions.tsx', () => {
+describe('@components/Asset/Edit/FormActions.tsx', () => {
   it('renders fixed price', () => {
     const isValid = true
     ;(useFormikContext as jest.Mock).mockReturnValue([isValid])

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -3,7 +3,7 @@ import { Field, Form, useFormikContext } from 'formik'
 import Input from '@shared/FormInput'
 import FormActions from './FormActions'
 import { useAsset } from '@context/Asset'
-import { FormPublishData } from 'src/components/Publish/_types'
+import { FormPublishData } from '@components/Publish/_types'
 import { getFileInfo } from '@utils/provider'
 import { getFieldContent } from '@utils/form'
 

src/components/Footer/Links.tsx

@@ -24,17 +24,11 @@ export default function Links() {
         </Fragment>
       ))}
 
-      <Link href="/imprint">
+      <Link href="/imprint">Imprint</Link>
-        <a>Imprint</a>
-      </Link>
       {' — '}
-      <Link href="/terms">
+      <Link href="/terms">Terms</Link>
-        <a>Terms</a>
-      </Link>
       {' — '}
-      <Link href={privacyPolicySlug}>
+      <Link href={privacyPolicySlug}>Privacy</Link>
-        <a>Privacy</a>
-      </Link>
       {appConfig?.privacyPreferenceCenter === 'true' && (
         <>
           {' — '}

src/components/Footer/MarketStats/index.tsx

@@ -6,7 +6,7 @@ import useNetworkMetadata, {
 } from '@hooks/useNetworkMetadata'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import styles from './index.module.css'
-import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from 'src/@types/subgraph/FooterStatsValues'
+import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from '../../../../src/@types/subgraph/FooterStatsValues'
 import MarketStatsTotal from './Total'
 import { queryGlobalStatistics } from './_queries'
 import { StatsTotal } from './_types'

src/components/Header/Menu.tsx

@@ -24,8 +24,8 @@ function MenuLink({ item }: { item: MenuItem }) {
       : styles.link
 
   return (
-    <Link key={item.name} href={item.link}>
+    <Link key={item.name} href={item.link} className={classes}>
-      <a className={classes}>{item.name}</a>
+      {item.name}
     </Link>
   )
 }
@@ -35,11 +35,9 @@ export default function Menu(): ReactElement {
 
   return (
     <nav className={styles.menu}>
-      <Link href="/">
+      <Link href="/" className={styles.logo}>
-        <a className={styles.logo}>
+        <Logo noWordmark />
-          <Logo noWordmark />
+        <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
-          <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
-        </a>
       </Link>
 
       <ul className={styles.navigation}>

src/components/Header/SearchBar.tsx

@@ -17,12 +17,7 @@ async function emptySearch() {
   const text = searchParams.get('text')
 
   if (text !== ('' || undefined || null)) {
-    const url = await addExistingParamsToUrl(location, [
+    await addExistingParamsToUrl(location, ['text', 'owner', 'tags'])
-      'text',
-      'owner',
-      'tags'
-    ])
-    // router.push(`${url}&text=%20`)
   }
 }
 

src/components/Home/Bookmarks.tsx

@@ -5,7 +5,7 @@ import { LoggerInstance } from '@oceanprotocol/lib'
 import Price from '@shared/Price'
 import Tooltip from '@shared/atoms/Tooltip'
 import AssetTitle from '@shared/AssetListTitle'
-import { retrieveDDOListByDIDs } from '@utils/aquarius'
+import { getAssetsFromDids } from '@utils/aquarius'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
 import { useWeb3 } from '@context/Web3'
@@ -59,7 +59,7 @@ export default function Bookmarks(): ReactElement {
       setIsLoading(true)
 
       try {
-        const result = await retrieveDDOListByDIDs(
+        const result = await getAssetsFromDids(
           bookmarks,
           chainIds,
           newCancelToken()

src/components/Home/TopSales/Account/index.tsx

@@ -30,24 +30,25 @@ export default function Account({
   }, [account?.id])
 
   return (
-    <Link href={`/profile/${profile?.name || account.id}`}>
+    <Link
-      <a className={styles.teaser}>
+      href={`/profile/${profile?.name || account.id}`}
-        {place && <span className={styles.place}>{place}</span>}
+      className={styles.teaser}
-        <Avatar
+    >
-          accountId={account.id}
+      {place && <span className={styles.place}>{place}</span>}
-          className={styles.avatar}
+      <Avatar
-          src={profile?.avatar}
+        accountId={account.id}
-        />
+        className={styles.avatar}
-        <div>
+        src={profile?.avatar}
-          <Dotdotdot tagName="h4" clamp={2} className={styles.name}>
+      />
-            {profile?.name ? profile?.name : accountTruncate(account.id)}
+      <div>
-          </Dotdotdot>
+        <Dotdotdot tagName="h4" clamp={2} className={styles.name}>
-          <p className={styles.sales}>
+          {profile?.name ? profile?.name : accountTruncate(account.id)}
-            <span>{account.totalSales}</span>
+        </Dotdotdot>
-            {`${account.totalSales === 1 ? ' sale' : ' sales'}`}
+        <p className={styles.sales}>
-          </p>
+          <span>{account.totalSales}</span>
-        </div>
+          {`${account.totalSales === 1 ? ' sale' : ' sales'}`}
-      </a>
+        </p>
+      </div>
     </Link>
   )
 }

src/components/Home/TopSales/AccountList/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import styles from './index.module.css'
 import Loader from '../../../@shared/atoms/Loader'
 import { useUserPreferences } from '@context/UserPreferences'
-import Account from 'src/components/Home/TopSales/Account'
+import Account from '@components/Home/TopSales/Account'
 import { UserSales } from '@utils/aquarius'
 
 function LoaderArea() {

src/components/Home/TopSales/index.tsx

@@ -1,6 +1,6 @@
 import { useUserPreferences } from '@context/UserPreferences'
 import { LoggerInstance } from '@oceanprotocol/lib'
-import AccountList from 'src/components/Home/TopSales/AccountList'
+import AccountList from '@components/Home/TopSales/AccountList'
 import { getTopAssetsPublishers, UserSales } from '@utils/aquarius'
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './index.module.css'

src/components/Home/TopTags/_utils.ts

@@ -1,7 +1,7 @@
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { generateBaseQuery, queryMetadata } from '@utils/aquarius'
 import axios, { CancelToken } from 'axios'
-import { SortTermOptions } from 'src/@types/aquarius/SearchQuery'
+import { SortTermOptions } from '../../../../src/@types/aquarius/SearchQuery'
 
 export async function getTopTags(
   chainIds: number[],
@@ -32,7 +32,7 @@ export async function getTopTags(
   try {
     const result = await queryMetadata(query, cancelToken)
     const tagsList = result?.aggregations?.topTags?.buckets.map(
-      (x: { key: any }) => x.key
+      (x: { key: string }) => x.key
     )
     return tagsList
   } catch (error) {

src/components/Privacy/PrivacyLanguages.tsx

@@ -21,14 +21,13 @@ export default function PrivacyLanguages({
           return (
             <React.Fragment key={policy.policy}>
               {i > 0 && ' — '}
-              <Link href={slug}>
+              <Link
-                <a
+                href={slug}
-                  onClick={() => {
+                onClick={() => {
-                    setPrivacyPolicySlug(slug)
+                  setPrivacyPolicySlug(slug)
-                  }}
+                }}
-                >
+              >
-                  {policy.language}
+                {policy.language}
-                </a>
               </Link>
             </React.Fragment>
           )

src/components/Profile/History/ComputeJobs/Details.tsx

@@ -3,7 +3,7 @@ import Time from '@shared/atoms/Time'
 import Button from '@shared/atoms/Button'
 import Modal from '@shared/atoms/Modal'
 import External from '@images/external.svg'
-import { retrieveAsset } from '@utils/aquarius'
+import { getAsset } from '@utils/aquarius'
 import Results from './Results'
 import styles from './Details.module.css'
 import { useCancelToken } from '@hooks/useCancelToken'
@@ -49,7 +49,7 @@ function DetailsAssets({ job }: { job: ComputeJobMetaData }) {
 
   useEffect(() => {
     async function getAlgoMetadata() {
-      const ddo = await retrieveAsset(job.algoDID, newCancelToken())
+      const ddo = await getAsset(job.algoDID, newCancelToken())
       setAlgoDtSymbol(ddo.datatokens[0].symbol)
       setAlgoName(ddo?.metadata.name)
     }

src/components/Profile/History/ComputeJobs/Results.tsx

@@ -12,7 +12,7 @@ import FormHelp from '@shared/FormInput/Help'
 import content from '../../../../../content/pages/history.json'
 import { useWeb3 } from '@context/Web3'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { retrieveAsset } from '@utils/aquarius'
+import { getAsset } from '@utils/aquarius'
 
 export default function Results({
   job
@@ -21,7 +21,6 @@ export default function Results({
 }): ReactElement {
   const providerInstance = new Provider()
   const { accountId, web3 } = useWeb3()
-  const [isLoading, setIsLoading] = useState(false)
   const isFinished = job.dateFinished !== null
 
   const [datasetProvider, setDatasetProvider] = useState<string>()
@@ -29,7 +28,7 @@ export default function Results({
 
   useEffect(() => {
     async function getAssetMetadata() {
-      const ddo = await retrieveAsset(job.inputDID[0], newCancelToken())
+      const ddo = await getAsset(job.inputDID[0], newCancelToken())
       setDatasetProvider(ddo.services[0].serviceEndpoint)
     }
     getAssetMetadata()
@@ -61,7 +60,6 @@ export default function Results({
     if (!accountId || !job) return
 
     try {
-      setIsLoading(true)
       const jobResult = await providerInstance.getComputeResultUrl(
         datasetProvider,
         web3,
@@ -72,8 +70,6 @@ export default function Results({
       await downloadFileBrowser(jobResult)
     } catch (error) {
       LoggerInstance.error(error.message)
-    } finally {
-      setIsLoading(false)
     }
   }
 
@@ -97,7 +93,7 @@ export default function Results({
                   </Button>
                 </ListItem>
               ) : (
-                <ListItem>No results found.</ListItem>
+                <ListItem key={i}>No results found.</ListItem>
               )
             )}
         </ul>

src/components/Profile/History/index.tsx

@@ -16,6 +16,7 @@ interface HistoryTab {
 }
 
 const refreshInterval = 10000 // 10 sec.
+
 function getTabs(
   accountId: string,
   userAccountId: string,

src/components/Publish/Actions/index.tsx

@@ -8,7 +8,7 @@ import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '@context/Web3'
 import { useRouter } from 'next/router'
 import Tooltip from '@shared/atoms/Tooltip'
-import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
+import AvailableNetworks from '@components/Publish/AvailableNetworks'
 import Info from '@images/info.svg'
 import Loader from '@shared/atoms/Loader'
 

src/components/Publish/Navigation/index.tsx

@@ -1,5 +1,5 @@
 import { FormikContextType, useFormikContext } from 'formik'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'

src/components/Publish/Preview/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './index.module.css'
 import { FormPublishData } from '../_types'
 import { useFormikContext } from 'formik'
-import AssetContent from 'src/components/Asset/AssetContent'
+import AssetContent from '@components/Asset/AssetContent'
 import { transformPublishFormToDdo } from '../_utils'
 import { ZERO_ADDRESS } from '@oceanprotocol/lib'
 

src/components/Publish/Steps.tsx

@@ -14,6 +14,8 @@ export function Steps({
   const { values, setFieldValue, touched, setTouched } =
     useFormikContext<FormPublishData>()
 
+  const isCustomProviderUrl = values?.services?.[0]?.providerUrl.custom
+
   // auto-sync user chainId & account into form data values
   useEffect(() => {
     if (!chainId || !accountId) return
@@ -41,11 +43,7 @@ export function Steps({
 
   // Auto-change default providerUrl on user network change
   useEffect(() => {
-    if (
+    if (!values?.user?.chainId || isCustomProviderUrl === true) return
-      !values?.user?.chainId ||
-      values?.services[0]?.providerUrl.custom === true
-    )
-      return
 
     const config = getOceanConfig(values.user.chainId)
     if (config) {
@@ -57,12 +55,7 @@ export function Steps({
     }
 
     setTouched({ ...touched, services: [{ providerUrl: { url: true } }] })
-  }, [
+  }, [values?.user?.chainId, isCustomProviderUrl, setFieldValue, setTouched])
-    values?.user?.chainId,
-    values?.services[0]?.providerUrl.custom,
-    setFieldValue,
-    setTouched
-  ])
 
   const { component } = wizardSteps.filter((stepContent) => {
     return stepContent.step === values.user.stepCurrent

src/components/Publish/Title/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.css'
 import content from '../../../../content/publish/index.json'
 import { useWeb3 } from '@context/Web3'
 import Info from '@images/info.svg'
-import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
+import AvailableNetworks from '@components/Publish/AvailableNetworks'
 
 export default function Title({
   networkId

src/components/Publish/_constants.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { allowFixedPricing } from '../../../app.config.js'
+import { allowFixedPricing } from '../../../app.config'
 import {
   FormPublishData,
   MetadataAlgorithmContainer,

src/components/Search/utils.ts

@@ -1,5 +1,6 @@
 import { LoggerInstance } from '@oceanprotocol/lib'
 import {
+  escapeEsReservedCharacters,
   generateBaseQuery,
   getFilterTerm,
   queryMetadata
@@ -26,10 +27,6 @@ export function updateQueryStringParameter(
   }
 }
 
-export function escapeESReservedChars(text: string): string {
-  return text?.replace(/([!*+\-=<>&|()\\[\]{}^~?:\\/"])/g, '\\$1')
-}
-
 export function getSearchQuery(
   chainIds: number[],
   text?: string,
@@ -42,7 +39,7 @@ export function getSearchQuery(
   serviceType?: string,
   accessType?: string
 ): SearchQuery {
-  text = escapeESReservedChars(text)
+  text = escapeEsReservedCharacters(text)
   const emptySearchTerm = text === undefined || text === ''
   const filters: FilterTerm[] = []
   let searchTerm = text || ''
@@ -150,7 +147,7 @@ export async function getResults(
   },
   chainIds: number[],
   cancelToken?: CancelToken
-): Promise<any> {
+): Promise<PagedAssets> {
   const {
     text,
     owner,

src/pages/_app.tsx

@@ -6,7 +6,7 @@ import { UserPreferencesProvider } from '@context/UserPreferences'
 import PricesProvider from '@context/Prices'
 import UrqlProvider from '@context/UrqlProvider'
 import ConsentProvider from '@context/CookieConsent'
-import App from 'src/components/App'
+import App from '../../src/components/App'
 
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../stylesGlobal/styles.css'

tsconfig.json

@@ -1,33 +1,30 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "baseUrl": ".", // This must be specified if "paths" is.
-    "module": "ES2020",
+    "target": "es5",
-    "lib": ["dom", "ES2020"],
+    "lib": ["dom", "dom.iterable", "esnext"],
-    "resolveJsonModule": true,
+    "allowJs": true,
-    "moduleResolution": "node",
+    "skipLibCheck": true,
-    "jsx": "preserve",
+    "strict": false,
-    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
-    "emitDecoratorMetadata": true,
     "noEmit": true,
-    "sourceMap": true,
+    "incremental": true,
-    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
     "paths": {
+      "@components/*": ["./src/components/*"],
       "@shared/*": ["./src/components/@shared/*"],
       "@hooks/*": ["./src/@hooks/*"],
       "@context/*": ["./src/@context/*"],
       "@images/*": ["./src/@images/*"],
       "@utils/*": ["./src/@utils/*"],
       "@content/*": ["./@content/*"]
-    },
+    }
-    "baseUrl": ".",
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "esModuleInterop": true,
-    "incremental": true
   },
-  "exclude": ["node_modules", ".next", "*.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "include": ["./src/**/*", "./.jest/**/*", "./next-env.d.ts", "./content/**/*"]
+  "exclude": ["node_modules", ".next", "*.js"]
 }