Popup Tips

Overview

When a Smart Wallet is connected and Coinbase Wallet SDK receives a request, it opens keys.coinbase.com in a popup window and passes the request to the popup for handling. Keep the following points in mind when working with the Smart Wallet popup.

Default blocking behavior

• Most modern browsers block all popups by default, unless they are triggered by a click.
• If a popup is blocked the browser shows a notification to the user, allowing them to manage popup settings.

What to do about it

• Ensure there is no additional logic between the button click and the request to open the Smart Wallet popup, as browsers might perceive the request as programmatically initiated.
• If logic is unavoidable, keep it minimal and test thoroughly in all supported browsers.

Cross-Origin-Opener-Policy

If the Smart Wallet popup opens and displays an error or infinite spinner, it may be due to the dapp's Cross-Origin-Opener-Policy. Be sure to use a directive that allows the Smart Wallet popup to function.

• ✅ Allows Smart Wallet popup to function
  • unsafe-none (default)
  • same-origin-allow-popups (recommended)
• ❌ Breaks Smart Wallet popup
  • same-origin

For more detailed information refer to the MDN docs.

Smart Wallet popup 'linger' behavior

• Sometimes a dapp may programmatically make a followup request based on the response to a previous request. Normally, browsers block these programmatic requests to open popups.
• To address this, after the Smart Wallet popup responds to a request, it will linger for 200ms to listen for another incoming request before closing.
  • If a request is received during this 200ms window, it will be received and handled within the same popup window.
  • If a request is received after the 200ms window and the popup has closed, opening the Smart Wallet popup will be blocked by the browser.