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 (
+
+ {children}
+
+ )
+}
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, 'as' | 'ref' | 'onClick'> & { href: string }) {
+}: Omit, 'as' | 'ref' | 'onClick'> & { href?: string }) {
return (
{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: (
-
+
Approval pending
-
+
),
action: Approve,
icon: Spinner,