thirdweb 5.47.0 → 5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344

package/dist/types/react/native/hooks/transaction/useSendTransaction.d.ts

@@ -13,6 +13,17 @@ import { type SendTransactionConfig } from "../../../core/hooks/transaction/useS
  * sendTx(tx);
  * ```
  *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * const mutation = useSendTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
  * @transaction
  */
 export declare function useSendTransaction(config?: SendTransactionConfig): import("@tanstack/react-query").UseMutationResult<{

package/dist/types/react/native/hooks/transaction/useSendTransaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSendTransaction.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/hooks/transaction/useSendTransaction.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,uDAAuD,CAAC;AAI/D;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,GAAE,qBAA0B;;;;;wFAQpE"}
+{"version":3,"file":"useSendTransaction.d.ts","sourceRoot":"","sources":["../../../../../../src/react/native/hooks/transaction/useSendTransaction.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,qBAAqB,EAE3B,MAAM,uDAAuD,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,GAAE,qBAA0B;;;;;wFAQpE"}

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

@@ -5,6 +5,8 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * @param props - The props for this component.
  * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details.
  * @example
+ *
+ * ### Basic usage
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -14,7 +16,8 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  *   Confirm Transaction
  * </TransactionButton>
  * ```
- * Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
+ *
+ * ### Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -25,7 +28,7 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * </TransactionButton>
  * ```
  *
- * Handle errors
+ * ### Handle errors
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -38,7 +41,7 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is sent
+ * ### Alert when a transaction is sent
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -51,7 +54,7 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is completed
+ * ### Alert when a transaction is completed
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -65,7 +68,7 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * </TransactionButton>
  * ```
  *
- * The onClick prop, if provided, will be called before the transaction is sent.
+ * ### The onClick prop, if provided, will be called before the transaction is sent.
  * ```tsx
  * <TransactionButton
  *   onClick={() => alert("Transaction is about to be sent")}
@@ -75,7 +78,7 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  * </TransactionButton>
  * ```
  *
- * Attach custom Pay metadata
+ * ### Attach custom Pay metadata
  * ```tsx
  * <TransactionButton
  *   payModal={{
@@ -89,6 +92,19 @@ import { type TransactionButtonProps } from "../../../core/hooks/transaction/tra
  *   ...
  * </TransactionButton>
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * <TransactionButton
+ *   gasless={{
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }}
+ * >
+ *   ...
+ * </TransactionButton>
+ * ```
  * @component
  */
 export declare function TransactionButton(props: TransactionButtonProps): import("react/jsx-runtime.js").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/TransactionButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,6DAA6D,CAAC;AAMrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,8CAkE9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react/web/ui/TransactionButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,6DAA6D,CAAC;AAMrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,8CAkE9D"}

package/dist/types/transaction/actions/send-and-confirm-transaction.d.ts

@@ -7,6 +7,8 @@ import { type SendTransactionOptions } from "./send-transaction.js";
  * @throws An error if the wallet is not connected.
  * @transaction
  * @example
