useLeaderboard

Hook for retrieving the top 5 accounts that have received the most tokens or points in a given campaign.

It’s possible to also specify an address to ensure it appears in the leaderboard, which is useful for displaying the rank of the currently connected account.

Import


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

Usage


import { useLeaderboard } from "@metrom-xyz/react";
 
function App() {
  const { isLoading, data } = useLeaderboard({
    chainId: 1,
    campaignId:
      "0xa8b1dc25d4ea47406771c4db401455a5d8b377dff381e2aea2722084808b4b47",
    address: "0x0000000000000000000000000000000000000000",
  });
 
  if (isLoading) return <div>loading...</div>;
 
  if (!data) return <div>no distribution yet</div>;
 
  return (
    <div>
      <p>Last distribution: {data.timestamp}</p>
      <p>
        Your rank: #{data.connectedAccountRank.position}
        {data.connectedAccountRank.weight}
      </p>
      {data.sortedRanks.map((rank, i) => (
        <div key={rank.account}>
          <p>
            Rank: #{i + 1} {rank.weight}
          </p>
          {rank.distributed instanceof Array ? (
            <div>
              {/* Campaign with token rewards have an array of distributed tokens */}
            </div>
          ) : (
            <div>
              {/* Campaign with point rewards have a single distributed object */}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

Parameters


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

campaignId

Hex | undefined

Id of the campaign for which to fetch the leaderboard. Defaults to undefined.


import { useLeaderboard } from "@metrom-xyz/react";
 
function App() {
  const { isLoading, data } = useLeaderboard({
    campaignId:
      "0xa8b1dc25d4ea47406771c4db401455a5d8b377dff381e2aea2722084808b4b47",
  });
}

chainId

number | undefined

Chain id of the campaign; the chain id is where the campaign lives in. Defaults to undefiend.


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

address

Address | undefined

The address that has to be included in the leaderboard, ususally the currently connected account. Defaults to undefined.


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

data

Leaderboard | undefined

Leaderboard containing the latest rewards distribution time, the top 5 most rewarded accounts, and the connected account rank (if the address was provided). Defaults to undefiend.

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.