跳转至主要内容
返回示例应用

Solana Staking UI

该应用程序让用户只需极少的设置，即可快速向您的Solana 进行质押。它提供了预配置的钱包连接功能，使用户能够连接自己偏好的Solana 并通过简单流畅的界面将代币直接质押到您的验证节点上。

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
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

入门指南​

Install Dependencies​

Open the project directory:

cd sample-dapps/solana-staking-ui

Then, install the dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

Set Environment Variables​

Make sure you have a Quicknode endpoint handy--you can get one free here.


  • 重命名 .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

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Using the Dapp​


  1. Upload an Image (this will be used for your token metadata)
  2. Fill out the form with the token details
  3. 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
  4. 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

部署到 Vercel​

使用 Vercel 进行部署

投稿与反馈
我们非常期待收到您的反馈，并欢迎大家为本示例应用贡献力量！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Titan 元聚合交换
一个基于Titan Gateway元聚合API构建的单页Solana 界面，通过Quicknode提供服务。该界面展示了各家提供商的报价、交易路径所经过的链上交易场所，以及一个自主托管式的“构建→签名→发送flow 交易通过Quicknode flow 确认。
Titan 元聚合交换
Solana 浏览器
该应用程序利用Quicknode Solana Endpoint Solana 上检索指定钱包的代币余额、交易记录和 NFT。
Solana 浏览器
Solana 转向灯
通过此应用程序，您可以将Solana URL 解析为相应的操作，从而创建并操作Solana 。输入有效的操作 URL 以查看其详细信息，连接您的钱包以执行操作，或使用提供的结构创建新操作。
Solana 转向灯