fix: use metamask sdk on mobile

examples/cra/package.json

@@ -12,8 +12,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2",
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

examples/nextjs-app/package.json

@@ -14,8 +14,8 @@
     "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",

examples/nextjs-siwe/package.json

@@ -15,8 +15,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "siwe": "^2.1.4",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "devDependencies": {
     "@types/node": "18.7.18",

examples/nextjs/package.json

@@ -14,8 +14,8 @@
     "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",

examples/testbench/package.json

@@ -16,8 +16,8 @@
     "next": "14.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "viem": "^2.13.6",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "devDependencies": {
     "@types/node": "18.7.18",

examples/vite/package.json

@@ -13,8 +13,8 @@
     "connectkit": "workspace:packages/connectkit",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

package.json

@@ -39,8 +39,8 @@
     "rollup-plugin-visualizer": "^5.5.4",
     "tslib": "^1.9.3",
     "typescript-plugin-styled-components": "^2.0.0",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   },
   "packageManager": "[email protected]",
   "dependencies": {

packages/connectkit-next-siwe/package.json

@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "iron-session": "^6.2.1",
-    "viem": "^2.13.0"
+    "viem": "^2.17.0"
   },
   "peerDependencies": {
     "connectkit": ">=1.2.0",

packages/connectkit/package.json

@@ -66,7 +66,7 @@
   "resolutions": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "viem": "^2.13.0",
-    "wagmi": "^2.10.2"
+    "viem": "^2.17.0",
+    "wagmi": "^2.11.0"
   }
 }

packages/connectkit/src/components/Common/ConnectorList/index.tsx

@@ -18,6 +18,7 @@ import { WalletProps, useWallets } from '../../../wallets/useWallets';
 import {
   detectBrowser,
   isCoinbaseWalletConnector,
+  isMetaMaskConnector,
   isWalletConnectConnector,
 } from '../../../utils';
 import { useLastConnector } from '../../../hooks/useLastConnector';
