more refactor

codegen.yml

@@ -1,16 +1,16 @@
 overwrite: true
 schema: 'https://subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph'
 documents:
-  - './src/utils/subgraph.ts'
+  - './src/@utils/aquarius.ts'
-  - './src/components/pages/History/PoolShares.tsx'
+  - './src/@utils/subgraph.ts'
-  - './src/components/pages/History/Downloads.tsx'
+  - './src/@context/Profile.tsx'
-  - './src/components/pages/History/ComputeJobs/index.tsx'
+  - './src/components/@shared/PoolTransactions/index.tsx'
-  - './src/components/organisms/AssetContent/EditHistory.tsx'
+  - './src/components/@shared/Asset/AssetActions/Consume.tsx'
-  # - './src/components/organisms/AssetActions/Pool/index.tsx'
+  - './src/components/@shared/Asset/AssetActions/Pool/index.tsx'
-  - './src/components/organisms/AssetActions/Pool/Graph.tsx'
+  - './src/components/@shared/Asset/AssetActions/Pool/Graph.tsx'
-  - './src/components/organisms/AssetActions/Consume.tsx'
+  - './src/components/@shared/Asset/AssetContent/EditHistory.tsx'
-  - './src/components/molecules/PoolTransactions.tsx'
+  - './src/components/Profile/Header/Stats.tsx'
-  - './src/components/molecules/MarketStats.tsx'
+  - './src/components/Profile/History/PoolShares.tsx'
 generates:
   ./src/@types/graph.types.ts:
     plugins:

gatsby-browser.js

@@ -1,5 +1,5 @@
-import wrapPageElementWithStyles from './src/components/wrapPageElement'
+import wrapPageElementWithStyles from './src/components/App/wrapPageElement'
-import wrapRootElementWithProviders from './src/components/wrapRootElement'
+import ContextProviders from './src/components/App/ContextProviders'
 
 export const wrapPageElement = wrapPageElementWithStyles
-export const wrapRootElement = wrapRootElementWithProviders
+export const wrapRootElement = ContextProviders

gatsby-node.js

@@ -1,5 +1,6 @@
-const createFields = require('./gatsby/createFields')
+const createMarkdownFields = require('./gatsby/createMarkdownFields')
 const createMarkdownPages = require('./gatsby/createMarkdownPages')
+const createTypes = require('./gatsby/createTypes')
 const execSync = require('child_process').execSync
 const path = require('path')
 
@@ -8,7 +9,7 @@ execSync(`node ./scripts/write-repo-metadata > repo-metadata.json`, {
   stdio: 'inherit'
 })
 
-// Generate GraphQl typings for urql
+// Generate GraphQL typings for urql
 // execSync(`npm run graphql:graphTypes`, { stdio: 'inherit' })
 
 // Generate Apollo typings
@@ -22,33 +23,12 @@ execSync(
   }
 )
 
