useClaimsTransaction

Hook for simulating and validating the contract interactions to claim the specified rewards for an account on a given chain id.

Import


import { useClaimsTransaction } from "@metrom-xyz/react";

Usage


import { useState } from "react";
import { useWriteContract } from "wagmi";
import { useClaims, useClaimsTransaction } from "@metrom-xyz/react";
 
function App() {
  const [claiming, setClaiming] = useState(false);
  const { writeContractAsync } = useWriteContract();
 
  const { data: claims } = useClaims({
    address: "0x0000000000000000000000000000000000000000",
  });
 
  const { isLoading, data: transaction } = useClaimsTransaction({
    chainId: 1,
    claims,
    address: "0x0000000000000000000000000000000000000000",
  });
 
  function claimRewards() {
    if (!transaction) return;
 
    const claim = async () => {
      setClaiming(true);
 
      try {
        await writeContractAsync(transaction.request);
      } catch (error) {
        console.warn("Could not claim rewards", error);
      } finally {
        setClaiming(false);
      }
    };
 
    void claim();
  }
 
  if (isLoading) return <div>loading...</div>;
 
  return (
    <div>
      <button onClick={claimRewards} disabled={!transaction || claiming}>
        Claim rewards
      </button>
    </div>
  );
}

Parameters


import { type UseClaimsTransactionParams } from "@metrom-xyz/react";

chainId

number

The chain id on which the claims are performed.


import { useClaimsTransaction } from "@metrom-xyz/react";
 
function App() {
  const { isLoading, data } = useClaimsTransaction({
    chainId: 1,
  });
}

claims

Claim[]

The list of claims retrieved using the useClaims hook.


import { useClaimsTransaction, useClaims } from "@metrom-xyz/react";
 
function App() {
  const { data: claims } = useClaims({
    address: "0x0000000000000000000000000000000000000000",
  });
 
  const { isLoading, data } = useClaimsTransaction({
    chainId: 1,
    claims,
    address: "0x0000000000000000000000000000000000000000",
  });
}

options

TanStack Query parameters. See the TanStack Query query docs for more info.

Metrom React library does not support all TanStack Query parameters, like queryFn and queryKey, are used internally and cannot be overriden. Check out the source to see what parameters are not supported.

Return Type

The returned object includes the transaction simulation result, that can be used to submit the transaction, using the useWriteContract hook from wagmi.


import { type UseClaimsTransactionReturnValue } from "@metrom-xyz/react";

data

ClaimRewardsSimulationResult | undefined

Validated transaction data that can be submitted on chain. Defaults to undefined.

error

SimulateContractErrorType | null

Claims transaction simulation error. Defaults to null.

isPending

boolean

Is true whenever there’s no cached data and no query attempt was finished yet.

isLoading

boolean

Is true whenever the first fetch for a query is in-flight.

isFetching

boolean

Is true whenever the queryFn is executing, which includes initial pending as well as background refetches.