thirdweb 5.105.3-nightly-6d1d344c48302d45aeb63532c84cc8e79c93e26f-20250628000422 → 5.105.4-nightly-1f72396d7fa4748efef179821a7a796b53679bcb-20250629000440

package/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -166,6 +166,12 @@ export type CheckoutWidgetProps = {
    * @hidden
    */
   paymentLinkId?: string;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -341,6 +347,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
           props.onError?.(err);
         }}
         paymentLinkId={props.paymentLinkId}
+        paymentMethods={props.paymentMethods}
         presetOptions={props.presetOptions}
         purchaseData={props.purchaseData}
         receiverAddress={props.seller}

package/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -169,6 +169,12 @@ export type TransactionWidgetProps = {
    * @hidden
    */
   paymentLinkId?: string;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 };
 
 // Enhanced UIOptions to handle unsupported token state
@@ -400,6 +406,7 @@ export function TransactionWidget(props: TransactionWidgetProps) {
           props.onError?.(err);
         }}
         paymentLinkId={props.paymentLinkId}
+        paymentMethods={props.paymentMethods}
         presetOptions={props.presetOptions}
         purchaseData={props.purchaseData}
         receiverAddress={undefined}

package/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -370,13 +370,9 @@ export function PaymentDetails({
                               }
                             </>
                           ) : (
-                            <>
-                              {
-                                chainsMetadata.find(
-                                  (c) => c.chainId === step.originToken.chainId,
-                                )?.name
-                              }
-                            </>
+                            chainsMetadata.find(
+                              (c) => c.chainId === step.originToken.chainId,
+                            )?.name
                           )}
                         </Text>
                       </Container>

