feat: add useSendIbcTokens hook and action

packages/graz/src/actions/methods.ts

@@ -2,7 +2,7 @@ import type { Coin } from "@cosmjs/proto-signing";
 import type { DeliverTxResponse } from "@cosmjs/stargate";
 
 import { useGrazStore } from "../store";
-import type { SendTokensProps } from "../types/methods";
+import type { SendIbcTokensProps, SendTokensProps } from "../types/methods";
 
 export async function getBalances(bech32Address: string): Promise<Coin[]> {
  const { activeChain, signingClients } = useGrazStore.getState();
@@ -48,3 +48,38 @@ export async function sendTokens({
  }
  return signingClients[defaultSigningClient].sendTokens(senderAddress, recipientAddress, amount, fee, memo);
 }
+
+/**
+ *
+ * @see https://cosmos.github.io/cosmjs/latest/stargate/classes/SigningStargateClient.html#sendIbcTokens
+ */
+export async function sendIbcTokens({
+ senderAddress,
+ recipientAddress,
+ transferAmount,
+ sourcePort,
+ sourceChannel,
+ timeoutHeight,
+ timeoutTimestamp,
+ fee,
+ memo,
+}: SendIbcTokensProps) {
+ const { signingClients } = useGrazStore.getState();
+ if (!signingClients?.stargate) {
+ throw new Error("Stargate client is not ready");
+ }
+ if (!senderAddress) {
+ throw new Error("senderAddress is not defined");
+ }
+ return signingClients.stargate.sendIbcTokens(
+ senderAddress,
+ recipientAddress,
+ transferAmount,
+ sourcePort,
+ sourceChannel,
+ timeoutHeight,
+ timeoutTimestamp,
+ fee,
+ memo,
+ );
+}

packages/graz/src/hooks/methods.ts

@@ -1,9 +1,9 @@
 import type { DeliverTxResponse } from "@cosmjs/stargate";
 import { useMutation } from "@tanstack/react-query";
 
-import { sendTokens } from "../actions/methods";
+import { sendIbcTokens, sendTokens } from "../actions/methods";
 import type { MutationEventArgs } from "../types/hooks";
-import type { SendTokensProps } from "../types/methods";
+import type { SendIbcTokensProps, SendTokensProps } from "../types/methods";
 import { useAccount } from "./account";
 
 /**
@@ -56,3 +56,53 @@ export function useSendTokens({ onError, onLoading, onSuccess }: MutationEventAr
  status: mutation.status,
  };
 }
+/**
+ * graz mutation hook to send IBC tokens with optional arguments to invoke given functions on error, loading, or success event.
+ *
+ *
+ * @example
+ * ```ts
+ * import { useSendIbcTokens } from "graz";
+ *
+ * // basic example
+ * const { sendIbcTokens } = useSendIbcTokens();
+ *
+ * sendIbcTokens({
+ * // ...args
+ * })
+ * ```
+ */
+export function useSendIbcTokens({ onError, onLoading, onSuccess }: MutationEventArgs = {}) {
+ const { data: account } = useAccount();
+ const accountAddress = account?.bech32Address;
+
+ const queryKey = ["USE_SEND_IBC_TOKENS", onError, onLoading, onSuccess, accountAddress];
+ const mutation = useMutation<DeliverTxResponse, unknown, SendIbcTokensProps>(
+ queryKey,
+ ({ senderAddress, ...rest }) =>
+ sendIbcTokens({
+ senderAddress: senderAddress || accountAddress,
+ ...rest,
+ }),
+ {
+ onError: (err, txResponse) => Promise.resolve(onError?.(err, txResponse)),
+ onMutate: onLoading,
+ onSuccess: (txResponse) => Promise.resolve(onSuccess?.(txResponse)),
+ },
+ );
+
+ return {
+ error: mutation.error,
+ isLoading: mutation.isLoading,
+ isSuccess: mutation.isSuccess,
+ /**
+ * if senderAddress undefined, it will use current connected account address
+ */
+ sendIbcTokens: mutation.mutate,
+ /**
+ * if senderAddress undefined, it will use current connected account address
+ */
+ sendIbcTokensAsync: mutation.mutateAsync,
+ status: mutation.status,
+ };
+}

packages/graz/src/types/methods.ts

@@ -1,5 +1,6 @@
 import type { Coin } from "@cosmjs/proto-signing";
 import type { StdFee } from "@cosmjs/stargate";
+import type { Height } from "cosmjs-types/ibc/core/client/v1/client";
 
 export interface SendTokensProps {
  senderAddress: string | undefined;
@@ -8,3 +9,15 @@ export interface SendTokensProps {
  fee: number | StdFee | "auto";
  memo?: string;
 }
+
+export interface SendIbcTokensProps {
+ senderAddress: string | undefined;
+ recipientAddress: string;
+ transferAmount: Coin;
+ sourcePort: string;
+ sourceChannel: string;
+ timeoutHeight: Height | undefined;
+ timeoutTimestamp: number | undefined;
+ fee: number | StdFee | "auto";
+ memo: string;
+}