thirdweb 5.69.0 → 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332

package/src/wallets/in-app/web/ecosystem.ts

@@ -7,30 +7,21 @@ import type {
 import { createInAppWallet } from "../core/wallet/in-app-core.js";
 
 /**
- * Creates an [Ecosystem Wallet](https://portal.thirdweb.com/connect/ecosystems/overview) based on various authentication methods.
- *
- * Available authentication methods:
- * - Email
- * - Phone
- * - Passkey
- * - Google
- * - Apple
- * - Facebook
- * - Discord
- * - LINE
- * - X
- * - Farcaster
+ * Creates an [Ecosystem Wallet](https://portal.thirdweb.com/connect/ecosystems/overview) based on various authentication methods. Full list of available authentication methods [here](/connect/wallet/sign-in-methods/overview).
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.
  *
- * Refer to [inAppWallet](https://portal.thirdweb.com/references/typescript/v5/inAppWallet) for detailed usage examples.
+ * Refer to [inAppWallet](/typescript/v5/inAppWallet) for detailed usage examples.
  *
  * @param createOptions - configuration options
  * Refer to [EcosystemWalletCreationOptions](https://portal.thirdweb.com/references/typescript/v5/EcosystemWalletCreationOptions) for more details.
  * @returns The created ecosystem wallet.
+ *
+ *
  * @example
+ * ### Logging into an ecosystem wallet
  *
- * ### Connect to an ecosystem wallet
+ * Below is the general code snippet needed to connect via a given auth strategy to an ecosystem wallet. For more variants on the various auth strategies, refer to [inAppWallet](/typescript/v5/inAppWallet).
  *
  * ```ts
  * import { ecosystemWallet } from "thirdweb/wallets";
@@ -44,7 +35,7 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * });
  * ```
  *
- * [View all connection options](https://portal.thirdweb.com/references/typescript/v5/EcosystemWalletConnectionOptions)
+ * [View all connection options](https://portal.thirdweb.com/references/typescript/v5/EcosystemWalletConnectionOptions).
  *
  * ### Connect to a restricted ecosystem wallet with your designated partner ID
  *
@@ -57,7 +48,6 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * });
  * ```
  *
- * Refer to [inAppWallet](https://portal.thirdweb.com/references/typescript/v5/inAppWallet) for more usage examples.
  *
  * @wallet
  */

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

@@ -4,22 +4,7 @@ import type { CreateWalletArgs } from "../../wallet-types.js";
 import { createInAppWallet } from "../core/wallet/in-app-core.js";
 
 /**
- * Creates an app scoped wallet for users based on various authentication methods.
- *
- * Available authentication methods:
- * - Email
- * - Phone
- * - Passkey
- * - Guest
- * - Google
- * - Apple
- * - Facebook
- * - Discord
- * - Coinbase
- * - Telegram
- * - LINE
- * - X
- * - Farcaster
+ * Creates an app scoped wallet for users based on various authentication methods. Full list of available authentication methods [here](https://portal.thirdweb.com/connect/wallet/sign-in-methods/overview).
  *
  * Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.
  *
@@ -42,7 +27,7 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  * });
  * ```
  *
- * [View all available social auth methods](https://portal.thirdweb.com/references/typescript/v5/InAppWalletSocialAuth)
+ * [View all available social auth methods](https://portal.thirdweb.com/connect/wallet/sign-in-methods/overview)
  *
  * ### Login with email
  *

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

@@ -194,6 +194,7 @@ export async function authenticateWithRedirect(
  * ```ts
  * import { linkProfile } from "thirdweb/wallets";
  *
+ * // optionally specify the ecosystem if you're linking an ecosystem wallet
  * await linkProfile({ client, strategy: "discord" });
  * ```
  * @wallet

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

@@ -1,4 +1,4 @@
-import { client } from "@passwordless-id/webauthn";
+import { client, parsers } from "@passwordless-id/webauthn";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { webLocalStorage } from "../../../../../utils/storage/webStorage.js";
 import {
@@ -25,22 +25,26 @@ export class PasskeyWebClient implements PasskeyClient {
     rp: RpInfo;
   }): Promise<RegisterResult> {
     const { name, challenge, rp } = args;
-    const registration = await client.register(name, challenge, {
-      authenticatorType: "auto",
+    const registration = await client.register({
+      user: name,
+      challenge,
       userVerification: "required",
       domain: rp.id,
       attestation: true,
-      debug: false,
     });
-    const clientDataB64 = base64UrlToBase64(registration.clientData);
+    const clientDataB64 = base64UrlToBase64(
+      registration.response.clientDataJSON,
+    );
     const clientDataParsed = JSON.parse(base64ToString(clientDataB64));
     return {
-      authenticatorData: registration.authenticatorData,
-      credentialId: registration.credential.id,
-      clientData: registration.clientData,
+      authenticatorData: registration.response.authenticatorData,
+      credentialId: registration.id,
+      clientData: registration.response.clientDataJSON,
       credential: {
-        publicKey: registration.credential.publicKey,
-        algorithm: registration.credential.algorithm,
+        publicKey: registration.response.publicKey,
+        algorithm: parsers.getAlgoName(
+          registration.response.publicKeyAlgorithm,
+        ),
       },
       origin: clientDataParsed.origin,
     };
@@ -52,22 +56,19 @@ export class PasskeyWebClient implements PasskeyClient {
     rp: RpInfo;
   }): Promise<AuthenticateResult> {
     const { credentialId, challenge, rp } = args;
-    const result = await client.authenticate(
-      credentialId ? [credentialId] : [],
+    const result = await client.authenticate({
+      allowCredentials: credentialId ? [credentialId] : [],
       challenge,
-      {
-        authenticatorType: "auto",
-        userVerification: "required",
-        domain: rp.id,
-      },
-    );
-    const clientDataB64 = base64UrlToBase64(result.clientData);
+      userVerification: "required",
+      domain: rp.id,
+    });
+    const clientDataB64 = base64UrlToBase64(result.response.clientDataJSON);
     const clientDataParsed = JSON.parse(base64ToString(clientDataB64));
     return {
-      authenticatorData: result.authenticatorData,
-      credentialId: result.credentialId,
-      clientData: result.clientData,
-      signature: result.signature,
+      authenticatorData: result.response.authenticatorData,
+      credentialId: result.id,
+      clientData: result.response.clientDataJSON,
+      signature: result.response.signature,
       origin: clientDataParsed.origin,
     };
   }

package/src/wallets/smart/smart-wallet.ts

@@ -83,6 +83,7 @@ import { getDefaultAccountFactory } from "./lib/constants.js";
  *  sponsorGas: true, // enable sponsored transactions
  *  factoryAddress: "0x...", // custom factory address
  * });
+ * ```
  *
  * ## Using v0.7 Entrypoint
  *

package/dist/cjs/react/web/ui/prebuilt/NFT/NFT.js

@@ -1,217 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NFTProviderContext = void 0;
-exports.NFT = NFT;
-exports.getNFTInfo = getNFTInfo;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const getNFT_js_1 = require("../../../../../extensions/erc721/read/getNFT.js");
-const getNFT_js_2 = require("../../../../../extensions/erc1155/read/getNFT.js");
-const MediaRenderer_js_1 = require("../../MediaRenderer/MediaRenderer.js");
-/**
- * @internal
- */
-exports.NFTProviderContext = (0, react_1.createContext)(undefined);
-/**
- * A React context provider component that supplies NFT-related data to its child components.
- *
- * This component serves as a wrapper around the `NFTProviderContext.Provider` and passes
- * the provided NFT data down to all of its child components through the context API.
- *
- *
- * @component
- * @param {React.PropsWithChildren<NFTProviderProps>} props - The props for the NFT provider
- *
- * @example
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const contract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={contract} tokenId={0n}>
- *   <Suspense fallback={"Loading media..."}>
- *     <NFT.Media />
- *     <NFT.Description />
- *   </Suspense>
- * </NFT>
- * ```
- */
-function NFT(props) {
-    return ((0, jsx_runtime_1.jsx)(exports.NFTProviderContext.Provider, { value: props, children: props.children }));
-}
-/**
- * @internal
- */
-function useNFTContext() {
-    const ctx = (0, react_1.useContext)(exports.NFTProviderContext);
-    if (!ctx) {
-        throw new Error("NFTProviderContext not found. Make sure you are using NFT.Media, NFT.Description, etc. inside a <NFT /> component");
-    }
-    return ctx;
-}
-/**
- * This component fetches and displays an NFT's media. It uses thirdweb [`MediaRenderer`](https://portal.thirdweb.com/react/v5/components/MediaRenderer) under the hood
- * so you can style it just like how you would style a MediaRenderer.
- * @returns A MediaRenderer component
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the media for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading media..."}>
- *     <NFT.Media />
- *   </Suspense>
- * </NFT>
- * ```
- *
- * ### Basic stylings
- * You can style NFT.Media with the `style` and `className` props.
- * ```tsx
- * <NFT.Media style={{ borderRadius: "8px" }} className="mx-auto" />
- * ```
- */
-NFT.Media = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = (0, react_query_1.useSuspenseQuery)({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const animation_url = nftQuery.data?.metadata.animation_url;
-    const image = nftQuery.data?.metadata.image || nftQuery.data?.metadata.image_url;
-    return ((0, jsx_runtime_1.jsx)(MediaRenderer_js_1.MediaRenderer, { client: contract.client, src: animation_url || image, poster: image, ...props }));
-};
-/**
- * This component fetches and displays an NFT's name. It takes in a `className` and `style` props
- * so you can style it just like how you would style a <span> element.
- * @returns A <span> element containing the name of the NFT
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the name for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading nft name..."}>
- *     <NFT.Name className="mx-auto" style={{ color: "red" }} />
- *   </Suspense>
- * </NFT>
- * ```
- */
-NFT.Name = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = (0, react_query_1.useSuspenseQuery)({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const name = nftQuery.data?.metadata.name || "";
-    return (0, jsx_runtime_1.jsx)("span", { ...props, children: name });
-};
-/**
- * This component fetches and displays an NFT's description. It takes in a `className` and `style` props
- * so you can style it just like how you would style a <span> element.
- * @returns A <span> element containing the description of the NFT
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the description for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading description..."}>
- *     <NFT.Description className="mx-auto" style={{ color: "red" }} />
- *   </Suspense>
- * </NFT>
- * ```
- */
-NFT.Description = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = (0, react_query_1.useSuspenseQuery)({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const description = nftQuery.data?.metadata.description || "";
-    return (0, jsx_runtime_1.jsx)("span", { ...props, children: description });
-};
-/**
- * @internal
- */
-async function getNFTInfo(options) {
-    const nft = await Promise.allSettled([
-        (0, getNFT_js_1.getNFT)(options),
-        (0, getNFT_js_2.getNFT)(options),
-    ]).then(([possibleNFT721, possibleNFT1155]) => {
-        // getNFT extension always return an NFT object
-        // so we need to check if the tokenURI exists
-        if (possibleNFT721.status === "fulfilled" &&
-            possibleNFT721.value.tokenURI) {
-            return possibleNFT721.value;
-        }
-        if (possibleNFT1155.status === "fulfilled" &&
-            possibleNFT1155.value.tokenURI) {
-            return possibleNFT1155.value;
-        }
-        throw new Error("Failed to load NFT metadata");
-    });
-    return nft;
-}
-//# sourceMappingURL=NFT.js.map

package/dist/cjs/react/web/ui/prebuilt/NFT/NFT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NFT.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/NFT.tsx"],"names":[],"mappings":"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"}

package/dist/esm/react/web/ui/prebuilt/NFT/NFT.js

@@ -1,212 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
-import { getNFT as getNFT721 } from "../../../../../extensions/erc721/read/getNFT.js";
-import { getNFT as getNFT1155 } from "../../../../../extensions/erc1155/read/getNFT.js";
-import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
-/**
- * @internal
- */
-export const NFTProviderContext = /* @__PURE__ */ createContext(undefined);
-/**
- * A React context provider component that supplies NFT-related data to its child components.
- *
- * This component serves as a wrapper around the `NFTProviderContext.Provider` and passes
- * the provided NFT data down to all of its child components through the context API.
- *
- *
- * @component
- * @param {React.PropsWithChildren<NFTProviderProps>} props - The props for the NFT provider
- *
- * @example
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const contract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={contract} tokenId={0n}>
- *   <Suspense fallback={"Loading media..."}>
- *     <NFT.Media />
- *     <NFT.Description />
- *   </Suspense>
- * </NFT>
- * ```
- */
-export function NFT(props) {
-    return (_jsx(NFTProviderContext.Provider, { value: props, children: props.children }));
-}
-/**
- * @internal
- */
-function useNFTContext() {
-    const ctx = useContext(NFTProviderContext);
-    if (!ctx) {
-        throw new Error("NFTProviderContext not found. Make sure you are using NFT.Media, NFT.Description, etc. inside a <NFT /> component");
-    }
-    return ctx;
-}
-/**
- * This component fetches and displays an NFT's media. It uses thirdweb [`MediaRenderer`](https://portal.thirdweb.com/react/v5/components/MediaRenderer) under the hood
- * so you can style it just like how you would style a MediaRenderer.
- * @returns A MediaRenderer component
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the media for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading media..."}>
- *     <NFT.Media />
- *   </Suspense>
- * </NFT>
- * ```
- *
- * ### Basic stylings
- * You can style NFT.Media with the `style` and `className` props.
- * ```tsx
- * <NFT.Media style={{ borderRadius: "8px" }} className="mx-auto" />
- * ```
- */
-NFT.Media = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = useSuspenseQuery({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const animation_url = nftQuery.data?.metadata.animation_url;
-    const image = nftQuery.data?.metadata.image || nftQuery.data?.metadata.image_url;
-    return (_jsx(MediaRenderer, { client: contract.client, src: animation_url || image, poster: image, ...props }));
-};
-/**
- * This component fetches and displays an NFT's name. It takes in a `className` and `style` props
- * so you can style it just like how you would style a <span> element.
- * @returns A <span> element containing the name of the NFT
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the name for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading nft name..."}>
- *     <NFT.Name className="mx-auto" style={{ color: "red" }} />
- *   </Suspense>
- * </NFT>
- * ```
- */
-NFT.Name = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = useSuspenseQuery({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const name = nftQuery.data?.metadata.name || "";
-    return _jsx("span", { ...props, children: name });
-};
-/**
- * This component fetches and displays an NFT's description. It takes in a `className` and `style` props
- * so you can style it just like how you would style a <span> element.
- * @returns A <span> element containing the description of the NFT
- *
- * Since this component has an internal loading state (for when the NFT media is being fetched),
- * you must wrap it with React.Suspense to make it work.
- *
- * @component
- * @example
- * ### Basic usage
- * ```tsx
- * import { getContract } from "thirdweb";
- * import { NFT } from "thirdweb/react";
- *
- * const nftContract = getContract({
- *   address: "0x...",
- *   chain: ethereum,
- *   client: yourThirdwebClient,
- * });
- *
- * <NFT contract={nftContract} tokenId={0n}>
- *   This will show the description for tokenId #0 from the `nftContract` collection
- *   <Suspense fallback={"Loading description..."}>
- *     <NFT.Description className="mx-auto" style={{ color: "red" }} />
- *   </Suspense>
- * </NFT>
- * ```
- */
-NFT.Description = (props) => {
-    const { contract, tokenId } = useNFTContext();
-    const nftQuery = useSuspenseQuery({
-        queryKey: [
-            "__nft_info_internal__",
-            contract.chain.id,
-            contract.address,
-            tokenId.toString(),
-        ],
-        queryFn: () => getNFTInfo({ contract, tokenId }),
-    });
-    const description = nftQuery.data?.metadata.description || "";
-    return _jsx("span", { ...props, children: description });
-};
-/**
- * @internal
- */
-export async function getNFTInfo(options) {
-    const nft = await Promise.allSettled([
-        getNFT721(options),
-        getNFT1155(options),
-    ]).then(([possibleNFT721, possibleNFT1155]) => {
-        // getNFT extension always return an NFT object
-        // so we need to check if the tokenURI exists
-        if (possibleNFT721.status === "fulfilled" &&
-            possibleNFT721.value.tokenURI) {
-            return possibleNFT721.value;
-        }
-        if (possibleNFT1155.status === "fulfilled" &&
-            possibleNFT1155.value.tokenURI) {
-            return possibleNFT1155.value;
-        }
-        throw new Error("Failed to load NFT metadata");
-    });
-    return nft;
-}
-//# sourceMappingURL=NFT.js.map

package/dist/esm/react/web/ui/prebuilt/NFT/NFT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NFT.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/NFT/NFT.tsx"],"names":[],"mappings":"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"}