+ *
+ * ### Basic usage
  * ```ts
  * import { sendAndConfirmTransaction } from "thirdweb";
  *
@@ -15,6 +17,19 @@ import { type SendTransactionOptions } from "./send-transaction.js";
  *  transaction
  * });
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```ts
+ * const transactionReceipt = await sendAndConfirmTransaction({
+ *  account,
+ *  transaction,
+ *  gasless: {
+ *    provider: "engine",
+ *    relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *    relayerForwarderAddress: "0x...",
+ *  }
+ * });
+ * ```
  */
 export declare function sendAndConfirmTransaction(options: SendTransactionOptions): Promise<TransactionReceipt>;
 //# sourceMappingURL=send-and-confirm-transaction.d.ts.map

package/dist/types/transaction/actions/send-and-confirm-transaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"send-and-confirm-transaction.d.ts","sourceRoot":"","sources":["../../../../src/transaction/actions/send-and-confirm-transaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,uBAAuB,CAAC;AAG/B;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,yBAAyB,CAC7C,OAAO,EAAE,sBAAsB,GAC9B,OAAO,CAAC,kBAAkB,CAAC,CAG7B"}
+{"version":3,"file":"send-and-confirm-transaction.d.ts","sourceRoot":"","sources":["../../../../src/transaction/actions/send-and-confirm-transaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,uBAAuB,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAsB,yBAAyB,CAC7C,OAAO,EAAE,sBAAsB,GAC9B,OAAO,CAAC,kBAAkB,CAAC,CAG7B"}

package/dist/types/transaction/actions/send-transaction.d.ts

@@ -93,6 +93,19 @@ export type SendTransactionOptions = {
  *  transaction,
  * });
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```ts
+ * const { transactionHash } = await sendTransaction({
+ *  account,
+ *  transaction,
+ *  gasless: {
+ *    provider: "engine",
+ *    relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *    relayerForwarderAddress: "0x...",
+ *  }
+ * });
+ * ```
  */
 export declare function sendTransaction(options: SendTransactionOptions): Promise<WaitForReceiptOptions>;
 //# sourceMappingURL=send-transaction.d.ts.map

package/dist/types/transaction/actions/send-transaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"send-transaction.d.ts","sourceRoot":"","sources":["../../../../src/transaction/actions/send-transaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IAGjB,WAAW,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,sBAAsB,GAC9B,OAAO,CAAC,qBAAqB,CAAC,CAkChC"}
+{"version":3,"file":"send-transaction.d.ts","sourceRoot":"","sources":["../../../../src/transaction/actions/send-transaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,OAAO,CAAC;IAGjB,WAAW,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,sBAAsB,GAC9B,OAAO,CAAC,qBAAqB,CAAC,CAkChC"}

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "5.47.0";
+export declare const version = "5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344";
 //# 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,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,2EAA2E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.47.0",
+  "version": "5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

package/src/exports/extensions/lens.ts

@@ -119,6 +119,8 @@ export {
 /**
  * Custom extension
  */
+
+// Read
 export {
   getHandleFromProfileId,
   type GetHandleFromProfileIdParams,
@@ -133,6 +135,10 @@ export {
   type GetFullProfileParams,
   type FullProfileResponse,
 } from "../../extensions/lens/read/getFullProfile.js";
+export {
+  resolveAddress,
+  type ResolveLensAddressParams,
+} from "../../extensions/lens/read/resolveAddress.js";
 
 /**
  * Contract addresses

package/src/exports/utils.ts

@@ -131,6 +131,8 @@ export {
   type AddressInput,
 } from "../utils/address.js";
 
+export { isBytes } from "viem";
+
 // ------------------------------------------------
 // abi
 // ------------------------------------------------

package/src/extensions/lens/read/getFullProfile.ts

@@ -2,7 +2,6 @@ import { polygon } from "../../../chains/chain-definitions/polygon.js";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { getContract } from "../../../contract/contract.js";
-import type { Hex } from "../../../utils/encoding/hex.js";
 import { getProfile } from "../__generated__/LensHub/read/getProfile.js";
 import { getDefaultHandle } from "../__generated__/TokenHandleRegistry/read/getDefaultHandle.js";
 import {
@@ -19,10 +18,23 @@ export type GetFullProfileParams = {
   profileId: bigint;
   client: ThirdwebClient;
   includeJoinDate?: boolean;
+  /**
+   * Override variables for Lens smart contracts
+   * Make sure all of them have to be on the same network
+   */
   overrides?: {
-    lensHubAddress?: Hex;
-    lensHandleAddress?: Hex;
-    tokenHandleRegistryAddress?: Hex;
+    /**
+     * Contract address for the LensHub contract
+     */
+    lensHubAddress?: string;
+    /**
+     * Contract address for the LensHandle contract
+     */
+    lensHandleAddress?: string;
+    /**
+     * Contract address for the TokenHandleRegistry contract
+     */
+    tokenHandleRegistryAddress?: string;
     chain?: Chain;
   };
 };

package/src/extensions/lens/read/getHandleFromProfileId.ts

@@ -2,7 +2,6 @@ import { polygon } from "../../../chains/chain-definitions/polygon.js";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { getContract } from "../../../contract/contract.js";
-import type { Hex } from "../../../utils/encoding/hex.js";
 import { getHandle } from "../__generated__/LensHandle/read/getHandle.js";
 import { getDefaultHandle } from "../__generated__/TokenHandleRegistry/read/getDefaultHandle.js";
 import {
@@ -16,9 +15,19 @@ import {
 export type GetHandleFromProfileIdParams = {
   profileId: bigint;
   client: ThirdwebClient;
+  /**
+   * Override variables for LensHandle contract and TokenHandleRegistry contract
+   * Make sure both of them have to be on the same network
+   */
   overrides?: {
-    lensHandleAddress?: Hex;
-    tokenHandleRegistryAddress?: Hex;
+    /**
+     * Contract address for the LensHandle contract
+     */
+    lensHandleAddress?: string;
+    /**
+     * Contract address for the TokenHandleRegistry contract
+     */
+    tokenHandleRegistryAddress?: string;
     chain?: Chain;
   };
 };

package/src/extensions/lens/read/getProfileMetadata.ts

@@ -2,7 +2,6 @@ import { polygon } from "../../../chains/chain-definitions/polygon.js";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { getContract } from "../../../contract/contract.js";
-import type { Hex } from "../../../utils/encoding/hex.js";
 import { getProfile } from "../__generated__/LensHub/read/getProfile.js";
 import { LENS_HUB_ADDRESS } from "../consts.js";
 import type { LensProfileSchema } from "./type.js";
@@ -14,7 +13,10 @@ export type GetProfileMetadataParams = {
   profileId: bigint;
   client: ThirdwebClient;
   overrides?: {
-    lensHubAddress?: Hex;
+    /**
+     * Contract address for the LensHub contract
+     */
+    lensHubAddress?: string;
     chain?: Chain;
   };
 };

package/src/extensions/lens/read/resolveAddress.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { isAddress } from "../../../utils/address.js";
+import { resolveAddress } from "./resolveAddress.js";
+
+describe("resolve lens address", () => {
+  it("should resolve to correct address", async () => {
+    const address = await resolveAddress({
+      client: TEST_CLIENT,
+      name: "captain_jack",
+    });
+    // "captain_jack" is a valid localname so it should definitely resolve to a valid address
+    expect(isAddress(address)).toBe(true);
+  });
+
+  it("should throw if passed an invalid lens handle", async () => {
+    await expect(() =>
+      resolveAddress({ client: TEST_CLIENT, name: "vitalik.eth" }),
+    ).rejects.toThrowError(
+      "Could not fetch the wallet address for lens handle: vitalik.eth",
+    );
+  });
+});

package/src/extensions/lens/read/resolveAddress.ts

@@ -0,0 +1,121 @@
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { ZERO_ADDRESS } from "../../../constants/addresses.js";
+import { getAddress, isAddress } from "../../../utils/address.js";
+import { withCache } from "../../../utils/promise/withCache.js";
+
+/**
+ * @extension LENS
+ */
+export type ResolveLensAddressParams = {
+  /**
+   * Either a full lens handle, or a lens localName
+   * Examples:
+   * 1. Full handle: "lens/vitalik"
+   * 2. Just local name: "vitalik"
+   */
+  name: string;
+  /**
+   * a [`ThirdwebClient`](https://portal.thirdweb.com/references/typescript/v5/ThirdwebClient)
+   */
+  client: ThirdwebClient;
+  /**
+   * Override parameters for Lens contract, defaults to LensHandle contract on Polygon
+   */
+  overrides?: {
+    /**
+     * The contract address of the [`LensHandle contract`](https://www.lens.xyz/docs/resources/smart-contracts)
+     */
+    lensHandleContractAddress?: string;
+    /**
+     * The chain which `lensHandleContractAddress` is deployed on
+     */
+    chain?: Chain;
+  };
+};
+
+/**
+ * Take in a Lens handle or local-name and return the wallet address behind that handle/local-name.
+ * For example, "lens/vitalik" is a handle, with "lens" being the namespace and "vitalik" being the local name
+ * @extension LENS
+ * @example
+ * ```ts
+ * import { resolveAddress } from "thirdweb/extensions/lens";
+ *
+ * const walletAddress = await resolveAddress({
+ *   name: "vitalik",
+ *   client,
+ * });
+ * ```
+ */
+export async function resolveAddress(
+  options: ResolveLensAddressParams,
+): Promise<string> {
+  const { name, overrides, client } = options;
+  if (isAddress(name)) {
+    return getAddress(name);
+  }
+  return withCache(
+    async (): Promise<string> => {
+      const [
+        { getContract },
+        { getTokenId },
+        { ownerOf },
+        { polygon },
+        { LENS_HANDLE_ADDRESS },
+      ] = await Promise.all([
+        import("../../../contract/contract.js"),
+        import("../__generated__/LensHandle/read/getTokenId.js"),
+        import("../../erc721/__generated__/IERC721A/read/ownerOf.js"),
+        import("../../../chains/chain-definitions/polygon.js"),
+        import("../consts.js"),
+      ]);
+      const contract = getContract({
+        address: overrides?.lensHandleContractAddress || LENS_HANDLE_ADDRESS,
+        chain: overrides?.chain || polygon,
+        client,
+      });
+      /**
+       * For better UX, we accept both handle and local name
+       * The difference: handle = <namespace>/<local-name>
+       * For example, "lens/vitalik" is a handle, with "lens" being the namespace and "vitalik" being the local name
+       * Currently there's only 1 namespace called "lens" but we should make sure the code can scale when there are more
+       *
+       * Since lens does not allow "/" in the name,
+       * if the string contains "/", it is either invalid, or it definitely contains the namespace
+       * In that case we remove the possible namespace because the `getTokenId` method only accepts localName
+       */
+      const isPossibleHandle = name.includes("/");
+      const localName = isPossibleHandle ? name.split("/")[1] : name;
+      if (!localName) {
+        throw new Error(`missing local name from ${name}`);
+      }
+      const tokenId = await getTokenId({ contract, localName });
+      if (!tokenId) {
+        throw new Error(
+          `Could not retrieve tokenId from localName: ${localName}`,
+        );
+      }
+
+      /**
+       * Another thing to note is that even if you enter an invalid localName,
+       * `getTokenId` still returns you a tokenId - so never rely on the result alone.
+       * Check if the tokenId truly exists using `exists` or in this case, `ownerOf`
+       */
+      const address = await ownerOf({ contract, tokenId }).catch(
+        () => ZERO_ADDRESS,
+      );
+      if (address === ZERO_ADDRESS) {
+        throw new Error(
+          `Could not fetch the wallet address for lens handle: ${name}`,
+        );
+      }
+      return address;
+    },
+    {
+      cacheKey: `lens:addr:${name}`,
+      // 1min cache
+      cacheTime: 60 * 1000,
+    },
+  );
+}

package/src/extensions/vote/read/getAll.ts

@@ -42,7 +42,7 @@ export type ProposalItem = {
    */
   stateLabel: string | undefined;
   /**
-   * The current vote info. See type ProposalVoteInfo for more context
+   * The current vote info. See type [`ProposalVoteInfo`](https://portal.thirdweb.com/references/typescript/v5/ProposalItem) for more context
    */
   votes: ProposalVoteInfo;
   /**

package/src/extensions/vote/read/getProposalVoteCounts.ts

@@ -12,6 +12,7 @@ export type ProposalVoteInfo = { [K in keyof typeof VoteType]: bigint };
  * Get the info about Against, For and Abstain votes of a proposal
  * @param options
  * @returns the object containing the info about Against, For and Abstain votes of a proposal
+ * Note: the count is displayed in "wei"
  * @extension VOTE
  * @example
  * ```ts
