thirdweb 5.30.0-nightly-d974db533a5a2e241df7743b201d730c90cda0d7-20240627000603 → 5.30.0-nightly-f9f5250b58a756e1abe6e89de7a7965caaeaa8db-20240627172339

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

@@ -1,9 +1,11 @@
 "use client";
 import styled from "@emotion/styled";
-import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 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 type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type {
@@ -31,6 +33,7 @@ import { Button } from "../../ui/components/buttons.js";
 import { InputSelectionUI } from "../in-app/InputSelectionUI.js";
 import { socialIcons } from "../in-app/socialIcons.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 { setLastAuthProvider } from "./storage.js";
@@ -87,15 +90,34 @@ export const ConnectWalletSocialOptions = (
     apple: locale.signInWithApple,
   };
 
-  const authOptions = defaultAuthOptions; // TODO: Fetch these from the backend
-  const passKeyEnabled = authOptions.includes("passkey");
+  const { data: ecosystemAuthOptions, isLoading } = useQuery({
+    queryKey: ["auth-options", wallet.id],
+    queryFn: async () => {
+      if (isEcosystemWallet(wallet)) {
+        return getEcosystemWalletAuthOptions(wallet.id);
+      }
+      return null;
+    },
+    enabled: isEcosystemWallet(wallet),
+    retry: false,
+  });
+  const authOptions = isEcosystemWallet(wallet)
+    ? ecosystemAuthOptions ?? defaultAuthOptions
+    : wallet.getConfig()?.auth?.options ?? defaultAuthOptions;
 
   const emailIndex = authOptions.indexOf("email");
   const isEmailEnabled = emailIndex !== -1;
   const phoneIndex = authOptions.indexOf("phone");
   const isPhoneEnabled = phoneIndex !== -1;
 
-  const [inputMode, setInputMode] = useState<"email" | "phone" | "none">(() => {
+  const [manualInputMode, setManualInputMode] = useState<
+    "email" | "phone" | "none" | null
+  >(null);
+
+  const inputMode = useMemo(() => {
+    if (manualInputMode) {
+      return manualInputMode;
+    }
     if (isEmailEnabled && isPhoneEnabled) {
       return emailIndex < phoneIndex ? "email" : "phone";
     }
@@ -106,7 +128,13 @@ export const ConnectWalletSocialOptions = (
       return "phone";
     }
     return "none";
-  });
+  }, [isEmailEnabled, isPhoneEnabled, emailIndex, phoneIndex, manualInputMode]);
+
+  if (isEcosystemWallet(wallet) && isLoading) {
+    return <LoadingScreen />;
+  }
+
+  const passKeyEnabled = authOptions.includes("passkey");
 
   const placeholder =
     inputMode === "email" ? locale.emailPlaceholder : locale.phonePlaceholder;
@@ -255,7 +283,7 @@ export const ConnectWalletSocialOptions = (
               client={props.client}
               icon={emailIcon}
               onClick={() => {
-                setInputMode("email");
+                setManualInputMode("email");
               }}
               // TODO locale
               title={"Email address"}
@@ -295,7 +323,7 @@ export const ConnectWalletSocialOptions = (
               client={props.client}
               icon={phoneIcon}
               onClick={() => {
-                setInputMode("phone");
+                setManualInputMode("phone");
               }}
               // TODO locale
               title={"Phone number"}

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

@@ -51,31 +51,34 @@ export const WalletConnectConnection: React.FC<{
           onDisplayUri(uri) {
             const preferNative =
               walletInfo.mobile.native || walletInfo.mobile.universal;
-
-            if (isMobile()) {
-              if (isAndroid()) {
-                if (preferNative) {
-                  openWindow(
-                    formatWalletConnectUrl(preferNative, uri).redirect,
-                  );
-                }
-              } else if (isIOS()) {
-                if (preferNative) {
-                  openWindow(
-                    formatWalletConnectUrl(preferNative, uri).redirect,
-                  );
+            try {
+              if (isMobile()) {
+                if (isAndroid()) {
+                  if (preferNative) {
+                    openWindow(
+                      formatWalletConnectUrl(preferNative, uri).redirect,
+                    );
+                  }
+                } else if (isIOS()) {
+                  if (preferNative) {
+                    openWindow(
+                      formatWalletConnectUrl(preferNative, uri).redirect,
+                    );
+                  }
+                } else {
+                  const preferUniversal =
+                    walletInfo.mobile.universal || walletInfo.mobile.native;
+                  if (preferUniversal) {
+                    openWindow(
+                      formatWalletConnectUrl(preferUniversal, uri).redirect,
+                    );
+                  }
                 }
               } else {
-                const preferUniversal =
-                  walletInfo.mobile.universal || walletInfo.mobile.native;
-                if (preferUniversal) {
-                  openWindow(
-                    formatWalletConnectUrl(preferUniversal, uri).redirect,
-                  );
-                }
+                setQrCodeUri(uri);
               }
-            } else {
-              setQrCodeUri(uri);
+            } catch {
+              setErrorConnecting(true);
             }
           },
           optionalChains: props.chains,

package/src/utils/web/openWindow.ts

@@ -2,24 +2,29 @@
  * @internal
  */
 export function openWindow(uri: string) {
-  if (uri.startsWith("http")) {
-    // taken from for https://github.com/rainbow-me/rainbowkit/
+  const isInsideIframe = window !== window.top;
+  if (isInsideIframe) {
+    window.open(uri);
+  } else {
+    if (uri.startsWith("http")) {
+      // taken from for https://github.com/rainbow-me/rainbowkit/
 
-    // Using 'window.open' causes issues on iOS in non-Safari browsers and
-    // WebViews where a blank tab is left behind after connecting.
-    // This is especially bad in some WebView scenarios (e.g. following a
-    // link from Twitter) where the user doesn't have any mechanism for
-    // closing the blank tab.
-    // For whatever reason, links with a target of "_blank" don't suffer
-    // from this problem, and programmatically clicking a detached link
-    // element with the same attributes also avoids the issue.
+      // Using 'window.open' causes issues on iOS in non-Safari browsers and
+      // WebViews where a blank tab is left behind after connecting.
+      // This is especially bad in some WebView scenarios (e.g. following a
+      // link from Twitter) where the user doesn't have any mechanism for
+      // closing the blank tab.
+      // For whatever reason, links with a target of "_blank" don't suffer
+      // from this problem, and programmatically clicking a detached link
+      // element with the same attributes also avoids the issue.
 
-    const link = document.createElement("a");
-    link.href = uri;
-    link.target = "_blank";
-    link.rel = "noreferrer noopener";
-    link.click();
-  } else {
-    window.location.href = uri;
+      const link = document.createElement("a");
+      link.href = uri;
+      link.target = "_blank";
+      link.rel = "noreferrer noopener";
+      link.click();
+    } else {
+      window.location.href = uri;
+    }
   }
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.30.0-nightly-d974db533a5a2e241df7743b201d730c90cda0d7-20240627000603";
+export const version = "5.30.0-nightly-f9f5250b58a756e1abe6e89de7a7965caaeaa8db-20240627172339";

package/src/wallets/ecosystem/get-ecosystem-partner-permissions.ts

@@ -6,15 +6,15 @@ export const getEcosystemPartnerPermissions = async (
   ecosystemId: EcosystemWalletId,
   partnerId?: string,
 ): Promise<EcosystemPermssions> => {
-  const headers = new Headers();
-  headers.set("x-ecosystem-id", ecosystemId);
-  headers.set("x-ecosystem-partner-id", partnerId || "");
   const res = await fetch(
     `${getThirdwebBaseUrl(
       "inAppWallet",
     )}/api/2024-05-05/ecosystem-wallet/${ecosystemId}/partner/${partnerId}`,
     {
-      headers,
+      headers: {
+        "x-ecosystem-id": ecosystemId,
+        "x-ecosystem-partner-id": partnerId || "",
+      },
     },
   );
 

package/src/wallets/ecosystem/get-ecosystem-wallet-auth-options.ts

@@ -0,0 +1,33 @@
+import { getThirdwebBaseUrl } from "../../utils/domains.js";
+import type { AuthOption } from "../types.js";
+import type { EcosystemWalletId } from "../wallet-types.js";
+
+/**
+ * Retrieves the specified auth options for a given ecosystem wallet, if any.
+ * @param walletId The ecosystem wallet ID.
+ * @returns {AuthOption[] | undefined} The auth options for the ecosystem wallet.
+ * @internal
+ */
+export async function getEcosystemWalletAuthOptions(
+  walletId: EcosystemWalletId,
+): Promise<AuthOption[] | undefined> {
+  const res = await fetch(
+    `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/ecosystem-wallet`,
+    {
+      headers: {
+        "x-ecosystem-id": walletId,
+      },
+    },
+  );
+
+  const data = await res.json();
+
+  if (!data || data.code === "UNAUTHORIZED") {
+    throw new Error(
+      data.message ||
+        `Could not find ecosystem wallet with id ${walletId}, please check your ecosystem wallet configuration.`,
+    );
+  }
+
+  return data.authOptions ?? undefined;
+}

package/src/wallets/ecosystem/get-ecosystem-wallet-info.ts

@@ -14,12 +14,12 @@ import type { EcosystemWalletId } from "../wallet-types.js";
 export async function getEcosystemWalletInfo(
   walletId: EcosystemWalletId,
 ): Promise<Prettify<WalletInfo>> {
-  const headers = new Headers();
-  headers.set("x-ecosystem-id", walletId);
   const res = await fetch(
     `${getThirdwebBaseUrl("inAppWallet")}/api/2024-05-05/ecosystem-wallet`,
     {
-      headers,
+      headers: {
+        "x-ecosystem-id": walletId,
+      },
     },
   );
 

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

@@ -7,7 +7,6 @@ import { getRpcClient } from "../../../../rpc/rpc.js";
 import { type Hex, hexToString } from "../../../../utils/encoding/hex.js";
 import { parseTypedData } from "../../../../utils/signatures/helpers/parseTypedData.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
-import { uint8ArrayToString } from "../../../../utils/uint8-array.js";
 import { getEcosystemPartnerPermissions } from "../../../ecosystem/get-ecosystem-partner-permissions.js";
 import type {
   Account,
@@ -279,7 +278,7 @@ export class IFrameWallet {
             return message;
           }
           if (message.raw instanceof Uint8Array) {
-            return uint8ArrayToString(message.raw);
+            return message.raw;
           }
           return hexToString(message.raw);
         })();
@@ -287,7 +286,8 @@ export class IFrameWallet {
         const { signedMessage } = await querier.call<SignMessageReturnType>({
           procedureName: "signMessage",
           params: {
-            message: messageDecoded, // always a string
+            // biome-ignore lint/suspicious/noExplicitAny: ethers tx transformation
+            message: messageDecoded as any, // needs bytes or string
             partnerId,
             chainId: 1, // TODO check if we need this
           },