thirdweb 5.58.0-nightly-3229e1f03c3cbb62ddc8dccf22ad8a8feb0a95f0-20240920000335 → 5.58.0

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

@@ -135,6 +135,27 @@ export const ConnectWalletSocialOptions = (
   const isEmailEnabled = emailIndex !== -1;
   const phoneIndex = authOptions.indexOf("phone");
   const isPhoneEnabled = phoneIndex !== -1;
+  const socialLogins: SocialAuthOption[] = authOptions.filter((o) =>
+    socialAuthOptions.includes(o as SocialAuthOption),
+  ) as SocialAuthOption[];
+
+  const columnCount = useMemo(() => {
+    switch (socialLogins.length) {
+      case 7:
+        return 4;
+      case 6:
+        return 4;
+      default:
+        return 5;
+    }
+  }, [socialLogins.length]);
+
+  const socialLoginColumns: SocialAuthOption[][] = useMemo(() => {
+    return Array.from(
+      { length: Math.ceil(socialLogins.length / columnCount) },
+      (_, i) => socialLogins.slice(i * columnCount, (i + 1) * columnCount),
+    );
+  }, [socialLogins, columnCount]);
 
   const [manualInputMode, setManualInputMode] = useState<
     "email" | "phone" | "none" | null
@@ -175,10 +196,6 @@ export const ConnectWalletSocialOptions = (
     type = "tel";
   }
 
-  const socialLogins = authOptions.filter((o) =>
-    socialAuthOptions.includes(o as SocialAuthOption),
-  );
-
   const hasSocialLogins = socialLogins.length > 0;
   const ecosystemInfo = isEcosystemWallet(wallet)
     ? {
@@ -315,49 +332,46 @@ export const ConnectWalletSocialOptions = (
       )}
       {/* Social Login */}
       {hasSocialLogins && (
-        <Container
-          flex="row"
-          center="x"
-          gap={socialLogins.length > 4 ? "xs" : "sm"}
-          style={{
-            justifyContent: "space-between",
-            display: "grid",
-            gridTemplateColumns: `repeat(${socialLogins.length}, 1fr)`,
-          }}
-        >
-          {socialLogins.map((loginMethod) => {
-            const imgIconSize = (() => {
-              if (!showOnlyIcons) {
-                return iconSize.md;
-              }
-              if (socialLogins.length > 4) {
-                return iconSize.md;
-              }
-              return iconSize.lg;
-            })();
-
-            return (
-              <SocialButton
-                aria-label={`Login with ${loginMethod}`}
-                data-variant={showOnlyIcons ? "icon" : "full"}
-                key={loginMethod}
-                variant={"outline"}
-                disabled={props.disabled}
-                onClick={() => {
-                  handleSocialLogin(loginMethod as SocialAuthOption);
-                }}
-              >
-                <Img
-                  src={socialIcons[loginMethod as SocialAuthOption]}
-                  width={imgIconSize}
-                  height={imgIconSize}
-                  client={props.client}
-                />
-                {!showOnlyIcons &&
-                  `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
-              </SocialButton>
-            );
-          })}
+        <Container flex="column" gap={socialLogins.length > 4 ? "xs" : "sm"}>
+          {socialLoginColumns.map((column) => (
+            <SocialButtonRow key={column[0]}>
+              {column.map((loginMethod) => {
+                const imgIconSize = (() => {
+                  if (!showOnlyIcons) {
+                    return iconSize.md;
+                  }
+                  if (socialLogins.length > 4) {
+                    return iconSize.md;
+                  }
+                  return iconSize.lg;
+                })();
+                return (
+                  <SocialButton
+                    aria-label={`Login with ${loginMethod}`}
+                    data-variant={showOnlyIcons ? "icon" : "full"}
+                    key={loginMethod}
+                    variant={"outline"}
+                    disabled={props.disabled}
+                    onClick={() => {
+                      handleSocialLogin(loginMethod as SocialAuthOption);
+                    }}
+                    style={{
+                      flexGrow: socialLogins.length < 7 ? 1 : 0,
+                    }}
+                  >
+                    <Img
+                      src={socialIcons[loginMethod as SocialAuthOption]}
+                      width={imgIconSize}
+                      height={imgIconSize}
+                      client={props.client}
+                    />
+                    {!showOnlyIcons &&
+                      `${socialLogins.length === 1 ? "Continue with " : ""}${loginMethodsLabel[loginMethod as SocialAuthOption]}`}
+                  </SocialButton>
+                );
+              })}
+            </SocialButtonRow>
+          ))}
         </Container>
       )}
 
@@ -476,8 +490,27 @@ export const ConnectWalletSocialOptions = (
   );
 };
 
+const SocialButtonRow = (props: { children: React.ReactNode[] }) => (
+  <Container
+    flex="row"
+    center="x"
+    gap={props.children.length > 4 ? "xs" : "sm"}
+    style={{
+      justifyContent: "center",
+      display: "flex",
+      ...{
+        "& > *": {
+          flexBasis: `${100 / props.children.length}%`,
+          maxWidth: `${100 / props.children.length}%`,
+        },
+      },
+    }}
+  >
+    {props.children}
+  </Container>
+);
+
 const SocialButton = /* @__PURE__ */ styled(Button)({
-  flexGrow: 1,
   "&[data-variant='full']": {
     display: "flex",
     justifyContent: "flex-start",

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.58.0-nightly-3229e1f03c3cbb62ddc8dccf22ad8a8feb0a95f0-20240920000335";
+export const version = "5.58.0";

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

@@ -243,4 +243,5 @@ export type GetUser =
 
 export type GetAuthenticatedUserParams = {
   client: ThirdwebClient;
+  ecosystem?: Ecosystem;
 };

package/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -17,10 +17,7 @@ import type {
 } from "../authentication/types.js";
 import type { InAppConnector } from "../interfaces/connector.js";
 
-const connectorCache = new WeakMap<
-  { client: ThirdwebClient; ecosystem?: Ecosystem },
-  InAppConnector
->();
+const connectorCache = new Map<string, InAppConnector>();
 
 /**
  * @internal
@@ -30,7 +27,7 @@ export async function getOrCreateInAppWalletConnector(
   connectorFactory: (client: ThirdwebClient) => Promise<InAppConnector>,
   ecosystem?: Ecosystem,
 ) {
-  const key = { client, ecosystem };
+  const key = JSON.stringify({ clientId: client.clientId, ecosystem });
   if (connectorCache.has(key)) {
     return connectorCache.get(key) as InAppConnector;
   }

package/src/wallets/in-app/web/lib/actions/get-enclave-user-status.ts

@@ -9,7 +9,7 @@ import type { Ecosystem } from "../../types.js";
  *
  * @internal
  */
-export async function getEnclaveUserStatus({
+export async function getUserStatus({
   authToken,
   client,
   ecosystem,

package/src/wallets/in-app/web/lib/auth/iframe-auth.ts

@@ -11,7 +11,7 @@ import type {
 import type { ClientIdWithQuerierType, Ecosystem } from "../../types.js";
 import type { InAppWalletIframeCommunicator } from "../../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 import { generateWallet } from "../actions/generate-wallet.enclave.js";
-import { getEnclaveUserStatus } from "../actions/get-enclave-user-status.js";
+import { getUserStatus } from "../actions/get-enclave-user-status.js";
 import { BaseLogin } from "./base-login.js";
 
 export type AuthQuerierTypes = {
@@ -28,6 +28,9 @@ export type AuthQuerierTypes = {
     storedToken: AuthStoredTokenWithCookieReturnType["storedToken"];
     recoveryCode?: string;
   };
+  migrateFromShardToEnclave: {
+    storedToken: AuthStoredTokenWithCookieReturnType["storedToken"];
+  };
 };
 
 /**
@@ -108,7 +111,7 @@ export class Auth {
   ): Promise<AuthLoginReturnType> {
     await this.preLogin();
 
-    const user = await getEnclaveUserStatus({
+    const user = await getUserStatus({
       authToken: authToken.storedToken.cookieString,
       client: this.client,
       ecosystem: this.ecosystem,

package/src/wallets/in-app/web/lib/auth/index.ts

@@ -51,8 +51,8 @@ async function getInAppWalletConnector(
 export async function getAuthenticatedUser(
   options: GetAuthenticatedUserParams,
 ) {
-  const { client } = options;
-  const connector = await getInAppWalletConnector(client);
+  const { client, ecosystem } = options;
+  const connector = await getInAppWalletConnector(client, ecosystem);
   const user = await connector.getUser();
   switch (user.status) {
     case UserWalletStatus.LOGGED_IN_WALLET_INITIALIZED: {

package/src/wallets/in-app/web/lib/enclave-wallet.ts

@@ -20,7 +20,7 @@ import {
   type WalletAddressObjectType,
 } from "../../core/authentication/types.js";
 import type { Ecosystem } from "../types.js";
-import { getEnclaveUserStatus } from "./actions/get-enclave-user-status.js";
+import { getUserStatus } from "./actions/get-enclave-user-status.js";
 import { signMessage as signEnclaveMessage } from "./actions/sign-message.enclave.js";
 import { signTransaction as signEnclaveTransaction } from "./actions/sign-transaction.enclave.js";
 import { signTypedData as signEnclaveTypedData } from "./actions/sign-typed-data.enclave.js";
@@ -96,11 +96,12 @@ export class EnclaveWallet implements IWebWallet {
       return { status: UserWalletStatus.LOGGED_OUT };
     }
 
-    const userStatus = await getEnclaveUserStatus({
+    const userStatus = await getUserStatus({
       authToken: token,
       client: this.client,
       ecosystem: this.ecosystem,
     });
+
     if (!userStatus) {
       return { status: UserWalletStatus.LOGGED_OUT };
     }
@@ -108,10 +109,10 @@ export class EnclaveWallet implements IWebWallet {
 
     const authDetails = {
       email: userStatus.linkedAccounts.find(
-        (account) => account.type === "email",
+        (account) => account.details.email !== undefined,
       )?.details.email,
       phoneNumber: userStatus.linkedAccounts.find(
-        (account) => account.type === "phone",
+        (account) => account.details.phone !== undefined,
       )?.details.phone,
       userWalletId: userStatus.id || "",
       recoveryShareManagement: RecoveryShareManagement.ENCLAVE,

package/src/wallets/in-app/web/lib/iframe-wallet.ts

@@ -10,7 +10,6 @@ import { type Hex, hexToString } from "../../../../utils/encoding/hex.js";
 import { parseTypedData } from "../../../../utils/signatures/helpers/parseTypedData.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
-import { getEcosystemPartnerPermissions } from "../../../ecosystem/get-ecosystem-partner-permissions.js";
 import type {
   Account,
   SendTransactionOption,
@@ -199,14 +198,6 @@ export class IFrameWallet implements IWebWallet {
       .walletManagerQuerier as unknown as InAppWalletIframeCommunicator<SignerProcedureTypes>;
     const client = this.client;
     const partnerId = this.ecosystem?.partnerId;
-    const isEcosystem = !!this.ecosystem;
-
-    const permissions = this.ecosystem?.partnerId
-      ? await getEcosystemPartnerPermissions(
-          this.ecosystem.id,
-          this.ecosystem?.partnerId,
-        )
-      : undefined;
 
     const { address } = await querier.call<GetAddressReturnType>({
       procedureName: "getAddress",
@@ -244,10 +235,6 @@ export class IFrameWallet implements IWebWallet {
             partnerId,
             rpcEndpoint: `https://${tx.chainId}.${RPC_URL}`, // TODO (ew) shouldnt be needed
           },
-          // Can hide the iframe if the partner has full control (no user approvals)
-          showIframe: permissions?.permissions.includes("FULL_CONTROL_V1")
-            ? false
-            : isEcosystem,
         });
       return signedTransaction as Hex;
     };
@@ -296,10 +283,6 @@ export class IFrameWallet implements IWebWallet {
             partnerId,
             chainId: 1, // TODO check if we need this
           },
-          // Can hide the iframe if the partner has full control (no user approvals)
-          showIframe: permissions?.permissions.includes("FULL_CONTROL_V1")
-            ? false
-            : isEcosystem,
         });
         return signedMessage as Hex;
       },
@@ -339,10 +322,6 @@ export class IFrameWallet implements IWebWallet {
               partnerId,
               rpcEndpoint: `https://${chainId}.${RPC_URL}`, // TODO (ew) shouldnt be needed
             },
-            // Can hide the iframe if the partner has full control (no user approvals)
-            showIframe: permissions?.permissions.includes("FULL_CONTROL_V1")
-              ? false
-              : isEcosystem,
           });
         return signedTypedData as Hex;
       },

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

