thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.0

package/dist/types/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletSwitcherDrawerContent.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAShF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IACjD,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB,8CA8CA"}
+{"version":3,"file":"WalletSwitcherDrawerContent.d.ts","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mDAAmD,CAAC;AAchF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE;IACjD,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB,8CAsDA"}

package/dist/types/react/web/ui/ConnectWallet/screens/nativeToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeToken.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/nativeToken.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,WAAmC,CAAC;AAE/D;;GAEG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,WAAW,GACtC,KAAK,IAAI,WAAW,CAEtB;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC"}
+{"version":3,"file":"nativeToken.d.ts","sourceRoot":"","sources":["../../../../../../../src/react/web/ui/ConnectWallet/screens/nativeToken.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,WAAmC,CAAC;AAE/D;;GAEG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,WAAW,GACtC,KAAK,IAAI,WAAW,CAKtB;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,WAAW,CAAC"}

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

@@ -107,12 +107,6 @@ export type PayEmbedProps = {
      * Refer to the [`PayEmbedConnectOptions`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions) type for more details.
      */
     connectOptions?: PayEmbedConnectOptions;
-    /**
-     * Customize the display of the PayEmbed UI.
-     */
-    metadata?: {
-        title?: string;
-    };
     style?: React.CSSProperties;
 };
 /**

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;AAEtD,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;AAE7D,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;AAC3D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;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,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8CA+E5C;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;AAEtD,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;AAE7D,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;AAC3D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;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,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8CAqF5C;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/TransactionButton/ExecutingScreen.d.ts

@@ -0,0 +1,9 @@
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+export declare function ExecutingTxScreen(props: {
+    tx: PreparedTransaction;
+    closeModal: () => void;
+    onTxSent: (data: WaitForReceiptOptions) => void;
+    onBack?: () => void;
+}): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=ExecutingScreen.d.ts.map

package/dist/types/react/web/ui/TransactionButton/ExecutingScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutingScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/TransactionButton/ExecutingScreen.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAW1F,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,EAAE,EAAE,mBAAmB,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,8CA0GA"}

package/dist/types/react/web/ui/TransactionButton/TransactionModal.d.ts

@@ -0,0 +1,24 @@
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import type { LocaleId } from "../types.js";
+export type ModalProps = {
+    title: string;
+    onComplete: () => void;
+    onClose: () => void;
+    client: ThirdwebClient;
+    localeId: LocaleId;
+    supportedTokens?: SupportedTokens;
+    theme: Theme | "light" | "dark";
+    tx: PreparedTransaction;
+    payOptions: PayUIOptions;
+    onTxSent: (data: WaitForReceiptOptions) => void;
+};
+export declare function TransactionModal(props: ModalProps): import("react/jsx-runtime.js").JSX.Element;
+export declare function TransactionModalContent(props: ModalProps & {
+    onBack?: () => void;
+}): import("react/jsx-runtime.js").JSX.Element;
+//# sourceMappingURL=TransactionModal.d.ts.map

package/dist/types/react/web/ui/TransactionButton/TransactionModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionModal.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/TransactionButton/TransactionModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAE1F,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAK5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAChC,EAAE,EAAE,mBAAmB,CAAC;IACxB,UAAU,EAAE,YAAY,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,8CAgBjD;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,8CAmC5C"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343";
+export declare const version = "5.40.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.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343",
+  "version": "5.40.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/exports/react.ts

@@ -29,7 +29,10 @@ export type {
   SupportedTokens,
   TokenInfo,
 } from "../react/core/utils/defaultTokens.js";
-export { defaultTokens } from "../react/core/utils/defaultTokens.js";
+export {
+  defaultTokens,
+  getDefaultToken,
+} from "../react/core/utils/defaultTokens.js";
 
 // Media Renderer
 export { MediaRenderer } from "../react/web/ui/MediaRenderer/MediaRenderer.js";
@@ -121,7 +124,13 @@ export {
   type PayEmbedProps,
   type PayEmbedConnectOptions,
 } from "../react/web/ui/PayEmbed.js";
-export type { PayUIOptions } from "../react/core/hooks/connection/ConnectButtonProps.js";
+export type {
+  PayUIOptions,
+  PaymentInfo,
+  DirectPaymentOptions,
+  FundWalletOptions,
+  TranasctionOptions,
+} from "../react/core/hooks/connection/ConnectButtonProps.js";
 
 export {
   useConnectModal,
@@ -141,6 +150,9 @@ export {
   type UseNetworkSwitcherModalOptions,
 } from "../react/web/ui/ConnectWallet/NetworkSelector.js";
 
+// ens
+export { useEnsName, useEnsAvatar } from "../react/core/utils/wallet.js";
+
 /**
  * Prebuilt UI components for thirdweb contracts
  */

package/src/react/core/design-system/index.ts

@@ -170,6 +170,7 @@ export const fontSize = {
 };
 
 export const spacing = {
+  "3xs": "4px",
   xxs: "6px",
   xs: "8px",
   sm: "12px",
@@ -181,6 +182,7 @@ export const spacing = {
 };
 
 export const radius = {
+  xs: "4px",
   sm: "6px",
   md: "8px",
   lg: "12px",

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -1,5 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -10,10 +12,88 @@ import type { Theme } from "../../design-system/index.js";
 import type {
   SupportedNFTs,
   SupportedTokens,
+  TokenInfo,
 } from "../../utils/defaultTokens.js";
 import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
 
-export type PayUIOptions = {
+export type PaymentInfo = {
+  /**
+   * The chain to receive the payment on.
+   */
+  chain: Chain;
+  /**
+   * The address of the seller wallet to receive the payment on.
+   */
+  sellerAddress: string;
+  /**
+   * Optional ERC20 token to receive the payment on.
+   * If not provided, the native token will be used.
+   */
+  token?: TokenInfo;
+} & (
+  | {
+      /**
+       * The amount of tokens to receive in ETH or tokens.
+       * ex: 0.1 ETH or 100 USDC
+       */
+      amount: string;
+    }
+  | {
+      /**
+       * The amount of tokens to receive in wei.
+       * ex: 1000000000000000000 wei
+       */
+      amountWei: bigint;
+    }
+);
+
+export type PayUIOptions = Prettify<
+  {
+    /**
+     * Configure options for buying tokens using other token ( aka Swap )
+     *
+     * By default, the "Crypto" option is enabled. You can disable it by setting `buyWithCrypto` to `false`
+     *
+     * You can prefill the source token and chain using `prefillSource`
+     * You can also disable the edits for the prefilled values by setting `prefillSource.allowEdits` - By default all are editable
+     *
+     * For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }`
+     */
+    buyWithCrypto?:
+      | false
+      | {
+          prefillSource?: {
+            chain: Chain;
+            token?: TokenInfo;
+            allowEdits?: {
+              token: boolean;
+              chain: boolean;
+            };
+          };
+        };
+
+    /**
+     * By default "Credit card" option is enabled. you can disable it by setting `buyWithFiat` to `false`
+     *
+     * You can also enable the test mode for the on-ramp provider to test on-ramp without using real credit card.
+     */
+    buyWithFiat?:
+      | {
+          testMode?: boolean;
+        }
+      | false;
+
+    /**
+     * Extra details to store with the purchase.
+     *
+     * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+     */
+    purchaseData?: object;
+  } & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
+>;
+
+export type FundWalletOptions = {
+  mode?: "fund_wallet";
   /**
    * Prefill the Buy Token amount, chain and/or token.
    * You can also disable the edits for the prefilled values using `allowEdits` - By default all are editable
@@ -25,12 +105,7 @@ export type PayUIOptions = {
    */
   prefillBuy?: {
     chain: Chain;
-    token?: {
-      name: string;
-      symbol: string;
-      address: string;
-      icon?: string;
-    };
+    token?: TokenInfo;
     amount?: string;
     allowEdits?: {
       amount: boolean;
@@ -38,59 +113,36 @@ export type PayUIOptions = {
       chain: boolean;
     };
   };
+};
 
+export type DirectPaymentOptions = {
+  mode: "direct_payment";
   /**
-   * Configure options for buying tokens using other token ( aka Swap )
-   *
-   * By default, the "Crypto" option is enabled. You can disable it by setting `buyWithCrypto` to `false`
-   *
-   * You can prefill the source token and chain using `prefillSource`
-   * You can also disable the edits for the prefilled values by setting `prefillSource.allowEdits` - By default all are editable
-   *
-   * For example, if you want to allow selecting chain and but disable selecting token, you can set `allowEdits` to `{ token: false, chain: true }`
+   * The payment information
    */
-  buyWithCrypto?:
-    | false
-    | {
-        prefillSource?: {
-          chain: Chain;
-          token?: {
-            name: string;
-            symbol: string;
-            address: string;
-            icon?: string;
-          };
-          allowEdits?: {
-            token: boolean;
-            chain: boolean;
-          };
-        };
-      };
-
+  paymentInfo: PaymentInfo;
   /**
-   * By default "Credit card" option is enabled. you can disable it by setting `buyWithFiat` to `false`
-   *
-   * You can also enable the test mode for the on-ramp provider to test on-ramp without using real credit card.
+   * Customize the display of the PayEmbed UI.
    */
-  buyWithFiat?:
-    | {
-        testMode?: boolean;
-      }
-    | false;
+  metadata?: {
+    name?: string;
+    image?: string;
+  };
+};
 
+export type TranasctionOptions = {
+  mode: "transaction";
   /**
-   * Extra details to store with the purchase.
-   *
-   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   * The transaction to be executed.
    */
-  purchaseData?: object;
-
+  transaction: PreparedTransaction;
   /**
-   * The address of the recipient of the purchase.
-   *
-   * This address will be used to send the purchased tokens to.
+   * Customize the display of the PayEmbed UI.
    */
-  recipientAddress?: string;
+  metadata?: {
+    name?: string;
+    image?: string;
+  };
 };
 
 /**
@@ -192,7 +244,7 @@ export type ConnectButton_detailsModalOptions = {
    *
    * thirdweb Pay allows users to buy tokens using crypto or fiat currency.
    */
-  payOptions?: PayUIOptions;
+  payOptions?: Extract<PayUIOptions, { mode?: "fund_wallet" }>;
 };
 
 /**

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -1,21 +1,11 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import type { Address } from "abitype";
 import type { Chain } from "../../../../chains/types.js";
-import { getContract } from "../../../../contract/contract.js";
-import { getCurrencyMetadata } from "../../../../extensions/erc20/read/getCurrencyMetadata.js";
-import { getGasPrice } from "../../../../gas/get-gas-price.js";
-import { estimateGasCost } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import {
-  type GetWalletBalanceResult,
-  getWalletBalance,
-} from "../../../../wallets/utils/getWalletBalance.js";
-import { fetchBuySupportedDestinations } from "../../../web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SupportedTokens } from "../../utils/defaultTokens.js";
@@ -43,7 +33,8 @@ import type { SupportedTokens } from "../../utils/defaultTokens.js";
 export type SendTransactionPayModalConfig =
   | {
       metadata?: {
-        title?: string;
+        name?: string;
+        image?: string;
       };
       locale?: LocaleId;
       supportedTokens?: SupportedTokens;
@@ -74,19 +65,10 @@ export type SendTransactionConfig = {
   gasless?: GaslessOptions;
 };
 
-type ShowModalData = {
+export type ShowModalData = {
   tx: PreparedTransaction;
   sendTx: () => void;
   rejectTx: (reason: Error) => void;
-  totalCostWei: bigint;
-  currency?: {
-    address: Address;
-    name: string;
-    symbol: string;
-    decimals: number;
-    icon?: string;
-  };
-  walletBalance: GetWalletBalanceResult;
   resolveTx: (data: WaitForReceiptOptions) => void;
 };
 
@@ -152,76 +134,23 @@ export function useSendTransactionCore(args: {
 
         (async () => {
           try {
-            const destinations = await fetchBuySupportedDestinations(tx.client);
-
-            const isBuySupported = destinations.find(
-              (c) => c.chain.id === tx.chain.id,
-            );
-
-            // buy not supported, can't show modal - send tx directly
-            if (!isBuySupported) {
-              sendTx();
-              return;
-            }
-
-            //  buy supported, check if there is enough balance - if not show modal to buy tokens
-            const [nativeWalletBalance, nativeCostWei] = await Promise.all([
-              getWalletBalance({
-                address: account.address,
-                chain: tx.chain,
-                client: tx.client,
-              }),
-              getTotalTxCostForBuy(tx, account?.address),
+            const [_nativeValue, _erc20Value] = await Promise.all([
+              resolvePromisedValue(tx.value),
+              resolvePromisedValue(tx.erc20Value),
             ]);
-
-            let currency: ShowModalData["currency"] | undefined = undefined;
-            let walletBalance = nativeWalletBalance;
-            let totalCostWei = nativeCostWei;
-            const hasEnoughForGas = nativeWalletBalance.value > nativeCostWei;
-
-            const erc20Value = await resolvePromisedValue(tx.erc20Value);
-            if (erc20Value && hasEnoughForGas) {
-              const [tokenBalance, tokenMeta] = await Promise.all([
-                getWalletBalance({
-                  address: account.address,
-                  chain: tx.chain,
-                  client: tx.client,
-                  tokenAddress: erc20Value.tokenAddress,
-                }),
-                getCurrencyMetadata({
-                  contract: getContract({
-                    address: erc20Value.tokenAddress,
-                    chain: tx.chain,
-                    client: tx.client,
-                  }),
-                }),
-              ]);
-              totalCostWei = erc20Value.amountWei;
-              walletBalance = tokenBalance;
-              currency = {
-                address: erc20Value.tokenAddress,
-                name: tokenMeta.name,
-                symbol: tokenMeta.symbol,
-                decimals: tokenMeta.decimals,
-              };
-            }
-
-            // if enough balance, send tx
-            if (totalCostWei < walletBalance.value) {
+            const nativeValue = _nativeValue || 0n;
+            const erc20Value = _erc20Value?.amountWei || 0n;
+
+            if (nativeValue > 0n || erc20Value > 0n) {
+              showPayModal({
+                tx,
+                sendTx,
+                rejectTx: reject,
+                resolveTx: resolve,
+              });
+            } else {
               sendTx();
-              return;
             }
-
-            // if not enough balance - show modal
-            showPayModal({
-              tx,
-              sendTx,
-              rejectTx: reject,
-              resolveTx: resolve,
-              totalCostWei,
-              walletBalance,
-              currency,
-            });
           } catch (e) {
             console.error("Failed to estimate cost", e);
             // send it anyway?
@@ -232,42 +161,3 @@ export function useSendTransactionCore(args: {
     },
   });
 }
-
-export async function getTotalTxCostForBuy(
-  tx: PreparedTransaction,
-  from?: string,
-) {
-  try {
-    const gasCost = await estimateGasCost({
-      transaction: tx,
-      from,
-    });
-
-    const bufferCost = gasCost.wei / 10n;
-
-    // Note: get tx.value AFTER estimateGasCost
-    const txValue = await resolvePromisedValue(tx.value);
-
-    // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
-    return gasCost.wei + bufferCost + (txValue || 0n);
-  } catch (e) {
-    if (from) {
-      // try again without passing from
-      return await getTotalTxCostForBuy(tx);
-    }
-    // fallback if both fail, use the tx value + 2M * gas price
-    const value = await resolvePromisedValue(tx.value);
-
-    const gasPrice = await getGasPrice({
-      client: tx.client,
-      chain: tx.chain,
-    });
-
-    const buffer = 2_000_000n * gasPrice;
-
-    if (!value) {
-      return 0n + buffer;
-    }
-    return value + buffer;
-  }
-}

package/src/react/core/utils/defaultTokens.ts

@@ -1,3 +1,4 @@
+import type { Chain } from "../../../chains/types.js";
 import type { Address } from "../../../utils/address.js";
 
 export type TokenInfo = {
@@ -34,31 +35,8 @@ const fantomIcon =
 export type SupportedTokens = Record<number, TokenInfo[]>;
 export type SupportedNFTs = Record<number, Address[]>;
 
-/**
- * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
- *
- * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
- * @example
- * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
- *
- * ```tsx
- * const ethereumChainId = 1;
- *
- * <ConnectButton supportedTokens={{
- *  ...defaultTokens,
- *  [ethereumChainId]: [
- *    {
- *      address: 'YOUR_TOKEN_ADDRESS',
- *      name: 'YOUR_TOKEN_NAME',
- *      symbol: 'YOUR_TOKEN_SYMBOL',
- *      icon: 'YOUR_TOKEN_ICON_URL'
- *    },
- *    ...defaultTokens[ethereumChainId],
- *  ]
- * }} />
- * ```
- */
-export const defaultTokens: SupportedTokens = {
+// TODO these should be moved to chain definitions
+const DEFAULT_TOKENS = {
   "1": [
     {
       address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
@@ -333,4 +311,38 @@ export const defaultTokens: SupportedTokens = {
       icon: usdcIcon,
     },
   ],
-};
+} as const;
+
+/**
+ * Default tokens shown in [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton)'s SendFunds screen for each network.
+ *
+ * You can use the default tokens as a starting point for your own list of tokens and override tokens for specific networks.
+ * @example
+ * Below example shows adding a custom token for the Ethereum mainnet at start of the list of default tokens for the Ethereum mainnet. Here the `1` represents the chainId of Ethereum mainnet.
+ *
+ * ```tsx
+ * const ethereumChainId = 1;
+ *
+ * <ConnectButton supportedTokens={{
+ *  ...defaultTokens,
+ *  [ethereumChainId]: [
+ *    {
+ *      address: 'YOUR_TOKEN_ADDRESS',
+ *      name: 'YOUR_TOKEN_NAME',
+ *      symbol: 'YOUR_TOKEN_SYMBOL',
+ *      icon: 'YOUR_TOKEN_ICON_URL'
+ *    },
+ *    ...defaultTokens[ethereumChainId],
+ *  ]
+ * }} />
+ * ```
+ */
+export const defaultTokens = DEFAULT_TOKENS as unknown as SupportedTokens;
+
+type SupportedSymbol =
+  (typeof DEFAULT_TOKENS)[keyof typeof DEFAULT_TOKENS][number]["symbol"];
+
+export function getDefaultToken(chain: Chain, symbol: SupportedSymbol) {
+  const tokens = defaultTokens[chain.id];
+  return tokens?.find((t) => t.symbol === symbol);
+}