thirdweb 5.38.1-nightly-c82c524e139d7960794e08bca838a1a1b78a3532-20240725000333 → 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343

package/src/extensions/modular/__generated__/SimpleMetadataERC721/read/getExtensionConfig.ts

@@ -0,0 +1,122 @@
+import { readContract } from "../../../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../../../transaction/types.js";
+
+import { decodeAbiParameters } from "viem";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+export const FN_SELECTOR = "0x7c173ecc" as const;
+const FN_INPUTS = [] as const;
+const FN_OUTPUTS = [
+  {
+    name: "config",
+    type: "tuple",
+    internalType: "struct IExtensionConfig.ExtensionConfig",
+    components: [
+      {
+        name: "registerInstallationCallback",
+        type: "bool",
+        internalType: "bool",
+      },
+      {
+        name: "requiredInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "supportedInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "callbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IExtensionConfig.CallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+        ],
+      },
+      {
+        name: "fallbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IExtensionConfig.FallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+          {
+            name: "permissionBits",
+            type: "uint256",
+            internalType: "uint256",
+          },
+        ],
+      },
+    ],
+  },
+] as const;
+
+/**
+ * Checks if the `getExtensionConfig` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `getExtensionConfig` method is supported.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { isGetExtensionConfigSupported } from "thirdweb/extensions/modular";
+ *
+ * const supported = await isGetExtensionConfigSupported(contract);
+ * ```
+ */
+export async function isGetExtensionConfigSupported(
+  contract: ThirdwebContract<any>,
+) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Decodes the result of the getExtensionConfig function call.
+ * @param result - The hexadecimal result to decode.
+ * @returns The decoded result as per the FN_OUTPUTS definition.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { decodeGetExtensionConfigResult } from "thirdweb/extensions/modular";
+ * const result = decodeGetExtensionConfigResult("...");
+ * ```
+ */
+export function decodeGetExtensionConfigResult(result: Hex) {
+  return decodeAbiParameters(FN_OUTPUTS, result)[0];
+}
+
+/**
+ * Calls the "getExtensionConfig" function on the contract.
+ * @param options - The options for the getExtensionConfig function.
+ * @returns The parsed result of the function call.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { getExtensionConfig } from "thirdweb/extensions/modular";
+ *
+ * const result = await getExtensionConfig({
+ *  contract,
+ * });
+ *
+ * ```
+ */
+export async function getExtensionConfig(options: BaseTransactionOptions) {
+  return readContract({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: [],
+  });
+}

package/src/extensions/modular/__generated__/SimpleMetadataERC721/read/onTokenURI.ts

