thirdweb 5.78.0 → 5.79.0-nightly-f91f6310e9396918d0ffc5217eeb4a44cef0b8c8-20241215000412

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,

package/src/react/web/ui/prebuilt/Chain/name.test.tsx

@@ -2,7 +2,8 @@ import { describe, expect, it } from "vitest";
 import { render, screen, waitFor } from "~test/react-render.js";
 import { ethereum } from "../../../../../chains/chain-definitions/ethereum.js";
 import { defineChain } from "../../../../../chains/utils.js";
-import { ChainName, fetchChainName } from "./name.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { ChainName, fetchChainName, getQueryKeys } from "./name.js";
 import { ChainProvider } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
@@ -97,4 +98,21 @@ describe.runIf(process.env.TW_SECRET_KEY)("ChainName component", () => {
     });
     expect(res).toBe("eth_mainnet");
   });
+
+  it("getQueryKeys should work without nameResolver", () => {
+    expect(getQueryKeys({ chainId: 1 })).toStrictEqual([
+      "_internal_chain_name_",
+      1,
+    ]);
+  });
+
+  it("getQueryKeys should work WITH nameResolver", () => {
+    const nameResolver = () => "tw";
+    const fnId = getFunctionId(nameResolver);
+    expect(getQueryKeys({ chainId: 1, nameResolver })).toStrictEqual([
+      "_internal_chain_name_",
+      1,
+      { resolver: fnId },
+    ]);
+  });
 });

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

@@ -48,7 +48,7 @@ export interface ChainNameProps
    * name was not fetched succesfully
    * @example
    * ```tsx
-   * <ChainName fallbackComponent={"Failed to load"}
+   * <ChainName fallbackComponent={<span>Failed to load</span>}
    * />
    * ```
    */
