[feature] prevent web wallets from getting blocked by browsers as unwarranted pop-up

[huckym]

What problem does this new feature solve?

Unless the window opened is a 'direct result' of a user interaction (like button click), browsers block it as pop-ups. Safari has the most stringent requirements. Currently our testing with web wallets on walletconnect has the following behavior:

Desktop:

• Chrome: works
• Safari: Blocked (user can click on the popup-blocker icon in the url bar to allow but it is very subtle and an average user woulnd't even notice)

Mobile:

• Chrome: Blocked with a notification to allow popup
• Safari: Blocked with no user notification (will appear broken to the user)

Describe the solution you'd like

Our testing shows that if the window open is called with less than 1s delay from the click event and not within an asynchronous callback, the browser allows the window to open. We propose showing an "open" button on the "web link" tab of the wallet in the web3modal which opens the window directly. Don't have any network requests and asynchronous callbacks in between.

cc @pedrouid

[linear]

APKT-606 [feature] prevent web wallets from getting blocked by browsers as unwarranted pop-up

[Volfor]

Hello @pedrouid , let me share my investigation on these popup blocking issues in Safari.

Our setup is next.js + wagmi.

1. Connecting to a web wallet from the "All Wallets" list

After selecting a wallet you'll see a loading UI with the "Open" button, but clicking this button will always block the popup window.

Screen.Recording.2024-06-12.at.17.56.19.mov

In short, I see two issues here:

1. Clicking the "Open" button always calls the onRetry method, ignoring the onConnect;
2. The onRetry method opens the wallet url when the "display_uri" event (which comes from the ethereum-provider) is received and this causes the popup to be blocked (https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted).

Maybe this button doesn't need the onRetry callback and removing it would solve both the 1st issue and the popup blocking problem, since the onConnect opens the url directly?
https://github.com/WalletConnect/web3modal/blob/61f87fc91898d1051dbe9cf1b1295b4daacc1be5/packages/scaffold/src/views/w3m-connecting-wc-view/index.ts#L173-L177

Here are some references to the code I looked at:

• The "Open" button:
  https://github.com/WalletConnect/web3modal/blob/61f87fc91898d1051dbe9cf1b1295b4daacc1be5/packages/scaffold/src/utils/w3m-connecting-widget/index.ts#L141-L149
  https://github.com/WalletConnect/web3modal/blob/61f87fc91898d1051dbe9cf1b1295b4daacc1be5/packages/scaffold/src/utils/w3m-connecting-widget/index.ts#L179-L189

• onConnect callback of the <w3m-connecting-wc-web> component:
  https://github.com/WalletConnect/web3modal/blob/61f87fc91898d1051dbe9cf1b1295b4daacc1be5/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts#L12
  https://github.com/WalletConnect/web3modal/blob/61f87fc91898d1051dbe9cf1b1295b4daacc1be5/packages/scaffold/src/partials/w3m-connecting-wc-web/index.ts#L24-L38

• What happens on the onRetry click:
  https://github.com/WalletConnect/web3modal/blob/d3490f93f0ee931c52caaaeed0354e3581fded00/packages/scaffold/src/views/w3m-connecting-wc-view/index.ts#L58-L62
  https://github.com/WalletConnect/web3modal/blob/d3490f93f0ee931c52caaaeed0354e3581fded00/packages/wagmi/src/client.ts#L126-L139

2. Connecting to an injected wallet

After selecting a wallet it will try to connect automatically but will fail because the popup window will be blocked.

Screen.Recording.2024-06-12.at.17.58.30.mov

Here I believe the issue is with auto connect. Since it was not initiated by the user, it is not recognized as a trusted event (same as the 2nd issue of the 1st case)

https://github.com/WalletConnect/web3modal/blob/d3490f93f0ee931c52caaaeed0354e3581fded00/packages/scaffold/src/views/w3m-connecting-external-view/index.ts#L31
https://github.com/WalletConnect/web3modal/blob/d3490f93f0ee931c52caaaeed0354e3581fded00/packages/scaffold/src/utils/w3m-connecting-widget/index.ts#L80-L83

Maybe a possible fix could be: if there is an error thrown and it's not an RpcError, don't show the error message and show the "Open" button instead of the "Try again" button.
In this case, if the popup window is blocked, the user will see a UI with an "Open" button, which is similar to when you connect from the "All Wallets" list.

--

If you need more details or clarification please let me know.
Thanks!

[linear]

CR-57 [feature] prevent web wallets from getting blocked by browsers as unwarranted pop-up