reorganize all the things

.storybook/helpers.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-export const Center = ({ children }: { children: any }) => (
-  <div
-    style={{
-      height: '100vh',
-      maxWidth: '35rem',
-      margin: 'auto',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  >
-    {children}
-  </div>
-)

.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../src/**/*.stories.tsx', '../tests/**/*.stories.tsx']
-}

.storybook/preview.js

@@ -1,44 +0,0 @@
-import React from 'react'
-import { addDecorator } from '@storybook/react'
-import {
-  createHistory,
-  createMemorySource,
-  LocationProvider
-} from '@reach/router'
-
-// Import global css with custom properties once for all stories.
-import '@oceanprotocol/typographies/css/ocean-typo.css'
-import '../src/global/styles.css'
-
-// Wrapper for all stories previews
-const history = createHistory(createMemorySource('/'))
-
-addDecorator((storyFn) => (
-  <LocationProvider history={history}>
-    <div
-      style={{
-        minHeight: '100vh',
-        width: '100%',
-        padding: '2rem'
-      }}
-    >
-      {storyFn()}
-    </div>
-  </LocationProvider>
-))
-
-// Gatsby's Link overrides:
-// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
-global.___loader = {
-  enqueue: () => {},
-  hovering: () => {}
-}
-
-// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
-global.__PATH_PREFIX__ = ''
-global.__BASE_PATH__ = ''
-
-// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
-window.___navigate = (pathname) => {
-  action('NavigateTo:')(pathname)
-}

.storybook/webpack.config.js

@@ -1,103 +0,0 @@
-// https://www.gatsbyjs.org/docs/visual-testing-with-storybook/
-
-// Make CSS modules work
-// https://github.com/storybookjs/storybook/issues/4306#issuecomment-517951264
-const setCssModulesRule = (rule) => {
-  const nextRule = rule
-  const cssLoader = rule.use[1]
-
-  const nextOptions = {
-    ...cssLoader.options,
-    modules: {
-      localIdentName: '[name]__[local]___[hash:base64:5]'
-    }
-  }
-
-  cssLoader.options = nextOptions
-  return nextRule
-}
-
-module.exports = ({ config }) => {
-  const cssRules = config.module.rules.map((rule) => {
-    const isCssRule = rule.test.toString().indexOf('css') !== -1
-    let nextRule = rule
-
-    if (isCssRule) {
-      nextRule = setCssModulesRule(rule)
-    }
-    return nextRule
-  })
-
-  config.module.rules = cssRules
-
-  // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
-  config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
-  // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
-  config.module.rules[0].use[0].loader = require.resolve('babel-loader')
-
-  // use @babel/preset-react for JSX and env (instead of staged presets)
-  config.module.rules[0].use[0].options.presets = [
-    require.resolve('@babel/preset-react'),
-    require.resolve('@babel/preset-env')
-  ]
-  config.module.rules[0].use[0].options.plugins = [
-    // use @babel/plugin-proposal-class-properties for class arrow functions
-    require.resolve('@babel/plugin-proposal-class-properties'),
-    // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-    require.resolve('babel-plugin-remove-graphql-queries')
-  ]
-  // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
-  config.resolve.mainFields = ['browser', 'module', 'main']
-
-  // Handle TypeScript
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    loader: require.resolve('babel-loader'),
-    options: {
-      presets: [['react-app', { flow: false, typescript: true }]],
-      plugins: [
-        require.resolve('@babel/plugin-proposal-class-properties'),
-        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
-        require.resolve('babel-plugin-remove-graphql-queries')
-      ]
-    }
-  })
-
-  config.resolve.extensions.push('.ts', '.tsx')
-
-  // 'fs' fix for squid.js
-  config.node = {
-    fs: 'empty'
-  }
-
-  // Handle SVGs
-  // Don't use Storybook's default SVG Configuration
-  config.module.rules = config.module.rules.map((rule) => {
-    if (rule.test.toString().includes('svg')) {
-      const test = rule.test.toString().replace('svg|', '').replace(/\//g, '')
-      return { ...rule, test: new RegExp(test) }
-    } else {
-      return rule
-    }
-  })
-
-  // Use SVG Configuration for SVGR yourself
-  config.module.rules.push({
-    test: /\.svg$/,
-    use: [
-      {
-        loader: '@svgr/webpack',
-        options: {
-          svgoConfig: {
-            plugins: {
-              removeViewBox: false
-            }
-          }
-        }
-      },
-      'url-loader'
-    ]
-  })
-
-  return config
-}

