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
2022-12-01 09:09:40 +00:00 · 2022-12-01 09:09:40 +00:00 · 1b612e4194
parent b58cb36e00
commit 1b612e4194
68 changed files with 49121 additions and 2255 deletions
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@ -42,7 +42,7 @@ exclude_patterns:
  - '**/*.d.ts'
  - '**/@types/'
  - '**/_types.*'
-  - '**/*.stories.tsx'
-  - '**/*.test.tsx'
+  - '**/*.stories.*'
+  - '**/*.test.*'
  - '.storybook/'
  - '.jest/'
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -1 +1 @@
-* @mihaisc @kremalicious @claudiaHash @bogdanfazakas @EnzoVezzaro
+* @jamiehewitt15 @mihaisc @kremalicious @bogdanfazakas @EnzoVezzaro
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@ -8,6 +8,7 @@ coverage
 .next
 .artifacts
 .vercel
+.swc
 repo-metadata.json
 networks-metadata.json
 src/@types/subgraph
--- a/.jest/fixtures/assetsWithAccessDetails.ts
+++ b/.jest/fixtures/assetsWithAccessDetails.ts
@ -1574,4 +1574,4 @@ export const assets: AssetExtended[] = [
      validOrderTx: null
    }
  }
-]
+]
--- a/.jest/mocks/matchMedia.ts
+++ b/.jest/mocks/matchMedia.ts
--- a/.jest/mocks/tar.ts
+++ b/.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')
--- a/.jest/jest.config.js
+++ b/.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
-module.exports = createJestConfig(customJestConfig)
+// https://github.com/vercel/next.js/issues/35634#issuecomment-1115250297
+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
--- a/.jest/jest.setup.js
+++ b/.jest/jest.setup.js
@ -1,3 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import './__mocks__/matchMedia'
-import './__mocks__/hooksMocks'
--- a/.jest/jest.setup.tsx
+++ b/.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}</>
+//     }
+//   }
+// })
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-16
+18
--- a/README.md
+++ b/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 (
    <>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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-dom": "^18.1.0",
+    "react-data-table-component": "^7.5.3",
+    "react-dom": "^18.2.0",
    "react-dotdotdot": "^1.3.1",
-    "react-modal": "^3.15.1",
-    "react-paginate": "^8.1.3",
-    "react-select": "^5.4.0",
-    "react-spring": "^9.5.2",
+    "react-modal": "^3.16.1",
+    "react-paginate": "^8.1.4",
+    "react-select": "^5.6.1",
+    "react-spring": "^9.5.5",
    "react-tabs": "^5.1.0",
-    "react-toastify": "^9.0.4",
-    "remark": "^13.0.0",
-    "remark-gfm": "^1.0.0",
-    "remark-html": "^13.0.1",
+    "react-toastify": "^9.1.1",
+    "remark": "^14.0.2",
+    "remark-gfm": "^3.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",
-    "web3modal": "^1.9.9",
+    "web3": "^1.8.1",
+    "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-dom": "^18.0.5",
+    "@types/react": "^18.0.25",
+    "@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/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.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",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.2.2",
-    "prettier": "^2.7.1",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.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%",
--- 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 { 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(
--- a/src/@context/MarketMetadata/index.tsx
+++ b/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'
--- a/src/@context/Web3.tsx
+++ b/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)
--- a/src/@hooks/useNetworkMetadata/utils.test.ts
+++ b/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 */
+  })
+})
--- a/src/@hooks/useNetworkMetadata/utils.ts
+++ b/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.title?.includes('Testnet') &&
-    network.name !== 'Moonbase Alpha'
+    !network.name?.includes('Testnet') &&
+    !network.title?.includes('Testnet')
  ) {
    return NetworkType.Mainnet
  } else {
@ -21,19 +20,13 @@ export function getNetworkType(network: EthereumListsChain): string {
  }
 }

-export function getNetworkDisplayName(
-  data: EthereumListsChain,
-  networkId: number
-): string {
+export function getNetworkDisplayName(data: EthereumListsChain): 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
  }
