feat: EtherscanA component (#3284)

* feat: EtherscanA component

* refactor: EtherscanLink from ExternalLink

src/lib/components/EtherscanLink.tsx

+import { SupportedChainId } from 'constants/chains'
+import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
+import styled, { Color } from 'lib/theme'
+import { ReactNode, useMemo } from 'react'
+import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
+
+import ExternalLink from './ExternalLink'
+
+const Link = styled(ExternalLink)<{ color: Color }>`
+  color: ${({ theme, color }) => theme[color]}
+  text-decoration: none;
+`
+
+interface EtherscanLinkProps {
+  type: ExplorerDataType
+  data?: string
+  color?: Color
+  children: ReactNode
+}
+
+export default function EtherscanLink({ data, type, color = 'currentColor', children }: EtherscanLinkProps) {
+  const { chainId } = useActiveWeb3React()
+  const url = useMemo(
+    () => data && getExplorerLink(chainId || SupportedChainId.MAINNET, data, type),
+    [chainId, data, type]
+  )
+  return (
+    <Link href={url} color={color} target="_blank">
+      {children}
+    </Link>
+  )
+}

src/lib/components/ExternalLink.tsx

@@ -8,7 +8,7 @@ export default function ExternalLink({
   href,
   rel = 'noopener noreferrer',
   ...rest
-}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
+}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href?: string }) {
   return (
     <a target={target} rel={rel} href={href} {...rest}>
       {rest.children}

src/lib/components/Swap/SwapButton.tsx

 import { Trans } from '@lingui/macro'
 import { Token, TradeType } from '@uniswap/sdk-core'
-import { CHAIN_INFO } from 'constants/chainInfo'
 import { useERC20PermitFromTrade } from 'hooks/useERC20Permit'
 import { useUpdateAtom } from 'jotai/utils'
 import { useAtomValue } from 'jotai/utils'
@@ -18,12 +17,14 @@ import useTransactionDeadline from 'lib/hooks/useTransactionDeadline'
 import { Link, Spinner } from 'lib/icons'
 import { displayTxHashAtom, Field, independentFieldAtom } from 'lib/state/swap'
 import { TransactionType } from 'lib/state/transactions'
-import styled, { useTheme } from 'lib/theme'
+import { useTheme } from 'lib/theme'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import invariant from 'tiny-invariant'
+import { ExplorerDataType } from 'utils/getExplorerLink'
 
 import ActionButton from '../ActionButton'
 import Dialog from '../Dialog'
+import EtherscanLink from '../EtherscanLink'
 import Row from '../Row'
 import { SummaryDialog } from './Summary'
 
@@ -31,11 +32,6 @@ interface SwapButtonProps {
   disabled?: boolean
 }
 
-const EtherscanA = styled.a`
-  color: currentColor;
-  text-decoration: none;
-`
-
 function useIsPendingApproval(token?: Token, spender?: string): boolean {
   return Boolean(usePendingApproval(token, spender))
 }
@@ -91,13 +87,13 @@ export default function SwapButton({ disabled }: SwapButtonProps) {
           disabled: true,
           update: {
             message: (
-              <EtherscanA href={approvalHash && `${CHAIN_INFO[chainId].explorer}tx/${approvalHash}`} target="_blank">
+              <EtherscanLink type={ExplorerDataType.TRANSACTION} data={approvalHash}>
                 <Row gap={0.25}>
                   <Trans>
                     Approval pending <Link />
                   </Trans>
                 </Row>
-              </EtherscanA>
+              </EtherscanLink>
             ),
             action: <Trans>Approve</Trans>,
             icon: Spinner,