The UI for staking NFTs on Solana. Cardinal staking UI can be treated as an admin interface for stake pools hosted by cardinal-staking as well as a barebones end-user staking UI

Overview

Cardinal Staking UI

This repository hosts the UI inteface that powers https://stake.cardinal.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.


Getting Started

This is a Next.js project bootstrapped with create-next-app.

Installation

To get started, clone the repo and run:

yarn install

Next, run the development server:

yarn run dev

Open http://localhost:3000 with your browser to see the staking interface running locally.

Set your Cluster

To access different clusters in the scaffold, set the cluster query parameter in the URL:

The default cluster set is mainnet. It's recommended to ensure you have ?cluster=devnet while testing out functionality.

Create a Stake Pool

To create a stake pool, navigate to the admin page located at http://localhost:3000/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 http://localhost:3000/[stakePoolId]

Pool Creation Parameters:

export type StakePoolParams {
    requiresCollections?: PublicKey[];
    requiresCreators?: 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 Cardinal Staking.

  1. Mint - give mint authority of your reward token to the stake pool so the pool can mint on demand
  2. Treasury - transfer reward tokens from your wallet to the stake pool, top-up the stake pool treasury balance whenever needed.

Accessing your Stake Pool

In order to easily access your stake pool, airdrop NFTs on devnet for your specific collection and get a stake.cardinal.so/[projectName] url, you'll need to create a Stake Pool metadata object.

export type StakePoolMetadata = {
  name: string
  displayName: string
  pubkey: PublicKey
  filters?: {
    type: 'creators' | 'symbol' | 'issuer'
    value: string | string[]
  }[],
  airdrops?: AirdropMetadata[],
  imageUrl?: string
  websiteUrl?: string
  maxStaked?: number
}

In api/maping.ts, add your own object to the stakePoolMetadatas array. You'll now be able to access your project at http://localhost:3000/[name].

In order to get a custom Cardinal URL, deploy your pool on mainnet and then make a PR to our api/mapping.ts file in this repo with updates containing your pool's metadata.

Deployment and Beyond

Now that you've made and deployed your Cardinal stake pool, you can either stick with Cardinal'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.

Have questions?

Join our Discord to get technical support as you build on Cardinal.


Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Comments
  • Show staked NFTS country wise

    Show staked NFTS country wise

    My NFT collection has the following metadata Name: Jango #1 Background: Blue: Country: Atlanta Position: Horizontal.

    The collection is about 5000. Out of these 1000 NFTs belong to country Atlanta, 1000 NFTs Georgia 1000 NFTs Tennsse 1000 NFTs California

    My requirement is to show on the Cardinal UI, the percentage staked by countries and also hyperlink the country name ( to redirect to a third-party website ) I have shared with you a screenshot of what exactly I'm looking for. To make this happens pls let me know how to implement this on your code.

    White with Pink Hearts Doodle Girlfriend Valentines Card

    opened by johgear 20
  • Nextconfig.json+  Adding new customized page for sweet apocalypse

    Nextconfig.json+ Adding new customized page for sweet apocalypse

    const { withSentryConfig } = require('@sentry/nextjs')

    const HOST_MAPPINGS = [ { name: 'rogue-sharks', hostname: 'stake.roguesharks.org', }, { name: 'Orbit', hostname: 'stake.unfrgtn.space', }, { name: 'degengod', hostname: 'stake.degengod.xyz', }, { name: 'onespace', hostname: 'stake.1space.me', }, { name: 'Sweet-Apocalypse', hostname: 'stake.sweetapocalypse.org', }, ]

    opened by ChippuArt 4
  • Update Page/[StakePoolId]/Index.tsx to allow images fitting any screen

    Update Page/[StakePoolId]/Index.tsx to allow images fitting any screen

    bandicam 2022-09-01 13-18-06-880 Starting at line 535:: return ( <div style={{ background: stakePoolMetadata?.colors?.primary, backgroundImage: url(${stakePoolMetadata?.backgroundImage}), backgroundSize: 'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat', }}

    As you can see they are only 3 lines to add to let any image uploaded as an background image fit nicely into the background without creating any issues.

    opened by ChippuArt 3
  • Update wallet adapter

    Update wallet adapter

    This PR updates Wallet Adapter to the latest RC which includes Wallet Standard and MWA support.

    cc @jpbogle @jordansexton

    also linking similar PR on cardinal-rental-ui https://github.com/cardinal-labs/cardinal-rental-ui/pull/189

    opened by gchatz22 1
  • Unstaking fee

    Unstaking fee

    It would be cool if it was possible to add an unstaking fee you can set and the sol then goes to a specific wallet. I have seen this from gemfarm where you can set a unstaking fee in lamports in the config, like it is possible to do in our admin config. In gemfarm tho it spares the lamports and you can claim it in the admin config. Doesnt really matter, but what is possible to make.

    opened by Hutsnabil 2
Owner
Cardinal
The Utility Layer for Solana NFTs
Cardinal
🎉 基于 reactjs 开发的可视化项目实战【https://wuli-admin.gitee.io/react-wuli-admin/#/workspace/fullscreen】

react-visual-data 介绍 ?? 基于 reactjs 开发的可视化项目实战 亮点 大屏设计器:自由拖拽大屏 报表设计器:自适应排列布局 动态表单:schema 设计模式 vue版本尝鲜:vue版本尝鲜 issues,欢迎提交~ 调试 > git clone https://githu

Aaron,chen 93 Dec 13, 2022
An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

Júlio Bem 3 Sep 28, 2021
The user interface of the Restreamer for the connection to the Core application.

Restreamer-UI The user interface of the Restreamer for the connection to the Core application. React Material-UI (MUI) Development For the Restreamer

datarhei 12 Dec 21, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Create, Export, Share, and Use any Shapes of your choice. View Demo · Report Bug · Request Feature ?? Introducing TryShape TryShape is an opensource p

TryShape 148 Dec 26, 2022
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 208 Jan 8, 2023
frontend-matong-admin

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 2 Dec 21, 2021
Voler - The first Bootstrap 5 admin dashboard template

<<<<<<< HEAD Voler Voler is a Admin Dashboard Template that can help you develop faster. Made with Bootstrap 5 Alpha. No jQuery dependency. Installati

Ahmad Saugi 446 Dec 28, 2022
An Admin Panel developed for simplifying the process of CRUD operations in the database.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Chetan Thakral 6 Dec 15, 2022
As a user, I want to be able to post about travel locations and provide comments and ratings. As a user, I want to be able to look at other users posts and search travel locations by rating.

Travel-bug https://travelbug-project.herokuapp.com/ Table of Contents User-Story Description Installation Usage Contributions Tests License Questions

Megan 3 Mar 2, 2022
A bookstore app that allows a user add a book, displays added book with reviews and rating for each book and allows a user delete a book.

BOOKSTORE A bookstore app that allows a user add a book, displays added book with reviews and rating for each book and allows a user delete a book. Bu

Promise Okechukwu 7 Nov 1, 2022
This is full stack todo Application which has front end and backend side on my own. So you can try this out. Build using

Full Stack Todo Application Hello Everyone... Here I am sharing some information about the TODO APP which I build using React, Redux, Material UI, Exp

Nayan Ingale 5 Nov 8, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
This is a calculator application. The user can do some calculations on this application.

Math Magicians This is a calculator application. The user can do some calculations on this application. Built with: Reactjs Redux Live Live demo deplo

Firdavs Allamurotov 4 May 15, 2022
Joke feedback interface that prevents unconstructive criticism

Feedback Sentiment Try it out! I always love and welcome constructive criticism, but when "feedback" becomes unconstructive and borderline insulting..

null 34 Nov 30, 2021
A simplified Telegraf plugin to provide users with a great interface.

telegraf-pagination A simplified Telegraf plugin to provide users with a great interface. Getting started Prerequisites You need to have telegraf inst

Alisher Ortiqov 8 Nov 21, 2022
null 136 Dec 30, 2022
CoWIN Vaccination Tracker, Below is the PRODUCTION LINK this is updated at end of each day. To see any latest Updates, please check the documentation

CoWIN Vaccination Slots Checking App. CoWIN Vaccination Slots Checking App is a user-friendly website that allow users to find vaccine in nearby avail

Stephin Reji 31 Jan 28, 2022
Would You Rather App (Front End Developer Udacity Nanodegree)

Would You Rather App Table of Contents Overview Built with Install (How it works) Overview Would You Rather is the Second project with React Redux in

Ahmed Bayoumi 1 Apr 28, 2022