thirdweb 5.58.0 → 5.58.2

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -1,10 +1,12 @@
 "use client";
 import { ShuffleIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useAdminWallet } from "../../../../core/hooks/wallets/useAdminAccount.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
@@ -25,7 +27,7 @@ export function ManageWalletScreen(props: {
   locale: ConnectLocale;
   client: ThirdwebClient;
 }) {
-  const activeWallet = useActiveWallet();
+  const activeWallet = useAdminWallet();
 
   return (
     <Container
@@ -56,21 +58,23 @@ export function ManageWalletScreen(props: {
           />
 
           {/* Multi-auth */}
-          {activeWallet?.id === "inApp" && (
-            <MenuButton
-              onClick={() => {
-                props.setScreen("linked-profiles");
-              }}
-              style={{
-                fontSize: fontSize.sm,
-              }}
-            >
-              <MultiUserIcon size={iconSize.md} />
-              <Text color="primaryText">
-                {props.locale.manageWallet.linkedProfiles}
-              </Text>
-            </MenuButton>
-          )}
+          {activeWallet &&
+            (activeWallet?.id === "inApp" ||
+              isEcosystemWallet(activeWallet)) && (
+              <MenuButton
+                onClick={() => {
+                  props.setScreen("linked-profiles");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                }}
+              >
+                <MultiUserIcon size={iconSize.md} />
+                <Text color="primaryText">
+                  {props.locale.manageWallet.linkedProfiles}
+                </Text>
+              </MenuButton>
+            )}
 
           {/* Wallet Connect Receiver */}
           <MenuButton

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -47,12 +47,12 @@ function EcosystemWalletConnectUI(props: {
     return <LoadingScreen />;
   }
 
-  const goBackToMain =
-    props.size === "compact"
-      ? props.goBack
-      : () => {
-          setSelectionData({});
-        };
+  const goBackToMain = () => {
+    if (props.size === "compact") {
+      props.goBack?.();
+    }
+    setSelectionData({});
+  };
 
   const done = () => {
     props.done();

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -53,12 +53,14 @@ function InAppWalletConnectUI(props: {
 
   // if the the modal starts out with the wallet's connect ui instead of wallet selector - going back to main screen requires staying on the same component and clearing the selection data
   // otherwise, we go back to the wallet selector by calling props.goBack
-  const goBackToMain =
-    initialScreen === props.wallet
-      ? () => {
-          setSelectionData({});
-        }
-      : props.goBack;
+  const goBackToMain = () => {
+    if (initialScreen === props.wallet) {
+      setSelectionData({});
+    } else {
+      props.goBack?.();
+      setSelectionData({});
+    }
+  };
 
   const done = () => {
     props.done();

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

@@ -266,7 +266,7 @@ export const ConnectWalletSocialOptions = (
 
       const connectPromise = (() => {
         if (props.isLinking) {
-          if (wallet.id !== "inApp") {
+          if (wallet.id !== "inApp" && !isEcosystemWallet(wallet)) {
             throw new Error("Only in-app wallets support multi-auth");
           }
           return linkProfile(wallet, connectOptions);

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.58.0";
+export const version = "5.58.2";

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

@@ -1,5 +1,7 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getThirdwebBaseUrl } from "../../../../utils/domains.js";
+import { getClientFetch } from "../../../../utils/fetch.js";
+import type { Ecosystem } from "../../web/types.js";
 import type { Profile } from "./types.js";
 
 /**
@@ -11,14 +13,17 @@ import type { Profile } from "./types.js";
  */
 export async function linkAccount({
   client,
+  ecosystem,
   tokenToLink,
 }: {
   client: ThirdwebClient;
+  ecosystem?: Ecosystem;
   tokenToLink: string;
 }): Promise<Profile[]> {
+  const clientFetch = getClientFetch(client, ecosystem);
   const IN_APP_URL = getThirdwebBaseUrl("inAppWallet");
   const currentAccountToken = localStorage.getItem(
-    `walletToken-${client.clientId}`,
+    `walletToken-${client.clientId}${ecosystem?.id ? `-${ecosystem.id}` : ""}`,
   );
 
   if (!currentAccountToken) {
@@ -26,12 +31,10 @@ export async function linkAccount({
   }
 
   const headers: Record<string, string> = {
-    "Content-Type": "application/json",
     Authorization: `Bearer iaw-auth-token:${currentAccountToken}`,
-    "x-thirdweb-client-id": client.clientId,
+    "Content-Type": "application/json",
   };
-
-  const linkedDetailsResp = await fetch(
+  const linkedDetailsResp = await clientFetch(
     `${IN_APP_URL}/api/2024-05-05/account/connect`,
     {
       method: "POST",
@@ -61,23 +64,23 @@ export async function linkAccount({
  */
 export async function getLinkedProfilesInternal({
   client,
-}: { client: ThirdwebClient }): Promise<Profile[]> {
+  ecosystem,
+}: { client: ThirdwebClient; ecosystem?: Ecosystem }): Promise<Profile[]> {
+  const clientFetch = getClientFetch(client, ecosystem);
   const IN_APP_URL = getThirdwebBaseUrl("inAppWallet");
   const currentAccountToken = localStorage.getItem(
-    `walletToken-${client.clientId}`,
+    `walletToken-${client.clientId}${ecosystem?.id ? `-${ecosystem.id}` : ""}`,
   );
 
-  if (!currentAccountToken) {
-    throw new Error("Failed to get linked accounts, no user logged in");
-  }
-
   const headers: Record<string, string> = {
-    "Content-Type": "application/json",
     Authorization: `Bearer iaw-auth-token:${currentAccountToken}`,
-    "x-thirdweb-client-id": client.clientId,
+    "Content-Type": "application/json",
   };
+  if (!currentAccountToken) {
+    throw new Error("Failed to get linked accounts, no user logged in");
+  }
 
-  const linkedAccountsResp = await fetch(
+  const linkedAccountsResp = await clientFetch(
     `${IN_APP_URL}/api/2024-05-05/accounts`,
     {
       method: "GET",

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

@@ -8,6 +8,16 @@ import type {
   CreateWalletArgs,
   EcosystemWalletId,
 } from "../../../wallet-types.js";
+import type { Ecosystem } from "../../web/types.js";
+import {
+  getLinkedProfilesInternal,
+  linkAccount as linkProfileWithToken,
+} from "../authentication/linkAccount.js";
+import type {
+  MultiStepAuthArgsType,
+  Profile,
+  SingleStepAuthArgsType,
+} from "../authentication/types.js";
 import type { InAppConnector } from "../interfaces/connector.js";
 import { getOrCreateInAppWalletConnector } from "./in-app-core.js";
 
@@ -25,6 +35,10 @@ export function createEcosystemWallet(args: {
   let account: Account | undefined = undefined;
   let chain: Chain | undefined = undefined;
   let client: ThirdwebClient | undefined;
+  const ecosystem: Ecosystem = {
+    id,
+    partnerId: createOptions?.partnerId,
+  };
 
   return {
     id,
@@ -38,7 +52,13 @@ export function createEcosystemWallet(args: {
       return chain;
     },
     getConfig: () => createOptions,
+    getProfiles: async () => {
+      if (!client) {
+        return [];
+      }
 
+      return getLinkedProfilesInternal({ client, ecosystem });
+    },
     getAccount: () => account,
     autoConnect: async (options) => {
       const { autoConnectInAppWallet } = await import("./index.js");
@@ -46,10 +66,7 @@ export function createEcosystemWallet(args: {
       const connector = await getOrCreateInAppWalletConnector(
         options.client,
         connectorFactory,
-        {
-          id,
-          partnerId: createOptions?.partnerId,
-        },
+        ecosystem,
       );
 
       const [connectedAccount, connectedChain] = await autoConnectInAppWallet(
@@ -75,10 +92,7 @@ export function createEcosystemWallet(args: {
       const connector = await getOrCreateInAppWalletConnector(
         options.client,
         connectorFactory,
-        {
-          id,
-          partnerId: createOptions?.partnerId,
-        },
+        ecosystem,
       );
 
       const [connectedAccount, connectedChain] = await connectInAppWallet(
@@ -104,10 +118,7 @@ export function createEcosystemWallet(args: {
         const connector = await getOrCreateInAppWalletConnector(
           client,
           connectorFactory,
-          {
-            id,
-            partnerId: createOptions?.partnerId,
-          },
+          ecosystem,
         );
         const result = await connector.logout();
         if (!result.success) {
@@ -122,5 +133,28 @@ export function createEcosystemWallet(args: {
       chain = newChain;
       emitter.emit("chainChanged", newChain);
     },
-  };
+    // This is not included on the global interface but is force-resolved in linkProfile
+    linkProfile: async (
+      options: SingleStepAuthArgsType | MultiStepAuthArgsType,
+    ): Promise<Profile[]> => {
+      if (!client) {
+        throw new Error(
+          "No client found, please connect the wallet before linking a profile",
+        );
+      }
+
+      const connector = await getOrCreateInAppWalletConnector(
+        client,
+        connectorFactory,
+        ecosystem,
+      );
+
+      const { storedToken } = await connector.authenticate(options);
+      return await linkProfileWithToken({
+        client,
+        ecosystem,
+        tokenToLink: storedToken.cookieString,
+      });
+    },
+  } as Wallet<EcosystemWalletId>;
 }

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

@@ -1,3 +1,5 @@
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import type { Wallet } from "../../../interfaces/wallet.js";
 import type {
   MultiStepAuthArgsType,
@@ -25,8 +27,8 @@ import type {
  * ```
  * @wallet
  */
-export async function getProfiles(wallet: Wallet<"inApp">) {
-  if (wallet.id !== "inApp") {
+export async function getProfiles(wallet: Wallet<"inApp" | EcosystemWalletId>) {
+  if (wallet.id !== "inApp" && !isEcosystemWallet(wallet)) {
     throw new Error("Multi-auth currently only supports in-app wallets");
   }
 
@@ -59,10 +61,10 @@ export async function getProfiles(wallet: Wallet<"inApp">) {
  * @wallet
  */
 export async function linkProfile(
-  wallet: Wallet<"inApp">,
+  wallet: Wallet<"inApp" | EcosystemWalletId>,
   auth: MultiStepAuthArgsType | SingleStepAuthArgsType,
 ): Promise<Profile[]> {
-  if (wallet.id !== "inApp") {
+  if (wallet.id !== "inApp" && !isEcosystemWallet(wallet)) {
     throw new Error("Multi-auth currently only supports in-app wallets");
   }
 

package/dist/cjs/react/web/wallets/in-app/LinkButton.js

@@ -1,23 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = void 0;
-const CustomThemeProvider_js_1 = require("../../../core/design-system/CustomThemeProvider.js");
-const index_js_1 = require("../../../core/design-system/index.js");
-const elements_js_1 = require("../../ui/design-system/elements.js");
-exports.LinkButton = (0, elements_js_1.StyledButton)((_) => {
-    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
-    return {
-        all: "unset",
-        color: theme.colors.accentText,
-        fontSize: index_js_1.fontSize.sm,
-        cursor: "pointer",
-        textAlign: "center",
-        fontWeight: 500,
-        width: "100%",
-        "&:hover": {
-            color: theme.colors.primaryText,
-        },
-    };
-});
-//# sourceMappingURL=LinkButton.js.map

package/dist/cjs/react/web/wallets/in-app/LinkButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/in-app/LinkButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,+FAAoF;AACpF,mEAAgE;AAChE,oEAAkE;AAErD,QAAA,UAAU,GAAmB,IAAA,0BAAY,EAAC,CAAC,CAAC,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,IAAA,uCAAc,GAAE,CAAC;IAC/B,OAAO;QACL,GAAG,EAAE,OAAO;QACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QAC9B,QAAQ,EAAE,mBAAQ,CAAC,EAAE;QACrB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM;QACb,SAAS,EAAE;YACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAChC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/react/web/wallets/in-app/LinkButton.js

@@ -1,20 +0,0 @@
-"use client";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { fontSize } from "../../../core/design-system/index.js";
-import { StyledButton } from "../../ui/design-system/elements.js";
-export const LinkButton = /* @__PURE__ */ StyledButton((_) => {
-    const theme = useCustomTheme();
-    return {
-        all: "unset",
-        color: theme.colors.accentText,
-        fontSize: fontSize.sm,
-        cursor: "pointer",
-        textAlign: "center",
-        fontWeight: 500,
-        width: "100%",
-        "&:hover": {
-            color: theme.colors.primaryText,
-        },
-    };
-});
-//# sourceMappingURL=LinkButton.js.map

package/dist/esm/react/web/wallets/in-app/LinkButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/in-app/LinkButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,OAAO;QACL,GAAG,EAAE,OAAO;QACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QAC9B,QAAQ,EAAE,QAAQ,CAAC,EAAE;QACrB,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG;QACf,KAAK,EAAE,MAAM;QACb,SAAS,EAAE;YACT,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;SAChC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/types/react/web/wallets/in-app/LinkButton.d.ts

@@ -1,5 +0,0 @@
-export declare const LinkButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-//# sourceMappingURL=LinkButton.d.ts.map

package/dist/types/react/web/wallets/in-app/LinkButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/wallets/in-app/LinkButton.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU;;SAeW,MAAO,WAAW;qHADlD,CAAC"}

package/src/react/web/wallets/in-app/LinkButton.tsx

@@ -1,20 +0,0 @@
-"use client";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { fontSize } from "../../../core/design-system/index.js";
-import { StyledButton } from "../../ui/design-system/elements.js";
-
-export const LinkButton = /* @__PURE__ */ StyledButton((_) => {
-  const theme = useCustomTheme();
-  return {
-    all: "unset",
-    color: theme.colors.accentText,
-    fontSize: fontSize.sm,
-    cursor: "pointer",
-    textAlign: "center",
-    fontWeight: 500,
-    width: "100%",
-    "&:hover": {
-      color: theme.colors.primaryText,
-    },
-  };
-});