--- a/src/@utils/aquarius/index.test.ts
+++ b/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'
+      }
+    })
+  })
+})
--- a/src/@utils/aquarius/index.ts
+++ b/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 { metadataCacheUri } from '../../app.config'
+import { OrdersData_orders as OrdersData } from '../../@types/subgraph/OrdersData'
+import { metadataCacheUri } from '../../../app.config'
 import {
  SortDirectionOptions,
  SortTermOptions
-} from '../@types/aquarius/SearchQuery'
-import { transformAssetToAssetSelection } from './assetConvertor'
+} from '../../@types/aquarius/SearchQuery'
+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(
-  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(
+export async function getAssetsFromDids(
  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,
--- a/src/@utils/compute.ts
+++ b/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
-}
--- a/src/@utils/ens/index.test.ts
+++ b/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)
--- a/src/@utils/ens/index.ts
+++ b/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'

--- a/src/@utils/index.ts
+++ b/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) {
--- a/src/@utils/markdown.ts
+++ b/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()
 }
--- a/src/@utils/url/index.test.ts
+++ b/src/@utils/url/index.test.ts
@ -1,4 +1,4 @@
-import { sanitizeUrl } from './url'
+import { sanitizeUrl } from '.'

 describe('@utils/url', () => {
  test('sanitizeUrl', () => {
--- a/src/@utils/url/index.ts
+++ b/src/@utils/url/index.ts
--- a/src/@utils/veAllocation.ts
+++ b/src/@utils/veAllocation.ts
@ -1,7 +1,7 @@
-import { AllLockedQuery } from 'src/@types/subgraph/AllLockedQuery'
-import { OwnAllocationsQuery } from 'src/@types/subgraph/OwnAllocationsQuery'
-import { NftOwnAllocationQuery } from 'src/@types/subgraph/NftOwnAllocationQuery'
-import { OceanLockedQuery } from 'src/@types/subgraph/OceanLockedQuery'
+import { AllLockedQuery } from '../../src/@types/subgraph/AllLockedQuery'
+import { OwnAllocationsQuery } from '../../src/@types/subgraph/OwnAllocationsQuery'
+import { NftOwnAllocationQuery } from '../../src/@types/subgraph/NftOwnAllocationQuery'
+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
-}
--- a/src/@utils/web3.ts
+++ b/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
--- a/src/components/@shared/AssetListTitle/index.tsx
+++ b/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}`}>
-        <a>{assetTitle}</a>
-      </Link>
+      <Link href={`/asset/${did || asset?.id}`}>{assetTitle}</Link>
    </h3>
  )
 }
--- a/src/components/@shared/AssetTeaser/index.tsx
+++ b/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}`}>
-        <a className={styles.link}>
-          <aside className={styles.detailLine}>
-            <AssetType
-              className={styles.typeLabel}
-              type={type}
-              accessType={accessType}
-            />
-            <span className={styles.typeLabel}>
-              {datatokens[0]?.symbol.substring(0, 9)}
-            </span>
-            <NetworkName
-              networkId={asset.chainId}
-              className={styles.typeLabel}
-            />
-          </aside>
-          <header className={styles.header}>
-            <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
-              {name.slice(0, 200)}
+      <Link href={`/asset/${asset.id}`} className={styles.link}>
+        <aside className={styles.detailLine}>
+          <AssetType
+            className={styles.typeLabel}
+            type={type}
+            accessType={accessType}
+          />
+          <span className={styles.typeLabel}>
+            {datatokens[0]?.symbol.substring(0, 9)}
+          </span>
+          <NetworkName networkId={asset.chainId} className={styles.typeLabel} />
+        </aside>
+        <header className={styles.header}>
+          <Dotdotdot tagName="h1" clamp={3} className={styles.title}>
+            {name.slice(0, 200)}
+          </Dotdotdot>
+          {!noPublisher && <Publisher account={owner} minimal />}
+        </header>
+        {!noDescription && (
+          <div className={styles.content}>
+            <Dotdotdot tagName="p" clamp={3}>
+              {removeMarkdown(description?.substring(0, 300) || '')}
            </Dotdotdot>
-            {!noPublisher && <Publisher account={owner} minimal />}
-          </header>
-          {!noDescription && (
-            <div className={styles.content}>
-              <Dotdotdot tagName="p" clamp={3}>
-                {removeMarkdown(description?.substring(0, 300) || '')}
-              </Dotdotdot>
-            </div>
-          )}
-          {!noPrice && (
-            <div className={styles.price}>
-              {isUnsupportedPricing || !asset.services.length ? (
-                <strong>No pricing schema available</strong>
+          </div>
+        )}
+        {!noPrice && (
+          <div className={styles.price}>
+            {isUnsupportedPricing || !asset.services.length ? (
+              <strong>No pricing schema available</strong>
+            ) : (
+              <Price accessDetails={asset.accessDetails} size="small" />
+            )}
+          </div>
+        )}
+        <footer className={styles.footer}>
+          {allocated && allocated > 0 ? (
+            <span className={styles.typeLabel}>
+              {allocated < 0 ? (
+                ''
              ) : (
-                <Price accessDetails={asset.accessDetails} size="small" />
+                <>
+                  <strong>{formatNumber(allocated, locale, '0')}</strong>{' '}
+                  veOCEAN
+                </>
              )}
-            </div>
-          )}
-
-          <footer className={styles.footer}>
-            {allocated && allocated > 0 ? (
-              <span className={styles.typeLabel}>
-                {allocated < 0 ? (
-                  ''
-                ) : (
-                  <>
-                    <strong>{formatNumber(allocated, locale, '0')}</strong>{' '}
-                    veOCEAN
-                  </>
-                )}
-              </span>
-            ) : null}
-            {orders && orders > 0 ? (
-              <span className={styles.typeLabel}>
-                {orders < 0 ? (
-                  'N/A'
-                ) : (
-                  <>
-                    <strong>{orders}</strong> {orders === 1 ? 'sale' : 'sales'}
-                  </>
-                )}
-              </span>
-            ) : 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>
+            </span>
+          ) : null}
+          {orders && orders > 0 ? (
+            <span className={styles.typeLabel}>
+              {orders < 0 ? (
+                'N/A'
+              ) : (
+                <>
+                  <strong>{orders}</strong> {orders === 1 ? 'sale' : 'sales'}
+                </>
+              )}
+            </span>
+          ) : 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>
      </Link>
    </article>
  )
--- a/src/components/@shared/FormInput/InputElement/ContainerInput/index.tsx
+++ b/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'
--- a/src/components/@shared/FormInput/InputElement/Provider/index.tsx
+++ b/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'
--- a/src/components/@shared/NetworkName/index.tsx
+++ b/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
--- a/src/components/@shared/Publisher/index.tsx
+++ b/src/components/@shared/Publisher/index.tsx
@ -41,8 +41,8 @@ export default function Publisher({
        name
      ) : (
        <>
-          <Link href={`/profile/${account}`}>
-            <a title="Show profile page.">{name}</a>
+          <Link href={`/profile/${account}`} title="Show profile page.">
+            {name}
          </Link>
        </>
      )}
--- a/src/components/@shared/WalletNetworkSwitcher/index.tsx
+++ b/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() {
--- a/src/components/@shared/Web3Feedback/index.tsx
+++ b/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'
--- a/src/components/@shared/atoms/Button/index.tsx
+++ b/src/components/@shared/atoms/Button/index.tsx
@ -41,10 +41,8 @@ export default function Button({
  })

  return to ? (
-    <Link href={to}>
-      <a className={styleClasses} {...props}>
-        {children}
-      </a>
+    <Link href={to} className={styleClasses} {...props}>
+      {children}
    </Link>
  ) : href ? (
    <a href={href} className={styleClasses} {...props}>
--- a/src/components/@shared/atoms/Tags/index.tsx
+++ b/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`}>
-      <a className={styles.tag} title={tag}>
-        {tag}
-      </a>
+    <Link
+      href={`/search?tags=${urlEncodedTag}&sort=_score&sortOrder=desc`}
+      className={styles.tag}
+      title={tag}
+    >
+      {tag}
    </Link>
  )
 }
--- a/src/components/Asset/AssetActions/Compute/AssetComputeList/index.tsx
+++ b/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}>
-              <a className={styles.row}>
-                <div className={styles.info}>
-                  <h3 className={styles.title}>
-                    <Dotdotdot clamp={1} tagName="span">
-                      {asset.name}
-                    </Dotdotdot>
-                  </h3>
-                  <Dotdotdot clamp={1} tagName="code" className={styles.did}>
-                    {asset.symbol} | {asset.did}
+            <Link
+              href={`/asset/${asset.did}`}
+              key={asset.did}
+              className={styles.row}
+            >
+              <div className={styles.info}>
+                <h3 className={styles.title}>
+                  <Dotdotdot clamp={1} tagName="span">
+                    {asset.name}
                  </Dotdotdot>
-                </div>
-                <PriceUnit
-                  price={Number(asset.price)}
-                  size="small"
-                  className={styles.price}
-                />
-              </a>
+                </h3>
+                <Dotdotdot clamp={1} tagName="code" className={styles.did}>
+                  {asset.symbol} | {asset.did}
+                </Dotdotdot>
+              </div>
+              <PriceUnit
+                price={Number(asset.price)}
+                size="small"
+                className={styles.price}
+              />
            </Link>
          ))
        )}
--- a/src/components/Asset/AssetActions/Compute/History.tsx
+++ b/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)

--- a/src/components/Asset/AssetActions/index.tsx
+++ b/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'

--- a/src/components/Asset/AssetContent/Nft/index.tsx
+++ b/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'
--- a/src/components/Asset/Edit/FormActions.test.tsx
+++ b/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])
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/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'

--- a/src/components/Footer/Links.tsx
+++ b/src/components/Footer/Links.tsx
@ -24,17 +24,11 @@ export default function Links() {
        </Fragment>
      ))}

-      <Link href="/imprint">
-        <a>Imprint</a>
-      </Link>
+      <Link href="/imprint">Imprint</Link>
      {' — '}
-      <Link href="/terms">
-        <a>Terms</a>
-      </Link>
+      <Link href="/terms">Terms</Link>
      {' — '}
-      <Link href={privacyPolicySlug}>
-        <a>Privacy</a>
-      </Link>
+      <Link href={privacyPolicySlug}>Privacy</Link>
      {appConfig?.privacyPreferenceCenter === 'true' && (
        <>
          {' — '}
--- a/src/components/Footer/MarketStats/index.tsx
+++ b/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'
--- a/src/components/Header/Menu.tsx
+++ b/src/components/Header/Menu.tsx
@ -24,8 +24,8 @@ function MenuLink({ item }: { item: MenuItem }) {
      : styles.link

  return (
-    <Link key={item.name} href={item.link}>
-      <a className={classes}>{item.name}</a>
+    <Link key={item.name} href={item.link} className={classes}>
+      {item.name}
    </Link>
  )
 }
@ -35,11 +35,9 @@ export default function Menu(): ReactElement {

  return (
    <nav className={styles.menu}>
-      <Link href="/">
-        <a className={styles.logo}>
-          <Logo noWordmark />
-          <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
-        </a>
+      <Link href="/" className={styles.logo}>
+        <Logo noWordmark />
+        <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
      </Link>

      <ul className={styles.navigation}>
--- a/src/components/Header/SearchBar.tsx
+++ b/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, [
-      'text',
-      'owner',
-      'tags'
-    ])
-    // router.push(`${url}&text=%20`)
+    await addExistingParamsToUrl(location, ['text', 'owner', 'tags'])
  }
 }

--- a/src/components/Home/Bookmarks.tsx
+++ b/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()
--- a/src/components/Home/TopSales/Account/index.tsx
+++ b/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}`}>
-      <a className={styles.teaser}>
-        {place && <span className={styles.place}>{place}</span>}
-        <Avatar
-          accountId={account.id}
-          className={styles.avatar}
-          src={profile?.avatar}
-        />
-        <div>
-          <Dotdotdot tagName="h4" clamp={2} className={styles.name}>
-            {profile?.name ? profile?.name : accountTruncate(account.id)}
-          </Dotdotdot>
-          <p className={styles.sales}>
-            <span>{account.totalSales}</span>
-            {`${account.totalSales === 1 ? ' sale' : ' sales'}`}
-          </p>
-        </div>
-      </a>
+    <Link
+      href={`/profile/${profile?.name || account.id}`}
+      className={styles.teaser}
+    >
+      {place && <span className={styles.place}>{place}</span>}
+      <Avatar
+        accountId={account.id}
+        className={styles.avatar}
+        src={profile?.avatar}
+      />
+      <div>
+        <Dotdotdot tagName="h4" clamp={2} className={styles.name}>
+          {profile?.name ? profile?.name : accountTruncate(account.id)}
+        </Dotdotdot>
+        <p className={styles.sales}>
+          <span>{account.totalSales}</span>
+          {`${account.totalSales === 1 ? ' sale' : ' sales'}`}
+        </p>
+      </div>
    </Link>
  )
 }
--- a/src/components/Home/TopSales/AccountList/index.tsx
+++ b/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() {
--- a/src/components/Home/TopSales/index.tsx
+++ b/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'
--- a/src/components/Home/TopTags/_utils.ts
+++ b/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) {
--- a/src/components/Privacy/PrivacyLanguages.tsx
+++ b/src/components/Privacy/PrivacyLanguages.tsx
@ -21,14 +21,13 @@ export default function PrivacyLanguages({
          return (
            <React.Fragment key={policy.policy}>
              {i > 0 && ' — '}
-              <Link href={slug}>
-                <a
-                  onClick={() => {
-                    setPrivacyPolicySlug(slug)
-                  }}
-                >
-                  {policy.language}
-                </a>
+              <Link
+                href={slug}
+                onClick={() => {
+                  setPrivacyPolicySlug(slug)
+                }}
+              >
+                {policy.language}
              </Link>
            </React.Fragment>
          )
--- a/src/components/Profile/History/ComputeJobs/Details.tsx
+++ b/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)
    }
--- a/src/components/Profile/History/ComputeJobs/Results.tsx
+++ b/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>
--- a/src/components/Profile/History/index.tsx
+++ b/src/components/Profile/History/index.tsx
@ -16,6 +16,7 @@ interface HistoryTab {
 }

 const refreshInterval = 10000 // 10 sec.
+
 function getTabs(
  accountId: string,
  userAccountId: string,
--- a/src/components/Publish/Actions/index.tsx
+++ b/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'

--- a/src/components/Publish/Navigation/index.tsx
+++ b/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'
--- a/src/components/Publish/Preview/index.tsx
+++ b/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'

--- a/src/components/Publish/Steps.tsx
+++ b/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 (
-      !values?.user?.chainId ||
-      values?.services[0]?.providerUrl.custom === true
-    )
-      return
+    if (!values?.user?.chainId || isCustomProviderUrl === 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,
-    values?.services[0]?.providerUrl.custom,
-    setFieldValue,
-    setTouched
-  ])
+  }, [values?.user?.chainId, isCustomProviderUrl, setFieldValue, setTouched])

  const { component } = wizardSteps.filter((stepContent) => {
    return stepContent.step === values.user.stepCurrent
--- a/src/components/Publish/Title/index.tsx
+++ b/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
--- a/src/components/Publish/_constants.tsx
+++ b/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,
--- a/src/components/Search/utils.ts
+++ b/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,
--- a/src/pages/_app.tsx
+++ b/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'
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,33 +1,30 @@
 {
  "compilerOptions": {
-    "target": "esnext",
-    "module": "ES2020",
-    "lib": ["dom", "ES2020"],
-    "resolveJsonModule": true,
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
+    "baseUrl": ".", // This must be specified if "paths" is.
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
+    "incremental": 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": ["./src/**/*", "./.jest/**/*", "./next-env.d.ts", "./content/**/*"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", ".next", "*.js"]
 }