thirdweb 5.77.0 → 5.79.0-nightly-f91f6310e9396918d0ffc5217eeb4a44cef0b8c8-20241215000412

package/src/react/core/hooks/wallets/useConnect.test.tsx

@@ -0,0 +1,105 @@
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { MockStorage } from "../../../../../test/src/mocks/storage.js";
+import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
+import { TEST_ACCOUNT_A } from "../../../../../test/src/test-wallets.js";
+import { createWalletAdapter } from "../../../../adapters/wallet-adapter.js";
+import { ethereum } from "../../../../chains/chain-definitions/ethereum.js";
+import {
+  type ConnectionManager,
+  createConnectionManager,
+} from "../../../../wallets/manager/index.js";
+import { ConnectionManagerCtx } from "../../providers/connection-manager.js";
+import { useActiveWalletConnectionStatus } from "./useActiveWalletConnectionStatus.js";
+import { useConnect } from "./useConnect.js";
+
+describe("useAddConnectedWallet", () => {
+  // Mock the connection manager
+  const mockStorage = new MockStorage();
+  let manager: ConnectionManager;
+
+  // Create a wrapper component with the mocked context
+  const wrapper = ({ children }: { children: ReactNode }) => {
+    return (
+      <ConnectionManagerCtx.Provider value={manager}>
+        {children}
+      </ConnectionManagerCtx.Provider>
+    );
+  };
+
+  const wallet = createWalletAdapter({
+    adaptedAccount: TEST_ACCOUNT_A,
+    client: TEST_CLIENT,
+    chain: ethereum,
+    onDisconnect: () => {},
+    switchChain: () => {},
+  });
+
+  beforeEach(() => {
+    manager = createConnectionManager(mockStorage);
+  });
+
+  it("should connect a wallet to the connection manager", async () => {
+    const { result: statusResult } = renderHook(
+      () => useActiveWalletConnectionStatus(),
+      {
+        wrapper,
+      },
+    );
+    const { result } = renderHook(() => useConnect(), { wrapper });
+    expect(statusResult.current).toEqual("disconnected");
+    await result.current.connect(async () => wallet);
+    expect(statusResult.current).toEqual("connected");
+
+    // should add to connected wallets
+    expect(manager.connectedWallets.getValue()).toHaveLength(1);
+    expect(manager.connectedWallets.getValue()[0]).toEqual(wallet);
+    // should set the active wallet
+    expect(manager.activeWalletStore.getValue()).toEqual(wallet);
+  });
+
+  it("should handle a function that returns a wallet", async () => {
+    const { result: statusResult } = renderHook(
+      () => useActiveWalletConnectionStatus(),
+      {
+        wrapper,
+      },
+    );
+    const { result } = renderHook(() => useConnect(), { wrapper });
+    expect(statusResult.current).toEqual("disconnected");
+    await result.current.connect(async () => wallet);
+    expect(statusResult.current).toEqual("connected");
+
+    // should add to connected wallets
+    expect(manager.connectedWallets.getValue()).toHaveLength(1);
+    expect(manager.connectedWallets.getValue()[0]).toEqual(wallet);
+    // should set the active wallet
+    expect(manager.activeWalletStore.getValue()).toEqual(wallet);
+  });
+
+  it("should handle an error when connecting a wallet", async () => {
+    const { result: statusResult } = renderHook(
+      () => useActiveWalletConnectionStatus(),
+      {
+        wrapper,
+      },
+    );
+    expect(statusResult.current).toEqual("disconnected");
+    const { result } = renderHook(() => useConnect(), { wrapper });
+    await result.current.connect(async () => {
+      throw new Error("test");
+    });
+
+    expect(statusResult.current).toEqual("disconnected");
+    // should set the active wallet
+    expect(manager.activeWalletStore.getValue()).toEqual(undefined);
+  });
+
+  it("should throw an error when used outside of ThirdwebProvider", () => {
+    // Render the hook without a provider
+    expect(() => {
+      renderHook(() => useConnect());
+    }).toThrow("useConnect must be used within <ThirdwebProvider>");
+  });
+});

package/src/react/core/hooks/wallets/useSetActiveWallet.test.tsx

