Solana Staking UI

Esta aplicación permite a los usuarios realizar staking rápidamente en tu validador de Solana con una configuración mínima. Incluye conexiones de monedero preconfiguradas, lo que permite a tus usuarios conectar sus monederos de Solana preferidos y realizar staking con sus tokens directamente en tu nodo validador a través de una interfaz sencilla y optimizada.

Implementar la aplicación

Ver repositorio

Marco de trabajo o biblioteca de front-end:

React

Idioma:

TypeScript

Herramienta de compilación/servidor de desarrollo:

Next.js

Vista previa de la aplicación de ejemplo

Resumen

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

Kit Solana
Wallet Standard
Next.js proyecto puesto en marcha con create-next-app.
Radix UI

Primeros pasos

Instalar las dependencias

Open the project directory:

cd sample-dapps/solana-staking-ui

Then, install the dependencies:

npm instalar
# o
yarn
# o
pnpm instalar
# o
bun install

Configurar variables de entorno

Asegúrate de tener a mano un punto de conexión de Quicknode; puedes conseguir uno gratis aquí.

Cambiar el nombre .env.example a .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

En primer lugar, ejecuta el servidor de desarrollo:

npm ejecutar dev
# o
yarn dev
# o
pnpm dev
# o
bun dev

Abre http://localhost:3000 en tu navegador para ver el resultado.

Cómo utilizar la 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!

Arquitectura

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 