wagmi-extended 0.8.0 → 1.0.1

package/src/hooks/useFetchAssetAllowanceX.ts

@@ -0,0 +1,60 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Address, erc20Abi } from "viem";
+import { useAccount, useConfig } from "wagmi";
+import { queryConfig } from "../query-config/index.js";
+import { fetchAllowance } from "../fetch-functions/fetchAllowanceX.js";
+
+const HookFetchAssetAllowanceQK = (
+  asset?: Address,
+  spender?: Address,
+  userAddress?: Address
+) => ["HookFetchAllowance", asset, spender, userAddress] as const;
+
+/**
+ * Custom hook for fetching asset allowance.
+ *
+ * @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 const useFetchAssetAllowanceX = ({
+  asset,
+  spender,
+}: {
+  asset?: Address;
+  spender?: Address;
+}) => {
+  const config = useConfig();
+  const { address: userAddress } = useAccount();
+
+  const { data, ...rest } = useQuery({
+    queryKey: HookFetchAssetAllowanceQK(asset, spender, userAddress),
+    queryFn: () => fetchAllowance(asset!, spender!, userAddress!, config),
+    enabled: Boolean(asset) && Boolean(spender) && Boolean(userAddress),
+    ...queryConfig.sensitiveDataQueryConfig,
+  });
+
+  return {
+    ...rest,
+    data,
+    queryKey: HookFetchAssetAllowanceQK(asset, spender, userAddress),
+  };
+};

package/src/hooks/{useHandleTransactionMutation.ts → useHandleTransactionMutationX.ts}

@@ -3,7 +3,7 @@ import { useConfig } from "wagmi";
 import { QueryKey } from "@tanstack/query-core";
 import { Address } from "viem";
 import { useState } from "react";
-import { getParsedError } from "../utils/errorParser.js";
+import { getParsedErrorX } from "../utils/errorParserX.js";
 import { useInvalidateQueries } from "./useInvalidateQueries.js";
 
 export type WriteExtendedAsyncParams = {
@@ -20,7 +20,7 @@ export type WriteExtendedAsyncParams = {
  *
  * @returns {Function} A shared `onSettled` callback for transaction mutations.
  */
