restructure form, dial back on overwriting native Formik functionality

content/publish/form.json

@@ -15,21 +15,6 @@
         "type": "textarea",
         "required": true
       },
-      {
-        "name": "files",
-        "label": "File",
-        "placeholder": "e.g. https://file.com/file.json",
-        "help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
-        "type": "files",
-        "required": true
-      },
-      {
-        "name": "links",
-        "label": "Sample file",
-        "placeholder": "e.g. https://file.com/samplefile.json",
-        "help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
-        "type": "files"
-      },
       {
         "name": "author",
         "label": "Author",
@@ -55,6 +40,28 @@
   "services": {
     "title": "Create services",
     "fields": [
+      {
+        "name": "dataTokenOptions",
+        "label": "Datatoken Name & Symbol",
+        "type": "datatoken",
+        "help": "The datatoken for this data set will be created with this name & symbol.",
+        "required": true
+      },
+      {
+        "name": "files",
+        "label": "File",
+        "placeholder": "e.g. https://file.com/file.json",
+        "help": "Please enter the URL to your data set file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
+        "type": "files",
+        "required": true
+      },
+      {
+        "name": "links",
+        "label": "Sample file",
+        "placeholder": "e.g. https://file.com/samplefile.json",
+        "help": "Please enter the URL to a sample of your data set file and click \"ADD FILE\" to validate the data. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing.",
+        "type": "files"
+      },
       {
         "name": "access",
         "label": "Access Type",
@@ -65,14 +72,6 @@
         "disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
         "disclaimerValues": ["Download"]
       },
-      {
-        "name": "providerUri",
-        "label": "Custom Provider URL",
-        "type": "providerUri",
-        "help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).",
-        "placeholder": "https://provider.polygon.oceanprotocol.com/",
-        "advanced": true
-      },
       {
         "name": "timeout",
         "label": "Timeout",
@@ -82,17 +81,23 @@
         "sortOptions": false,
         "required": true
       },
+
       {
-        "name": "dataTokenOptions",
-        "label": "Datatoken Name & Symbol",
-        "type": "datatoken",
-        "help": "The datatoken for this data set will be created with this name & symbol.",
-        "required": true
+        "name": "providerUri",
+        "label": "Custom Provider URL",
+        "type": "providerUri",
+        "help": "Enter the URL for your custom provider or leave blank to use the default provider. [Learn more](https://github.com/oceanprotocol/provider/).",
+        "placeholder": "https://provider.polygon.oceanprotocol.com/",
+        "advanced": true
       }
     ]
   },
   "pricing": {
     "title": "Create pricing schema",
-    "fields": [{ "name": "dummy content" }]
+    "fields": [
+      {
+        "name": "dummy content, as content is defined under 'create' key in ../price.json"
+      }
+    ]
   }
 }

src/@context/UserPreferences.tsx

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

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

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

@@ -2,13 +2,8 @@ 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,14 +1,8 @@
 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 'gatsby'
