etherscan link component, link up pool & data token

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);
+}

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>
+  )
+}

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);

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}>

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;
-}

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
+          <EtherscanLink network="rinkeby" path={`token/${dataToken}`}>
-            href={`https://rinkeby.etherscan.io/token/${dataToken}`}
+            <code>{dataToken}</code>
-            title="View on Etherscan"
+          </EtherscanLink>
-            target="_blank"
-            rel="noreferrer"
-          >
-            <code>
-              {dataToken} <External />
-            </code>
-          </a>
         }
       />
     </div>