Aller directement au contenu principal
Retour aux exemples d'applications

Clignotant Solana

L'application Solana Blinker vous permet de créer Solana et d'analyser les URL Solana pour les transformer en actions correspondantes.

Icône de déploiement
Déployer l'application
Icône GitHub
Consulter le dépôt
Framework/bibliothèque front-end :
React/Next.js
Langue :
TypeScript
Outil de compilation/serveur de développement :
Next.js
Aperçu de l'application d'exemple

Présentation générale

L'application Solana Blinker vous permet de créer Solana et d'interagir avec Solana en analysant les URL Solana pour les transformer en actions correspondantes. Grâce à cet outil, vous pouvez saisir une URL d'action valide pour consulter ses détails, connecter votre portefeuille afin d'exécuter les actions disponibles et créer de nouvelles actions en suivant la structure fournie. Que vous analysiez des actions existantes ou que vous en créiez de nouvelles, cette application simplifie le processus d'interaction avec les URL Solana .

Il utilise un Next.js 14 projet lancé grâce à create-next-app.

Background​

Solana constituent un moyen standardisé de transmettre des transactions ou des messages signables depuis une application directement à un utilisateur. Les « Blinks » sont des applications client qui transforment Solana en interfaces utilisateur partageables et riches en métadonnées, permettant d'interagir avec ces Actions et de les exécuter. Pour plus d'informations, consultez notre guide sur Solana ».

Pour commencer

Installer les dépendances​

Ouvrez le répertoire du projet :

cdsolana

Ensuite, installez les dépendances :

npm installer
# ou
yarn
# ou
pnpm installer
# ou
bun install

Définir les variables d'environnement​

Assurez-vous d'avoir unendpoint Quicknode à portée de mainendpoint pouvez en obtenir un gratuitement ici.


  • Renommer .env.example à .env.local et remplacez-le par Endpoint de votreSolana Quicknode Solana .
  • Veillez à mettre à jour le cluster afin de vous assurer que vos URL de transaction pointent vers le bon explorateur (utilisez uniquement les valeurs d'énumération fournies dans le .env.example fichier).
QN_ENDPOINT=mainnet
mainnet# mainnet| devnet | testnet  local

Commencez par lancer le serveur de développement :

npm exécuter dev
# ou
yarn dev
# ou
pnpm dev
# ou
bun dev

Ouvrez http://localhost:3000 dans votre navigateur pour voir le résultat.

Utilisation de la Dapp


  1. Saisissez une URL Solana valide dans le champ de saisie. Vous pouvez copier-coller l'un des liens d'exemple figurant sur la page d'accueil.
  2. Cliquez sur « Analyser l'action » pour afficher les détails de l'action analysée.
  3. Vous verrez les détails analysés de l'URL de l'action. Pour consulter et exécuter les actions disponibles, connectez un portefeuille.

Aperçu

  1. Cliquez sur l'une des actions disponibles pour l'exécuter (vous devrez signer la transaction lorsque votre portefeuille vous y invitera).
  2. Vous pouvez créer des actions supplémentaires en suivant la structure indiquée dans solana

Architecture​

src/
├── app/
│   ├── page.tsx # Page principale de Blink
│   └── layout.tsx # Mise en page de la page
│   └── api/
│       └── solana
│           └── sendAndConfirm/route.ts # Envoyer et confirmer une transaction
│       └── actions/
│           └── memo/route.ts  # Crée une Solana « Memo »
│           └── donate/route.ts  # Crée une Solana « Donate »
└── components/
│   ├── ActionComponents/     # Comprend des composants pour l'analyse et l'exécution Solana 
│   ├── Blink.tsx        # Composant principal
│   ├── SolanaProviders.tsx     # Fournisseurs de contexte pour l'adaptateur de portefeuille
│   └── [composants associés]
└── hooks/
│   ├── useActionFetch.ts  # Récupère et analyse Solana à partir d'URL
│   └── useTransactionProcessor.ts  # Exécute Solana 
└── utils/ # Contient diverses fonctions utilitaires et constantes

Déployer sur Vercel

Déployer avec Vercel

Documentation Next.js

Pour en savoir plus sur Next.js, consultez les ressources suivantes :


Vous pouvez consulter le dépôt GitHub de Next.js: vos commentaires et vos contributions sont les bienvenus !

Contributions et commentaires
Nous serions ravis de connaître votre avis et nous vous invitons à contribuer à cette application d'exemple !
Pour signaler des problèmes ou faire part de vos commentaires, créez un ticket GitHub dans le qn-guide-exemples référentiel.
Pour contribuer, procédez comme suit :
  1. Créer une branche du dépôt
  2. Créer une branche de fonctionnalité :
    git checkout -b feature/amazing-feature
  3. Validez vos modifications :
    git commit -m "Ajout d'une fonctionnalité géniale"
  4. Publiez votre branche :
    git push origin feature/amazing-feature
  5. Créez une demande de fusion.
Découvrez d'autres exemples d'applications
Échange de méta-agrégation Titan
Une interface utilisateur Solana sur une seule page, développée à partir de l'API de méta-agrégation de Titan Gateway et hébergée via Quicknode. Elle affiche les cotations des différents fournisseurs, les plateformes sur la chaîne de blocs traversées par un itinéraire, ainsi qu'un flow de création → signature → envoi en auto-custodie flow les transactions flow confirmées via Quicknode .
Échange de méta-agrégation Titan
Explorateur Solana
Cette application utilise unEndpoint Quicknode Solana Endpoint récupérer les soldes de jetons, l'historique des transactions et les NFT d'un portefeuille donné sur la Solana .
Explorateur Solana
Clignotant Solana
Cette application vous permet de créer Solana et d'interagir avec celles-ci en analysant les URL Solana pour les associer aux actions correspondantes. Saisissez une URL d'action valide pour consulter ses détails, connectez votre portefeuille pour exécuter des actions ou créez-en de nouvelles à l'aide de la structure fournie.
Clignotant Solana