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 (
+
+ {children}
+
+ )
+}
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 {
+
+
+ Pool
+
+
+ Data Token
+
+
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({
-
- {dataToken}
-
-
+
+ {dataToken}
+
}
/>