more reorganization

content/site.json

@@ -4,7 +4,7 @@
     "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
     "siteUrl": "https://market.oceanprotocol.com",
     "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
-    "siteImage": "../src/images/share.png",
+    "siteImage": "../src/@images/share.png",
     "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
     "menu": [
       {

gatsby-config.js

@@ -22,7 +22,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'images',
-        path: `${__dirname}/src/images`
+        path: `${__dirname}/src/@images`
       }
     },
     {

gatsby-node.js

@@ -77,10 +77,10 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     resolve: {
       alias: {
         '@shared': path.resolve(__dirname, 'src/components/@shared'),
-        '@hooks': path.resolve(__dirname, 'src/hooks'),
-        '@context': path.resolve(__dirname, 'src/context'),
-        '@images': path.resolve(__dirname, 'src/images'),
-        '@utils': path.resolve(__dirname, 'src/utils')
+        '@hooks': path.resolve(__dirname, 'src/@hooks'),
+        '@context': path.resolve(__dirname, 'src/@context'),
+        '@images': path.resolve(__dirname, 'src/@images'),
+        '@utils': path.resolve(__dirname, 'src/@utils')
       }
     },
     node: {

src/@context/Profile.tsx

@@ -11,16 +11,18 @@ import {
   getPoolSharesData,
   getUserSales,
   getUserTokenOrders
-} from '../utils/subgraph'
+} from '@utils/subgraph'
 import { useUserPreferences } from './UserPreferences'
 import { PoolShares_poolShares as PoolShare } from '../@types/apollo/PoolShares'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { getDownloadAssets, getPublishedAssets } from '../utils/aquarius'
-import { useSiteMetadata } from '../hooks/useSiteMetadata'
-import { accountTruncate } from '../utils/web3'
+  getPublishedAssets
+} from '@utils/aquarius'
+import { useSiteMetadata } from '@hooks/useSiteMetadata'
+import { accountTruncate } from '@utils/web3'
 import axios, { CancelToken } from 'axios'
 import ethereumAddress from 'ethereum-address'
-import get3BoxProfile from '../utils/profile'
+import get3BoxProfile from '@utils/profile'
 import web3 from 'web3'
 import { DownloadedAsset } from '../models/aquarius/DownloadedAsset'
 

src/@context/UrqlProvider.tsx

@@ -1,7 +1,7 @@
 import { createClient, Provider, Client } from 'urql'
 import React, { useState, useEffect, ReactNode, ReactElement } from 'react'
 import { Logger } from '@oceanprotocol/lib'
-import { getOceanConfig } from '../utils/ocean'
+import { getOceanConfig } from '@utils/ocean'
 
 let urqlClient: Client
 

src/@context/UserPreferences.tsx

@@ -7,7 +7,7 @@ import React, {
   useEffect
 } from 'react'
 import { Logger, LogLevel } from '@oceanprotocol/lib'
