diff --git a/src/components/AccountDrawer/MiniPortfolio/Pools/index.test.tsx b/src/components/AccountDrawer/MiniPortfolio/Pools/index.test.tsx index 6b5708bf5b..26f76c5746 100644 --- a/src/components/AccountDrawer/MiniPortfolio/Pools/index.test.tsx +++ b/src/components/AccountDrawer/MiniPortfolio/Pools/index.test.tsx @@ -10,6 +10,8 @@ import useMultiChainPositions from './useMultiChainPositions' jest.mock('./useMultiChainPositions') +jest.spyOn(console, 'warn').mockImplementation() + const owner = '0xf5b6bb25f5beaea03dd014c6ef9fa9f3926bf36c' const pool = new Pool( diff --git a/src/components/AccountDrawer/UniwalletModal.tsx b/src/components/AccountDrawer/UniwalletModal.tsx index d9e11ed4a8..6aceb785f7 100644 --- a/src/components/AccountDrawer/UniwalletModal.tsx +++ b/src/components/AccountDrawer/UniwalletModal.tsx @@ -2,13 +2,16 @@ 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 } from 'connection' +import { uniwalletConnectConnection, 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' @@ -42,19 +45,27 @@ export default function UniwalletModal() { const [uri, setUri] = useState() // Displays the modal if a Uniswap Wallet Connection is pending & qrcode URI is available + const uniswapWalletConnectors = [ConnectionType.UNISWAP_WALLET, ConnectionType.UNISWAP_WALLET_V2] const open = activationState.status === ActivationStatus.PENDING && - activationState.connection.type === ConnectionType.UNISWAP_WALLET && + uniswapWalletConnectors.includes(activationState.connection.type) && !!uri + const walletConnectV2AsDefault = useWalletConnectV2AsDefault() + useEffect(() => { - ;(uniwalletConnectConnection.connector as WalletConnect).events.addListener( - UniwalletConnect.UNI_URI_AVAILABLE, - (uri) => { + 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]) useEffect(() => { if (open) sendAnalyticsEvent('Uniswap wallet modal opened') diff --git a/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/src/components/FeatureFlagModal/FeatureFlagModal.tsx index 15261734e6..9eed6c7862 100644 --- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx +++ b/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 { 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' @@ -228,6 +229,12 @@ export default function FeatureFlagModal() { featureFlag={FeatureFlag.walletConnectV2} label="Uses WalletConnect V2 as default wallet connect connection" /> + { describe('with no account', () => { it('renders children in correct order', () => { const supportedConnections = getConnections() - const injectedConnection = supportedConnections[1] + const injectedConnection = supportedConnections[2] const component = render() expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot() }) it('renders without mini icons', () => { const supportedConnections = getConnections() - const injectedConnection = supportedConnections[1] + const injectedConnection = supportedConnections[2] const component = render() expect(component.getByTestId('StatusIconRoot').children.length).toEqual(0) }) @@ -38,14 +38,14 @@ describe('StatusIcon', () => { it('renders children in correct order', () => { const supportedConnections = getConnections() - const injectedConnection = supportedConnections[1] + const injectedConnection = supportedConnections[2] const component = render() expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot() }) it('renders without mini icons', () => { const supportedConnections = getConnections() - const injectedConnection = supportedConnections[1] + const injectedConnection = supportedConnections[2] const component = render() expect(component.getByTestId('StatusIconRoot').children.length).toEqual(0) }) diff --git a/src/components/WalletModal/Option.tsx b/src/components/WalletModal/Option.tsx index 8ab3161dc3..092b777a77 100644 --- a/src/components/WalletModal/Option.tsx +++ b/src/components/WalletModal/Option.tsx @@ -7,6 +7,7 @@ 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' @@ -65,7 +66,7 @@ const IconWrapper = styled.div` align-items: flex-end; `}; ` -const WCv1PopoverContent = styled(ThemeButton)` +const PopoverContent = styled(ThemeButton)` background: ${({ theme }) => theme.backgroundSurface}; border: 1px solid ${({ theme }) => theme.backgroundOutline}; border-radius: 12px; @@ -79,7 +80,7 @@ const WCv1PopoverContent = styled(ThemeButton)` z-index: ${Z_INDEX.popover}; ` const TOGGLE_SIZE = 24 -const WCv1PopoverToggle = styled.button` +const FallbackPopoverToggle = styled.button` align-items: center; background-color: transparent; border: none; @@ -123,11 +124,11 @@ const WCv1Icon = styled.img` height: 20px !important; width: 20px !important; ` -const WCv1BodyText = styled(ThemedText.BodyPrimary)` +const PopoverBodyText = styled(ThemedText.BodyPrimary)` margin-bottom: 4px !important; text-align: left; ` -const WCv1Caption = styled(ThemedText.Caption)` +const PopoverCaption = styled(ThemedText.Caption)` text-align: left; ` @@ -140,27 +141,28 @@ interface PopupButtonContentProps { } function PopupButtonContent({ connection, isDarkMode, show, onClick, onClose }: PopupButtonContentProps) { const popoverElement = useRef(null) - const walletConnectV2AsDefault = useWalletConnectV2AsDefault() useOnClickOutside(popoverElement, onClose) + const walletConnectV2AsDefault = useWalletConnectV2AsDefault() + if (!show) return null return ( - +
- + Connect with {walletConnectV2AsDefault ? t`v1` : t`v2`} - - + + {walletConnectV2AsDefault ? t`Support for v1 will be discontinued June 28.` : t`Under development and unsupported by most wallets`} - +
-
+ ) } @@ -169,12 +171,12 @@ interface OptionProps { } export default function Option({ connection }: OptionProps) { const { activationState, tryActivation } = useActivationState() - const [WC1PromptOpen, setWC1PromptOpen] = useState(false) + const [wCPopoverOpen, setWCPopoverOpen] = useState(false) const [accountDrawerOpen, toggleAccountDrawerOpen] = useAccountDrawer() const activate = () => tryActivation(connection, toggleAccountDrawerOpen) useEffect(() => { - if (!accountDrawerOpen) setWC1PromptOpen(false) + if (!accountDrawerOpen) setWCPopoverOpen(false) }, [accountDrawerOpen]) const isSomeOptionPending = activationState.status === ActivationStatus.PENDING @@ -182,22 +184,25 @@ export default function Option({ connection }: OptionProps) { const isDarkMode = useIsDarkMode() const walletConnectV2AsDefault = useWalletConnectV2AsDefault() + const shouldUseWalletConnectFallback = useWalletConnectFallback() + + const handleClickConnectViaPopover = (e: MouseEvent) => { + const connector = walletConnectV2AsDefault ? walletConnectV1Connection : walletConnectV2Connection - const handleClickConnectViaWCv1 = (e: MouseEvent) => { e.stopPropagation() - tryActivation(walletConnectV2AsDefault ? walletConnectV1Connection : walletConnectV2Connection, () => { - setWC1PromptOpen(false) + tryActivation(connector, () => { + setWCPopoverOpen(false) toggleAccountDrawerOpen() }) } - const handleClickOpenWCv1Tooltip = (e: MouseEvent) => { + const handleClickOpenPopover = (e: MouseEvent) => { e.stopPropagation() - setWC1PromptOpen(true) + setWCPopoverOpen(true) } const isWalletConnect = connection.type === ConnectionType.WALLET_CONNECT || connection.type === ConnectionType.WALLET_CONNECT_V2 - const showExtraMenuToggle = isWalletConnect && !isCurrentOptionPending + const showExtraMenuToggle = isWalletConnect && !isCurrentOptionPending && shouldUseWalletConnectFallback return ( @@ -226,15 +231,15 @@ export default function Option({ connection }: OptionProps) { {showExtraMenuToggle && ( <> - + - + setWC1PromptOpen(false)} + show={wCPopoverOpen} + onClick={handleClickConnectViaPopover} + onClose={() => setWCPopoverOpen(false)} /> )} diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx index cee6f13581..dfbda01c18 100644 --- a/src/components/WalletModal/index.tsx +++ b/src/components/WalletModal/index.tsx @@ -47,9 +47,10 @@ export default function WalletModal({ openSettings }: { openSettings: () => void const { activationState } = useActivationState() const walletConnectV2AsDefault = useWalletConnectV2AsDefault() - const hiddenWalletConnectType = walletConnectV2AsDefault - ? ConnectionType.WALLET_CONNECT - : ConnectionType.WALLET_CONNECT_V2 + const hiddenWalletConnectTypes = [ + walletConnectV2AsDefault ? ConnectionType.WALLET_CONNECT : ConnectionType.WALLET_CONNECT_V2, + walletConnectV2AsDefault ? ConnectionType.UNISWAP_WALLET : ConnectionType.UNISWAP_WALLET_V2, + ] // Keep the network connector in sync with any active user connector to prevent chain-switching on wallet disconnection. useEffect(() => { @@ -70,7 +71,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void {connections - .filter((connection) => connection.shouldDisplay() && connection.type !== hiddenWalletConnectType) + .filter((connection) => connection.shouldDisplay() && !hiddenWalletConnectTypes.includes(connection.type)) .map((connection) => (