show the better trade link for v2/v3

src/components/swap/SwapHeader.tsx

 import React from 'react'
 import styled from 'styled-components'
+import { Version } from '../../hooks/useToggledVersion'
 import Settings from '../Settings'
 import { RowBetween, RowFixed } from '../Row'
 import { TYPE } from '../../theme'
-import { Trade as V2Trade } from '@uniswap/v2-sdk'
-import { Trade as V3Trade } from '@uniswap/v3-sdk'
 
 // import { Info } from 'react-feather'
 
@@ -24,15 +23,15 @@ const StyledSwapHeader = styled.div`
 // `
 
 interface SwapHeaderProps {
-  trade?: V2Trade | V3Trade | undefined
+  toggledVersion: Version
 }
 
-export default function SwapHeader({ trade }: SwapHeaderProps) {
+export default function SwapHeader({ toggledVersion }: SwapHeaderProps) {
   return (
     <StyledSwapHeader>
       <RowBetween>
         <TYPE.black fontWeight={500} fontSize={16} style={{ opacity: '0.6' }}>
-          Swap {trade instanceof V2Trade ? '(V2)' : trade instanceof V3Trade ? '(V3)' : ''}
+          Swap ({toggledVersion})
         </TYPE.black>
         <RowFixed>
           {/* Send icon appears here when expert mode is toggled on */}

src/hooks/useToggledVersion.ts

 import useParsedQueryString from './useParsedQueryString'
 
 export enum Version {
-  v2 = 'v2',
-  v3 = 'v3',
+  v2 = 'V2',
+  v3 = 'V3',
 }
 
 export const DEFAULT_VERSION: Version = Version.v3

src/pages/Swap/index.tsx

@@ -11,6 +11,7 @@ import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonError, ButtonLight, ButtonPrimary, ButtonConfirmed } from '../../components/Button'
 import { GreyCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
+import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import { AutoRow } from '../../components/Row'
@@ -40,6 +41,7 @@ import {
 } from '../../state/swap/hooks'
 import { useExpertModeManager, useUserSlippageTolerance, useUserSingleHopOnly } from '../../state/user/hooks'
 import { LinkStyledButton, TYPE } from '../../theme'
+import { isTradeBetter } from '../../utils/isTradeBetter'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
@@ -88,7 +90,7 @@ export default function Swap({ history }: RouteComponentProps) {
   const { independentField, typedValue, recipient } = useSwapState()
   const {
     v2Trade,
-    v3Trade,
+    v3TradeState: { trade: v3Trade },
     currencyBalances,
     parsedAmount,
     currencies,
@@ -107,7 +109,7 @@ export default function Swap({ history }: RouteComponentProps) {
     ? undefined
     : {
         [Version.v2]: v2Trade,
-        [Version.v3]: v3Trade.trade ?? undefined,
+        [Version.v3]: v3Trade ?? undefined,
       }[toggledVersion]
 
   const parsedAmounts = useMemo(
@@ -313,7 +315,7 @@ export default function Swap({ history }: RouteComponentProps) {
         onDismiss={handleDismissTokenWarning}
       />
       <AppBody>
-        <SwapHeader trade={trade} />
+        <SwapHeader toggledVersion={toggledVersion} />
         <Wrapper id="swap-page">
           <ConfirmSwapModal
             isOpen={showConfirm}
@@ -388,6 +390,11 @@ export default function Swap({ history }: RouteComponentProps) {
                 setShowInverted={setShowInverted}
               />
             ) : null}
+            {toggledVersion === Version.v3 && isTradeBetter(v3Trade, v2Trade) ? (
+              <BetterTradeLink version={Version.v2} />
+            ) : toggledVersion === Version.v2 && isTradeBetter(v2Trade, v3Trade) ? (
+              <BetterTradeLink version={Version.v3} />
+            ) : null}
             <BottomGrouping>
               {swapIsUnsupported ? (
                 <ButtonPrimary disabled={true}>

src/state/swap/hooks.ts

@@ -116,7 +116,7 @@ export function useDerivedSwapInfo(): {
   parsedAmount: CurrencyAmount | undefined
   v2Trade: V2Trade | undefined
   inputError?: string
-  v3Trade: { trade: V3Trade | null; state: V3TradeState }
+  v3TradeState: { trade: V3Trade | null; state: V3TradeState }
 } {
   const { account } = useActiveWeb3React()
 
@@ -206,7 +206,7 @@ export function useDerivedSwapInfo(): {
     parsedAmount,
     v2Trade: v2Trade ?? undefined,
     inputError,
-    v3Trade,
+    v3TradeState: v3Trade,
   }
 }
 

src/utils/isTradeBetter.ts

 import { ZERO_PERCENT, ONE_HUNDRED_PERCENT } from './../constants/index'
 import { Percent, currencyEquals } from '@uniswap/sdk-core'
-import { Trade } from '@uniswap/v2-sdk'
+import { Trade as V2Trade } from '@uniswap/v2-sdk'
+import { Trade as V3Trade } from '@uniswap/v3-sdk'
 
 // returns whether tradeB is better than tradeA by at least a threshold percentage amount
 export function isTradeBetter(
-  tradeA: Trade | undefined | null,
-  tradeB: Trade | undefined | null,
+  tradeA: V2Trade | V3Trade | undefined | null,
+  tradeB: V2Trade | V3Trade | undefined | null,
   minimumDelta: Percent = ZERO_PERCENT
 ): boolean | undefined {
   if (tradeA && !tradeB) return false
@@ -17,7 +18,7 @@ export function isTradeBetter(
     !currencyEquals(tradeA.inputAmount.currency, tradeB.inputAmount.currency) ||
     !currencyEquals(tradeB.outputAmount.currency, tradeB.outputAmount.currency)
   ) {
-    throw new Error('Trades are not comparable')
+    return false
   }
 
   if (minimumDelta.equalTo(ZERO_PERCENT)) {