thirdweb 5.77.0 → 5.78.0

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/wallets/in-app/CountrySelector.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  fireEvent,
+  render,
+  screen,
+} from "../../../../../test/src/react-render.js";
+import { CountrySelector } from "./CountrySelector.js";
+
+describe("CountrySelector", () => {
+  it("renders with default country code", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const selectElement = screen.getByRole("combobox");
+    expect(selectElement).toBeTruthy();
+    expect(selectElement).toHaveValue("US +1");
+  });
+
+  it("changes country code on selection", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const selectElement = screen.getByRole("combobox");
+    fireEvent.change(selectElement, { target: { value: "CA +1" } });
+
+    expect(setCountryCode).toHaveBeenCalledWith("CA +1");
+  });
+
+  it("displays all supported countries", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const options = screen.getAllByRole("option");
+    expect(options.length).toBeGreaterThan(0);
+    expect(
+      options.some((option) => option.textContent?.includes("United States")),
+    ).toBe(true);
+  });
+});

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

@@ -1,9 +1,22 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../core/design-system/index.js";
 import { StyledOption, StyledSelect } from "../../ui/design-system/elements.js";
+import {
+  type SupportedSmsCountry,
+  supportedSmsCountries,
+} from "./supported-sms-countries.js";
+
+export function getCountrySelector(countryIsoCode: SupportedSmsCountry) {
+  const country = supportedSmsCountries.find(
+    (country) => country.countryIsoCode === countryIsoCode,
+  );
+  if (!country) {
+    return "US +1";
+  }
+  return `${country.countryIsoCode} +${country.phoneNumberCode}`;
+}
 
 export function CountrySelector({
   countryCode,
@@ -14,17 +27,7 @@ export function CountrySelector({
 }) {
   const selectRef = useRef<HTMLSelectElement>(null);
 
-  const { data: supportedCountries } = useQuery({
-    queryKey: ["supported-sms-countries"],
-    queryFn: async () => {
-      const { supportedSmsCountries } = await import(
-        "./supported-sms-countries.js"
-      );
-      return supportedSmsCountries;
-    },
-  });
-
-  const supportedCountriesForSms = supportedCountries ?? [
+  const supportedCountriesForSms = supportedSmsCountries ?? [
     {
       countryIsoCode: "US",
       countryName: "United States",
@@ -58,7 +61,7 @@ export function CountrySelector({
           return (
             <Option
               key={country.countryIsoCode}
-              value={`${country.countryIsoCode} +${country.phoneNumberCode}`}
+              value={getCountrySelector(country.countryIsoCode)}
             >
               {country.countryName} +{country.phoneNumberCode}
             </Option>

package/src/react/web/wallets/in-app/InputSelectionUI.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../../../../test/src/react-render.js";
+import { getCountrySelector } from "./CountrySelector.js";
+import { InputSelectionUI } from "./InputSelectionUI.js";
+
+vi.mock("./CountrySelector.js", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getCountrySelector: vi.fn(),
+}));
+
+describe("InputSelectionUI", () => {
+  it("should initialize countryCodeInfo with defaultSmsCountryCode", () => {
+    const mockGetCountrySelector = vi.mocked(getCountrySelector);
+    mockGetCountrySelector.mockReturnValue("CA +1");
+
+    render(
+      <InputSelectionUI
+        defaultSmsCountryCode="CA"
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("CA +1");
+  });
+
+  it('should initialize countryCodeInfo with "US +1" if defaultSmsCountryCode is not provided', () => {
+    render(
+      <InputSelectionUI
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("US +1");
+  });
+});

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

@@ -10,7 +10,8 @@ import { Spacer } from "../../ui/components/Spacer.js";
 import { IconButton } from "../../ui/components/buttons.js";
 import { Input, InputContainer } from "../../ui/components/formElements.js";
 import { Text } from "../../ui/components/text.js";
-import { CountrySelector } from "./CountrySelector.js";
+import { CountrySelector, getCountrySelector } from "./CountrySelector.js";
+import type { SupportedSmsCountry } from "./supported-sms-countries.js";
 
 export function InputSelectionUI(props: {
   onSelect: (data: string) => void;
@@ -22,8 +23,13 @@ export function InputSelectionUI(props: {
   submitButtonText: string;
   format?: "phone";
   disabled?: boolean;
+  defaultSmsCountryCode?: SupportedSmsCountry;
 }) {
-  const [countryCodeInfo, setCountryCodeInfo] = useState("US +1");
+  const [countryCodeInfo, setCountryCodeInfo] = useState(
+    props.defaultSmsCountryCode
+      ? getCountrySelector(props.defaultSmsCountryCode)
+      : "US +1",
+  );
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | undefined>();
   const [showError, setShowError] = useState(false);

package/src/react/web/wallets/in-app/supported-sms-countries.ts

@@ -1,3 +1,5 @@
+export type SupportedSmsCountry =
+  (typeof supportedSmsCountries)[number]["countryIsoCode"];
 export const supportedSmsCountries = [
   {
     countryIsoCode: "AD",
@@ -1183,4 +1185,4 @@ export const supportedSmsCountries = [
     countryName: "Zimbabwe",
     phoneNumberCode: "263",
   },
-];
+] as const;

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

@@ -448,6 +448,9 @@ export const ConnectWalletSocialOptions = (
             disabled={props.disabled}
             emptyErrorMessage={emptyErrorMessage}
             submitButtonText={locale.submitEmail}
+            defaultSmsCountryCode={
+              wallet.getConfig()?.auth?.defaultSmsCountryCode
+            }
           />
         ) : (
           <WalletTypeRowButton

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.77.0";
+export const version = "5.78.0";

package/src/wallets/ecosystem/types.ts

@@ -1,3 +1,4 @@
+import type { SupportedSmsCountry } from "../../react/web/wallets/in-app/supported-sms-countries.js";
 import type {
   InAppWalletAutoConnectOptions,
   InAppWalletConnectionOptions,
@@ -13,6 +14,10 @@ export type EcosystemWalletCreationOptions = {
      * Optional url to redirect to after authentication
      */
     redirectUrl?: string;
+    /**
+     * The default country code to use for SMS authentication
+     */
+    defaultSmsCountryCode?: SupportedSmsCountry;
   };
   /**
    * The partnerId of the ecosystem wallet to connect to

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

@@ -0,0 +1,160 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createThirdwebClient } from "../../../../client/client.js";
+import { getClientFetch } from "../../../../utils/fetch.js";
+import type { ClientScopedStorage } from "./client-scoped-storage.js";
+import {
+  getLinkedProfilesInternal,
+  linkAccount,
+  unlinkAccount,
+} from "./linkAccount.js";
+import type { Profile } from "./types.js";
+
+vi.mock("../../../../utils/fetch.js");
+
+describe("Account linking functions", () => {
+  const mockClient = createThirdwebClient({ clientId: "mock-client-id" });
+  const mockStorage = {
+    getAuthCookie: vi.fn(),
+  } as unknown as ClientScopedStorage;
+  const mockFetch = vi.fn();
+  const mockLinkedAccounts = [
+    { type: "email", details: { email: "user@example.com" } },
+    { type: "phone", details: { phone: "1234567890" } },
+    { type: "wallet", details: { address: "0x123456789" } },
+  ] satisfies Profile[];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getClientFetch).mockReturnValue(mockFetch);
+    vi.mocked(mockStorage.getAuthCookie).mockResolvedValue("mock-token");
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ linkedAccounts: mockLinkedAccounts }),
+    });
+  });
+
+  describe("linkAccount", () => {
+    it("should successfully link an account", async () => {
+      const result = await linkAccount({
+        client: mockClient,
+        tokenToLink: "token-to-link",
+        storage: mockStorage,
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://embedded-wallet.thirdweb.com/api/2024-05-05/account/connect",
+        {
+          method: "POST",
+          headers: {
+            Authorization: "Bearer iaw-auth-token:mock-token",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            accountAuthTokenToConnect: "token-to-link",
+          }),
+        },
+      );
+      expect(result).toEqual(mockLinkedAccounts);
+    });
+
+    it("should throw error when no user is logged in", async () => {
+      vi.mocked(mockStorage.getAuthCookie).mockResolvedValue(null);
+
+      await expect(
+        linkAccount({
+          client: mockClient,
+          tokenToLink: "token-to-link",
+          storage: mockStorage,
+        }),
+      ).rejects.toThrow("Failed to link account, no user logged in");
+    });
+  });
+
+  describe("unlinkAccount", () => {
+    const profileToUnlink = {
+      type: "email",
+      details: { email: "user@example.com" },
+    } satisfies Profile;
+    it("should successfully unlink an account", async () => {
+      const result = await unlinkAccount({
+        client: mockClient,
+        profileToUnlink,
+        storage: mockStorage,
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://embedded-wallet.thirdweb.com/api/2024-05-05/account/disconnect",
+        {
+          method: "POST",
+          headers: {
+            Authorization: "Bearer iaw-auth-token:mock-token",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(profileToUnlink),
+        },
+      );
+      expect(result).toEqual(mockLinkedAccounts);
+    });
+
+    it("should throw error when no user is logged in", async () => {
+      vi.mocked(mockStorage.getAuthCookie).mockResolvedValue(null);
+
+      await expect(
+        unlinkAccount({
+          client: mockClient,
+          profileToUnlink,
+          storage: mockStorage,
+        }),
+      ).rejects.toThrow("Failed to unlink account, no user logged in");
+    });
+    it("should handle API errors", async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        json: () => Promise.resolve({ message: "API Error" }),
+      });
+
+      await expect(
+        unlinkAccount({
+          client: mockClient,
+          profileToUnlink,
+          storage: mockStorage,
+        }),
+      ).rejects.toThrow("API Error");
+    });
+  });
+
+  describe("getLinkedProfilesInternal", () => {
+    it("should successfully get linked profiles", async () => {
+      const result = await getLinkedProfilesInternal({
+        client: mockClient,
+        storage: mockStorage,
+      });
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        "https://embedded-wallet.thirdweb.com/api/2024-05-05/accounts",
+        {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer iaw-auth-token:mock-token",
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      expect(result).toEqual(mockLinkedAccounts);
+    });
+
+    it("should handle API errors", async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        json: () => Promise.resolve({ message: "API Error" }),
+      });
+
+      await expect(
+        getLinkedProfilesInternal({
+          client: mockClient,
+          storage: mockStorage,
+        }),
+      ).rejects.toThrow("API Error");
+    });
+  });
+});