‼️ Improve mobile wallet dApp experience

[nop33]

Problems

Providing a smooth experience when connecting the mobile wallet to dApps on a mobile browser of the same device has been a big challenge. Even after all our efforts, we're still suffering from multiple issues:

1. dApps sometimes don't pick up session approval
   • See video 1
   • Possibly related to lost connection when mobile wallet goes to background
   • See: WalletConnect does not always respond to dApp requests #782
2. iOS users need to manually copy the WC URL
   • See video 2
   • We thought getting listed on WC Explorer would fix this, but it didn't.
   • See: Automatically switch apps when dApp asks for signing #55 (comment)
3. Redirecting from mobile wallet to mobile browser is not straight forward
   • We settled for displaying a message to the user "You can return to your browser now"
   • See: Automatically switch apps when dApp asks for signing #55

Video 1: dApps sometimes don't pick up session approval

screen-20241217-100701.mp4

Video 2: iOS users need to manually copy the WC URL

Kapture.2024-12-17.at.10.17.15.mp4

Proposals

Integrating an in-app browser within the mobile wallet would potentially improve the experience a lot:

1. The user won't have to leave the app
2. The app won't go into the background
3. WalletConnect won't need to be used (we could inject JS same way the extension wallet does)
4. iOS users won't have to copy+paste WC URL
5. No redirections will need to take place
6. See: Investigate using in-app browser for dApps #95

Except from work on the mobile wallet side, this would require some work on the Alephium web3 packages, possibly the @alephium/web3-react.

What do other wallets do

🦄 Uniswap

Uniswap does not provide an in-app browser. It relies on WalletConnect.

I tried connecting to OpenSea, but the experience was not good. I succeeded only after several retries.

Kapture.2024-12-17.at.10.31.54.mp4

🦊 Metamask

Metamask provides an in-app browser, which makes the experience very smooth.

Kapture.2024-12-17.at.10.36.56.mp4

Phantom | Linx Wallet | Coinbase Wallet | Trust Wallet | Rainbow

They all provide an in-app browser

Phantom	Linx Wallet	Coinbase Wallet	Trust Wallet	Rainbow

Related issues

• Investigate using in-app browser for dApps #95
• Rework WalletConnect Alephium provider and wallets integration to solve major user problems #928
• WalletConnect does not always respond to dApp requests #782
• Automatically switch apps when dApp asks for signing #55