fix: adding wallet connect v2 behind feature flag (#6826)

* fix: adding wallet connect v2 behind feature flag

* passing unit tests

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -3,6 +3,7 @@ import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetail
 import { useRoutingAPIForPriceFlag } from 'featureFlags/flags/priceRoutingApi'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
 import { UnifiedRouterVariant, useRoutingAPIV2Flag } from 'featureFlags/flags/unifiedRouter'
+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'
@@ -221,6 +222,12 @@ 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"
+      />
       <FeatureFlagGroup name="Debug">
         <FeatureFlagOption
           variant={TraceJsonRpcVariant}

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 { useAccountDrawer } from 'components/AccountDrawer'
 import { ButtonEmphasis, ButtonSize, ThemeButton } from 'components/Button'
 import Loader from 'components/Icons/LoadingSpinner'
-import { walletConnectV1Connection } from 'connection'
+import { walletConnectV1Connection, walletConnectV2Connection } from 'connection'
 import { ActivationStatus, useActivationState } from 'connection/activate'
 import { Connection, ConnectionType } from 'connection/types'
+import { useWalletConnectV2AsDefault } from 'featureFlags/flags/walletConnectV2'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { MouseEvent, useEffect, useRef, useState } from 'react'
 import { MoreHorizontal } from 'react-feather'
@@ -138,7 +140,10 @@ interface PopupButtonContentProps {
 }
 function PopupButtonContent({ connection, isDarkMode, show, onClick, onClose }: PopupButtonContentProps) {
   const popoverElement = useRef<HTMLButtonElement>(null)
+  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
+
   useOnClickOutside(popoverElement, onClose)
+
   if (!show) return null
   return (
     <WCv1PopoverContent onClick={onClick} ref={popoverElement} size={ButtonSize.small} emphasis={ButtonEmphasis.medium}>
@@ -146,8 +151,14 @@ function PopupButtonContent({ connection, isDarkMode, show, onClick, onClose }:
         <WCv1Icon src={connection.getIcon?.(isDarkMode)} alt={connection.getName()} />
       </IconWrapper>
       <div>
-        <WCv1BodyText>Connect with v1</WCv1BodyText>
-        <WCv1Caption color="textSecondary">Support for v1 will be discontinued June 28.</WCv1Caption>
+        <WCv1BodyText>
+          <Trans>Connect with {walletConnectV2AsDefault ? t`v1` : t`v2`}</Trans>
+        </WCv1BodyText>
+        <WCv1Caption color="textSecondary">
+          {walletConnectV2AsDefault
+            ? t`Support for v1 will be discontinued June 28.`
+            : t`Under development and unsupported by most wallets`}
+        </WCv1Caption>
       </div>
     </WCv1PopoverContent>
   )
@@ -170,9 +181,11 @@ export default function Option({ connection }: OptionProps) {
   const isCurrentOptionPending = isSomeOptionPending && activationState.connection.type === connection.type
   const isDarkMode = useIsDarkMode()
 
+  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
+
   const handleClickConnectViaWCv1 = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
-    tryActivation(walletConnectV1Connection, () => {
+    tryActivation(walletConnectV2AsDefault ? walletConnectV1Connection : walletConnectV2Connection, () => {
       setWC1PromptOpen(false)
       toggleAccountDrawerOpen()
     })
@@ -182,7 +195,9 @@ export default function Option({ connection }: OptionProps) {
     setWC1PromptOpen(true)
   }
 
-  const showExtraMenuToggle = connection.type === ConnectionType.WALLET_CONNECT_V2 && !isCurrentOptionPending
+  const isWalletConnect =
+    connection.type === ConnectionType.WALLET_CONNECT || connection.type === ConnectionType.WALLET_CONNECT_V2
+  const showExtraMenuToggle = isWalletConnect && !isCurrentOptionPending
 
   return (
     <Wrapper disabled={isSomeOptionPending}>

src/components/WalletModal/index.tsx

@@ -4,7 +4,9 @@ import { AutoColumn } from 'components/Column'
 import { AutoRow } from 'components/Row'
 import { getConnections, networkConnection } from 'connection'
 import { ActivationStatus, useActivationState } from 'connection/activate'
+import { ConnectionType } from 'connection/types'
 import { isSupportedChain } from 'constants/chains'
+import { useWalletConnectV2AsDefault } from 'featureFlags/flags/walletConnectV2'
 import { useEffect } from 'react'
 import { Settings } from 'react-feather'
 import styled from 'styled-components/macro'
@@ -44,6 +46,11 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
 
   const { activationState } = useActivationState()
 
+  const walletConnectV2AsDefault = useWalletConnectV2AsDefault()
+  const hiddenWalletConnectType = walletConnectV2AsDefault
+    ? ConnectionType.WALLET_CONNECT
+    : ConnectionType.WALLET_CONNECT_V2
+
   // 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) {
@@ -63,7 +70,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
         <AutoColumn gap="16px">
           <OptionGrid data-testid="option-grid">
             {connections
-              .filter((connection) => connection.shouldDisplay())
+              .filter((connection) => connection.shouldDisplay() && connection.type !== hiddenWalletConnectType)
               .map((connection) => (
                 <Option key={connection.getName()} connection={connection} />
               ))}

src/connection/index.test.tsx

@@ -19,7 +19,7 @@ describe('connection utility/metadata tests', () => {
     UserAgentMock.isMobile = isMobile
     global.window.ethereum = ethereum
 
-    const displayed = getConnections().filter((c) => c.shouldDisplay())
+    const displayed = getConnections().filter((c) => c.shouldDisplay() && c.type !== ConnectionType.WALLET_CONNECT)
     const injected = getConnection(ConnectionType.INJECTED)
     const coinbase = getConnection(ConnectionType.COINBASE_WALLET)
     const uniswap = getConnection(ConnectionType.UNISWAP_WALLET)

src/connection/index.ts

@@ -74,12 +74,12 @@ const [web3WalletConnect, web3WalletConnectHooks] = initializeConnector<WalletCo
   (actions) => new WalletConnectV1({ actions, onError })
 )
 export const walletConnectV1Connection: Connection = {
-  getName: () => 'WalletConnectV1',
+  getName: () => 'WalletConnect',
   connector: web3WalletConnect,
   hooks: web3WalletConnectHooks,
   type: ConnectionType.WALLET_CONNECT,
   getIcon: () => WALLET_CONNECT_ICON,
-  shouldDisplay: () => false,
+  shouldDisplay: () => !getIsInjectedMobileBrowser(),
 }
 
 const [web3WalletConnectV2, web3WalletConnectV2Hooks] = initializeConnector<WalletConnectV2>(

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

@@ -14,6 +14,7 @@ export enum FeatureFlag {
   debounceSwapQuote = 'debounce_swap_quote',
   nativeUsdcArbitrum = 'web_usdc_arbitrum',
   routingAPIPrice = 'routing_api_price',
+  walletConnectV2 = 'walletconnect_v2',
 }
 
 interface FeatureFlagsContextType {