@@ -21,9 +22,9 @@ export type ProposalVoteInfo = { [K in keyof typeof VoteType]: bigint };
  *
  * // Example result
  * {
- *   against: 12n, // 12 users voted against the proposal
- *   for: 104n, // 104 users support the proposal
- *   abstain: 3n, // 3 users voted abstain on this proposal
+ *   for: 12000000000000000000n, // 12 tokens (with a decimals of 18) were used to vote "for"
+ *   against: 7000000000000000000n, // 7 tokens (with a decimals of 18) were used to vote "against"
+ *   abstain: 0n, // no user has voted abstain on this proposal
  * }
  * ```
  */

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

@@ -1,9 +1,21 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { TransactionReceipt } from "../../../../transaction/types.js";
 import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
+/**
+ * Configuration for the `useSendTransaction` hook.
+ */
+export type SendAndConfirmTransactionConfig = {
+  /**
+   * Configuration for gasless transactions.
+   * Refer to [`GaslessOptions`](https://portal.thirdweb.com/references/typescript/v5/GaslessOptions) for more details.
+   */
+  gasless?: GaslessOptions;
+};
+
 /**
  * A hook to send a transaction.
  * @returns A mutation object to send a transaction.
@@ -15,14 +27,26 @@ import { useActiveAccount } from "../wallets/useActiveAccount.js";
  * // later
  * sendAndConfirmTx(tx);
  * ```
