ape-components

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.

Pool ID	Description
0	ApeCoin Pool
1	BAYC Pool
2	MAYC Pool
3	BAKC 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 🖇️

Colletion ID	Description
0	MAYC Token
1	OTHR Token
2	BAKC Token
3	BAYC TOken

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

Theme Key	Description	Default
subTitleFontSize	Font size describing which pool the data is from.	60%
skeletonBackgroundColor	Color of the loading placeholder.	#DDDBDD
statColor	Font color of the stats.	limegreen
rateFontSize	Font size of the 24hr rate.	.6rem
linkFontSize	Font size of the external link.	60%

Exceptions for UnusedSerums

Theme Key	Description	Default
dividerColor	Color of dividing line.	rgb(55, 59, 66)
skeletonBackgroundColor	Color of the loading placeholder.	#DDDBDD
buyButtonColor	Font and border color of the buy button.	rgb(85, 189, 82)

Exceptions for MatchedItems

Theme Key	Description	Default
dividerColor	Color of dividing line.	rgb(55, 59, 66)
skeletonBackgroundColor	Color of the loading placeholder.	#DDDBDD
ownedByColor	Font color of the text that says "Owned by".	rgb(140, 149, 156)
listingPriceColor	Font color of the listing price.	rgb(140, 149, 156)
listingPriceFontSize	Font size of the listing price.	80%
listingPriceFontWeight	Font weight of the listing price.	300
listingPricePaddingTop	Top padding of the listing price.	.25rem

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

Parameter	Type	Description	Default
stakersAddress	string	Required if poolId is 0. Valid wallet address.	undefined
tokenId	string	Required if poolId is NOT 0. Valid tokenId for NFT.	undefined
poolId	string	Pool ID to determine which staking pool to retrieve data from.	'0'
theme	object	Inline CSS styling object.	undefined
isTestnet	boolean	Boolean used for choose which chain to get staking data from.	false

Props for UnusedSerums

Parameter	Type	Description	Default
tokenId	string	Required. Valid tokenId for BAYC token.	undefined
baseUrl	string	Required. Base URL for external link.	undefined
theme	object	Inline CSS styling object.	undefined

Props for MatchedItems

Parameter	Type	Description	Default
tokenId	string	Required. Valid tokenId for BAYC token.	undefined
baseUrl	string	Required. Base URL for external link.	undefined
collectionId	string	Required. Reference to determine what collection the given tokenId is from.	undefined
theme	object	Inline CSS styling object.	undefined