@@ -0,0 +1,53 @@
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it } from "vitest";
+import { MockStorage } from "../../../../../test/src/mocks/storage.js";
+import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
+import { TEST_ACCOUNT_A } from "../../../../../test/src/test-wallets.js";
+import { createWalletAdapter } from "../../../../adapters/wallet-adapter.js";
+import { ethereum } from "../../../../chains/chain-definitions/ethereum.js";
+import { createConnectionManager } from "../../../../wallets/manager/index.js";
+import { ConnectionManagerCtx } from "../../providers/connection-manager.js";
+import { useSetActiveWallet } from "./useSetActiveWallet.js";
+
+describe("useAddConnectedWallet", () => {
+  // Mock the connection manager
+  const mockStorage = new MockStorage();
+  const manager = createConnectionManager(mockStorage);
+
+  // Create a wrapper component with the mocked context
+  const wrapper = ({ children }: { children: ReactNode }) => {
+    return (
+      <ConnectionManagerCtx.Provider value={manager}>
+        {children}
+      </ConnectionManagerCtx.Provider>
+    );
+  };
+
+  const wallet = createWalletAdapter({
+    adaptedAccount: TEST_ACCOUNT_A,
+    client: TEST_CLIENT,
+    chain: ethereum,
+    onDisconnect: () => {},
+    switchChain: () => {},
+  });
+
+  it("should add a wallet to the connection manager", async () => {
+    // Render the hook
+    const { result } = renderHook(() => useSetActiveWallet(), { wrapper });
+    result.current(wallet);
+
+    // should add to connected wallets
+    expect(manager.connectedWallets.getValue()).toHaveLength(1);
+    expect(manager.connectedWallets.getValue()[0]).toEqual(wallet);
+    // should set the active wallet
+    expect(manager.activeWalletStore.getValue()).toEqual(wallet);
+  });
+
+  it("should throw an error when used outside of ThirdwebProvider", () => {
+    // Render the hook without a provider
+    expect(() => {
+      renderHook(() => useSetActiveWallet());
+    }).toThrow("useSetActiveWallet must be used within <ThirdwebProvider>");
+  });
+});

package/src/react/native/hooks/wallets/useUnlinkProfile.test.tsx

@@ -0,0 +1,75 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook } from "@testing-library/react";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { useConnectedWallets } from "../../../../react/core/hooks/wallets/useConnectedWallets.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import { unlinkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useUnlinkProfile } from "./useUnlinkProfile.js";
+
+vi.mock("../../../../wallets/in-app/web/lib/auth/index.js");
+vi.mock("../../../core/hooks/wallets/useConnectedWallets.js");
+
+describe("useUnlinkProfile", () => {
+  const queryClient = new QueryClient();
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(queryClient, "invalidateQueries");
+  });
+
+  const mockProfile = {} as unknown as Profile;
+  it("should call unlinkProfile with correct parameters", async () => {
+    vi.mocked(useConnectedWallets).mockReturnValue([]);
+
+    const { result } = renderHook(() => useUnlinkProfile(), {
+      wrapper,
+    });
+    const mutationFn = result.current.mutateAsync;
+
+    await act(async () => {
+      await mutationFn({ client: TEST_CLIENT, profileToUnlink: mockProfile });
+    });
+
+    expect(unlinkProfile).toHaveBeenCalledWith({
+      client: TEST_CLIENT,
+      ecosystem: undefined,
+      profileToUnlink: mockProfile,
+    });
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["profiles"],
+    });
+  });
+
+  it("should include ecosystem if ecosystem wallet is found", async () => {
+    const mockWallet = {
+      id: "ecosystem.wallet-id",
+      getConfig: () => ({ partnerId: "partner-id" }),
+    } as unknown as Wallet;
+    vi.mocked(useConnectedWallets).mockReturnValue([mockWallet]);
+
+    const { result } = renderHook(() => useUnlinkProfile(), {
+      wrapper,
+    });
+    const mutationFn = result.current.mutateAsync;
+
+    await act(async () => {
+      await mutationFn({ client: TEST_CLIENT, profileToUnlink: mockProfile });
+    });
+
+    expect(unlinkProfile).toHaveBeenCalledWith({
+      client: TEST_CLIENT,
+      ecosystem: {
+        id: mockWallet.id,
+        partnerId: (mockWallet as Wallet<`ecosystem.${string}`>).getConfig()
+          ?.partnerId,
+      },
+      profileToUnlink: mockProfile,
+    });
+  });
+});