package/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -71,6 +71,12 @@ export interface PaymentSelectionProps {
    * Whether to include the destination token in the payment methods
    */
   includeDestinationToken?: boolean;
+
+  /**
+   * Allowed payment methods
+   * @default ["crypto", "card"]
+   */
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 type Step =
@@ -90,6 +96,7 @@ export function PaymentSelection({
   connectOptions,
   connectLocale,
   includeDestinationToken,
+  paymentMethods = ["crypto", "card"],
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -115,7 +122,7 @@ export function PaymentSelection({
       ? currentStep.selectedWallet
       : activeWallet;
   const {
-    data: paymentMethods,
+    data: suitableTokenPaymentMethods,
     isLoading: paymentMethodsLoading,
     error: paymentMethodsError,
   } = usePaymentMethods({
@@ -248,6 +255,7 @@ export function PaymentSelection({
             onConnectWallet={handleConnectWallet}
             onFiatSelected={handleFiatSelected}
             onWalletSelected={handleWalletSelected}
+            paymentMethods={paymentMethods}
           />
         )}
 
@@ -261,7 +269,7 @@ export function PaymentSelection({
             destinationToken={destinationToken}
             onBack={handleBackToWalletSelection}
             onPaymentMethodSelected={handlePaymentMethodSelected}
-            paymentMethods={paymentMethods}
+            paymentMethods={suitableTokenPaymentMethods}
             paymentMethodsLoading={paymentMethodsLoading}
           />
         )}

package/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx

@@ -21,6 +21,7 @@ interface WalletFiatSelectionProps {
   onWalletSelected: (wallet: Wallet) => void;
   onFiatSelected: () => void;
   onConnectWallet: () => void;
+  paymentMethods?: ("crypto" | "card")[];
 }
 
 export function WalletFiatSelection({
@@ -29,144 +30,152 @@ export function WalletFiatSelection({
   onWalletSelected,
   onFiatSelected,
   onConnectWallet,
+  paymentMethods = ["crypto", "card"],
 }: WalletFiatSelectionProps) {
   const theme = useCustomTheme();
 
   return (
     <>
-      <Text color="primaryText" size="md">
-        Pay with Crypto
-      </Text>
-      <Spacer y="md" />
-      {/* Connected Wallets */}
-      {connectedWallets.length > 0 && (
+      {paymentMethods.includes("crypto") && (
         <>
-          <Container flex="column" gap="sm">
-            {connectedWallets.map((wallet) => {
-              const account = wallet.getAccount();
-              if (!account?.address) {
-                return null;
-              }
-              return (
-                <Button
-                  fullWidth
-                  key={wallet.id}
-                  onClick={() => onWalletSelected(wallet)}
-                  style={{
-                    backgroundColor: theme.colors.tertiaryBg,
-                    border: `1px solid ${theme.colors.borderColor}`,
-                    borderRadius: radius.md,
-                    justifyContent: "space-between",
-                    padding: `${spacing.sm} ${spacing.md}`,
-                  }}
-                  variant="secondary"
-                >
-                  <WalletRow
-                    address={account?.address}
-                    client={client}
-                    iconSize="lg"
-                    textSize="sm"
-                  />
-                  <ChevronRightIcon
-                    style={{ height: iconSize.md, width: iconSize.md }}
-                  />
-                </Button>
-              );
-            })}
-          </Container>
-          <Spacer y="sm" />
-        </>
-      )}
+          <Text color="primaryText" size="md">
+            Pay with Crypto
+          </Text>
+          <Spacer y="md" />
+          {/* Connected Wallets */}
+          {connectedWallets.length > 0 && (
+            <>
+              <Container flex="column" gap="sm">
+                {connectedWallets.map((wallet) => {
+                  const account = wallet.getAccount();
+                  if (!account?.address) {
+                    return null;
+                  }
+                  return (
+                    <Button
+                      fullWidth
+                      key={wallet.id}
+                      onClick={() => onWalletSelected(wallet)}
+                      style={{
+                        backgroundColor: theme.colors.tertiaryBg,
+                        border: `1px solid ${theme.colors.borderColor}`,
+                        borderRadius: radius.md,
+                        justifyContent: "space-between",
+                        padding: `${spacing.sm} ${spacing.md}`,
+                      }}
+                      variant="secondary"
+                    >
+                      <WalletRow
+                        address={account?.address}
+                        client={client}
+                        iconSize="lg"
+                        textSize="sm"
+                      />
+                      <ChevronRightIcon
+                        style={{ height: iconSize.md, width: iconSize.md }}
+                      />
+                    </Button>
+                  );
+                })}
+              </Container>
+              <Spacer y="sm" />
+            </>
+          )}
 
-      {/* Connect Another Wallet */}
-      <Button
-        fullWidth
-        onClick={onConnectWallet}
-        style={{
-          backgroundColor: theme.colors.tertiaryBg,
-          border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.md,
-          height: "auto",
-          padding: `${spacing.sm} ${spacing.md}`,
-          textAlign: "left",
-        }}
-        variant="secondary"
-      >
-        <Container
-          flex="row"
-          gap="md"
-          style={{ alignItems: "center", width: "100%" }}
-        >
-          <Container
+          {/* Connect Another Wallet */}
+          <Button
+            fullWidth
+            onClick={onConnectWallet}
             style={{
-              alignItems: "center",
-              border: `1px dashed ${theme.colors.secondaryIconColor}`,
-              borderRadius: radius.sm,
-              display: "flex",
-              height: iconSize.lg,
-              justifyContent: "center",
-              padding: spacing["4xs"],
-              width: iconSize.lg,
+              backgroundColor: theme.colors.tertiaryBg,
+              border: `1px solid ${theme.colors.borderColor}`,
+              borderRadius: radius.md,
+              height: "auto",
+              padding: `${spacing.sm} ${spacing.md}`,
+              textAlign: "left",
             }}
+            variant="secondary"
           >
-            <PlusIcon
-              color={theme.colors.secondaryText}
-              height={iconSize.md}
-              width={iconSize.md}
-            />
-          </Container>
-          <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-            <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-              Connect Another Wallet
-            </Text>
-            <Text color="secondaryText" size="xs">
-              Use a different wallet to pay
-            </Text>
-          </Container>
-        </Container>
-      </Button>
+            <Container
+              flex="row"
+              gap="md"
+              style={{ alignItems: "center", width: "100%" }}
+            >
+              <Container
+                style={{
+                  alignItems: "center",
+                  border: `1px dashed ${theme.colors.secondaryIconColor}`,
+                  borderRadius: radius.sm,
+                  display: "flex",
+                  height: iconSize.lg,
+                  justifyContent: "center",
+                  padding: spacing["4xs"],
+                  width: iconSize.lg,
+                }}
+              >
+                <PlusIcon
+                  color={theme.colors.secondaryText}
+                  height={iconSize.md}
+                  width={iconSize.md}
+                />
+              </Container>
+              <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+                  Connect Another Wallet
+                </Text>
+                <Text color="secondaryText" size="xs">
+                  Use a different wallet to pay
+                </Text>
+              </Container>
+            </Container>
+          </Button>
+        </>
+      )}
 
-      <Spacer y="md" />
+      {paymentMethods.includes("card") && (
+        <>
+          <Spacer y="md" />
 
-      {/* Pay with Debit Card */}
-      <Text color="primaryText" size="md">
-        Pay with Fiat
-      </Text>
+          <Text color="primaryText" size="md">
+            Pay with Card
+          </Text>
 
-      <Spacer y="md" />
+          <Spacer y="md" />
 
-      <Button
-        fullWidth
-        onClick={onFiatSelected}
-        style={{
-          backgroundColor: theme.colors.tertiaryBg,
-          border: `1px solid ${theme.colors.borderColor}`,
-          borderRadius: radius.md,
-          height: "auto",
-          padding: `${spacing.sm} ${spacing.md}`,
-          textAlign: "left",
-        }}
-        variant="secondary"
-      >
-        <Container
-          flex="row"
-          gap="md"
-          style={{ alignItems: "center", width: "100%" }}
-        >
-          <CreditCardIcon
-            color={theme.colors.secondaryIconColor}
-            size={iconSize.lg}
-          />
-          <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-            <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-              Pay with Card
-            </Text>
-            <Text color="secondaryText" size="xs">
-              Buy crypto and bridge in one step
-            </Text>
-          </Container>
-        </Container>
-      </Button>
+          <Button
+            fullWidth
+            onClick={onFiatSelected}
+            style={{
+              backgroundColor: theme.colors.tertiaryBg,
+              border: `1px solid ${theme.colors.borderColor}`,
+              borderRadius: radius.md,
+              height: "auto",
+              padding: `${spacing.sm} ${spacing.md}`,
+              textAlign: "left",
+            }}
+            variant="secondary"
+          >
+            <Container
+              flex="row"
+              gap="md"
+              style={{ alignItems: "center", width: "100%" }}
+            >
+              <CreditCardIcon
+                color={theme.colors.secondaryIconColor}
+                size={iconSize.lg}
+              />
+              <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
+                  Pay with Card
+                </Text>
+                <Text color="secondaryText" size="xs">
+                  Buy crypto and bridge in one step
+                </Text>
+              </Container>
+            </Container>
+          </Button>
+        </>
+      )}
     </>
   );
 }

package/src/react/web/ui/PayEmbed.tsx

@@ -238,7 +238,6 @@ export type PayEmbedProps = {
  *   }}
  *  />
  * ```
- *
  * You can also handle ERC20 payments by passing `erc20value` to your transaction:
  *
  * ```tsx
@@ -357,6 +356,13 @@ export function PayEmbed(props: PayEmbedProps) {
         chain={props.payOptions.prefillBuy.chain}
         client={props.client}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
+        paymentMethods={
+          props.payOptions?.buyWithFiat === false
+            ? ["crypto"]
+            : props.payOptions?.buyWithCrypto === false
+              ? ["card"]
+              : ["crypto", "card"]
+        }
         theme={theme}
         title={metadata?.name || "Buy"}
         tokenAddress={
@@ -376,6 +382,11 @@ export function PayEmbed(props: PayEmbedProps) {
         image={metadata?.image}
         name={metadata?.name || "Checkout"}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
+        paymentMethods={
+          props.payOptions?.buyWithFiat === false
+            ? ["crypto"]
+            : ["crypto", "card"]
+        }
         seller={props.payOptions.paymentInfo.sellerAddress as Address}
         theme={theme}
         tokenAddress={
@@ -392,6 +403,11 @@ export function PayEmbed(props: PayEmbedProps) {
         description={metadata?.description}
         image={metadata?.image}
         onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
+        paymentMethods={
+          props.payOptions?.buyWithFiat === false
+            ? ["crypto"]
+            : ["crypto", "card"]
+        }
         theme={theme}
         title={metadata?.name}
         transaction={props.payOptions.transaction}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.3-nightly-6d1d344c48302d45aeb63532c84cc8e79c93e26f-20250628000422";
+export const version = "5.105.4-nightly-1f72396d7fa4748efef179821a7a796b53679bcb-20250629000440";

package/src/wallets/in-app/core/authentication/backend.test.ts

@@ -49,6 +49,7 @@ describe("backendAuthenticate", () => {
     // Mock failed fetch response
     const mockFetch = vi.fn().mockResolvedValue({
       ok: false,
+      text: () => Promise.resolve("Failed to generate backend account"),
     });
 
     // Mock dependencies

package/src/wallets/in-app/core/authentication/backend.ts

@@ -31,7 +31,8 @@ export async function backendAuthenticate(args: {
   });
 
   if (!res.ok) {
-    throw new Error("Failed to generate backend account");
+    const error = await res.text();
+    throw new Error(`Failed to generate backend account: ${error}`);
   }
 
   return (await res.json()) satisfies AuthStoredTokenWithCookieReturnType;

package/src/wallets/in-app/core/authentication/guest.ts

@@ -2,9 +2,8 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { getClientFetch } from "../../../../utils/fetch.js";
 import { stringify } from "../../../../utils/json.js";
 import { randomBytesHex } from "../../../../utils/random.js";
-import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
 import type { Ecosystem } from "../wallet/types.js";
-import { ClientScopedStorage } from "./client-scoped-storage.js";
+import type { ClientScopedStorage } from "./client-scoped-storage.js";
 import { getLoginCallbackUrl } from "./getLoginPath.js";
 import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
 
@@ -14,19 +13,13 @@ import type { AuthStoredTokenWithCookieReturnType } from "./types.js";
  */
 export async function guestAuthenticate(args: {
   client: ThirdwebClient;
-  storage: AsyncStorage;
+  storage: ClientScopedStorage;
   ecosystem?: Ecosystem;
 }): Promise<AuthStoredTokenWithCookieReturnType> {
-  const storage = new ClientScopedStorage({
-    clientId: args.client.clientId,
-    ecosystem: args.ecosystem,
-    storage: args.storage,
-  });
-
-  let sessionId = await storage.getGuestSessionId();
+  let sessionId = await args.storage.getGuestSessionId();
   if (!sessionId) {
     sessionId = randomBytesHex(32);
-    storage.saveGuestSessionId(sessionId);
+    args.storage.saveGuestSessionId(sessionId);
   }
 
   const clientFetch = getClientFetch(args.client, args.ecosystem);

package/src/wallets/in-app/core/eip7702/minimal-account.ts

@@ -24,7 +24,7 @@ import {
 import type { BundlerOptions } from "../../../smart/types.js";
 
 const MINIMAL_ACCOUNT_IMPLEMENTATION_ADDRESS =
-  "0xbaC7e770af15d130Cd72838ff386f14FBF3e9a3D";
+  "0xD6999651Fc0964B9c6B444307a0ab20534a66560";
 
 export const create7702MinimalAccount = (args: {
   client: ThirdwebClient;

package/src/wallets/in-app/native/native-connector.ts

@@ -165,7 +165,7 @@ export class InAppNativeConnector implements InAppConnector {
         return guestAuthenticate({
           client: this.client,
           ecosystem: params.ecosystem,
-          storage: nativeLocalStorage,
+          storage: this.storage,
         });
       }
       case "backend": {

package/src/wallets/in-app/web/lib/in-app-gateway.test.ts

@@ -0,0 +1,126 @@
+import { sendTransaction, signMessage } from "@thirdweb-dev/engine";
+import { beforeAll, describe, expect, it } from "vitest";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { sepolia } from "../../../../chains/chain-definitions/sepolia.js";
+import { createThirdwebClient } from "../../../../client/client.js";
+import { waitForTransactionHash } from "../../../../engine/wait-for-tx-hash.js";
+import {
+  getThirdwebBaseUrl,
+  setThirdwebDomains,
+} from "../../../../utils/domains.js";
+import { getClientFetch } from "../../../../utils/fetch.js";
+import { stringify } from "../../../../utils/json.js";
+import type { Account } from "../../../interfaces/wallet.js";
+import { inAppWallet } from "../in-app.js";
+
+// TODO: productionize this test
+describe
+  .runIf(process.env.TW_SECRET_KEY)
+  .skip("InAppWallet Gateway Tests", () => {
+    let account: Account;
+    let authToken: string | null | undefined;
+    const clientIdFetch = getClientFetch(
+      createThirdwebClient({
+        clientId: TEST_CLIENT.clientId,
+      }),
+    );
+
+    beforeAll(async () => {
+      setThirdwebDomains({
+        bundler: "bundler.thirdweb-dev.com",
+        engineCloud: "engine.thirdweb-dev.com",
+        inAppWallet: "embedded-wallet.thirdweb-dev.com",
+        rpc: "rpc.thirdweb-dev.com",
+      });
+      const wallet = inAppWallet();
+      account = await wallet.connect({
+        client: TEST_CLIENT,
+        strategy: "backend",
+        walletSecret: "test-secret",
+      });
+      authToken = wallet.getAuthToken?.();
+      expect(authToken).toBeDefined();
+    });
+
+    it("should sign a message with backend strategy", async () => {
+      const rawSignature = await account.signMessage({
+        message: "Hello, world!",
+      });
+
+      // sign via api
+      const signResult = await signMessage({
+        baseUrl: getThirdwebBaseUrl("engineCloud"),
+        body: {
+          params: [
+            {
+              format: "text",
+              message: "Hello, world!",
+            },
+          ],
+          signingOptions: {
+            from: account.address,
+            type: "eoa",
+          },
+        },
+        bodySerializer: stringify,
+        fetch: clientIdFetch,
+        headers: {
+          "x-wallet-access-token": authToken,
+        },
+      });
+
+      const signatureResult = signResult.data?.result?.results[0];
+      if (signatureResult && "result" in signatureResult) {
+        expect(signatureResult.result.signature).toEqual(rawSignature);
+      } else {
+        throw new Error(
+          `Failed to sign message: ${stringify(signatureResult?.error) || "Unknown error"}`,
+        );
+      }
+    });
+
+    it("should queue a 4337 transaction", async () => {
+      const body = {
+        executionOptions: {
+          chainId: sepolia.id,
+          from: account.address,
+          type: "auto" as const,
+        },
+        params: [
+          {
+            data: "0x",
+            to: account.address,
+            value: "0",
+          },
+        ],
+      };
+      const result = await sendTransaction({
+        baseUrl: getThirdwebBaseUrl("engineCloud"),
+        body,
+        bodySerializer: stringify,
+        fetch: clientIdFetch,
+        headers: {
+          "x-wallet-access-token": authToken,
+        },
+      });
+      if (result.error) {
+        throw new Error(
+          `Error sending transaction: ${stringify(result.error)}`,
+        );
+      }
+
+      const txId = result.data?.result.transactions[0]?.id;
+      console.log(txId);
+      if (!txId) {
+        throw new Error("No transaction ID found");
+      }
+
+      const tx = await waitForTransactionHash({
+        client: TEST_CLIENT,
+        transactionId: txId,
+      });
+
+      console.log(tx);
+      expect(tx.transactionHash).toBeDefined();
+    });
+  });

package/src/wallets/in-app/web/lib/web-connector.ts

@@ -352,7 +352,7 @@ export class InAppWebConnector implements InAppConnector {
         return guestAuthenticate({
           client: this.client,
           ecosystem: this.ecosystem,
-          storage: webLocalStorage,
+          storage: this.storage,
         });
       }
       case "backend": {