-import { isBrowser } from '../utils'
+import { isBrowser } from '@utils/index'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 
 interface UserPreferencesValue {

src/@context/Web3.tsx

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

src/@hooks/useAccountPurgatory.ts

@@ -1,9 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Logger } from '@oceanprotocol/lib'
-import {
-  PurgatoryDataAccount,
-  getAccountPurgatoryData
-} from '../utils/purgatory'
+import { PurgatoryDataAccount, getAccountPurgatoryData } from '@utils/purgatory'
 
 interface UseAccountPurgatory {
   isInPurgatory: boolean

src/@hooks/useConsume.ts

@@ -1,8 +1,8 @@
 import { useState } from 'react'
-import { consumeFeedback } from '../utils/feedback'
+import { consumeFeedback } from '@utils/feedback'
 import { DID, Logger, ServiceType } from '@oceanprotocol/lib'
-import { useOcean } from '../context/Ocean'
-import { useWeb3 } from '../context/Web3'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
 
 interface UseConsume {
   consume: (

src/@hooks/useGraphSyncStatus.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
-import { useOcean } from '../context/Ocean'
-import { useWeb3 } from '../context/Web3'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
 import { Logger } from '@oceanprotocol/lib'
 import Web3 from 'web3'
 import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'

src/@hooks/useNetworkMetadata.ts

@@ -1,5 +1,5 @@
 import { useStaticQuery, graphql } from 'gatsby'
-import { EthereumListsChain } from '../utils/web3'
+import { EthereumListsChain } from '@utils/web3'
 
 export interface UseNetworkMetadata {
   networksList: { node: EthereumListsChain }[]

src/@hooks/usePricing.ts

@@ -8,11 +8,10 @@ import {
   getBuyDTFeedback,
   getCreateFreePricingFeedback,
   getDispenseFeedback
-} from '../utils/feedback'
-import { sleep } from '../utils'
-
-import { useOcean } from '../context/Ocean'
-import { useWeb3 } from '../context/Web3'
+} from '@utils/feedback'
+import { sleep } from '@utils/index'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
 
 interface UsePricing {
   getDTSymbol: (ddo: DDO) => Promise<string>

src/@hooks/usePublish.ts

@@ -5,11 +5,11 @@ import {
   ServiceType
 } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Service'
 import { useEffect, useState } from 'react'
-import { sleep } from '../utils'
-import { publishFeedback } from '../utils/feedback'
-import { useOcean } from '../context/Ocean'
-import { useWeb3 } from '../context/Web3'
-import { getOceanConfig } from '../utils/ocean'
+import { sleep } from '@utils/index'
+import { publishFeedback } from '@utils/feedback'
+import { useOcean } from '@context/Ocean'
+import { useWeb3 } from '@context/Web3'
+import { getOceanConfig } from '@utils/ocean'
 
 interface DataTokenOptions {
   cap?: string

src/@utils/profile.ts

@@ -74,10 +74,9 @@ export default async function get3BoxProfile(
   cancelToken: CancelToken
 ): Promise<Profile> {
   try {
-    const response: AxiosResponse<ResponseData3Box> = await axios(
-      `${apiUri}/profile/${accountId}`,
-      { cancelToken }
-    )
+    const response = (await axios(`${apiUri}/profile/${accountId}`, {
+      cancelToken
+    })) as AxiosResponse<ResponseData3Box>
 
     if (
       !response ||

src/@utils/provider.ts

@@ -8,13 +8,15 @@ export async function fileinfo(
   cancelToken: CancelToken
 ): Promise<FileMetadata> {
   try {
-    const response: AxiosResponse = await axios.post(
+    const response = (await axios.post(
       `${providerUri}/api/v1/services/fileinfo`,
       {
         url,
         cancelToken
       }
-    )
+    )) as AxiosResponse<
+      { valid: boolean; contentLength: string; contentType: string }[]
+    >
 
     if (!response || response.status !== 200 || !response.data) {
       toast.error('Could not connect to File API')

src/@utils/purgatory.ts

@@ -11,13 +11,18 @@ export interface PurgatoryDataAccount {
 export default async function getAssetPurgatoryData(
   did: string
 ): Promise<PurgatoryDataAsset> {
-  const data = await fetchData(`${purgatoryUrl}asset?did=${did}`)
+  const data = (await fetchData(
+    `${purgatoryUrl}asset?did=${did}`
+  )) as PurgatoryDataAsset[]
+
   return { did: data[0]?.did, reason: data[0]?.reason }
 }
 
 export async function getAccountPurgatoryData(
   address: string
 ): Promise<PurgatoryDataAccount> {
-  const data = await fetchData(`${purgatoryUrl}account?address=${address}`)
+  const data = (await fetchData(
+    `${purgatoryUrl}account?address=${address}`
+  )) as PurgatoryDataAccount[]
   return { address: data[0]?.address, reason: data[0]?.reason }
 }

src/@utils/subgraph.ts

@@ -252,7 +252,7 @@ const UserTokenOrders = gql`
   }
 `
 const UserSalesQuery = gql`
-  query UserSalesQuery($userSalesId: String) {
+  query UserSalesQuery($userSalesId: ID) {
     users(where: { id: $userSalesId }) {
       id
       nrSales

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

@@ -2,8 +2,8 @@ import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import { addTokenToWallet } from '@utils/web3'
 import { useWeb3 } from '@context/Web3'
-import Button from './Button'
-import styles from './AddToken.module.css'
+import Button from '@shared/atoms/Button'
+import styles from './index.module.css'
 
 const cx = classNames.bind(styles)
 

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

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
-import Markdown from './Markdown'
-import Button from './Button'
-import styles from './AnnouncementBanner.module.css'
+import Markdown from '@shared/atoms/Markdown'
+import Button from '@shared/atoms/Button'
+import styles from './index.module.css'
 
 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 'gatsby'
-import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import PriceUnit from '@shared/Price/PriceUnit'
 import Loader from '@shared/atoms/Loader'
 import styles from './AssetComputeList.module.css'
 import { AssetSelectionAsset } from '@shared/Form/FormFields/AssetSelection'

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

@@ -4,10 +4,10 @@ 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 '../../../context/UserPreferences'
-import { useIsMounted } from '../../../hooks/useIsMounted'
+import { useUserPreferences } from '@context/UserPreferences'
+import { useIsMounted } from '@hooks/useIsMounted'
 
 const cx = classNames.bind(styles)
 

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

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

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

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Link } from 'gatsby'
 import Dotdotdot from 'react-dotdotdot'
-import Price from '../atoms/Price'
+import Price from '@shared/Price'
 import { DDO } from '@oceanprotocol/lib'
 import removeMarkdown from 'remove-markdown'
-import Publisher from '../atoms/Publisher'
-import AssetType from '../atoms/AssetType'
-import NetworkName from '../atoms/NetworkName'
+import Publisher from '@shared/Publisher'
+import AssetType from '@shared/AssetType'
+import NetworkName from '@shared/NetworkName'
 import styles from './AssetTeaser.module.css'
 
 declare type AssetTeaserProps = {

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

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import styles from './AssetType.module.css'
+import styles from './index.module.css'
 import classNames from 'classnames/bind'
 import { ReactComponent as Compute } from '@images/compute.svg'
 import { ReactComponent as Download } from '@images/download.svg'

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

@@ -1,7 +1,7 @@
 import React, { FormEvent, ReactElement } from 'react'
-import Button from './Button'
-import styles from './ButtonBuy.module.css'
-import Loader from './Loader'
+import Button from '../atoms/Button'
+import styles from './index.module.css'
+import Loader from '../atoms/Loader'
 
 interface ButtonBuyProps {
   action: 'download' | 'compute'

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

@@ -3,7 +3,7 @@ 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'
+import styles from './index.module.css'
 import { getOceanConfig } from '@utils/ocean'
 
 const cx = classNames.bind(styles)

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

@@ -3,8 +3,8 @@ import { File as FileMetadata } from '@oceanprotocol/lib'
 import filesize from 'filesize'
 import classNames from 'classnames/bind'
 import cleanupContentType from '@utils/cleanupContentType'
-import styles from './File.module.css'
-import Loader from './Loader'
+import styles from './index.module.css'
+import Loader from '@shared/atoms/Loader'
 
 const cx = classNames.bind(styles)
 
@@ -16,7 +16,7 @@ function LoaderArea() {
   )
 }
 
-export default function File({
+export default function FileIcon({
   file,
   className,
   small,

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

@@ -2,7 +2,7 @@ import React, { ChangeEvent, useState } from 'react'
 import Dotdotdot from 'react-dotdotdot'
 import slugify from 'slugify'
 import classNames from 'classnames/bind'
-import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import PriceUnit from '@shared/Price/PriceUnit'
 import { ReactComponent as External } from '@images/external.svg'
 import InputElement from '@shared/Form/Input/InputElement'
 import Loader from '@shared/atoms/Loader'

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

@@ -2,7 +2,7 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import CustomInput from './URLInput/Input'
-import { useOcean } from '../../../../context/Ocean'
+import { useOcean } from '@context/Ocean'
 import { InputProps } from '@shared/Form/Input'
 
 export default function CustomProvider(props: InputProps): ReactElement {

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

@@ -4,9 +4,7 @@ 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 styles from './index.module.css'
 
 export function NetworkIcon({ name }: { name: string }): ReactElement {
   const IconMapped = name.includes('ETH')
@@ -23,29 +21,3 @@ export function NetworkIcon({ name }: { name: string }): ReactElement {
 
   return IconMapped ? <IconMapped className={styles.icon} /> : null
 }
-
-export default function NetworkName({
-  networkId,
-  minimal,
-  className
-}: {
-  networkId: number
-  minimal?: boolean
-  className?: string
-}): ReactElement {
-  const { networksList } = useNetworkMetadata()
-  const networkData = getNetworkDataById(networksList, networkId)
-  const networkName = getNetworkDisplayName(networkData, networkId)
-
-  return (
-    <span
-      className={`${styles.network} ${minimal ? styles.minimal : null} ${
-        className || ''
-      }`}
-      title={networkName}
-    >
-      <NetworkIcon name={networkName} />{' '}
-      <span className={styles.name}>{networkName}</span>
-    </span>
-  )
-}

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

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react'
+import { getNetworkDataById, getNetworkDisplayName } from '@utils/web3'
+import styles from './index.module.css'
+import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import { NetworkIcon } from './NetworkIcon'
+
+export default function NetworkName({
+  networkId,
+  minimal,
+  className
+}: {
+  networkId: number
+  minimal?: boolean
+  className?: string
+}): ReactElement {
+  const { networksList } = useNetworkMetadata()
+  const networkData = getNetworkDataById(networksList, networkId)
+  const networkName = getNetworkDisplayName(networkData, networkId)
+
+  return (
+    <span
+      className={`${styles.network} ${minimal ? styles.minimal : null} ${
+        className || ''
+      }`}
+      title={networkName}
+    >
+      <NetworkIcon name={networkName} />{' '}
+      <span className={styles.name}>{networkName}</span>
+    </span>
+  )
+}

src/components/@shared/Pagination/_types.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+  totalPages?: number
+  currentPage?: number
+  onChangePage?(selected: number): void
+  rowsPerPage?: number
+  rowCount?: number
+}

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

@@ -1,16 +1,9 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import ReactPaginate from 'react-paginate'
-import styles from './Pagination.module.css'
+import styles from './index.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
-}
+import { PaginationProps } from './_types'
 
 export default function Pagination({
   totalPages,

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

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

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

@@ -8,13 +8,13 @@ import { TransactionHistory_poolTransactions as TransactionHistoryPoolTransactio
 import web3 from 'web3'
 import { fetchDataForMultipleChains } from '@utils/subgraph'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
-import NetworkName from '@shared/atoms/NetworkName'
+import NetworkName from '@shared/NetworkName'
 import { retrieveDDOListByDIDs } from '@utils/aquarius'
 import { CancelToken } from 'axios'
 import Title from './Title'
 import styles from './index.module.css'
 import { DDO, Logger } from '@oceanprotocol/lib'
-import { useCancelToken } from '../../../hooks/useCancelToken'
+import { useCancelToken } from '@hooks/useCancelToken'
 
 const REFETCH_INTERVAL = 20000
 

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

@@ -4,7 +4,7 @@ import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '@context/UserPreferences'
-import Badge from '../Badge'
+import Badge from '@shared/atoms/Badge'
 
 const cx = classNames.bind(styles)