diff --git a/src/components/atoms/AssetType.module.css b/src/components/atoms/AssetType.module.css index 0c16f1982..814a2d575 100644 --- a/src/components/atoms/AssetType.module.css +++ b/src/components/atoms/AssetType.module.css @@ -24,5 +24,5 @@ .network svg { vertical-align: baseline; - margin-bottom: -0.1em; + margin-bottom: -0.15em; } diff --git a/src/components/molecules/MetadataPreview.module.css b/src/components/molecules/MetadataPreview.module.css index e14eab2a9..c440d7ef1 100644 --- a/src/components/molecules/MetadataPreview.module.css +++ b/src/components/molecules/MetadataPreview.module.css @@ -33,7 +33,6 @@ } .datatoken { - margin-top: calc(var(--spacer) / 8); margin-bottom: 0; color: var(--color-secondary); } diff --git a/src/components/molecules/MetadataPreview.tsx b/src/components/molecules/MetadataPreview.tsx index a1a85c126..852c7b8f9 100644 --- a/src/components/molecules/MetadataPreview.tsx +++ b/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(false) @@ -92,10 +94,13 @@ export function MetadataPreview({ }: { values: Partial }): ReactElement { + const { networkId } = useWeb3() + return (

Preview

+ {networkId && } {values.name &&

{values.name}

} {values.dataTokenOptions?.name && (

}): ReactElement { + const { networkId } = useWeb3() + return (

Preview

+ {networkId && } {values.name &&

{values.name}

} {values.dataTokenOptions?.name && (

= 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({ () @@ -418,9 +417,6 @@ export default function Compute({ action={} /> )} - {type !== 'algorithm' && ( - - )} ) diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index fd5d3e78a..5044c567e 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/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() - 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 && }

-
- -
) } diff --git a/src/components/organisms/AssetActions/Edit/index.tsx b/src/components/organisms/AssetActions/Edit/index.tsx index dfafa3a6f..5d5e7b537 100644 --- a/src/components/organisms/AssetActions/Edit/index.tsx +++ b/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' diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index 967760a57..81f89ba6f 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/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() const [dtBalance, setDtBalance] = useState() @@ -85,5 +86,15 @@ export default function AssetActions(): ReactElement { } ) - return + return ( + <> + + {type !== 'algorithm' && ( + + )} + + ) } diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 31dce4427..a5b08b4cd 100644 --- a/src/components/pages/Publish/index.tsx +++ b/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 { diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx index f49bf6ef2..b8bfc1ee7 100644 --- a/src/providers/Asset.tsx +++ b/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 } @@ -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() @@ -53,6 +56,7 @@ function AssetProvider({ const [owner, setOwner] = useState() const [error, setError] = useState() const [type, setType] = useState() + const [isAssetNetwork, setIsAssetNetwork] = useState() 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 (