diff --git a/src/components/atoms/AssetType.module.css b/src/components/atoms/AssetType.module.css new file mode 100644 index 000000000..01bf00842 --- /dev/null +++ b/src/components/atoms/AssetType.module.css @@ -0,0 +1,16 @@ +.icon { + fill: var(--brand-grey-light); + width: 1.1em; + height: 1.1em; + vertical-align: baseline; + margin-bottom: -0.2em; + display: inline-block; +} + +.typeLabel { + display: inline-block; + text-transform: uppercase; + border-right: 1px solid var(--border-color); + padding-right: calc(var(--spacer) / 3.5); + margin-right: calc(var(--spacer) / 4); +} diff --git a/src/components/atoms/AssetType.tsx b/src/components/atoms/AssetType.tsx new file mode 100644 index 000000000..cfd2ffe86 --- /dev/null +++ b/src/components/atoms/AssetType.tsx @@ -0,0 +1,33 @@ +import React, { ReactElement } from 'react' +import styles from './AssetType.module.css' +import classNames from 'classnames/bind' +import { ReactComponent as Compute } from '../../images/compute.svg' +import { ReactComponent as Download } from '../../images/download.svg' + +const cx = classNames.bind(styles) + +export default function AssetType({ + type, + accessType, + className +}: { + type: string + accessType: string + className?: string +}): ReactElement { + const styleClasses = cx({ + [className]: className + }) + return ( +
+
+ {type === 'dataset' ? 'data set' : 'algorithm'} +
+ {accessType === 'access' ? ( + + ) : ( + + )} +
+ ) +} diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index b7310b51e..d18707c42 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/src/components/molecules/AssetTeaser.module.css @@ -69,20 +69,3 @@ width: auto; font-size: var(--font-size-mini); } - -.icon { - fill: var(--brand-grey-light); - width: 1.1em; - height: 1.1em; - vertical-align: baseline; - margin-bottom: -0.2em; - display: inline-block; -} - -.typeLabel { - display: inline-block; - text-transform: uppercase; - border-right: 1px solid var(--border-color); - padding-right: calc(var(--spacer) / 3.5); - margin-right: calc(var(--spacer) / 4); -} diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 5aa9c73d8..2611d742e 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -8,8 +8,7 @@ import removeMarkdown from 'remove-markdown' import Publisher from '../atoms/Publisher' import { useMetadata } from '@oceanprotocol/react' import Time from '../atoms/Time' -import { ReactComponent as Compute } from '../../images/compute.svg' -import { ReactComponent as Download } from '../../images/download.svg' +import AssetType from '../atoms/AssetType' declare type AssetTeaserProps = { ddo: DDO @@ -20,7 +19,8 @@ const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { const { attributes } = ddo.findServiceByType('metadata') const { name, type } = attributes.main const { dataTokenInfo } = ddo - const accessType = ddo.service[1].type + const isCompute = Boolean(ddo?.findServiceByType('compute')) + const accessType = isCompute ? 'compute' : 'access' return (
@@ -33,20 +33,11 @@ const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { - +
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx index 2d31b504c..748fa0cb0 100644 --- a/src/components/organisms/AssetActions/Compute.tsx +++ b/src/components/organisms/AssetActions/Compute.tsx @@ -17,6 +17,7 @@ import Input from '../../atoms/Input' import Alert from '../../atoms/Alert' import { useSiteMetadata } from '../../../hooks/useSiteMetadata' import checkPreviousOrder from '../../../utils/checkPreviousOrder' +import { useAsset } from '../../../providers/Asset' export default function Compute({ ddo, @@ -29,6 +30,7 @@ export default function Compute({ }): ReactElement { const { marketFeeAddress } = useSiteMetadata() + const { type } = useAsset() const { ocean, accountId } = useOcean() const { compute, isLoading, computeStepText, computeError } = useCompute() const { buyDT, dtSymbol } = usePricing(ddo) @@ -129,16 +131,29 @@ export default function Compute({
- x.name)} - onChange={handleSelectChange} - /> + {type === 'algorithm' ? ( + x)} + onChange={handleSelectChange} + /> + ) : ( + x.name)} + onChange={handleSelectChange} + /> + )}
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 42b4b4bdb..7ff53b800 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -48,7 +48,7 @@ export default function Consume({ const { marketFeeAddress } = useSiteMetadata() const [hasPreviousOrder, setHasPreviousOrder] = useState(false) const [previousOrderId, setPreviousOrderId] = useState() - const { isInPurgatory, price } = useAsset() + const { isInPurgatory, price, type } = useAsset() const { buyDT, pricingStepText, pricingError, pricingIsLoading } = usePricing( ddo ) @@ -168,7 +168,6 @@ export default function Consume({ {!isInPurgatory && }
-
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx index cb5ea7c7b..7227e123f 100644 --- a/src/components/organisms/AssetContent/MetaFull.tsx +++ b/src/components/organisms/AssetContent/MetaFull.tsx @@ -6,7 +6,15 @@ import Publisher from '../../atoms/Publisher' import { useAsset } from '../../../providers/Asset' export default function MetaFull(): ReactElement { - const { ddo, metadata, isInPurgatory } = useAsset() + const { ddo, metadata, isInPurgatory, type } = useAsset() + + function DockerImage() { + const algorithmContainer = ddo.findServiceByType('metadata').attributes.main + .algorithm.container + const { image } = algorithmContainer + const { tag } = algorithmContainer + return {`${image}:${tag}`} + } return (
@@ -17,6 +25,9 @@ export default function MetaFull(): ReactElement { title="Owner" content={} /> + {type === 'algorithm' && ( + } /> + )} {/* } diff --git a/src/components/organisms/AssetContent/MetaMain.module.css b/src/components/organisms/AssetContent/MetaMain.module.css index 428652473..a93f3d6a7 100644 --- a/src/components/organisms/AssetContent/MetaMain.module.css +++ b/src/components/organisms/AssetContent/MetaMain.module.css @@ -9,5 +9,17 @@ .date { font-size: var(--font-size-mini); - margin-top: calc(var(--spacer) / 2); +} + +.typeAndDate { + margin-top: calc(var(--spacer) / 2); + display: flex; +} + +.typeDetails { + border-right: 1px solid var(--border-color); + padding-right: calc(var(--spacer) / 3.5); + margin-right: calc(var(--spacer) / 4); + width: auto; + font-size: var(--font-size-mini); } diff --git a/src/components/organisms/AssetContent/MetaMain.tsx b/src/components/organisms/AssetContent/MetaMain.tsx index ec5236a37..e4f513d87 100644 --- a/src/components/organisms/AssetContent/MetaMain.tsx +++ b/src/components/organisms/AssetContent/MetaMain.tsx @@ -5,10 +5,13 @@ import EtherscanLink from '../../atoms/EtherscanLink' import Publisher from '../../atoms/Publisher' import Time from '../../atoms/Time' import styles from './MetaMain.module.css' +import AssetType from '../../atoms/AssetType' export default function MetaMain(): ReactElement { - const { ddo, owner } = useAsset() + const { ddo, owner, type } = useAsset() const { networkId } = useOcean() + const isCompute = Boolean(ddo?.findServiceByType('compute')) + const accessType = isCompute ? 'compute' : 'access' return ( ) } diff --git a/src/providers/Asset.tsx b/src/providers/Asset.tsx index aa8629465..c6778892e 100644 --- a/src/providers/Asset.tsx +++ b/src/providers/Asset.tsx @@ -7,7 +7,7 @@ import React, { useCallback, ReactNode } from 'react' -import { Logger, DDO, BestPrice } from '@oceanprotocol/lib' +import { Logger, DDO, BestPrice, MetadataMain } from '@oceanprotocol/lib' import { PurgatoryData } from '@oceanprotocol/lib/dist/node/ddo/interfaces/PurgatoryData' import { getDataTokenPrice, useOcean } from '@oceanprotocol/react' import getAssetPurgatoryData from '../utils/purgatory' @@ -25,6 +25,7 @@ interface AssetProviderValue { title: string | undefined owner: string | undefined price: BestPrice | undefined + type: MetadataMain['type'] | undefined error?: string refreshInterval: number refreshDdo: (token?: CancelToken) => Promise @@ -52,6 +53,7 @@ function AssetProvider({ const [price, setPrice] = useState() const [owner, setOwner] = useState() const [error, setError] = useState() + const [type, setType] = useState() const refreshPrice = useCallback(async () => { if ( @@ -160,6 +162,7 @@ function AssetProvider({ const { attributes } = ddo.findServiceByType('metadata') setMetadata((attributes as unknown) as MetadataMarket) setTitle(attributes?.main.name) + setType(attributes.main.type) setOwner(ddo.publicKey[0].owner) setIsInPurgatory(ddo.isInPurgatory === 'true') @@ -184,6 +187,7 @@ function AssetProvider({ title, owner, price, + type, error, isInPurgatory, purgatoryData,