prototype network feedback based on asset network checks

src/components/atoms/AssetType.module.css

@@ -24,5 +24,5 @@
 
 .network svg {
   vertical-align: baseline;
-  margin-bottom: -0.1em;
+  margin-bottom: -0.15em;
 }

src/components/molecules/MetadataPreview.module.css

@@ -33,7 +33,6 @@
 }
 
 .datatoken {
-  margin-top: calc(var(--spacer) / 8);
   margin-bottom: 0;
   color: var(--color-secondary);
 }

src/components/molecules/MetadataPreview.tsx

@@ -3,7 +3,6 @@ import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interface
 import Markdown from '../atoms/Markdown'
 import Tags from '../atoms/Tags'
 import MetaItem from '../organisms/AssetContent/MetaItem'
-import styles from './MetadataPreview.module.css'
 import File from '../atoms/File'
 import {
   MetadataPublishFormDataset,
@@ -11,6 +10,9 @@ import {
 } from '../../@types/MetaData'
 import Button from '../atoms/Button'
 import { transformTags } from '../../utils/metadata'
+import NetworkName from '../atoms/NetworkName'
+import { useWeb3 } from '../../providers/Web3'
+import styles from './MetadataPreview.module.css'
 
 function Description({ description }: { description: string }) {
   const [fullDescription, setFullDescription] = useState<boolean>(false)
@@ -92,10 +94,13 @@ export function MetadataPreview({
 }: {
   values: Partial<MetadataPublishFormDataset>
 }): ReactElement {
+  const { networkId } = useWeb3()
+
   return (
     <div className={styles.preview}>
       <h2 className={styles.previewTitle}>Preview</h2>
       <header>
+        {networkId && <NetworkName networkId={networkId} />}
         {values.name && <h3 className={styles.title}>{values.name}</h3>}
         {values.dataTokenOptions?.name && (
           <p
@@ -130,10 +135,13 @@ export function MetadataAlgorithmPreview({
 }: {
   values: Partial<MetadataPublishFormAlgorithm>
 }): ReactElement {
+  const { networkId } = useWeb3()
+
   return (
     <div className={styles.preview}>
       <h2 className={styles.previewTitle}>Preview</h2>
       <header>
+        {networkId && <NetworkName networkId={networkId} />}
         {values.name && <h3 className={styles.title}>{values.name}</h3>}
         {values.dataTokenOptions?.name && (
           <p

src/components/molecules/Wallet/Details.tsx

@@ -7,7 +7,7 @@ import AddToken from '../../atoms/AddToken'
 import Conversion from '../../atoms/Price/Conversion'
 import { useWeb3 } from '../../../providers/Web3'
 
-import Web3Feedback from './Feedback'
+import Web3Feedback from '../Web3Feedback'
 import styles from './Details.module.css'
 
 export default function Details(): ReactElement {

src/components/molecules/Wallet/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Web3Feedback from './Feedback'
+import Web3Feedback from '../Web3Feedback'
 import web3Mock from '../../../../tests/unit/__mocks__/web3'
 import { Center } from '../../../../.storybook/helpers'
 

src/components/molecules/Web3Feedback.module.css

@@ -2,8 +2,7 @@
   font-size: var(--font-size-small);
   padding-left: var(--spacer);
   padding-top: calc(var(--spacer) / 1.5);
-  margin-top: var(--spacer);
-  border-top: 1px solid var(--border-color);
+  margin-top: calc(var(--spacer) / 2);
   position: relative;
   width: 100%;
 }

src/components/molecules/Web3Feedback.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
-import { useOcean } from '../../../providers/Ocean'
-import Status from '../../atoms/Status'
-import styles from './Feedback.module.css'
+import { useOcean } from '../../providers/Ocean'
+import Status from '../atoms/Status'
+import styles from './Web3Feedback.module.css'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -10,16 +10,22 @@ export declare type Web3Error = {
 }
 
 export default function Web3Feedback({
-  isBalanceSufficient
+  isBalanceSufficient,
+  isAssetNetwork
 }: {
   isBalanceSufficient?: boolean
+  isAssetNetwork?: boolean
 }): ReactElement {
   const { account, ocean } = useOcean()
-  const showFeedback = !account || !ocean || isBalanceSufficient === false
+  const showFeedback =
+    !account ||
+    !ocean ||
+    isBalanceSufficient === false ||
+    isAssetNetwork === false
 
   const state = !account
     ? 'error'
-    : account && isBalanceSufficient
+    : account && isBalanceSufficient && isAssetNetwork
     ? 'success'
     : 'warning'
 
@@ -27,6 +33,8 @@ export default function Web3Feedback({
     ? 'No account connected'
     : !ocean
     ? 'Error connecting to Ocean'
+    : account && isAssetNetwork === false
+    ? 'Wrong network'
     : account
     ? isBalanceSufficient === false
       ? 'Insufficient balance'
@@ -39,6 +47,8 @@ export default function Web3Feedback({
     ? 'Please try again.'
     : isBalanceSufficient === false
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
+    : isAssetNetwork === false
+    ? 'Connect to the asset network.'
     : 'Something went wrong.'
 
   return showFeedback ? (

src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx

@@ -84,7 +84,7 @@ export default function FormStartCompute({
 
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
     useFormikContext()
-  const { price, ddo } = useAsset()
+  const { price, ddo, isAssetNetwork } = useAsset()
   const [totalPrice, setTotalPrice] = useState(price?.value)
 
   function getAlgorithmAsset(algorithmId: string): DDO {
@@ -149,7 +149,7 @@ export default function FormStartCompute({
 
       <ButtonBuy
         action="compute"
-        disabled={isComputeButtonDisabled || !isValid}
+        disabled={isComputeButtonDisabled || !isValid || !isAssetNetwork}
         hasPreviousOrder={hasPreviousOrder}
         hasDatatoken={hasDatatoken}
         dtSymbol={ddo.dataTokenInfo.symbol}

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

@@ -10,7 +10,6 @@ import { toast } from 'react-toastify'
 import Price from '../../../atoms/Price'
 import File from '../../../atoms/File'
 import Alert from '../../../atoms/Alert'
-import Web3Feedback from '../../../molecules/Wallet/Feedback'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useOcean } from '../../../../providers/Ocean'
 import { useWeb3 } from '../../../../providers/Web3'
@@ -57,7 +56,7 @@ export default function Compute({
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
   const { ocean, account, config } = useOcean()
-  const { price, type, ddo } = useAsset()
+  const { price, type, ddo, isAssetNetwork } = useAsset()
   const { buyDT, pricingError, pricingStepText } = usePricing()
   const [isJobStarting, setIsJobStarting] = useState(false)
   const [error, setError] = useState<string>()
@@ -418,9 +417,6 @@ export default function Compute({
             action={<SuccessAction />}
           />
         )}
-        {type !== 'algorithm' && (
-          <Web3Feedback isBalanceSufficient={isBalanceSufficient} />
-        )}
       </footer>
     </>
   )

src/components/organisms/AssetActions/Consume.tsx

@@ -3,7 +3,6 @@ import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import File from '../../atoms/File'
 import Price from '../../atoms/Price'
-import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useAsset } from '../../../providers/Asset'
@@ -47,7 +46,7 @@ export default function Consume({
   const { appConfig } = useSiteMetadata()
   const [hasPreviousOrder, setHasPreviousOrder] = useState(false)
   const [previousOrderId, setPreviousOrderId] = useState<string>()
-  const { isInPurgatory, price, type } = useAsset()
+  const { isInPurgatory, price, type, isAssetNetwork } = useAsset()
   const { buyDT, pricingStepText, pricingError, pricingIsLoading } =
     usePricing()
   const { consumeStepText, consume, consumeError } = useConsume()
@@ -105,6 +104,7 @@ export default function Consume({
     setIsDisabled(
       (!ocean ||
         !isBalanceSufficient ||
+        !isAssetNetwork ||
         typeof consumeStepText !== 'undefined' ||
         pricingIsLoading ||
         !isConsumable) &&
@@ -115,6 +115,7 @@ export default function Consume({
     ocean,
     hasPreviousOrder,
     isBalanceSufficient,
+    isAssetNetwork,
     consumeStepText,
     pricingIsLoading,
     isConsumable,
@@ -166,9 +167,6 @@ export default function Consume({
           {!isInPurgatory && <PurchaseButton />}
         </div>
       </div>
-      <footer className={styles.feedback}>
-        <Web3Feedback isBalanceSufficient={isBalanceSufficient} />
-      </footer>
     </aside>
   )
 }

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

@@ -9,7 +9,7 @@ import { useAsset } from '../../../../providers/Asset'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
 import { MetadataPreview } from '../../../molecules/MetadataPreview'
 import Debug from './DebugEditMetadata'
-import Web3Feedback from '../../../molecules/Wallet/Feedback'
+import Web3Feedback from '../../../molecules/Web3Feedback'
 import FormEditMetadata from './FormEditMetadata'
 import { mapTimeoutStringToSeconds } from '../../../../utils/metadata'
 import styles from './index.module.css'

src/components/organisms/AssetActions/index.tsx

@@ -10,11 +10,12 @@ import Trade from './Trade'
 import { useAsset } from '../../../providers/Asset'
 import { useOcean } from '../../../providers/Ocean'
 import { useWeb3 } from '../../../providers/Web3'
+import Web3Feedback from '../../molecules/Web3Feedback'
 
 export default function AssetActions(): ReactElement {
   const { accountId } = useWeb3()
   const { ocean, balance, account } = useOcean()
-  const { price, ddo, metadata } = useAsset()
+  const { price, ddo, metadata, type, isAssetNetwork } = useAsset()
 
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
   const [dtBalance, setDtBalance] = useState<string>()
@@ -85,5 +86,15 @@ export default function AssetActions(): ReactElement {
       }
     )
 
-  return <Tabs items={tabs} className={styles.actions} />
+  return (
+    <>
+      <Tabs items={tabs} className={styles.actions} />
+      {type !== 'algorithm' && (
+        <Web3Feedback
+          isBalanceSufficient={isBalanceSufficient}
+          isAssetNetwork={isAssetNetwork}
+        />
+      )}
+    </>
+  )
 }

src/components/pages/Publish/index.tsx

@@ -4,7 +4,7 @@ import { usePublish } from '../../../hooks/usePublish'
 import styles from './index.module.css'
 import FormPublish from './FormPublish'
 import FormAlgoPublish from './FormAlgoPublish'
-import Web3Feedback from '../../molecules/Wallet/Feedback'
+import Web3Feedback from '../../molecules/Web3Feedback'
 import Tabs from '../../atoms/Tabs'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import {

src/providers/Asset.tsx

@@ -15,6 +15,7 @@ import { retrieveDDO } from '../utils/aquarius'
 import { getPrice } from '../utils/subgraph'
 import { MetadataMarket } from '../@types/MetaData'
 import { useOcean } from './Ocean'
+import { useWeb3 } from './Web3'
 
 interface AssetProviderValue {
   isInPurgatory: boolean
@@ -28,6 +29,7 @@ interface AssetProviderValue {
   type: MetadataMain['type'] | undefined
   error?: string
   refreshInterval: number
+  isAssetNetwork: boolean
   refreshDdo: (token?: CancelToken) => Promise<void>
 }
 
@@ -42,6 +44,7 @@ function AssetProvider({
   asset: string | DDO
   children: ReactNode
 }): ReactElement {
+  const { networkId } = useWeb3()
   const { config } = useOcean()
   const [isInPurgatory, setIsInPurgatory] = useState(false)
   const [purgatoryData, setPurgatoryData] = useState<PurgatoryData>()
@@ -53,6 +56,7 @@ function AssetProvider({
   const [owner, setOwner] = useState<string>()
   const [error, setError] = useState<string>()
   const [type, setType] = useState<MetadataMain['type']>()
+  const [isAssetNetwork, setIsAssetNetwork] = useState<boolean>()
 
   const fetchDdo = async (token?: CancelToken) => {
     Logger.log('[asset] Init asset, get DDO')
@@ -137,6 +141,16 @@ function AssetProvider({
     initMetadata(ddo)
   }, [ddo, initMetadata])
 
+  // Check user network against asset network
+  useEffect(() => {
+    if (!networkId || !ddo) return
+
+    // TODO: replace with actual check against multinetwork DDO
+    // const isAssetNetwork = networkId === ddo.networkId
+    const isAssetNetwork = true
+    setIsAssetNetwork(isAssetNetwork)
+  }, [networkId, ddo])
+
   return (
     <AssetContext.Provider
       value={
@@ -152,7 +166,8 @@ function AssetProvider({
           isInPurgatory,
           purgatoryData,
           refreshInterval,
-          refreshDdo
+          refreshDdo,
+          isAssetNetwork
         } as AssetProviderValue
       }
     >