Extend explorer link to support more chains

hemilabs · Apr 12, 2024 · 2be73c8 · 2be73c8
1 parent 005016c
commit 2be73c8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 18 deletions.
diff --git a/site/components/EtherscanLink.js → site/components/ExplorerLink.js b/site/components/EtherscanLink.js → site/components/ExplorerLink.js
@@ -1,19 +1,32 @@
 const formatShort = text => `${text.substr(0, 6)}...${text.slice(-4)}`
 
-const ETHERSCAN_URL = 'https://etherscan.io'
+const explorerUrls = {
+  1: 'https://etherscan.io',
+  43111: 'https://explorer.hemi.network',
+  743111: 'https://testnet.explorer.hemi.network'
+}
 
 /**
- * A link to an address or a transaction in Etherscan.
+ * A link to an address or transaction in a chain explorer.
+ * Defaults to Etherscan.
  *
  * @param {object} options Link data.
  * @param {string} [options.address] The address of the link.
+ * @param {number} [options.chainId] The chainId of the address or tx.
+ * @param {boolean} [options.long] Whether the hash has to be complete or short.
  * @param {string} [options.text] The text of the link.
  * @param {string} [options.tx] The transaction hash of the link.
- * @param {boolean} [options.long] Whether the hash has to be complete or short.
  * @returns
  */