app.config.js

@@ -15,7 +15,7 @@ module.exports = {
   // List of all supported chainIds. Used to populate the Chains user preferences list.
   chainIdsSupported: [1, 3, 4, 137, 80001, 1287, 56, 2021000, 1285, 246],
 
-  rbacUrl: process.env.GATSBY_RBAC_URL,
+  rbacUrl: process.env.GATSBY_RBAC_URL || '',
 
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
 

content/pages/editAdvancedSettings.json

@@ -1,31 +0,0 @@
-{
-  "description": "Update advanced settings of this data set. Updating these settings will create an on-chain transaction you have to approve in your wallet.",
-  "form": {
-    "success": "🎉 Successfully updated. 🎉",
-    "successAction": "Close",
-    "error": "Updating DDO failed.",
-    "data": [
-      {
-        "name": "allow",
-        "label": "Allow ETH Address",
-        "placeholder": "e.g. 0x12345678901234567890abcd",
-        "help": "Enter ETH address and click ADD button to append the list. Only ETH address in allow list can consume this asset. If the list is empty means anyone can download or compute this asset",
-        "type": "credentials"
-      },
-      {
-        "name": "deny",
-        "label": "Deny ETH Address",
-        "placeholder": "e.g. 0x12345678901234567890abcd",
-        "help": "Enter ETH address and click ADD button to append the list. If ETH address is fall under deny list, download or compute of this asset is denied",
-        "type": "credentials"
-      },
-      {
-        "name": "isOrderDisabled",
-        "label": "Disable Consumption",
-        "help": "Disable dataset being download or compute when dataset undergoing maintenance.",
-        "type": "checkbox",
-        "options": ["Disable"]
-      }
-    ]
-  }
-}

gatsby-browser.js

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

gatsby-node.js

@@ -1,6 +1,7 @@
 const createFields = require('./gatsby/createFields')
 const createMarkdownPages = require('./gatsby/createMarkdownPages')
 const execSync = require('child_process').execSync
+const path = require('path')
 
 // Write out repo metadata
 execSync(`node ./scripts/write-repo-metadata > repo-metadata.json`, {
@@ -73,6 +74,15 @@ exports.onCreatePage = async ({ page, actions }) => {
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        '@shared': path.resolve(__dirname, 'src/components/@shared'),
+        '@hooks': path.resolve(__dirname, 'src/hooks'),
+        '@context': path.resolve(__dirname, 'src/context'),
+        '@images': path.resolve(__dirname, 'src/images'),
+        '@utils': path.resolve(__dirname, 'src/utils')
+      }
+    },
     node: {
       // 'fs' fix for ocean.js
       fs: 'empty'

gatsby-ssr.js

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

gatsby/createMarkdownPages.js

@@ -4,7 +4,7 @@ async function createMarkdownPages(graphql, actions) {
   const { createPage } = actions
 
   const markdownPageTemplate = path.resolve(
-    './src/components/templates/PageMarkdown.tsx'
+    './src/components/@shared/Page/PageMarkdown.tsx'
   )
   // Grab all markdown files with a frontmatter title defined
   const markdownResult = await graphql(`

package.json

@@ -8,16 +8,12 @@
     "start": "gatsby develop --host 0.0.0.0",
     "build": "gatsby build && cp _redirects public/_redirects",
     "serve": "serve -s public/",
-    "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
-    "test-graphql": "npm run graphql:graphTypes && npm run lint && npm run jest",
-    "test": "npm run apollo:codegen && npm run lint && npm run jest",
-    "test:watch": "npm run lint && npm run jest -- --watch",
+    "test-graphql": "npm run graphql:graphTypes && npm run lint",
+    "test": "npm run apollo:codegen && npm run lint",
     "lint": "npm run write:repoMetadata && eslint --ignore-path .gitignore --ext .js --ext .ts --ext .tsx . && npm run type-check",
     "format": "prettier --ignore-path .gitignore './**/*.{css,yml,js,ts,tsx,json}' --write",
     "type-check": "tsc --noEmit",
     "analyze": "npm run build && source-map-explorer 'public/*.js'",
-    "storybook": "start-storybook -p 4000 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o public/storybook",
     "write:repoMetadata": "node ./scripts/write-repo-metadata > repo-metadata.json",
     "deploy:s3": "./scripts/deploy-s3.sh",
     "postinstall": "husky install",
@@ -100,8 +96,6 @@
     "@graphql-codegen/typescript-operations": "^1.18.3",
     "@graphql-codegen/typescript-react-apollo": "2.3.0",
     "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
     "@types/chart.js": "^2.9.32",
     "@types/jest": "^26.0.23",
     "@types/js-cookie": "^2.2.7",
@@ -127,8 +121,6 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
     "serve": "^11.3.2",

src/@types/Compute.d.ts

@@ -0,0 +1,21 @@
+import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
+
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface ComputeJobMetaData extends ComputeJob {
+    assetName: string
+    assetDtSymbol: string
+    networkId: number
+  }
+
+  interface AlgorithmOption {
+    did: string
+    name: string
+  }
+
+  interface ComputePrivacyForm {
+    allowAllPublishedAlgorithms: boolean
+    publisherTrustedAlgorithms: string[]
+  }
+}

src/@types/ComputeDataset.ts

@@ -1,4 +0,0 @@
-export interface AlgorithmOption {
-  did: string
-  name: string
-}

src/@types/ComputeJobMetaData.d.ts

@@ -1,7 +0,0 @@
-import { ComputeJob } from '@oceanprotocol/lib/dist/node/ocean/interfaces/Compute'
-
-export interface ComputeJobMetaData extends ComputeJob {
-  assetName: string
-  assetDtSymbol: string
-  networkId: number
-}

src/@types/Form.d.ts

@@ -1,6 +1,9 @@
-import { AssetSelectionAsset } from '../../molecules/FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
 
-export interface FormFieldProps {
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface FormFieldProps {
     label: string
     name: string
     type?: string
@@ -16,11 +19,12 @@ export interface FormFieldProps {
     disclaimer?: string
     disclaimerValues?: string[]
     advanced?: boolean
-}
+  }
 
-export interface FormContent {
+  interface FormContent {
     title: string
     description?: string
     success: string
     data: FormFieldProps[]
+  }
 }

src/@types/MetaData.d.ts

@@ -1,74 +1,29 @@
 import {
   Metadata,
-  File,
   AdditionalInformation,
-  ServiceMetadata
+  EditableMetadataLinks
 } from '@oceanprotocol/lib'
-import { DataTokenOptions } from '../hooks/usePublish'
-import { PriceOptions } from '../hooks/usePricing'
 
-export interface AdditionalInformationMarket extends AdditionalInformation {
-  links?: File[]
+// declaring into global scope to be able to use this as
+// ambiant types despite the above imports
+declare global {
+  interface AdditionalInformationMarket extends AdditionalInformation {
     termsAndConditions: boolean
-}
+  }
 
-export interface MetadataMarket extends Metadata {
+  interface MetadataMarket extends Metadata {
     // While required for this market, Aquarius/Plecos will keep this as optional
     // allowing external pushes of assets without `additionalInformation`.
     // Making it optional here helps safeguarding against those assets.
     additionalInformation?: AdditionalInformationMarket
-}
+  }
 
-export interface PriceOptionsMarket extends PriceOptions {
-  weightOnOcean: string
-  // easier to keep this as number for Yup input validation
-  swapFee: number
-}
-
-export interface MetadataPublishFormDataset {
-  // ---- required fields ----
-  name: string
-  description: string
-  files: string | File[]
-  author: string
-  timeout: string
-  dataTokenOptions: DataTokenOptions
-  access: 'Download' | 'Compute' | string
-  termsAndConditions: boolean
-  // ---- optional fields ----
-  tags?: string
-  links?: string | EditableMetadataLinks[]
-  providerUri?: string
-}
-
-export interface MetadataPublishFormAlgorithm {
-  // ---- required fields ----
-  name: string
-  description: string
-  files: string | File[]
-  author: string
-  dockerImage: string
-  algorithmPrivacy: boolean
-  timeout: string
-  dataTokenOptions: DataTokenOptions
-  termsAndConditions: boolean
-  // ---- optional fields ----
-  image: string
-  containerTag: string
-  entrypoint: string
-  tags?: string
-  providerUri?: string
-}
-
-export interface MetadataEditForm {
+  interface MetadataEditForm {
     name: string
     description: string
     timeout: string
     price?: number
     links?: string | EditableMetadataLinks[]
     author?: string
-}
-
-export interface ServiceMetadataMarket extends ServiceMetadata {
-  attributes: MetadataMarket
+  }
 }

src/@types/Price.d.ts

@@ -0,0 +1,23 @@
+interface BestPrice {
+  type: 'pool' | 'exchange' | 'free' | ''
+  address: string
+  value: number
+  isConsumable?: 'true' | 'false' | ''
+  ocean?: number
+  oceanSymbol?: string
+  datatoken?: number
+  datatokenSymbol?: string
+  exchangeId?: string
+  pools: string[]
+}
+
+interface PriceOptions {
+  price: number
+  dtAmount: number
+  oceanAmount: number
+  type: 'fixed' | 'dynamic' | 'free' | string
+  weightOnDataToken: string
+  weightOnOcean: string
+  // easier to keep this as number for Yup input validation
+  swapFee: number
+}

src/@types/Profile.d.ts

@@ -1,9 +1,9 @@
-export interface ProfileLink {
+interface ProfileLink {
   name: string
   value: string
 }
 
-export interface Profile {
+interface Profile {
   did?: string
   name?: string
   accountEns?: string
@@ -13,7 +13,7 @@ export interface Profile {
   links?: ProfileLink[]
 }
 
-export interface ResponseData3Box {
+interface ResponseData3Box {
   name: string
   description: string
   website: string

src/@types/TokenBalance.d.ts

@@ -1,9 +1,9 @@
-export interface PoolBalance {
+interface PoolBalance {
   ocean: string
   datatoken: string
 }
 
-export interface UserBalance {
+interface UserBalance {
   eth: string
   ocean: string
 }

src/components/@shared/AssetActionHistoryTable.module.css

@@ -1,5 +1,5 @@
 .actions {
-  composes: container from './AssetActions/Pool/index.module.css';
+  /* composes: container from './AssetActions/Pool/index.module.css'; */
   border-top: 1px solid var(--border-color);
   margin-top: calc(var(--spacer) / 1.5);
   padding: calc(var(--spacer) / 1.5);
@@ -12,7 +12,7 @@
 }
 
 .title {
-  composes: title from './AssetActions/Pool/index.module.css';
+  /* composes: title from './AssetActions/Pool/index.module.css'; */
   margin-bottom: 0;
   display: flex;
   align-items: center;

src/components/@shared/AssetActionHistoryTable.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState } from 'react'
-import Button from '../atoms/Button'
+import Button from '@shared/atoms/Button'
 import styles from './AssetActionHistoryTable.module.css'
-import { ReactComponent as Caret } from '../../images/caret.svg'
+import { ReactComponent as Caret } from '@images/caret.svg'
 import { ReactNode } from 'react-markdown'
 
 export default function AssetActionHistoryTable({

src/components/@shared/AssetList/AssetComputeList.module.css

@@ -1,5 +1,5 @@
 .display {
-  composes: selection from './FormFields/AssetSelection.module.css';
+  composes: selection from '@shared/Form/FormFields/AssetSelection.module.css';
 }
 
 .display [class*='loaderWrap'] {
@@ -7,14 +7,14 @@
 }
 
 .scroll {
-  composes: scroll from './FormFields/AssetSelection.module.css';
+  composes: scroll from '@shared/Form/FormFields/AssetSelection.module.css';
   margin-top: 0;
   border-top: none;
   width: 100%;
 }
 
 .row {
-  composes: row from './FormFields/AssetSelection.module.css';
+  composes: row from '@shared/Form/FormFields/AssetSelection.module.css';
 }
 
 .row:last-child {
@@ -35,7 +35,7 @@
 }
 
 .title {
-  composes: title from './FormFields/AssetSelection.module.css';
+  composes: title from '@shared/Form/FormFields/AssetSelection.module.css';
 }
 
 .hover:hover {
@@ -43,7 +43,7 @@
 }
 
 .price {
-  composes: price from './FormFields/AssetSelection.module.css';
+  composes: price from '@shared/Form/FormFields/AssetSelection.module.css';
 }
 
 .price [class*='symbol'] {
@@ -51,9 +51,9 @@
 }
 
 .did {
-  composes: did from './FormFields/AssetSelection.module.css';
+  composes: did from '@shared/Form/FormFields/AssetSelection.module.css';
 }
 
 .empty {
-  composes: empty from './FormFields/AssetSelection.module.css';
+  composes: empty from '@shared/Form/FormFields/AssetSelection.module.css';
 }

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

@@ -1,10 +1,10 @@
 import React from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import { Link } from 'gatsby'
-import PriceUnit from '../atoms/Price/PriceUnit'
-import Loader from '../atoms/Loader'
+import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import Loader from '@shared/atoms/Loader'
 import styles from './AssetComputeList.module.css'
-import { AssetSelectionAsset } from './FormFields/AssetSelection'
+import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
 
 function Empty() {
   return <div className={styles.empty}>No assets found.</div>

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

@@ -1,13 +1,13 @@
-import AssetTeaser from '../molecules/AssetTeaser'
+import AssetTeaser from '@shared/AssetTeaser/AssetTeaser'
 import React, { useEffect, useState } from 'react'
-import Pagination from '../molecules/Pagination'
+import Pagination from '@shared/Pagination'
 import styles from './AssetList.module.css'
 import { DDO } from '@oceanprotocol/lib'
 import classNames from 'classnames/bind'
-import { getAssetsBestPrices, AssetListPrices } from '../../utils/subgraph'
+import { getAssetsBestPrices, AssetListPrices } from '../../../utils/subgraph'
 import Loader from '../atoms/Loader'
-import { useUserPreferences } from '../../providers/UserPreferences'
-import { useIsMounted } from '../../hooks/useIsMounted'
+import { useUserPreferences } from '../../../context/UserPreferences'
+import { useIsMounted } from '../../../hooks/useIsMounted'
 
 const cx = classNames.bind(styles)
 

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

@@ -1,10 +1,10 @@
 import { DDO } from '@oceanprotocol/lib'
 import { Link } from 'gatsby'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { getAssetsNames } from '../../utils/aquarius'
+import { getAssetsNames } from '../../../utils/aquarius'
 import styles from './AssetListTitle.module.css'
 import axios from 'axios'
-import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function AssetListTitle({
   ddo,

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

@@ -8,7 +8,6 @@ import Publisher from '../atoms/Publisher'
 import AssetType from '../atoms/AssetType'
 import NetworkName from '../atoms/NetworkName'
 import styles from './AssetTeaser.module.css'
-import { BestPrice } from '../../models/BestPrice'
 
 declare type AssetTeaserProps = {
   ddo: DDO

src/components/@shared/Form/FormFields/AdvancedSettings.tsx

@@ -1,8 +1,7 @@
 import React, { ReactElement, useState, FormEvent, ChangeEvent } from 'react'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import Input from '../../atoms/Input'
-import Button from '../../atoms/Button'
-import { FormContent, FormFieldProps } from '../../../@types/Form'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import Input from '@shared/Form/Input'
+import Button from '@shared/atoms/Button'
 import { Field } from 'formik'
 import styles from './AdvancedSettings.module.css'
 

src/components/@shared/Form/FormFields/AssetSelection.module.css

@@ -58,11 +58,11 @@
 }
 
 .radio {
-  composes: radio from '../../atoms/Input/InputElement.module.css';
+  composes: radio from '@shared/Form/Input/InputElement.module.css';
 }
 
 .checkbox {
-  composes: checkbox from '../../atoms/Input/InputElement.module.css';
+  composes: checkbox from '@shared/Form/Input/InputElement.module.css';
 }
 
 .title {

src/components/@shared/Form/FormFields/AssetSelection.tsx

@@ -2,10 +2,10 @@ import React, { ChangeEvent, useState } from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import slugify from 'slugify'
 import classNames from 'classnames/bind'
-import PriceUnit from '../../atoms/Price/PriceUnit'
-import { ReactComponent as External } from '../../../images/external.svg'
-import InputElement from '../../atoms/Input/InputElement'
-import Loader from '../../atoms/Loader'
+import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import { ReactComponent as External } from '@images/external.svg'
+import InputElement from '@shared/Form/Input/InputElement'
+import Loader from '@shared/atoms/Loader'
 import styles from './AssetSelection.module.css'
 
 const cx = classNames.bind(styles)

src/components/@shared/Form/FormFields/BoxSelection.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react'
 import classNames from 'classnames/bind'
-import Loader from '../../atoms/Loader'
+import Loader from '@shared/atoms/Loader'
 import styles from './BoxSelection.module.css'
 
 const cx = classNames.bind(styles)

src/components/@shared/Form/FormFields/CustomProvider.tsx

@@ -2,8 +2,8 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import CustomInput from './URLInput/Input'
-import { useOcean } from '../../../providers/Ocean'
-import { InputProps } from '../../atoms/Input'
+import { useOcean } from '../../../../context/Ocean'
+import { InputProps } from '@shared/Form/Input'
 
 export default function CustomProvider(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)

src/components/@shared/Form/FormFields/Datatoken/RefreshName.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import styles from './RefreshName.module.css'
-import Button from '../../../atoms/Button'
-import { ReactComponent as Refresh } from '../../../../images/refresh.svg'
+import Button from '@shared/atoms/Button'
+import { ReactComponent as Refresh } from '@images/refresh.svg'
 
 export default function RefreshName({
   generateName

src/components/@shared/Form/FormFields/Datatoken/index.tsx

@@ -1,7 +1,7 @@
 import { useField } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import { utils } from '@oceanprotocol/lib'
-import { InputProps } from '../../../atoms/Input'
+import { InputProps } from '@shared/Form/Input'
 import RefreshName from './RefreshName'
 import styles from './index.module.css'
 

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

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

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

@@ -1,14 +1,13 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import axios from 'axios'
 import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'
 import CustomInput from '../URLInput/Input'
-import { InputProps } from '../../../atoms/Input'
-import { fileinfo } from '../../../../utils/provider'
-import { useWeb3 } from '../../../../providers/Web3'
-import { getOceanConfig } from '../../../../utils/ocean'
-import { useCancelToken } from '../../../../hooks/useCancelToken'
+import { InputProps } from '@shared/Form/Input'
+import { fileinfo } from '@utils/provider'
+import { useWeb3 } from '@context/Web3'
+import { getOceanConfig } from '@utils/ocean'
+import { useCancelToken } from '@hooks/useCancelToken'
 
 export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)

src/components/@shared/Form/FormFields/Terms.module.css

@@ -1,5 +1,5 @@
 .terms {
-  composes: content from '../../templates/PageMarkdown.module.css';
+  composes: content from '@shared/Page/PageMarkdown.module.css';
 
   padding: calc(var(--spacer) / 2);
   border: 1px solid var(--border-color);

src/components/@shared/Form/FormFields/Terms.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
-import { InputProps } from '../../atoms/Input'
-import InputElement from '../../atoms/Input/InputElement'
+import { InputProps } from '@shared/Form/Input'
+import InputElement from '@shared/Form/Input/InputElement'
 import styles from './Terms.module.css'
 import { graphql, useStaticQuery } from 'gatsby'
 

src/components/@shared/Form/FormFields/URLInput/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+  composes: input from '@shared/Form/Input/InputElement.module.css';
+}

src/components/@shared/Form/FormFields/URLInput/Input.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
-import Button from '../../../atoms/Button'
+import Button from '@shared/atoms/Button'
 import { FieldInputProps, useField } from 'formik'
-import Loader from '../../../atoms/Loader'
+import Loader from '@shared/atoms/Loader'
 import styles from './Input.module.css'
-import InputGroup from '../../../atoms/Input/InputGroup'
+import InputGroup from '@shared/Form/Input/InputGroup'
 
 export default function URLInput({
   submitText,

src/components/@shared/Form/Input/Disclaimer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import styles from './Disclaimer.module.css'
 import classNames from 'classnames/bind'
-import Alert from '../Alert'
+import Alert from '@shared/atoms/Alert'
 
 const cx = classNames.bind(styles)
 

src/components/@shared/Form/Input/Help.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import styles from './Help.module.css'
-import Markdown from '../Markdown'
+import Markdown from '@shared/atoms/Markdown'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)

src/components/@shared/Form/Input/InputElement.tsx

@@ -2,18 +2,15 @@ import React, { ReactElement } from 'react'
 import slugify from '@sindresorhus/slugify'
 import styles from './InputElement.module.css'
 import { InputProps } from '.'
-import FilesInput from '../../molecules/FormFields/FilesInput'
-import CustomProvider from '../../molecules/FormFields/CustomProvider'
-import Terms from '../../molecules/FormFields/Terms'
-import BoxSelection, {
-  BoxSelectionOption
-} from '../../molecules/FormFields/BoxSelection'
-import Datatoken from '../../molecules/FormFields/Datatoken'
+import FilesInput from '../FormFields/FilesInput'
+import CustomProvider from '../FormFields/CustomProvider'
+import Terms from '../FormFields/Terms'
+import BoxSelection, { BoxSelectionOption } from '../FormFields/BoxSelection'
+import Datatoken from '../FormFields/Datatoken'
 import classNames from 'classnames/bind'
 import AssetSelection, {
   AssetSelectionAsset
-} from '../../molecules/FormFields/AssetSelection'
-import Credentials from '../../molecules/FormFields/Credential'
+} from '../FormFields/AssetSelection'
 
 const cx = classNames.bind(styles)
 
@@ -147,8 +144,6 @@ export default function InputElement({
           {...props}
         />
       )
-    case 'credentials':
-      return <Credentials name={name} {...field} {...props} />
     default:
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>

src/components/@shared/NumberUnit.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
-import Markdown from '../atoms/Markdown'
-import Tooltip from '../atoms/Tooltip'
+import Markdown from '@shared/atoms/Markdown'
+import Tooltip from '@shared/atoms/Tooltip'
 import styles from './NumberUnit.module.css'
 
 interface NumberUnitProps {

src/components/@shared/Page/PageHeader.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import styles from './PageHeader.module.css'
-import Markdown from '../atoms/Markdown'
+import Markdown from '@shared/atoms/Markdown'
 
 const cx = classNames.bind(styles)
 

src/components/@shared/Page/PageMarkdown.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import { graphql, PageProps } from 'gatsby'
-import Page from './Page'
+import Page from '.'
 import styles from './PageMarkdown.module.css'
-import Container from '../atoms/Container'
-import PrivacyPolicyHeader from '../molecules/PrivacyHeader'
+import Container from '@shared/atoms/Container'
+import PrivacyPolicyHeader from '../../Privacy/PrivacyHeader'
 
 export default function PageTemplateMarkdown(props: PageProps): ReactElement {
   const { html, frontmatter, tableOfContents, fields } = (props.data as any)

src/components/@shared/Page/Seo.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { Helmet } from 'react-helmet'
-import { useSiteMetadata } from '../../hooks/useSiteMetadata'
-import { isBrowser } from '../../utils'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import { isBrowser } from '@utils/index'
 
 export default function Seo({
   title,

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

@@ -1,7 +1,7 @@
 import React, { ReactNode, ReactElement } from 'react'
-import PageHeader from '../molecules/PageHeader'
-import Seo from '../atoms/Seo'
-import Container from '../atoms/Container'
+import PageHeader from './PageHeader'
+import Seo from './Seo'
+import Container from '@shared/atoms/Container'
 
 export interface PageProps {
   children: ReactNode

src/components/@shared/Pagination.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.css'
-import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '../../utils/aquarius'
-import { ReactComponent as Arrow } from '../../images/arrow.svg'
+import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
+import { ReactComponent as Arrow } from '@images/arrow.svg'
 
 interface PaginationProps {
   totalPages?: number

src/components/@shared/Permission.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useWeb3 } from '../../providers/Web3'
-import rbacRequest from '../../utils/rbac'
-import Alert from '../atoms/Alert'
-import Loader from '../atoms/Loader'
-import appConfig from '../../../app.config'
-import { useIsMounted } from '../../hooks/useIsMounted'
+import { useWeb3 } from '@context/Web3'
+import rbacRequest from '@utils/rbac'
+import Alert from '@shared/atoms/Alert'
+import Loader from '@shared/atoms/Loader'
+import { useIsMounted } from '@hooks/useIsMounted'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
 
 export default function Permission({
   eventType,
@@ -13,15 +13,18 @@ export default function Permission({
   eventType: string
   children: ReactElement
 }): ReactElement {
-  const url = appConfig.rbacUrl
+  const { appConfig } = useSiteMetadata()
+  const url = appConfig?.rbacUrl
   const [data, updateData] = useState<boolean | 'ERROR'>()
   const [errorMessage, updateError] = useState<string>()
   const [messageState, updateMessageState] =
     useState<'error' | 'warning' | 'info' | 'success'>()
   const { accountId } = useWeb3()
   const isMounted = useIsMounted()
+
   useEffect(() => {
-    if (url === undefined) return
+    if (url === '') return
+
     const controller = new AbortController()
     const getData = async () => {
       if (accountId === undefined) {
@@ -55,7 +58,7 @@ export default function Permission({
     }
   }, [eventType, accountId, url, isMounted])
 
-  if (url === undefined || data === true) {
+  if (url === '' || data === true) {
     return <>{children}</>
   }
 

src/components/@shared/PoolTransactions/Title.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import { PoolTransaction } from '.'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import ExplorerLink from '../../atoms/ExplorerLink'
-import { formatPrice } from '../../atoms/Price/PriceUnit'
+import { useUserPreferences } from '@context/UserPreferences'
+import ExplorerLink from '@shared/atoms/ExplorerLink'
+import { formatPrice } from '@shared/atoms/Price/PriceUnit'
 import styles from './Title.module.css'
 
 async function getTitle(row: PoolTransaction, locale: string) {

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

@@ -1,15 +1,15 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
-import Time from '../../atoms/Time'
-import Table from '../../atoms/Table'
-import AssetTitle from '../AssetListTitle'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import Time from '@shared/atoms/Time'
+import Table from '@shared/atoms/Table'
+import AssetTitle from '@shared/AssetList/AssetListTitle'
+import { useUserPreferences } from '@context/UserPreferences'
 import { gql } from 'urql'
 import { TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions } from '../../../@types/apollo/TransactionHistory'
 import web3 from 'web3'
-import { fetchDataForMultipleChains } from '../../../utils/subgraph'
-import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import NetworkName from '../../atoms/NetworkName'
-import { retrieveDDOListByDIDs } from '../../../utils/aquarius'
+import { fetchDataForMultipleChains } from '@utils/subgraph'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import NetworkName from '@shared/atoms/NetworkName'
+import { retrieveDDOListByDIDs } from '@utils/aquarius'
 import { CancelToken } from 'axios'
 import Title from './Title'
 import styles from './index.module.css'

src/components/@shared/SyncStatus.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
-import Tooltip from '../atoms/Tooltip'
-import Status from '../atoms/Status'
-import { useGraphSyncStatus } from '../../hooks/useGraphSyncStatus'
+import Tooltip from '@shared/atoms/Tooltip'
+import Status from '@shared/atoms/Status'
+import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
 import styles from './SyncStatus.module.css'
 
 export default function SyncStatus(): ReactElement {

src/components/@shared/TokenApproval.tsx

@@ -1,14 +1,14 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
-import Button from '../atoms/Button'
-import { useOcean } from '../../providers/Ocean'
-import { useAsset } from '../../providers/Asset'
-import Loader from '../atoms/Loader'
-import { useWeb3 } from '../../providers/Web3'
-import { useUserPreferences } from '../../providers/UserPreferences'
-import Tooltip from '../atoms/Tooltip'
+import Button from '@shared/atoms/Button'
+import { useOcean } from '@context/Ocean'
+import { useAsset } from '@context/Asset'
+import Loader from '@shared/atoms/Loader'
+import { useWeb3 } from '@context/Web3'
+import { useUserPreferences } from '@context/UserPreferences'
+import Tooltip from '@shared/atoms/Tooltip'
 import { graphql, useStaticQuery } from 'gatsby'
 import Decimal from 'decimal.js'
-import { getOceanConfig } from '../../utils/ocean'
+import { getOceanConfig } from '@utils/ocean'
 
 const query = graphql`
   query {

src/components/@shared/WalletNetworkSwitcher.tsx

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

src/components/@shared/Web3Feedback.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useWeb3 } from '../../providers/Web3'
-import Status from '../atoms/Status'
+import { useWeb3 } from '@context/Web3'
+import Status from '@shared/atoms/Status'
 import styles from './Web3Feedback.module.css'
 import WalletNetworkSwitcher from './WalletNetworkSwitcher'
-import { useGraphSyncStatus } from '../../hooks/useGraphSyncStatus'
+import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'

src/components/@shared/atoms/AddToken.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import { addTokenToWallet } from '../../utils/web3'
-import { useWeb3 } from '../../providers/Web3'
+import { addTokenToWallet } from '@utils/web3'
+import { useWeb3 } from '@context/Web3'
 import Button from './Button'
 import styles from './AddToken.module.css'
 

src/components/@shared/atoms/AnnouncementBanner.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import Markdown from '../atoms/Markdown'
-import Button from '../atoms/Button'
+import Markdown from './Markdown'
+import Button from './Button'
 import styles from './AnnouncementBanner.module.css'
 
 const cx = classNames.bind(styles)

src/components/@shared/atoms/AssetType.tsx

@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import styles from './AssetType.module.css'
 import classNames from 'classnames/bind'
-import { ReactComponent as Compute } from '../../images/compute.svg'
-import { ReactComponent as Download } from '../../images/download.svg'
-import { ReactComponent as Lock } from '../../images/lock.svg'
+import { ReactComponent as Compute } from '@images/compute.svg'
+import { ReactComponent as Download } from '@images/download.svg'
+import { ReactComponent as Lock } from '@images/lock.svg'
 
 const cx = classNames.bind(styles)