package/src/react/native/hooks/wallets/useUnlinkProfile.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
+import { unlinkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
+
+/**
+ * Unlinks a web2 or web3 profile currently connected in-app or ecosystem account.
+ * **When a profile is unlinked from the account, it will no longer be able to be used to sign into the account.**
+ *
+ * @example
+ *
+ * ### Unlinking an email account
+ *
+ * ```jsx
+ * import { useUnlinkProfile } from "thirdweb/react";
+ *
+ * const { data: connectedProfiles, isLoading } = useProfiles({
+ *   client: props.client,
+ * });
+ * const { mutate: unlinkProfile } = useUnlinkProfile();
+ *
+ * const onClick = () => {
+ *   unlinkProfile({
+ *     client,
+ *      // Select any other profile you want to unlink
+ *     profileToUnlink: connectedProfiles[1]
+ *   });
+ * };
+ * ```
+ *
+ * @wallet
+ */
+export function useUnlinkProfile() {
+  const wallets = useConnectedWallets();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      client,
+      profileToUnlink,
+    }: { client: ThirdwebClient; profileToUnlink: Profile }) => {
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
+
+      await unlinkProfile({
+        client,
+        ecosystem,
+        profileToUnlink,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profiles"] });
+    },
+  });
+}

package/src/react/web/hooks/wallets/useUnlinkProfile.test.tsx

@@ -0,0 +1,75 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook } from "@testing-library/react";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { useConnectedWallets } from "../../../../react/core/hooks/wallets/useConnectedWallets.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import { unlinkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useUnlinkProfile } from "./useUnlinkProfile.js";
+
+vi.mock("../../../../wallets/in-app/web/lib/auth/index.js");
+vi.mock("../../../core/hooks/wallets/useConnectedWallets.js");
+
+describe("useUnlinkProfile", () => {
+  const queryClient = new QueryClient();
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(queryClient, "invalidateQueries");
+  });
+
+  const mockProfile = {} as unknown as Profile;
+  it("should call unlinkProfile with correct parameters", async () => {
+    vi.mocked(useConnectedWallets).mockReturnValue([]);
+
+    const { result } = renderHook(() => useUnlinkProfile(), {
+      wrapper,
+    });
+    const mutationFn = result.current.mutateAsync;
+
+    await act(async () => {
+      await mutationFn({ client: TEST_CLIENT, profileToUnlink: mockProfile });
+    });
+
+    expect(unlinkProfile).toHaveBeenCalledWith({
+      client: TEST_CLIENT,
+      ecosystem: undefined,
+      profileToUnlink: mockProfile,
+    });
+    expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+      queryKey: ["profiles"],
+    });
+  });
+
+  it("should include ecosystem if ecosystem wallet is found", async () => {
+    const mockWallet = {
+      id: "ecosystem.wallet-id",
+      getConfig: () => ({ partnerId: "partner-id" }),
+    } as unknown as Wallet;
+    vi.mocked(useConnectedWallets).mockReturnValue([mockWallet]);
+
+    const { result } = renderHook(() => useUnlinkProfile(), {
+      wrapper,
+    });
+    const mutationFn = result.current.mutateAsync;
+
+    await act(async () => {
+      await mutationFn({ client: TEST_CLIENT, profileToUnlink: mockProfile });
+    });
+
+    expect(unlinkProfile).toHaveBeenCalledWith({
+      client: TEST_CLIENT,
+      ecosystem: {
+        id: mockWallet.id,
+        partnerId: (mockWallet as Wallet<`ecosystem.${string}`>).getConfig()
+          ?.partnerId,
+      },
+      profileToUnlink: mockProfile,
+    });
+  });
+});