@@ -20,7 +20,7 @@ import {
   UserWalletStatus,
 } from "../../core/authentication/types.js";
 import type { InAppConnector } from "../../core/interfaces/connector.js";
-import { getEnclaveUserStatus } from "../lib/actions/get-enclave-user-status.js";
+import { getUserStatus } from "../lib/actions/get-enclave-user-status.js";
 import type { Ecosystem, InAppWalletConstructorType } from "../types.js";
 import { InAppWalletIframeCommunicator } from "../utils/iFrameCommunication/InAppWalletIframeCommunicator.js";
 import { Auth, type AuthQuerierTypes } from "./auth/iframe-auth.js";
@@ -85,6 +85,23 @@ export class InAppWebConnector implements InAppConnector {
       ecosystem,
       onAuthSuccess: async (authResult) => {
         onAuthSuccess?.(authResult);
+
+        if (
+          this.ecosystem &&
+          authResult.storedToken.authDetails.walletType === "sharded"
+        ) {
+          // If this is an existing sharded ecosystem wallet, we'll need to migrate
+          const result = await this.querier.call<boolean>({
+            procedureName: "migrateFromShardToEnclave",
+            params: {
+              storedToken: authResult.storedToken,
+            },
+          });
+          if (!result) {
+            throw new Error("Failed to migrate from sharded to enclave wallet");
+          }
+        }
+
         await this.initializeWallet(authResult.storedToken.cookieString);
 
         if (!this.wallet) {
@@ -135,7 +152,7 @@ export class InAppWebConnector implements InAppConnector {
       );
     }
 
-    const user = await getEnclaveUserStatus({
+    const user = await getUserStatus({
       authToken: authToken || (storedAuthToken as string),
       client: this.client,
       ecosystem: this.ecosystem,
@@ -148,6 +165,7 @@ export class InAppWebConnector implements InAppConnector {
         "Cannot initialize wallet, this user does not have a wallet generated yet",
       );
     }
+
     if (user.wallets[0].type === "enclave") {
       this.wallet = new EnclaveWallet({
         client: this.client,