metadata output tweaks

src/components/organisms/AssetContent/MetaFull.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import Time from '../../atoms/Time'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
@@ -6,6 +6,8 @@ import { MetadataMarket } from '../../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
 import EtherscanLink from '../../atoms/EtherscanLink'
 
+import { useOcean } from '@oceanprotocol/react'
+
 export default function MetaFull({
   ddo,
   metadata
@@ -13,13 +15,28 @@ export default function MetaFull({
   ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
+  const { ocean, accountId } = useOcean()
   const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
-  const { categories } = metadata.additionalInformation
+  const { categories, copyrightHolder } = metadata.additionalInformation
+
+  const [dtName, setDtName] = useState<string>()
+  const [dtSymbol, setDtSymbol] = useState<string>()
+
+  useEffect(() => {
+    async function getDataTokenInfo() {
+      const name = await ocean.datatokens.getName(dataToken, accountId)
+      setDtName(name)
+      const symbol = await ocean.datatokens.getSymbol(dataToken, accountId)
+      setDtSymbol(symbol)
+    }
+    getDataTokenInfo()
+  }, [])
 
   return (
     <div className={styles.metaFull}>
       <MetaItem title="Author" content={author} />
+      <MetaItem title="Copyright Holder" content={copyrightHolder} />
       <MetaItem title="License" content={license} />
       {categories && <MetaItem title="Category" content={categories[0]} />}
       <MetaItem title="Data Created" content={<Time date={dateCreated} />} />
@@ -29,16 +46,16 @@ export default function MetaFull({
         content={<Time date={datePublished} />}
       />
 
-      <MetaItem title="DID" content={<code>{id}</code>} />
-
       <MetaItem
         title="Data Token"
         content={
           <EtherscanLink network="rinkeby" path={`token/${dataToken}`}>
-            <code>{dataToken}</code>
+            {dtName} - {dtSymbol}
           </EtherscanLink>
         }
       />
+
+      <MetaItem title="DID" content={<code>{id}</code>} />
     </div>
   )
 }

src/components/organisms/AssetContent/MetaSecondary.module.css

@@ -12,5 +12,5 @@
 }
 
 .samples {
-  margin-top: calc(var(--spacer) / 2);
+  margin-top: var(--spacer);
 }

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -14,6 +14,8 @@ export default function MetaSecondary({
 
   return (
     <aside className={styles.metaSecondary}>
+      {tags && tags.length > 0 && <Tags items={tags} />}
+
       {links && links.length && (
         <div className={styles.samples}>
           <MetaItem
@@ -33,8 +35,6 @@ export default function MetaSecondary({
           />
         </div>
       )}
-
-      {tags && tags.length > 0 && <Tags items={tags} />}
     </aside>
   )
 }