dApp Integration with MetaMask — WalletConnect & In-App Browser

dApp Integration with MetaMask — WalletConnect & In-App Browser

Overview

This guide explains practical ways to connect a software wallet to dApps using MetaMask: the browser extension's injected provider, WalletConnect with MetaMask mobile, and the mobile in-app browser (dapp browser MetaMask). I tested each flow myself and describe step-by-step actions you can replicate, plus security checks and troubleshooting. What I've found: each method trades convenience, control, and attack-surface differently. And I'll show you how to pick the right one for daily DeFi work.

How I tested (methodology)

I tested on a desktop browser extension and on two phones running the mobile app. For safe, repeatable tests I used a local Ganache chain and a public testnet with small test funds. Test actions included: connecting accounts, reading balances, initiating an ERC-20 approval and a simple swap on a test DEX UI, and calling a sample smart contract function. Steps I repeated: new wallet (seed phrase), add a test RPC (local development notes), fund from a faucet, then connect. Log files, screenshots, and UI timestamps were recorded. Reproduce this by creating a throwaway test wallet and using testnet tokens only (never mainnet funds for tests).

Connection methods explained

Injected provider (browser extension)

What it is: on desktop, MetaMask injects a provider object into web pages (commonly accessed via window.ethereum). dApps detect and call methods like eth_requestAccounts and send signed transactions via that provider.

How it works (brief): dApps call window.ethereum.request({ method: 'eth_requestAccounts' }), the extension shows a wallet connection request metamask popup, you approve, and the dApp receives your account address.

Pros: immediate UX, low friction for desktop DeFi (connect metamask to dapp in one click). Cons: browser-based injection is susceptible to malicious tabs or compromised extensions.

WalletConnect (mobile apps & external dApps)

What it is: WalletConnect is a communication protocol that lets a mobile wallet and an external dApp (desktop or mobile) exchange JSON-RPC messages over an encrypted bridge. The dApp shows a QR code or a deep link. The mobile MetaMask app scans or opens that link and asks you to approve.

How it works (brief): dApp creates a session proposal; the wallet displays a wallet connection request metamask modal with requested chains and methods; you confirm and the session is created. Subsequent transactions go through the session until you disconnect.

Pros: lets external apps on mobile talk to your wallet without an injected provider. Cons: sessions can persist (revoke when done) and bridge servers are a middleman (trust the protocol and the wallet).

MetaMask in-app dApp browser (mobile)

What it is: MetaMask mobile has a built-in browser. When you open a dApp URL inside that browser, the wallet acts like an injected provider inside the mobile web view.

Pros: fastest mobile UX (no QR, no extra app switching). Cons: limited to mobile web features (file APIs, popups behave differently). But it feels native for most DeFi flows.

Step-by-step: Connect MetaMask to a dApp

Desktop: injected provider (quick)

1. Open the dApp in your desktop browser where the MetaMask extension is installed. (If you need installation help see install-metamask-chrome.)
2. Click the dApp's "Connect wallet" button — the site should detect the injected provider.
3. A wallet connection request metamask popup appears. Verify the site origin (domain) at the top of the popup. Approve or reject. Approve only if the domain matches the dApp you expect.

Developer snippet (how dApps request accounts):

if (window.ethereum && window.ethereum.request) {
  try {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    console.log('Connected', accounts[0]);
  } catch (err) {
    console.error('User rejected connection');
  }
}

This demonstrates the injected provider MetaMask flow so you can reproduce it in dev environments.

Mobile: integrate MetaMask with mobile app (WalletConnect)

