more refactor

gatsby/createTypes.js

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

src/@context/Profile.tsx

@@ -15,16 +15,9 @@ 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/Web3.tsx

@@ -18,14 +18,7 @@ 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/@hooks/useNetworkMetadata/index.ts

@@ -1,8 +1,35 @@
+import { useStaticQuery, graphql } from 'gatsby'
 import { UseNetworkMetadata } from './types'
-import networkdata from '../../../content/networks-metadata.json'
+
+const networksQuery = graphql`
+  query {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+          chainId
+          rpc
+          explorers {
+            url
+          }
+          nativeCurrency {
+            name
+            symbol
+            decimals
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function useNetworkMetadata(): UseNetworkMetadata {
-  const networksList: EthereumListsChain[] = networkdata
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+
   return { networksList }
 }
 

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

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

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

@@ -1,6 +1,5 @@
 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'
@@ -8,7 +7,6 @@ import useNetworkMetadata, {
   getNetworkDataById,
   getNetworkDisplayName
 } from '@hooks/useNetworkMetadata'
-=======
 import {
   addCustomNetwork,
   getNetworkDisplayName,
@@ -17,7 +15,6 @@ import {
 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/App/index.module.css

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

src/components/App/index.tsx

@@ -1,50 +1,69 @@
 import React, { ReactElement } from 'react'
+import { graphql, PageProps, useStaticQuery } from 'gatsby'
 import Alert from '@shared/atoms/Alert'
 import Footer from '../Footer/Footer'
 import Header from '../Header'
+import StylesGlobal from '../../stylesGlobal/StylesGlobal'
 import { useWeb3 } from '@context/Web3'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import AnnouncementBanner from '@shared/AnnouncementBanner'
 import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
 import styles from './index.module.css'
-import { ToastContainer } from 'react-toastify'
-import { useRouter } from 'next/router'
-// import waves from '@oceanprotocol/art/waves/waves.png'
-import content from '../../../content/purgatory.json'
+
+const contentQuery = graphql`
+  query AppQuery {
+    purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            account {
+              title
+              description
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function App({
-  children
+  children,
+  ...props
 }: {
   children: ReactElement
 }): ReactElement {
-  const router = useRouter()
+  const data = useStaticQuery(contentQuery)
+  const purgatory = data.purgatory.edges[0].node.childContentJson.account
 
   const { warning, appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
 
   return (
-    <div className={styles.app}>
-      {router.pathname === '/' && <AnnouncementBanner text={warning.main} />}
-      <Header />
+    <StylesGlobal>
+      <div className={styles.app}>
+        {(props as PageProps).uri === '/' && (
+          <AnnouncementBanner text={warning.main} />
+        )}
+        <Header />
 
-      {isInPurgatory && (
-        <Alert
-          title={content.account.title}
-          badge={`Reason: ${purgatoryData?.reason}`}
-          text={content.account.description}
-          state="error"
-        />
-      )}
-      <main className={styles.main}>{children}</main>
-      <Footer />
+        {isInPurgatory && (
+          <Alert
+            title={purgatory.title}
+            badge={`Reason: ${purgatoryData?.reason}`}
+            text={purgatory.description}
+            state="error"
+          />
+        )}
+        <main className={styles.main}>{children}</main>
+        <Footer />
 
-      {appConfig.privacyPreferenceCenter === 'true' && (
-        <PrivacyPreferenceCenter style="small" />
-      )}
-
-      <ToastContainer position="bottom-right" newestOnTop />
-    </div>
+        {appConfig.privacyPreferenceCenter === 'true' && (
+          <PrivacyPreferenceCenter style="small" />
+        )}
+      </div>
+    </StylesGlobal>
   )
 }

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

@@ -17,6 +17,7 @@ import { useAsset } from '@context/Asset'
 import {
   generateBaseQuery,
   getFilterTerm,
+  queryMetadata,
   transformDDOToAssetSelection
 } from '@utils/aquarius'
 import { Formik } from 'formik'

src/components/Footer/MarketStats.tsx

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

src/components/Home/Bookmarks.tsx

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

src/components/Home/index.tsx

@@ -10,25 +10,14 @@ 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/pages/_app.tsx

@@ -8,10 +8,19 @@ import UrqlProvider from '@context/UrqlProvider'
 import ConsentProvider from '@context/CookieConsent'
 import App from 'src/components/App'
 
+<<<<<<< HEAD:src/pages/_app.tsx
 import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../stylesGlobal/styles.css'
 
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
+=======
+// Referenced in gatsby-browser.js & gatsby-ssr.js
+export default function ContextProviders({
+  element
+}: {
+  element: ReactElement
+}): ReactElement {
+>>>>>>> 4a56991b (more refactor):src/components/App/ContextProviders.tsx
   return (
     <Web3Provider>
       <UrqlProvider>