chore: remove WalletConnect feature flags (#6855)

* chore: remove walletConnectFallback flag

* chore: remove walletConnectV2 flag (#6856)

* rm hidden

* toggle account drawer

* fix test

* Revert "rm hidden"

This reverts commit 9e8dd65b04b1072d3565cb70defb46d1524791f3.

* fix test

* -u

* optional?

* Revert "optional?"

This reverts commit 8456080b78cfae58737918daeb929bdaf0758cba.

* switch mock

* expect

* test

src/components/AccountDrawer/UniwalletModal.tsx

 import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { InterfaceElementName } from '@uniswap/analytics-events'
-import { WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectv2 } from '@web3-react/walletconnect-v2'
 import Column, { AutoColumn } from 'components/Column'
 import Modal from 'components/Modal'
 import { RowBetween } from 'components/Row'
-import { uniwalletConnectConnection, uniwalletWCV2ConnectConnection } from 'connection'
+import { uniwalletWCV2ConnectConnection } from 'connection'
 import { ActivationStatus, useActivationState } from 'connection/activate'
 import { ConnectionType } from 'connection/types'
-import { UniwalletConnect } from 'connection/WalletConnect'
 import { UniwalletConnect as UniwalletConnectV2 } from 'connection/WalletConnectV2'
-import { useWalletConnectV2AsDefault } from 'featureFlags/flags/walletConnectV2'
 import { QRCodeSVG } from 'qrcode.react'
 import { useEffect, useState } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
@@ -51,21 +48,12 @@ export default function UniwalletModal() {
     uniswapWalletConnectors.includes(activationState.connection.type) &&
     !!uri
 
-  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
-
   useEffect(() => {
-    if (walletConnectV2AsDefault) {
-      const connectorV2 = uniwalletWCV2ConnectConnection.connector as WalletConnectv2
-      connectorV2.events.addListener(UniwalletConnectV2.UNI_URI_AVAILABLE, (uri: string) => {
-        uri && setUri(uri)
-      })
-    } else {
-      const connectorV1 = uniwalletConnectConnection.connector as WalletConnect
-      connectorV1.events.addListener(UniwalletConnect.UNI_URI_AVAILABLE, (uri: string) => {
-        uri && setUri(uri)
-      })
-    }
-  }, [walletConnectV2AsDefault])
+    const connectorV2 = uniwalletWCV2ConnectConnection.connector as WalletConnectv2
+    connectorV2.events.addListener(UniwalletConnectV2.UNI_URI_AVAILABLE, (uri: string) => {
+      uri && setUri(uri)
+    })
+  }, [])
 
   useEffect(() => {
     if (open) sendAnalyticsEvent('Uniswap wallet modal opened')

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -2,8 +2,6 @@ import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'fe
 import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetails'
 import { useRoutingAPIForPriceFlag } from 'featureFlags/flags/priceRoutingApi'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
-import { useWalletConnectFallbackFlag } from 'featureFlags/flags/walletConnectPopover'
-import { useWalletConnectV2Flag } from 'featureFlags/flags/walletConnectV2'
 import { useUpdateAtom } from 'jotai/utils'
 import { Children, PropsWithChildren, ReactElement, ReactNode, useCallback, useState } from 'react'
 import { X } from 'react-feather'
@@ -216,18 +214,6 @@ export default function FeatureFlagModal() {
         featureFlag={FeatureFlag.routingAPIPrice}
         label="Use the URA or routing-api for price fetches"
       />
-      <FeatureFlagOption
-        variant={BaseVariant}
-        value={useWalletConnectV2Flag()}
-        featureFlag={FeatureFlag.walletConnectV2}
-        label="Uses WalletConnect V2 as default wallet connect connection"
-      />
-      <FeatureFlagOption
-        variant={BaseVariant}
-        value={useWalletConnectFallbackFlag()}
-        featureFlag={FeatureFlag.walletConnectFallback}
-        label="Adds a ... menu to the connection option"
-      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

src/components/WalletModal/Option.test.tsx

 import { Connector } from '@web3-react/types'
 import UNIWALLET_ICON from 'assets/images/uniwallet.png'
-import { useAccountDrawer } from 'components/AccountDrawer'
+import { useToggleAccountDrawer } from 'components/AccountDrawer'
 import { Connection, ConnectionType } from 'connection/types'
 import { mocked } from 'test-utils/mocked'
 import { createDeferredPromise } from 'test-utils/promise'
@@ -13,7 +13,7 @@ jest.mock('components/AccountDrawer')
 
 beforeEach(() => {
   jest.spyOn(console, 'debug').mockReturnValue()
-  mocked(useAccountDrawer).mockReturnValue([true, mockToggleDrawer])
+  mocked(useToggleAccountDrawer).mockReturnValue(mockToggleDrawer)
 })
 
 const mockConnection1: Connection = {
@@ -23,7 +23,7 @@ const mockConnection1: Connection = {
     deactivate: jest.fn(),
   } as unknown as Connector,
   getIcon: () => UNIWALLET_ICON,
-  type: ConnectionType.UNISWAP_WALLET,
+  type: ConnectionType.UNISWAP_WALLET_V2,
 } as unknown as Connection
 
 const mockConnection2: Connection = {
@@ -39,7 +39,7 @@ const mockConnection2: Connection = {
 describe('Wallet Option', () => {
   it('renders default state', () => {
     const component = render(<Option connection={mockConnection1} />)
-    const option = component.getByTestId('wallet-option-UNISWAP_WALLET')
+    const option = component.getByTestId('wallet-option-UNISWAP_WALLET_V2')
     expect(option).toBeEnabled()
     expect(option).toHaveProperty('selected', false)
 
@@ -56,7 +56,7 @@ describe('Wallet Option', () => {
         <Option connection={mockConnection2} />
       </>
     )
-    const option1 = component.getByTestId('wallet-option-UNISWAP_WALLET')
+    const option1 = component.getByTestId('wallet-option-UNISWAP_WALLET_V2')
     const option2 = component.getByTestId('wallet-option-INJECTED')
 
     expect(option1).toBeEnabled()
@@ -64,7 +64,9 @@ describe('Wallet Option', () => {
     expect(option2).toBeEnabled()
     expect(option2).toHaveProperty('selected', false)
 
-    await act(() => option1.click())
+    expect(mockConnection1.connector.activate).toHaveBeenCalledTimes(0)
+    act(() => option1.click())
+    expect(mockConnection1.connector.activate).toHaveBeenCalledTimes(1)
 
     expect(option1).toBeDisabled()
     expect(option1).toHaveProperty('selected', true)

src/components/WalletModal/Option.tsx

-import { t, Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
-import { useAccountDrawer } from 'components/AccountDrawer'
-import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
+import { useToggleAccountDrawer } from 'components/AccountDrawer'
 import Loader from 'components/Icons/LoadingSpinner'
-import { walletConnectV1Connection, walletConnectV2Connection } from 'connection'
 import { ActivationStatus, useActivationState } from 'connection/activate'
-import { Connection, ConnectionType } from 'connection/types'
-import { useWalletConnectFallback } from 'featureFlags/flags/walletConnectPopover'
-import { useWalletConnectV2AsDefault } from 'featureFlags/flags/walletConnectV2'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { MouseEvent, useEffect, useRef, useState } from 'react'
-import { MoreHorizontal } from 'react-feather'
+import { Connection } from 'connection/types'
 import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
-import { Z_INDEX } from 'theme/zIndex'
 
 import NewBadge from './NewBadge'
 
@@ -67,41 +57,7 @@ const IconWrapper = styled.div`
     align-items: flex-end;
   `};
 `
-const PopoverContent = styled(ThemeButton)`
-  background: ${({ theme }) => theme.backgroundSurface};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
-  border-radius: 12px;
-  cursor: pointer;
-  display: flex;
-  max-width: 240px;
-  padding: 16px;
-  position: absolute;
-  right: 12px;
-  top: 52px;
-  z-index: ${Z_INDEX.popover};
-`
-const TOGGLE_SIZE = 24
-const FallbackPopoverToggle = styled.button`
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  color: ${({ theme }) => theme.textTertiary};
-  cursor: pointer;
-  display: flex;
-  height: ${TOGGLE_SIZE}px;
-  justify-content: center;
-  margin: 0;
-  max-width: 48px;
-  padding: 0;
-  position: absolute;
-  right: 16px;
-  top: calc(50% - ${TOGGLE_SIZE / 2}px);
-  width: ${TOGGLE_SIZE}px;
 
-  &:hover {
-    opacity: 0.6;
-  }
-`
 const Wrapper = styled.div<{ disabled: boolean }>`
   align-items: stretch;
   display: flex;
@@ -121,91 +77,19 @@ const Wrapper = styled.div<{ disabled: boolean }>`
   }
 `
 
-const WCv1Icon = styled.img`
-  height: 20px !important;
-  width: 20px !important;
-`
-const PopoverBodyText = styled(ThemedText.BodyPrimary)`
-  margin-bottom: 4px !important;
-  text-align: left;
-`
-const PopoverCaption = styled(ThemedText.Caption)`
-  text-align: left;
-`
-
-interface PopupButtonContentProps {
-  connection: Connection
-  isDarkMode: boolean
-  show: boolean
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void
-  onClose: () => void
-}
-function PopupButtonContent({ connection, isDarkMode, show, onClick, onClose }: PopupButtonContentProps) {
-  const popoverElement = useRef<HTMLButtonElement>(null)
-
-  useOnClickOutside(popoverElement, onClose)
-
-  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
-
-  if (!show) return null
-  return (
-    <PopoverContent onClick={onClick} ref={popoverElement} size={ButtonSize.small} emphasis={ButtonEmphasis.medium}>
-      <IconWrapper>
-        <WCv1Icon src={connection.getIcon?.(isDarkMode)} alt={connection.getName()} />
-      </IconWrapper>
-      <div>
-        <PopoverBodyText>
-          <Trans>Connect with {walletConnectV2AsDefault ? t`v1` : t`v2`}</Trans>
-        </PopoverBodyText>
-        <PopoverCaption color="textSecondary">
-          {walletConnectV2AsDefault
-            ? t`Support for v1 will be discontinued June 28.`
-            : t`Under development and unsupported by most wallets`}
-        </PopoverCaption>
-      </div>
-    </PopoverContent>
-  )
-}
-
 interface OptionProps {
   connection: Connection
 }
 export default function Option({ connection }: OptionProps) {
   const { activationState, tryActivation } = useActivationState()
-  const [wCPopoverOpen, setWCPopoverOpen] = useState(false)
-  const [accountDrawerOpen, toggleAccountDrawerOpen] = useAccountDrawer()
+  const toggleAccountDrawer = useToggleAccountDrawer()
   const { chainId } = useWeb3React()
-  const activate = () => tryActivation(connection, toggleAccountDrawerOpen, chainId)
-
-  useEffect(() => {
-    if (!accountDrawerOpen) setWCPopoverOpen(false)
-  }, [accountDrawerOpen])
+  const activate = () => tryActivation(connection, toggleAccountDrawer, chainId)
 
   const isSomeOptionPending = activationState.status === ActivationStatus.PENDING
   const isCurrentOptionPending = isSomeOptionPending && activationState.connection.type === connection.type
   const isDarkMode = useIsDarkMode()
 
-  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
-  const shouldUseWalletConnectFallback = useWalletConnectFallback()
-
-  const handleClickConnectViaPopover = (e: MouseEvent<HTMLButtonElement>) => {
-    const connector = walletConnectV2AsDefault ? walletConnectV1Connection : walletConnectV2Connection
-
-    e.stopPropagation()
-    tryActivation(connector, () => {
-      setWCPopoverOpen(false)
-      toggleAccountDrawerOpen()
-    })
-  }
-  const handleClickOpenPopover = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation()
-    setWCPopoverOpen(true)
-  }
-
-  const isWalletConnect =
-    connection.type === ConnectionType.WALLET_CONNECT || connection.type === ConnectionType.WALLET_CONNECT_V2
-  const showExtraMenuToggle = isWalletConnect && !isCurrentOptionPending && shouldUseWalletConnectFallback
-
   return (
     <Wrapper disabled={isSomeOptionPending}>
       <TraceEvent
@@ -230,21 +114,6 @@ export default function Option({ connection }: OptionProps) {
           {isCurrentOptionPending && <Loader />}
         </OptionCardClickable>
       </TraceEvent>
-
-      {showExtraMenuToggle && (
-        <>
-          <FallbackPopoverToggle onClick={handleClickOpenPopover} onMouseDown={handleClickOpenPopover}>
-            <MoreHorizontal />
-          </FallbackPopoverToggle>
-          <PopupButtonContent
-            connection={connection}
-            isDarkMode={isDarkMode}
-            show={wCPopoverOpen}
-            onClick={handleClickConnectViaPopover}
-            onClose={() => setWCPopoverOpen(false)}
-          />
-        </>
-      )}
     </Wrapper>
   )
 }

src/components/WalletModal/__snapshots__/Option.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`Wallet Option renders default state 1`] = `
 
 <button
   class="c0"
-  data-testid="wallet-option-UNISWAP_WALLET"
+  data-testid="wallet-option-UNISWAP_WALLET_V2"
 >
   <div
     class="c1"

src/components/WalletModal/index.tsx

@@ -5,8 +5,7 @@ import { AutoRow } from 'components/Row'
 import { getConnections, networkConnection } from 'connection'
 import { ActivationStatus, useActivationState } from 'connection/activate'
 import { ConnectionType } from 'connection/types'
-import { asSupportedChain, isSupportedChain } from 'constants/chains'
-import { useWalletConnectV2AsDefault } from 'featureFlags/flags/walletConnectV2'
+import { isSupportedChain } from 'constants/chains'
 import { useEffect } from 'react'
 import { Settings } from 'react-feather'
 import styled from 'styled-components/macro'
@@ -46,16 +45,12 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
 
   const { activationState } = useActivationState()
 
-  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
-  const hiddenWalletConnectTypes = [
-    walletConnectV2AsDefault ? ConnectionType.WALLET_CONNECT : ConnectionType.WALLET_CONNECT_V2,
-    walletConnectV2AsDefault ? ConnectionType.UNISWAP_WALLET : ConnectionType.UNISWAP_WALLET_V2,
-  ]
+  const hiddenWalletConnectTypes = [ConnectionType.WALLET_CONNECT, ConnectionType.UNISWAP_WALLET]
 
   // Keep the network connector in sync with any active user connector to prevent chain-switching on wallet disconnection.
   useEffect(() => {
     if (chainId && isSupportedChain(chainId) && connector !== networkConnection.connector) {
-      networkConnection.connector.activate(asSupportedChain(chainId))
+      networkConnection.connector.activate(chainId)
     }
   }, [chainId, connector])
 

src/featureFlags/flags/walletConnectPopover.ts

-import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
-
-export function useWalletConnectFallbackFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.walletConnectFallback)
-}
-
-export function useWalletConnectFallback(): boolean {
-  return useWalletConnectFallbackFlag() === BaseVariant.Enabled
-}

src/featureFlags/flags/walletConnectV2.ts

-import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
-
-export function useWalletConnectV2Flag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.walletConnectV2)
-}
-
-export function useWalletConnectV2AsDefault(): boolean {
-  return useWalletConnectV2Flag() === BaseVariant.Enabled
-}

src/featureFlags/index.tsx

@@ -13,8 +13,6 @@ export enum FeatureFlag {
   debounceSwapQuote = 'debounce_swap_quote',
   nativeUsdcArbitrum = 'web_usdc_arbitrum',
   routingAPIPrice = 'routing_api_price',
-  walletConnectV2 = 'walletconnect_v2',
-  walletConnectFallback = 'walletconnect_fallback',
 }
 
 interface FeatureFlagsContextType {