e# Staking UI
This repository hosts the UI inteface that powers https://stake.host.so for staking NFTs on Solana.
Use this repo to create and deploy stake pools with built-in reward distribution, or build your own custom interface with our underlying staking protocol.
For questions or technical help, join our Discord.
To create a stake pool, navigate to the admin page located at https://stake.host.so/admin. This page hosts a form to create a stake pool with various configurations.
Note: All configurations in the admin page are optional. Also, filters in the stake pool configuration are union-based, if any one of the conditions is met, then the NFT will be allowed to stake in the pool.
After creating your stake pool, you will receive a Stake Pool Id. View your stake pool at https://stake.host.so/[stakePoolId]
Pools by default will have no metadata. View the section titled "Customizing your Stake Pool" to learn about adding images, colors and custom pool name.
Pool Creation Parameters:
export type StakePoolParams {
allowedCollections?: PublicKey[];
allowedCreators?: PublicKey[];
requiresAuthorization?: boolean;
overlayText?: string;
imageUri?: string;
resetOnStake?: boolean;
}Reward Distribution Parameters
export type RewardDistributionParams {
stakePoolId: PublicKey;
rewardMintId: PublicKey;
rewardAmount?: BN;
rewardDurationSeconds?: BN;
kind?: RewardDistributorKind;
maxSupply?: BN;
supply?: BN;
}There are two types of reward distribution (RewardDistributionKind) with Staking.
- Mint - give mint authority of your reward token to the stake pool so the pool can mint on demand
- Treasury - transfer reward tokens from your wallet to the stake pool, top-up the stake pool treasury balance whenever needed.
The program and related UIs are deployed on Solana mainnet-beta and devnet. By default the UI will point to mainnet. You can ovverride this by using ?cluster=devnet in the URL or navigating to https://dev-stake.host.so. All configuration is scoped to that environment, and no data including pools, reward distributors, tokens, NFTs or sol will be carried over from mainnet to devnet and vice-versa.
In order to easily access your stake pool, airdrop NFTs on devnet for your specific collection and get a stake.host.so/[projectName] url, you'll need to create a Stake Pool metadata object. NOTE if you specified a verified creator in a devnet pool, airdropped NFTs will not be allowed into that pool because your creator will not be verified.
export type StakePoolMetadata = {
// Name of this stake pool used as an id. Should be in lower-case kebab-case since it is used in the URL as /{name}
// https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Why-you-should-make-kebab-case-a-URL-naming-convention-best-practice
name: string
// Display name to be displayed in the header. Often the same as name but with capital letters and spaces
displayName: string
// Publickey for this stake pool
stakePoolAddress: PublicKey
// Default receipt type. Setting this will remove the option for the user to choose which receipt type to use
receiptType?: ReceiptType
// Default empty. Setting this will tell the UI to only show tokens of that standard. Supports fungible or non-fungible
tokenStandard?: TokenStandard
// Optional config to hide this pool from the main page
hidden?: boolean
// Optional config to disable finding this pool
notFound?: boolean
// Optional hostname to remap -- SEE NOTE BELOW
hostname?: string
// Optional config to link redirect to page when you click on this pool
redirect?: string
// Hide allowed tokens style
hideAllowedTokens?: boolean
// styles to apply to the whole stake pool
styles?: CSSProperties
// Colors object to style the stake page
colors?: {
primary: string
secondary: string
accent?: string
fontColor?: string
fontColorSecondary?: string
backgroundSecondary?: string
}
// Disallow regions based on IP address
disallowRegions?: { code: string; subdivision?: string }[]
// Image url to be used as the icon in the pool selector and the header
imageUrl?: string
// Background banner image for pool
backgroundBannerImageUrl?: string
// Website url if specified will be navigated to when the image in the header is clicked
websiteUrl?: string
// Max staked is used to compute percentage of total staked
maxStaked?: number
// Links to show at the top right of the page
links?: { text: string; value: string }[]
// On devnet when you click the airdrop button on this page it will clone NFTs with this metadata and airdrop to the user. These will not contain verified creators
airdrops?: AirdropMetadata[]
// Analytics to show at the top of stake pool. supports trait based analytics and overall tokens data
analytics?: Analytic[]
}In your pool's admin portal (eg. https://stake.host.so/admin/[poolId]), create your own config on-chain under the Config tab. You'll now be able to access your project at https://stake.host.so/[name].
https://www.notion.so/-labs/-Staking-Fees-14e66a64fb2d4615892937c5dbaa91cc
For a custom hostname...
- Add your
hostnameto your pool config inapi/mapping.ts - Open a PR to this repo with that change
- Set the following record on your DNS provider to continue:
Type NAME CNAME
CNAME {your subdomain} cname.vercel-dns.com
Now that you've made and deployed your stake pool, you can either stick with 's UX for the stake pool experience or build your own.
Simply modify pages/[stakePoolId]/index.tsx with your own react styling, and host the stake pool on your own domain.
To get started, clone the repo and run:
yarn installNext, run the development server:
yarn run devOpen http://localhost:3000 with your browser to see the staking interface running locally.
To access different clusters in the scaffold, set the cluster query parameter in the URL:
- Mainnet - http://localhost:3000?cluster=mainnet
- Devnet - http://localhost:3000?cluster=devnet
- Testnet - http://localhost:3000?cluster=testnet
The default cluster set is mainnet. It's recommended to ensure you have ?cluster=devnet while testing out functionality.
Join our Discord to get technical support as you build on .