diff --git a/.storybook/helpers.tsx b/.storybook/helpers.tsx
deleted file mode 100644
index fb776e406..000000000
--- a/.storybook/helpers.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-export const Center = ({ children }: { children: any }) => (
-
No assets found.
diff --git a/src/components/organisms/AssetList.module.css b/src/components/@shared/AssetList/AssetList.module.css
similarity index 100%
rename from src/components/organisms/AssetList.module.css
rename to src/components/@shared/AssetList/AssetList.module.css
diff --git a/src/components/organisms/AssetList.tsx b/src/components/@shared/AssetList/AssetList.tsx
similarity index 88%
rename from src/components/organisms/AssetList.tsx
rename to src/components/@shared/AssetList/AssetList.tsx
index 024f47c78..bd19c6d08 100644
--- a/src/components/organisms/AssetList.tsx
+++ b/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)
diff --git a/src/components/molecules/AssetListTitle.module.css b/src/components/@shared/AssetList/AssetListTitle.module.css
similarity index 100%
rename from src/components/molecules/AssetListTitle.module.css
rename to src/components/@shared/AssetList/AssetListTitle.module.css
diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/@shared/AssetList/AssetListTitle.tsx
similarity index 90%
rename from src/components/molecules/AssetListTitle.tsx
rename to src/components/@shared/AssetList/AssetListTitle.tsx
index fe6c67bfe..0771e834a 100644
--- a/src/components/molecules/AssetListTitle.tsx
+++ b/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,
diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/@shared/AssetTeaser/AssetTeaser.module.css
similarity index 100%
rename from src/components/molecules/AssetTeaser.module.css
rename to src/components/@shared/AssetTeaser/AssetTeaser.module.css
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/@shared/AssetTeaser/AssetTeaser.tsx
similarity index 97%
rename from src/components/molecules/AssetTeaser.tsx
rename to src/components/@shared/AssetTeaser/AssetTeaser.tsx
index a7e912b00..a64966ec2 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/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
diff --git a/src/components/molecules/FormFields/AdvancedSettings.module.css b/src/components/@shared/Form/FormFields/AdvancedSettings.module.css
similarity index 100%
rename from src/components/molecules/FormFields/AdvancedSettings.module.css
rename to src/components/@shared/Form/FormFields/AdvancedSettings.module.css
diff --git a/src/components/molecules/FormFields/AdvancedSettings.tsx b/src/components/@shared/Form/FormFields/AdvancedSettings.tsx
similarity index 87%
rename from src/components/molecules/FormFields/AdvancedSettings.tsx
rename to src/components/@shared/Form/FormFields/AdvancedSettings.tsx
index 2c86b8816..7142ca53d 100644
--- a/src/components/molecules/FormFields/AdvancedSettings.tsx
+++ b/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'
diff --git a/src/components/molecules/FormFields/AssetSelection.module.css b/src/components/@shared/Form/FormFields/AssetSelection.module.css
similarity index 94%
rename from src/components/molecules/FormFields/AssetSelection.module.css
rename to src/components/@shared/Form/FormFields/AssetSelection.module.css
index eab981be8..4466a4868 100644
--- a/src/components/molecules/FormFields/AssetSelection.module.css
+++ b/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 {
diff --git a/src/components/molecules/FormFields/AssetSelection.tsx b/src/components/@shared/Form/FormFields/AssetSelection.tsx
similarity index 93%
rename from src/components/molecules/FormFields/AssetSelection.tsx
rename to src/components/@shared/Form/FormFields/AssetSelection.tsx
index b66fe4104..aaef28acc 100644
--- a/src/components/molecules/FormFields/AssetSelection.tsx
+++ b/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)
diff --git a/src/components/molecules/FormFields/BoxSelection.module.css b/src/components/@shared/Form/FormFields/BoxSelection.module.css
similarity index 100%
rename from src/components/molecules/FormFields/BoxSelection.module.css
rename to src/components/@shared/Form/FormFields/BoxSelection.module.css
diff --git a/src/components/molecules/FormFields/BoxSelection.tsx b/src/components/@shared/Form/FormFields/BoxSelection.tsx
similarity index 97%
rename from src/components/molecules/FormFields/BoxSelection.tsx
rename to src/components/@shared/Form/FormFields/BoxSelection.tsx
index ce7df7c22..cfd3f4268 100644
--- a/src/components/molecules/FormFields/BoxSelection.tsx
+++ b/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)
diff --git a/src/components/molecules/FormFields/CustomProvider.tsx b/src/components/@shared/Form/FormFields/CustomProvider.tsx
similarity index 93%
rename from src/components/molecules/FormFields/CustomProvider.tsx
rename to src/components/@shared/Form/FormFields/CustomProvider.tsx
index a9c4ebb6e..625567f0a 100644
--- a/src/components/molecules/FormFields/CustomProvider.tsx
+++ b/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)
diff --git a/src/components/molecules/FormFields/Datatoken/RefreshName.module.css b/src/components/@shared/Form/FormFields/Datatoken/RefreshName.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Datatoken/RefreshName.module.css
rename to src/components/@shared/Form/FormFields/Datatoken/RefreshName.module.css
diff --git a/src/components/molecules/FormFields/Datatoken/RefreshName.tsx b/src/components/@shared/Form/FormFields/Datatoken/RefreshName.tsx
similarity index 79%
rename from src/components/molecules/FormFields/Datatoken/RefreshName.tsx
rename to src/components/@shared/Form/FormFields/Datatoken/RefreshName.tsx
index 674dc6f28..5d885ecda 100644
--- a/src/components/molecules/FormFields/Datatoken/RefreshName.tsx
+++ b/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
diff --git a/src/components/molecules/FormFields/Datatoken/index.module.css b/src/components/@shared/Form/FormFields/Datatoken/index.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Datatoken/index.module.css
rename to src/components/@shared/Form/FormFields/Datatoken/index.module.css
diff --git a/src/components/molecules/FormFields/Datatoken/index.tsx b/src/components/@shared/Form/FormFields/Datatoken/index.tsx
similarity index 94%
rename from src/components/molecules/FormFields/Datatoken/index.tsx
rename to src/components/@shared/Form/FormFields/Datatoken/index.tsx
index 08b304bf6..9b2223512 100644
--- a/src/components/molecules/FormFields/Datatoken/index.tsx
+++ b/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'
diff --git a/src/components/molecules/FormFields/FilesInput/Info.module.css b/src/components/@shared/Form/FormFields/FilesInput/Info.module.css
similarity index 100%
rename from src/components/molecules/FormFields/FilesInput/Info.module.css
rename to src/components/@shared/Form/FormFields/FilesInput/Info.module.css
diff --git a/src/components/molecules/FormFields/FilesInput/Info.tsx b/src/components/@shared/Form/FormFields/FilesInput/Info.tsx
similarity index 89%
rename from src/components/molecules/FormFields/FilesInput/Info.tsx
rename to src/components/@shared/Form/FormFields/FilesInput/Info.tsx
index 64d89edcf..c3468eb50 100644
--- a/src/components/molecules/FormFields/FilesInput/Info.tsx
+++ b/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'
diff --git a/src/components/molecules/FormFields/FilesInput/index.tsx b/src/components/@shared/Form/FormFields/FilesInput/index.tsx
similarity index 86%
rename from src/components/molecules/FormFields/FilesInput/index.tsx
rename to src/components/@shared/Form/FormFields/FilesInput/index.tsx
index 4a3490bbc..461c435e9 100644
--- a/src/components/molecules/FormFields/FilesInput/index.tsx
+++ b/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)
diff --git a/src/components/molecules/FormFields/Terms.module.css b/src/components/@shared/Form/FormFields/Terms.module.css
similarity index 89%
rename from src/components/molecules/FormFields/Terms.module.css
rename to src/components/@shared/Form/FormFields/Terms.module.css
index 745e157e1..ffadc2c19 100644
--- a/src/components/molecules/FormFields/Terms.module.css
+++ b/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);
diff --git a/src/components/molecules/FormFields/Terms.tsx b/src/components/@shared/Form/FormFields/Terms.tsx
similarity index 86%
rename from src/components/molecules/FormFields/Terms.tsx
rename to src/components/@shared/Form/FormFields/Terms.tsx
index f11044720..1af88f316 100644
--- a/src/components/molecules/FormFields/Terms.tsx
+++ b/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'
diff --git a/src/components/@shared/Form/FormFields/URLInput/Input.module.css b/src/components/@shared/Form/FormFields/URLInput/Input.module.css
new file mode 100644
index 000000000..9caeaf849
--- /dev/null
+++ b/src/components/@shared/Form/FormFields/URLInput/Input.module.css
@@ -0,0 +1,3 @@
+.input {
+ composes: input from '@shared/Form/Input/InputElement.module.css';
+}
diff --git a/src/components/molecules/FormFields/URLInput/Input.tsx b/src/components/@shared/Form/FormFields/URLInput/Input.tsx
similarity index 86%
rename from src/components/molecules/FormFields/URLInput/Input.tsx
rename to src/components/@shared/Form/FormFields/URLInput/Input.tsx
index 4d3d1c6dd..d71fa5fc3 100644
--- a/src/components/molecules/FormFields/URLInput/Input.tsx
+++ b/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,
diff --git a/src/components/atoms/FormikPersist.tsx b/src/components/@shared/Form/FormikPersist.tsx
similarity index 100%
rename from src/components/atoms/FormikPersist.tsx
rename to src/components/@shared/Form/FormikPersist.tsx
diff --git a/src/components/atoms/Input/Disclaimer.module.css b/src/components/@shared/Form/Input/Disclaimer.module.css
similarity index 100%
rename from src/components/atoms/Input/Disclaimer.module.css
rename to src/components/@shared/Form/Input/Disclaimer.module.css
diff --git a/src/components/atoms/Input/Disclaimer.tsx b/src/components/@shared/Form/Input/Disclaimer.tsx
similarity index 93%
rename from src/components/atoms/Input/Disclaimer.tsx
rename to src/components/@shared/Form/Input/Disclaimer.tsx
index bc04e08f7..6df1fdab1 100644
--- a/src/components/atoms/Input/Disclaimer.tsx
+++ b/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)
diff --git a/src/components/atoms/Input/Help.module.css b/src/components/@shared/Form/Input/Help.module.css
similarity index 100%
rename from src/components/atoms/Input/Help.module.css
rename to src/components/@shared/Form/Input/Help.module.css
diff --git a/src/components/atoms/Input/Help.tsx b/src/components/@shared/Form/Input/Help.tsx
similarity index 90%
rename from src/components/atoms/Input/Help.tsx
rename to src/components/@shared/Form/Input/Help.tsx
index 9152b1fd0..0481e3e91 100644
--- a/src/components/atoms/Input/Help.tsx
+++ b/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)
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/@shared/Form/Input/InputElement.module.css
similarity index 100%
rename from src/components/atoms/Input/InputElement.module.css
rename to src/components/@shared/Form/Input/InputElement.module.css
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/@shared/Form/Input/InputElement.tsx
similarity index 88%
rename from src/components/atoms/Input/InputElement.tsx
rename to src/components/@shared/Form/Input/InputElement.tsx
index c6a077d1d..183b1ae61 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/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
diff --git a/src/components/atoms/Input/InputGroup.module.css b/src/components/@shared/Form/Input/InputGroup.module.css
similarity index 100%
rename from src/components/atoms/Input/InputGroup.module.css
rename to src/components/@shared/Form/Input/InputGroup.module.css
diff --git a/src/components/atoms/Input/InputGroup.tsx b/src/components/@shared/Form/Input/InputGroup.tsx
similarity index 100%
rename from src/components/atoms/Input/InputGroup.tsx
rename to src/components/@shared/Form/Input/InputGroup.tsx
diff --git a/src/components/atoms/Input/Label.module.css b/src/components/@shared/Form/Input/Label.module.css
similarity index 100%
rename from src/components/atoms/Input/Label.module.css
rename to src/components/@shared/Form/Input/Label.module.css
diff --git a/src/components/atoms/Input/Label.tsx b/src/components/@shared/Form/Input/Label.tsx
similarity index 100%
rename from src/components/atoms/Input/Label.tsx
rename to src/components/@shared/Form/Input/Label.tsx
diff --git a/src/components/atoms/Input/Row.module.css b/src/components/@shared/Form/Input/Row.module.css
similarity index 100%
rename from src/components/atoms/Input/Row.module.css
rename to src/components/@shared/Form/Input/Row.module.css
diff --git a/src/components/atoms/Input/Row.tsx b/src/components/@shared/Form/Input/Row.tsx
similarity index 100%
rename from src/components/atoms/Input/Row.tsx
rename to src/components/@shared/Form/Input/Row.tsx
diff --git a/src/components/atoms/Input/index.module.css b/src/components/@shared/Form/Input/index.module.css
similarity index 100%
rename from src/components/atoms/Input/index.module.css
rename to src/components/@shared/Form/Input/index.module.css
diff --git a/src/components/atoms/Input/index.tsx b/src/components/@shared/Form/Input/index.tsx
similarity index 100%
rename from src/components/atoms/Input/index.tsx
rename to src/components/@shared/Form/Input/index.tsx
diff --git a/src/components/molecules/NumberUnit.module.css b/src/components/@shared/NumberUnit.module.css
similarity index 100%
rename from src/components/molecules/NumberUnit.module.css
rename to src/components/@shared/NumberUnit.module.css
diff --git a/src/components/molecules/NumberUnit.tsx b/src/components/@shared/NumberUnit.tsx
similarity index 89%
rename from src/components/molecules/NumberUnit.tsx
rename to src/components/@shared/NumberUnit.tsx
index 0198df079..a3f2e3194 100644
--- a/src/components/molecules/NumberUnit.tsx
+++ b/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 {
diff --git a/src/components/molecules/PageHeader.module.css b/src/components/@shared/Page/PageHeader.module.css
similarity index 100%
rename from src/components/molecules/PageHeader.module.css
rename to src/components/@shared/Page/PageHeader.module.css
diff --git a/src/components/molecules/PageHeader.tsx b/src/components/@shared/Page/PageHeader.tsx
similarity index 92%
rename from src/components/molecules/PageHeader.tsx
rename to src/components/@shared/Page/PageHeader.tsx
index 7a196faf0..cf2058248 100644
--- a/src/components/molecules/PageHeader.tsx
+++ b/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)
diff --git a/src/components/templates/PageMarkdown.module.css b/src/components/@shared/Page/PageMarkdown.module.css
similarity index 100%
rename from src/components/templates/PageMarkdown.module.css
rename to src/components/@shared/Page/PageMarkdown.module.css
diff --git a/src/components/templates/PageMarkdown.tsx b/src/components/@shared/Page/PageMarkdown.tsx
similarity index 89%
rename from src/components/templates/PageMarkdown.tsx
rename to src/components/@shared/Page/PageMarkdown.tsx
index 414380191..aa1e9c7e3 100644
--- a/src/components/templates/PageMarkdown.tsx
+++ b/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)
diff --git a/src/components/atoms/Seo.tsx b/src/components/@shared/Page/Seo.tsx
similarity index 93%
rename from src/components/atoms/Seo.tsx
rename to src/components/@shared/Page/Seo.tsx
index 5002c597a..c0f6308a0 100644
--- a/src/components/atoms/Seo.tsx
+++ b/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,
diff --git a/src/components/templates/Page.tsx b/src/components/@shared/Page/index.tsx
similarity index 84%
rename from src/components/templates/Page.tsx
rename to src/components/@shared/Page/index.tsx
index b91717999..08268752d 100644
--- a/src/components/templates/Page.tsx
+++ b/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
diff --git a/src/components/molecules/Pagination.module.css b/src/components/@shared/Pagination.module.css
similarity index 100%
rename from src/components/molecules/Pagination.module.css
rename to src/components/@shared/Pagination.module.css
diff --git a/src/components/molecules/Pagination.tsx b/src/components/@shared/Pagination.tsx
similarity index 94%
rename from src/components/molecules/Pagination.tsx
rename to src/components/@shared/Pagination.tsx
index 4f60f4945..4ab4fedde 100644
--- a/src/components/molecules/Pagination.tsx
+++ b/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
diff --git a/src/components/organisms/Permission.tsx b/src/components/@shared/Permission.tsx
similarity index 81%
rename from src/components/organisms/Permission.tsx
rename to src/components/@shared/Permission.tsx
index d46884347..b73b71198 100644
--- a/src/components/organisms/Permission.tsx
+++ b/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
()
const [errorMessage, updateError] = useState()
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}>
}
diff --git a/src/components/molecules/PoolTransactions/Title.module.css b/src/components/@shared/PoolTransactions/Title.module.css
similarity index 100%
rename from src/components/molecules/PoolTransactions/Title.module.css
rename to src/components/@shared/PoolTransactions/Title.module.css
diff --git a/src/components/molecules/PoolTransactions/Title.tsx b/src/components/@shared/PoolTransactions/Title.tsx
similarity index 93%
rename from src/components/molecules/PoolTransactions/Title.tsx
rename to src/components/@shared/PoolTransactions/Title.tsx
index bd9fcf5a7..bf158e192 100644
--- a/src/components/molecules/PoolTransactions/Title.tsx
+++ b/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) {
diff --git a/src/components/molecules/PoolTransactions/index.module.css b/src/components/@shared/PoolTransactions/index.module.css
similarity index 100%
rename from src/components/molecules/PoolTransactions/index.module.css
rename to src/components/@shared/PoolTransactions/index.module.css
diff --git a/src/components/molecules/PoolTransactions/index.tsx b/src/components/@shared/PoolTransactions/index.tsx
similarity index 93%
rename from src/components/molecules/PoolTransactions/index.tsx
rename to src/components/@shared/PoolTransactions/index.tsx
index 2c19d80db..29c68976e 100644
--- a/src/components/molecules/PoolTransactions/index.tsx
+++ b/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'
diff --git a/src/components/molecules/SyncStatus.module.css b/src/components/@shared/SyncStatus.module.css
similarity index 100%
rename from src/components/molecules/SyncStatus.module.css
rename to src/components/@shared/SyncStatus.module.css
diff --git a/src/components/molecules/SyncStatus.tsx b/src/components/@shared/SyncStatus.tsx
similarity index 79%
rename from src/components/molecules/SyncStatus.tsx
rename to src/components/@shared/SyncStatus.tsx
index 11073d314..4739984e8 100644
--- a/src/components/molecules/SyncStatus.tsx
+++ b/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 {
diff --git a/src/components/molecules/TokenApproval.tsx b/src/components/@shared/TokenApproval.tsx
similarity index 89%
rename from src/components/molecules/TokenApproval.tsx
rename to src/components/@shared/TokenApproval.tsx
index cea5ae020..59d7baaef 100644
--- a/src/components/molecules/TokenApproval.tsx
+++ b/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 {
diff --git a/src/components/molecules/WalletNetworkSwitcher.module.css b/src/components/@shared/WalletNetworkSwitcher.module.css
similarity index 100%
rename from src/components/molecules/WalletNetworkSwitcher.module.css
rename to src/components/@shared/WalletNetworkSwitcher.module.css
diff --git a/src/components/molecules/WalletNetworkSwitcher.tsx b/src/components/@shared/WalletNetworkSwitcher.tsx
similarity index 85%
rename from src/components/molecules/WalletNetworkSwitcher.tsx
rename to src/components/@shared/WalletNetworkSwitcher.tsx
index 309062776..9ccd9e4e8 100644
--- a/src/components/molecules/WalletNetworkSwitcher.tsx
+++ b/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()
diff --git a/src/components/molecules/Web3Feedback.module.css b/src/components/@shared/Web3Feedback.module.css
similarity index 100%
rename from src/components/molecules/Web3Feedback.module.css
rename to src/components/@shared/Web3Feedback.module.css
diff --git a/src/components/molecules/Web3Feedback.tsx b/src/components/@shared/Web3Feedback.tsx
similarity index 92%
rename from src/components/molecules/Web3Feedback.tsx
rename to src/components/@shared/Web3Feedback.tsx
index f4fde7cb7..893746af1 100644
--- a/src/components/molecules/Web3Feedback.tsx
+++ b/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'
diff --git a/src/components/atoms/AddToken.module.css b/src/components/@shared/atoms/AddToken.module.css
similarity index 100%
rename from src/components/atoms/AddToken.module.css
rename to src/components/@shared/atoms/AddToken.module.css
diff --git a/src/components/atoms/AddToken.tsx b/src/components/@shared/atoms/AddToken.tsx
similarity index 91%
rename from src/components/atoms/AddToken.tsx
rename to src/components/@shared/atoms/AddToken.tsx
index e940a5838..b6fb46c60 100644
--- a/src/components/atoms/AddToken.tsx
+++ b/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'
diff --git a/src/components/atoms/Alert.module.css b/src/components/@shared/atoms/Alert.module.css
similarity index 100%
rename from src/components/atoms/Alert.module.css
rename to src/components/@shared/atoms/Alert.module.css
diff --git a/src/components/atoms/Alert.tsx b/src/components/@shared/atoms/Alert.tsx
similarity index 100%
rename from src/components/atoms/Alert.tsx
rename to src/components/@shared/atoms/Alert.tsx
diff --git a/src/components/atoms/AnnouncementBanner.module.css b/src/components/@shared/atoms/AnnouncementBanner.module.css
similarity index 100%
rename from src/components/atoms/AnnouncementBanner.module.css
rename to src/components/@shared/atoms/AnnouncementBanner.module.css
diff --git a/src/components/atoms/AnnouncementBanner.tsx b/src/components/@shared/atoms/AnnouncementBanner.tsx
similarity index 92%
rename from src/components/atoms/AnnouncementBanner.tsx
rename to src/components/@shared/atoms/AnnouncementBanner.tsx
index 5cb14e996..5a78520e3 100644
--- a/src/components/atoms/AnnouncementBanner.tsx
+++ b/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)
diff --git a/src/components/atoms/AssetType.module.css b/src/components/@shared/atoms/AssetType.module.css
similarity index 100%
rename from src/components/atoms/AssetType.module.css
rename to src/components/@shared/atoms/AssetType.module.css
diff --git a/src/components/atoms/AssetType.tsx b/src/components/@shared/atoms/AssetType.tsx
similarity index 81%
rename from src/components/atoms/AssetType.tsx
rename to src/components/@shared/atoms/AssetType.tsx
index 202dc9fe8..9b63450db 100644
--- a/src/components/atoms/AssetType.tsx
+++ b/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)
diff --git a/src/components/atoms/Badge.module.css b/src/components/@shared/atoms/Badge.module.css
similarity index 100%
rename from src/components/atoms/Badge.module.css
rename to src/components/@shared/atoms/Badge.module.css
diff --git a/src/components/atoms/Badge.tsx b/src/components/@shared/atoms/Badge.tsx
similarity index 100%
rename from src/components/atoms/Badge.tsx
rename to src/components/@shared/atoms/Badge.tsx
diff --git a/src/components/atoms/Blockies.module.css b/src/components/@shared/atoms/Blockies.module.css
similarity index 100%
rename from src/components/atoms/Blockies.module.css
rename to src/components/@shared/atoms/Blockies.module.css
diff --git a/src/components/atoms/Blockies.tsx b/src/components/@shared/atoms/Blockies.tsx
similarity index 100%
rename from src/components/atoms/Blockies.tsx
rename to src/components/@shared/atoms/Blockies.tsx
diff --git a/src/components/atoms/Box.module.css b/src/components/@shared/atoms/Box.module.css
similarity index 100%
rename from src/components/atoms/Box.module.css
rename to src/components/@shared/atoms/Box.module.css
diff --git a/src/components/atoms/Button.module.css b/src/components/@shared/atoms/Button.module.css
similarity index 100%
rename from src/components/atoms/Button.module.css
rename to src/components/@shared/atoms/Button.module.css
diff --git a/src/components/atoms/Button.tsx b/src/components/@shared/atoms/Button.tsx
similarity index 100%
rename from src/components/atoms/Button.tsx
rename to src/components/@shared/atoms/Button.tsx
diff --git a/src/components/atoms/ButtonBuy.module.css b/src/components/@shared/atoms/ButtonBuy.module.css
similarity index 100%
rename from src/components/atoms/ButtonBuy.module.css
rename to src/components/@shared/atoms/ButtonBuy.module.css
diff --git a/src/components/atoms/ButtonBuy.tsx b/src/components/@shared/atoms/ButtonBuy.tsx
similarity index 100%
rename from src/components/atoms/ButtonBuy.tsx
rename to src/components/@shared/atoms/ButtonBuy.tsx
diff --git a/src/components/atoms/Container.module.css b/src/components/@shared/atoms/Container.module.css
similarity index 100%
rename from src/components/atoms/Container.module.css
rename to src/components/@shared/atoms/Container.module.css
diff --git a/src/components/atoms/Container.tsx b/src/components/@shared/atoms/Container.tsx
similarity index 100%
rename from src/components/atoms/Container.tsx
rename to src/components/@shared/atoms/Container.tsx
diff --git a/src/components/atoms/Copy.module.css b/src/components/@shared/atoms/Copy.module.css
similarity index 100%
rename from src/components/atoms/Copy.module.css
rename to src/components/@shared/atoms/Copy.module.css
diff --git a/src/components/atoms/Copy.tsx b/src/components/@shared/atoms/Copy.tsx
similarity index 93%
rename from src/components/atoms/Copy.tsx
rename to src/components/@shared/atoms/Copy.tsx
index d0693963f..25f2a1b22 100644
--- a/src/components/atoms/Copy.tsx
+++ b/src/components/@shared/atoms/Copy.tsx
@@ -1,7 +1,7 @@
import React, { ReactElement, useEffect, useState } from 'react'
import loadable from '@loadable/component'
import styles from './Copy.module.css'
-import { ReactComponent as IconCopy } from '../../images/copy.svg'
+import { ReactComponent as IconCopy } from '@images/copy.svg'
// lazy load when needed only, as library is a bit big
const Clipboard = loadable(() => import('react-clipboard.js'))
diff --git a/src/components/atoms/DebugOutput.tsx b/src/components/@shared/atoms/DebugOutput.tsx
similarity index 100%
rename from src/components/atoms/DebugOutput.tsx
rename to src/components/@shared/atoms/DebugOutput.tsx
diff --git a/src/components/atoms/ExplorerLink.module.css b/src/components/@shared/atoms/ExplorerLink.module.css
similarity index 100%
rename from src/components/atoms/ExplorerLink.module.css
rename to src/components/@shared/atoms/ExplorerLink.module.css
diff --git a/src/components/atoms/ExplorerLink.tsx b/src/components/@shared/atoms/ExplorerLink.tsx
similarity index 87%
rename from src/components/atoms/ExplorerLink.tsx
rename to src/components/@shared/atoms/ExplorerLink.tsx
index a1d3b087e..af0695acf 100644
--- a/src/components/atoms/ExplorerLink.tsx
+++ b/src/components/@shared/atoms/ExplorerLink.tsx
@@ -1,10 +1,10 @@
import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
-import { ReactComponent as External } from '../../images/external.svg'
+import { ReactComponent as External } from '@images/external.svg'
import classNames from 'classnames/bind'
import { ConfigHelperConfig } from '@oceanprotocol/lib'
-import { useOcean } from '../../providers/Ocean'
+import { useOcean } from '@context/Ocean'
import styles from './ExplorerLink.module.css'
-import { getOceanConfig } from '../../utils/ocean'
+import { getOceanConfig } from '@utils/ocean'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/File.module.css b/src/components/@shared/atoms/File.module.css
similarity index 100%
rename from src/components/atoms/File.module.css
rename to src/components/@shared/atoms/File.module.css
diff --git a/src/components/atoms/File.tsx b/src/components/@shared/atoms/File.tsx
similarity index 92%
rename from src/components/atoms/File.tsx
rename to src/components/@shared/atoms/File.tsx
index 6efa9c984..77a490489 100644
--- a/src/components/atoms/File.tsx
+++ b/src/components/@shared/atoms/File.tsx
@@ -2,9 +2,9 @@ import React, { ReactElement } from 'react'
import { File as FileMetadata } from '@oceanprotocol/lib'
import filesize from 'filesize'
import classNames from 'classnames/bind'
-import cleanupContentType from '../../utils/cleanupContentType'
+import cleanupContentType from '@utils/cleanupContentType'
import styles from './File.module.css'
-import Loader from '../atoms/Loader'
+import Loader from './Loader'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/Lists.module.css b/src/components/@shared/atoms/Lists.module.css
similarity index 100%
rename from src/components/atoms/Lists.module.css
rename to src/components/@shared/atoms/Lists.module.css
diff --git a/src/components/atoms/Lists.tsx b/src/components/@shared/atoms/Lists.tsx
similarity index 100%
rename from src/components/atoms/Lists.tsx
rename to src/components/@shared/atoms/Lists.tsx
diff --git a/src/components/atoms/Loader.module.css b/src/components/@shared/atoms/Loader.module.css
similarity index 100%
rename from src/components/atoms/Loader.module.css
rename to src/components/@shared/atoms/Loader.module.css
diff --git a/src/components/atoms/Loader.tsx b/src/components/@shared/atoms/Loader.tsx
similarity index 100%
rename from src/components/atoms/Loader.tsx
rename to src/components/@shared/atoms/Loader.tsx
diff --git a/src/components/atoms/Logo.module.css b/src/components/@shared/atoms/Logo.module.css
similarity index 100%
rename from src/components/atoms/Logo.module.css
rename to src/components/@shared/atoms/Logo.module.css
diff --git a/src/components/atoms/Logo.tsx b/src/components/@shared/atoms/Logo.tsx
similarity index 84%
rename from src/components/atoms/Logo.tsx
rename to src/components/@shared/atoms/Logo.tsx
index 3775624f1..e012c167e 100644
--- a/src/components/atoms/Logo.tsx
+++ b/src/components/@shared/atoms/Logo.tsx
@@ -1,6 +1,6 @@
import React, { ReactElement } from 'react'
import { ReactComponent as LogoAssetFull } from '@oceanprotocol/art/logo/logo.svg'
-import { ReactComponent as LogoAsset } from '../../images/logo.svg'
+import { ReactComponent as LogoAsset } from '@images/logo.svg'
import styles from './Logo.module.css'
export default function Logo({
diff --git a/src/components/atoms/Markdown.module.css b/src/components/@shared/atoms/Markdown.module.css
similarity index 100%
rename from src/components/atoms/Markdown.module.css
rename to src/components/@shared/atoms/Markdown.module.css
diff --git a/src/components/atoms/Markdown.tsx b/src/components/@shared/atoms/Markdown.tsx
similarity index 100%
rename from src/components/atoms/Markdown.tsx
rename to src/components/@shared/atoms/Markdown.tsx
diff --git a/src/components/atoms/Modal.module.css b/src/components/@shared/atoms/Modal.module.css
similarity index 100%
rename from src/components/atoms/Modal.module.css
rename to src/components/@shared/atoms/Modal.module.css
diff --git a/src/components/atoms/Modal.tsx b/src/components/@shared/atoms/Modal.tsx
similarity index 100%
rename from src/components/atoms/Modal.tsx
rename to src/components/@shared/atoms/Modal.tsx
diff --git a/src/components/atoms/NetworkName.module.css b/src/components/@shared/atoms/NetworkName.module.css
similarity index 100%
rename from src/components/atoms/NetworkName.module.css
rename to src/components/@shared/atoms/NetworkName.module.css
diff --git a/src/components/atoms/NetworkName.tsx b/src/components/@shared/atoms/NetworkName.tsx
similarity index 69%
rename from src/components/atoms/NetworkName.tsx
rename to src/components/@shared/atoms/NetworkName.tsx
index ebfe3c7bc..99aa0b0eb 100644
--- a/src/components/atoms/NetworkName.tsx
+++ b/src/components/@shared/atoms/NetworkName.tsx
@@ -1,12 +1,12 @@
import React, { ReactElement } from 'react'
-import { ReactComponent as EthIcon } from '../../images/eth.svg'
-import { ReactComponent as PolygonIcon } from '../../images/polygon.svg'
-import { ReactComponent as MoonbeamIcon } from '../../images/moonbeam.svg'
-import { ReactComponent as BscIcon } from '../../images/bsc.svg'
-import { ReactComponent as EnergywebIcon } from '../../images/energyweb.svg'
-import { getNetworkDataById, getNetworkDisplayName } from '../../utils/web3'
+import { ReactComponent as EthIcon } from '@images/eth.svg'
+import { ReactComponent as PolygonIcon } from '@images/polygon.svg'
+import { ReactComponent as MoonbeamIcon } from '@images/moonbeam.svg'
+import { ReactComponent as BscIcon } from '@images/bsc.svg'
+import { ReactComponent as EnergywebIcon } from '@images/energyweb.svg'
+import { getNetworkDataById, getNetworkDisplayName } from '@utils/web3'
import styles from './NetworkName.module.css'
-import useNetworkMetadata from '../../hooks/useNetworkMetadata'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
export function NetworkIcon({ name }: { name: string }): ReactElement {
const IconMapped = name.includes('ETH')
diff --git a/src/components/atoms/Price/Conversion.module.css b/src/components/@shared/atoms/Price/Conversion.module.css
similarity index 100%
rename from src/components/atoms/Price/Conversion.module.css
rename to src/components/@shared/atoms/Price/Conversion.module.css
diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/@shared/atoms/Price/Conversion.tsx
similarity index 94%
rename from src/components/atoms/Price/Conversion.tsx
rename to src/components/@shared/atoms/Price/Conversion.tsx
index 7dfe22761..0d47f7dd6 100644
--- a/src/components/atoms/Price/Conversion.tsx
+++ b/src/components/@shared/atoms/Price/Conversion.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState, ReactElement } from 'react'
import styles from './Conversion.module.css'
import classNames from 'classnames/bind'
import { formatCurrency, isCrypto } from '@coingecko/cryptoformat'
-import { useUserPreferences } from '../../../providers/UserPreferences'
-import { usePrices } from '../../../providers/Prices'
+import { useUserPreferences } from '@context/UserPreferences'
+import { usePrices } from '@context/Prices'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/Price/PriceUnit.module.css b/src/components/@shared/atoms/Price/PriceUnit.module.css
similarity index 100%
rename from src/components/atoms/Price/PriceUnit.module.css
rename to src/components/@shared/atoms/Price/PriceUnit.module.css
diff --git a/src/components/atoms/Price/PriceUnit.tsx b/src/components/@shared/atoms/Price/PriceUnit.tsx
similarity index 95%
rename from src/components/atoms/Price/PriceUnit.tsx
rename to src/components/@shared/atoms/Price/PriceUnit.tsx
index e91cd970c..e9ce599e7 100644
--- a/src/components/atoms/Price/PriceUnit.tsx
+++ b/src/components/@shared/atoms/Price/PriceUnit.tsx
@@ -3,7 +3,7 @@ import { formatCurrency } from '@coingecko/cryptoformat'
import classNames from 'classnames/bind'
import Conversion from './Conversion'
import styles from './PriceUnit.module.css'
-import { useUserPreferences } from '../../../providers/UserPreferences'
+import { useUserPreferences } from '@context/UserPreferences'
import Badge from '../Badge'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/Price/index.module.css b/src/components/@shared/atoms/Price/index.module.css
similarity index 100%
rename from src/components/atoms/Price/index.module.css
rename to src/components/@shared/atoms/Price/index.module.css
diff --git a/src/components/atoms/Price/index.tsx b/src/components/@shared/atoms/Price/index.tsx
similarity index 95%
rename from src/components/atoms/Price/index.tsx
rename to src/components/@shared/atoms/Price/index.tsx
index 8c31eceba..2af0a768e 100644
--- a/src/components/atoms/Price/index.tsx
+++ b/src/components/@shared/atoms/Price/index.tsx
@@ -3,7 +3,6 @@ import styles from './index.module.css'
import Loader from '../Loader'
import Tooltip from '../Tooltip'
import PriceUnit from './PriceUnit'
-import { BestPrice } from '../../../models/BestPrice'
export default function Price({
price,
diff --git a/src/components/atoms/Publisher/Add.module.css b/src/components/@shared/atoms/Publisher/Add.module.css
similarity index 100%
rename from src/components/atoms/Publisher/Add.module.css
rename to src/components/@shared/atoms/Publisher/Add.module.css
diff --git a/src/components/atoms/Publisher/Add.tsx b/src/components/@shared/atoms/Publisher/Add.tsx
similarity index 82%
rename from src/components/atoms/Publisher/Add.tsx
rename to src/components/@shared/atoms/Publisher/Add.tsx
index 6abd071f0..1b1734d94 100644
--- a/src/components/atoms/Publisher/Add.tsx
+++ b/src/components/@shared/atoms/Publisher/Add.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react'
-import { ReactComponent as External } from '../../../images/external.svg'
+import { ReactComponent as External } from '@images/external.svg'
import styles from './Add.module.css'
export default function Add(): ReactElement {
diff --git a/src/components/atoms/Publisher/index.module.css b/src/components/@shared/atoms/Publisher/index.module.css
similarity index 100%
rename from src/components/atoms/Publisher/index.module.css
rename to src/components/@shared/atoms/Publisher/index.module.css
diff --git a/src/components/atoms/Publisher/index.tsx b/src/components/@shared/atoms/Publisher/index.tsx
similarity index 86%
rename from src/components/atoms/Publisher/index.tsx
rename to src/components/@shared/atoms/Publisher/index.tsx
index 734fd1e02..af28ce1b5 100644
--- a/src/components/atoms/Publisher/index.tsx
+++ b/src/components/@shared/atoms/Publisher/index.tsx
@@ -1,14 +1,13 @@
import React, { ReactElement, useEffect, useState } from 'react'
import styles from './index.module.css'
import classNames from 'classnames/bind'
-import { Profile } from '../../../models/Profile'
import { Link } from 'gatsby'
-import get3BoxProfile from '../../../utils/profile'
-import { accountTruncate } from '../../../utils/web3'
+import get3BoxProfile from '@utils/profile'
+import { accountTruncate } from '@utils/web3'
import axios from 'axios'
import Add from './Add'
-import { useWeb3 } from '../../../providers/Web3'
-import { getEnsName } from '../../../utils/ens'
+import { useWeb3 } from '@context/Web3'
+import { getEnsName } from '@utils/ens'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/SearchFilterSection.module.css b/src/components/@shared/atoms/SearchFilterSection.module.css
similarity index 100%
rename from src/components/atoms/SearchFilterSection.module.css
rename to src/components/@shared/atoms/SearchFilterSection.module.css
diff --git a/src/components/atoms/SearchFilterSection.tsx b/src/components/@shared/atoms/SearchFilterSection.tsx
similarity index 100%
rename from src/components/atoms/SearchFilterSection.tsx
rename to src/components/@shared/atoms/SearchFilterSection.tsx
diff --git a/src/components/atoms/Status.module.css b/src/components/@shared/atoms/Status.module.css
similarity index 100%
rename from src/components/atoms/Status.module.css
rename to src/components/@shared/atoms/Status.module.css
diff --git a/src/components/atoms/Status.tsx b/src/components/@shared/atoms/Status.tsx
similarity index 100%
rename from src/components/atoms/Status.tsx
rename to src/components/@shared/atoms/Status.tsx
diff --git a/src/components/atoms/SuccessConfetti.module.css b/src/components/@shared/atoms/SuccessConfetti.module.css
similarity index 100%
rename from src/components/atoms/SuccessConfetti.module.css
rename to src/components/@shared/atoms/SuccessConfetti.module.css
diff --git a/src/components/atoms/SuccessConfetti.tsx b/src/components/@shared/atoms/SuccessConfetti.tsx
similarity index 100%
rename from src/components/atoms/SuccessConfetti.tsx
rename to src/components/@shared/atoms/SuccessConfetti.tsx
diff --git a/src/components/atoms/Table.module.css b/src/components/@shared/atoms/Table.module.css
similarity index 92%
rename from src/components/atoms/Table.module.css
rename to src/components/@shared/atoms/Table.module.css
index 07d4f3317..cd3b05044 100644
--- a/src/components/atoms/Table.module.css
+++ b/src/components/@shared/atoms/Table.module.css
@@ -74,9 +74,9 @@ div [class*='Table-module'] {
}
.arrow {
- composes: arrow from '../molecules/Pagination.module.css';
+ composes: arrow from '@shared/Pagination.module.css';
}
.previous {
- composes: previous from '../molecules/Pagination.module.css';
+ composes: previous from '@shared/Pagination.module.css';
}
diff --git a/src/components/atoms/Table.tsx b/src/components/@shared/atoms/Table.tsx
similarity index 91%
rename from src/components/atoms/Table.tsx
rename to src/components/@shared/atoms/Table.tsx
index 8665d4709..650c6db3c 100644
--- a/src/components/atoms/Table.tsx
+++ b/src/components/@shared/atoms/Table.tsx
@@ -1,9 +1,9 @@
import React, { ReactElement } from 'react'
import DataTable, { IDataTableProps } from 'react-data-table-component'
import Loader from './Loader'
-import Pagination from '../molecules/Pagination'
+import Pagination from '@shared/Pagination'
import styles from './Table.module.css'
-import { useUserPreferences } from '../../providers/UserPreferences'
+import { useUserPreferences } from '@context/UserPreferences'
interface TableProps extends IDataTableProps {
isLoading?: boolean
diff --git a/src/components/atoms/Tabs.module.css b/src/components/@shared/atoms/Tabs.module.css
similarity index 100%
rename from src/components/atoms/Tabs.module.css
rename to src/components/@shared/atoms/Tabs.module.css
diff --git a/src/components/atoms/Tabs.tsx b/src/components/@shared/atoms/Tabs.tsx
similarity index 100%
rename from src/components/atoms/Tabs.tsx
rename to src/components/@shared/atoms/Tabs.tsx
diff --git a/src/components/atoms/Tags.module.css b/src/components/@shared/atoms/Tags.module.css
similarity index 100%
rename from src/components/atoms/Tags.module.css
rename to src/components/@shared/atoms/Tags.module.css
diff --git a/src/components/atoms/Tags.tsx b/src/components/@shared/atoms/Tags.tsx
similarity index 100%
rename from src/components/atoms/Tags.tsx
rename to src/components/@shared/atoms/Tags.tsx
diff --git a/src/components/atoms/Time.tsx b/src/components/@shared/atoms/Time.tsx
similarity index 100%
rename from src/components/atoms/Time.tsx
rename to src/components/@shared/atoms/Time.tsx
diff --git a/src/components/atoms/Tooltip.module.css b/src/components/@shared/atoms/Tooltip.module.css
similarity index 100%
rename from src/components/atoms/Tooltip.module.css
rename to src/components/@shared/atoms/Tooltip.module.css
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/@shared/atoms/Tooltip.tsx
similarity index 95%
rename from src/components/atoms/Tooltip.tsx
rename to src/components/@shared/atoms/Tooltip.tsx
index 08a5039a2..01ccdb0c3 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/@shared/atoms/Tooltip.tsx
@@ -3,9 +3,8 @@ import classNames from 'classnames/bind'
import loadable from '@loadable/component'
import { useSpring, animated } from 'react-spring'
import styles from './Tooltip.module.css'
-import { ReactComponent as Info } from '../../images/info.svg'
+import { ReactComponent as Info } from '@images/info.svg'
import { Placement } from 'tippy.js'
-import Markdown from './Markdown'
const cx = classNames.bind(styles)
diff --git a/src/components/atoms/UserLiquidity.module.css b/src/components/@shared/atoms/UserLiquidity.module.css
similarity index 100%
rename from src/components/atoms/UserLiquidity.module.css
rename to src/components/@shared/atoms/UserLiquidity.module.css
diff --git a/src/components/atoms/UserLiquidity.tsx b/src/components/@shared/atoms/UserLiquidity.tsx
similarity index 100%
rename from src/components/atoms/UserLiquidity.tsx
rename to src/components/@shared/atoms/UserLiquidity.tsx
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3834994bb..ecae5a9aa 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,15 +1,15 @@
import React, { ReactElement } from 'react'
import { graphql, PageProps, useStaticQuery } from 'gatsby'
-import Alert from './atoms/Alert'
-import Footer from './organisms/Footer'
-import Header from './organisms/Header'
+import Alert from '@shared/atoms/Alert'
+import Footer from './Footer/Footer'
+import Header from './Header/Header'
import Styles from '../global/Styles'
-import { useWeb3 } from '../providers/Web3'
-import { useSiteMetadata } from '../hooks/useSiteMetadata'
-import { useAccountPurgatory } from '../hooks/useAccountPurgatory'
-import AnnouncementBanner from './atoms/AnnouncementBanner'
+import { useWeb3 } from '@context/Web3'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
+import AnnouncementBanner from '@shared/atoms/AnnouncementBanner'
import styles from './App.module.css'
-import PrivacyPreferenceCenter from './organisms/PrivacyPreferenceCenter'
+import PrivacyPreferenceCenter from './Privacy/PrivacyPreferenceCenter'
const contentQuery = graphql`
query AppQuery {
diff --git a/src/components/organisms/AssetActions/Compute/FormComputeDataset.module.css b/src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
similarity index 100%
rename from src/components/organisms/AssetActions/Compute/FormComputeDataset.module.css
rename to src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
diff --git a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
similarity index 92%
rename from src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
rename to src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
index 7a2196698..bff871984 100644
--- a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
@@ -1,18 +1,16 @@
import React, { ReactElement, useEffect, useState } from 'react'
import styles from './FormComputeDataset.module.css'
import { Field, Form, FormikContextType, useFormikContext } from 'formik'
-import Input from '../../../atoms/Input'
-import { FormFieldProps } from '../../../../@types/Form'
+import Input from '@shared/Form/Input'
import { useStaticQuery, graphql } from 'gatsby'
import { DDO } from '@oceanprotocol/lib'
-import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
-import compareAsBN from '../../../../utils/compareAsBN'
-import ButtonBuy from '../../../atoms/ButtonBuy'
+import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
+import { compareAsBN } from '@utils/numbers'
+import ButtonBuy from '@shared/atoms/ButtonBuy'
import PriceOutput from './PriceOutput'
-import { useAsset } from '../../../../providers/Asset'
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
-import { BestPrice } from '../../../../models/BestPrice'
+import { useAsset } from '@context/Asset'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
const contentQuery = graphql`
query StartComputeDatasetQuery {
diff --git a/src/components/organisms/AssetActions/Compute/PriceOutput.module.css b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
similarity index 100%
rename from src/components/organisms/AssetActions/Compute/PriceOutput.module.css
rename to src/components/Asset/AssetActions/Compute/PriceOutput.module.css
diff --git a/src/components/organisms/AssetActions/Compute/PriceOutput.tsx b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
similarity index 91%
rename from src/components/organisms/AssetActions/Compute/PriceOutput.tsx
rename to src/components/Asset/AssetActions/Compute/PriceOutput.tsx
index 05a821f19..9b38571b9 100644
--- a/src/components/organisms/AssetActions/Compute/PriceOutput.tsx
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.tsx
@@ -1,8 +1,7 @@
import React, { ReactElement } from 'react'
-import { BestPrice } from '../../../../models/BestPrice'
-import { useAsset } from '../../../../providers/Asset'
-import PriceUnit from '../../../atoms/Price/PriceUnit'
-import Tooltip from '../../../atoms/Tooltip'
+import { useAsset } from '../../../../context/Asset'
+import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import Tooltip from '@shared/atoms/Tooltip'
import styles from './PriceOutput.module.css'
interface PriceOutputProps {
diff --git a/src/models/FormStartComputeDataset.ts b/src/components/Asset/AssetActions/Compute/_constants.ts
similarity index 100%
rename from src/models/FormStartComputeDataset.ts
rename to src/components/Asset/AssetActions/Compute/_constants.ts
diff --git a/src/components/organisms/AssetActions/Compute/index.module.css b/src/components/Asset/AssetActions/Compute/index.module.css
similarity index 100%
rename from src/components/organisms/AssetActions/Compute/index.module.css
rename to src/components/Asset/AssetActions/Compute/index.module.css
diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
similarity index 92%
rename from src/components/organisms/AssetActions/Compute/index.tsx
rename to src/components/Asset/AssetActions/Compute/index.tsx
index 64978f703..9989129f8 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -6,25 +6,21 @@ import {
publisherTrustedAlgorithm
} from '@oceanprotocol/lib'
import { toast } from 'react-toastify'
-import Price from '../../../atoms/Price'
-import File from '../../../atoms/File'
-import Alert from '../../../atoms/Alert'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
-import { usePricing } from '../../../../hooks/usePricing'
-import { useAsset } from '../../../../providers/Asset'
+import Price from '@shared/atoms/Price'
+import File from '@shared/atoms/File'
+import Alert from '@shared/atoms/Alert'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
+import { usePricing } from '@hooks/usePricing'
+import { useAsset } from '@context/Asset'
import {
generateBaseQuery,
getFilterTerm,
- queryMetadata,
transformDDOToAssetSelection
-} from '../../../../utils/aquarius'
+} from '@utils/aquarius'
import { Formik } from 'formik'
-import {
- getInitialValues,
- validationSchema
-} from '../../../../models/FormStartComputeDataset'
+import { getInitialValues, validationSchema } from './_constants'
import {
ComputeAlgorithm,
ComputeOutput
@@ -32,17 +28,16 @@ import {
import axios from 'axios'
import FormStartComputeDataset from './FormComputeDataset'
import styles from './index.module.css'
-import SuccessConfetti from '../../../atoms/SuccessConfetti'
-import Button from '../../../atoms/Button'
-import { secondsToString } from '../../../../utils/metadata'
-import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
+import SuccessConfetti from '@shared/atoms/SuccessConfetti'
+import Button from '@shared/atoms/Button'
+import { secondsToString } from '@utils/metadata'
+import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
-import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
-import AssetActionHistoryTable from '../../AssetActionHistoryTable'
-import ComputeJobs from '../../../pages/Profile/History/ComputeJobs'
-import { BestPrice } from '../../../../models/BestPrice'
-import { useCancelToken } from '../../../../hooks/useCancelToken'
-import { useIsMounted } from '../../../../hooks/useIsMounted'
+import { getPreviousOrders, getPrice } from '@utils/subgraph'
+import AssetActionHistoryTable from '@shared/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'
diff --git a/src/components/organisms/AssetActions/Consume.module.css b/src/components/Asset/AssetActions/Consume.module.css
similarity index 100%
rename from src/components/organisms/AssetActions/Consume.module.css
rename to src/components/Asset/AssetActions/Consume.module.css
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/Asset/AssetActions/Consume.tsx
similarity index 95%
rename from src/components/organisms/AssetActions/Consume.tsx
rename to src/components/Asset/AssetActions/Consume.tsx
index 4488b6119..3a6b04d2a 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/Asset/AssetActions/Consume.tsx
@@ -1,19 +1,19 @@
import React, { ReactElement, useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
-import File from '../../atoms/File'
-import Price from '../../atoms/Price'
+import File from '@shared/atoms/File'
+import Price from '@shared/atoms/Price'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
-import { useAsset } from '../../../providers/Asset'
+import { useAsset } from '../../../context/Asset'
import { gql } from 'urql'
import { fetchData, getQueryContext } from '../../../utils/subgraph'
import { OrdersData } from '../../../@types/apollo/OrdersData'
import BigNumber from 'bignumber.js'
-import { useOcean } from '../../../providers/Ocean'
-import { useWeb3 } from '../../../providers/Web3'
+import { useOcean } from '../../../context/Ocean'
+import { useWeb3 } from '../../../context/Web3'
import { usePricing } from '../../../hooks/usePricing'
import { useConsume } from '../../../hooks/useConsume'
-import ButtonBuy from '../../atoms/ButtonBuy'
+import ButtonBuy from '@shared/atoms/ButtonBuy'
import { secondsToString } from '../../../utils/metadata'
import AlgorithmDatasetsListForCompute from '../AssetContent/AlgorithmDatasetsListForCompute'
import styles from './Consume.module.css'
diff --git a/src/components/organisms/AssetActions/Edit/DebugEditCompute.tsx b/src/components/Asset/AssetActions/Edit/DebugEditCompute.tsx
similarity index 83%
rename from src/components/organisms/AssetActions/Edit/DebugEditCompute.tsx
rename to src/components/Asset/AssetActions/Edit/DebugEditCompute.tsx
index 83aaa02ba..47921e097 100644
--- a/src/components/organisms/AssetActions/Edit/DebugEditCompute.tsx
+++ b/src/components/Asset/AssetActions/Edit/DebugEditCompute.tsx
@@ -1,9 +1,8 @@
import { DDO, ServiceComputePrivacy } from '@oceanprotocol/lib'
import React, { ReactElement, useEffect, useState } from 'react'
-import { ComputePrivacyForm } from '../../../../models/FormEditComputeDataset'
-import { useOcean } from '../../../../providers/Ocean'
+import { useOcean } from '../../../../context/Ocean'
import { transformComputeFormToServiceComputePrivacy } from '../../../../utils/compute'
-import DebugOutput from '../../../atoms/DebugOutput'
+import DebugOutput from '@shared/atoms/DebugOutput'
export default function DebugEditCompute({
values,
diff --git a/src/components/organisms/AssetActions/Edit/DebugEditMetadata.tsx b/src/components/Asset/AssetActions/Edit/DebugEditMetadata.tsx
similarity index 69%
rename from src/components/organisms/AssetActions/Edit/DebugEditMetadata.tsx
rename to src/components/Asset/AssetActions/Edit/DebugEditMetadata.tsx
index b08f584d0..0285f012b 100644
--- a/src/components/organisms/AssetActions/Edit/DebugEditMetadata.tsx
+++ b/src/components/Asset/AssetActions/Edit/DebugEditMetadata.tsx
@@ -1,14 +1,14 @@
import { DDO } from '@oceanprotocol/lib'
import React, { ReactElement } from 'react'
-import { MetadataPublishFormDataset } from '../../../../@types/MetaData'
-import { transformPublishFormToMetadata } from '../../../../utils/metadata'
-import DebugOutput from '../../../atoms/DebugOutput'
+import { transformPublishFormToMetadata } from '@utils/metadata'
+import DebugOutput from '@shared/atoms/DebugOutput'
+import { FormPublishData } from '../../../Publish/_types'
export default function Debug({
values,
ddo
}: {
- values: Partial
+ values: Partial
ddo: DDO
}): ReactElement {
const newDdo = {
diff --git a/src/components/organisms/AssetActions/Edit/EditAdvancedSettings.tsx b/src/components/Asset/AssetActions/Edit/EditAdvancedSettings.tsx
similarity index 78%
rename from src/components/organisms/AssetActions/Edit/EditAdvancedSettings.tsx
rename to src/components/Asset/AssetActions/Edit/EditAdvancedSettings.tsx
index 2854c0f41..da40a5dee 100644
--- a/src/components/organisms/AssetActions/Edit/EditAdvancedSettings.tsx
+++ b/src/components/Asset/AssetActions/Edit/EditAdvancedSettings.tsx
@@ -1,26 +1,18 @@
import { Formik } from 'formik'
import React, { ReactElement, useState } from 'react'
-import { useAsset } from '../../../../providers/Asset'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { useAsset } from '@context/Asset'
+import { useUserPreferences } from '@context/UserPreferences'
import styles from './index.module.css'
import { Logger, CredentialType, DDO } from '@oceanprotocol/lib'
-import MetadataFeedback from '../../../molecules/MetadataFeedback'
import { graphql, useStaticQuery } from 'gatsby'
-import { useWeb3 } from '../../../../providers/Web3'
-import { useOcean } from '../../../../providers/Ocean'
-import FormAdvancedSettings from './FormAdvancedSettings'
-import {
- AdvancedSettingsForm,
- getInitialValues,
- validationSchema
-} from '../../../../models/FormEditCredential'
-import DebugEditCredential from './DebugEditAdvancedSettings'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import {
- setMinterToDispenser,
- setMinterToPublisher
-} from '../../../../utils/freePrice'
-import Web3Feedback from '../../../molecules/Web3Feedback'
+import { useWeb3 } from '@context/Web3'
+import { useOcean } from '@context/Ocean'
+// import FormAdvancedSettings from './FormAdvancedSettings'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
+import Web3Feedback from '@shared/Web3Feedback'
+import { getInitialValues, validationSchema } from './_constants'
+import MetadataFeedback from '../../../Publish/MetadataFeedback'
const contentQuery = graphql`
query EditAvanceSettingsQuery {
@@ -164,21 +156,12 @@ export default function EditAdvancedSettings({
<>
{content.description}
-
+ /> */}
- {debug === true && (
-
-
-
- )}
>
)
}
diff --git a/src/components/organisms/AssetActions/Edit/EditComputeDataset.tsx b/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx
similarity index 87%
rename from src/components/organisms/AssetActions/Edit/EditComputeDataset.tsx
rename to src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx
index c9b5976c7..b37b157a6 100644
--- a/src/components/organisms/AssetActions/Edit/EditComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Edit/EditComputeDataset.tsx
@@ -1,26 +1,19 @@
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
import { Formik } from 'formik'
import React, { ReactElement, useState } from 'react'
-import {
- validationSchema,
- getInitialValues,
- ComputePrivacyForm
-} from '../../../../models/FormEditComputeDataset'
-import { useAsset } from '../../../../providers/Asset'
+import { useAsset } from '@context/Asset'
import FormEditComputeDataset from './FormEditComputeDataset'
import { Logger, ServiceComputePrivacy } from '@oceanprotocol/lib'
-import MetadataFeedback from '../../../molecules/MetadataFeedback'
import { graphql, useStaticQuery } from 'gatsby'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
+import { useUserPreferences } from '@context/UserPreferences'
import DebugEditCompute from './DebugEditCompute'
import styles from './index.module.css'
-import { transformComputeFormToServiceComputePrivacy } from '../../../../utils/compute'
-import {
- setMinterToDispenser,
- setMinterToPublisher
-} from '../../../../utils/freePrice'
-import Web3Feedback from '../../../molecules/Web3Feedback'
+import { transformComputeFormToServiceComputePrivacy } from '@utils/compute'
+import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
+import Web3Feedback from '@shared/Web3Feedback'
+import MetadataFeedback from '../../../Publish/MetadataFeedback'
+import { getInitialValues, validationSchema } from './_constants'
const contentQuery = graphql`
query EditComputeDataQuery {
diff --git a/src/components/organisms/AssetActions/Edit/FormActions.module.css b/src/components/Asset/AssetActions/Edit/FormActions.module.css
similarity index 100%
rename from src/components/organisms/AssetActions/Edit/FormActions.module.css
rename to src/components/Asset/AssetActions/Edit/FormActions.module.css
diff --git a/src/components/organisms/AssetActions/Edit/FormActions.tsx b/src/components/Asset/AssetActions/Edit/FormActions.tsx
similarity index 66%
rename from src/components/organisms/AssetActions/Edit/FormActions.tsx
rename to src/components/Asset/AssetActions/Edit/FormActions.tsx
index d674578b9..61173634d 100644
--- a/src/components/organisms/AssetActions/Edit/FormActions.tsx
+++ b/src/components/Asset/AssetActions/Edit/FormActions.tsx
@@ -1,10 +1,9 @@
import { FormikContextType, useFormikContext } from 'formik'
import React, { ReactElement } from 'react'
-import { AdvancedSettingsForm } from '../../../../models/FormEditCredential'
-import { useAsset } from '../../../../providers/Asset'
-import { useOcean } from '../../../../providers/Ocean'
-import { useWeb3 } from '../../../../providers/Web3'
-import Button from '../../../atoms/Button'
+import { useAsset } from '@context/Asset'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
+import Button from '@shared/atoms/Button'
import styles from './FormActions.module.css'
export default function FormActions({
@@ -17,8 +16,7 @@ export default function FormActions({
const { accountId } = useWeb3()
const { ocean } = useOcean()
const { isAssetNetwork } = useAsset()
- const { isValid }: FormikContextType> =
- useFormikContext()
+ const { isValid }: FormikContextType> = useFormikContext()
return (