[feature] add option to open wallet links in new window (target="_blank")

[codynguyen]

What problem does this new feature solve?

Setup:

• WalletConnect is opened inside an iframe (our web app is supposed to be embedded to other webpages via an iframe)
• The parent webpage has frame-src CSP
• User clicks on a wallet button that has a strange scheme, e.g. Fireblocks (fireblocks-wc://)

Problem:

• Browser page crashes, showing This content is blocked. Contact the site owner to fix the issue.
• Browser console shows Refused to frame '' because it violates the following Content Security Policy directive: "frame-src

Workaround 1:

Explicitly add the app's scheme to the CSP. Downsides:

• We don't control the parent page so it's not always possible to get this done
• There are too many custom app schemes and it's a chore just to extract them to add to the CSP. This is not a viable solution because the number of wallets / custom app schemes are supposed to increase with time.
• I did try extracting all custom schemes and adding to our CSP, however Cloudfront kept rejecting the CSP config. It only works when there are just a couple dozens of these.

Workaround 2:

Change all the links to open in a new page to escape the CSP context.

This module by default opens links with target="_self"

modal/packages/modal-ui/src/utils/UiUtil.ts

Line 94 in 81e1b5c

CoreUtil.openHref(href, '_self')

. I tried changing all that to target="_blank" and it works.

Describe the solution you'd like

Based on workaround 2, I'd like to propose a new option that tells the modal to always open wallet links in a new window. Something like walletLinkTarget: "_self" | "_blank" which defaults to _self as in the current behavior.

Example:

import { EthereumProvider } from "@walletconnect/ethereum-provider";

const provider = await EthereumProvider.init({
  projectId: WALLETCONNECT_PROJECT_ID,
  showQrModal: true,
  qrModalOptions: { themeMode: "light", walletLinkTarget: '_blank' },
  chains: [chainId],
});