diff --git a/client/package-lock.json b/client/package-lock.json index 1d46c82..e384407 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2382,6 +2382,12 @@ "@types/react": "*" } }, + "@types/shortid": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz", + "integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=", + "dev": true + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -11304,6 +11310,11 @@ "resolved": "https://registry.npmjs.org/nano-json-stream-parser/-/nano-json-stream-parser-0.1.2.tgz", "integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18=" }, + "nanoid": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.1.tgz", + "integrity": "sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw==" + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -15078,6 +15089,14 @@ "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==", "dev": true }, + "shortid": { + "version": "2.2.15", + "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz", + "integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==", + "requires": { + "nanoid": "^2.1.0" + } + }, "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", diff --git a/client/package.json b/client/package.json index e86c35b..9a37a73 100644 --- a/client/package.json +++ b/client/package.json @@ -40,6 +40,7 @@ "react-popper": "^1.3.3", "react-router-dom": "^5.0.1", "react-transition-group": "^4.2.1", + "shortid": "^2.2.15", "truffle-hdwallet-provider": "1.0.14", "web3": "1.2.0" }, @@ -60,6 +61,7 @@ "@types/react-paginate": "^6.2.1", "@types/react-router-dom": "^4.3.4", "@types/react-transition-group": "^4.2.0", + "@types/shortid": "0.0.29", "@types/web3": "^1.0.19", "jest-mock-axios": "^3.1.0", "node-sass": "^4.12.0", diff --git a/client/src/components/templates/Asset/AssetDetails.tsx b/client/src/components/templates/Asset/AssetDetails.tsx index ac9881a..14ce9a8 100644 --- a/client/src/components/templates/Asset/AssetDetails.tsx +++ b/client/src/components/templates/Asset/AssetDetails.tsx @@ -1,6 +1,7 @@ -import React, { PureComponent } from 'react' +import React from 'react' import Moment from 'react-moment' import { DDO, MetaData, File } from '@oceanprotocol/squid' +import shortid from 'shortid' import Markdown from '../../atoms/Markdown' import CategoryLink from '../../atoms/CategoryLink' import styles from './AssetDetails.module.scss' @@ -21,20 +22,45 @@ export function datafilesLine(files: File[]) { return {files.length} data files } -const Pricing = ({ price }: { price: string }) => ( +const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
  • - Price - - - {price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN + {name} + {value}
  • ) export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) { const { base } = metadata + const metaFixed = [ + { + name: 'Author', + value: base.author, + show: true + }, + { + name: 'License', + value: base.license, + show: true + }, + { + name: 'DID', + value: ddo.id, + show: true + }, + { + name: 'Price', + value: `${ + base.price === '0' + ? 0 + : Web3.utils.fromWei(base.price.toString()) + } OCEAN`, + show: allowPricing + } + ] + return ( <>