Fix Coinbase wallet transaction desktop popup for mobile QR login

Author: joaquim-verges

.changeset/sixty-bobcats-add.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix cb wallet transaction desktop popup when logged in via mobile QR code

packages/thirdweb/src/wallets/coinbase/coinbase-web.ts

@@ -129,7 +129,7 @@ let _provider: ProviderInterface | undefined;
  * @internal
  */
 export async function getCoinbaseWebProvider(
-  options?: CreateWalletArgs<typeof COINBASE>[1],
+  options?: CreateWalletArgs<typeof COINBASE>[1]
 ): Promise<ProviderInterface> {
   if (!_provider) {
     let CoinbaseWalletSDK: unknown = (await import("@coinbase/wallet-sdk"))
@@ -169,7 +169,7 @@ export async function getCoinbaseWebProvider(
  * @returns True if the wallet is a Coinbase SDK wallet, false otherwise.
  */
 export function isCoinbaseSDKWallet(
-  wallet: Wallet,
+  wallet: Wallet
 ): wallet is Wallet<typeof COINBASE> {
   return wallet.id === COINBASE;
 }
@@ -188,7 +188,17 @@ function createAccount({
     onTransactionRequested: async () => {
       // make sure to show the coinbase popup BEFORE doing any transaction preprocessing
       // otherwise the popup might get blocked in safari
-      await showCoinbasePopup(provider);
+      // but only if using cb smart wallet (web based)
+      if (window.localStorage) {
+        // this is the local storage key for the signer type in the cb web sdk
+        // value can be "scw" (web) or "walletlink" (mobile wallet)
+        const signerType = window.localStorage.getItem(
+          "-CBWSDK:SignerConfigurator:SignerType"
+        );
+        if (signerType === "scw") {
+          await showCoinbasePopup(provider);
+        }
+      }
     },
     async sendTransaction(tx: SendTransactionOption) {
       const transactionHash = (await provider.request({
@@ -249,7 +259,7 @@ function createAccount({
       }
 
       const { domain, message, primaryType } = parseTypedData(
-        typedData,
+        typedData
       ) as ox__TypedData.Definition;
 
       const types = {
@@ -281,7 +291,7 @@ function createAccount({
       try {
         const { callParams, chain } = await toProviderCallParams(
           options,
-          account,
+          account
         );
         const callId = await provider.request({
           method: "wallet_sendCalls",
@@ -294,7 +304,7 @@ function createAccount({
       } catch (error) {
         if (/unsupport|not support/i.test((error as Error).message)) {
           throw new Error(
-            `${COINBASE} errored calling wallet_sendCalls, with error: ${error instanceof Error ? error.message : stringify(error)}`,
+            `${COINBASE} errored calling wallet_sendCalls, with error: ${error instanceof Error ? error.message : stringify(error)}`
           );
         }
         throw error;
@@ -310,7 +320,7 @@ function createAccount({
       } catch (error) {
         if (/unsupport|not support/i.test((error as Error).message)) {
           throw new Error(
-            `${COINBASE} does not support wallet_getCallsStatus, reach out to them directly to request EIP-5792 support.`,
+            `${COINBASE} does not support wallet_getCallsStatus, reach out to them directly to request EIP-5792 support.`
           );
         }
         throw error;
@@ -345,7 +355,7 @@ function onConnect(
   chain: Chain,
   provider: ProviderInterface,
   emitter: WalletEmitter<typeof COINBASE>,
-  client: ThirdwebClient,
+  client: ThirdwebClient
 ): [Account, Chain, DisconnectFn, SwitchChainFn] {
   const account = createAccount({ address, client, provider });
 
@@ -399,7 +409,7 @@ function onConnect(
 export async function connectCoinbaseWalletSDK(
   options: WalletConnectionOption<typeof COINBASE>,
   emitter: WalletEmitter<typeof COINBASE>,
-  provider: ProviderInterface,
+  provider: ProviderInterface
 ): Promise<ReturnType<typeof onConnect>> {
   const accounts = (await provider.request({
     method: "eth_requestAccounts",
@@ -435,7 +445,7 @@ export async function connectCoinbaseWalletSDK(
 export async function autoConnectCoinbaseWalletSDK(
   options: WalletConnectionOption<typeof COINBASE>,
   emitter: WalletEmitter<typeof COINBASE>,
-  provider: ProviderInterface,
+  provider: ProviderInterface
 ): Promise<ReturnType<typeof onConnect>> {
   // connected accounts
   const addresses = (await provider.request({
@@ -462,7 +472,7 @@ export async function autoConnectCoinbaseWalletSDK(
 
 async function switchChainCoinbaseWalletSDK(
   provider: ProviderInterface,
-  chain: Chain,
+  chain: Chain
 ) {
   const chainIdHex = numberToHex(chain.id);
 

packages/thirdweb/src/x402/fetchWithPayment.ts

@@ -82,6 +82,7 @@ export function wrapFetchWithPayment(
       parsedPaymentRequirements,
       chain.id,
       "exact",
+      error,
     );
 
     if (!selectedPaymentRequirements) {
@@ -141,10 +142,11 @@ function defaultPaymentRequirementsSelector(
   paymentRequirements: RequestedPaymentRequirements[],
   chainId: number,
   scheme: "exact",
+  error?: string,
 ) {
   if (!paymentRequirements.length) {
     throw new Error(
-      "No valid payment requirements found in server 402 response",
+      `No valid payment requirements found in server 402 response. ${error}`,
     );
   }
   const currentWalletNetwork = ChainIdToNetwork[chainId] || `eip155:${chainId}`;