From 1af34ae0166598c9001a19f0e4d5ef91732b2b40 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Thu, 10 Feb 2022 09:14:54 -0800
Subject: [PATCH] feat: EtherscanA component (#3284)

* feat: EtherscanA component

* refactor: EtherscanLink from ExternalLink
---
 src/lib/components/EtherscanLink.tsx   | 32 ++++++++++++++++++++++++++
 src/lib/components/ExternalLink.tsx    |  2 +-
 src/lib/components/Swap/SwapButton.tsx | 14 ++++-------
 3 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/EtherscanLink.tsx

diff --git a/src/lib/components/EtherscanLink.tsx b/src/lib/components/EtherscanLink.tsx
new file mode 100644
index 0000000000..61a14058a5
--- /dev/null
+++ b/src/lib/components/EtherscanLink.tsx
@@ -0,0 +1,32 @@
+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>
+  )
+}
diff --git a/src/lib/components/ExternalLink.tsx b/src/lib/components/ExternalLink.tsx
index f7171c49b6..41c217f692 100644
--- a/src/lib/components/ExternalLink.tsx
+++ b/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}
diff --git a/src/lib/components/Swap/SwapButton.tsx b/src/lib/components/Swap/SwapButton.tsx
index 1909d9d098..a10446ac6d 100644
--- a/src/lib/components/Swap/SwapButton.tsx
+++ b/src/lib/components/Swap/SwapButton.tsx
@@ -1,6 +1,5 @@
 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,