Ir al contenido principal
Volver a las aplicaciones de ejemplo

Intermitente Solana

La aplicación Solana Blinker te permite crear Solana y analizar las URL Solana para obtener las acciones correspondientes.

Icono de implementación
Implementar la aplicación
Icono de GitHub
Ver repositorio
Marco de trabajo/biblioteca de front-end:
React/Next.js
Idioma:
TypeScript
Herramienta de compilación/servidor de desarrollo:
Next.js
Vista previa de la aplicación de ejemplo

Resumen

La aplicación Solana Blinker te permite crear e interactuar con Solana mediante el análisis de las URL Solana para obtener las acciones correspondientes. Con esta herramienta, puedes introducir una URL de acción válida para ver sus detalles, conectar tu monedero para ejecutar las acciones disponibles y crear nuevas acciones siguiendo la estructura proporcionada. Tanto si analizas acciones existentes como si creas otras nuevas, esta aplicación simplifica el proceso de interacción con las URL Solana .

Utiliza un Next.js 14 proyecto puesto en marcha con create-next-app.

Antecedentes​

Solana ofrecen una forma estandarizada de enviar transacciones o mensajes firmables desde una aplicación directamente al usuario. Los Blinks son aplicaciones de cliente que convierten Solana en interfaces de usuario compartibles y ricas en metadatos para interactuar con las Actions y ejecutarlas. Para obtener más información, consulta nuestra guía sobre Solana .

Primeros pasos

Instalar las dependencias​

Abre el directorio del proyecto:

cdsolana

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.local y actualízalo con tu EndpointSolana Quicknode Solana .
  • Asegúrate de actualizar el clúster para garantizar que las URL de tus transacciones apunten al explorador correcto (utiliza únicamente los valores de la enumeración proporcionados en el .env.example archivo).
QN_ENDPOINT=mainnet
mainnet# mainnet| devnet | testnet  local

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


  1. Introduce una URL Solana válida en el campo de entrada. Puedes copiar y pegar uno de los enlaces de ejemplo que aparecen en la página de inicio.
  2. Haz clic en «Analizar acción» para ver los detalles de la acción analizada.
  3. Verás los detalles analizados de la URL de la acción. Para ver y ejecutar las acciones disponibles, conecta un monedero.

Vista previa

  1. Haz clic en cualquiera de las acciones disponibles para ejecutarla (tendrás que firmar la transacción cuando te lo solicite tu monedero).
  2. Puedes crear acciones adicionales siguiendo la estructura que se indica en solana

Arquitectura​

src/
├── app/
│   ├── page.tsx # Página principal de Blink
│   └── layout.tsx # Diseño de la página
│   └── api/
│       └── solana
│           └── sendAndConfirm/route.ts # Enviar y confirmar transacción
│       └── acciones/
│           └── memo/route.ts  # Crea una Solana «Memo» de Solana 
│           └── donate/route.ts  # Crea una Solana «Donate» de Solana 
└── componentes/
│   ├── ActionComponents/     # Incluye componentes para analizar y ejecutar Solana 
│   ├── Blink.tsx        # Componente principal
│   ├── SolanaProviders.tsx     # Proveedores de contexto del adaptador de monedero
│   └── [componentes de apoyo]
└── hooks/
│   ├── useActionFetch.ts  # Obtiene y analiza Solana a partir de URL
│   └── useTransactionProcessor.ts  # Ejecuta Solana 
└── utils/ # incluye diversas funciones de utilidad y constantes

Implementar en Vercel

Implementar con Vercel

Documentación de Next.js

Para obtener más información sobre Next.js, echa un vistazo a los siguientes recursos:


Puedes echar un vistazo al repositorio de Next.js en GitHub: ¡tus comentarios y aportaciones son bienvenidos!

Aportaciones y comentarios
¡Nos encantaría conocer tu opinión y agradecemos cualquier aportación a esta aplicación de ejemplo!
Para informar de problemas o enviar comentarios, abre una incidencia en GitHub en el qn-guide-ejemplos repositorio.
Para colaborar, sigue estos pasos:
  1. Hacer un fork del repositorio
  2. Crear una rama de características:
    git checkout -b feature/amazing-feature
  3. Guarda los cambios:
    git commit -m "Añadir una función increíble"
  4. Envía tu rama:
    git push origin feature/amazing-feature
  5. Abre una solicitud de incorporación de cambios.
Descubre más aplicaciones de ejemplo
Intercambio de metaagregación de Titan
Una interfaz de usuario Solana de una sola página, desarrollada sobre la API de metaagregación de Titan Gateway y alojada a través de Quicknode. Muestra las cotizaciones de los distintos proveedores, los nodos en cadena por los que pasa una ruta y un flow de «crear → firmar → enviar» flow custodia propia, flow las transacciones se confirman a través Quicknode .
Intercambio de metaagregación de Titan
Explorador de Solana
Esta aplicación utiliza unEndpoint Quicknode Solana Endpoint recuperar los saldos de tokens, el historial de transacciones y los NFT de una cartera concreta en la Solana .
Explorador de Solana
Intermitente Solana
Esta aplicación te permite crear e interactuar con Solana mediante el análisis de las URL Solana para obtener las acciones correspondientes. Introduce una URL de acción válida para ver sus detalles, conecta tu monedero para ejecutar acciones o crea otras nuevas utilizando la estructura proporcionada.
Intermitente Solana