[v4 react] Allow configuring qrcode and qrModalOptions on various wallet configurators (#3315)

Author: MananTank

.changeset/red-peas-reflect.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": minor
+---
+
+Allow configuring WalletConnect `qrcode` and `qrModalOptions` from wallet configurator functions like `metamaskWallet`, `coreWallet`, `zerionWallet` etc

legacy_packages/react/src/wallet/wallets/coin98/coin98Wallet.tsx

@@ -6,6 +6,7 @@ import type {
 import { Coin98Wallet, getInjectedCoin98Provider } from "@thirdweb-dev/wallets";
 import { ExtensionOrWCConnectionUI } from "../_common/ExtensionORWCConnectionUI";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 const coin98WalletUris = {
   ios: "coin98://",
@@ -29,6 +30,22 @@ export type Coin98WalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -78,7 +95,11 @@ export const coin98Wallet = (
       const wallet = new Coin98Wallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       return wallet;

legacy_packages/react/src/wallet/wallets/coreWallet/coreWallet.tsx

@@ -10,6 +10,7 @@ import {
 import { handelWCSessionRequest } from "../handleWCSessionRequest";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { ExtensionOrWCConnectionUI } from "../_common/ExtensionORWCConnectionUI";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 const coreWalletUris = {
   ios: "core://",
@@ -33,6 +34,22 @@ export type CoreWalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -81,7 +98,11 @@ export const coreWallet = (
       const wallet = new CoreWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       handelWCSessionRequest(wallet, coreWalletUris);

legacy_packages/react/src/wallet/wallets/defiWallet/cryptoDefiWallet.tsx

@@ -10,6 +10,7 @@ import {
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { ExtensionOrWCConnectionUI } from "../_common/ExtensionORWCConnectionUI";
 import { handelWCSessionRequest } from "../handleWCSessionRequest";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 const cryptoDefiWalletUris = {
   ios: "dfw://",
@@ -33,6 +34,22 @@ export type CryptoDefiWalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -82,7 +99,11 @@ export const cryptoDefiWallet = (
       const wallet = new CryptoDefiWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       handelWCSessionRequest(wallet, cryptoDefiWalletUris);

legacy_packages/react/src/wallet/wallets/imtoken/imTokenWallet.tsx

@@ -6,6 +6,7 @@ import type {
 import { ImTokenWallet, assertWindowEthereum } from "@thirdweb-dev/wallets";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { ExtensionOrWCConnectionUI } from "../_common/ExtensionORWCConnectionUI";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 const imTokenWalletUris = {
   ios: "imtokenv2://",
@@ -15,6 +16,22 @@ const imTokenWalletUris = {
 export type ImTokenWalletConfigOptions = {
   projectId?: string;
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 export const imTokenWallet = (
@@ -30,7 +47,11 @@ export const imTokenWallet = (
       const wallet = new ImTokenWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       return wallet;

legacy_packages/react/src/wallet/wallets/metamask/metamaskWallet.tsx

@@ -6,6 +6,7 @@ import {
 import { MetamaskConnectUI } from "./MetamaskConnectUI";
 import { metamaskUris } from "./metamaskUris";
 import { handelWCSessionRequest } from "../handleWCSessionRequest";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 /**
  * @wallet
@@ -35,6 +36,22 @@ export type MetamaskWalletConfigOptions = {
    * Default is `"walletconnect"`
    */
   connectionMethod?: "walletConnect" | "metamaskBrowser";
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -89,7 +106,11 @@ export const metamaskWallet = (
       const wallet = new MetaMaskWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       if (connectionMethod === "walletConnect") {

legacy_packages/react/src/wallet/wallets/okx/okxWallet.tsx

@@ -1,6 +1,7 @@
 import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
 import { OKXWallet, getInjectedOKXProvider } from "@thirdweb-dev/wallets";
 import { OKXConnectUI } from "./OKXConnectUI";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 /**
  * @wallet
@@ -18,6 +19,22 @@ export type OKXWalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -67,7 +84,11 @@ export const okxWallet = (
       const wallet = new OKXWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       return wallet;

legacy_packages/react/src/wallet/wallets/oneKey/oneKeyWallet.tsx

@@ -6,6 +6,7 @@ import type {
 import { OneKeyWallet, getInjectedOneKeyProvider } from "@thirdweb-dev/wallets";
 import { useTWLocale } from "../../../evm/providers/locale-provider";
 import { ExtensionOrWCConnectionUI } from "../_common/ExtensionORWCConnectionUI";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 export const oneKeyWalletUris = {
   ios: "onekey-wallet://",
@@ -29,6 +30,22 @@ export type OneKeyWalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -78,7 +95,11 @@ export const oneKeyWallet = (
       const wallet = new OneKeyWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       return wallet;

legacy_packages/react/src/wallet/wallets/rabby/rabbyWallet.tsx

@@ -1,6 +1,7 @@
 import type { WalletOptions, WalletConfig } from "@thirdweb-dev/react-core";
 import { RabbyWallet, getInjectedRabbyProvider } from "@thirdweb-dev/wallets";
 import { RabbyConnectUI } from "./RabbyConnectUI";
+import type { QRModalOptions } from "@thirdweb-dev/wallets/src/evm/connectors/wallet-connect/qrModalOptions";
 
 /**
  * @wallet
@@ -18,6 +19,22 @@ export type RabbyWalletConfigOptions = {
    * If true, the wallet will be tagged as "recommended" in ConnectWallet Modal
    */
   recommended?: boolean;
+
+  /**
+   * Specify whether to open the official Wallet Connect  Modal when connecting the wallet if no injected MetaMask provider is found when connecting the wallet.
+   *
+   * This should not be set if you are using ConnectWallet component and only when manually connecting the wallet using a hook like `useConnect`.
+   *
+   * You can set it to `true` or a configuration object to enable the Wallet Connect Modal.
+   */
+  wcModal?:
+    | {
+        /**
+         * Configure the style of Wallet Connect Modal.
+         */
+        qrModalOptions?: QRModalOptions;
+      }
+    | boolean;
 };
 
 /**
@@ -64,7 +81,11 @@ export const rabbyWallet = (
       const wallet = new RabbyWallet({
         ...walletOptions,
         projectId: options?.projectId,
-        qrcode: false,
+        qrcode: options?.wcModal ? true : false,
+        qrModalOptions:
+          typeof options?.wcModal === "object"
+            ? options?.wcModal?.qrModalOptions
+            : undefined,
       });
 
       return wallet;