Solana Staking UI

이 애플리케이션을 사용하면 사용자는 최소한의 설정만으로 귀하의 Solana 신속하게 스테이킹할 수 있습니다. 미리 구성된 지갑 연결 기능이 제공되므로, 사용자는 선호하는 Solana 연결하고 간단하고 간소화된 인터페이스를 통해 귀하의 검증자 노드에 직접 토큰을 스테이킹할 수 있습니다.

Author

애런 밀라노

앱 배포

리포지토리 보기

프론트엔드 프레임워크/라이브러리:

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 project bootstrapped with create-next-app.
Radix UI

시작하기

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.

Rename .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

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 