@imtbl/imx-walletconnect-qrcode-modal

WalletConnect QR Code Modal

Immutable QR Code Modal for WalletConnect
Based upon version 1.7.5 of @walletconnect/qrcode-modal

Purpose

The WalletConnect documentation claims that it's possible to filter the list of wallets displayed for mobile, although the original WalletConnect QR code modal only supports this functionality for iOS. In the original Android implementation, a list of filterable wallets would not be displayed as they are for iOS devices. Instead, a 'Connect' link would appear with a href that follows the WalletConnect URI standard. The issue with this approach is that when the link is clicked, the Android OS will prompt the user to open the link with any wallet installed that supports the WalletConnect URI standard, including wallets that are not StarkEx compatible.

To work around this issue and to improve the UX, we've made the modifications outlined below.

Modifications

• Removed Android UI; iOS UI will now always be displayed for Android & iOS
• Modified formatting of deep links for MetaMask & Rainbow wallets on Android devices
• Disabled logic to open wallet deep links in new tab for Android, as this would result in a blank screen when returning to the browser from the wallet
• Removed wallet search functionality, WalletConnect header & unused code

The bulk of the custom logic can be found in /src/imtbl/.

Usage

import ImxQrCodeModel from '@imtbl/imx-walletconnect-qrcode-modal';
import WalletConnectProvider from '@walletconnect/web3-provider';

/**
 * Override the default WalletConnect QR code modal 
 */
const wcProvider = new WalletConnectProvider({
  qrcodeModal: ImxQrCodeModel,
});