asset details refactor

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",

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",

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 <span>{files.length} data files</span>
 }
 
-const Pricing = ({ price }: { price: string }) => (
+const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
     <li>
         <span className={styles.metaLabel}>
-            <strong>Price</strong>
-        </span>
-        <span className={styles.metaValue}>
-            {price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN
+            <strong>{name}</strong>
         </span>
+        <span className={styles.metaValue}>{value}</span>
     </li>
 )
 
 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 (
         <>
             <aside className={styles.metaPrimary}>
@@ -77,27 +103,15 @@ export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
                     Fixed Metadata
                 </h2>
                 <ul>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>Author</strong>
-                        </span>
-                        <span className={styles.metaValue}>{base.author}</span>
-                    </li>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>License</strong>
-                        </span>
-                        <span className={styles.metaValue}>{base.license}</span>
-                    </li>
-                    <li>
-                        <span className={styles.metaLabel}>
-                            <strong>DID</strong>
-                        </span>
-                        <span className={styles.metaValue}>
-                            <code>{ddo.id}</code>
-                        </span>
-                    </li>
-                    {allowPricing ? <Pricing price={base.price} /> : null}
+                    {metaFixed
+                        .filter(item => item.show)
+                        .map(item => (
+                            <MetaFixedItem
+                                key={shortid.generate()}
+                                name={item.name}
+                                value={item.value}
+                            />
+                        ))}
                 </ul>
             </div>