diff --git a/package-lock.json b/package-lock.json index 0fa6509dc..358605907 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.6.tgz", - "integrity": "sha512-ycjiIvWs6cjbfnkJgQ9V/hghViAh1vepxE9p/9wg/wZDFMsXRfLzLFWcrF6CQ0Ce8khZhErdBBzaCfyq1gfVyg==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.17.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.6.tgz", - "integrity": "sha512-ycjiIvWs6cjbfnkJgQ9V/hghViAh1vepxE9p/9wg/wZDFMsXRfLzLFWcrF6CQ0Ce8khZhErdBBzaCfyq1gfVyg==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.17.0.tgz", + "integrity": "sha512-xXe4KLb61YKT90uJ1e74aLd6qF373ybdAV8VkjJQBHIoVXXa8fC1DK/nee+At0gX2zu6B3ROXuET37YEc0AHmg==", "requires": { "@ethereum-navigator/navigator": "^0.5.3", "@oceanprotocol/contracts": "^0.6.5", diff --git a/package.json b/package.json index 8be236d1e..0b1a625dd 100644 --- a/package.json +++ b/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", diff --git a/src/components/molecules/FormFields/Datatoken/index.tsx b/src/components/molecules/FormFields/Datatoken/index.tsx index 2ddf8cbb0..08b304bf6 100644 --- a/src/components/molecules/FormFields/Datatoken/index.tsx +++ b/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() { - if (!ocean) return - const dataTokenOptions = ocean.datatokens.generateDtName() + async function generateName() { + const dataTokenOptions = utils.generateDatatokenName() helpers.setValue({ ...dataTokenOptions }) } - // Generate new DT name & symbol + // Generate new DT name & symbol on first mount useEffect(() => { - if (!ocean) return generateName() - }, [ocean]) + }, []) return (
diff --git a/src/components/molecules/Web3Feedback.tsx b/src/components/molecules/Web3Feedback.tsx index 486c2a682..68e8c17f8 100644 --- a/src/components/molecules/Web3Feedback.tsx +++ b/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 - // ? 'Error connecting to Ocean' - accountId && isAssetNetwork === false + : accountId && isAssetNetwork === false ? 'Not connected to asset network' : isGraphSynced === false ? `Data out of sync` diff --git a/src/components/pages/Publish/FormPublish.tsx b/src/components/pages/Publish/FormPublish.tsx index b11039cfd..6252d3e28 100644 --- a/src/components/pages/Publish/FormPublish.tsx +++ b/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, diff --git a/src/hooks/usePublish.ts b/src/hooks/usePublish.ts index 19c6fb239..e79b04127 100644 --- a/src/hooks/usePublish.ts +++ b/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() const [publishStepText, setPublishStepText] = useState() @@ -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. diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx index 02f7d47da..08d9869e3 100644 --- a/src/pages/publish.tsx +++ b/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 ( - - - + + + + + ) } diff --git a/src/providers/Ocean.tsx b/src/providers/Ocean.tsx index 5566e69aa..d1be02161 100644 --- a/src/providers/Ocean.tsx +++ b/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