From 6a7c6819e4ad56ac832706390ed8b4ff27b1cc9e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 23 Oct 2020 15:12:45 +0200
Subject: [PATCH] refactor EtherscanLink

---
 src/components/atoms/EtherscanLink.tsx               | 12 +++++++-----
 .../organisms/AssetActions/Pool/Actions.tsx          |  5 ++++-
 src/components/organisms/AssetActions/Pool/index.tsx |  9 ++++++---
 src/components/organisms/AssetContent/MetaFull.tsx   |  5 +++--
 src/components/pages/History/PoolTransactions.tsx    |  4 ++--
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/atoms/EtherscanLink.tsx b/src/components/atoms/EtherscanLink.tsx
index 01bb9c334..5634e1cfc 100644
--- a/src/components/atoms/EtherscanLink.tsx
+++ b/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
diff --git a/src/components/organisms/AssetActions/Pool/Actions.tsx b/src/components/organisms/AssetActions/Pool/Actions.tsx
index df1e7adcb..9b6b756f3 100644
--- a/src/components/organisms/AssetActions/Pool/Actions.tsx
+++ b/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>
           }
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index cb64dc95c..5e59b49f6 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/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>
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index fa6bf4a96..a80c9da1d 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/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>
         }
diff --git a/src/components/pages/History/PoolTransactions.tsx b/src/components/pages/History/PoolTransactions.tsx
index 368235732..657056c59 100644
--- a/src/components/pages/History/PoolTransactions.tsx
+++ b/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>
   )