wagmi-extended 0.8.0 → 1.0.1

package/README.md

@@ -1,7 +1,230 @@
 # wagmi-extended
 
-## Installation
+`wagmi-extended` is a library that provides extended hooks and helper functions on top of [Wagmi](https://wagmi.sh/), [Viem](https://viem.sh/), and [TanStack Query](https://tanstack.com/query/v5) for Ethereum and blockchain development with React.
+<br />
+<br />
+It simplifies common tasks such as fetching token metadata, approving ERC20 token transfers, sending transactions, writing contracts, waiting for receipt and more—with configurable behavior via global defaults.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Requirements](#requirements)
+- [API](#api)
+- [Setup](#setup)
+- [Usage](#usage)
+  - [useERC20ApproveX Hook](#useerc20approvex-hook)
+  - [useContractWriteX Hook](#usecontractwritex-hook)
+  - [useSendTransactionX Hook](#usesendtransactionx-hook)
+  - [useTokenX Hook](#usetokenx-hook)
+- [License](#license)
+
+### Installation
+
+Install via npm:
 
 ```bash
 npm install wagmi-extended
 ```
+
+Or with Yarn:
+
+```bash
+yarn add wagmi-extended
+```
+
+### Requirements
+
+Your project must include the following peer dependencies:
+
+- **React**: ^17.0.0 || ^18.0.0
+- **Wagmi**: ^2.0.0
+- **Viem**: ^2.0.0
+- **@tanstack/react-query**: ^5.0.0
+
+Note: You must wrap your application with necessary providers (e.g. QueryClientProvider from TanStack Query and WagmiProvider).
+
+### API
+
+You can import all the functions and hooks directly from `wagmi-extended`. For example:
+
+```bash
+import {
+  useTokenX,
+  useERC20ApproveX,
+  useSendTransactionX,
+  useWriteTransactionX,
+  setDefaults,
+  getDefaults,
+} from "wagmi-extended";
+```
+
+Each hook is documented with detailed JSDoc comments (including usage examples) in the source code. Refer to that documentation for additional details.
+
+## Setup
+
+For easier use of fetch (non hook) functions setup the default configuration.
+<br />
+This is done by calling `setDefaults` in your application initialization (e.g., in index.tsx or App.tsx).
+
+Example:
+
+```bash
+// index.tsx (or App.tsx)
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useConfig } from "wagmi";
+import { setDefaults } from "wagmi-extended";
+
+const queryClient = new QueryClient();
+// Obtain your Wagmi configuration from your initialization or provider
+const wagmiConfig = /* your wagmi config here */;
+
+// Set defaults for the extended library functions.
+setDefaults(queryClient, wagmiConfig);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+);
+```
+
+## Hooks explanations and examples
+
+### useERC20ApproveX Hook
+
+The `useERC20ApproveX` hook simplifies ERC20 token approvals by checking the allowance and handling the transaction to approve transfers.
+
+Example:
+
+```bash
+import { useERC20ApproveX } from "wagmi-extended";
+
+function ApproveButton(amountToApprove: number) {
+  const tokenAddress = "0xTokenAddress";      // Replace with your token address
+  const spenderAddress = "0xSpenderAddress";  // Replace with the spender address
+
+  const { isApproved, isApproving, approveAsync } = useERC20ApproveX(
+    tokenAddress,
+    spenderAddress,
+    parseUnits(amountToApprove.toString(), 18),
+  );
+
+  return (
+    <button onClick={approveAsync} disabled={isApproving || isApproved}>
+      {isApproving ? "Approving..." : isApproved ? "Approved" : "Approve Token"}
+    </button>
+  );
+}
+```
+
+### useContractWriteX hook
+
+The `useContractWriteX` hook wraps the contract-writing functionality from Wagmi with additional features like `receipt` waiting, `logging` control, and `query invalidation` after receipt is successfully fetched.
+
+Example:
+
+```bash
+function MyTransactionComponent() {
+const { writeContractAsync, isPending, errorMessage } = useContractWriteX({
+    onSuccess: (txHash) => console.log("Transaction successful:", txHash),
+    onError: (error) => console.error("Transaction error:", error),
+    queriesToInvalidate: [["userBalance"], ["userActivity"]],
+});
+
+const handleWrite = async () => {
+    try {
+    const txHash = await writeContractAsync({ transaction params here.. });
+    console.log("Received txHash:", txHash);
+    } catch (err) {
+    console.error("Failed writing transaction:", err);`
+    }
+};
+
+return (
+    <div>
+    <button onClick={handleWrite} disabled={isPending}>
+        {isPending ? "Processing..." : "Write Transaction"}
+    </button>
+    {errorMessage && <p>Error: {errorMessage}</p>}
+    </div>
+);
+}
+```
+
+### useSendTransactionX Hook
+
+The `useSendTransactionX` hook wraps the transaction-sending functionality from Wagmi with additional features like `receipt` waiting, `logging` control, and `query invalidation` after receipt is successfully fetched.
+
+Example:
+
+```bash
+import { useSendTransactionX } from "wagmi-extended";
+
+function TransactionButton() {
+  const { sendTransactionAsync, isPending, errorMessage } = useSendTransactionX({
+    onSuccess: (txHash) => console.log("Transaction successful:", txHash),
+    onError: (error) => console.error("Transaction failed:", error),
+    queriesToInvalidate: [["someQueryKey"]],
+  });
+
+  const handleTransaction = async () => {
+    try {
+      // Replace with actual transaction parameters
+      const txHash = await sendTransactionAsync({
+        address: "0xContractAddress",
+        abi: [], // Provide your contract ABI
+        functionName: "executeFunction",
+        args: [/* function arguments */],
+      });
+      console.log("Transaction hash:", txHash);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <button onClick={handleTransaction} disabled={isPending}>
+      {isPending ? "Processing..." : "Send Transaction"}
+      {errorMessage && <span>Error: {errorMessage}</span>}
+    </button>
+  );
+}
+```
+
+### useTokenX Hook
+
+The useTokenX hook fetches token metadata (symbol, decimals, name and symbol) for a given token address using React Query and your Wagmi configuration.
+
+```bash
+import { useTokenX } from "wagmi-extended";
+import { Address } from "viem";
+
+function TokenDisplay({ tokenAddress }: { tokenAddress: Address }) {
+  const { data, isLoading, error } = useTokenX(tokenAddress);
+
+  if (isLoading) return <div>Loading token data...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <p>Symbol: {data.symbol}</p>
+      <p>Decimals: {data.decimals}</p>
+      <p>Name: {data.name}</p>
+    </div>
+  );
+}
+```
+
+### License
+
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

package/dist/config/defaults.d.ts

@@ -0,0 +1,40 @@
+import { QueryClient } from "@tanstack/react-query";
+import { Config } from "wagmi";
+/**
+ * Sets the default configuration values.
+ *
+ * @param queryClient - The default QueryClient instance.
+ * @param wagmiConfig - The default Wagmi configuration.
+ * @example
+ * //In your application initialization (e.g., index.tsx or App.tsx):
+ * import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+ * import { wagmiConfig } from "/path/to/wagmi-config";
+ * import { setDefaults } from "wagmi-extended";
+ *
+ * const queryClient = new QueryClient();
+ *
+ * //Set defaults for the extended library functions.
+ * setDefaults(queryClient, wagmiConfig);
+ *
+ * //Now helper functions like fetchTokenX can use these defaults if no explicit parameters are provided.
+ */
+export declare function setDefaults(queryClient: QueryClient, wagmiConfig: Config): void;
+/**
+ * Retrieves the currently set default configurations.
+ *
+ * @throws Will throw an error if defaults are not initialized.
+ * @returns An object containing the default queryClient and wagmiConfig.
+ *
+ * @example
+ * // Usage in a helper function:
+ * import { getDefaults } from "wagmi-extended";
+ *
+ * function exampleFunction() {
+ *   const { queryClient, wagmiConfig } = getDefaults();
+ *   // Use queryClient and wagmiConfig as needed...
+ * }
+ */
+export declare function getDefaults(): {
+    queryClient: QueryClient;
+    wagmiConfig: Config;
+};

package/dist/fetch-functions/fetchAllowanceX.d.ts

@@ -0,0 +1,2 @@
+import { Address } from "viem";
+export declare const fetchAllowance: (asset: Address, spender: Address, userAddress: Address, config: any) => Promise<bigint>;

package/dist/fetch-functions/fetchTokenX.d.ts

@@ -0,0 +1,24 @@
+import { QueryClient } from "@tanstack/react-query";
+import { Address } from "viem";
+import { Config } from "wagmi";
+export interface Token {
+    symbol: string;
+    decimals: number;
+    name: string;
+}
+export declare const EthTokenData: Token;
+export declare function fetchDecimalsX(token: Address, queryClient?: QueryClient, wagmiConfig?: Config): Promise<number | undefined>;
+export declare function fetchSymbolX(token: Address, queryClient?: QueryClient, wagmiConfig?: Config): Promise<string>;
+export declare function fetchNameX(token: Address, queryClient: any, wagmiConfig: any): Promise<string>;
+/**
+ * Fetches the token metadata (symbol, decimals) for the given token address.
+ * Internally calls:
+ *  - `fetchSymbol(token)`   to retrieve the token symbol,
+ *  - `fetchDecimals(token)` to retrieve the token decimals
+ *  - `fetchName(token)`     to retrieve the token name
+ *
+ * @param token - The address of the token.
+ * @returns A `Token` object containing the symbol, decimals.
+ * @throws Will throw an error if symbol or decimals cannot be fetched.
+ */
+export declare function fetchTokenX(token: Address, queryClient: any, wagmiConfig: any): Promise<Token>;

package/dist/hooks/{useContractWriteExtended.d.ts → useContractWriteX.d.ts}

@@ -1,8 +1,8 @@
-import { WriteExtendedAsyncParams } from "./useHandleTransactionMutation.js";
+import { WriteExtendedAsyncParams } from "./useHandleTransactionMutationX.js";
 /**
  * Custom hook for writing to a smart contract using Wagmi.
  *
- * This hook provides functionality for sending a transaction using Wagmi, handling the asynchronous nature of the operation, waiting for the transaction receipt, and error handling.
+ * This hook provides functionality for writing a contract using Wagmi, handling the asynchronous nature of the operation, waiting for the transaction receipt, and error handling.
  *
  * @param {WriteExtendedAsyncParams} [settings] - Optional settings for the write operation.
  * @param {boolean} [settings.disableWaitingForReceipt] - Disables waiting for the transaction receipt.
@@ -15,8 +15,48 @@ import { WriteExtendedAsyncParams } from "./useHandleTransactionMutation.js";
  * - {boolean} isPending - Indicates whether the transaction is pending.
  * - {string|undefined} errorMessage - The error message, if an error occurred during the transaction.
  * - {Function} writeContractAsync - Function to trigger the write operation.
+ *
+/**
+ * Custom hook for writing a contract using Wagmi with extended functionality.
+ *
+ * This hook wraps Wagmi’s `useContractWriteX` with additional handling for
+ * waiting for a transaction receipt, logging control, and invalidation of specified queries.
+ *
+ * @param {WriteExtendedAsyncParams} [settings] - Optional settings for handling the transaction.
+ * @returns {Object} An object containing:
+ *   - `isPending`: {boolean} indicating if the transaction is in progress.
+ *   - `errorMessage`: {string|undefined} a potential error message.
+ *   - `writeContractAsync`: {Function} a function to trigger the transaction.
+ *
+ * @example
+ * // In your component:
+ * function MyTransactionComponent() {
+ *   const { writeContractAsync, isPending, errorMessage } = useContractWriteX({
+ *     onSuccess: (txHash) => console.log("Transaction successful:", txHash),
+ *     onError: (error) => console.error("Transaction error:", error),
+ *     queriesToInvalidate: [["userBalance"], ["userActivity"]],
+ *   });
+ *
+ *   const handleWrite = async () => {
+ *     try {
+ *       const txHash = await writeContractAsync({ transaction params here.. });
+ *       console.log("Received txHash:", txHash);
+ *     } catch (err) {
+ *       console.error("Failed writing transaction:", err);`
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleWrite} disabled={isPending}>
+ *         {isPending ? "Processing..." : "Write Transaction"}
+ *       </button>
+ *       {errorMessage && <p>Error: {errorMessage}</p>}
+ *     </div>
+ *   );
+ * }
  */
-export declare function useContractWriteExtended(settings?: WriteExtendedAsyncParams): {
+export declare function useContractWriteX(settings?: WriteExtendedAsyncParams): {
     isPending: boolean;
     errorMessage: string | undefined;
     writeContractAsync: import("wagmi/query").WriteContractMutateAsync<import("wagmi").Config, void>;

package/dist/hooks/useERC20ApproveX.d.ts

@@ -0,0 +1,40 @@
+import { Address } from "viem";
+/**
+ * Custom hook for approving ERC20 token transfers.
+ *
+ * This hook provides functionality for approving ERC20 token transfers, checking the current allowance, and handling the approval transaction using Wagmi.
+ *
+ * @param {Address} tokenAddress - The address of the ERC20 token contract (the transfer from).
+ * @param {Address} spenderAddress - The address of the spender to approve the transfer to.
+ * @param {bigint} [amount=BigInt(0)] - The amount to approve for transfer. Defaults to undefined.
+ * @param {boolean} [approveMax=false] - Indicates whether to approve the maximum amount or a specific amount.
+ * @returns {Object} Object containing the following properties:
+ * - {boolean} isApproved - Indicates whether the spender is already approved to transfer the specified amount of tokens.
+ * - {boolean} isApproving - Indicates whether an approval transaction is currently pending.
+ * - {Function} approveAsync - Function to trigger the approval transaction.
+ *
+ * @example
+ * // In your component:
+ * function ApproveTokenButton(amountToApprove) {
+ *   const tokenAddress = "0xTokenAddressExample";
+ *   const spenderAddress = "0xSpenderAddressExample";
+ *
+ *   const { isApproved, isApproving, justApproved, approveAsync } = useERC20ApproveX(
+ *     tokenAddress,
+ *     spenderAddress,
+ *     parseUnits(amountToApprove.toString(), 18),
+ *   );
+ *
+ *   return (
+ *     <button onClick={approveAsync} disabled={isApproving || isApproved}>
+ *       {isApproving ? "Approving..." : isApproved ? "Approved" : "Approve Token"}
+ *     </button>
+ *   );
+ * }
+ */
+export declare const useERC20ApproveX: (tokenAddress?: Address, spenderAddress?: Address, amount?: bigint, approveMax?: boolean) => {
+    isApproved: boolean;
+    isApproving: boolean;
+    justApproved: boolean;
+    approveAsync: () => Promise<void>;
+};

package/dist/hooks/{useToken.d.ts → useFetchAssetAllowanceX.d.ts}

@@ -1,27 +1,35 @@
 import { Address } from "viem";
-export interface Token {
-    symbol: string;
-    decimals: number;
-    name: string;
-}
-export declare const EthTokenData: Token;
-export declare function fetchDecimals(token: Address, queryClient: any, wagmiConfig: any): Promise<number | undefined>;
-export declare function fetchSymbol(token: Address, queryClient: any, wagmiConfig: any): Promise<string>;
-export declare function fetchName(token: Address, queryClient: any, wagmiConfig: any): Promise<string>;
 /**
- * Fetches the token metadata (symbol, decimals) for the given token address.
- * Internally calls:
- *  - `fetchSymbol(token)`   to retrieve the token symbol,
- *  - `fetchDecimals(token)` to retrieve the token decimals
- *  - `fetchName(token)`     to retrieve the token name
+ * Custom hook for fetching asset allowance.
  *
- * @param token - The address of the token.
- * @returns A `Token` object containing the symbol, decimals.
- * @throws Will throw an error if symbol or decimals cannot be fetched.
+ * @param {Address} asset - The address of the ERC20 token contract.
+ * @param {Address} spender - The address of the spender to check allowance for.
+ *
+ *
+ * @example
+ * // In your component:
+ * function AllowanceDisplay() {
+ *   const { data: allowance, isLoading, error } = useFetchAssetAllowanceX({
+ *     asset: "0xTokenAddressExample",
+ *     spender: "0xSpenderAddressExample",
+ *   });
+ *
+ *   if (isLoading) return <div>Loading allowance...</div>;
+ *   if (error) return <div>Error loading allowance</div>;
+ *
+ *   return (
+ *     <div>
+ *       Current Allowance: {allowance}
+ *     </div>
+ *   );
+ * }
  */
-export declare function fetchToken(token: Address, queryClient: any, wagmiConfig: any): Promise<Token>;
-export declare const useToken: (asset?: Address) => {
-    data: Token | undefined;
+export declare const useFetchAssetAllowanceX: ({ asset, spender, }: {
+    asset?: Address;
+    spender?: Address;
+}) => {
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     error: Error;
     isError: true;
     isPending: false;
@@ -43,11 +51,12 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 } | {
-    data: Token | undefined;
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     error: null;
     isError: false;
     isPending: false;
@@ -69,11 +78,12 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 } | {
-    data: Token | undefined;
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     error: Error;
     isError: true;
     isPending: false;
@@ -95,11 +105,12 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 } | {
-    data: Token | undefined;
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     error: null;
     isError: false;
     isPending: true;
@@ -121,11 +132,12 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 } | {
-    data: Token | undefined;
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     error: null;
     isError: false;
     isPending: true;
@@ -147,11 +159,12 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 } | {
-    data: Token | undefined;
+    data: bigint | undefined;
+    queryKey: readonly ["HookFetchAllowance", `0x${string}` | undefined, `0x${string}` | undefined, `0x${string}` | undefined];
     isError: false;
     error: null;
     isPending: false;
@@ -173,7 +186,7 @@ export declare const useToken: (asset?: Address) => {
     isPaused: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<Token, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<bigint, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<Token>;
+    promise: Promise<bigint>;
 };

package/dist/hooks/{useHandleTransactionMutation.d.ts → useHandleTransactionMutationX.d.ts}

@@ -13,7 +13,7 @@ export type WriteExtendedAsyncParams = {
  *
  * @returns {Function} A shared `onSettled` callback for transaction mutations.
  */
-export declare function useHandleTransactionMutation({ settings, }: {
+export declare function useHandleTransactionMutationX({ settings, }: {
     settings?: WriteExtendedAsyncParams;
 }): {
     onMutate: () => void;

package/dist/hooks/{useSendTransactionExtended.d.ts → useSendTransactionX.d.ts}

@@ -1,17 +1,10 @@
-import { Hash } from "viem";
-import { QueryKey } from "@tanstack/query-core";
-export type SeamlessSendAsyncParams = {
-    onSuccess?: (txHash: Hash) => void;
-    onError?: (e: any) => void;
-    onSettled?: () => void;
-    queriesToInvalidate?: (QueryKey | undefined)[];
-};
+import { WriteExtendedAsyncParams } from "./useHandleTransactionMutationX.js";
 /**
  * Custom hook for sending a transaction using Wagmi.
  *
  * This hook provides functionality for sending a transaction using Wagmi, handling the asynchronous nature of the operation, waiting for the transaction receipt, and error handling.
  *
- * @param {SeamlessWriteAsyncParams} [settings] - Optional settings for the write operation.
+ * @param {WriteExtendedAsyncParams} [settings] - Optional settings for the write operation.
  * @param {boolean} [settings.disableWaitingForReceipt] - Disables waiting for the transaction receipt.
  * @param {boolean} [settings.disableLogging] - Disables logging the result of the transaction.
  * @param {Function} [settings.onSuccess] - Callback function to be called on successful transaction.
@@ -22,8 +15,36 @@ export type SeamlessSendAsyncParams = {
  * - {boolean} isPending - Indicates whether the transaction is pending.
  * - {string|undefined} errorMessage - The error message, if an error occurred during the transaction.
  * - {Function} sendTransactionAsync - Function to trigger the send transaction mutation.
+
+ * @example
+ * // In your component:
+ * function MyTransactionComponent() {
+ *   const { sendTransactionAsync, isPending, errorMessage } = useSendTransactionX({
+ *     onSuccess: (txHash) => console.log("Transaction successful:", txHash),
+ *     onError: (error) => console.error("Transaction error:", error),
+ *     queriesToInvalidate: [["userBalance"], ["userActivity"]],
+ *   });
+ *
+ *   const handleSend = async () => {
+ *     try {
+ *       const txHash = await sendTransactionAsync({ transaction params here.. });
+ *       console.log("Received txHash:", txHash);
+ *     } catch (err) {
+ *       console.error("Failed sending transaction:", err);`
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleSend} disabled={isPending}>
+ *         {isPending ? "Processing..." : "Send Transaction"}
+ *       </button>
+ *       {errorMessage && <p>Error: {errorMessage}</p>}
+ *     </div>
+ *   );
+ * }
  */
-export declare function useSendTransactionExtended(settings?: SeamlessSendAsyncParams): {
+export declare function useSendTransactionX(settings?: WriteExtendedAsyncParams): {
     isPending: boolean;
     errorMessage: string | undefined;
     sendTransactionAsync: import("wagmi/query").SendTransactionMutateAsync<import("wagmi").Config, void>;