-export function useHandleTransactionMutation({
+export function useHandleTransactionMutationX({
   settings,
 }: {
   settings?: WriteExtendedAsyncParams;
@@ -74,7 +74,7 @@ export function useHandleTransactionMutation({
       // 6. return result
       return txHash;
     } catch (error) {
-      const parsedError = getParsedError(error);
+      const parsedError = getParsedErrorX(error);
 
       if (!settings?.disableLogging) {
         // 1. log error

package/src/hooks/{useSendTransactionExtended.ts → useSendTransactionX.ts}

@@ -1,21 +1,15 @@
-import { Hash } from "viem";
 import { useSendTransaction } from "wagmi";
-import { QueryKey } from "@tanstack/query-core";
-import { useHandleTransactionMutation } from "./useHandleTransactionMutation.js";
-
-export type SeamlessSendAsyncParams = {
-  onSuccess?: (txHash: Hash) => void;
-  onError?: (e: any) => void;
-  onSettled?: () => void;
-  queriesToInvalidate?: (QueryKey | undefined)[];
-};
+import {
+  useHandleTransactionMutationX,
+  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.
@@ -26,11 +20,39 @@ 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 function useSendTransactionExtended(settings?: SeamlessSendAsyncParams) {
+export function useSendTransactionX(settings?: WriteExtendedAsyncParams) {
   const { isPending, errorMessage, onMutate, onSettled } =
-    useHandleTransactionMutation({
+    useHandleTransactionMutationX({
       settings,
     });
 

package/src/hooks/useTokenX.ts

@@ -0,0 +1,65 @@
+import { useQueryClient, useQuery } from "@tanstack/react-query";
+import { Address } from "viem";
+import { useConfig } from "wagmi";
+import { fetchTokenX } from "../fetch-functions/fetchTokenX.js";
+
+/**
+ * Returns a query key for fetching token data.
+ *
+ * @param {Address | undefined} asset - The token address.
+ * @returns {Array} A unique query key for the token fetch.
+ *
+ * @example
+ * const queryKey = HookFetchTokenQK("0x123...");
+ */
+export const HookFetchTokenQK = (asset?: Address): any[] => [
+  "HookTokenWagmiExtended",
+  asset,
+];
+
+/**
+ * Custom hook for fetching token metadata using extended Wagmi functionality.
+ *
+ * This hook leverages React Query for data fetching and caching.
+ * It retrieves token metadata (such as symbol, decimals, name, etc.) for a given token address.
+ *
+ * @param {Address} [asset] - The token address.
+ * @returns {Object} An object with the following properties:
+ *   - `data`: The token data (or undefined if not loaded).
+ *   - `isLoading`: Boolean indicating if the data is loading.
+ *   - `error`: Any error encountered during the fetch.
+ *   - `queryKey`: The unique key used for the query.
+ *
+ * @example
+ * // In your component:
+ * function MyTokenComponent() {
+ *   const { data, isLoading, error, queryKey } = useTokenX("0x123456...");
+ *
+ *   if (isLoading) return <div>Loading token data...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>Token Symbol: {data.symbol}</p>
+ *       <p>Decimals: {data.decimals}</p>
+ *       <p>Name: {data.name}</p>
+ *     </div>
+ *   );
+ * }
+ */
+export const useTokenX = (asset?: Address) => {
+  const queryClient = useQueryClient();
+  const config = useConfig();
+
+  const { data, ...rest } = useQuery({
+    queryKey: HookFetchTokenQK(asset),
+    queryFn: () => fetchTokenX(asset!, queryClient, config),
+    enabled: Boolean(asset),
+  });
+
+  return {
+    ...rest,
+    data,
+    queryKey: HookFetchTokenQK(asset),
+  };
+};

package/src/index.ts

@@ -1,4 +1,27 @@
-export * from "./hooks/useContractWriteExtended.js";
-export * from "./hooks/useSendTransactionExtended.js";
-export * from "./hooks/useERC20Approve.js";
-export * from "./utils/errorParser.js";
+/* ------------- */
+/*   Mutations   */
+/* ------------- */
+export * from "./hooks/useContractWriteX.js";
+export * from "./hooks/useSendTransactionX.js";
+export * from "./hooks/useERC20ApproveX.js";
+
+/* ------------- */
+/*     Queries   */
+/* ------------- */
+export * from "./hooks/useTokenX.js";
+export * from "./hooks/useFetchAssetAllowanceX.js";
+
+/* ------------- */
+/*      Fetch    */
+/* ------------- */
+export * from "./fetch-functions/fetchTokenX.js";
+
+/* ------------- */
+/*       Utils   */
+/* ------------- */
+export * from "./utils/errorParserX.js";
+
+/* ------------- */
+/*       Config  */
+/* ------------- */
+export * from "./config/defaults.js";

package/src/utils/{errorParser.ts → errorParserX.ts}

@@ -77,7 +77,7 @@ export const getErrorMapping = (): Record<string, string> =>
  * const message = getParsedError(someError);
  * console.log(message); // Outputs a custom error message or a default error message.
  */
-export const getParsedError = (error: any | BaseError): string => {
+export const getParsedErrorX = (error: any | BaseError): string => {
   const defaultMessage = "An unknown error occurred. Please contact support.";
   let message = defaultMessage;
   let errorKey = "";

package/dist/hooks/useERC20Approve.d.ts

@@ -1,28 +0,0 @@
-import { Address } from "viem";
-/**
- * Helper function to determine human readable state of approve.
- *
- * @param {boolean} isApproved - Indicates if the approval is already done.
- * @param {boolean} justApproved - Indicates if the user has just approved.
- * @return {string} - The appropriate button text.
- */
-export declare function getApproveState(isApproved?: boolean, justApproved?: boolean): "Approve Confirmed" | "Approved" | "Approve";
-/**
- * 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.
- * @param {Address} spenderAddress - The address of the spender to approve the transfer to.
- * @param {bigint} [amount=BigInt(0)] - The amount of tokens to approve for transfer. Defaults to 0.
- * @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.
- */
-export declare const useERC20Approve: (tokenAddress?: Address, spenderAddress?: Address, amount?: bigint) => {
-    isApproved: boolean;
-    isApproving: boolean;
-    justApproved: boolean;
-    approveAsync: () => Promise<void>;
-};

package/src/hooks/useContractWriteExtended.ts

@@ -1,44 +0,0 @@
-import { useWriteContract } from "wagmi";
-import {
-  WriteExtendedAsyncParams,
-  useHandleTransactionMutation,
-} from "./useHandleTransactionMutation.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.
- *
- * @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.
- * @param {Function} [settings.onError] - Callback function to be called on transaction error.
- * @param {Function} [settings.onSettled] - Callback function to be called after the transaction settles (whether success or failure).
- * @param {QueryKey[]} [settings.queriesToInvalidate] - Array of query keys to invalidate after the transaction receives a receipt.
- * @returns {Object} Object containing the following properties:
- * - {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.
- */
-
-export function useContractWriteExtended(settings?: WriteExtendedAsyncParams) {
-  const { isPending, errorMessage, onMutate, onSettled } =
-    useHandleTransactionMutation({
-      settings,
-    });
-
-  const { writeContractAsync, ...rest } = useWriteContract({
-    mutation: {
-      onMutate,
-      onSettled,
-    },
-  });
-
-  return {
-    ...rest,
-    isPending,
-    errorMessage,
-    writeContractAsync,
-  };
-}

package/src/hooks/useFetchAssetAllowance.ts

@@ -1,94 +0,0 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Address, erc20Abi } from "viem";
-import { readContract } from "viem/actions";
-import { useAccount, useConfig } from "wagmi";
-import { fetchToken } from "./useToken.js";
-import { queryConfig } from "../query-config/index.js";
-
-export const fetchAllowance = async (
-  asset: Address,
-  spender: Address,
-  userAddress: Address,
-  queryClient: any,
-  config: any
-) => {
-  const [tokenData, allowance] = await Promise.all([
-    fetchToken(asset, queryClient, config),
-    readContract(config, {
-      address: asset,
-      abi: erc20Abi,
-      functionName: "allowance",
-      args: [userAddress, spender],
-    }),
-  ]);
-
-  if (!tokenData || allowance == null) {
-    throw new Error("Failed to fetch token data or allowance");
-  }
-
-  return {
-    bigIntValue: allowance,
-    decimals: tokenData.decimals,
-    symbol: tokenData.symbol,
-  };
-};
-
-const HookFetchAssetAllowanceQK = (
-  asset: Address,
-  spender: Address,
-  userAddress: Address,
-  config: any,
-  queryClient: any
-) =>
-  [
-    "hookFetchAllowance",
-    asset,
-    spender,
-    userAddress,
-    config,
-    queryClient,
-  ] as const;
-
-/**
- * Custom hook for fetching asset allowance.
- *
- * @param {Address} asset - The address of the ERC20 token contract.
- * @param {Address} spender - The address of the spender to check allowance for.
- */
-export const useFetchAssetAllowance = ({
-  asset,
-  spender,
-}: {
-  asset?: Address;
-  spender?: Address;
-}) => {
-  const config = useConfig();
-  const queryClient = useQueryClient();
-  const { address: userAddress } = useAccount();
-
-  const { data, ...rest } = useQuery({
-    queryKey: HookFetchAssetAllowanceQK(
-      asset!,
-      spender!,
-      userAddress!,
-      config,
-      queryClient
-    ),
-    queryFn: () =>
-      fetchAllowance(asset!, spender!, userAddress!, queryClient, config),
-    enabled: !!asset && !!spender && !!userAddress,
-    ...queryConfig.sensitiveDataQueryConfig,
-  });
-
-  return {
-    ...rest,
-    data,
-    queryKey: HookFetchAssetAllowanceQK(
-      asset!,
-      spender!,
-      userAddress!,
-      config,
-      queryClient
-    ),
-  };
-};