package/src/react/web/hooks/wallets/useUnlinkProfile.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import type { Ecosystem } from "../../../../wallets/in-app/core/wallet/types.js";
+import { unlinkProfile } from "../../../../wallets/in-app/web/lib/auth/index.js";
+import { useConnectedWallets } from "../../../core/hooks/wallets/useConnectedWallets.js";
+
+/**
+ * Unlinks a web2 or web3 profile currently connected in-app or ecosystem account.
+ * **When a profile is unlinked from the account, it will no longer be able to be used to sign into the account.**
+ *
+ * @example
+ *
+ * ### Unlinking an email account
+ *
+ * ```jsx
+ * import { useUnlinkProfile } from "thirdweb/react";
+ *
+ * const { data: connectedProfiles, isLoading } = useProfiles({
+ *   client: props.client,
+ * });
+ * const { mutate: unlinkProfile } = useUnlinkProfile();
+ *
+ * const onClick = () => {
+ *   unlinkProfile({
+ *     client,
+ *      // Select any other profile you want to unlink
+ *     profileToUnlink: connectedProfiles[1]
+ *   });
+ * };
+ * ```
+ *
+ * @wallet
+ */
+export function useUnlinkProfile() {
+  const wallets = useConnectedWallets();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      client,
+      profileToUnlink,
+    }: { client: ThirdwebClient; profileToUnlink: Profile }) => {
+      const ecosystemWallet = wallets.find((w) => isEcosystemWallet(w));
+      const ecosystem: Ecosystem | undefined = ecosystemWallet
+        ? {
+            id: ecosystemWallet.id,
+            partnerId: ecosystemWallet.getConfig()?.partnerId,
+          }
+        : undefined;
+
+      await unlinkProfile({
+        client,
+        ecosystem,
+        profileToUnlink,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["profiles"] });
+    },
+  });
+}

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.test.tsx

@@ -131,5 +131,30 @@ describe("LinkedProfilesScreen", () => {
       render(<LinkedProfilesScreen {...mockProps} />);
       expect(screen.queryByText("Guest")).not.toBeInTheDocument();
     });
+
+    it("should render unlink button when there are multiple profiles", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [
+          { type: "email", details: { email: "test@example.com" } },
+          { type: "google", details: { email: "google@example.com" } },
+        ],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.getAllByLabelText("Unlink")).toHaveLength(2);
+    });
+
+    it("should not render unlink button when there is only one profile", () => {
+      vi.mocked(useProfiles).mockReturnValue({
+        data: [{ type: "email", details: { email: "test@example.com" } }],
+        isLoading: false,
+        // biome-ignore lint/suspicious/noExplicitAny: Mocking data
+      } as any);
+
+      render(<LinkedProfilesScreen {...mockProps} />);
+      expect(screen.queryByLabelText("Unlink")).not.toBeInTheDocument();
+    });
   });
 });

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

@@ -1,5 +1,7 @@
 "use client";
+import { Cross2Icon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useUnlinkProfile } from "../../../../../react/web/hooks/wallets/useUnlinkProfile.js";
 import { shortenAddress } from "../../../../../utils/address.js";
 import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
@@ -10,6 +12,7 @@ import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Img } from "../../components/Img.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { IconButton } from "../../components/buttons.js";
 import { Text } from "../../components/text.js";
 import { Blobbie } from "../Blobbie.js";
 import { MenuButton } from "../MenuButton.js";
