refactor(connectors): metaMask mobile reconnect (#4020)

* refactor: mm mobile reconnect

* feat(metaMask): useDeeplink

* chore: changeset

* docs: up

Author: tmm

.changeset/sweet-berries-invite.md

@@ -0,0 +1,5 @@
+---
+"@wagmi/connectors": patch
+---
+
+Added reconnection support to `metaMask` on mobile and use deeplinks by default.

packages/connectors/src/metaMask.ts

@@ -143,6 +143,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
               chain.rpcUrls.default.http[0]!,
             ]),
           ),
+          useDeeplink: parameters.useDeeplink ?? true,
         })
         await sdk.init()
         return sdk.getProvider()!
@@ -156,16 +157,6 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
     },
     async isAuthorized() {
       try {
-        const isMobileBrowser =
-          typeof navigator !== 'undefined'
-            ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-                navigator.userAgent,
-              )
-            : false
-
-        // MetaMask Mobile doesn't support persisted sessions.
-        if (isMobileBrowser) return false
-
         const isDisconnected =
           // If shim exists in storage, connector is disconnected
           await config.storage?.getItem('metaMaskSDK.disconnected')

packages/core/src/actions/reconnect.ts

@@ -65,14 +65,14 @@ export async function reconnect(
   const connections: Connection[] = []
   const providers: unknown[] = []
   for (const connector of sorted) {
-    const provider_ = await connector.getProvider().catch(() => undefined)
-    if (!provider_) continue
+    const provider = await connector.getProvider().catch(() => undefined)
+    if (!provider) continue
 
     // If we already have an instance of this connector's provider,
     // then we have already checked it (ie. injected connectors can
     // share the same `window.ethereum` instance, so we don't want to
     // connect to it again).
-    if (providers.some((provider) => provider === provider_)) continue
+    if (providers.some((x) => x === provider)) continue
 
     const isAuthorized = await connector.isAuthorized()
     if (!isAuthorized) continue
@@ -102,7 +102,7 @@ export async function reconnect(
       chainId: data.chainId,
       connector,
     })
-    providers.push(provider_)
+    providers.push(provider)
     connected = true
   }
 

site/shared/connectors/metaMask.md

@@ -8,58 +8,6 @@ const connectorsPackageName = 'wagmi/connectors'
 
 Connector for the [MetaMask SDK](https://github.com/MetaMask/metamask-sdk).
 
-::: warning
-This connector has limitations on iOS as Safari cancels Universal Link connections if they do not occur within ~500ms of user interaction (ie. a button click). For a reliable iOS linking experience, it is recommended to use the <a :href="`/${docsPath}/api/connectors/walletConnect`">`walletConnect`</a> connector.
-
-Alternatively, to prevent Universal Link issues with this connector, you can skip transaction validation by setting `gas: null` (for transactions) or `__mode: 'prepared'` (for contract writes).
-
-::: code-group
-
-```tsx [Transactions]
-import { useSendTransaction, parseEther } from 'wagmi'
-
-function Example() {
-  const { sendTransaction } = useSendTransaction()
-  
-  return (
-    <button 
-      onClick={() => sendTransaction({ 
-        gas: null, // [!code ++]
-        to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
-        value: parseEther('0.01'), 
-      })}
-    >
-      Transfer
-    </button>
-  )
-}
-```
-
-```tsx [Contract Writes]
-import { useWriteContract } from 'wagmi'
-import { abi } from './abi'
-
-function Example() {
-  const { writeContract } = useWriteContract()
-  
-  return (
-    <button 
-      disabled={!isSuccess}
-      onClick={() => writeContract({
-        __mode: 'prepared', // [!code ++]
-        abi,
-        address: '0x6b175474e89094c44da98b954eedeac495271d0f',
-        functionName: 'mint',
-      })}
-    >
-      Mint
-    </button>
-  )
-}
-```
-
-:::
-
 ## Import
 
 ```ts-vue
@@ -209,6 +157,10 @@ Options for customizing the SDK UI.
 - If `true`, the SDK will use deeplinks to connect with MetaMask Mobile. If `false`, the SDK will use universal links to connect with MetaMask Mobile.
 - Defaults to `true`.
 
+::: warning
+Setting `useDeeplink` to `false` can negatively impact performance on iOS Safari as Universal Link connections are canceled if they do not occur within ~500ms of an interaction (e.g. button press).
+:::
+
 ### wakeLockType
 
 `WakeLockStatus | undefined`