Solana Staking UI

This application lets users quickly stake to your Solana validator with minimal setup. It comes with pre-configured wallet connections, allowing your users to connect their preferred Solana wallets and stake their tokens directly to your validator node through a simple, streamlined interface.

部署应用

查看代码库

前端框架/库：

React

语言：

TypeScript

构建工具/开发服务器：

Next.js

概述

This is a simple demo let's stand up a staking page to easily empower your users to stake to your validator (modeled off of Quicknode Solana Stake UI).

The demo uses

Solana 工具包
Wallet Standard
Next.js 该项目通过以下方式启动： create-next-app.
Radix UI

入门指南

安装依赖项

Open the project directory:

cd sample-dapps/solana-staking-ui

Then, install the dependencies:

npm 安装
# 或
yarn
# 或
pnpm 安装
# 或
bun install

设置环境变量

请确保手头有一个 Quicknode 端点——您可以在这里免费获取一个。

重命名 .env.example 到 .env and 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, 5s3vajJvaAbabQvxFdiMfg14y23b2jvK6K2Mw4PYcYK is 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=5s3vajJvaAbabQvxFdiMfg14y23b2jvK6K2Mw4PYcYK

首先，运行开发服务器：

npm 运行 dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

请使用浏览器打开http://localhost:3000以查看结果。

使用 Dapp

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 