+ *
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const mutation = useSendAndConfirmTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
  * @transaction
  */
-export function useSendAndConfirmTransaction(): UseMutationResult<
-  TransactionReceipt,
-  Error,
-  PreparedTransaction
-> {
+export function useSendAndConfirmTransaction(
+  config: SendAndConfirmTransactionConfig = {},
+): UseMutationResult<TransactionReceipt, Error, PreparedTransaction> {
   const account = useActiveAccount();
+  const { gasless } = config;
   return useMutation({
     mutationFn: async (transaction) => {
       if (!account) {
@@ -31,6 +55,7 @@ export function useSendAndConfirmTransaction(): UseMutationResult<
       return await sendAndConfirmTransaction({
         transaction,
         account,
+        gasless,
       });
     },
   });

package/src/react/native/hooks/transaction/useSendTransaction.tsx

@@ -19,6 +19,17 @@ import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitc
  * sendTx(tx);
  * ```
  *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * const mutation = useSendTransaction({
+ *   gasless: {
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }
+ * });
+ * ```
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {

package/src/react/web/ui/TransactionButton/index.tsx

@@ -15,6 +15,8 @@ import { Button } from "../components/buttons.js";
  * @param props - The props for this component.
  * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details.
  * @example
+ *
+ * ### Basic usage
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -24,7 +26,8 @@ import { Button } from "../components/buttons.js";
  *   Confirm Transaction
  * </TransactionButton>
  * ```
- * Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
+ *
+ * ### Customize the styling by passing the `unstyled` prop and your inline styles and/or classes:
  * ```tsx
  * <TransactionButton
  *   transaction={() => {}}
@@ -35,7 +38,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Handle errors
+ * ### Handle errors
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -48,7 +51,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is sent
+ * ### Alert when a transaction is sent
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -61,7 +64,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Alert when a transaction is completed
+ * ### Alert when a transaction is completed
  * ```tsx
  * <TransactionButton
  *   transaction={() => ...}
@@ -75,7 +78,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * The onClick prop, if provided, will be called before the transaction is sent.
+ * ### The onClick prop, if provided, will be called before the transaction is sent.
  * ```tsx
  * <TransactionButton
  *   onClick={() => alert("Transaction is about to be sent")}
@@ -85,7 +88,7 @@ import { Button } from "../components/buttons.js";
  * </TransactionButton>
  * ```
  *
- * Attach custom Pay metadata
+ * ### Attach custom Pay metadata
  * ```tsx
  * <TransactionButton
  *   payModal={{
@@ -99,6 +102,19 @@ import { Button } from "../components/buttons.js";
  *   ...
  * </TransactionButton>
  * ```
+ *
+ * ### Gasless usage with [thirdweb Engine](https://portal.thirdweb.com/engine)
+ * ```tsx
+ * <TransactionButton
+ *   gasless={{
+ *     provider: "engine",
+ *     relayerUrl: "https://thirdweb.engine-***.thirdweb.com/relayer/***",
+ *     relayerForwarderAddress: "0x...",
+ *   }}
+ * >
+ *   ...
+ * </TransactionButton>
+ * ```
  * @component
  */
 export function TransactionButton(props: TransactionButtonProps) {