From bfa0f3ba5c42691df0de38b1e12e85952d1abf1c Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 20 Aug 2020 11:51:50 +0200
Subject: [PATCH] etherscan link component, link up pool & data token

---
 src/components/atoms/EtherscanLink.module.css | 24 +++++++++++++++
 src/components/atoms/EtherscanLink.tsx        | 29 +++++++++++++++++++
 .../AssetActions/Pool/index.module.css        | 12 ++++++++
 .../organisms/AssetActions/Pool/index.tsx     |  9 ++++++
 .../AssetContent/MetaFull.module.css          |  7 -----
 .../organisms/AssetContent/MetaFull.tsx       | 15 +++-------
 6 files changed, 78 insertions(+), 18 deletions(-)
 create mode 100644 src/components/atoms/EtherscanLink.module.css
 create mode 100644 src/components/atoms/EtherscanLink.tsx

diff --git a/src/components/atoms/EtherscanLink.module.css b/src/components/atoms/EtherscanLink.module.css
new file mode 100644
index 000000000..2e77d13cd
--- /dev/null
+++ b/src/components/atoms/EtherscanLink.module.css
@@ -0,0 +1,24 @@
+.link {
+  color: var(--brand-grey);
+}
+
+.link svg {
+  width: 0.7em;
+  height: 0.7em;
+  display: inline-block;
+  fill: var(--brand-grey-light);
+}
+
+.link code {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  padding: 0;
+}
+
+.link:hover,
+.link:focus,
+.link:hover *,
+.link:focus * {
+  color: var(--brand-pink);
+}
diff --git a/src/components/atoms/EtherscanLink.tsx b/src/components/atoms/EtherscanLink.tsx
new file mode 100644
index 000000000..01bb9c334
--- /dev/null
+++ b/src/components/atoms/EtherscanLink.tsx
@@ -0,0 +1,29 @@
+import React, { ReactElement, ReactNode } from 'react'
+import { ReactComponent as External } from '../../images/external.svg'
+import styles from './EtherscanLink.module.css'
+
+export default function EtherscanLink({
+  network,
+  path,
+  children
+}: {
+  network?: 'rinkeby' | 'kovan' | 'ropsten'
+  path: string
+  children: ReactNode
+}): ReactElement {
+  const url = network
+    ? `https://${network}.etherscan.io`
+    : `https://etherscan.io`
+
+  return (
+    <a
+      href={`${url}/${path}`}
+      title="View on Etherscan"
+      target="_blank"
+      rel="noreferrer"
+      className={styles.link}
+    >
+      {children} <External />
+    </a>
+  )
+}
diff --git a/src/components/organisms/AssetActions/Pool/index.module.css b/src/components/organisms/AssetActions/Pool/index.module.css
index 8fea92e37..0f04fb576 100644
--- a/src/components/organisms/AssetActions/Pool/index.module.css
+++ b/src/components/organisms/AssetActions/Pool/index.module.css
@@ -10,6 +10,18 @@
   text-align: center;
 }
 
+.dataTokenLinks {
+  display: flex;
+  justify-content: center;
+  font-size: var(--font-size-small);
+  margin-top: calc(var(--spacer) / 2);
+}
+
+.dataTokenLinks a {
+  margin-left: calc(var(--spacer) / 3);
+  margin-right: calc(var(--spacer) / 3);
+}
+
 .poolTokens {
   display: grid;
   gap: var(--spacer);
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 881c50d2d..f0a652256 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -11,6 +11,7 @@ import Remove from './Remove'
 import Tooltip from '../../../atoms/Tooltip'
 import Conversion from '../../../atoms/Price/Conversion'
 import { ReactComponent as External } from '../../../../images/external.svg'
+import EtherscanLink from '../../../atoms/EtherscanLink'
 
 interface Balance {
   ocean: string
@@ -99,6 +100,14 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             <PriceUnit price={dtPrice} />
             <Conversion price={dtPrice} />
             <Tooltip content="Explain how this price is determined..." />
+            <div className={styles.dataTokenLinks}>
+              <EtherscanLink network="rinkeby" path={`address/${poolAddress}`}>
+                Pool
+              </EtherscanLink>
+              <EtherscanLink network="rinkeby" path={`token/${ddo.dataToken}`}>
+                Data Token
+              </EtherscanLink>
+            </div>
           </div>
 
           <div className={styles.poolTokens}>
diff --git a/src/components/organisms/AssetContent/MetaFull.module.css b/src/components/organisms/AssetContent/MetaFull.module.css
index 031bdc90e..0f91d82dc 100644
--- a/src/components/organisms/AssetContent/MetaFull.module.css
+++ b/src/components/organisms/AssetContent/MetaFull.module.css
@@ -14,10 +14,3 @@
   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 f3f954c07..68d37e99a 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -4,7 +4,7 @@ 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'
+import EtherscanLink from '../../atoms/EtherscanLink'
 
 export default function MetaFull({
   ddo,
@@ -34,16 +34,9 @@ export default function MetaFull({
       <MetaItem
         title="Data Token"
         content={
-          <a
-            href={`https://rinkeby.etherscan.io/token/${dataToken}`}
-            title="View on Etherscan"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <code>
-              {dataToken} <External />
-            </code>
-          </a>
+          <EtherscanLink network="rinkeby" path={`token/${dataToken}`}>
+            <code>{dataToken}</code>
+          </EtherscanLink>
         }
       />
     </div>