refactor EtherscanLink

src/components/atoms/EtherscanLink.tsx

@@ -1,19 +1,21 @@
 import React, { ReactElement, ReactNode } from 'react'
+import { getNetworkName } from '../../utils/wallet'
 import { ReactComponent as External } from '../../images/external.svg'
 import styles from './EtherscanLink.module.css'
 
 export default function EtherscanLink({
-  network,
+  networkId,
   path,
   children
 }: {
-  network?: 'rinkeby' | 'kovan' | 'ropsten'
+  networkId: number
   path: string
   children: ReactNode
 }): ReactElement {
-  const url = network
-    ? `https://${network}.etherscan.io`
-    : `https://etherscan.io`
+  const url =
+    networkId === 1
+      ? `https://etherscan.io`
+      : `https://${getNetworkName(networkId).toLowerCase()}.etherscan.io`
 
   return (
     <a

src/components/organisms/AssetActions/Pool/Actions.tsx

@@ -4,6 +4,7 @@ import Button from '../../../atoms/Button'
 import styles from './Actions.module.css'
 import EtherscanLink from '../../../atoms/EtherscanLink'
 import SuccessConfetti from '../../../atoms/SuccessConfetti'
+import { useOcean } from '@oceanprotocol/react'
 
 export default function Actions({
   isLoading,
@@ -18,6 +19,8 @@ export default function Actions({
   actionName: string
   action: () => void
 }): ReactElement {
+  const { networkId } = useOcean()
+
   return (
     <>
       <div className={styles.actions}>
@@ -33,7 +36,7 @@ export default function Actions({
         <SuccessConfetti
           success="Successfully added liquidity."
           action={
-            <EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
+            <EtherscanLink networkId={networkId} path={`/tx/${txId}`}>
               See on Etherscan
             </EtherscanLink>
           }

src/components/organisms/AssetActions/Pool/index.tsx

@@ -43,7 +43,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const data = useStaticQuery(contentQuery)
   const content = data.content.edges[0].node.childContentJson.pool
 
-  const { ocean, accountId } = useOcean()
+  const { ocean, accountId, networkId } = useOcean()
   const { price } = useMetadata(ddo)
   const { dtSymbol } = usePricing(ddo)
 
@@ -153,12 +153,15 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             <Tooltip content={content.tooltips.price} />
             <div className={styles.dataTokenLinks}>
               <EtherscanLink
-                network="rinkeby"
+                networkId={networkId}
                 path={`address/${price.address}`}
               >
                 Pool
               </EtherscanLink>
-              <EtherscanLink network="rinkeby" path={`token/${ddo.dataToken}`}>
+              <EtherscanLink
+                networkId={networkId}
+                path={`token/${ddo.dataToken}`}
+              >
                 Datatoken
               </EtherscanLink>
             </div>

src/components/organisms/AssetContent/MetaFull.tsx

@@ -5,7 +5,7 @@ import styles from './MetaFull.module.css'
 import { MetadataMarket } from '../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 import EtherscanLink from '../../atoms/EtherscanLink'
-import { usePricing } from '@oceanprotocol/react'
+import { useOcean, usePricing } from '@oceanprotocol/react'
 
 export default function MetaFull({
   ddo,
@@ -14,6 +14,7 @@ export default function MetaFull({
   ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
+  const { networkId } = useOcean()
   const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
   const { dtSymbol, dtName } = usePricing(ddo)
@@ -48,7 +49,7 @@ export default function MetaFull({
       <MetaItem
         title="Datatoken"
         content={
-          <EtherscanLink network="rinkeby" path={`token/${dataToken}`}>
+          <EtherscanLink networkId={networkId} path={`token/${dataToken}`}>
             {dtName ? `${dtName} - ${dtSymbol}` : <code>{dataToken}</code>}
           </EtherscanLink>
         }

src/components/pages/History/PoolTransactions.tsx

@@ -17,7 +17,7 @@ function AssetTitle({ did }: { did: string }): ReactElement {
 }
 
 function Title({ row }: { row: PoolTransaction }) {
-  const { ocean } = useOcean()
+  const { ocean, networkId } = useOcean()
   const [dtSymbol, setDtSymbol] = useState<string>()
 
   const title = row.tokenAmountIn
@@ -37,7 +37,7 @@ function Title({ row }: { row: PoolTransaction }) {
   }, [ocean, row])
 
   return (
-    <EtherscanLink network="rinkeby" path={`/tx/${row.transactionHash}`}>
+    <EtherscanLink networkId={networkId} path={`/tx/${row.transactionHash}`}>
       {title}
     </EtherscanLink>
   )