-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Description
Link to minimal reproducible example
Screen recording: https://drive.google.com/file/d/1CxAOcgABT_tWdU-7-SYsqd47cQXctxp7/view?usp=drive_link Shows full loop of MetaMask deep-link getting stuck on approval + mint flow using WalletConnect from RN dApp.
Steps to Reproduce
Set up a React Native dApp using Reown AppKit with WalletConnect integration (e.g., via @reown/appkit-ethers-react-native).
Connect wallet using MetaMask mobile.
Trigger a function like mintNFTWithUSDT() that:
Calls usdtContract.approve(...)
Then calls purchaseContract.purchaseNFTWithUSDT(...)
Wait inside MetaMask app after it's opened — no transaction popup appears within 5–10 seconds.
Manually return to the dApp.
App auto-switches back to MetaMask.
Repeat steps 4–6: this switch loop happens 3–5+ times.
Eventually, the MetaMask confirmation popup appears.
Confirm the transaction.
Same loop occurs again for the second transaction (purchaseNFTWithUSDT).
Summary
🐛 Description
When using WalletConnect (e.g. via Reown AppKit in React Native) for purchase transaction, the app opens MetaMask for approval and mint transactions—but the MetaMask confirmation popup doesn’t appear immediately. Users often return to the app after 5–10s and the Kit auto-switches back to MetaMask. This loop can repeat 3–5+ times before a confirmation prompt finally appears, leading to a poor UX and confusion.
📱 Platform
- React Native (AppKit SDK for RN)
- WalletConnect on iOS/Android
- MetaMask mobile deep-linking
⚙️ Expected Behavior
- MetaMask popup (approve or mint) should appear reliably the first time the connection is initiated.
- dApp should not repeatedly auto-switch between app and MetaMask before the confirmation prompt appears.
🔁 Actual Behavior
- MetaMask is deep‑linked but no confirmation dialog renders within ~5–10 seconds.
- User returns to app, triggering reconnection logic and reopening MetaMask.
- After multiple loops, eventually the prompt appears, user confirms, then transaction completes.
🧩 Troubleshooting
- Adding delays (1–5s) after deep link reduces loops but doesn’t eliminate.
- On slower devices perhaps rendering delay inside MetaMask causes the surface to hang.
- This seems tied to mobile WalletConnect reconnection cycles when the external wallet (MetaMask) is never resolved initially.
🔧 Possible Root Causes
- WalletConnect session auto‐reopens deep link if the previous request is not completed (e.g. pending prompt).
- AppKit triggers navigation or modal change that invalidates the previous queue.
- MetaMask mobile may delay rendering confirmations on complex contracts or large payloads.
💡 Suggested Fixes
- Block repeat calls until the first
approve()
orpurchaseNFTWithUSDT()
request resolves or errors. - Debounce deep‑link reconnections when user returns to dApp.
- Optionally expose an API hook to detect MetaMask app readiness or pending confirmations.
- Add an explicit note in troubleshooting docs: "Wait inside MetaMask until prompt appears; do not return to the app prematurely."
🔄 Reproduction Steps
- In RN + WalletConnect (via AppKit), initiate
approve()
and wait ~5s without switching. - Return to app.
- Observe MetaMask auto-relaunch.
- Repeat ~3–5 times.
- Eventually approval dialog appears.
- Then repeat for mint transaction.
🔗 References
- Existing bug report on MetaMask not opening deep links :contentReference[oaicite:1]{index=1}
- Reown troubleshooting guide mentioning deep-link handling in WebView scenarios :contentReference[oaicite:2]{index=2}
List of related npm package versions
"@reown/appkit-ethers-react-native": "^1.2.4"
"ethers": "^6.13.5"
Node.js Version
v20.17.0
Package Manager
"npm": "^11.1.0"