Skip to content

Commit e3b124c

Browse files
authoredJun 11, 2024··
refactor(connectors): metaMask mobile reconnect (#4020)
* refactor: mm mobile reconnect * feat(metaMask): useDeeplink * chore: changeset * docs: up
1 parent caa4fd7 commit e3b124c

File tree

4 files changed

+14
-66
lines changed

4 files changed

+14
-66
lines changed
 

‎.changeset/sweet-berries-invite.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@wagmi/connectors": patch
3+
---
4+
5+
Added reconnection support to `metaMask` on mobile and use deeplinks by default.

‎packages/connectors/src/metaMask.ts

+1-10
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
143143
chain.rpcUrls.default.http[0]!,
144144
]),
145145
),
146+
useDeeplink: parameters.useDeeplink ?? true,
146147
})
147148
await sdk.init()
148149
return sdk.getProvider()!
@@ -156,16 +157,6 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
156157
},
157158
async isAuthorized() {
158159
try {
159-
const isMobileBrowser =
160-
typeof navigator !== 'undefined'
161-
? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
162-
navigator.userAgent,
163-
)
164-
: false
165-
166-
// MetaMask Mobile doesn't support persisted sessions.
167-
if (isMobileBrowser) return false
168-
169160
const isDisconnected =
170161
// If shim exists in storage, connector is disconnected
171162
await config.storage?.getItem('metaMaskSDK.disconnected')

‎packages/core/src/actions/reconnect.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,14 @@ export async function reconnect(
6565
const connections: Connection[] = []
6666
const providers: unknown[] = []
6767
for (const connector of sorted) {
68-
const provider_ = await connector.getProvider().catch(() => undefined)
69-
if (!provider_) continue
68+
const provider = await connector.getProvider().catch(() => undefined)
69+
if (!provider) continue
7070

7171
// If we already have an instance of this connector's provider,
7272
// then we have already checked it (ie. injected connectors can
7373
// share the same `window.ethereum` instance, so we don't want to
7474
// connect to it again).
75-
if (providers.some((provider) => provider === provider_)) continue
75+
if (providers.some((x) => x === provider)) continue
7676

7777
const isAuthorized = await connector.isAuthorized()
7878
if (!isAuthorized) continue
@@ -102,7 +102,7 @@ export async function reconnect(
102102
chainId: data.chainId,
103103
connector,
104104
})
105-
providers.push(provider_)
105+
providers.push(provider)
106106
connected = true
107107
}
108108

‎site/shared/connectors/metaMask.md

+4-52
Original file line numberDiff line numberDiff line change
@@ -8,58 +8,6 @@ const connectorsPackageName = 'wagmi/connectors'
88

99
Connector for the [MetaMask SDK](https://github.com/MetaMask/metamask-sdk).
1010

11-
::: warning
12-
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.
13-
14-
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).
15-
16-
::: code-group
17-
18-
```tsx [Transactions]
19-
import { useSendTransaction, parseEther } from 'wagmi'
20-
21-
function Example() {
22-
const { sendTransaction } = useSendTransaction()
23-
24-
return (
25-
<button
26-
onClick={() => sendTransaction({
27-
gas: null, // [!code ++]
28-
to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
29-
value: parseEther('0.01'),
30-
})}
31-
>
32-
Transfer
33-
</button>
34-
)
35-
}
36-
```
37-
38-
```tsx [Contract Writes]
39-
import { useWriteContract } from 'wagmi'
40-
import { abi } from './abi'
41-
42-
function Example() {
43-
const { writeContract } = useWriteContract()
44-
45-
return (
46-
<button
47-
disabled={!isSuccess}
48-
onClick={() => writeContract({
49-
__mode: 'prepared', // [!code ++]
50-
abi,
51-
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
52-
functionName: 'mint',
53-
})}
54-
>
55-
Mint
56-
</button>
57-
)
58-
}
59-
```
60-
61-
:::
62-
6311
## Import
6412

6513
```ts-vue
@@ -209,6 +157,10 @@ Options for customizing the SDK UI.
209157
- 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.
210158
- Defaults to `true`.
211159

160+
::: warning
161+
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).
162+
:::
163+
212164
### wakeLockType
213165

214166
`WakeLockStatus | undefined`

0 commit comments

Comments
 (0)
Please sign in to comment.