Merge pull request #138 from BootNodeDev/feat/113

feat: add ExplorerLink component and update Hash component

src/pageComponents/home/Examples/demos/Hash.tsx

@@ -1,15 +1,17 @@
-import { Address } from 'viem'
+import { Address, Chain } from 'viem'
 
 import BaseHash from '@/src/sharedComponents/Hash'
+import { getExplorerLink } from '@/src/utils/getExplorerLink'
 
 interface Props {
   hash: Address
+  chain: Chain
 }
 
-const Hash = ({ hash }: Props) => {
+const Hash = ({ chain, hash }: Props) => {
   return (
     <BaseHash
-      explorerURL={`https://etherscan.io/address/${hash}`}
+      explorerURL={getExplorerLink({ chain, hashOrAddress: hash })}
       hash={hash}
       onCopy={() => console.log('Copied!')}
       showCopyButton

src/pageComponents/home/Examples/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { InnerContainer as Inner, ContainerPadding } from 'db-ui-toolkit'
+import { mainnet } from 'viem/chains'
 import { useAccount } from 'wagmi'
 
 import { Props as ItemProps } from '@/src/pageComponents/home/Examples/Item'
@@ -75,7 +76,7 @@ const Examples: React.FC = ({ ...restProps }) => {
       title: 'Token input',
     },
     {
-      demo: <Hash hash={address} />,
+      demo: <Hash chain={mainnet} hash={address} />,
       href: '#',
       icon: <ImgHash />,
       text: 'Copy, open in explorer',

src/sharedComponents/ExplorerLink.tsx

@@ -0,0 +1,13 @@
+import { GetExplorerUrlParams, getExplorerLink } from '@/src/utils/getExplorerLink'
+
+interface ExplorerLinkProps extends GetExplorerUrlParams {
+  text?: string
+}
+
+export const ExplorerLink = ({ text = 'View on explorer', ...props }: ExplorerLinkProps) => {
+  return (
+    <a href={getExplorerLink(props)} rel="noopener noreferrer" target="_blank">
+      {text}
+    </a>
+  )
+}

src/utils/getExplorerLink.ts

@@ -0,0 +1,29 @@
+import { Address, Chain, Hash, isAddress, isHash } from 'viem'
+
+export type GetExplorerUrlParams = {
+  chain: Chain
+  hashOrAddress: Hash | Address
+  explorerUrl?: string
+}
+
+/**
+ * Returns the explorer link for a given chain, explorer URL, and hash or address.
+ * You can provide an explorer URL to override the default explorer URL for the chain.
+ * @param {GetExplorerUrlParams} params - The parameters for generating the explorer link.
+ * @returns {string} - The explorer link.
+ * @throws {Error} - If the hash or address is invalid.
+ */
+export const getExplorerLink = ({ chain, explorerUrl, hashOrAddress }: GetExplorerUrlParams) => {
+  if (isAddress(hashOrAddress)) {
+    return explorerUrl
+      ? `${explorerUrl}/address/${hashOrAddress}`
+      : `${chain.blockExplorers?.default.url}/address/${hashOrAddress}`
+  }
+  if (isHash(hashOrAddress)) {
+    return explorerUrl
+      ? `${explorerUrl}/tx/${hashOrAddress}`
+      : `${chain.blockExplorers?.default}/tx/${hashOrAddress}`
+  }
+
+  throw new Error('Invalid hash or address')
+}