ape-components v1.0.2

ape-stats-goerli

Three React components and a hook that display Bored Ape related data.

1) ApeStatBar

Displays staked ApeCoin amount, max pool amount, unclaimed amount, and daily rate for the ApeCoin pool, BAYC pool, MAYC pool, and BAKC pool.

2) useStakedAmount

Returns the staked ApeCoin amount for the ApeCoin pool, BAYC pool, MAYC pool, and BAKC pool.

3) ApeUnusedSerums

Given a Bored Ape tokenId, the unused serums to create a Mutant Ape are displayed.

4) ApeMatchedItems

Given a collectionId and tokenId, if they exist, the accompanying BAYC, MAYC, BAKC, and/or OTHR tokens are displayed.

ethereum-multicall is used with a public RPC to retreive the on-chain data.

Installation

Installed with npm or yarn.

If ethers is not in your project, install with ethers as well.

  npm install ape-stats-goerli ethers

or

  yarn add ape-stats-goerli ethers

Usage

ApeStatBar 📊

Currently only Goërli is supported. Mainnet support will be added when the staking contract address is made available.

The stakersAddress is required if poolId is 0. Otherwise the stakersAddress is inferred from the ownerOf the tokenId supplied. \ \ The tokenId is required if poolId is NOT 0. The stakersAddress prop will be ignored in this case.\ \ If poolId is left undefined it will default to 0 ie. the ApeCoin staking pool.

The code snippet below will render the stats for tokenId 1 of the BAYC collection used on Goërli.

import { ApeStatBar } from "ape-stats-goerli";

export default function Page() {
  return <ApeStatBar tokenId={"1"} poolId={"1"} isTestnet={true} />;
}

useStakedAmount 📊

Currently only Goërli is supported. Mainnet support will be added when the staking contract address is made available.

The params go as follows: isTestnet: boolean, poolId: string, tokenId: string, stakersAddress: string \ \ Just like ApeStatBar , stakersAddress is required if poolId is 0. \ And tokenId is required if poolId is 1, 2 or 3 \ \ Refer to table above for poolId reference. \ \ The code snippet below will return the amount of staked ApeCoin for stakersAddress 0x9B6cEd7dc2F47Ae3e30E6162193BD9CE78643A63 on Goërli. \ Enter tokenId as empty string if poolId is 0.

import { useStakedAmount } from "ape-stats-goerli";

export default function Page() {
  const { stakedAmount } = useStakedAmount(true, "0", "", "0x9B6cEd7dc2F47Ae3e30E6162193BD9CE78643A63");

  return <div>{stakedAmount}</div>;
}

The code snippet below will return the amount of staked ApeCoin for the BAYC pool for tokenId 10 on Goërli. \ Omit stakersAddress if poolId is 1, 2, or 3.

import { useStakedAmount } from "ape-stats-goerli";

export default function Page() {
  const { stakedAmount } = useStakedAmount(true, "1", "10");

  return <div>{stakedAmount}</div>;
}

UnusedSerums 🧪

The tokenId and baseUrl are required.

The code snippet below will render the unused serums for tokenId 1 of the BAYC collection used on Ethereum Mainnet.

import { UnusedSerums } from "ape-stats-goerli";

export default function Page() {
  return <UnusedSerums baseUrl="bayc.snag-render.com" tokenId={"1"} />;
}

MatchedItems 🖇️

The collectionId, tokenId, and baseUrl are required.\ The given tokenId must exist.

The code snippet below will render the accompanying MAYC, BAKC, and BAYC tokens for tokenId 1290 of the OTHR collection used on Ethereum Mainnet.

import { MatchedItems } from "ape-stats-goerli";

export default function Page() {
  return <MatchedItems baseUrl="bayc.snag-render.com" tokenId={"1290"} collectionId="1" />;
}

The code snippet below will render the accompanying OTHR, BAKC, and BAYC tokens for tokenId 30006 of the MAYC collection used on Ethereum Mainnet.

import { MatchedItems } from "ape-stats-goerli";

export default function Page() {
  return <MatchedItems baseUrl="bayc.snag-render.com" tokenId={"30006"} collectionId="0" />;
}

Theming

A theme object can be added as a prop to ApeStatBar, UnusedSerums, and MatchedItems for custom styling. \ \ Treat this object as you would inline css styling. \ \ If any of the default styling given to certain parts of the component is undesired, the tables below will aid in custom styling.

Exceptions for ApeStatBar

Exceptions for UnusedSerums

Exceptions for MatchedItems

import { ApeStatBar } from 'ape-stats-goerli'

export default function Page() {
  return(
    <ApeStatBar
        tokenId={"10"}
        poolId={"1"}
        theme={{
            borderRadius: "10px",
            backgroundColor: "#000000",
            border: "1px solid #45494D",
            color: "white",
            padding: "1.5rem"
            skeletonBackgroundColor: "pink"
        }}
    />
  )
}

Props for ApeStatBar

Props for UnusedSerums

Props for MatchedItems