-import PriceUnit from '@shared/atoms/Price/PriceUnit'
+import Link from 'next/link'
+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'
@@ -24,11 +24,8 @@ export default function AssetComputeSelection({
           <Empty />
         ) : (
           assets.map((asset: AssetSelectionAsset) => (
-            <Link
-              to={`/asset/${asset.did}`}
-              className={styles.row}
-              key={asset.did}
-            >
+            <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">
@@ -40,6 +37,7 @@ export default function AssetComputeSelection({
                   </Dotdotdot>
                 </div>
                 <PriceUnit price={asset.price} small className={styles.price} />
+              </a>
             </Link>
           ))
         )}

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Link } from 'gatsby'
+import Link from 'next/link'
 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 = {
@@ -29,7 +29,8 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 
   return (
     <article className={`${styles.teaser} ${styles[type]}`}>
-      <Link to={`/asset/${ddo.id}`} className={styles.link}>
+      <Link href={`/asset/${ddo.id}`}>
+        <a className={styles.link}>
           <header className={styles.header}>
             <div className={styles.symbol}>{dataTokenInfo?.symbol}</div>
             <Dotdotdot clamp={3}>
@@ -61,6 +62,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
             <Price price={price} small />
             <NetworkName networkId={ddo.chainId} className={styles.network} />
           </footer>
+        </a>
       </Link>
     </article>
   )

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

@@ -1,15 +1,9 @@
 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,17 +1,9 @@
 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,13 +3,8 @@ 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/AdvancedSettings.tsx

@@ -29,7 +29,7 @@ export default function AdvancedSettings(prop: {
         Advanced Settings
       </Button>
       {showAdvancedSettings &&
-        prop.content.data.map(
+        prop.content.fields.map(
           (field: FormFieldProps) =>
             field.advanced === true && (
               <Field

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

@@ -2,29 +2,15 @@ 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'
+    defaultChecked: props.value.toString() === 'true'
   }
 
   return (
     <>
-      <div
-        className={styles.terms}
-        dangerouslySetInnerHTML={{ __html: data.terms.html }}
-      />
       <InputElement {...termsProps} type="checkbox" />
     </>
   )

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

@@ -7,14 +7,13 @@ import React, {
   useState
 } from 'react'
 import InputElement from './InputElement'
-import Help from './Help'
 import Label from './Label'
 import styles from './index.module.css'
 import { ErrorMessage, FieldInputProps } from 'formik'
 import classNames from 'classnames/bind'
 import Disclaimer from './Disclaimer'
 import Tooltip from '@shared/atoms/Tooltip'
-import Markdown from '@shared/atoms/Markdown'
+import Markdown from '@shared/Markdown'
 
 const cx = classNames.bind(styles)
 

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

@@ -26,7 +26,7 @@ export default function Page({
       <Container>
         {title && !noPageHeader && (
           <PageHeader
-            title={title}
+            title={<>{title}</>}
             description={description}
             center={headerCenter}
           />

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

@@ -1,23 +1,9 @@
 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,11 +4,7 @@ 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,9 +1,5 @@
 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,21 +1,14 @@
 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,11 +2,7 @@ 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,79 +1,10 @@
 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,20 +1,12 @@
 import React, { ReactElement } from 'react'
 import { useWeb3 } from '@context/Web3'
-import { addCustomNetwork } from '@utils/web3'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
+import { addCustomNetwork } from '@utils/web3'
 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'
 import { useAsset } from '@context/Asset'
 
 export default function WalletNetworkSwitcher(): ReactElement {

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

@@ -1,13 +1,8 @@
 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/App/index.module.css

@@ -1,6 +1,7 @@
 .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,59 +1,39 @@
 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'
-
-const contentQuery = graphql`
-  query AppQuery {
-    purgatory: allFile(filter: { relativePath: { eq: "purgatory.json" } }) {
-      edges {
-        node {
-          childContentJson {
-            account {
-              title
-              description
-            }
-          }
-        }
-      }
-    }
-  }
-`
+import { ToastContainer } from 'react-toastify'
+import { useRouter } from 'next/router'
+// import waves from '@oceanprotocol/art/waves/waves.png'
+import content from '../../../content/purgatory.json'
 
 export default function App({
-  children,
-  ...props
+  children
 }: {
   children: ReactElement
 }): ReactElement {
-  const data = useStaticQuery(contentQuery)
-  const purgatory = data.purgatory.edges[0].node.childContentJson.account
+  const router = useRouter()
 
   const { warning, appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
 
   return (
-    <StylesGlobal>
     <div className={styles.app}>
-        {(props as PageProps).uri === '/' && (
-          <AnnouncementBanner text={warning.main} />
-        )}
+      {router.pathname === '/' && <AnnouncementBanner text={warning.main} />}
       <Header />
 
       {isInPurgatory && (
         <Alert
-            title={purgatory.title}
+          title={content.account.title}
           badge={`Reason: ${purgatoryData?.reason}`}
-            text={purgatory.description}
+          text={content.account.description}
           state="error"
         />
       )}
@@ -63,7 +43,8 @@ export default function App({
       {appConfig.privacyPreferenceCenter === 'true' && (
         <PrivacyPreferenceCenter style="small" />
       )}
+
+      <ToastContainer position="bottom-right" newestOnTop />
     </div>
-    </StylesGlobal>
   )
 }

src/components/Asset/AssetActions/AssetActionHistoryTable.tsx

@@ -1,15 +1,7 @@
-<<<<<<< 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

@@ -34,7 +34,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 '@shared/AssetActionHistoryTable'
+import AssetActionHistoryTable from '../AssetActionHistoryTable'
 import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'

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

@@ -11,7 +11,6 @@ import styles from './index.module.css'
 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'
 import content from '../../../../../content/pages/editComputeDataset.json'
 
@@ -106,19 +105,7 @@ export default function EditComputeDataset({
     >
       {({ values, isSubmitting }) =>
         isSubmitting || hasFeedback ? (
-          <MetadataFeedback
-            title="Updating Data Set"
-            error={error}
-            success={success}
-            setError={setError}
-            successAction={{
-              name: content.form.successAction,
-              onClick: async () => {
-                await refreshDdo()
-                setShowEdit(false)
-              }
-            }}
-          />
+          <div />
         ) : (
           <>
             <p className={styles.description}>{content.description}</p>

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

@@ -12,8 +12,6 @@ import { Logger } from '@oceanprotocol/lib'
 import { useWeb3 } from '@context/Web3'
 import { useOcean } from '@context/Ocean'
 import { setMinterToDispenser, setMinterToPublisher } from '@utils/freePrice'
-import { MetadataPreview } from '../../../Publish/MetadataPreview'
-import MetadataFeedback from '../../../Publish/MetadataFeedback'
 import content from '../../../../../content/pages/edit.json'
 
 export default function Edit({
@@ -139,19 +137,7 @@ export default function Edit({
     >
       {({ isSubmitting, values, initialValues }) =>
         isSubmitting || hasFeedback ? (
-          <MetadataFeedback
-            title="Updating Data Set"
-            error={error}
-            success={success}
-            setError={setError}
-            successAction={{
-              name: content.form.successAction,
-              onClick: async () => {
-                await refreshDdo()
-                setShowEdit(false)
-              }
-            }}
-          />
+          <div />
         ) : (
           <>
             <p className={styles.description}>{content.description}</p>
@@ -166,7 +152,6 @@ export default function Edit({
               /> */}
 
               <aside>
-                {/* <MetadataPreview values={values} /> */}
                 <Web3Feedback />
               </aside>
 

src/components/Asset/AssetContent/index.tsx

@@ -16,14 +16,6 @@ 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/Header/UserPreferences/Networks/index.tsx

@@ -3,8 +3,8 @@ import Label from '@shared/Form/Input/Label'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import FormHelp from '@shared/Form/Input/Help'
 import Tooltip from '@shared/atoms/Tooltip'
-import { ReactComponent as Caret } from '@images/caret.svg'
-import { ReactComponent as Network } from '@images/network.svg'
+import Caret from '@images/caret.svg'
+import Network from '@images/network.svg'
 import NetworksList from './NetworksList'
 import stylesIndex from '../index.module.css'
 import styles from './index.module.css'

src/components/Header/index.tsx

@@ -1,10 +1,6 @@
 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/Profile/Header/NumberUnit.tsx

@@ -1,9 +1,5 @@
 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/atoms/DebugOutput'
+import DebugOutput from '@shared/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({

src/components/Publish/FormAlgoPublish.tsx

@@ -1,10 +1,10 @@
-// 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'

src/components/Publish/FormPublish/Metadata/index.tsx

@@ -0,0 +1,19 @@
+import Input from '@shared/Form/Input'
+import { Field } from 'formik'
+import React, { ReactElement } from 'react'
+import content from '../../../../../content/publish/form.json'
+
+export default function MetadataFields(): ReactElement {
+  return (
+    <>
+      {content.metadata.fields.map((field: FormFieldProps) => (
+        <Field
+          {...field}
+          key={`metadata-${field.name}`}
+          component={Input}
+          name={`metadata.${field.name}`}
+        />
+      ))}
+    </>
+  )
+}

src/components/Publish/FormPublish/Preview/index.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, ReactElement, useState } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
 import Markdown from '@shared/Markdown'
 import Tags from '@shared/atoms/Tags'
-import MetaItem from '../../components/Asset/AssetContent/MetaItem'
+import MetaItem from '../../../Asset/AssetContent/MetaItem'
 import FileIcon from '@shared/FileIcon'
 import Button from '@shared/atoms/Button'
 import { transformTags } from '@utils/metadata'
@@ -11,7 +11,7 @@ import { useWeb3 } from '@context/Web3'
 import styles from './MetadataPreview.module.css'
 import Web3Feedback from '@shared/Web3Feedback'
 import { useAsset } from '@context/Asset'
-import { FormPublishData } from './_types'
+import { FormPublishData } from '../../_types'
 
 function Description({ description }: { description: string }) {
   const [fullDescription, setFullDescription] = useState<boolean>(false)

src/components/Publish/FormPublish/Pricing/index.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useEffect } from 'react'
 import { useFormikContext } from 'formik'
 import { DDO } from '@oceanprotocol/lib'
-import { graphql, useStaticQuery } from 'gatsby'
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import Tabs from '@shared/atoms/Tabs'
 import { isValidNumber } from '@utils/numbers'
@@ -10,57 +9,9 @@ import { FormPublishData } from '../../_types'
 import Dynamic from './Dynamic'
 import Fixed from './Fixed'
 import Free from './Free'
+import content from '../../../../../content/price.json'
 
-const query = graphql`
-  query PricingQuery {
-    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
-      edges {
-        node {
-          childContentJson {
-            create {
-              empty {
-                title
-                info
-                action {
-                  name
-                  help
-                }
-              }
-              fixed {
-                title
-                info
-                tooltips {
-                  communityFee
-                  marketplaceFee
-                }
-              }
-              dynamic {
-                title
-                info
-                tooltips {
-                  poolInfo
-                  swapFee
-                  communityFee
-                  marketplaceFee
-                }
-              }
-              free {
-                title
-                info
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-export default function Pricing(): ReactElement {
-  // Get content
-  const data = useStaticQuery(query)
-  const content = data.content.edges[0].node.childContentJson.create
-
+export default function PricingFields(): ReactElement {
   const { appConfig } = useSiteMetadata()
 
   // Connect with main publish form
@@ -96,20 +47,20 @@ export default function Pricing(): ReactElement {
   const tabs = [
     appConfig.allowFixedPricing === 'true'
       ? {
-          title: content.fixed.title,
-          content: <Fixed content={content.fixed} />
+          title: content.create.fixed.title,
+          content: <Fixed content={content.create.fixed} />
         }
       : undefined,
     appConfig.allowDynamicPricing === 'true'
       ? {
-          title: content.dynamic.title,
-          content: <Dynamic content={content.dynamic} />
+          title: content.create.dynamic.title,
+          content: <Dynamic content={content.create.dynamic} />
         }
       : undefined,
     appConfig.allowFreePricing === 'true'
       ? {
-          title: content.free.title,
-          content: <Free content={content.free} />
+          title: content.create.free.title,
+          content: <Free content={content.create.free} />
         }
       : undefined
   ].filter((tab) => tab !== undefined)

src/components/Publish/FormPublish/Services/index.tsx

@@ -0,0 +1,40 @@
+import Input from '@shared/Form/Input'
+import { Field } from 'formik'
+import React, { ReactElement } from 'react'
+import IconDownload from '@images/download.svg'
+import IconCompute from '@images/compute.svg'
+import content from '../../../../../content/publish/form.json'
+
+const accessTypeOptions = [
+  {
+    name: 'Download',
+    title: 'Download',
+    icon: <IconDownload />
+  },
+  {
+    name: 'Compute',
+    title: 'Compute',
+    icon: <IconCompute />
+  }
+]
+
+export default function ServicesFields(): ReactElement {
+  return (
+    <>
+      {content.services.fields.map(
+        (field: FormFieldProps) =>
+          field.advanced !== true && (
+            <Field
+              {...field}
+              key={`services-${field.name}`}
+              component={Input}
+              name={`services[0].${field.name}`}
+              options={
+                field.name === 'access' ? accessTypeOptions : field.options
+              }
+            />
+          )
+      )}
+    </>
+  )
+}

src/components/Publish/FormPublish/index.tsx

@@ -1,169 +1,35 @@
-import React, {
-  ReactElement,
-  useEffect,
-  FormEvent,
-  ChangeEvent,
-  useState
-} from 'react'
-import { useStaticQuery, graphql } from 'gatsby'
-import { useFormikContext, Field, Form, FormikContextType } from 'formik'
-import Input from '@shared/Form/Input'
-import { ReactComponent as Download } from '@images/download.svg'
-import { ReactComponent as Compute } from '@images/compute.svg'
+import React, { ReactElement, FormEvent } from 'react'
+import { useFormikContext, Form, FormikContextType } from 'formik'
 import FormActions from './FormActions'
-import AdvancedSettings from '@shared/Form/FormFields/AdvancedSettings'
 import { FormPublishData } from '../_types'
 import styles from './index.module.css'
 import { initialValues } from '../_constants'
 import Tabs from '@shared/atoms/Tabs'
-import Pricing from './Pricing'
+import PricingFields from './Pricing'
 import Debug from '../Debug'
-
-const query = graphql`
-  query {
-    content: publishJson {
-      metadata {
-        title
-        fields {
-          name
-          placeholder
-          label
-          help
-          type
-          required
-          options
-          disclaimer
-          disclaimerValues
-          advanced
-        }
-      }
-      services {
-        title
-        fields {
-          name
-          placeholder
-          label
-          help
-          type
-          required
-          options
-          disclaimer
-          disclaimerValues
-          advanced
-        }
-      }
-      pricing {
-        title
-        fields {
-          name
-          placeholder
-          label
-          help
-          type
-          required
-          options
-          disclaimer
-          disclaimerValues
-          advanced
-        }
-      }
-      warning
-    }
-  }
-`
-
-const accessTypeOptions = [
-  {
-    name: 'Download',
-    title: 'Download',
-    icon: <Download />
-  },
-  {
-    name: 'Compute',
-    title: 'Compute',
-    icon: <Compute />
-  }
-]
+import MetadataFields from './Metadata'
+import ServicesFields from './Services'
+import content from '../../../../content/publish/form.json'
 
 export default function FormPublish(): ReactElement {
-  const { content } = useStaticQuery(query)
-
-  const {
-    setStatus,
-    isValid,
-    values,
-    setErrors,
-    setTouched,
-    resetForm,
-    validateField,
-    setFieldValue
-  }: FormikContextType<FormPublishData> = useFormikContext()
-
-  const [computeTypeSelected, setComputeTypeSelected] = useState<boolean>(false)
+  const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
+    useFormikContext()
 
   // reset form validation on every mount
-  useEffect(() => {
-    setErrors({})
-    setTouched({})
+  // useEffect(() => {
+  //   setErrors({})
+  //   setTouched({})
 
-    // setSubmitting(false)
-  }, [setErrors, setTouched])
-
-  const computeTypeOptions = ['1 day', '1 week', '1 month', '1 year']
-
-  // Manually handle change events instead of using `handleChange` from Formik.
-  // Workaround for default `validateOnChange` not kicking in
-  function handleFieldChange(
-    e: ChangeEvent<HTMLInputElement>,
-    field: FormFieldProps
-  ) {
-    const value =
-      field.type === 'terms' ? !JSON.parse(e.target.value) : e.target.value
-
-    if (field.name === 'access' && value === 'Compute') {
-      setComputeTypeSelected(true)
-      if (values.timeout === 'Forever')
-        setFieldValue('timeout', computeTypeOptions[0])
-    } else {
-      if (field.name === 'access' && value === 'Download') {
-        setComputeTypeSelected(false)
-      }
-    }
-
-    validateField(field.name)
-    setFieldValue(field.name, value)
-  }
+  //   // setSubmitting(false)
+  // }, [setErrors, setTouched])
 
   const resetFormAndClearStorage = (e: FormEvent<Element>) => {
     e.preventDefault()
+
     resetForm({
       values: initialValues as FormPublishData,
       status: 'empty'
     })
-    setStatus('empty')
-  }
-
-  function getStepContentFields(contentStep: FormStepContent) {
-    return contentStep.fields.map(
-      (field: FormFieldProps) =>
-        field.advanced !== true && (
-          <Field
-            key={field.name}
-            {...field}
-            options={
-              field.type === 'boxSelection'
-                ? accessTypeOptions
-                : field.name === 'timeout' && computeTypeSelected === true
-                ? computeTypeOptions
-                : field.options
-            }
-            component={Input}
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
-              handleFieldChange(e, field)
-            }
-          />
-        )
-    )
   }
 
   const tabs = [
@@ -171,11 +37,7 @@ export default function FormPublish(): ReactElement {
       title: content.metadata.title,
       content: (
         <>
-          {getStepContentFields(content.metadata)}
-          <AdvancedSettings
-            content={content.metadata}
-            handleFieldChange={handleFieldChange}
-          />
+          <MetadataFields />
           <FormActions
             isValid={isValid}
             resetFormAndClearStorage={resetFormAndClearStorage}
@@ -187,11 +49,7 @@ export default function FormPublish(): ReactElement {
       title: content.services.title,
       content: (
         <>
-          {getStepContentFields(content.services)}
-          <AdvancedSettings
-            content={content.services}
-            handleFieldChange={handleFieldChange}
-          />
+          <ServicesFields />
           <FormActions
             isValid={isValid}
             resetFormAndClearStorage={resetFormAndClearStorage}
@@ -203,7 +61,7 @@ export default function FormPublish(): ReactElement {
       title: content.pricing.title,
       content: (
         <>
-          <Pricing />
+          <PricingFields />
           <FormActions
             isValid={isValid}
             resetFormAndClearStorage={resetFormAndClearStorage}

src/components/Publish/MetadataFeedback.module.css

@@ -1,43 +0,0 @@
-.feedback {
-  width: 100%;
-  min-height: 40vh;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.box {
-  composes: box from '@shared/atoms/Box.module.css';
-  width: 100%;
-}
-
-.feedback h3 {
-  font-size: var(--font-size-large);
-  text-align: center;
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
-.feedback h3 + div {
-  text-align: left;
-}
-
-@media (min-width: 40rem) {
-  .feedback {
-    max-width: 30rem;
-    margin: 0 auto;
-  }
-}
-
-.feedback [class*='loaderWrap'] {
-  justify-content: center;
-  text-align: center;
-}
-
-.action {
-  margin-top: calc(var(--spacer) / 1.5);
-}
-.moreInfo {
-  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2) !important;
-}

src/components/Publish/MetadataFeedback.tsx

@@ -1,94 +0,0 @@
-import Alert from '@shared/atoms/Alert'
-import Button from '@shared/atoms/Button'
-import Loader from '@shared/atoms/Loader'
-import React, { ReactElement, useState, FormEvent } from 'react'
-import styles from './MetadataFeedback.module.css'
-import SuccessConfetti from '@shared/SuccessConfetti'
-
-interface Action {
-  name: string
-  onClick?: () => void
-  to?: string
-}
-
-function ActionSuccess({ action }: { action: Action }) {
-  const { name, onClick, to } = action
-
-  return (
-    <Button
-      style="primary"
-      size="small"
-      onClick={onClick || null}
-      to={to || null}
-      className={styles.action}
-    >
-      {name}
-    </Button>
-  )
-}
-
-function ActionError({ setError }: { setError: (error: string) => void }) {
-  return (
-    <Button
-      style="primary"
-      size="small"
-      className={styles.action}
-      onClick={() => setError(undefined)}
-    >
-      Try Again
-    </Button>
-  )
-}
-
-export default function MetadataFeedback({
-  title,
-  error,
-  success,
-  loading,
-  successAction,
-  setError
-}: {
-  title: string
-  error: string
-  success: string
-  loading?: string
-  successAction: Action
-  setError: (error: string) => void
-}): ReactElement {
-  const [moreInfo, setMoreInfo] = useState<boolean>(false)
-
-  function toggleMoreInfo(e: FormEvent<Element>) {
-    e.preventDefault()
-    moreInfo === true ? setMoreInfo(false) : setMoreInfo(true)
-  }
-
-  return (
-    <div className={styles.feedback}>
-      <div className={styles.box}>
-        <h3>{title}</h3>
-        {error ? (
-          <>
-            <p>Sorry, something went wrong. Please try again.</p>
-            {moreInfo && <Alert text={error} state="error" />}
-            <Button
-              style="text"
-              size="small"
-              onClick={toggleMoreInfo}
-              className={styles.moreInfo}
-            >
-              {moreInfo === false ? 'More Info' : 'Hide error'}
-            </Button>
-            <ActionError setError={setError} />
-          </>
-        ) : success ? (
-          <SuccessConfetti
-            success={success}
-            action={<ActionSuccess action={successAction} />}
-          />
-        ) : (
-          <Loader message={loading} />
-        )}
-      </div>
-    </div>
-  )
-}

src/components/Publish/Title.tsx

@@ -3,27 +3,9 @@ import NetworkName from '@shared/NetworkName'
 import Tooltip from '@shared/atoms/Tooltip'
 import { useWeb3 } from '@context/Web3'
 import styles from './Title.module.css'
-
-import { graphql, useStaticQuery } from 'gatsby'
-
-const query = graphql`
-  query {
-    content: allFile(filter: { relativePath: { eq: "publish/index.json" } }) {
-      edges {
-        node {
-          childPublishJson {
-            title
-            tooltipNetwork
-          }
-        }
-      }
-    }
-  }
-`
+import content from '../../../content/publish/index.json'
 
 export default function Title(): ReactElement {
-  const data = useStaticQuery(query)
-  const content = data.content.edges[0].node.childPublishJson
   const { networkId } = useWeb3()
 
   return (

src/components/Publish/index.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import Permission from '@shared/Permission'
 import { Formik, FormikState } from 'formik'
 import { usePublish } from '@hooks/usePublish'
 import { initialValues, validationSchema } from './_constants'
@@ -81,6 +80,10 @@ export default function PublishPage({
   //   }
   // }
 
+  return (
+    <>
+      <PageHeader title={<Title />} description={content.description} />
+
       {isInPurgatory && purgatoryData ? null : (
         <Formik
           initialValues={initialValues}

src/components/Search/Filters.tsx

@@ -2,12 +2,11 @@ import React, { ReactElement, useState } from 'react'
 import classNames from 'classnames/bind'
 import { addExistingParamsToUrl } from './utils'
 import Button from '@shared/atoms/Button'
-import styles from './Filters.module.css'
 import {
   FilterByAccessOptions,
   FilterByTypeOptions
 } from '../../@types/aquarius/SearchQuery'
-import router, { useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import styles from './Filters.module.css'
 
 const cx = classNames.bind(styles)

src/pages/_app.tsx

@@ -8,19 +8,10 @@ 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>

src/pages/publish.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import Publish from '../components/Publish'
 import Page from '@shared/Page'
 import OceanProvider from '@context/Ocean'
-import content from '../../content/pages/publish/index.json'
+import content from '../../content/publish/index.json'
 import router from 'next/router'
 
 export default function PagePublish(): ReactElement {
@@ -10,7 +10,12 @@ export default function PagePublish(): ReactElement {
 
   return (
     <OceanProvider>
-      <Page title={title} description={description} uri={router.route}>
+      <Page
+        title={title}
+        description={description}
+        uri={router.route}
+        noPageHeader
+      >
         <Publish content={content} />
       </Page>
     </OceanProvider>