useClaims

Hook for fetching the available claims for an account.

Import


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

Usage


import { useClaims } from "@metrom-xyz/react";
 
function App() {
  const { isLoading, data } = useClaims({
    address: "0x0000000000000000000000000000000000000000",
  });
 
  if (isLoading) return <div>loading...</div>;
 
  if (data.length === 0) return <div>no claims</div>;
 
  return (
    <div>
      {data.map((claim) => (
        <div key={claim.id}>
          <p>{claim.campaignId}</p>
          <p>{claim.token.symbol}</p>
          <p>{claim.amount.formatted}</p>
          <p>{claim.amount.remaining}</p>
        </div>
      ))}
    </div>
  );
}

Parameters


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

address

Address | undefined

The wallet address of the receiver account.


import { useClaims } from "@metrom-xyz/react";
 
function App() {
  const { isLoading, data } = useClaims({
    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


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

data

ClaimWithRemaining[] | undefined

List of claims available for the provided address. Defaults to undefined.

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.