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 |