Open huckym opened 3 months ago
Hello @pedrouid , let me share my investigation on these popup blocking issues in Safari.
Our setup is next.js + wagmi.
After selecting a wallet you'll see a loading UI with the "Open" button, but clicking this button will always block the popup window.
https://github.com/WalletConnect/web3modal/assets/5459173/7ab76697-8ff6-481b-ae56-d55d1cc1899e
In short, I see two issues here:
onRetry
method, ignoring the onConnect
;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
After selecting a wallet it will try to connect automatically but will fail because the popup window will be blocked.
https://github.com/WalletConnect/web3modal/assets/5459173/0dc85e31-ef7e-41ca-932c-618db8a489f7
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!
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:
Mobile:
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