fix(connect-kit): MetaMask connections on mobile browsers

packages/connect-kit/src/create-wagmi-config.ts

@@ -73,7 +73,10 @@ export function createWagmiConfig({
 		}),
 		walletConnectV2ProjectId
 			? new WalletConnectConnector({
-					options: { projectId: walletConnectV2ProjectId },
+					options: {
+						showQrModal: false,
+						projectId: walletConnectV2ProjectId,
+					},
 			  })
 			: null,
 	]);

packages/connect-kit/src/utils/get-wallet-connect-uri.ts

@@ -0,0 +1,9 @@
+import type { WalletConnectConnector } from "wagmi/connectors/walletConnect";
+
+export async function getWalletConnectUri(connector: WalletConnectConnector) {
+	const provider = await connector.getProvider();
+
+	return new Promise<string>((resolve) =>
+		provider.once("display_uri", resolve),
+	);
+}

packages/connect-kit/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from "./store";
 export * from "./detect-browser";
+export * from "./get-wallet-connect-uri";
 export * from "./images";
 export * from "./check-is-wallet-connect-connector";
 export * from "./is-coinbase-wallet-installed";

packages/connect-kit/src/wallets/use-default-wallet-connect.ts

@@ -5,17 +5,21 @@ import { useRefCallback } from "@crossbell/util-hooks";
 
 import { checkIsWalletConnectConnector } from "../utils";
 import { connectorStore } from "./connectors/store";
+import { WalletConnectConnector } from "./connectors";
 
 export function useDefaultWalletConnect() {
 	const { connectAsync, connectors } = useConnect();
-	const connector = React.useMemo(
+	const _connector = React.useMemo(
 		() => connectors.find(checkIsWalletConnectConnector),
 		[connectors],
 	);
 
 	const openDefaultWalletConnect = useRefCallback(async () => {
-		if (connector) {
+		if (_connector) {
 			try {
+				const connector = new WalletConnectConnector({
+					options: { ..._connector.options, showQrModal: true },
+				});
 				const preferredChainId = connector?.chains[0]?.id;
 				const result = await connectAsync({
 					chainId: preferredChainId,
@@ -44,7 +48,7 @@ export function useDefaultWalletConnect() {
 	});
 
 	return {
-		canOpenWalletConnect: !!connector,
+		canOpenWalletConnect: !!_connector,
 		openDefaultWalletConnect,
 	};
 }

packages/connect-kit/src/wallets/wallets/index.ts

@@ -5,7 +5,7 @@ import compact from "lodash.compact";
 import type { MetaMaskConnector } from "wagmi/connectors/metaMask";
 import type { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
 import type { InjectedConnector } from "wagmi/connectors/injected";
-import type { WalletConnectLegacyConnector } from "wagmi/connectors/walletConnectLegacy";
+import type { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 
 import type { OKXConnector } from "../connectors";
 import { metaMaskWallet } from "./meta-mask-wallet";
@@ -18,15 +18,15 @@ enum KnownConnector {
 	okx = "okx",
 	coinbaseWallet = "coinbaseWallet",
 	injected = "injected",
-	walletConnectLegacy = "walletConnectLegacy",
+	walletConnect = "walletConnect",
 }
 
 type ConnectorMap = Partial<{
 	[KnownConnector.okx]: OKXConnector;
 	[KnownConnector.metaMask]: MetaMaskConnector;
 	[KnownConnector.coinbaseWallet]: CoinbaseWalletConnector;
 	[KnownConnector.injected]: InjectedConnector;
-	[KnownConnector.walletConnectLegacy]: WalletConnectLegacyConnector;
+	[KnownConnector.walletConnect]: WalletConnectConnector;
 }>;
 
 export function useWalletConnectors() {
@@ -40,7 +40,7 @@ export function useWalletConnectors() {
 		() =>
 			compact([
 				okxWallet(connectorMap.okx),
-				metaMaskWallet(connectorMap.metaMask, connectorMap.walletConnectLegacy),
+				metaMaskWallet(connectorMap.metaMask, connectorMap.walletConnect),
 				coinbaseWallet(connectorMap.coinbaseWallet),
 				braveWallet(connectorMap.injected),
 			]),

packages/connect-kit/src/wallets/wallets/meta-mask-wallet/index.tsx

@@ -1,9 +1,14 @@
 import type { MetaMaskConnector } from "wagmi/connectors/metaMask";
-import type { WalletConnectLegacyConnector } from "wagmi/connectors/walletConnectLegacy";
+import type { WalletConnectConnector } from "wagmi/connectors/walletConnect";
 import React from "react";
 
 import { MetamaskIcon } from "../../../components";
-import { isAndroid, isMobile } from "../../../utils";
+import {
+	isAndroid,
+	isMobile,
+	isIOS,
+	getWalletConnectUri,
+} from "../../../utils";
 import { Wallet } from "../../types";
 import styles from "../coinbase-wallet/index.module.css";
 
@@ -35,7 +40,7 @@ function isMetaMask(ethereum: NonNullable<(typeof window)["ethereum"]>) {
 
 export const metaMaskWallet = (
 	metaMask?: MetaMaskConnector,
-	walletConnectLegacy?: WalletConnectLegacyConnector,
+	walletConnect?: WalletConnectConnector,
 ): Wallet | null => {
 	if (!metaMask) return null;
 
@@ -61,15 +66,16 @@ export const metaMaskWallet = (
 			</span>
 		),
 		createConnector: () => {
-			if (shouldUseWalletConnect && walletConnectLegacy) {
+			if (shouldUseWalletConnect && walletConnect) {
 				return {
-					connector: walletConnectLegacy,
+					connector: walletConnect,
 					async qrCode() {
-						const { uri } = ((await walletConnectLegacy.getProvider()) as any)
-							?.connector;
+						const uri = await getWalletConnectUri(walletConnect);
 
 						return isAndroid()
 							? uri
+							: isIOS()
+							? `metamask://wc?uri=${encodeURIComponent(uri)}`
 							: `https://metamask.app.link/wc?uri=${encodeURIComponent(uri)}`;
 					},
 				};