thirdweb 5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332 → 5.70.0

package/dist/cjs/react/core/social/useSocialProfiles.js

@@ -11,7 +11,7 @@ const profiles_js_1 = require("../../../social/profiles.js");
  * @returns A React Query result containing the social profiles.
  *
  * @example
- * ```ts
+ * ```tsx
  * import { useSocialProfiles } from "thirdweb/react";
  * const { data: profiles } = useSocialProfiles({
  *   client,

package/dist/cjs/react/web/ui/PayEmbed.js

@@ -13,26 +13,157 @@ const ExecutingScreen_js_1 = require("./TransactionButton/ExecutingScreen.js");
 const DynamicHeight_js_1 = require("./components/DynamicHeight.js");
 const Spinner_js_1 = require("./components/Spinner.js");
 /**
- * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card.
- *
- * PayEmbed also renders a "Connect" button if the user is not connected to a wallet. You can customize the options for "Connect" button using the `connectOptions` prop.
+ * Embed a prebuilt UI for funding wallets, purchases or transactions with crypto or fiat.
  *
  * @param props - Props of type [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) to configure the PayEmbed component.
  *
  * @example
+ * ### Default configuration
+ *
+ * By default, the `PayEmbed` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *  />
+ * ```
+ *
+ * ### Top up wallets
+ *
+ * You can set the `mode` option to `"fund_wallet"` to allow users to top up their wallets with crypto or fiat.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "fund_wallet",
+ *     metadata: {
+ *       name: "Get funds", // title of the payment modal
+ *     },
+ *     prefillBuy: {
+ *       chain: base, // chain to prefill the buy screen with
+ *       amount: "0.01", // amount to prefill the buy screen with
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Direct Payments
+ *
+ * You can set the `mode` option to `"direct_payment"` to allow users to make a direct payment to a wallet address.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={"light"}
+ *   payOptions={{
+ *     mode: "direct_payment",
+ *     paymentInfo: {
+ *       amount: "35",
+ *       chain: base,
+ *       token: getDefaultToken(base, "USDC"),
+ *       sellerAddress: "0x...", // the wallet address of the seller
+ *     },
+ *     metadata: {
+ *       name: "Black Hoodie (Size L)",
+ *       image: "/drip-hoodie.png",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Transactions
+ *
+ * You can set the `mode` option to `"transaction"` to allow users to execute a transaction with a different wallet, chain or token.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     // can be any transaction
+ *     transaction: claimTo({
+ *       contract: nftContract,
+ *       quantity: 1n,
+ *       tokenId: 0n,
+ *       to: "0x...",
+ *     }),
+ *     // this could be any metadata, including NFT metadata
+ *     metadata: {
+ *       name: "VIP Ticket",
+ *       image: "https://...",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * You can also handle ERC20 payments by passing `erc20value` to your transaction:
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     transaction: prepareContractCall({
+ *       contract: yourContract,
+ *       functionName: "purchase",
+ *       args: [arg1, arg2, ...],
+ *       erc20value: {
+ *         token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
+ *         amount: toUnits("100", 6), // the amount of erc20 token required to purchase
+ *       },
+ *     }),
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can disable the use of crypto or fiat by setting the `buyWithCrypto` or `buyWithFiat` options to `false`.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     buyWithFiat: false,
+ *   }}
+ *  />
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `PayEmbed` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `PayEmbed` component.
+ *
  * ```tsx
  * <PayEmbed
  *   client={client}
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
+ *       title: "Sign in",
  *     }
  *   }}
- *   payOptions={{
- *     buyWithCrypto: false,
- *   }}
- *  />
+ * />
  * ```
+ *
+ * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
+ *
  * @buyCrypto
  */
 function PayEmbed(props) {

package/dist/cjs/react/web/ui/PayEmbed.js.map

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

package/dist/cjs/react/web/ui/prebuilt/Account/address.js

@@ -38,7 +38,7 @@ const provider_js_1 = require("./provider.js");
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 function AccountAddress({ formatFn, ...restProps }) {

package/dist/cjs/react/web/ui/prebuilt/Account/avatar.js

@@ -91,7 +91,7 @@ const provider_js_1 = require("./provider.js");
  * ```
  * @returns An <img /> if the avatar is resolved successfully
  * @component
- * @account
+ * @wallet
  * @beta
  */
 function AccountAvatar({ socialType, resolverAddress, resolverChain, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/cjs/react/web/ui/prebuilt/Account/balance.js

@@ -78,7 +78,7 @@ const provider_js_1 = require("./provider.js");
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 function AccountBalance({ chain, tokenAddress, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/cjs/react/web/ui/prebuilt/Account/blobbie.js

@@ -8,6 +8,7 @@ const provider_js_1 = require("./provider.js");
  * A wrapper for the Blobbie component
  * @param props BlobbieProps
  * @beta
+ * @wallet
  */
 function AccountBlobbie(props) {
     const { address } = (0, provider_js_1.useAccountContext)();

package/dist/cjs/react/web/ui/prebuilt/Account/blobbie.js.map

@@ -1 +1 @@
-{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";;AAQA,wCAGC;;AAXD,+DAA4E;AAC5E,+CAAkD;AAElD;;;;GAIG;AACH,SAAgB,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,+BAAiB,GAAE,CAAC;IACxC,OAAO,uBAAC,oBAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC"}
+{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";;AASA,wCAGC;;AAZD,+DAA4E;AAC5E,+CAAkD;AAElD;;;;;GAKG;AACH,SAAgB,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,+BAAiB,GAAE,CAAC;IACxC,OAAO,uBAAC,oBAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC"}

package/dist/cjs/react/web/ui/prebuilt/Account/name.js

@@ -70,7 +70,7 @@ const provider_js_1 = require("./provider.js");
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 function AccountName({ resolverAddress, resolverChain, socialType, formatFn, queryOptions, loadingComponent, fallbackComponent, ...restProps }) {

package/dist/cjs/react/web/ui/prebuilt/Account/provider.js

@@ -24,7 +24,7 @@ const AccountProviderContext = /* @__PURE__ */ (0, react_1.createContext)(undefi
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 function AccountProvider(props) {

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

@@ -9,7 +9,6 @@ const provider_js_1 = require("./provider.js");
  * so you can style it just like how you would style a <span> element.
  * @returns A <span> element containing the name of the NFT
  *
- * @component
  * @example
  * ### Basic usage
  * ```tsx
@@ -48,6 +47,7 @@ const provider_js_1 = require("./provider.js");
  * ```
  *
  * @nft
+ * @component
  * @beta
  */
 function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = "5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332";
+exports.version = "5.70.0";
 //# sourceMappingURL=version.js.map

package/dist/cjs/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,wEAAwE,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,QAAQ,CAAC"}

package/dist/esm/react/core/social/useSocialProfiles.js

@@ -8,7 +8,7 @@ import { getSocialProfiles } from "../../../social/profiles.js";
  * @returns A React Query result containing the social profiles.
  *
  * @example
- * ```ts
+ * ```tsx
  * import { useSocialProfiles } from "thirdweb/react";
  * const { data: profiles } = useSocialProfiles({
  *   client,

package/dist/esm/react/web/ui/PayEmbed.js

@@ -10,26 +10,157 @@ import { ExecutingTxScreen } from "./TransactionButton/ExecutingScreen.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
 /**
- * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card.
- *
- * PayEmbed also renders a "Connect" button if the user is not connected to a wallet. You can customize the options for "Connect" button using the `connectOptions` prop.
+ * Embed a prebuilt UI for funding wallets, purchases or transactions with crypto or fiat.
  *
  * @param props - Props of type [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) to configure the PayEmbed component.
  *
  * @example
+ * ### Default configuration
+ *
+ * By default, the `PayEmbed` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *  />
+ * ```
+ *
+ * ### Top up wallets
+ *
+ * You can set the `mode` option to `"fund_wallet"` to allow users to top up their wallets with crypto or fiat.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "fund_wallet",
+ *     metadata: {
+ *       name: "Get funds", // title of the payment modal
+ *     },
+ *     prefillBuy: {
+ *       chain: base, // chain to prefill the buy screen with
+ *       amount: "0.01", // amount to prefill the buy screen with
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Direct Payments
+ *
+ * You can set the `mode` option to `"direct_payment"` to allow users to make a direct payment to a wallet address.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={"light"}
+ *   payOptions={{
+ *     mode: "direct_payment",
+ *     paymentInfo: {
+ *       amount: "35",
+ *       chain: base,
+ *       token: getDefaultToken(base, "USDC"),
+ *       sellerAddress: "0x...", // the wallet address of the seller
+ *     },
+ *     metadata: {
+ *       name: "Black Hoodie (Size L)",
+ *       image: "/drip-hoodie.png",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Transactions
+ *
+ * You can set the `mode` option to `"transaction"` to allow users to execute a transaction with a different wallet, chain or token.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     // can be any transaction
+ *     transaction: claimTo({
+ *       contract: nftContract,
+ *       quantity: 1n,
+ *       tokenId: 0n,
+ *       to: "0x...",
+ *     }),
+ *     // this could be any metadata, including NFT metadata
+ *     metadata: {
+ *       name: "VIP Ticket",
+ *       image: "https://...",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * You can also handle ERC20 payments by passing `erc20value` to your transaction:
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     transaction: prepareContractCall({
+ *       contract: yourContract,
+ *       functionName: "purchase",
+ *       args: [arg1, arg2, ...],
+ *       erc20value: {
+ *         token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
+ *         amount: toUnits("100", 6), // the amount of erc20 token required to purchase
+ *       },
+ *     }),
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can disable the use of crypto or fiat by setting the `buyWithCrypto` or `buyWithFiat` options to `false`.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     buyWithFiat: false,
+ *   }}
+ *  />
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `PayEmbed` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `PayEmbed` component.
+ *
  * ```tsx
  * <PayEmbed
  *   client={client}
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
+ *       title: "Sign in",
  *     }
  *   }}
- *   payOptions={{
- *     buyWithCrypto: false,
- *   }}
- *  />
+ * />
  * ```
+ *
+ * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
+ *
  * @buyCrypto
  */
 export function PayEmbed(props) {

package/dist/esm/react/web/ui/PayEmbed.js.map

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

package/dist/esm/react/web/ui/prebuilt/Account/address.js

@@ -35,7 +35,7 @@ import { useAccountContext } from "./provider.js";
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountAddress({ formatFn, ...restProps }) {

package/dist/esm/react/web/ui/prebuilt/Account/avatar.js

@@ -88,7 +88,7 @@ import { useAccountContext } from "./provider.js";
  * ```
  * @returns An <img /> if the avatar is resolved successfully
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountAvatar({ socialType, resolverAddress, resolverChain, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/esm/react/web/ui/prebuilt/Account/balance.js

@@ -75,7 +75,7 @@ import { useAccountContext } from "./provider.js";
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountBalance({ chain, tokenAddress, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/esm/react/web/ui/prebuilt/Account/blobbie.js

@@ -5,6 +5,7 @@ import { useAccountContext } from "./provider.js";
  * A wrapper for the Blobbie component
  * @param props BlobbieProps
  * @beta
+ * @wallet
  */
 export function AccountBlobbie(props) {
     const { address } = useAccountContext();

package/dist/esm/react/web/ui/prebuilt/Account/blobbie.js.map

@@ -1 +1 @@
-{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC"}
+{"version":3,"file":"blobbie.js","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAqB,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,KAAoC;IACjE,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACxC,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAClD,CAAC"}

package/dist/esm/react/web/ui/prebuilt/Account/name.js

@@ -67,7 +67,7 @@ import { useAccountContext } from "./provider.js";
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountName({ resolverAddress, resolverChain, socialType, formatFn, queryOptions, loadingComponent, fallbackComponent, ...restProps }) {

package/dist/esm/react/web/ui/prebuilt/Account/provider.js

@@ -20,7 +20,7 @@ const AccountProviderContext = /* @__PURE__ */ createContext(undefined);
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountProvider(props) {

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

@@ -6,7 +6,6 @@ import { useNFTContext } from "./provider.js";
  * so you can style it just like how you would style a <span> element.
  * @returns A <span> element containing the name of the NFT
  *
- * @component
  * @example
  * ### Basic usage
  * ```tsx
@@ -45,6 +44,7 @@ import { useNFTContext } from "./provider.js";
  * ```
  *
  * @nft
+ * @component
  * @beta
  */
 export function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }) {

package/dist/esm/version.js

@@ -1,2 +1,2 @@
-export const version = "5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332";
+export const version = "5.70.0";
 //# sourceMappingURL=version.js.map

package/dist/esm/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,wEAAwE,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC"}

package/dist/types/react/core/social/useSocialProfiles.d.ts

@@ -7,7 +7,7 @@ import type { ThirdwebClient } from "../../../client/client.js";
  * @returns A React Query result containing the social profiles.
  *
  * @example
- * ```ts
+ * ```tsx
  * import { useSocialProfiles } from "thirdweb/react";
  * const { data: profiles } = useSocialProfiles({
  *   client,

package/dist/types/react/web/ui/PayEmbed.d.ts

@@ -115,26 +115,157 @@ export type PayEmbedProps = {
     className?: string;
 };
 /**
- * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card.
- *
- * PayEmbed also renders a "Connect" button if the user is not connected to a wallet. You can customize the options for "Connect" button using the `connectOptions` prop.
+ * Embed a prebuilt UI for funding wallets, purchases or transactions with crypto or fiat.
  *
  * @param props - Props of type [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) to configure the PayEmbed component.
  *
  * @example
+ * ### Default configuration
+ *
+ * By default, the `PayEmbed` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *  />
+ * ```
+ *
+ * ### Top up wallets
+ *
+ * You can set the `mode` option to `"fund_wallet"` to allow users to top up their wallets with crypto or fiat.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "fund_wallet",
+ *     metadata: {
+ *       name: "Get funds", // title of the payment modal
+ *     },
+ *     prefillBuy: {
+ *       chain: base, // chain to prefill the buy screen with
+ *       amount: "0.01", // amount to prefill the buy screen with
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Direct Payments
+ *
+ * You can set the `mode` option to `"direct_payment"` to allow users to make a direct payment to a wallet address.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={"light"}
+ *   payOptions={{
+ *     mode: "direct_payment",
+ *     paymentInfo: {
+ *       amount: "35",
+ *       chain: base,
+ *       token: getDefaultToken(base, "USDC"),
+ *       sellerAddress: "0x...", // the wallet address of the seller
+ *     },
+ *     metadata: {
+ *       name: "Black Hoodie (Size L)",
+ *       image: "/drip-hoodie.png",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Transactions
+ *
+ * You can set the `mode` option to `"transaction"` to allow users to execute a transaction with a different wallet, chain or token.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     // can be any transaction
+ *     transaction: claimTo({
+ *       contract: nftContract,
+ *       quantity: 1n,
+ *       tokenId: 0n,
+ *       to: "0x...",
+ *     }),
+ *     // this could be any metadata, including NFT metadata
+ *     metadata: {
+ *       name: "VIP Ticket",
+ *       image: "https://...",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * You can also handle ERC20 payments by passing `erc20value` to your transaction:
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     transaction: prepareContractCall({
+ *       contract: yourContract,
+ *       functionName: "purchase",
+ *       args: [arg1, arg2, ...],
+ *       erc20value: {
+ *         token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
+ *         amount: toUnits("100", 6), // the amount of erc20 token required to purchase
+ *       },
+ *     }),
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can disable the use of crypto or fiat by setting the `buyWithCrypto` or `buyWithFiat` options to `false`.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     buyWithFiat: false,
+ *   }}
+ *  />
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `PayEmbed` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `PayEmbed` component.
+ *
  * ```tsx
  * <PayEmbed
  *   client={client}
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
+ *       title: "Sign in",
  *     }
  *   }}
- *   payOptions={{
- *     buyWithCrypto: false,
- *   }}
- *  />
+ * />
  * ```
+ *
+ * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
+ *
  * @buyCrypto
  */
 export declare function PayEmbed(props: PayEmbedProps): import("react/jsx-runtime.js").JSX.Element;

package/dist/types/react/web/ui/PayEmbed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PayEmbed.d.ts","sourceRoot":"","sources":["../../../../../src/react/web/ui/PayEmbed.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EACV,iCAAiC,EACjC,YAAY,EACb,MAAM,mDAAmD,CAAC;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAOzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAEjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IAExC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8CA8F5C;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,iCAAiC,CAAC;IAEjD;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAExC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;;;;;;;OASG;IACH,WAAW,CAAC,EACR;QACE,OAAO,EAAE,MAAM,CAAC;KACjB,GACD,OAAO,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAEjB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC"}
+{"version":3,"file":"PayEmbed.d.ts","sourceRoot":"","sources":["../../../../../src/react/web/ui/PayEmbed.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,KAAK,EACV,iCAAiC,EACjC,YAAY,EACb,MAAM,mDAAmD,CAAC;AAE3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAOzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;;;;;;;;;;;;OAcG;IACH,MAAM,EAAE,cAAc,CAAC;IACvB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAEjC;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IAExC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyJG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8CA8F5C;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,YAAY,CAAC,EAAE,iCAAiC,CAAC;IAEjD;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAExC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;;;;;;;OASG;IACH,WAAW,CAAC,EACR;QACE,OAAO,EAAE,MAAM,CAAC;KACjB,GACD,OAAO,CAAC;IAEZ;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IAEjB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC"}

package/dist/types/react/web/ui/prebuilt/Account/address.d.ts

@@ -1,6 +1,6 @@
 /**
  * @component
- * @account
+ * @wallet
  */
 export interface AccountAddressProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
@@ -45,7 +45,7 @@ export interface AccountAddressProps extends Omit<React.HTMLAttributes<HTMLSpanE
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export declare function AccountAddress({ formatFn, ...restProps }: AccountAddressProps): import("react/jsx-runtime.js").JSX.Element;

package/dist/types/react/web/ui/prebuilt/Account/avatar.d.ts

@@ -6,7 +6,7 @@ import type { SocialProfile } from "../../../../../social/types.js";
 /**
  * Props for the AccountAvatar component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountAvatarProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src">, Omit<ResolveNameOptions, "client" | "address"> {
     /**
@@ -135,7 +135,7 @@ export interface AccountAvatarProps extends Omit<React.ImgHTMLAttributes<HTMLIma
  * ```
  * @returns An <img /> if the avatar is resolved successfully
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export declare function AccountAvatar({ socialType, resolverAddress, resolverChain, loadingComponent, fallbackComponent, queryOptions, ...restProps }: AccountAvatarProps): import("react/jsx-runtime.js").JSX.Element | null;

package/dist/types/react/web/ui/prebuilt/Account/balance.d.ts

@@ -6,7 +6,7 @@ import { type GetWalletBalanceResult } from "../../../../../wallets/utils/getWal
 /**
  * Props for the AccountBalance component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountBalanceProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
@@ -130,7 +130,7 @@ export interface AccountBalanceProps extends Omit<React.HTMLAttributes<HTMLSpanE
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export declare function AccountBalance({ chain, tokenAddress, formatFn, loadingComponent, fallbackComponent, queryOptions, ...restProps }: AccountBalanceProps): import("react/jsx-runtime.js").JSX.Element | null;

package/dist/types/react/web/ui/prebuilt/Account/blobbie.d.ts

@@ -3,6 +3,7 @@ import { type BlobbieProps } from "../../ConnectWallet/Blobbie.js";
  * A wrapper for the Blobbie component
  * @param props BlobbieProps
  * @beta
+ * @wallet
  */
 export declare function AccountBlobbie(props: Omit<BlobbieProps, "address">): import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=blobbie.d.ts.map

package/dist/types/react/web/ui/prebuilt/Account/blobbie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blobbie.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG5E;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,8CAGlE"}
+{"version":3,"file":"blobbie.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/prebuilt/Account/blobbie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG5E;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,8CAGlE"}

package/dist/types/react/web/ui/prebuilt/Account/name.d.ts

@@ -6,7 +6,7 @@ import type { SocialProfile } from "../../../../../social/types.js";
 /**
  * Props for the AccountName component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, Omit<ResolveNameOptions, "client" | "address"> {
     /**
@@ -112,7 +112,7 @@ export interface AccountNameProps extends Omit<React.HTMLAttributes<HTMLSpanElem
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export declare function AccountName({ resolverAddress, resolverChain, socialType, formatFn, queryOptions, loadingComponent, fallbackComponent, ...restProps }: AccountNameProps): import("react/jsx-runtime.js").JSX.Element | null;

package/dist/types/react/web/ui/prebuilt/Account/provider.d.ts

@@ -4,7 +4,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 /**
  * Props for the <AccountProvider /> component
  * @component
- * @account
+ * @wallet
  */
 export type AccountProviderProps = {
     /**
@@ -34,7 +34,7 @@ export type AccountProviderProps = {
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export declare function AccountProvider(props: React.PropsWithChildren<AccountProviderProps>): import("react/jsx-runtime.js").JSX.Element;

package/dist/types/react/web/ui/prebuilt/NFT/name.d.ts

@@ -14,7 +14,6 @@ export interface NFTNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * so you can style it just like how you would style a <span> element.
  * @returns A <span> element containing the name of the NFT
  *
- * @component
  * @example
  * ### Basic usage
  * ```tsx
@@ -53,6 +52,7 @@ export interface NFTNameProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  * ```
  *
  * @nft
+ * @component
  * @beta
  */
 export declare function NFTName({ loadingComponent, fallbackComponent, queryOptions, ...restProps }: NFTNameProps): import("react/jsx-runtime.js").JSX.Element | null;

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332";
+export declare const version = "5.70.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/types/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332",
+  "version": "5.70.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/react/core/social/useSocialProfiles.ts

@@ -10,7 +10,7 @@ import { getSocialProfiles } from "../../../social/profiles.js";
  * @returns A React Query result containing the social profiles.
  *
  * @example
- * ```ts
+ * ```tsx
  * import { useSocialProfiles } from "thirdweb/react";
  * const { data: profiles } = useSocialProfiles({
  *   client,

package/src/react/web/ui/PayEmbed.tsx

@@ -136,26 +136,157 @@ export type PayEmbedProps = {
 };
 
 /**
- * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card.
- *
- * PayEmbed also renders a "Connect" button if the user is not connected to a wallet. You can customize the options for "Connect" button using the `connectOptions` prop.
+ * Embed a prebuilt UI for funding wallets, purchases or transactions with crypto or fiat.
  *
  * @param props - Props of type [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) to configure the PayEmbed component.
  *
  * @example
+ * ### Default configuration
+ *
+ * By default, the `PayEmbed` component will allows users to fund their wallets with crypto or fiat on any of the supported chains..
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *  />
+ * ```
+ *
+ * ### Top up wallets
+ *
+ * You can set the `mode` option to `"fund_wallet"` to allow users to top up their wallets with crypto or fiat.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "fund_wallet",
+ *     metadata: {
+ *       name: "Get funds", // title of the payment modal
+ *     },
+ *     prefillBuy: {
+ *       chain: base, // chain to prefill the buy screen with
+ *       amount: "0.01", // amount to prefill the buy screen with
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Direct Payments
+ *
+ * You can set the `mode` option to `"direct_payment"` to allow users to make a direct payment to a wallet address.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={"light"}
+ *   payOptions={{
+ *     mode: "direct_payment",
+ *     paymentInfo: {
+ *       amount: "35",
+ *       chain: base,
+ *       token: getDefaultToken(base, "USDC"),
+ *       sellerAddress: "0x...", // the wallet address of the seller
+ *     },
+ *     metadata: {
+ *       name: "Black Hoodie (Size L)",
+ *       image: "/drip-hoodie.png",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Transactions
+ *
+ * You can set the `mode` option to `"transaction"` to allow users to execute a transaction with a different wallet, chain or token.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     // can be any transaction
+ *     transaction: claimTo({
+ *       contract: nftContract,
+ *       quantity: 1n,
+ *       tokenId: 0n,
+ *       to: "0x...",
+ *     }),
+ *     // this could be any metadata, including NFT metadata
+ *     metadata: {
+ *       name: "VIP Ticket",
+ *       image: "https://...",
+ *     },
+ *   }}
+ *  />
+ * ```
+ *
+ * You can also handle ERC20 payments by passing `erc20value` to your transaction:
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     mode: "transaction",
+ *     transaction: prepareContractCall({
+ *       contract: yourContract,
+ *       functionName: "purchase",
+ *       args: [arg1, arg2, ...],
+ *       erc20value: {
+ *         token: USDC_TOKEN_ADDRESS, // the erc20 token required to purchase
+ *         amount: toUnits("100", 6), // the amount of erc20 token required to purchase
+ *       },
+ *     }),
+ *   }}
+ *  />
+ * ```
+ *
+ * ### Enable/Disable payment methods
+ *
+ * You can disable the use of crypto or fiat by setting the `buyWithCrypto` or `buyWithFiat` options to `false`.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   payOptions={{
+ *     buyWithFiat: false,
+ *   }}
+ *  />
+ *
+ * ### Customize the UI
+ *
+ * You can customize the UI of the `PayEmbed` component by passing a custom theme object to the `theme` prop.
+ *
+ * ```tsx
+ * <PayEmbed
+ *   client={client}
+ *   theme={darkTheme({
+ *     colors: {
+ *       modalBg: "red",
+ *     },
+ *   })}
+ * />
+ * ```
+ *
+ * Refer to the [`Theme`](https://portal.thirdweb.com/references/typescript/v5/Theme) type for more details.
+ *
+ * ### Configure the wallet connection
+ *
+ * You can customize the wallet connection flow by passing a `connectOptions` object to the `PayEmbed` component.
+ *
  * ```tsx
  * <PayEmbed
  *   client={client}
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
+ *       title: "Sign in",
  *     }
  *   }}
- *   payOptions={{
- *     buyWithCrypto: false,
- *   }}
- *  />
+ * />
  * ```
+ *
+ * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
+ *
  * @buyCrypto
  */
 export function PayEmbed(props: PayEmbedProps) {

package/src/react/web/ui/prebuilt/Account/address.tsx

@@ -4,7 +4,7 @@ import { useAccountContext } from "./provider.js";
 
 /**
  * @component
- * @account
+ * @wallet
  */
 export interface AccountAddressProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
@@ -51,7 +51,7 @@ export interface AccountAddressProps
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountAddress({

package/src/react/web/ui/prebuilt/Account/avatar.tsx

@@ -16,7 +16,7 @@ import { useAccountContext } from "./provider.js";
 /**
  * Props for the AccountAvatar component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountAvatarProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src">,
@@ -150,7 +150,7 @@ export interface AccountAvatarProps
  * ```
  * @returns An <img /> if the avatar is resolved successfully
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountAvatar({

package/src/react/web/ui/prebuilt/Account/balance.tsx

@@ -14,7 +14,7 @@ import { useAccountContext } from "./provider.js";
 /**
  * Props for the AccountBalance component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountBalanceProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
@@ -143,7 +143,7 @@ export interface AccountBalanceProps
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountBalance({

package/src/react/web/ui/prebuilt/Account/blobbie.tsx

@@ -5,6 +5,7 @@ import { useAccountContext } from "./provider.js";
  * A wrapper for the Blobbie component
  * @param props BlobbieProps
  * @beta
+ * @wallet
  */
 export function AccountBlobbie(props: Omit<BlobbieProps, "address">) {
   const { address } = useAccountContext();

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

@@ -14,7 +14,7 @@ import { useAccountContext } from "./provider.js";
 /**
  * Props for the AccountName component
  * @component
- * @account
+ * @wallet
  */
 export interface AccountNameProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">,
@@ -123,7 +123,7 @@ export interface AccountNameProps
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountName({

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

@@ -7,7 +7,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 /**
  * Props for the <AccountProvider /> component
  * @component
- * @account
+ * @wallet
  */
 export type AccountProviderProps = {
   /**
@@ -42,7 +42,7 @@ const AccountProviderContext = /* @__PURE__ */ createContext<
  * ```
  *
  * @component
- * @account
+ * @wallet
  * @beta
  */
 export function AccountProvider(

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

@@ -19,7 +19,6 @@ export interface NFTNameProps
  * so you can style it just like how you would style a <span> element.
  * @returns A <span> element containing the name of the NFT
  *
- * @component
  * @example
  * ### Basic usage
  * ```tsx
@@ -58,6 +57,7 @@ export interface NFTNameProps
  * ```
  *
  * @nft
+ * @component
  * @beta
  */
 export function NFTName({

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.70.0-nightly-ecaa304a812188da3c81888bb52ca6064093c139-20241121000332";
+export const version = "5.70.0";