@@ -70,57 +73,61 @@ export function LinkedProfilesScreen(props: {
         />
       </Container>
       <Line />
-      {isLoading ? (
-        <LoadingScreen />
-      ) : (
-        <Container
-          scrollY
-          style={{
-            height: "300px",
-          }}
-        >
-          <Spacer y="md" />
-          <Container px="sm">
-            <MenuButton
-              onClick={() => {
-                props.setScreen("link-profile");
-              }}
-              style={{
-                fontSize: fontSize.sm,
-              }}
-            >
-              <AddUserIcon size={iconSize.lg} />
-              <Text color="primaryText">
-                {props.locale.manageWallet.linkProfile}
-              </Text>
-            </MenuButton>
-            <Spacer y="xs" />
-            {/* Exclude guest as a profile */}
-            {connectedProfiles
-              ?.filter((profile) => profile.type !== "guest")
-              .map((profile) => (
-                <LinkedProfile
-                  key={`${profile.type}-${getProfileDisplayName(profile)}`}
-                  profile={profile}
-                  client={props.client}
-                />
-              ))}
-          </Container>
-          <Spacer y="md" />
+
+      <Container
+        scrollY
+        style={{
+          height: "300px",
+        }}
+      >
+        <Spacer y="md" />
+        <Container px="sm">
+          <MenuButton
+            onClick={() => {
+              props.setScreen("link-profile");
+            }}
+            style={{
+              fontSize: fontSize.sm,
+            }}
+          >
+            <AddUserIcon size={iconSize.lg} />
+            <Text color="primaryText">
+              {props.locale.manageWallet.linkProfile}
+            </Text>
+          </MenuButton>
+          <Spacer y="xs" />
+          {/* Exclude guest as a profile */}
+          {connectedProfiles
+            ?.filter((profile) => profile.type !== "guest")
+            .map((profile) => (
+              <LinkedProfile
+                key={`${JSON.stringify(profile)}`}
+                enableUnlinking={connectedProfiles.length > 1}
+                profile={profile}
+                client={props.client}
+              />
+            ))}
         </Container>
-      )}
+        <Spacer y="md" />
+      </Container>
     </Container>
   );
 }
 
 function LinkedProfile({
   profile,
+  enableUnlinking,
   client,
-}: { profile: Profile; client: ThirdwebClient }) {
+}: {
+  profile: Profile;
+  enableUnlinking: boolean;
+  client: ThirdwebClient;
+}) {
   const { data: socialProfiles } = useSocialProfiles({
     client,
     address: profile.details.address,
   });
+  const { mutate: unlinkProfileMutation, isPending } = useUnlinkProfile();
 
   return (
     <MenuButton
@@ -128,6 +135,7 @@ function LinkedProfile({
         fontSize: fontSize.sm,
         cursor: "default",
       }}
+      as={"div"}
       disabled // disabled until we have more data to show on a dedicated profile screen
     >
       {socialProfiles?.some((p) => p.avatar) ? (
@@ -180,12 +188,46 @@ function LinkedProfile({
           {socialProfiles?.find((p) => p.avatar)?.name ||
             getProfileDisplayName(profile)}
         </Text>
-        {socialProfiles?.find((p) => p.avatar)?.name &&
-          profile.details.address && (
-            <Text color="secondaryText" size="sm">
-              {shortenAddress(profile.details.address, 4)}
-            </Text>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "8px",
+          }}
+        >
+          {socialProfiles?.find((p) => p.avatar)?.name &&
+            profile.details.address && (
+              <Text color="secondaryText" size="sm">
+                {shortenAddress(profile.details.address, 4)}
+              </Text>
+            )}
+          {enableUnlinking && (
+            <IconButton
+              autoFocus
+              type="button"
+              aria-label="Unlink"
+              onClick={() =>
+                unlinkProfileMutation({
+                  client,
+                  profileToUnlink: profile,
+                })
+              }
+              style={{
+                pointerEvents: "auto",
+              }}
+              disabled={isPending}
+            >
+              <Cross2Icon
+                width={iconSize.md}
+                height={iconSize.md}
+                style={{
+                  color: "inherit",
+                }}
+              />
+            </IconButton>
           )}
+        </div>
       </div>
     </MenuButton>
   );

package/src/react/web/ui/MediaRenderer/useResolvedMediaType.ts

@@ -43,6 +43,6 @@ export function useResolvedMediaType(
 
   return {
     mediaInfo: { url: resolvedUrl, mimeType: resolvedMimeType.data },
-    isFetched: resolvedMimeType.isFetched,
+    isFetched: resolvedMimeType.isFetched || !!mimeType,
   };
 }

package/src/react/web/ui/prebuilt/Chain/icon.tsx

@@ -143,7 +143,7 @@ export function ChainIcon({
       }
       // Check if the chain object already has "icon"
       if (chain.icon?.url) {
-        return chain.icon.url;
+        return resolveScheme({ uri: chain.icon.url, client });
       }
       const possibleUrl = await getChainMetadata(chain).then(
         (data) => data.icon?.url,