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