-//Extend ContentJson to support optional field "optionalCookies" in gdpr.json
-//Extend PublishJsonData to support optional fields for disclaimers
 exports.sourceNodes = ({ actions }) => {
-  const { createTypes } = actions
+  createTypes(actions)
-  const typeDefs = `
-    type ContentJson implements Node {
-      accept: String
-      reject: String
-      close: String
-      configure: String
-      optionalCookies: [Cookie!]
-    }
-    type Cookie {
-      title: String!
-      desc: String!
-      cookieName: String!
-    }
-    type PublishJsonData implements Node {
-      disclaimer: String
-      disclaimerValues: [String!]
-    }
-  `
-  createTypes(typeDefs)
 }
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  createFields(node, actions, getNode)
+  createMarkdownFields(node, actions, getNode)
 }
 
 exports.createPages = async ({ graphql, actions }) => {

gatsby-ssr.js

@@ -1,5 +1,5 @@
-import wrapPageElementWithStyles from './src/components/wrapPageElement'
+import wrapPageElementWithStyles from './src/components/App/wrapPageElement'
-import wrapRootElementWithProviders from './src/components/wrapRootElement'
+import ContextProviders from './src/components/App/ContextProviders'
 
 export const wrapPageElement = wrapPageElementWithStyles
-export const wrapRootElement = wrapRootElementWithProviders
+export const wrapRootElement = ContextProviders

gatsby/createTypes.js

@@ -0,0 +1,27 @@
+function createTypes(actions) {
+  const { createTypes } = actions
+
+  // Extend ContentJson to support optional field "optionalCookies" in gdpr.json
+  // Extend PublishJsonData to support optional fields for disclaimers
+  const typeDefs = `
+    type ContentJson implements Node {
+      accept: String
+      reject: String
+      close: String
+      configure: String
+      optionalCookies: [Cookie!]
+    }
+    type Cookie {
+      title: String!
+      desc: String!
+      cookieName: String!
+    }
+    type PublishJsonData implements Node {
+      disclaimer: String
+      disclaimerValues: [String!]
+    }
+  `
+  createTypes(typeDefs)
+}
+
+module.exports = createTypes

src/@context/Profile.tsx

@@ -15,16 +15,13 @@ import {
 import { useUserPreferences } from './UserPreferences'
 import { PoolShares_poolShares as PoolShare } from '../@types/apollo/PoolShares'
 import { DDO, Logger } from '@oceanprotocol/lib'
-import { getDownloadAssets, getPublishedAssets } from '../utils/aquarius'
+import { getDownloadAssets, getPublishedAssets } from '@utils/aquarius'
-  getPublishedAssets
-} from '@utils/aquarius'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { accountTruncate } from '@utils/web3'
 import axios, { CancelToken } from 'axios'
 import ethereumAddress from 'ethereum-address'
 import get3BoxProfile from '@utils/profile'
 import web3 from 'web3'
-import { DownloadedAsset } from '../models/aquarius/DownloadedAsset'
 
 interface ProfileProviderValue {
   profile: Profile

src/@context/Web3.tsx

@@ -13,14 +13,12 @@ import { infuraProjectId as infuraId, portisId } from '../../app.config'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import { Logger } from '@oceanprotocol/lib'
 import { isBrowser } from '@utils/index'
-import {
-  EthereumListsChain,
-  getNetworkDataById,
-  getNetworkDisplayName
-} from '@utils/web3'
 import { getEnsName } from '@utils/ens'
 import { getOceanBalance } from '@utils/ocean'
-import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import useNetworkMetadata, {
+  getNetworkDataById,
+  getNetworkDisplayName
+} from '@hooks/useNetworkMetadata'
 
 interface Web3ProviderValue {
   web3: Web3

src/@hooks/useNetworkMetadata/constants.ts

@@ -0,0 +1,20 @@
+import { getOceanConfig } from '@utils/ocean'
+
+const configGaiaX = getOceanConfig(2021000)
+
+export const networkDataGaiaX: EthereumListsChain = {
+  name: 'GAIA-X Testnet',
+  chainId: 2021000,
+  shortName: 'GAIA-X',
+  chain: 'GAIA-X',
+  network: 'testnet',
+  networkId: 2021000,
+  nativeCurrency: { name: 'Gaia-X', symbol: 'GX', decimals: 18 },
+  rpc: [configGaiaX.nodeUri],
+  faucets: [
+    'https://faucet.gaiaxtestnet.oceanprotocol.com/',
+    'https://faucet.gx.gaiaxtestnet.oceanprotocol.com/'
+  ],
+  infoURL: 'https://www.gaia-x.eu',
+  explorers: [{ url: '' }]
+}

src/@hooks/useNetworkMetadata/index.ts

@@ -1,9 +1,5 @@
 import { useStaticQuery, graphql } from 'gatsby'
-import { EthereumListsChain } from '@utils/web3'
+import { UseNetworkMetadata } from './types'
-
-export interface UseNetworkMetadata {
-  networksList: { node: EthereumListsChain }[]
-}
 
 const networksQuery = graphql`
   query {
@@ -36,3 +32,5 @@ export default function useNetworkMetadata(): UseNetworkMetadata {
 
   return { networksList }
 }
+
+export * from './utils'

src/@hooks/useNetworkMetadata/types.ts

@@ -0,0 +1,3 @@
+export interface UseNetworkMetadata {
+  networksList: { node: EthereumListsChain }[]
+}

src/@hooks/useNetworkMetadata/utils.ts

@@ -0,0 +1,68 @@
+import { networkDataGaiaX } from './constants'
+
+export function getNetworkDisplayName(
+  data: EthereumListsChain,
+  networkId: number
+): string {
+  let displayName
+
+  switch (networkId) {
+    case 137:
+      displayName = 'Polygon'
+      break
+    case 1287:
+      displayName = 'Moonbase Alpha'
+      break
+    case 1285:
+      displayName = 'Moonriver'
+      break
+    case 80001:
+      displayName = 'Polygon Mumbai'
+      break
+    case 8996:
+      displayName = 'Development'
+      break
+    default:
+      displayName = data
+        ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}`
+        : 'Unknown'
+      break
+  }
+
+  return displayName
+}
+
+export function getNetworkDataById(
+  data: { node: EthereumListsChain }[],
+  networkId: number
+): EthereumListsChain {
+  if (!networkId) return
+  const networkData = data.filter(
+    ({ node }: { node: EthereumListsChain }) => node.chainId === networkId
+  )
+
+  return networkId === 2021000 ? networkDataGaiaX : networkData[0]?.node
+}
+
+export function filterNetworksByType(
+  type: 'mainnet' | 'testnet',
+  chainIds: number[],
+  networksList: { node: EthereumListsChain }[]
+): number[] {
+  const finalNetworks = chainIds.filter((chainId: number) => {
+    const networkData = getNetworkDataById(networksList, chainId)
+
+    // HEADS UP! Only networkData.network === 'mainnet' is consistent
+    // while not every test network in the network data has 'testnet'
+    // in its place. So for the 'testnet' case filter for all non-'mainnet'.
+    //
+    // HEADS UP NO. 2! We hack in mainnet detection for moonriver as their
+    // network data uses the `network` key wrong over in
+    // https://github.com/ethereum-lists/chains/blob/master/_data/chains/eip155-1285.json
+    //
+    return type === 'mainnet'
+      ? networkData.network === type || networkData.network === 'moonriver'
+      : networkData.network !== 'mainnet' && networkData.network !== 'moonriver'
+  })
+  return finalNetworks
+}

src/@hooks/useSiteMetadata/index.ts

@@ -1,5 +1,5 @@
 import { useStaticQuery, graphql } from 'gatsby'
-import { UseSiteMetadata } from './_types'
+import { UseSiteMetadata } from './types'
 
 const query = graphql`
   query {

src/@types/NetworkMetadata.d.ts

@@ -0,0 +1,21 @@
+interface EthereumListsChain {
+  name: string
+  chainId: number
+  shortName: string
+  chain: string
+  network: string
+  networkId: number
+  nativeCurrency: { name: string; symbol: string; decimals: number }
+  rpc: string[]
+  infoURL: string
+  faucets: string[]
+  explorers: [{ url: string }]
+}
+
+interface NetworkObject {
+  chainId: number
+  name: string
+  nativeCurrency: string
+  explorers: [{ url: string }]
+  urlList: string[]
+}

src/@types/aquarius/BaseQueryParams.d.ts

@@ -0,0 +1,13 @@
+interface EsPaginationOptions {
+  from?: number
+  size?: number
+}
+
+interface BaseQueryParams {
+  chainIds: number[]
+  nestedQuery?: any
+  esPaginationOptions?: EsPaginationOptions
+  sortOptions?: SortOptions
+  filters?: FilterTerm[]
+  ignorePurgatory?: boolean
+}

src/@types/aquarius/DownloadedAsset.d.ts

@@ -0,0 +1,12 @@
+import { DDO } from '@oceanprotocol/lib'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface DownloadedAsset {
+    dtSymbol: string
+    timestamp: number
+    networkId: number
+    ddo: DDO
+  }
+}

src/@types/aquarius/PagedAssets.d.ts

@@ -0,0 +1,12 @@
+import { DDO } from '@oceanprotocol/lib'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface PagedAssets {
+    results: DDO[]
+    page: number
+    totalPages: number
+    totalResults: number
+  }
+}

src/@types/aquarius/SearchQuery.ts

@@ -0,0 +1,47 @@
+export enum SortDirectionOptions {
+  Ascending = 'asc',
+  Descending = 'desc'
+}
+
+export enum SortTermOptions {
+  Created = 'created',
+  Relevance = '_score'
+}
+
+// Note: could not figure out how to get `enum` to be ambiant
+// as final compiled js won't have it then.
+// Only export/import works for that, so this file is NOT .d.ts file ending
+// and gets imported in components.
+
+export enum FilterByTypeOptions {
+  Data = 'dataset',
+  Algorithm = 'algorithm'
+}
+
+export enum FilterByAccessOptions {
+  Download = 'access',
+  Compute = 'compute'
+}
+
+declare global {
+  interface SortOptions {
+    sortBy: SortTermOptions
+    sortDirection?: SortDirectionOptions
+  }
+
+  interface FilterTerm {
+    [property: string]: {
+      [property: string]: string | number | boolean | number[] | string[]
+    }
+  }
+
+  type Filters = FilterByTypeOptions | FilterByAccessOptions
+
+  interface SearchQuery {
+    from?: number
+    size?: number
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    query: any
+    sort?: { [jsonPath: string]: SortDirectionOptions }
+  }
+}

src/@types/aquarius/SearchResponse.d.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable camelcase */
+import { DDO } from '@oceanprotocol/lib'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface Explanation {
+    value: number
+    description: string
+    details: Explanation[]
+  }
+
+  interface ShardsResponse {
+    total: number
+    successful: number
+    failed: number
+    skipped: number
+  }
+
+  interface SearchResponse {
+    took: number
+    timed_out: boolean
+    _scroll_id?: string | undefined
+    _shards: ShardsResponse
+    hits: {
+      total: number
+      max_score: number
+      hits: Array<{
+        _index: string
+        _type: string
+        _id: string
+        _score: number
+        _source: DDO
+        _version?: number | undefined
+        _explanation?: Explanation | undefined
+        fields?: any
+        highlight?: any
+        inner_hits?: any
+        matched_queries?: string[] | undefined
+        sort?: string[] | undefined
+      }>
+    }
+    aggregations?: any
+  }
+}

src/@utils/aquarius.ts

@@ -4,19 +4,11 @@ import {
   Logger,
   publisherTrustedAlgorithm as PublisherTrustedAlgorithm
 } from '@oceanprotocol/lib/'
-
 import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
 import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'
 import { metadataCacheUri } from '../../app.config'
-import { DownloadedAsset } from '../models/aquarius/DownloadedAsset'
-import { SearchQuery } from '../models/aquarius/SearchQuery'
-import { SearchResponse } from '../models/aquarius/SearchResponse'
-import { PagedAssets } from '../models/PagedAssets'
-import { SortDirectionOptions, SortTermOptions } from '../models/SortAndFilters'
-import { FilterTerm } from '../models/aquarius/FilterTerm'
-import { BaseQueryParams } from '../models/aquarius/BaseQueryParams'
 
 export const MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS = 476
 

src/@utils/cleanupContentType.ts

@@ -1,4 +1,4 @@
-const cleanupContentType = (contentType: string): string => {
+export default function cleanupContentType(contentType: string): string {
   // strip away the `charset=utf-8`
   const contentSplit = contentType.split(';')[0]
   // strip away the 'application/' part
@@ -39,5 +39,3 @@ const cleanupContentType = (contentType: string): string => {
 
   return contentTypeCleaned
 }
-
-export default cleanupContentType

src/@utils/compute.ts

@@ -15,8 +15,6 @@ import { CancelToken } from 'axios'
 import { gql } from 'urql'
 import { queryMetadata, getFilterTerm, generateBaseQuery } from './aquarius'
 import { fetchDataForMultipleChains } from './subgraph'
-import { OrdersData_tokenOrders_datatokenId as OrdersDatatoken } from '../@types/apollo/OrdersData'
-import { BaseQueryParams } from '../models/aquarius/BaseQueryParams'
 
 const getComputeOrders = gql`
   query ComputeOrders($user: String!) {

src/@utils/index.ts

@@ -1,43 +1,6 @@
-export function updateQueryStringParameter(
-  uri: string,
-  key: string,
-  newValue: string
-): string {
-  const regex = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
-  const separator = uri.indexOf('?') !== -1 ? '&' : '?'
-
-  if (uri.match(regex)) {
-    return uri.replace(regex, '$1' + key + '=' + newValue + '$2')
-  } else {
-    return uri + separator + key + '=' + newValue
-  }
-}
-
-export function prettySize(
-  bytes: number,
-  separator = ' ',
-  postFix = ''
-): string {
-  if (bytes) {
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
-    const i = Math.min(
-      Math.floor(Math.log(bytes) / Math.log(1024)),
-      sizes.length - 1
-    )
-    return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)}${separator}${
-      sizes[i]
-    }${postFix}`
-  }
-  return 'n/a'
-}
-
 // Boolean value that will be true if we are inside a browser, false otherwise
 export const isBrowser = typeof window !== 'undefined'
 
-export function toStringNoMS(date: Date): string {
-  return date.toISOString().replace(/\.[0-9]{3}Z/, 'Z')
-}
-
 export function sleep(ms: number): Promise<void> {
   return new Promise((resolve) => {
     setTimeout(resolve, ms)

src/@utils/metadata.ts

@@ -1,11 +1,14 @@
 import axios from 'axios'
 import { toast } from 'react-toastify'
 import isUrl from 'is-url-superb'
-import { toStringNoMS } from '.'
 import slugify from '@sindresorhus/slugify'
 import { DDO, MetadataAlgorithm, Logger } from '@oceanprotocol/lib'
 import { FormPublishData } from '../components/Publish/_types'
 
+export function dateToStringNoMS(date: Date): string {
+  return date.toISOString().replace(/\.[0-9]{3}Z/, 'Z')
+}
+
 export function transformTags(value: string): string[] {
   const originalTags = value?.split(',')
   const transformedTags = originalTags?.map((tag) => slugify(tag).toLowerCase())
@@ -106,7 +109,7 @@ export function transformPublishFormToMetadata(
   }: Partial<FormPublishData>,
   ddo?: DDO
 ): MetadataMarket {
-  const currentTime = toStringNoMS(new Date())
+  const currentTime = dateToStringNoMS(new Date())
 
   const metadata: MetadataMarket = {
     main: {
@@ -204,7 +207,7 @@ export function transformPublishAlgorithmFormToMetadata(
   }: Partial<FormPublishData>,
   ddo?: DDO
 ): MetadataMarket {
-  const currentTime = toStringNoMS(new Date())
+  const currentTime = dateToStringNoMS(new Date())
   const fileUrl = typeof files !== 'string' && files[0].url
   const algorithmLanguage = getAlgorithmFileExtension(fileUrl)
   const algorithm = getAlgorithmComponent(

src/@utils/subgraph.ts

@@ -2,7 +2,6 @@ import { gql, OperationResult, TypedDocumentNode, OperationContext } from 'urql'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { getUrqlClientInstance } from '@context/UrqlProvider'
 import { getOceanConfig } from './ocean'
-import web3 from 'web3'
 import {
   AssetsPoolPrice,
   AssetsPoolPrice_pools as AssetsPoolPricePool

src/@utils/web3.ts

@@ -1,47 +1,7 @@
+import { getNetworkDisplayName } from '@hooks/useNetworkMetadata'
 import { Logger } from '@oceanprotocol/lib'
 import { getOceanConfig } from './ocean'
 
-export interface EthereumListsChain {
-  name: string
-  chainId: number
-  shortName: string
-  chain: string
-  network: string
-  networkId: number
-  nativeCurrency: { name: string; symbol: string; decimals: number }
-  rpc: string[]
-  infoURL: string
-  faucets: string[]
-  explorers: [{ url: string }]
-}
-
-export interface NetworkObject {
-  chainId: number
-  name: string
-  nativeCurrency: string
-  explorers: [{ url: string }]
-  urlList: string[]
-}
-
-const configGaiaX = getOceanConfig(2021000)
-
-export const networkDataGaiaX: EthereumListsChain = {
-  name: 'GAIA-X Testnet',
-  chainId: 2021000,
-  shortName: 'GAIA-X',
-  chain: 'GAIA-X',
-  network: 'testnet',
-  networkId: 2021000,
-  nativeCurrency: { name: 'Gaia-X', symbol: 'GX', decimals: 18 },
-  rpc: [configGaiaX.nodeUri],
-  faucets: [
-    'https://faucet.gaiaxtestnet.oceanprotocol.com/',
-    'https://faucet.gx.gaiaxtestnet.oceanprotocol.com/'
-  ],
-  infoURL: 'https://www.gaia-x.eu',
-  explorers: [{ url: '' }]
-}
-
 export function accountTruncate(account: string): string {
   if (!account) return
   const middle = account.substring(6, 38)
@@ -49,50 +9,6 @@ export function accountTruncate(account: string): string {
   return truncated
 }
 
-export function getNetworkDisplayName(
-  data: EthereumListsChain,
-  networkId: number
-): string {
-  let displayName
-
-  switch (networkId) {
-    case 137:
-      displayName = 'Polygon'
-      break
-    case 1287:
-      displayName = 'Moonbase Alpha'
-      break
-    case 1285:
-      displayName = 'Moonriver'
-      break
-    case 80001:
-      displayName = 'Polygon Mumbai'
-      break
-    case 8996:
-      displayName = 'Development'
-      break
-    default:
-      displayName = data
-        ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}`
-        : 'Unknown'
-      break
-  }
-
-  return displayName
-}
-
-export function getNetworkDataById(
-  data: { node: EthereumListsChain }[],
-  networkId: number
-): EthereumListsChain {
-  if (!networkId) return
-  const networkData = data.filter(
-    ({ node }: { node: EthereumListsChain }) => node.chainId === networkId
-  )
-
-  return networkId === 2021000 ? networkDataGaiaX : networkData[0]?.node
-}
-
 export async function addCustomNetwork(
   web3Provider: any,
   network: EthereumListsChain

src/components/@shared/AssetList/AssetList.tsx

@@ -5,7 +5,7 @@ import styles from './AssetList.module.css'
 import { DDO } from '@oceanprotocol/lib'
 import classNames from 'classnames/bind'
 import { getAssetsBestPrices, AssetListPrices } from '@utils/subgraph'
-import Loader from '../atoms/Loader'
+import Loader from '@shared/atoms/Loader'
 import { useUserPreferences } from '@context/UserPreferences'
 import { useIsMounted } from '@hooks/useIsMounted'
 

src/components/@shared/Form/FormFields/FilesInput/Info.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
-import { prettySize } from '@utils/index'
+import { prettySize } from './utils'
 import cleanupContentType from '@utils/cleanupContentType'
 import styles from './Info.module.css'
 import { useField, useFormikContext } from 'formik'

src/components/@shared/Form/FormFields/FilesInput/utils.ts

@@ -0,0 +1,17 @@
+export function prettySize(
+  bytes: number,
+  separator = ' ',
+  postFix = ''
+): string {
+  if (bytes) {
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.min(
+      Math.floor(Math.log(bytes) / Math.log(1024)),
+      sizes.length - 1
+    )
+    return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)}${separator}${
+      sizes[i]
+    }${postFix}`
+  }
+  return 'n/a'
+}

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

@@ -1,7 +1,9 @@
 import React, { ReactElement } from 'react'
-import { getNetworkDataById, getNetworkDisplayName } from '@utils/web3'
 import styles from './index.module.css'
-import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import useNetworkMetadata, {
+  getNetworkDataById,
+  getNetworkDisplayName
+} from '@hooks/useNetworkMetadata'
 import { NetworkIcon } from './NetworkIcon'
 
 export default function NetworkName({

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

@@ -1,13 +1,12 @@
 import React, { ReactElement } from 'react'
 import { useWeb3 } from '@context/Web3'
-import {
+import { addCustomNetwork } from '@utils/web3'
-  addCustomNetwork,
-  getNetworkDisplayName,
-  getNetworkDataById
-} from '@utils/web3'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
-import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import useNetworkMetadata, {
+  getNetworkDataById,
+  getNetworkDisplayName
+} from '@hooks/useNetworkMetadata'
 import { useAsset } from '@context/Asset'
 
 export default function WalletNetworkSwitcher(): ReactElement {

src/components/App/ContextProviders.tsx

@@ -5,7 +5,8 @@ import PricesProvider from '@context/Prices'
 import UrqlProvider from '@context/UrqlProvider'
 import ConsentProvider from '@context/CookieConsent'
 
-export default function wrapRootElement({
+// Referenced in gatsby-browser.js & gatsby-ssr.js
+export default function ContextProviders({
   element
 }: {
   element: ReactElement

src/components/App/index.module.css

@@ -1,7 +1,6 @@
 .app {
   height: 100%;
-  background: url('../../node_modules/@oceanprotocol/art/waves/waves.svg')
+  background: url('@oceanprotocol/art/waves/waves.svg') no-repeat center 13.5rem;
-    no-repeat center 13.5rem;
 
   /* sticky footer technique */
   display: flex;

src/components/App/index.tsx

@@ -1,15 +1,15 @@
 import React, { ReactElement } from 'react'
 import { graphql, PageProps, useStaticQuery } from 'gatsby'
 import Alert from '@shared/atoms/Alert'
-import Footer from './Footer/Footer'
+import Footer from '../Footer/Footer'
-import Header from './Header'
+import Header from '../Header'
-import StylesGlobal from '../stylesGlobal/StylesGlobal'
+import StylesGlobal from '../../stylesGlobal/StylesGlobal'
 import { useWeb3 } from '@context/Web3'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import AnnouncementBanner from '@shared/AnnouncementBanner'
-import PrivacyPreferenceCenter from './Privacy/PrivacyPreferenceCenter'
+import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
-import styles from './App.module.css'
+import styles from './index.module.css'
 
 const contentQuery = graphql`
   query AppQuery {

src/components/App/wrapPageElement.tsx

@@ -1,7 +1,8 @@
 import { PageProps } from 'gatsby'
 import React, { ReactElement } from 'react'
-import App from './App'
+import App from '.'
 
+// Gatsby-specific, referenced in gatsby-browser.js & gatsby-ssr.js
 const wrapPageElement = ({
   element,
   props

src/components/Asset/AssetActions/AssetActionHistoryTable.tsx

@@ -12,6 +12,7 @@ export default function AssetActionHistoryTable({
   children: ReactNode
 }): ReactElement {
   const [open, setOpen] = useState(false)
+
   function handleClick() {
     setOpen(!open)
   }

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

@@ -17,6 +17,7 @@ import { useAsset } from '@context/Asset'
 import {
   generateBaseQuery,
   getFilterTerm,
+  queryMetadata,
   transformDDOToAssetSelection
 } from '@utils/aquarius'
 import { Formik } from 'formik'
@@ -29,7 +30,6 @@ import axios from 'axios'
 import FormStartComputeDataset from './FormComputeDataset'
 import styles from './index.module.css'
 import SuccessConfetti from '@shared/SuccessConfetti'
-import Button from '@shared/atoms/Button'
 import { secondsToString } from '@utils/metadata'
 import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
 import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
@@ -38,15 +38,6 @@ import AssetActionHistoryTable from '../AssetActionHistoryTable'
 import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'
-import { BaseQueryParams } from '../../../../models/aquarius/BaseQueryParams'
-import { SortTermOptions } from '../../../../models/SortAndFilters'
-import { SearchQuery } from '../../../../models/aquarius/SearchQuery'
-
-const SuccessAction = () => (
-  <Button style="text" to="/profile?defaultTab=ComputeJobs" size="small">
-    Go to history →
-  </Button>
-)
 
 export default function Compute({
   dtBalance,

src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx

@@ -15,8 +15,6 @@ import { publisherTrustedAlgorithm as PublisherTrustedAlgorithm } from '@oceanpr
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import FormActions from './FormActions'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { BaseQueryParams } from '../../../../models/aquarius/BaseQueryParams'
-import { SortTermOptions } from '../../../../models/SortAndFilters'
 
 export default function FormEditComputeDataset({
   data,

src/components/Asset/AssetContent/index.tsx

@@ -17,7 +17,6 @@ import MetaMain from './MetaMain'
 import EditHistory from './EditHistory'
 import { useWeb3 } from '@context/Web3'
 import styles from './index.module.css'
-import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import NetworkName from '@shared/NetworkName'
 
 export interface AssetContentProps {
@@ -51,11 +50,8 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   const [showEdit, setShowEdit] = useState<boolean>()
   const [isComputeType, setIsComputeType] = useState<boolean>(false)
   const [showEditCompute, setShowEditCompute] = useState<boolean>()
-  const [showEditAdvancedSettings, setShowEditAdvancedSettings] =
-    useState<boolean>()
   const [isOwner, setIsOwner] = useState(false)
   const { ddo, price, metadata, type } = useAsset()
-  const { appConfig } = useSiteMetadata()
 
   useEffect(() => {
     if (!accountId || !owner) return

src/components/Footer/MarketStats.tsx

@@ -6,10 +6,11 @@ import Tooltip from '@shared/atoms/Tooltip'
 import NetworkName from '@shared/NetworkName'
 import { fetchData, getSubgraphUri } from '@utils/subgraph'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import useNetworkMetadata, {
+  filterNetworksByType
+} from '@hooks/useNetworkMetadata'
 import { Logger } from '@oceanprotocol/lib'
 import styles from './MarketStats.module.css'
-import { filterNetworksByType } from '../Header/UserPreferences/Networks'
 
 const getTotalPoolsValues = gql`
   query PoolsData {

src/components/Header/Menu.tsx

@@ -2,13 +2,13 @@ import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import { useLocation } from '@reach/router'
 import loadable from '@loadable/component'
-import styles from './Menu.module.css'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import UserPreferences from './UserPreferences'
 import Badge from '@shared/atoms/Badge'
 import Logo from '@shared/atoms/Logo'
+import UserPreferences from './UserPreferences'
 import Networks from './UserPreferences/Networks'
 import SearchBar from './SearchBar'
+import styles from './Menu.module.css'
 
 const Wallet = loadable(() => import('./Wallet'))
 

src/components/Header/UserPreferences/Networks/index.tsx

@@ -2,39 +2,17 @@ import React, { ReactElement } from 'react'
 import Label from '@shared/Form/Input/Label'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import FormHelp from '@shared/Form/Input/Help'
-import { EthereumListsChain, getNetworkDataById } from '@utils/web3'
 import Tooltip from '@shared/atoms/Tooltip'
 import { ReactComponent as Caret } from '@images/caret.svg'
 import { ReactComponent as Network } from '@images/network.svg'
 import NetworksList from './NetworksList'
 import stylesIndex from '../index.module.css'
 import styles from './index.module.css'
-import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import useNetworkMetadata, {
+  filterNetworksByType
+} from '@hooks/useNetworkMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
 
-export function filterNetworksByType(
-  type: 'mainnet' | 'testnet',
-  chainIds: number[],
-  networksList: { node: EthereumListsChain }[]
-): number[] {
-  const finalNetworks = chainIds.filter((chainId: number) => {
-    const networkData = getNetworkDataById(networksList, chainId)
-
-    // HEADS UP! Only networkData.network === 'mainnet' is consistent
-    // while not every test network in the network data has 'testnet'
-    // in its place. So for the 'testnet' case filter for all non-'mainnet'.
-    //
-    // HEADS UP NO. 2! We hack in mainnet detection for moonriver as their
-    // network data uses the `network` key wrong over in
-    // https://github.com/ethereum-lists/chains/blob/master/_data/chains/eip155-1285.json
-    //
-    return type === 'mainnet'
-      ? networkData.network === type || networkData.network === 'moonriver'
-      : networkData.network !== 'mainnet' && networkData.network !== 'moonriver'
-  })
-  return finalNetworks
-}
-
 export default function Networks(): ReactElement {
   const { networksList } = useNetworkMetadata()
   const { appConfig } = useSiteMetadata()

src/components/Header/Wallet/Details.tsx

@@ -5,10 +5,9 @@ import Button from '@shared/atoms/Button'
 import AddToken from '@shared/AddToken'
 import Conversion from '@shared/Price/Conversion'
 import { useWeb3 } from '@context/Web3'
-
-import styles from './Details.module.css'
 import { getOceanConfig } from '@utils/ocean'
 import Web3Feedback from '@shared/Web3Feedback'
+import styles from './Details.module.css'
 
 export default function Details(): ReactElement {
   const {

src/components/Home/Bookmarks.tsx

@@ -11,19 +11,6 @@ import { CancelToken } from 'axios'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useCancelToken } from '@hooks/useCancelToken'
 
-async function getAssetsBookmarked(
-  bookmarks: string[],
-  chainIds: number[],
-  cancelToken: CancelToken
-) {
-  try {
-    const result = await retrieveDDOListByDIDs(bookmarks, chainIds, cancelToken)
-    return result
-  } catch (error) {
-    Logger.error(error.message)
-  }
-}
-
 const columns = [
   {
     name: 'Data Set',

src/components/Home/Home.tsx

@@ -13,10 +13,7 @@ import { useUserPreferences } from '@context/UserPreferences'
 import styles from './Home.module.css'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { SearchQuery } from '../../models/aquarius/SearchQuery'
+import { SortOptions, SortTermOptions } from '../../@types/aquarius/SearchQuery'
-import { SortOptions, SortTermOptions } from '../../models/SortAndFilters'
-import { BaseQueryParams } from '../../models/aquarius/BaseQueryParams'
-import { PagedAssets } from '../../models/PagedAssets'
 
 async function getQueryHighest(
   chainIds: number[]
@@ -153,7 +150,5 @@ export default function HomePage(): ReactElement {
         />
       )}
     </>
-
-
   )
 }

src/components/Profile/History/Downloads.tsx

@@ -4,7 +4,7 @@ import Time from '@shared/atoms/Time'
 import AssetTitle from '@shared/AssetList/AssetListTitle'
 import NetworkName from '@shared/NetworkName'
 import { useProfile } from '@context/Profile'
-import { DownloadedAsset } from '@utils/aquarius'
+
 const columns = [
   {
     name: 'Data Set',

src/components/Profile/History/PublishedList.tsx

@@ -6,7 +6,7 @@ import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useUserPreferences } from '@context/UserPreferences'
 import styles from './PublishedList.module.css'
 import { useCancelToken } from '@hooks/useCancelToken'
-import { PagedAssets } from '../../../../models/PagedAssets'
+import Filters from '../../Search/Filters'
 
 export default function PublishedList({
   accountId

src/components/Search/Filters.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import classNames from 'classnames/bind'
 import { addExistingParamsToUrl } from './utils'
+import Button from '@shared/atoms/Button'
+import styles from './Filters.module.css'
 import {
   FilterByAccessOptions,
   FilterByTypeOptions
-} from '../../../models/SortAndFilters'
+} from '../../@types/aquarius/SearchQuery'
-import Button from '@shared/atoms/Button'
-import styles from './Filters.module.css'
 
 const cx = classNames.bind(styles)
 

src/components/Search/index.tsx

@@ -3,13 +3,11 @@ import AssetList from '@shared/AssetList/AssetList'
 import queryString from 'query-string'
 import Filters from './Filters'
 import Sort from './sort'
-import { getResults } from './utils'
+import { getResults, updateQueryStringParameter } from './utils'
 import { navigate } from 'gatsby'
-import { updateQueryStringParameter } from '@utils/index'
 import { useUserPreferences } from '@context/UserPreferences'
 import { useCancelToken } from '@hooks/useCancelToken'
 import styles from './index.module.css'
-import { PagedAssets } from '../../../models/PagedAssets'
 
 export default function SearchPage({
   location,

src/components/Search/sort.tsx

@@ -7,7 +7,7 @@ import classNames from 'classnames/bind'
 import {
   SortDirectionOptions,
   SortTermOptions
-} from '../../../models/SortAndFilters'
+} from '../../@types/aquarius/SearchQuery'
 
 const cx = classNames.bind(styles)
 

src/components/Search/utils.ts

@@ -6,13 +6,25 @@ import {
 } from '@utils/aquarius'
 import queryString from 'query-string'
 import { CancelToken } from 'axios'
-import { BaseQueryParams } from '../../../models/aquarius/BaseQueryParams'
-import { SearchQuery } from '../../../models/aquarius/SearchQuery'
-import { FilterTerm } from '../../../models/aquarius/FilterTerm'
 import {
   SortDirectionOptions,
   SortTermOptions
-} from '../../../models/SortAndFilters'
+} from '../../@types/aquarius/SearchQuery'
+
+export function updateQueryStringParameter(
+  uri: string,
+  key: string,
+  newValue: string
+): string {
+  const regex = new RegExp('([?&])' + key + '=.*?(&|$)', 'i')
+  const separator = uri.indexOf('?') !== -1 ? '&' : '?'
+
+  if (uri.match(regex)) {
+    return uri.replace(regex, '$1' + key + '=' + newValue + '$2')
+  } else {
+    return uri + separator + key + '=' + newValue
+  }
+}
 
 export function escapeESReservedChars(text: string): string {
   return text?.replace(/([!*+\-=<>&|()\\[\]{}^~?:\\/"])/g, '\\$1')

src/models/PagedAssets.ts

@@ -1,8 +0,0 @@
-import { DDO } from '@oceanprotocol/lib'
-
-export interface PagedAssets {
-  results: DDO[]
-  page: number
-  totalPages: number
-  totalResults: number
-}

src/models/SortAndFilters.ts

@@ -1,26 +0,0 @@
-export enum SortDirectionOptions {
-  Ascending = 'asc',
-  Descending = 'desc'
-}
-
-export enum SortTermOptions {
-  Created = 'created',
-  Relevance = '_score'
-}
-
-export enum FilterByTypeOptions {
-  Data = 'dataset',
-  Algorithm = 'algorithm'
-}
-
-export enum FilterByAccessOptions {
-  Download = 'access',
-  Compute = 'compute'
-}
-
-export interface SortOptions {
-  sortBy: SortTermOptions
-  sortDirection?: SortDirectionOptions
-}
-
-export type Filters = FilterByTypeOptions | FilterByAccessOptions

src/models/aquarius/BaseQueryParams.ts

@@ -1,12 +0,0 @@
-import { SortOptions } from '../SortAndFilters'
-import { EsPaginationOptions } from './EsPaginationOptions'
-import { FilterTerm } from './FilterTerm'
-
-export interface BaseQueryParams {
-  chainIds: number[]
-  nestedQuery?: any
-  esPaginationOptions?: EsPaginationOptions
-  sortOptions?: SortOptions
-  filters?: FilterTerm[]
-  ignorePurgatory?: boolean
-}

src/models/aquarius/DownloadedAsset.ts

@@ -1,8 +0,0 @@
-import { DDO } from '@oceanprotocol/lib'
-
-export interface DownloadedAsset {
-  dtSymbol: string
-  timestamp: number
-  networkId: number
-  ddo: DDO
-}

src/models/aquarius/EsPaginationOptions.ts

@@ -1,4 +0,0 @@
-export interface EsPaginationOptions {
-  from?: number
-  size?: number
-}

src/models/aquarius/FilterTerm.ts

@@ -1,5 +0,0 @@
-export interface FilterTerm {
-  [property: string]: {
-    [property: string]: string | number | boolean | number[] | string[]
-  }
-}

src/models/aquarius/SearchQuery.ts

@@ -1,8 +0,0 @@
-import { SortDirectionOptions } from '../SortAndFilters'
-export interface SearchQuery {
-  from?: number
-  size?: number
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  query: any
-  sort?: { [jsonPath: string]: SortDirectionOptions }
-}

src/models/aquarius/SearchResponse.ts

@@ -1,41 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable camelcase */
-import { DDO } from '@oceanprotocol/lib'
-
-export interface Explanation {
-  value: number
-  description: string
-  details: Explanation[]
-}
-export interface ShardsResponse {
-  total: number
-  successful: number
-  failed: number
-  skipped: number
-}
-
-export interface SearchResponse {
-  took: number
-  timed_out: boolean
-  _scroll_id?: string | undefined
-  _shards: ShardsResponse
-  hits: {
-    total: number
-    max_score: number
-    hits: Array<{
-      _index: string
-      _type: string
-      _id: string
-      _score: number
-      _source: DDO
-      _version?: number | undefined
-      _explanation?: Explanation | undefined
-      fields?: any
-      highlight?: any
-      inner_hits?: any
-      matched_queries?: string[] | undefined
-      sort?: string[] | undefined
-    }>
-  }
-  aggregations?: any
-}

vercel.json

@@ -1 +1,6 @@
-{ "rewrites": [{ "source": "/asset/:did", "destination": "/asset/" }] }
+{
+  "rewrites": [
+    { "source": "/asset/:did", "destination": "/asset/" },
+    { "source": "/profile/:account", "destination": "/profile/" }
+  ]
+}