diff --git a/content/publish/index.json b/content/publish/index.json index d35432fca..65fc81d45 100644 --- a/content/publish/index.json +++ b/content/publish/index.json @@ -2,5 +2,5 @@ "title": "Publish", "description": "Highlight the important features of your data set or algorithm to make it more discoverable and catch the interest of data consumers.", "warning": "Publishing into a test network first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).", - "tooltipNetwork": "Assets are published into the network your wallet is connected to. Switch your wallet's network to publish into another one." + "tooltipAvailableNetworks": "Assets are published to the network your wallet is connected to. These networks are currently supported:" } diff --git a/src/@context/Web3.tsx b/src/@context/Web3.tsx index e09c11924..a97df6812 100644 --- a/src/@context/Web3.tsx +++ b/src/@context/Web3.tsx @@ -21,6 +21,7 @@ import useNetworkMetadata, { getNetworkType, NetworkType } from '../@hooks/useNetworkMetadata' +import { useMarketMetadata } from './MarketMetadata' interface Web3ProviderValue { web3: Web3 @@ -37,6 +38,7 @@ interface Web3ProviderValue { block: number isTestnet: boolean web3Loading: boolean + isSupportedOceanNetwork: boolean connect: () => Promise logout: () => Promise } @@ -88,6 +90,7 @@ const Web3Context = createContext({} as Web3ProviderValue) function Web3Provider({ children }: { children: ReactNode }): ReactElement { const { networksList } = useNetworkMetadata() + const { appConfig } = useMarketMetadata() const [web3, setWeb3] = useState() const [web3Provider, setWeb3Provider] = useState() @@ -106,6 +109,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement { eth: '0', ocean: '0' }) + const [isSupportedOceanNetwork, setIsSupportedOceanNetwork] = useState(true) // ----------------------------------- // Helper: connect to web3 @@ -304,6 +308,17 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement { } await web3Modal.clearCachedProvider() } + // ----------------------------------- + // Get valid Networks and set isSupportedOceanNetwork + // ----------------------------------- + + useEffect(() => { + if (appConfig.chainIdsSupported.includes(networkId)) { + setIsSupportedOceanNetwork(true) + } else { + setIsSupportedOceanNetwork(false) + } + }, [networkId, appConfig.chainIdsSupported]) // ----------------------------------- // Handle change events @@ -358,6 +373,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement { block, isTestnet, web3Loading, + isSupportedOceanNetwork, connect, logout }} diff --git a/src/components/Header/Wallet/Network.tsx b/src/components/Header/Wallet/Network.tsx index c3bff00b4..79dab5384 100644 --- a/src/components/Header/Wallet/Network.tsx +++ b/src/components/Header/Wallet/Network.tsx @@ -1,27 +1,13 @@ -import React, { useState, useEffect, ReactElement } from 'react' +import React, { ReactElement } from 'react' import Status from '@shared/atoms/Status' import Badge from '@shared/atoms/Badge' import Tooltip from '@shared/atoms/Tooltip' import { useWeb3 } from '@context/Web3' import NetworkName from '@shared/NetworkName' import styles from './Network.module.css' -import { getOceanConfig } from '@utils/ocean' export default function Network(): ReactElement { - const { networkId, isTestnet } = useWeb3() - - const [isSupportedOceanNetwork, setIsSupportedOceanNetwork] = - useState() - - useEffect(() => { - // take network from user when present - const network = networkId || 1 - - // Check networkId against ocean.js ConfigHelper configs - // to figure out if network is supported. - const isSupportedOceanNetwork = Boolean(getOceanConfig(network)) - setIsSupportedOceanNetwork(isSupportedOceanNetwork) - }, [networkId]) + const { networkId, isTestnet, isSupportedOceanNetwork } = useWeb3() return networkId ? (
diff --git a/src/components/Publish/Actions/index.module.css b/src/components/Publish/Actions/index.module.css index 26239348a..6d7145403 100644 --- a/src/components/Publish/Actions/index.module.css +++ b/src/components/Publish/Actions/index.module.css @@ -8,3 +8,16 @@ .actions button { margin: 0 calc(var(--spacer) / 2); } + +.infoIcon { + width: 0.85em; + height: 0.85em; + display: inline-block; + margin-bottom: -0.1em; + margin-left: calc(var(--spacer) / 6); + fill: currentColor; +} +.infoButton { + cursor: help !important; + pointer-events: all !important; +} diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx index a400cc190..d999ef922 100644 --- a/src/components/Publish/Actions/index.tsx +++ b/src/components/Publish/Actions/index.tsx @@ -5,7 +5,10 @@ import { FormikContextType, useFormikContext } from 'formik' import { FormPublishData } from '../_types' import { wizardSteps } from '../_constants' import SuccessConfetti from '@shared/SuccessConfetti' -import { useWeb3 } from '../../../@context/Web3' +import { useWeb3 } from '@context/Web3' +import Tooltip from '@shared/atoms/Tooltip' +import AvailableNetworks from 'src/components/Publish/AvailableNetworks' +import Info from '@images/info.svg' export default function Actions({ scrollToRef, @@ -14,6 +17,7 @@ export default function Actions({ scrollToRef: RefObject did: string }): ReactElement { + const { isSupportedOceanNetwork } = useWeb3() const { values, errors, @@ -78,6 +82,17 @@ export default function Actions({ + ) : !isSupportedOceanNetwork ? ( + }> + + ) : ( + ) +} diff --git a/src/components/Publish/AvailableNetworks/index.module.css b/src/components/Publish/AvailableNetworks/index.module.css new file mode 100644 index 000000000..9e4c1385f --- /dev/null +++ b/src/components/Publish/AvailableNetworks/index.module.css @@ -0,0 +1,12 @@ +.networks { + column-count: 2; +} +.title { + font-size: var(--font-size-small); + margin-bottom: calc(var(--spacer) / 6); + margin-top: calc(var(--spacer) / 2); + color: var(--color-secondary); +} +.content { + padding: calc(var(--spacer) / 2); +} diff --git a/src/components/Publish/AvailableNetworks/index.tsx b/src/components/Publish/AvailableNetworks/index.tsx new file mode 100644 index 000000000..bc5932e36 --- /dev/null +++ b/src/components/Publish/AvailableNetworks/index.tsx @@ -0,0 +1,53 @@ +import React, { ReactElement } from 'react' +import styles from './index.module.css' +import Network from './Network' +import useNetworkMetadata, { + filterNetworksByType +} from '@hooks/useNetworkMetadata' +import content from '../../../../content/publish/index.json' +import { useMarketMetadata } from '@context/MarketMetadata' + +export default function AvailableNetworks(): ReactElement { + const { networksList } = useNetworkMetadata() + const { appConfig } = useMarketMetadata() + + const networksMain = filterNetworksByType( + 'mainnet', + appConfig.chainIdsSupported, + networksList + ) + + const networksTest = filterNetworksByType( + 'testnet', + appConfig.chainIdsSupported, + networksList + ) + const networkCategories = [ + { title: 'Main', data: networksMain }, + { title: 'Test', data: networksTest } + ] + + const networkList = (networks: number[]) => + networks.map((chainId) => ( +
  • + +
    • + )) + + return ( +
    + {content.tooltipAvailableNetworks} + {networkCategories.map( + (networkCategory) => + networkCategory.data.length > 0 && ( + <> +

    {networkCategory.title}

    +
      + {networkList(networkCategory.data)} +
    + + ) + )} +
    + ) +} diff --git a/src/components/Publish/Title/index.module.css b/src/components/Publish/Title/index.module.css index 2fc3d8b7e..41040b114 100644 --- a/src/components/Publish/Title/index.module.css +++ b/src/components/Publish/Title/index.module.css @@ -2,15 +2,21 @@ color: var(--font-color-heading); margin-left: calc(var(--spacer) / 3); } - .network svg { width: 1em; height: 1em; margin-top: -0.25em; fill: currentColor; } - .tooltip { width: 0.5em; height: 0.5em; + fill: var(--color-secondary); +} +.error { + fill: var(--brand-alert-red); + color: var(--brand-alert-red); +} +.infoIcon { + composes: infoIcon from '../Actions/index.module.css'; } diff --git a/src/components/Publish/Title/index.tsx b/src/components/Publish/Title/index.tsx index 00a6667af..1ea2805ae 100644 --- a/src/components/Publish/Title/index.tsx +++ b/src/components/Publish/Title/index.tsx @@ -3,22 +3,40 @@ import NetworkName from '@shared/NetworkName' import Tooltip from '@shared/atoms/Tooltip' import styles from './index.module.css' import content from '../../../../content/publish/index.json' +import { useWeb3 } from '@context/Web3' +import Info from '@images/info.svg' +import AvailableNetworks from 'src/components/Publish/AvailableNetworks' export default function Title({ networkId }: { networkId: number }): ReactElement { + const { isSupportedOceanNetwork, accountId } = useWeb3() return ( <> {content.title}{' '} {networkId && ( <> - into - + } + className={ + isSupportedOceanNetwork || !accountId + ? styles.tooltip + : `${styles.tooltip} ${styles.error}` + } + > + + )} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5b106b441..33d6c7931 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -16,9 +16,9 @@ import MarketMetadataProvider from '@context/MarketMetadata' function MyApp({ Component, pageProps }: AppProps): ReactElement { Decimal.set({ rounding: 1 }) return ( - - - + + + @@ -28,9 +28,9 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement { - - - + + + ) }