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.

Autor

Aaron Milano

Implementar la aplicación

Ver repositorio

Marco de trabajo/biblioteca de front-end:

Reaccionar

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

La demostración utiliza

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

Primeros pasos

Instalar las dependencias

Abre el directorio del proyecto:

cd sample-dapps/solana-staking-ui

A continuación, instala las dependencias:

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

Configurar variables de entorno

Asegúrate de tener a mano unendpoint Quicknode endpoint conseguir uno gratis aquí.

Cambiar nombre .env.example a .env y actualízalo con tu EndpointSolana Quicknode Solana .
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

Sube una imagen (se utilizará para los metadatos de tu token)
Rellena el formulario con los datos del token
Conecta tu monedero
- Asegúrate de tener unos 0,04 SOL en tu monedero para cubrir las comisiones de la nueva cuenta.
- Si utilizas Devnet, puedes conseguir SOL gratis en el Solana .
¡Haz clic en «Mint» para subir tu imagen y los metadatos a IPFS acuñar tu 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 