From c2dd8448cf453b9114ead760902c89552a18c2f3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 29 Jul 2020 18:36:10 +0200
Subject: [PATCH] output data token address on asset details

---
 .../AssetContent/MetaFull.module.css          |  7 ++++++
 .../organisms/AssetContent/MetaFull.tsx       | 25 ++++++++++++++++---
 .../organisms/AssetContent/index.tsx          |  2 +-
 src/images/external.svg                       |  3 +++
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 src/images/external.svg

diff --git a/src/components/organisms/AssetContent/MetaFull.module.css b/src/components/organisms/AssetContent/MetaFull.module.css
index 0f91d82dc..031bdc90e 100644
--- a/src/components/organisms/AssetContent/MetaFull.module.css
+++ b/src/components/organisms/AssetContent/MetaFull.module.css
@@ -14,3 +14,10 @@
   word-break: break-all;
   padding: 0;
 }
+
+.metaFull svg {
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+  display: inline-block;
+  fill: currentColor;
+}
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index 24c414597..bedc80ea4 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -3,14 +3,17 @@ import Time from '../../atoms/Time'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import { MetadataMarket } from '../../../@types/Metadata'
+import { DDO } from '@oceanprotocol/lib'
+import { ReactComponent as External } from '../../../images/external.svg'
 
 export default function MetaFull({
-  did,
+  ddo,
   metadata
 }: {
-  did: string
+  ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
+  const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
   const { categories } = metadata.additionalInformation
 
@@ -26,7 +29,23 @@ export default function MetaFull({
         content={<Time date={datePublished} />}
       />
 
-      <MetaItem title="DID" content={<code>{did}</code>} />
+      <MetaItem title="DID" content={<code>{id}</code>} />
+
+      <MetaItem
+        title="Data Token Address"
+        content={
+          <a
+            href={`https://rinkeby.etherscan.io/token/${dataToken}`}
+            title="View on Etherscan"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <code>
+              {dataToken} <External />
+            </code>
+          </a>
+        }
+      />
     </div>
   )
 }
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index dd0156a7d..c9a34b623 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -40,7 +40,7 @@ export default function AssetContent({
 
         <MetaSecondary metadata={metadata} />
 
-        <MetaFull did={ddo.id} metadata={metadata} />
+        <MetaFull ddo={ddo} metadata={metadata} />
 
         <div className={styles.buttonGroup}>
           {/* <EditAction
diff --git a/src/images/external.svg b/src/images/external.svg
new file mode 100644
index 000000000..4b2560d80
--- /dev/null
+++ b/src/images/external.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3158 15.229L12.8696 3.67517L12.7286 14.0733L14.6162 14.0478L14.8 0.428955L1.18121 0.612751L1.15442 2.49911L11.5538 2.35937L0 13.9132L1.3158 15.229Z" />
+</svg>