reorganize all the things

package-lock.json

@@ -77658,4 +77658,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
+}

src/@context/Profile.tsx

@@ -15,9 +15,16 @@ import {
 import { useUserPreferences } from './UserPreferences'
 import { PoolShares_poolShares as PoolShare } from '../@types/apollo/PoolShares'
 import { DDO, Logger } from '@oceanprotocol/lib'
+<<<<<<< HEAD:src/@context/Profile.tsx
 import { getDownloadAssets, getPublishedAssets } from '@utils/aquarius'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { accountTruncate } from '@utils/web3'
+=======
+import { getDownloadAssets, getPublishedAssets } from '../utils/aquarius'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
+import { Profile } from '../@types/Profile'
+import { accountTruncate } from '../utils/web3'
+>>>>>>> 14d71ad2 (reorganize all the things):src/context/Profile.tsx
 import axios, { CancelToken } from 'axios'
 import ethereumAddress from 'ethereum-address'
 import get3BoxProfile from '@utils/profile'

src/@context/UserPreferences.tsx

@@ -7,7 +7,11 @@ import React, {
   useEffect
 } from 'react'
 import { Logger, LogLevel } from '@oceanprotocol/lib'
+<<<<<<< HEAD:src/@context/UserPreferences.tsx
 import { isBrowser } from '@utils/index'
+=======
+import { isBrowser } from '../utils'
+>>>>>>> 14d71ad2 (reorganize all the things):src/context/UserPreferences.tsx
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 
 interface UserPreferencesValue {

src/@context/Web3.tsx

@@ -18,7 +18,14 @@ import { getOceanBalance } from '@utils/ocean'
 import useNetworkMetadata, {
   getNetworkDataById,
   getNetworkDisplayName
+<<<<<<< HEAD:src/@context/Web3.tsx
 } from '@hooks/useNetworkMetadata'
+=======
+} from '../utils/web3'
+import { getEnsName } from '../utils/ens'
+import { getOceanBalance } from '../utils/ocean'
+import useNetworkMetadata from '../hooks/useNetworkMetadata'
+>>>>>>> 14d71ad2 (reorganize all the things):src/context/Web3.tsx
 
 interface Web3ProviderValue {
   web3: Web3

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

@@ -2,8 +2,13 @@ import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import { addTokenToWallet } from '@utils/web3'
 import { useWeb3 } from '@context/Web3'
+<<<<<<< HEAD:src/components/@shared/AddToken/index.tsx
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
+=======
+import Button from './Button'
+import styles from './AddToken.module.css'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AddToken.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -1,8 +1,14 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
+<<<<<<< HEAD:src/components/@shared/AnnouncementBanner/index.tsx
 import Markdown from '@shared/Markdown'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
+=======
+import Markdown from './Markdown'
+import Button from './Button'
+import styles from './AnnouncementBanner.module.css'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AnnouncementBanner.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import Dotdotdot from 'react-dotdotdot'
-import Link from 'next/link'
-import PriceUnit from '@shared/Price/PriceUnit'
+import { Link } from 'gatsby'
+import PriceUnit from '@shared/atoms/Price/PriceUnit'
 import Loader from '@shared/atoms/Loader'
 import styles from './AssetComputeList.module.css'
 import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'
@@ -24,20 +24,22 @@ export default function AssetComputeSelection({
           <Empty />
         ) : (
           assets.map((asset: AssetSelectionAsset) => (
-            <Link href={`/asset/${asset.did}`} key={asset.did}>
-              <a className={styles.row}>
-                <div className={styles.info}>
-                  <h3 className={styles.title}>
-                    <Dotdotdot clamp={1} tagName="span">
-                      {asset.name}
-                    </Dotdotdot>
-                  </h3>
-                  <Dotdotdot clamp={1} tagName="code" className={styles.did}>
-                    {asset.symbol} | {asset.did}
+            <Link
+              to={`/asset/${asset.did}`}
+              className={styles.row}
+              key={asset.did}
+            >
+              <div className={styles.info}>
+                <h3 className={styles.title}>
+                  <Dotdotdot clamp={1} tagName="span">
+                    {asset.name}
                   </Dotdotdot>
-                </div>
-                <PriceUnit price={asset.price} small className={styles.price} />
-              </a>
+                </h3>
+                <Dotdotdot clamp={1} tagName="code" className={styles.did}>
+                  {asset.symbol} | {asset.did}
+                </Dotdotdot>
+              </div>
+              <PriceUnit price={asset.price} small className={styles.price} />
             </Link>
           ))
         )}

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import Link from 'next/link'
+import { Link } from 'gatsby'
 import Dotdotdot from 'react-dotdotdot'
-import Price from '@shared/Price'
+import Price from '../atoms/Price'
 import { DDO } from '@oceanprotocol/lib'
 import removeMarkdown from 'remove-markdown'
-import Publisher from '@shared/Publisher'
-import AssetType from '@shared/AssetType'
-import NetworkName from '@shared/NetworkName'
+import Publisher from '../atoms/Publisher'
+import AssetType from '../atoms/AssetType'
+import NetworkName from '../atoms/NetworkName'
 import styles from './AssetTeaser.module.css'
 
 declare type AssetTeaserProps = {
@@ -29,40 +29,38 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 
   return (
     <article className={`${styles.teaser} ${styles[type]}`}>
-      <Link href={`/asset/${ddo.id}`}>
-        <a className={styles.link}>
-          <header className={styles.header}>
-            <div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
-            <Dotdotdot clamp={3}>
-              <h1 className={styles.title}>{name}</h1>
-            </Dotdotdot>
-            {!noPublisher && (
-              <Publisher account={owner} minimal className={styles.publisher} />
+      <Link to={`/asset/${ddo.id}`} className={styles.link}>
+        <header className={styles.header}>
+          <div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
+          <Dotdotdot clamp={3}>
+            <h1 className={styles.title}>{name}</h1>
+          </Dotdotdot>
+          {!noPublisher && (
+            <Publisher account={owner} minimal className={styles.publisher} />
+          )}
+        </header>
+
+        <AssetType
+          type={type}
+          accessType={accessType}
+          className={styles.typeDetails}
+        />
+
+        <div className={styles.content}>
+          <Dotdotdot tagName="p" clamp={3}>
+            {removeMarkdown(
+              attributes?.additionalInformation?.description?.substring(
+                0,
+                300
+              ) || ''
             )}
-          </header>
+          </Dotdotdot>
+        </div>
 
-          <AssetType
-            type={type}
-            accessType={accessType}
-            className={styles.typeDetails}
-          />
-
-          <div className={styles.content}>
-            <Dotdotdot tagName="p" clamp={3}>
-              {removeMarkdown(
-                attributes?.additionalInformation?.description?.substring(
-                  0,
-                  300
-                ) || ''
-              )}
-            </Dotdotdot>
-          </div>
-
-          <footer className={styles.foot}>
-            <Price price={price} small />
-            <NetworkName networkId={ddo.chainId} className={styles.network} />
-          </footer>
-        </a>
+        <footer className={styles.foot}>
+          <Price price={price} small />
+          <NetworkName networkId={ddo.chainId} className={styles.network} />
+        </footer>
       </Link>
     </article>
   )

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

@@ -1,9 +1,15 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
+<<<<<<< HEAD:src/components/@shared/AssetType/index.tsx
 import Compute from '@images/compute.svg'
 import Download from '@images/download.svg'
 import 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'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/AssetType.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -1,9 +1,17 @@
 import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
+<<<<<<< HEAD:src/components/@shared/ExplorerLink/index.tsx
 import External from '@images/external.svg'
 import classNames from 'classnames/bind'
 import { ConfigHelperConfig } from '@oceanprotocol/lib'
 import { useOcean } from '@context/Ocean'
 import styles from './index.module.css'
+=======
+import { ReactComponent as External } from '@images/external.svg'
+import classNames from 'classnames/bind'
+import { ConfigHelperConfig } from '@oceanprotocol/lib'
+import { useOcean } from '@context/Ocean'
+import styles from './ExplorerLink.module.css'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/ExplorerLink.tsx
 import { getOceanConfig } from '@utils/ocean'
 
 const cx = classNames.bind(styles)

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

@@ -3,8 +3,13 @@ import { File as FileMetadata } from '@oceanprotocol/lib'
 import filesize from 'filesize'
 import classNames from 'classnames/bind'
 import cleanupContentType from '@utils/cleanupContentType'
+<<<<<<< HEAD:src/components/@shared/FileIcon/index.tsx
 import styles from './index.module.css'
 import Loader from '@shared/atoms/Loader'
+=======
+import styles from './File.module.css'
+import Loader from './Loader'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/File.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
-import { prettySize } from './utils'
+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/Terms.tsx

@@ -2,8 +2,18 @@ import React, { ReactElement } from 'react'
 import { InputProps } from '@shared/Form/Input'
 import InputElement from '@shared/Form/Input/InputElement'
 import styles from './Terms.module.css'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const query = graphql`
+  query TermsQuery {
+    terms: markdownRemark(fields: { slug: { eq: "/terms" } }) {
+      html
+    }
+  }
+`
 
 export default function Terms(props: InputProps): ReactElement {
+  const data = useStaticQuery(query)
   const termsProps: InputProps = {
     ...props,
     defaultChecked: props.value.toString() === 'true'
@@ -11,6 +21,10 @@ export default function Terms(props: InputProps): ReactElement {
 
   return (
     <>
+      <div
+        className={styles.terms}
+        dangerouslySetInnerHTML={{ __html: data.terms.html }}
+      />
       <InputElement {...termsProps} type="checkbox" />
     </>
   )

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

@@ -1,9 +1,23 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
+<<<<<<< HEAD:src/components/@shared/Pagination/index.tsx
 import styles from './index.module.css'
 import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
 import Arrow from '@images/arrow.svg'
 import { PaginationProps } from './_types'
+=======
+import styles from './Pagination.module.css'
+import { MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS } from '@utils/aquarius'
+import { ReactComponent as Arrow } from '@images/arrow.svg'
+
+interface PaginationProps {
+  totalPages?: number
+  currentPage?: number
+  onChangePage?(selected: number): void
+  rowsPerPage?: number
+  rowCount?: number
+}
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Pagination.tsx
 
 export default function Pagination({
   totalPages,

src/components/@shared/Price/PriceUnit.tsx

@@ -4,7 +4,11 @@ import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '@context/UserPreferences'
+<<<<<<< HEAD:src/components/@shared/Price/PriceUnit.tsx
 import Badge from '@shared/atoms/Badge'
+=======
+import Badge from '../Badge'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Price/PriceUnit.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -1,5 +1,9 @@
 import React, { ReactElement } from 'react'
+<<<<<<< HEAD:src/components/@shared/Publisher/Add.tsx
 import External from '@images/external.svg'
+=======
+import { ReactComponent as External } from '@images/external.svg'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/Add.tsx
 import styles from './Add.module.css'
 
 export default function Add(): ReactElement {

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

@@ -1,14 +1,21 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
+<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
 import Link from 'next/link'
+=======
+import { Link } from 'gatsby'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx
 import get3BoxProfile from '@utils/profile'
 import { accountTruncate } from '@utils/web3'
 import axios from 'axios'
 import Add from './Add'
 import { useWeb3 } from '@context/Web3'
 import { getEnsName } from '@utils/ens'
+<<<<<<< HEAD:src/components/@shared/Publisher/index.tsx
 import { useIsMounted } from '@hooks/useIsMounted'
+=======
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/atoms/Publisher/index.tsx
 
 const cx = classNames.bind(styles)
 

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

@@ -2,7 +2,11 @@ import React, { ReactElement } from 'react'
 import Tooltip from '@shared/atoms/Tooltip'
 import Status from '@shared/atoms/Status'
 import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
+<<<<<<< HEAD:src/components/@shared/SyncStatus/index.tsx
 import styles from './index.module.css'
+=======
+import styles from './SyncStatus.module.css'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/SyncStatus.tsx
 
 export default function SyncStatus(): ReactElement {
   const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()

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

@@ -1,10 +1,79 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
+<<<<<<< HEAD:src/components/@shared/TokenApproval/index.tsx
 import { useOcean } from '@context/Ocean'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
 import { getOceanConfig } from '@utils/ocean'
 import { ButtonApprove } from './ButtonApprove'
+=======
+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'
+
+const query = graphql`
+  query {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            pool {
+              tooltips {
+                approveSpecific
+                approveInfinite
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+function ButtonApprove({
+  amount,
+  coin,
+  approveTokens,
+  isLoading
+}: {
+  amount: string
+  coin: string
+  approveTokens: (amount: string) => void
+  isLoading: boolean
+}) {
+  // Get content
+  const data = useStaticQuery(query)
+  const content = data.content.edges[0].node.childContentJson.pool.tooltips
+
+  const { infiniteApproval } = useUserPreferences()
+
+  return isLoading ? (
+    <Loader message={`Approving ${coin}...`} />
+  ) : infiniteApproval ? (
+    <Button
+      style="primary"
+      size="small"
+      disabled={parseInt(amount) < 1}
+      onClick={() => approveTokens(`${2 ** 53 - 1}`)}
+    >
+      Approve {coin}{' '}
+      <Tooltip content={content.approveInfinite.replace('COIN', coin)} />
+    </Button>
+  ) : (
+    <Button style="primary" size="small" onClick={() => approveTokens(amount)}>
+      Approve {amount} {coin}
+      <Tooltip content={content.approveSpecific.replace('COIN', coin)} />
+    </Button>
+  )
+}
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/TokenApproval.tsx
 
 export default function TokenApproval({
   actionButton,

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

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import { useWeb3 } from '@context/Web3'
+<<<<<<< HEAD:src/components/@shared/WalletNetworkSwitcher/index.tsx
 import { addCustomNetwork } from '@utils/web3'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
@@ -7,6 +8,16 @@ import useNetworkMetadata, {
   getNetworkDataById,
   getNetworkDisplayName
 } from '@hooks/useNetworkMetadata'
+=======
+import {
+  addCustomNetwork,
+  getNetworkDisplayName,
+  getNetworkDataById
+} from '@utils/web3'
+import Button from '@shared/atoms/Button'
+import styles from './WalletNetworkSwitcher.module.css'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/WalletNetworkSwitcher.tsx
 import { useAsset } from '@context/Asset'
 
 export default function WalletNetworkSwitcher(): ReactElement {

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

@@ -1,8 +1,13 @@
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useWeb3 } from '@context/Web3'
 import Status from '@shared/atoms/Status'
+<<<<<<< HEAD:src/components/@shared/Web3Feedback/index.tsx
 import styles from './index.module.css'
 import WalletNetworkSwitcher from '../WalletNetworkSwitcher'
+=======
+import styles from './Web3Feedback.module.css'
+import WalletNetworkSwitcher from './WalletNetworkSwitcher'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/Web3Feedback.tsx
 import { useGraphSyncStatus } from '@hooks/useGraphSyncStatus'
 
 export declare type Web3Error = {

src/components/Asset/AssetActions/AssetActionHistoryTable.tsx

@@ -1,7 +1,15 @@
+<<<<<<< HEAD:src/components/Asset/AssetActions/AssetActionHistoryTable.tsx
 import React, { ReactElement, ReactNode, useState } from 'react'
 import Button from '@shared/atoms/Button'
 import styles from './AssetActionHistoryTable.module.css'
 import Caret from '@images/caret.svg'
+=======
+import React, { ReactElement, useState } from 'react'
+import Button from '@shared/atoms/Button'
+import styles from './AssetActionHistoryTable.module.css'
+import { ReactComponent as Caret } from '@images/caret.svg'
+import { ReactNode } from 'react-markdown'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/AssetActionHistoryTable.tsx
 
 export default function AssetActionHistoryTable({
   title,

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

@@ -17,7 +17,6 @@ import { useAsset } from '@context/Asset'
 import {
   generateBaseQuery,
   getFilterTerm,
-  queryMetadata,
   transformDDOToAssetSelection
 } from '@utils/aquarius'
 import { Formik } from 'formik'
@@ -34,7 +33,7 @@ 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 AssetActionHistoryTable from '@shared/AssetActionHistoryTable'
 import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'

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

@@ -1,31 +0,0 @@
-import { DDO } from '@oceanprotocol/lib'
-// import React, { ReactElement } from 'react'
-// import { transformPublishFormToMetadata } from '@utils/metadata'
-// import DebugOutput from '@shared/DebugOutput'
-// import { FormPublishData } from '../../../Publish/_types'
-
-// export default function Debug({
-//   values,
-//   ddo
-// }: {
-//   values: Partial<FormPublishData>
-//   ddo: DDO
-// }): ReactElement {
-//   const newDdo = {
-//     '@context': 'https://w3id.org/did/v1',
-//     service: [
-//       {
-//         index: 0,
-//         type: 'metadata',
-//         attributes: { ...transformPublishFormToMetadata(values, ddo) }
-//       }
-//     ]
-//   }
-
-//   return (
-//     <>
-//       <DebugOutput title="Collected Form Values" output={values} />
-//       <DebugOutput title="Transformed DDO Values" output={newDdo} />
-//     </>
-//   )
-// }

src/components/Asset/AssetContent/index.tsx

@@ -17,6 +17,14 @@ import EditHistory from './EditHistory'
 import { useWeb3 } from '@context/Web3'
 import styles from './index.module.css'
 import NetworkName from '@shared/NetworkName'
+import NetworkName from '@shared/atoms/NetworkName'
+
+export interface AssetContentProps {
+  path?: string
+}
+
+const contentQuery = graphql`
+  query AssetContentQuery {
 import content from '../../../../content/purgatory.json'
 
 export default function AssetContent(): ReactElement {

src/components/Footer/MarketStats.tsx

@@ -11,6 +11,7 @@ import useNetworkMetadata, {
 } from '@hooks/useNetworkMetadata'
 import { Logger } from '@oceanprotocol/lib'
 import styles from './MarketStats.module.css'
+import { filterNetworksByType } from '../Header/UserPreferences/Networks'
 
 const getTotalPoolsValues = gql`
   query PoolsData {

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

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

src/components/Header/index.tsx

@@ -1,6 +1,10 @@
 import React, { ReactElement } from 'react'
 import Menu from './Menu'
+<<<<<<< HEAD:src/components/Header/index.tsx
 import styles from './index.module.css'
+=======
+import styles from './Header.module.css'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/Header/Header.tsx
 
 export default function Header(): ReactElement {
   return (

src/components/Home/Bookmarks.tsx

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

src/components/Home/index.tsx

@@ -10,14 +10,25 @@ import {
 import { getHighestLiquidityDatatokens } from '@utils/subgraph'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { useUserPreferences } from '@context/UserPreferences'
+<<<<<<< HEAD:src/components/Home/index.tsx
 import styles from './index.module.css'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { SortTermOptions } from '../../@types/aquarius/SearchQuery'
+=======
+import styles from './Home.module.css'
+import { useIsMounted } from '@hooks/useIsMounted'
+import { useCancelToken } from '@hooks/useCancelToken'
+import { SearchQuery } from '../../models/aquarius/SearchQuery'
+import { SortTermOptions } from '../../models/SortAndFilters'
+import { BaseQueryParams } from '../../models/aquarius/BaseQueryParams'
+import { PagedAssets } from '../../models/PagedAssets'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/Home/Home.tsx
 
 async function getQueryHighest(
   chainIds: number[]
 ): Promise<[SearchQuery, string[]]> {
+  const dtList = await getHighestLiquidityDatatokens(chainIds)
   const dtList = await getHighestLiquidityDatatokens(chainIds)
   const baseQueryParams = {
     chainIds,

src/components/Profile/Header/NumberUnit.tsx

@@ -1,5 +1,9 @@
 import React, { ReactElement } from 'react'
+<<<<<<< HEAD:src/components/Profile/Header/NumberUnit.tsx
 import Markdown from '@shared/Markdown'
+=======
+import Markdown from '@shared/atoms/Markdown'
+>>>>>>> 14d71ad2 (reorganize all the things):src/components/@shared/NumberUnit.tsx
 import Tooltip from '@shared/atoms/Tooltip'
 import styles from './NumberUnit.module.css'
 

src/components/Publish/Debug.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
-import DebugOutput from '@shared/DebugOutput'
+import DebugOutput from '@shared/atoms/DebugOutput'
 import styles from './index.module.css'
-// import { transformPublishFormToMetadata } from '@utils/metadata'
+import { transformPublishFormToMetadata } from '@utils/metadata'
 import { FormPublishData } from './_types'
 
 export default function Debug({
@@ -9,30 +9,30 @@ export default function Debug({
 }: {
   values: Partial<FormPublishData>
 }): ReactElement {
-  // const ddo = {
-  //   '@context': 'https://w3id.org/did/v1',
-  //   dataTokenInfo: {
-  //     ...values.dataTokenOptions
-  //   },
-  //   service: [
-  //     {
-  //       index: 0,
-  //       type: 'metadata',
-  //       attributes: { ...transformPublishFormToMetadata(values) }
-  //     },
-  //     {
-  //       index: 1,
-  //       type: values.access,
-  //       serviceEndpoint: values.providerUri,
-  //       attributes: {}
-  //     }
-  //   ]
-  // }
+  const ddo = {
+    '@context': 'https://w3id.org/did/v1',
+    dataTokenInfo: {
+      ...values.dataTokenOptions
+    },
+    service: [
+      {
+        index: 0,
+        type: 'metadata',
+        attributes: { ...transformPublishFormToMetadata(values) }
+      },
+      {
+        index: 1,
+        type: values.access,
+        serviceEndpoint: values.providerUri,
+        attributes: {}
+      }
+    ]
+  }
 
   return (
     <div className={styles.grid}>
       <DebugOutput title="Collected Form Values" output={values} />
-      {/* <DebugOutput title="Transformed DDO Values" output={ddo} /> */}
+      <DebugOutput title="Transformed DDO Values" output={ddo} />
     </div>
   )
 }

src/components/Publish/FormAlgoPublish.tsx

@@ -1,20 +1,51 @@
-import React, {
-  ReactElement,
-  useEffect,
-  useState,
-  FormEvent,
-  ChangeEvent
-} from 'react'
+// import React, {
+//   ReactElement,
+//   useEffect,
+//   useState,
+//   FormEvent,
+//   ChangeEvent
+// } from 'react'
+// import { useStaticQuery, graphql } from 'gatsby'
 // import { useFormikContext, Field, Form, FormikContextType } from 'formik'
 // import Input from '../../atoms/Input'
-// import { FormContent, FormFieldProps } from '@types/Form'
-// import { MetadataPublishFormAlgorithm } from '@types/MetaData'
-// import { initialValues as initialValuesAlgorithm } from '@types/FormAlgoPublish'
+// import { FormContent, FormFieldProps } from '../../../@types/Form'
+// import { MetadataPublishFormAlgorithm } from '../../../@types/MetaData'
+// import { initialValues as initialValuesAlgorithm } from '../../../@types/FormAlgoPublish'
 // import AdvancedSettings from '../../molecules/FormFields/AdvancedSettings'
 // import FormTitle from './FormTitle'
 // import FormActions from './FormActions'
 // import styles from './FormPublish.module.css'
 
+// const query = graphql`
+//   query {
+//     content: allFile(
+//       filter: { relativePath: { eq: "pages/publish/form-algorithm.json" } }
+//     ) {
+//       edges {
+//         node {
+//           childPublishJson {
+//             title
+//             data {
+//               name
+//               placeholder
+//               label
+//               help
+//               type
+//               required
+//               sortOptions
+//               options
+//               disclaimer
+//               disclaimerValues
+//               advanced
+//             }
+//             warning
+//           }
+//         }
+//       }
+//     }
+//   }
+// `
+
 // export default function FormPublish(): ReactElement {
 //   const data = useStaticQuery(query)
 //   const content: FormContent = data.content.edges[0].node.childPublishJson

src/components/Publish/FormTitle.tsx

@@ -1,22 +0,0 @@
-import React, { ReactElement } from 'react'
-import NetworkName from '@shared/NetworkName'
-import Tooltip from '@shared/atoms/Tooltip'
-import { useWeb3 } from '@context/Web3'
-import styles from './FormTitle.module.css'
-import { tooltipNetwork } from '../../../content/pages/publish/index.json'
-
-export default function FormTitle({ title }: { title: string }): ReactElement {
-  const { networkId } = useWeb3()
-
-  return (
-    <h2 className={styles.title}>
-      {title}{' '}
-      {networkId && (
-        <>
-          into <NetworkName networkId={networkId} className={styles.network} />
-          <Tooltip content={tooltipNetwork} className={styles.tooltip} />
-        </>
-      )}
-    </h2>
-  )
-}

src/components/Publish/Pricing/index.tsx

@@ -1,96 +0,0 @@
-import React, { FormEvent, ReactElement, useState } from 'react'
-import { Formik } from 'formik'
-import { initialValues, validationSchema } from '../_constants'
-import { DDO, Logger } from '@oceanprotocol/lib'
-import Alert from '@shared/atoms/Alert'
-import FormPricing from './FormPricing'
-import { toast } from 'react-toastify'
-import Feedback from './Feedback'
-import { usePricing } from '@hooks/usePricing'
-import styles from './index.module.css'
-import { useAsset } from '@context/Asset'
-import content from '../../../../content/price.json'
-
-export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  // View states
-  const [showPricing, setShowPricing] = useState(false)
-  const [success, setSuccess] = useState<string>()
-
-  const { createPricing, pricingIsLoading, pricingError, pricingStepText } =
-    usePricing()
-  const { isAssetNetwork } = useAsset()
-
-  const hasFeedback = pricingIsLoading || typeof success !== 'undefined'
-
-  // async function handleCreatePricing(values: PriceOptions) {
-  //   try {
-  //     const priceOptions = {
-  //       ...values,
-  //       // swapFee is tricky: to get 0.1% you need to send 0.001 as value
-  //       swapFee: `${values.swapFee / 100}`
-  //     }
-
-  //     // const tx = await createPricing(priceOptions, ddo)
-
-  //     // Pricing failed
-  //     if (!tx || pricingError) {
-  //       toast.error(pricingError || 'Price creation failed.')
-  //       Logger.error(pricingError || 'Price creation failed.')
-  //       return
-  //     }
-
-  //     // Pricing succeeded
-  //     setSuccess(
-  //       `🎉 Successfully created a ${values.type} price. 🎉 Reload the page to get all updates.`
-  //     )
-  //     Logger.log(`Transaction: ${tx}`)
-  //   } catch (error) {
-  //     toast.error(error.message)
-  //     Logger.error(error.message)
-  //   }
-  // }
-
-  function handleShowPricingForm(e: FormEvent<HTMLButtonElement>) {
-    e.preventDefault()
-    setShowPricing(true)
-  }
-
-  return (
-    <div className={styles.pricing}>
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        validateOnChange
-        onSubmit={async (values, { setSubmitting }) => {
-          // move user's focus to top of screen
-          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-
-          // Kick off price creation
-          // await handleCreatePricing(values)
-          setSubmitting(false)
-        }}
-      >
-        {hasFeedback ? (
-          <Feedback success={success} pricingStepText={pricingStepText} />
-        ) : showPricing ? (
-          <FormPricing
-            ddo={ddo}
-            setShowPricing={setShowPricing}
-            content={content.create}
-          />
-        ) : (
-          <Alert
-            state="info"
-            title={content.create.empty.title}
-            text={content.create.empty.info}
-            action={{
-              name: content.create.empty.action.name,
-              disabled: !isAssetNetwork,
-              handleAction: handleShowPricingForm
-            }}
-          />
-        )}
-      </Formik>
-    </div>
-  )
-}

src/components/Publish/_constants.ts

@@ -32,54 +32,55 @@ export const validationSchema: Yup.SchemaOf<FormPublishData> = Yup.object()
   .defined()
 
 export const initialValues: Partial<FormPublishData> = {
-  // name: '',
-  // author: '',
-  // dataTokenOptions: {
-  //   name: '',
-  //   symbol: ''
-  // },
-  // files: '',
-  // description: '',
-  // timeout: 'Forever',
-  // access: '',
-  // termsAndConditions: false,
-  // tags: '',
-  // providerUri: ''
+  name: '',
+  author: '',
+  dataTokenOptions: {
+    name: '',
+    symbol: ''
+  },
+  files: '',
+  description: '',
+  timeout: 'Forever',
+  access: '',
+  termsAndConditions: false,
+  tags: '',
+  providerUri: ''
 }
 
-export const validationSchemaAlgo: Yup.SchemaOf<any> = Yup.object()
-  .shape({
-    // ---- required fields ----
-    name: Yup.string()
-      .min(4, (param) => `Title must be at least ${param.min} characters`)
-      .required('Required'),
-    description: Yup.string().min(10).required('Required'),
-    files: Yup.array<FileMetadata>().required('Required').nullable(),
-    timeout: Yup.string().required('Required'),
-    dataTokenOptions: Yup.object()
-      .shape({
-        name: Yup.string(),
-        symbol: Yup.string()
-      })
-      .required('Required'),
-    dockerImage: Yup.string()
-      .matches(/node:latest|python:latest|custom image/g, {
-        excludeEmptyString: true
-      })
-      .required('Required'),
-    image: Yup.string().required('Required'),
-    containerTag: Yup.string().required('Required'),
-    entrypoint: Yup.string().required('Required'),
-    author: Yup.string().required('Required'),
-    termsAndConditions: Yup.boolean().required('Required'),
-    // ---- optional fields ----
-    algorithmPrivacy: Yup.boolean().nullable(),
-    tags: Yup.string().nullable(),
-    links: Yup.array<FileMetadata[]>().nullable()
-  })
-  .defined()
+export const validationSchemaAlgo: Yup.SchemaOf<MetadataPublishFormAlgorithm> =
+  Yup.object()
+    .shape({
+      // ---- required fields ----
+      name: Yup.string()
+        .min(4, (param) => `Title must be at least ${param.min} characters`)
+        .required('Required'),
+      description: Yup.string().min(10).required('Required'),
+      files: Yup.array<FileMetadata>().required('Required').nullable(),
+      timeout: Yup.string().required('Required'),
+      dataTokenOptions: Yup.object()
+        .shape({
+          name: Yup.string(),
+          symbol: Yup.string()
+        })
+        .required('Required'),
+      dockerImage: Yup.string()
+        .matches(/node:latest|python:latest|custom image/g, {
+          excludeEmptyString: true
+        })
+        .required('Required'),
+      image: Yup.string().required('Required'),
+      containerTag: Yup.string().required('Required'),
+      entrypoint: Yup.string().required('Required'),
+      author: Yup.string().required('Required'),
+      termsAndConditions: Yup.boolean().required('Required'),
+      // ---- optional fields ----
+      algorithmPrivacy: Yup.boolean().nullable(),
+      tags: Yup.string().nullable(),
+      links: Yup.array<FileMetadata[]>().nullable()
+    })
+    .defined()
 
-export const initialValuesAlgo: Partial<any> = {
+export const initialValuesAlgo: Partial<MetadataPublishFormAlgorithm> = {
   name: '',
   author: '',
   dataTokenOptions: {

src/components/Publish/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, useEffect } from 'react'
+import Permission from '@shared/Permission'
 import { Formik, FormikState } from 'formik'
 import { usePublish } from '@hooks/usePublish'
 import styles from './index.module.css'
@@ -78,6 +79,7 @@ export default function PublishPage({
   // }
 
   return isInPurgatory && purgatoryData ? null : (
+    <Permission eventType="publish">
     <Formik
       initialValues={initialValues}
       initialStatus="empty"
@@ -90,6 +92,7 @@ export default function PublishPage({
       {({ values }) => {
         return <>Hello</>
       }}
-    </Formik>
+      </Formik>
+    </Permission>
   )
 }

src/components/Search/Filters.tsx

@@ -8,6 +8,7 @@ import {
   FilterByTypeOptions
 } from '../../@types/aquarius/SearchQuery'
 import router, { useRouter } from 'next/router'
+import styles from './Filters.module.css'
 
 const cx = classNames.bind(styles)
 

tsconfig.json

@@ -11,6 +11,8 @@
     "noEmit": true,
     "sourceMap": true,
     "noImplicitAny": true,
+    "skipLibCheck": false,
+    "allowJs": true,
     "paths": {
       "@shared/*": ["./src/components/@shared/*"],
       "@hooks/*": ["./src/@hooks/*"],