@@ -157,18 +157,7 @@ export function ChainName({
 }: ChainNameProps) {
   const { chain } = useChainContext();
   const nameQuery = useQuery({
-    queryKey: [
-      "_internal_chain_name_",
-      chain.id,
-      {
-        resolver:
-          typeof nameResolver === "string"
-            ? nameResolver
-            : typeof nameResolver === "function"
-              ? getFunctionId(nameResolver)
-              : undefined,
-      },
-    ] as const,
+    queryKey: getQueryKeys({ chainId: chain.id, nameResolver }),
     queryFn: async () => fetchChainName({ chain, nameResolver }),
     ...queryOptions,
   });
@@ -205,3 +194,20 @@ export async function fetchChainName(props: {
   }
   return getChainMetadata(chain).then((data) => data.name);
 }
+
+/**
+ * @internal Exported for tests
+ */
+export function getQueryKeys(props: {
+  chainId: number;
+  nameResolver?: string | (() => string) | (() => Promise<string>);
+}) {
+  if (typeof props.nameResolver === "function") {
+    return [
+      "_internal_chain_name_",
+      props.chainId,
+      { resolver: getFunctionId(props.nameResolver) },
+    ] as const;
+  }
+  return ["_internal_chain_name_", props.chainId] as const;
+}

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

@@ -48,6 +48,7 @@ const ChainProviderContext = /* @__PURE__ */ createContext<
  * ```
  * @component
  * @chain
+ * @beta
  */
 export function ChainProvider(
   props: React.PropsWithChildren<ChainProviderProps>,

package/src/react/web/ui/prebuilt/Wallet/icon.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { render, waitFor } from "~test/react-render.js";
+import { WalletIcon, fetchWalletImage } from "./icon.js";
+import { WalletProvider } from "./provider.js";
+
+describe("WalletIcon", () => {
+  it("should fetch wallet image", async () => {
+    expect(await fetchWalletImage({ id: "io.metamask" })).toBe(
+      "data:image/webp;base64,UklGRsgFAABXRUJQVlA4ILwFAAAwHgCdASqAAIAAPm0ylEWkIyIXTGzMQAbEoAzQSPDffG8qhx7LpfeDUfnDee/tP6gP2u9Yf0a/7L0/+pc3nivc0JlTXBvMVYW1Wt7JbdRJ1a5UhpH9+sdhAvGug20WzG+wRD+P/7/raQ1NqZ5EfcOwosQsP7NRVflPNArBLCbFJWE3EvTLNOmMfR2f+r+E2y6y1lWanc3n9RtF4lYbcW38t3UG/W2jXng4loXFOy3Vjm/r/1KHwXlpAuhAIzK/XF+ChayRFhBD+lbRrgQ3CSVjdmXw6agYPoMQ+tpjPUN/3qdGcvnN1sKWt57OGozQVSjMu0aA58MPKVWiAP77l9VfptKhZ7in3+r1DqZZQEYqO1p+MENah/WS/QQDvPuew8P0OXfahcjbCg7h4QEEEjDyfoFUbQHdw+meAsydryxVs/Ij+eB619Uj/sMgtwIifIyTieCT/hdsDmpLqGD+vOIArZfzSkordRkngojxVgvWRht84IaCHCs5Dn208UHFmyQE4KCxHef1iLYeAEPxnIAovGHIl7rCjiYE12obAM3ZCnt+RFqcT3q2rorCswc4/8f8TOhCSo63/dszpMkNQonGwtyhAFnm1EKqLPDcy99ggKQL95VYePoHcv8sHOG5zJ7lircX7VPpxkloNVWnlp/drJjQrp0h5BsOnqYn756+wcFw5qapAOnYCKUHujsoSz2BlLs1702rFpvi1iVczo2aO9GN1TaM3zBqMX0NN0YEU8pz/3+xwkK5M5q+Qb4FNJeugjdOp2kcYoOCbyAg/0OyGswYHPwDN/opVaDHWj0FcKzLq43uEjUZMG8t7O6BkoK0FmpYOeTQrinuF5F6W6ENly78daVmGPYTU22R9No5+xr8F2ESYTaJzOR3UoouY15xHrsxhDCukfebOiHljS6jUjF0TWaIAb58k57DZ3gdjkpxnJDyEmCsCOlASNWMn1ay3G8PDriQOdwsL7bgx/jZXN6XZHVx2hst/6Qcljnnn4um8eD1NcP1rTV7HMZzAb/d7ntki9zU1IFl695zPs3YT+h0PS4JuQYLzYoxpmMUQ35sVx/3KkL4Pm/TlvuNpnopM0+l2b/0OS6+5GwJYEMpzM4peYZS3qZkz/kxWNPTLv3UcCguDqpGxZ39l/VQJhSImKPZBa1RWCtSj29VCzCEZlX/eAdAKgZwhMKR4C5osznEbxjfRdHHPxjZwstCwugFa5w/WykOTFGAzk0sLSuvxO9kw/f++0WvG5La11GQaqbDDJ/ks7bcELqEGtvLHiJgxOXW9PqCk5Ap9EYelPTmdhHZgzWxtz4idN+JX+DGyYtJYjtW+Ay4kJ4Hol+Iavfje1f/22S69z1XSZ8OOcrDHKQdO1JlGaTkKQmCg5Tr05Qy9NQSfh67Vpui6OyMu38BnbG+cfWPRx/MjGQITY8w8sb1GUGd5hD9eVqycVtz8yFlYrXYQSBkAxMYgkBaiWe6kk24SoOCgt74nNs3pyTWUERw9ENESB6PyO9HjcsUZWIh97RKlf6thPtqxdlfr9i3McON9zvI7M2TtYcneXhOnqN8V4wqqII2J3DQ6/DZFNj5eNkCp2ijt7UWuKduhEmbZlLahfxD8eqBHAZR/H5rulzc4oVlyXr6qPXf9LCEuDRSDE8VNFY4NuTcaRTZO33RrWmWzbXAwpEKeH/Xf78XMoeynLBSyB+pS6y8Fqh7ExdmnvtW2gW3pwNrLc5lXlZJW8VcBzaSpy1Dmqj6Xll9BS8RyWqNx0O3fY8NJpf1exbNYMWA8juddzn2d9lHypEbiym0ASxI/jgGkbis5fecZ60QtJusJgdC8HAJEh64A9EuOCAnnISc5CElwpsvJTdEZhYv3t7MtLDvHp20lAtylt5l9yxqfCy/sqC6qZ/8+tsTAHzziGF6NKoaD0FVhZ2CER5AonJdBz5sg0rcD7arFe96uzujFDCQAAAA",
+    );
+  });
+
+  it("should throw error if WalletId is not supported", async () => {
+    await expect(() =>
+      // @ts-ignore For test
+      fetchWalletImage({ id: "__undefined__" }),
+    ).rejects.toThrowError("Wallet with id __undefined__ not found");
+  });
+
+  it("should render an image", async () => {
+    const { container } = render(
+      <WalletProvider id="io.cosmostation">
+        <WalletIcon />
+      </WalletProvider>,
+    );
+    await waitFor(() => {
+      expect(container.querySelector("img")).not.toBe(null);
+    });
+  });
+});

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

@@ -0,0 +1,120 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { JSX } from "react";
+import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
+import { useWalletContext } from "./provider.js";
+
+export interface WalletIconProps
+  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+  /**
+   * This component will be shown while the icon of the wallet is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletIcon loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: JSX.Element;
+  /**
+   * This component will be shown if the icon fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * icon was not fetched succesfully
+   * @example
+   * ```tsx
+   * <WalletIcon fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: JSX.Element;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}
+
+/**
+ * This component tries to resolve the icon of a given wallet, then return an image.
+ * @returns an <img /> with the src of the wallet icon
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletIcon } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletIcon />
+ * </WalletProvider>
+ * ```
+ *
+ * Result: An <img /> component with the src of the icon
+ * ```html
+ * <img src="metamask-icon.png" />
+ * ```
+ *
+ * ### Show a loading sign while the icon is being loaded
+ * ```tsx
+ * <WalletIcon loadingComponent={<Spinner />} />
+ * ```
+ *
+ * ### Fallback to a dummy image if the wallet icon fails to resolve
+ * ```tsx
+ * <WalletIcon fallbackComponent={<img src="blank-image.png" />} />
+ * ```
+ *
+ * ### Usage with queryOptions
+ * WalletIcon uses useQuery() from tanstack query internally.
+ * It allows you to pass a custom queryOptions of your choice for more control of the internal fetching logic
+ * ```tsx
+ * <WalletIcon queryOptions={{ enabled: someLogic, retry: 3, }} />
+ * ```
+ *
+ * @component
+ * @wallet
+ * @beta
+ */
+export function WalletIcon({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  ...restProps
+}: WalletIconProps) {
+  const imageQuery = useWalletIcon({ queryOptions });
+  if (imageQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!imageQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <img src={imageQuery.data} {...restProps} alt={restProps.alt} />;
+}
+
+/**
+ * @internal
+ */
+function useWalletIcon(props: {
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}) {
+  const { id } = useWalletContext();
+  const imageQuery = useQuery({
+    queryKey: ["walletIcon", id],
+    queryFn: async () => fetchWalletImage({ id }),
+    ...props.queryOptions,
+  });
+  return imageQuery;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchWalletImage(props: {
+  id: WalletId;
+}) {
+  const image_src = await getWalletInfo(props.id, true);
+  return image_src;
+}

package/src/react/web/ui/prebuilt/Wallet/name.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { render, waitFor } from "~test/react-render.js";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { WalletName, fetchWalletName, getQueryKeys } from "./name.js";
+import { WalletProvider } from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("WalletName", () => {
+  it("fetchWalletName: should fetch wallet name from id", async () => {
+    const name = await fetchWalletName({ id: "io.metamask" });
+    expect(name).toBe("MetaMask");
+  });
+
+  it("fetchWalletName should throw error if failed to get name", async () => {
+    // @ts-ignore for test
+    await expect(() => fetchWalletName({ id: "test___" })).rejects.toThrowError(
+      "Wallet with id test___ not found",
+    );
+  });
+
+  it("fetchWalletName should work with formatFn", async () => {
+    const formatFn = (str: string) => `${str} Wallet`;
+    expect(await fetchWalletName({ id: "io.metamask", formatFn })).toBe(
+      "MetaMask Wallet",
+    );
+  });
+
+  it("getQueryKeys should work without a formatFn", () => {
+    expect(getQueryKeys({ id: "ai.hacken" })).toStrictEqual([
+      "walletName",
+      "ai.hacken",
+    ]);
+  });
+
+  it("getQueryKeys should work WITH a formatFn", () => {
+    const fn = (str: string) => `test:${str}`;
+    const fnId = getFunctionId(fn);
+    expect(getQueryKeys({ id: "ai.hacken", formatFn: fn })).toStrictEqual([
+      "walletName",
+      "ai.hacken",
+      { resolver: fnId },
+    ]);
+  });
+
+  it("should render a span", async () => {
+    const { container } = render(
+      <WalletProvider id="io.metamask">
+        <WalletName />
+      </WalletProvider>,
+    );
+
+    await waitFor(() => {
+      expect(container.querySelector("span")).not.toBe(null);
+    });
+  });
+});

package/src/react/web/ui/prebuilt/Wallet/name.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import type { JSX } from "react";
+import { getFunctionId } from "../../../../../utils/function-id.js";
+import { getWalletInfo } from "../../../../../wallets/__generated__/getWalletInfo.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
+import { useWalletContext } from "./provider.js";
+
+/**
+ * Props for the WalletName component
+ * @component
+ * @wallet
+ */
+export interface WalletNameProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /**
+   * This component will be shown while the name of the wallet name is being fetched
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a loading sign or spinner to this prop.
+   * @example
+   * ```tsx
+   * <WalletName loadingComponent={<Spinner />} />
+   * ```
+   */
+  loadingComponent?: JSX.Element;
+  /**
+   * This component will be shown if the name fails to be retreived
+   * If not passed, the component will return `null`.
+   *
+   * You can/should pass a descriptive text/component to this prop, indicating that the
+   * name was not fetched succesfully
+   * @example
+   * ```tsx
+   * <WalletName fallbackComponent={<span>Failed to load</span>}
+   * />
+   * ```
+   */
+  fallbackComponent?: JSX.Element;
+  /**
+   * Optional `useQuery` params
+   */
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+  /**
+   * A function to format the name's display value
+   * ```tsx
+   * <WalletName formatFn={(str: string) => doSomething()} />
+   * ```
+   */
+  formatFn?: (str: string) => string;
+}
+
+/**
+ * This component fetches then shows the name of a wallet.
+ * It inherits all the attributes of a HTML <span> component, hence you can style it just like how you would style a normal <span>
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletName  />
+ * </WalletProvider>
+ * ```
+ * Result:
+ * ```html
+ * <span>MetaMask</span>
+ * ```
+ *
+ * ### Show a loading sign when the name is being fetched
+ * ```tsx
+ * import { WalletProvider, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider {...props}>
+ *   <WalletName loadingComponent={<Spinner />} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Fallback to something when the name fails to resolve
+ * ```tsx
+ * <WalletProvider {...props}>
+ *   <WalletName fallbackComponent={<span>Failed to load</span>} />
+ * </WalletProvider>
+ * ```
+ *
+ * ### Custom query options for useQuery
+ * This component uses `@tanstack-query`'s useQuery internally.
+ * You can use the `queryOptions` prop for more fine-grained control
+ * ```tsx
+ * <WalletName
+ *   queryOptions={{
+ *     enabled: isEnabled,
+ *     retry: 4,
+ *   }}
+ * />
+ * @component
+ * @beta
+ * @wallet
+ */
+export function WalletName({
+  loadingComponent,
+  fallbackComponent,
+  queryOptions,
+  formatFn,
+  ...restProps
+}: WalletNameProps) {
+  const nameQuery = useWalletName({ queryOptions, formatFn });
+  if (nameQuery.isLoading) {
+    return loadingComponent || null;
+  }
+  if (!nameQuery.data) {
+    return fallbackComponent || null;
+  }
+  return <span {...restProps}>{nameQuery.data}</span>;
+}
+
+/**
+ * @internal
+ */
+function useWalletName(props: {
+  formatFn?: (str: string) => string;
+  queryOptions?: Omit<UseQueryOptions<string>, "queryFn" | "queryKey">;
+}) {
+  const { id } = useWalletContext();
+  const nameQuery = useQuery({
+    queryKey: getQueryKeys({ id, formatFn: props.formatFn }),
+    queryFn: async () => fetchWalletName({ id, formatFn: props.formatFn }),
+    ...props.queryOptions,
+  });
+  return nameQuery;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export function getQueryKeys(props: {
+  id: WalletId;
+  formatFn?: (str: string) => string;
+}) {
+  if (typeof props.formatFn === "function") {
+    return [
+      "walletName",
+      props.id,
+      { resolver: getFunctionId(props.formatFn) },
+    ] as const;
+  }
+  return ["walletName", props.id] as const;
+}
+
+/**
+ * @internal Exported for tests only
+ */
+export async function fetchWalletName(props: {
+  id: WalletId;
+  formatFn?: (str: string) => string;
+}) {
+  const info = await getWalletInfo(props.id);
+  if (typeof props.formatFn === "function") {
+    return props.formatFn(info.name);
+  }
+  return info.name;
+}

package/src/react/web/ui/prebuilt/Wallet/provider.test.tsx

@@ -0,0 +1,61 @@
+import { type FC, useContext } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, renderHook, screen } from "~test/react-render.js";
+import {
+  WalletProvider,
+  WalletProviderContext,
+  useWalletContext,
+} from "./provider.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("WalletProvider", () => {
+  it("useWalletContext should throw an error when used outside of WalletProvider", () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    expect(() => {
+      renderHook(() => useWalletContext());
+    }).toThrow(
+      "WalletProviderContext not found. Make sure you are using WalletIcon, WalletName, etc. inside a <WalletProvider /> component",
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("useWalletContext should return the context value when used within WalletProvider", () => {
+    const wrapper: FC = ({ children }: React.PropsWithChildren) => (
+      <WalletProvider id="io.metamask">{children}</WalletProvider>
+    );
+
+    const { result } = renderHook(() => useWalletContext(), { wrapper });
+
+    expect(result.current.id).toStrictEqual("io.metamask");
+  });
+
+  it("should render children correctly", () => {
+    render(
+      <WalletProvider id="io.metamask">
+        <div>Child Component</div>
+      </WalletProvider>,
+    );
+
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should provide context values to children", () => {
+    function WalletConsumer() {
+      const context = useContext(WalletProviderContext);
+      if (!context) {
+        return <div>No context</div>;
+      }
+      return <div>{String(context.id)}</div>;
+    }
+    render(
+      <WalletProvider id="io.metamask">
+        <WalletConsumer />
+      </WalletProvider>,
+    );
+
+    expect(screen.getByText("io.metamask")).toBeInTheDocument();
+  });
+});

package/src/react/web/ui/prebuilt/Wallet/provider.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext } from "react";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
+
+/**
+ * Props for the WalletProvider component
+ * @component
+ * @wallet
+ */
+export type WalletProviderProps = {
+  id: WalletId;
+};
+
+/**
+ * @internal Exported for tests only
+ */
+export const WalletProviderContext = /* @__PURE__ */ createContext<
+  WalletProviderProps | undefined
+>(undefined);
+
+/**
+/**
+ * A React context provider component that supplies Wallet-related data to its child components.
+ *
+ * This component serves as a wrapper around the `WalletProviderContext.Provider` and passes
+ * the provided wallet data down to all of its child components through the context API.
+ *
+ * @example
+ * ### Basic usage
+ * ```tsx
+ * import { WalletProvider, WalletIcon, WalletName } from "thirdweb/react";
+ *
+ * <WalletProvider id="io.metamask">
+ *   <WalletIcon />
+ *   <WalletName />
+ * </WalletProvider>
+ * ```
+ * @beta
+ * @component
+ * @wallet
+ */
+export function WalletProvider(
+  props: React.PropsWithChildren<WalletProviderProps>,
+) {
+  return (
+    <WalletProviderContext.Provider value={props}>
+      {props.children}
+    </WalletProviderContext.Provider>
+  );
+}
+
+/**
+ * @internal
+ */
+export function useWalletContext() {
+  const ctx = useContext(WalletProviderContext);
+  if (!ctx) {
+    throw new Error(
+      "WalletProviderContext not found. Make sure you are using WalletIcon, WalletName, etc. inside a <WalletProvider /> component",
+    );
+  }
+  return ctx;
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.78.0";
+export const version = "5.79.0-nightly-f91f6310e9396918d0ffc5217eeb4a44cef0b8c8-20241215000412";

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

@@ -1,6 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { SupportedSmsCountry } from "../../../../react/web/wallets/in-app/supported-sms-countries.js";
+import type { Prettify } from "../../../../utils/type-utils.js";
 import type { SmartWalletOptions } from "../../../smart/types.js";
 import type {
   AuthOption,
@@ -20,14 +21,12 @@ export type Ecosystem = {
   partnerId?: string;
 };
 
-export type InAppWalletConnectionOptions = (
-  | MultiStepAuthArgsType
-  | SingleStepAuthArgsType
-) & {
-  client: ThirdwebClient;
-  chain?: Chain;
-  redirect?: boolean;
-};
+export type InAppWalletConnectionOptions = Prettify<
+  (MultiStepAuthArgsType | SingleStepAuthArgsType) & {
+    client: ThirdwebClient;
+    chain?: Chain;
+  }
+>;
 
 export type InAppWalletAutoConnectOptions = {
   client: ThirdwebClient;