This is a simple demo let's stand up a staking page to easily empower your users to stake to your validator. The demo will:
The demo uses
- Solana Kit
- Wallet Standard
- Next.js 15 project bootstrapped with
create-next-app. - Radix UI
Open the project dictory:
cd sample-dapps/solana-staking-uiThen, install the dependencies:
npm install
# or
yarn
# or
pnpm install
# or
bun installMake sure you have a QuickNode endpoint handy--you can get one free here.
- Rename
.env.exampleto.envand update with your QuickNode Solana Node Endpoint. - Specify which cluster you are using (mainnet-beta, devnet) (using
NEXT_PUBLIC_NETWORK_ENV). - Specify the validator vote address that your staker should stake to (using
NEXT_PUBLIC_VALIDATOR_ADDRESS). The default value,5s3vajJvaAbabQvxFdiMfg14y23b2jvK6K2Mw4PYcYKis QuickNode's validator.
DEVNET_RPC_ENDPOINT=https://example.solana-devnet.quiknode.pro/12345/
MAINNET_RPC_ENDPOINT=https://example.solana-mainnet.quiknode.pro/12345/
NEXT_PUBLIC_NETWORK_ENV=mainnet
NEXT_PUBLIC_VALIDATOR_ADDRESS=5s3vajJvaAbabQvxFdiMfg14y23b2jvK6K2Mw4PYcYKFirst, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
- Upload an Image (this will be used for your token metadata)
- Fill out the form with the token details
- Connect your wallet
- Make sure you have ~0.04 SOL in your wallet to cover the new account fees
- If you are using Devnet, you can get free SOL from the Solana Faucet
- Click "Mint" to upload your image and metadata to IPFS and mint your token!
src/
├── app/
│ ├── page.tsx
│ └── layout.tsx
│ └── api/
│ └── balance/
│ │ └── route.ts # Get wallet SOL balance
│ └── stake/
│ │ └── fetch/route.ts # Get a wallets' staking accounts
│ │ └── generate/route.ts # Generate staking accounts
│ └── transaction/
│ └── confirm/route.ts # Confirm a transaction
└── components/
├── stake/ # Various staking components
└── [supporting components]
└── context/ # Wallet connect context
└── hooks/ # Is wallet connected hook
└── utils/ # Is wallet connected hook
├── solana/ # Solana staking and account utils
└── config.ts # Network settup
└── constants.ts