publish form fixes (#768)

* fix publish form submit button

* directly use generateDatatokenName from ocean.js

* bump ocean.js to v0.17.0

* fix all the publish things

* wrap OceanProvider around publish page
* initiate Ocean from usePublish hook

package-lock.json

@@ -13,7 +13,7 @@
         "@coingecko/cryptoformat": "^0.4.2",
         "@loadable/component": "^5.15.0",
         "@oceanprotocol/art": "^3.0.0",
-        "@oceanprotocol/lib": "^0.16.6",
+        "@oceanprotocol/lib": "^0.17.0",
         "@oceanprotocol/typographies": "^0.1.0",
         "@portis/web3": "^4.0.4",
         "@sindresorhus/slugify": "^2.1.0",
@@ -5683,9 +5683,9 @@
       }
     },
     "node_modules/@oceanprotocol/lib": {
-      "version": "0.16.6",
+      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.6.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.17.0.tgz",
-      "integrity": "sha512-ycjiIvWs6cjbfnkJgQ9V/hghViAh1vepxE9p/9wg/wZDFMsXRfLzLFWcrF6CQ0Ce8khZhErdBBzaCfyq1gfVyg==",
+      "integrity": "sha512-xXe4KLb61YKT90uJ1e74aLd6qF373ybdAV8VkjJQBHIoVXXa8fC1DK/nee+At0gX2zu6B3ROXuET37YEc0AHmg==",
       "dependencies": {
         "@ethereum-navigator/navigator": "^0.5.3",
         "@oceanprotocol/contracts": "^0.6.5",
@@ -60208,9 +60208,9 @@
       }
     },
     "@oceanprotocol/lib": {
-      "version": "0.16.6",
+      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.6.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.17.0.tgz",
-      "integrity": "sha512-ycjiIvWs6cjbfnkJgQ9V/hghViAh1vepxE9p/9wg/wZDFMsXRfLzLFWcrF6CQ0Ce8khZhErdBBzaCfyq1gfVyg==",
+      "integrity": "sha512-xXe4KLb61YKT90uJ1e74aLd6qF373ybdAV8VkjJQBHIoVXXa8fC1DK/nee+At0gX2zu6B3ROXuET37YEc0AHmg==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.3",
         "@oceanprotocol/contracts": "^0.6.5",

package.json

@@ -28,7 +28,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.16.6",
+    "@oceanprotocol/lib": "^0.17.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.4",
     "@sindresorhus/slugify": "^2.1.0",

src/components/molecules/FormFields/Datatoken/index.tsx

@@ -1,26 +1,22 @@
 import { useField } from 'formik'
-import { InputProps } from '../../../atoms/Input'
-import { useOcean } from '../../../../providers/Ocean'
 import React, { ReactElement, useEffect } from 'react'
+import { utils } from '@oceanprotocol/lib'
+import { InputProps } from '../../../atoms/Input'
+import RefreshName from './RefreshName'
 import styles from './index.module.css'
 
-import RefreshName from './RefreshName'
-
 export default function Datatoken(props: InputProps): ReactElement {
-  const { ocean } = useOcean()
   const [field, meta, helpers] = useField(props.name)
 
-  function generateName() {
+  async function generateName() {
-    if (!ocean) return
+    const dataTokenOptions = utils.generateDatatokenName()
-    const dataTokenOptions = ocean.datatokens.generateDtName()
     helpers.setValue({ ...dataTokenOptions })
   }
 
-  // Generate new DT name & symbol
+  // Generate new DT name & symbol on first mount
   useEffect(() => {
-    if (!ocean) return
     generateName()
-  }, [ocean])
+  }, [])
 
   return (
     <div className={styles.datatoken}>

src/components/molecules/Web3Feedback.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import { useWeb3 } from '../../providers/Web3'
 import Status from '../atoms/Status'
 import styles from './Web3Feedback.module.css'
@@ -22,7 +22,6 @@ export default function Web3Feedback({
   const { isGraphSynced, blockGraph, blockHead } = useGraphSyncStatus()
   const showFeedback =
     !accountId ||
-    // !ocean ||
     isBalanceSufficient === false ||
     isAssetNetwork === false ||
     isGraphSynced === false
@@ -36,9 +35,7 @@ export default function Web3Feedback({
 
   const title = !accountId
     ? 'No account connected'
-    : // : !ocean
+    : accountId && isAssetNetwork === false
-    // ? 'Error connecting to Ocean'
-    accountId && isAssetNetwork === false
     ? 'Not connected to asset network'
     : isGraphSynced === false
     ? `Data out of sync`

src/components/pages/Publish/FormPublish.tsx

@@ -43,7 +43,6 @@ export default function FormPublish(): ReactElement {
   const data = useStaticQuery(query)
   const content: FormContent = data.content.edges[0].node.childPublishJson
 
-  const { ocean, account } = useOcean()
   const {
     status,
     setStatus,

src/hooks/usePublish.ts

@@ -4,10 +4,12 @@ import {
   ServiceComputePrivacy,
   ServiceType
 } from '@oceanprotocol/lib/dist/node/ddo/interfaces/Service'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { sleep } from '../utils'
 import { publishFeedback } from '../utils/feedback'
 import { useOcean } from '../providers/Ocean'
+import { useWeb3 } from '../providers/Web3'
+import { getOceanConfig } from '../utils/ocean'
 
 interface DataTokenOptions {
   cap?: string
@@ -30,7 +32,8 @@ interface UsePublish {
 }
 
 function usePublish(): UsePublish {
-  const { ocean, account } = useOcean()
+  const { networkId, web3Loading } = useWeb3()
+  const { connect, ocean, account } = useOcean()
   const [isLoading, setIsLoading] = useState(false)
   const [publishStep, setPublishStep] = useState<number | undefined>()
   const [publishStepText, setPublishStepText] = useState<string | undefined>()
@@ -40,6 +43,20 @@ function usePublish(): UsePublish {
     setPublishStep(index)
     index && setPublishStepText(publishFeedback[index])
   }
+
+  //
+  // Initiate OceanProvider based on user wallet
+  //
+  useEffect(() => {
+    if (web3Loading || !connect) return
+
+    async function initOcean() {
+      const config = getOceanConfig(networkId)
+      await connect(config)
+    }
+    initOcean()
+  }, [web3Loading, networkId, connect])
+
   /**
    * Publish an asset. It also creates the datatoken, mints tokens and gives the market allowance
    * @param  {Metadata} asset The metadata of the asset.

src/pages/publish.tsx

@@ -2,15 +2,18 @@ import React, { ReactElement } from 'react'
 import PagePublish from '../components/pages/Publish'
 import Page from '../components/templates/Page'
 import { graphql, PageProps } from 'gatsby'
+import OceanProvider from '../providers/Ocean'
 
 export default function PageGatsbyPublish(props: PageProps): ReactElement {
   const content = (props.data as any).content.edges[0].node.childPublishJson
   const { title, description } = content
 
   return (
-    <Page title={title} description={description} uri={props.uri}>
+    <OceanProvider>
-      <PagePublish content={content} />
+      <Page title={title} description={description} uri={props.uri}>
-    </Page>
+        <PagePublish content={content} />
+      </Page>
+    </OceanProvider>
   )
 }
 

src/providers/Ocean.tsx

@@ -8,7 +8,6 @@ import React, {
   useEffect
 } from 'react'
 import { Ocean, Logger, Account, ConfigHelperConfig } from '@oceanprotocol/lib'
-
 import { useWeb3 } from './Web3'
 import { getDevelopmentConfig, getOceanConfig } from '../utils/ocean'
 import { useAsset } from './Asset'
@@ -56,7 +55,7 @@ function OceanProvider({ children }: { children: ReactNode }): ReactElement {
   )
 
   // -----------------------------------
-  // Initial connection
+  // Initial asset details connection
   // -----------------------------------
   useEffect(() => {
     if (!ddo?.chainId) return