1. From the dApp (desktop or mobile), choose WalletConnect as the connect option.
2. If on desktop, scan the displayed QR code with the MetaMask mobile app scanner in the "WalletConnect" connect flow. (If you're on another mobile app, choose the deep link option.)
3. MetaMask shows a WalletConnect session details page: review requested chains and permissions, then approve.
4. The site shows your connected address and can request transactions.

Tips: revoke unused sessions from the mobile app's connected sites page (see manage-dapp-connections).

Mobile: use the dApp browser MetaMask

1. Open MetaMask mobile, use the built-in browser, and enter the dApp URL.
2. The dApp will detect the injected provider in that browser. Tap the dApp "Connect" button and approve the popup.

This is smooth for quick DeFi actions (swaps, staking UIs). If you prefer full app-to-wallet separation, use WalletConnect instead.

Comparison: injected provider vs WalletConnect vs in-app browser

Feature	Injected provider (extension)	WalletConnect (external mobile apps)	In-app dApp browser (MetaMask mobile)
Setup friction	Low (one-click)	Medium (QR or deep link)	Low (open in wallet)
Best for	Desktop DeFi UIs	Mobile apps (games, wallets)	Mobile web DeFi UIs
Session control	Manual disconnect in extension	Revoke sessions in mobile app	Disconnect via dApp UI or app settings
Security notes	Watch browser extensions & tabs	Sessions persist on device (revoke)	Good UX but limited browser controls

Security, UX tips, and common connection problems

• Always check the domain on the wallet connection request metamask popup before approving. Scammers can spoof UIs on compromised tabs.
• For interacting with contract metamask (calling a contract function), double-check the contract address on a block explorer and confirm calldata if possible. (Yes, this adds time. But the extra second can save you tokens.)
• Revoke token allowance and WalletConnect sessions after risky interactions. See token-approvals-and-revoke and disconnect-and-remove-connected-sites.
• If you get "No injected provider found" errors, ensure you have the extension enabled or you're in the MetaMask in-app browser for mobile.
• If gas estimates look off, switch networks carefully. For network setup see add-networks-custom-rpc and wrong-network-recovery.

But what if a dApp asks to sign a message you didn't expect? Pause. Check what the signature will do and where it's used. I once approved an unlimited token allowance by accident; that mistake taught me to always review approval pages closely.

Troubleshooting common wallet connection requests and errors

• "User rejected request": The wallet closed the dialog. Retry and accept only if you initiated it.
• "Session expired" (WalletConnect): Reconnect and then explicitly disconnect the stale session from your mobile app.
• "Cannot sign typed data": Some dApps request EIP-712; the wallet popup will show raw data. Reject if it looks unrelated to the action.
• QR not scanning: switch to the mobile in-app browser flow or paste the session link.

For developer-focused problems see developer-workflow and troubleshooting-common-errors.

FAQ

Q: Is it safe to keep crypto in a hot wallet connected to dApps? A: Hot wallets are convenient for DeFi but increase exposure. For large holdings consider separating funds to a cold or hardware wallet for long-term storage. For daily trades, keep minimal on the hot wallet and regularly revoke approvals.

Q: How do I revoke token approvals or a WalletConnect session? A: Use the wallet's connected sites or approvals UI (see manage-dapp-connections and token-approvals-and-revoke). Revoke any session or unlimited allowance you no longer need.

Q: What happens if I lose my phone while logged into MetaMask mobile? A: If you lose a device, use your seed phrase to restore on a new device (see backup-and-recovery). Revoke any active sessions from the restored wallet and move funds if you suspect compromise.

Who this setup is for

• Use injected provider (extension) if you work on desktop DeFi regularly and want quick, click-to-connect flows.
• Use WalletConnect when you need an external mobile app to talk to your wallet, or when you prefer the separation between browser and wallet app.
• Use the MetaMask in-app dApp browser if you do most activity on your phone and want the least friction.

If you prioritize maximum security over convenience, consider pairing these workflows with a hardware wallet (see integrate-hardware-ledger-trezor).

Conclusion & next steps

Connecting a wallet to dApps can be smooth and secure if you follow a few habits: verify domains, use testnets when experimenting, and revoke sessions/allowances you no longer need. I encourage you to try the steps above on a test network first. For step-by-step installs and walkthroughs see install-metamask-mobile and install-metamask-chrome. And if you run into a specific error, check our troubleshooting and manage-dapp-connections pages.

Want a focused checklist for daily DeFi ops? Start with a test wallet, connect via your preferred method, approve only obvious transactions, and revoke after use. Safe trading.