@@ -0,0 +1,134 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import { readContract } from "../../../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../../../transaction/types.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { decodeAbiParameters } from "viem";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "onTokenURI" function.
+ */
+export type OnTokenURIParams = {
+  id: AbiParameterToPrimitiveType<{
+    name: "_id";
+    type: "uint256";
+    internalType: "uint256";
+  }>;
+};
+
+export const FN_SELECTOR = "0xcfc0cb96" as const;
+const FN_INPUTS = [
+  {
+    name: "_id",
+    type: "uint256",
+    internalType: "uint256",
+  },
+] as const;
+const FN_OUTPUTS = [
+  {
+    name: "uri",
+    type: "string",
+    internalType: "string",
+  },
+] as const;
+
+/**
+ * Checks if the `onTokenURI` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `onTokenURI` method is supported.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { isOnTokenURISupported } from "thirdweb/extensions/modular";
+ *
+ * const supported = await isOnTokenURISupported(contract);
+ * ```
+ */
+export async function isOnTokenURISupported(contract: ThirdwebContract<any>) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "onTokenURI" function.
+ * @param options - The options for the onTokenURI function.
+ * @returns The encoded ABI parameters.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { encodeOnTokenURIParams } "thirdweb/extensions/modular";
+ * const result = encodeOnTokenURIParams({
+ *  id: ...,
+ * });
+ * ```
+ */
+export function encodeOnTokenURIParams(options: OnTokenURIParams) {
+  return encodeAbiParameters(FN_INPUTS, [options.id]);
+}
+
+/**
+ * Encodes the "onTokenURI" function into a Hex string with its parameters.
+ * @param options - The options for the onTokenURI function.
+ * @returns The encoded hexadecimal string.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { encodeOnTokenURI } "thirdweb/extensions/modular";
+ * const result = encodeOnTokenURI({
+ *  id: ...,
+ * });
+ * ```
+ */
+export function encodeOnTokenURI(options: OnTokenURIParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeOnTokenURIParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Decodes the result of the onTokenURI function call.
+ * @param result - The hexadecimal result to decode.
+ * @returns The decoded result as per the FN_OUTPUTS definition.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { decodeOnTokenURIResult } from "thirdweb/extensions/modular";
+ * const result = decodeOnTokenURIResult("...");
+ * ```
+ */
+export function decodeOnTokenURIResult(result: Hex) {
+  return decodeAbiParameters(FN_OUTPUTS, result)[0];
+}
+
+/**
+ * Calls the "onTokenURI" function on the contract.
+ * @param options - The options for the onTokenURI function.
+ * @returns The parsed result of the function call.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { onTokenURI } from "thirdweb/extensions/modular";
+ *
+ * const result = await onTokenURI({
+ *  contract,
+ *  id: ...,
+ * });
+ *
+ * ```
+ */
+export async function onTokenURI(
+  options: BaseTransactionOptions<OnTokenURIParams>,
+) {
+  return readContract({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: [options.id],
+  });
+}

package/src/extensions/modular/__generated__/SimpleMetadataERC721/write/setTokenURI.ts

@@ -0,0 +1,155 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { once } from "../../../../../utils/promise/once.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+/**
+ * Represents the parameters for the "setTokenURI" function.
+ */
+export type SetTokenURIParams = WithOverrides<{
+  id: AbiParameterToPrimitiveType<{
+    name: "_id";
+    type: "uint256";
+    internalType: "uint256";
+  }>;
+  uri: AbiParameterToPrimitiveType<{
+    name: "_uri";
+    type: "string";
+    internalType: "string";
+  }>;
+}>;
+
+export const FN_SELECTOR = "0x162094c4" as const;
+const FN_INPUTS = [
+  {
+    name: "_id",
+    type: "uint256",
+    internalType: "uint256",
+  },
+  {
+    name: "_uri",
+    type: "string",
+    internalType: "string",
+  },
+] as const;
+const FN_OUTPUTS = [] as const;
+
+/**
+ * Checks if the `setTokenURI` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `setTokenURI` method is supported.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { isSetTokenURISupported } from "thirdweb/extensions/modular";
+ *
+ * const supported = await isSetTokenURISupported(contract);
+ * ```
+ */
+export async function isSetTokenURISupported(contract: ThirdwebContract<any>) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "setTokenURI" function.
+ * @param options - The options for the setTokenURI function.
+ * @returns The encoded ABI parameters.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { encodeSetTokenURIParams } "thirdweb/extensions/modular";
+ * const result = encodeSetTokenURIParams({
+ *  id: ...,
+ *  uri: ...,
+ * });
+ * ```
+ */
+export function encodeSetTokenURIParams(options: SetTokenURIParams) {
+  return encodeAbiParameters(FN_INPUTS, [options.id, options.uri]);
+}
+
+/**
+ * Encodes the "setTokenURI" function into a Hex string with its parameters.
+ * @param options - The options for the setTokenURI function.
+ * @returns The encoded hexadecimal string.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { encodeSetTokenURI } "thirdweb/extensions/modular";
+ * const result = encodeSetTokenURI({
+ *  id: ...,
+ *  uri: ...,
+ * });
+ * ```
+ */
+export function encodeSetTokenURI(options: SetTokenURIParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeSetTokenURIParams(options).slice(
+      2,
+    )) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "setTokenURI" function on the contract.
+ * @param options - The options for the "setTokenURI" function.
+ * @returns A prepared transaction object.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { setTokenURI } from "thirdweb/extensions/modular";
+ *
+ * const transaction = setTokenURI({
+ *  contract,
+ *  id: ...,
+ *  uri: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * ...
+ *
+ * ```
+ */
+export function setTokenURI(
+  options: BaseTransactionOptions<
+    | SetTokenURIParams
+    | {
+        asyncParams: () => Promise<SetTokenURIParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [resolvedOptions.id, resolvedOptions.uri] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+  });
+}

package/src/gas/fee-data.ts

@@ -107,7 +107,10 @@ export async function getDefaultGasOverrides(
   // if chain is in the force gas price list, always use gas price
   if (!FORCE_GAS_PRICE_CHAIN_IDS.includes(chain.id)) {
     const feeData = await getDynamicFeeData(client, chain);
-    if (feeData.maxFeePerGas && feeData.maxPriorityFeePerGas) {
+    if (
+      feeData.maxFeePerGas !== null &&
+      feeData.maxPriorityFeePerGas !== null
+    ) {
       return {
         maxFeePerGas: feeData.maxFeePerGas,
         maxPriorityFeePerGas: feeData.maxPriorityFeePerGas,
@@ -153,12 +156,12 @@ async function getDynamicFeeData(
   if (chainId === 80002 || chainId === 137) {
     // for polygon, get fee data from gas station
     maxPriorityFeePerGas_ = await getPolygonGasPriorityFee(chainId);
-  } else if (maxPriorityFeePerGas) {
+  } else if (maxPriorityFeePerGas !== null) {
     // prioritize fee from eth_maxPriorityFeePerGas
     maxPriorityFeePerGas_ = maxPriorityFeePerGas;
   }
 
-  if (!maxPriorityFeePerGas_) {
+  if (maxPriorityFeePerGas_ == null) {
     // chain does not support eip-1559, return null for both
     return { maxFeePerGas: null, maxPriorityFeePerGas: null };
   }

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { AsyncStorage } from "../../../../utils/storage/AsyncStorage.js";
+import { getUrlToken } from "../../../../wallets/in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type ConnectionManager,
@@ -7,6 +8,7 @@ import {
   getStoredActiveWalletId,
   getStoredConnectedWalletIds,
 } from "../../../../wallets/manager/index.js";
+import { setLastAuthProvider } from "../../utils/storage.js";
 import { timeoutPromise } from "../../utils/timeoutPromise.js";
 import type { AutoConnectProps } from "../connection/types.js";
 import { useConnectCore } from "./useConnect.js";
@@ -32,12 +34,23 @@ export function useAutoConnectCore(
   const autoConnect = async (): Promise<boolean> => {
     let autoConnected = false;
     isAutoConnecting.setValue(true);
-    const [lastConnectedWalletIds, lastActiveWalletId] = await Promise.all([
+    let [lastConnectedWalletIds, lastActiveWalletId] = await Promise.all([
       getStoredConnectedWalletIds(storage),
       getStoredActiveWalletId(storage),
     ]);
 
-    // if no wallets were last connected
+    const { authResult, walletId, authProvider } = getUrlToken();
+    if (authResult && walletId) {
+      lastActiveWalletId = walletId;
+      lastConnectedWalletIds = lastConnectedWalletIds?.includes(walletId)
+        ? lastConnectedWalletIds
+        : [walletId, ...(lastConnectedWalletIds || [])];
+    }
+    if (authProvider) {
+      await setLastAuthProvider(authProvider, storage);
+    }
+
+    // if no wallets were last connected or we didn't receive an auth token
     if (!lastConnectedWalletIds) {
       return autoConnected;
     }
@@ -48,6 +61,7 @@ export function useAutoConnectCore(
       return wallet.autoConnect({
         client: props.client,
         chain: lastConnectedChain ?? undefined,
+        authResult,
       });
     }
 
@@ -61,7 +75,7 @@ export function useAutoConnectCore(
         setConnectionStatus("connecting"); // only set connecting status if we are connecting the last active EOA
         await timeoutPromise(handleWalletConnection(activeWallet), {
           ms: timeout,
-          message: `AutoConnect timeout : ${timeout}ms limit exceeded.`,
+          message: `AutoConnect timeout: ${timeout}ms limit exceeded.`,
         });
 
         // connected wallet could be activeWallet or smart wallet

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -210,7 +210,7 @@ const ConnectEmbedContent = (props: {
     welcomeScreen: undefined,
     wallets: props.wallets,
   });
-  const { setScreen, initialScreen } = screenSetup;
+  const { setScreen, initialScreen, screen } = screenSetup;
   const activeWallet = useActiveWallet();
   const siweAuth = useSiweAuth(activeWallet, props.auth);
   const activeAccount = useActiveAccount();
@@ -219,11 +219,17 @@ const ConnectEmbedContent = (props: {
 
   let content = null;
 
+  // if sign in is required but connect embed is showing the initial screen - change to sign in screen
   useEffect(() => {
-    if (siweAuth.requiresAuth && !siweAuth.isLoggedIn && activeAccount) {
+    if (
+      siweAuth.requiresAuth &&
+      !siweAuth.isLoggedIn &&
+      activeAccount &&
+      screen === initialScreen
+    ) {
       setScreen(reservedScreens.signIn);
     }
-  }, [siweAuth, setScreen, activeAccount]);
+  }, [siweAuth, setScreen, activeAccount, screen, initialScreen]);
 
   const modalSize = !canFitWideModal()
     ? "compact"

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/ClaimButton.test.tsx

@@ -9,7 +9,6 @@ import { getContract } from "../../../../../../contract/contract.js";
 import { deployERC20Contract } from "../../../../../../extensions/prebuilts/deploy-erc20.js";
 import { deployERC721Contract } from "../../../../../../extensions/prebuilts/deploy-erc721.js";
 import { deployERC1155Contract } from "../../../../../../extensions/prebuilts/deploy-erc1155.js";
-import type { Hex } from "../../../../../../utils/encoding/helpers/is-hex.js";
 import {
   ClaimButton,
   getERC20ClaimTo,
@@ -77,7 +76,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("ClaimButton", () => {
       <ClaimButton
         client={client}
         chain={chain}
-        contractAddress={address as Hex}
+        contractAddress={address}
         claimParams={{ quantity: 1n, type: "ERC721" }}
       >
         Claim
@@ -151,7 +150,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("ClaimButton", () => {
       <ClaimButton
         client={client}
         chain={chain}
-        contractAddress={address as Hex}
+        contractAddress={address}
         claimParams={{ quantity: 1n, type: "ERC1155", tokenId: 0n }}
       >
         Claim
@@ -222,7 +221,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("ClaimButton", () => {
       <ClaimButton
         client={client}
         chain={chain}
-        contractAddress={address as Hex}
+        contractAddress={address}
         claimParams={{ quantity: "100", type: "ERC20" }}
       >
         Claim
@@ -259,7 +258,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("ClaimButton", () => {
       <ClaimButton
         client={client}
         chain={chain}
-        contractAddress={address as Hex}
+        contractAddress={address}
         claimParams={{ quantityInWei: 1000000n, type: "ERC20" }}
       >
         Claim

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -87,6 +87,7 @@ export function ClaimButton(props: ClaimButtonProps) {
     chain,
   });
   const account = useActiveAccount();
+  // TODO (pay): fetch nft metadata and set it as the payOptions metadata
   return (
     <TransactionButton
       transaction={async () =>

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -7,6 +7,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getEcosystemWalletAuthOptions } from "../../../../wallets/ecosystem/get-ecosystem-wallet-auth-options.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type AuthOption,
@@ -37,7 +38,7 @@ import { InputSelectionUI } from "../in-app/InputSelectionUI.js";
 import { validateEmail } from "../in-app/validateEmail.js";
 import { LoadingScreen } from "./LoadingScreen.js";
 import type { InAppWalletLocale } from "./locale/types.js";
-import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { openOauthSignInWindow } from "./oauthSignIn.js";
 
 export type ConnectWalletSelectUIState =
   | undefined
@@ -164,6 +165,19 @@ export const ConnectWalletSocialOptions = (
 
   // Need to trigger login on button click to avoid popup from being blocked
   const handleSocialLogin = async (strategy: SocialAuthOption) => {
+    const walletConfig = wallet.getConfig();
+    if (
+      walletConfig &&
+      "auth" in walletConfig &&
+      walletConfig?.auth?.mode === "redirect"
+    ) {
+      return loginWithOauthRedirect({
+        authOption: strategy,
+        client: props.client,
+        ecosystem: ecosystemInfo,
+      });
+    }
+
     try {
       const socialLoginWindow = openOauthSignInWindow({
         authOption: strategy,
@@ -205,10 +219,10 @@ export const ConnectWalletSocialOptions = (
 
       props.select(); // show Connect UI
 
-      // Note: do not call done() here, it will be called InAppWalletSocialLogin component
-      // we simply trigger the connect and save promise here - its resolution is handled in InAppWalletSocialLogin
+      // Note: do not call done() here, it will be called SocialLogin component
+      // we simply trigger the connect and save promise here - its resolution is handled in SocialLogin
     } catch (e) {
-      console.error(`Error sign in with ${strategy}`, e);
+      console.error(`Error signing in with ${strategy}`, e);
     }
   };
 

package/src/react/web/wallets/shared/SocialLogin.tsx

@@ -5,6 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
+import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
@@ -15,7 +16,7 @@ import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
 import type { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
 import type { InAppWalletLocale } from "./locale/types.js";
-import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { openOauthSignInWindow } from "./oauthSignIn.js";
 
 /**
  * @internal
@@ -42,6 +43,24 @@ export function SocialLogin(props: {
   );
 
   const handleSocialLogin = async () => {
+    const walletConfig = wallet.getConfig();
+    if (
+      walletConfig &&
+      "auth" in walletConfig &&
+      walletConfig?.auth?.mode === "redirect"
+    ) {
+      return loginWithOauthRedirect({
+        authOption: props.socialAuth,
+        client: props.client,
+        ecosystem: isEcosystemWallet(wallet)
+          ? {
+              id: wallet.id,
+              partnerId: wallet.getConfig()?.partnerId,
+            }
+          : undefined,
+      });
+    }
+
     try {
       const socialWindow = openOauthSignInWindow({
         authOption: props.socialAuth,

package/src/react/web/wallets/shared/{openOauthSignInWindow.ts → oauthSignIn.ts}

@@ -41,7 +41,6 @@ function getOauthLoginPath(
 }
 
 /**
- *
  * @internal
  */
 export function openOauthSignInWindow({
@@ -137,7 +136,7 @@ const spinnerWindowHtml = `
   @keyframes spin {
     100% {
       transform: rotate(360deg);
-    }
+        }
   }
 </style>
 `;