-export const EtherscanLink = function ({ address, text, tx, long = false }) {
-  const url = `${ETHERSCAN_URL}${address ? `/address/${address}` : `/tx/${tx}`}`
+export const ExplorerLink = function ({
+  address,
+  chainId = 1,
+  long = false,
+  text,
+  tx
+}) {
+  const baseUrl = explorerUrls[chainId]
+  const url = `${baseUrl}${address ? `/address/${address}` : `/tx/${tx}`}`
   const hash = address ?? tx
   return (
     <a

diff --git a/site/components/TransactionsModal.js b/site/components/TransactionsModal.js
@@ -1,8 +1,9 @@
+import { useWeb3React } from '@web3-react/core'
 import { useTranslations } from 'next-intl'
 
 import { useNumberFormat } from '../hooks/useNumberFormat'
 
-import { EtherscanLink } from './EtherscanLink'
+import { ExplorerLink } from './ExplorerLink'
 import JustifiedBetweenRow from './JustifiedBetweenRow'
 import Modal from './Modal'
 import SvgContainer from './svg/SvgContainer'
@@ -28,8 +29,8 @@ const TransactionModalRow = ({ text, value, tipLink = '' }) => (
   />
 )
 
-// eslint-disable-next-line complexity
 const TransactionsModal = function ({ transaction, modalIsOpen, closeModal }) {
+  const { chainId } = useWeb3React()
   const t = useTranslations()
   const formatNumber = useNumberFormat()
 
@@ -123,7 +124,10 @@ const TransactionsModal = function ({ transaction, modalIsOpen, closeModal }) {
                 <TransactionModalRow
                   text={t('transaction-hash')}
                   value={
-                    <EtherscanLink tx={transaction[`transactionHash-${idx}`]} />
+                    <ExplorerLink
+                      chainId={chainId}
+                      tx={transaction[`transactionHash-${idx}`]}
+                    />
                   }
                 />
               )}

diff --git a/site/components/payment-streams/StreamsTable.js b/site/components/payment-streams/StreamsTable.js
@@ -10,14 +10,14 @@ import { Link, useRouter } from '../../navigation'
 import { bigToCrypto, fromUnit } from '../../utils'
 import { updateStreamInfo } from '../../utils/streams'
 import TransactionsContext from '../context/Transactions'
-import { EtherscanLink } from '../EtherscanLink'
+import { ExplorerLink } from '../ExplorerLink'
 import SvgContainer from '../svg/SvgContainer'
 import Tabs from '../Tabs'
 
 import { PaymentStreamsLibContext } from './PaymentStreamsLib'
 
 const StreamsTable = function () {
-  const { active, account } = useWeb3React()
+  const { active, account, chainId } = useWeb3React()
   const t = useTranslations('payment-streams-util')
   const router = useRouter()
   const connected = !!(active && account)
@@ -393,13 +393,17 @@ const StreamsTable = function () {
                     <span>{status}</span>
                   </th>
                   <td>
-                    <EtherscanLink
+                    <ExplorerLink
                       address={streamsView === 'incoming' ? payer : payee}
+                      chainId={chainId}
                     />
                   </td>
                   {streamsView === 'outgoing' && (
                     <td>
-                      <EtherscanLink address={fundingAddress} />
+                      <ExplorerLink
+                        address={fundingAddress}
+                        chainId={chainId}
+                      />
                     </td>
                   )}
                   {/* <td>{dateFormatter.format(startDate)}</td> */}

diff --git a/site/pages/[locale]/dp-auctions/auctions/index.js b/site/pages/[locale]/dp-auctions/auctions/index.js
@@ -10,7 +10,7 @@ import Button from '../../../../components/Button'
 import TransactionsContext from '../../../../components/context/Transactions'
 import { DPAuctionsContext } from '../../../../components/DPAuctionsContext'
 import DPAuctionsLayout from '../../../../components/DPAuctionsLayout'
-import { EtherscanLink } from '../../../../components/EtherscanLink'
+import { ExplorerLink } from '../../../../components/ExplorerLink'
 import TokenAmount from '../../../../components/TokenAmount'
 import Transactions from '../../../../components/Transactions'
 import { fromUnit } from '../../../../utils'
@@ -344,12 +344,14 @@ const DPAuctionBuyControl = function ({ auction }) {
 
 // This component shows the end status of the auction.
 const DPAuctionEndStatus = function ({ auction }) {
+  const { chainId } = useWeb3React()
   const t = useTranslations()
 
   return auction.status === 'won' ? (
     <>
       <div>
-        {t('won-by')}: <EtherscanLink address={auction.winner} />
+        {t('won-by')}:{' '}
+        <ExplorerLink address={auction.winner} chainId={chainId} />
       </div>
       <div>
         {t('winning-price')}:{' '}
@@ -363,6 +365,7 @@ const DPAuctionEndStatus = function ({ auction }) {
 
 // This component renders the details view of an auction.
 const DPAuction = function ({ auction }) {
+  const { chainId } = useWeb3React()
   const t = useTranslations()
 
   if (!auction) {
@@ -376,7 +379,8 @@ const DPAuction = function ({ auction }) {
         </div>
         <div className="ml-4 w-1/2">
           <div className="mb-2">
-            {t('seller')}: <EtherscanLink address={auction.payee} />
+            {t('seller')}:{' '}
+            <ExplorerLink address={auction.payee} chainId={chainId} />
           </div>
           <DPAuctionTokens auction={auction} />
         </div>

diff --git a/site/pages/[locale]/token-revokes.js b/site/pages/[locale]/token-revokes.js
@@ -7,7 +7,7 @@ import useSWR from 'swr'
 
 import Button from '../../components/Button'
 import PureContext from '../../components/context/Pure'
-import { EtherscanLink } from '../../components/EtherscanLink'
+import { ExplorerLink } from '../../components/ExplorerLink'
 import Layout from '../../components/Layout'
 import UtilFormBox from '../../components/UtilFormBox'
 import { fromUnit } from '../../utils'
@@ -313,12 +313,13 @@ const Balance = function ({ address }) {
 }
 
 const Token = function ({ address }) {
+  const { chainId } = useWeb3React()
   const { data: token } = useErc20Token(address)
   if (!token) {
-    return <EtherscanLink address={address} />
+    return <ExplorerLink address={address} chainId={chainId} />
   }
   const { symbol } = token
-  return <EtherscanLink address={address} text={symbol} />
+  return <ExplorerLink address={address} chainId={chainId} text={symbol} />
 }
 
 const TokenRevokes = function () {