@@ -104,8 +105,11 @@ const ConnectorItem = ({
   const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
   // Safari requires opening popup on user gesture, so we connect immediately here
   const shouldConnectImmediately =
-    (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
-    isCoinbaseWalletConnector(wallet.connector.id);
+    (wallet.isInstalled &&
+      (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
+      // TODO: convert this to a flag in the configs
+      isCoinbaseWalletConnector(wallet.connector.id)) ||
+    (isMobile && isMetaMaskConnector(wallet.connector.id));
 
   if (redirectToMoreWallets || shouldConnectImmediately) deeplink = undefined; // mobile redirects to more wallets page
 

packages/connectkit/src/components/ConnectModal/ConnectWithQRCode.tsx

@@ -6,6 +6,7 @@ import { useWalletConnectModal } from '../../hooks/useWalletConnectModal';
 import {
   detectBrowser,
   isCoinbaseWalletConnector,
+  isMetaMaskConnector,
   isWalletConnectConnector,
 } from '../../utils';
 
@@ -37,7 +38,9 @@ const ConnectWithQRCode: React.FC<{
   } = useWeb3();
 
   const wcUri = getUri(id);
-  const uri = wcUri
+  const uri = isMetaMaskConnector(id)
+    ? wcUri // TODO: Rename this, in this case it will actually be the MetaMask URI
+    : wcUri
     ? wallet?.getWalletConnectDeeplink?.(wcUri) ?? wcUri
     : undefined;
 

packages/connectkit/src/components/contexts/web3/index.tsx

@@ -10,6 +10,8 @@ import { useAccount } from 'wagmi';
 import { useChains } from '../../../hooks/useChains';
 import { useWalletConnectUri } from '../../../hooks/connectors/useWalletConnectUri';
 import { useChainIsSupported } from '../../../hooks/useChainIsSupported';
+import { useMetaMaskUri } from '../../../hooks/connectors/useMetaMaskUri';
+import { isMetaMaskConnector } from '../../../utils';
 
 type Web3Context = {
   connect: {
@@ -45,6 +47,10 @@ export const Web3ContextProvider = ({
   const { uri: walletConnectUri } = useWalletConnectUri({
     enabled,
   });
+  const { uri: metaMaskUri } = useMetaMaskUri({
+    enabled,
+    //enabled: enabled && !isMobile,
+  });
 
   const { address: currentAddress, chain } = useAccount();
   const chainIsSupported = useChainIsSupported(chain?.id);
@@ -53,6 +59,7 @@ export const Web3ContextProvider = ({
   const value = {
     connect: {
       getUri: (id?: string) => {
+        if (isMetaMaskConnector(id)) return metaMaskUri;
         return walletConnectUri;
       },
     },

packages/connectkit/src/defaultConnectors.ts

@@ -1,6 +1,6 @@
 import { CreateConnectorFn } from 'wagmi';
 import {
-  injected,
+  metaMask,
   walletConnect,
   coinbaseWallet,
   CoinbaseWalletParameters,
@@ -40,7 +40,20 @@ const defaultConnectors = ({
 
   // Add the rest of the connectors
   connectors.push(
-    injected({ target: 'metaMask' }),
+    metaMask({
+      dappMetadata: {
+        name: app.name,
+        iconUrl: app.icon,
+        //source: "connectkit"
+      },
+      // disables metamask modal
+      extensionOnly: true,
+      modals: {
+        install: () => {
+          return {};
+        },
+      },
+    }),
     coinbaseWallet({
       appName: app.name,
       appLogoUrl: app.icon,

packages/connectkit/src/hooks/connectors/useMetaMaskUri.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+
+import { Connector, useAccount } from 'wagmi';
+import { useConnect } from './../useConnect';
+import { useContext } from '../../components/ConnectKit';
+import { useMetaMaskConnector } from './../useConnectors';
+
+type Props = {
+  enabled?: boolean;
+};
+
+export function useMetaMaskUri(
+  { enabled }: Props = {
+    enabled: true,
+  }
+) {
+  const { log } = useContext();
+
+  const [uri, setUri] = useState<string | undefined>(undefined);
+
+  const connector = useMetaMaskConnector();
+
+  const { isConnected } = useAccount();
+  const { connectAsync } = useConnect();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && !window.mmsdk) return;
+    if (window.mmsdk?.isExtensionActive()) return;
+    if (!enabled) return;
+
+    async function handleMessage(message) {
+      const { type, data } = message;
+      log('MM Message', message);
+      if (type === 'display_uri') {
+        setUri(data);
+      }
+    }
+    async function handleDisconnect() {
+      log('MM Disconnect');
+
+      if (connector) connect(connector);
+    }
+
+    async function connect(connector: Connector) {
+      console.log('connect');
+      const result = await connectAsync({ connector });
+      if (result) return result;
+      return false;
+    }
+
+    async function tryConnect(connector: Connector) {
+      console.log('tryConnect');
+      try {
+        await connect(connector);
+      } catch (error: any) {
+        log('catch error');
+        log(error);
+        if (error.code) {
+          switch (error.code) {
+            case 4001:
+              log('error.code - User rejected');
+              break;
+            default:
+              log('error.code - Unknown Error');
+              break;
+          }
+        } else {
+          // Sometimes the error doesn't respond with a code
+          log('MetaMask Wallet cannot connect.', error);
+        }
+      }
+    }
+
+    if (!connector || uri) return;
+    if (connector && !isConnected) {
+      tryConnect(connector);
+      connector.emitter.on('message', handleMessage);
+      connector.emitter.on('disconnect', handleDisconnect);
+      return () => {
+        connector.emitter.off('message', handleMessage);
+        connector.emitter.off('disconnect', handleDisconnect);
+      };
+    }
+  }, [enabled, connector, isConnected]);
+
+  return {
+    uri,
+  };
+}

packages/connectkit/src/hooks/useConnectors.ts

@@ -59,5 +59,5 @@ export function useMetaMaskConnector() {
     UNSTABLE_shimOnConnectSelectAccount: true,
   }
   */
-  return useConnector('metaMask');
+  return useConnector('metaMaskSDK');
 }

packages/connectkit/src/wallets/useWallets.tsx

@@ -3,7 +3,12 @@ import { Connector } from 'wagmi';
 import { useConnectors } from '../hooks/useConnectors';
 import { walletConfigs, WalletConfigProps } from './walletConfigs';
 import { useContext } from '../components/ConnectKit';
-import { isCoinbaseWalletConnector, isInjectedConnector } from '../utils';
+import {
+  isCoinbaseWalletConnector,
+  isInjectedConnector,
+  isMetaMaskConnector,
+  isMobile,
+} from '../utils';
 
 export type WalletProps = {
   id: string;
@@ -47,8 +52,10 @@ export const useWallets = (): WalletProps[] => {
       iconShape: 'squircle',
       isInstalled:
         connector.type === 'mock' ||
-        (connector.type === 'injected' && connector.id !== 'metaMask') ||
-        isCoinbaseWalletConnector(connector.id), // always run coinbase wallet SDK
+        connector.type === 'injected' ||
+        // TODO: convert this to a flag in the configs
+        isCoinbaseWalletConnector(connector.id) || // always run coinbase wallet SDK ||
+        (isMobile() && isMetaMaskConnector(connector.id)), // always run metamask SDK
     };
 
     if (walletId) {

packages/cra-template/template.json

@@ -10,8 +10,8 @@
       "@types/react-dom": "^18.0.0",
       "connectkit": "latest",
       "typescript": "^5.0.4",
-      "viem": "^2.13.0",
-      "wagmi": "^2.10.2",
+      "viem": "^2.17.0",
+      "wagmi": "^2.11.0",
       "web-vitals": "^2.1.0"
     },
     "eslintConfig": {