15 min de lecture

Sugar V2 / Candy Machine V3 est obsolète

Ce guide utilise Sugar V2 avec Candy Machine V3, qui n'est plus prise en charge. Pour les nouveaux projets NFT, consultez l'article « Comment lancer une collection NFT avec Metaplex Core Candy Machine ». Ce guide est fourni à titre informatif uniquement.

Aperçu

Êtes-vous prêt à lancer votre collection de NFT sur Solana ? « Sugar », l'interface CLI de Candy Machine développée par Metaplex, est l'outil qu'il vous faut pour vous lancer en un clin d'œil. Si vous avez déjà utilisé des versions précédentes de Candy Machine, vous remarquerez que Sugar présente quelques améliorations notables :

• amélioration des performances de téléchargement
• expérience utilisateur simplifiée
• gestion améliorée des erreurs

Ce que vous ferez

Dans ce guide, vous allez créer un nouveau portefeuille à l'aide de la CLI Solana, recevoir un airdrop de SOL et déployer une Candy Machine sur le réseau de développement de Solana à l'aide de Sugar. Vous déployez ensuite votre Candy Machine sur le Web à l'aide de Solana dApp Scaffold et du nouveau framework JS modulaire de Metaplex, Umi.

Ce dont vous aurez besoin

• Node.js installé (version 16.15 ou supérieure)
• CLI Solana installée
• Extension Phantom Wallet ou Solflare installée
• Metaplex Sugar installé (**dernière version, V2.x+ **) (instructions d'installation ci-dessous)
• Un éditeur de texte
• npm ou yarn doit être installé (Nous utiliserons yarn pour initialiser notre projet et installer les paquets nécessaires. N'hésitez pas à utiliser npm à la place si c'est votre gestionnaire de paquets préféré.)

Configurer votre projet

Créez un nouveau répertoire de projet dans votre terminal à l'aide de la commande suivante :

mkdir sugar-demo
cd sugar-demo

Installer Sugar

Lors de l'installation, il vous sera demandé quelle version vous souhaitez utiliser. La version V1.x est destinée à Candy Machine v2, tandis que la version V2.x est destinée à Candy Machine v3. Ce guide part du principe que vous utilisez la version V2.x (Candy Machine v3). Si vous utilisez une version antérieure, consultez notre guide ici.

Installation sur Mac

Dans votre terminal, tapez :

bash <(curl -sSf https://sugar.metaplex.com/install.sh)

Remarque : il se peut que vous deviez redémarrer votre terminal après l'installation.

Installation sous Windows

1. Téléchargez le programme d'installation pour Windows ici.
2. Lancez le programme d'installation en tant qu'administrateur (clic droit -->Exécuter en tant qu'administrateur). Si un message d'avertissement s'affiche concernant un fichier binaire non fiable, essayez de cliquer sur Plus d'informations et ensuite Courir quand même. Si cette option n'est pas disponible, procédez comme suit :
   • Cliquez avec le bouton droit sur le fichier exécutable, puis sélectionnez « Propriétés ».
   • Si vous faites confiance à l'équipe de développement de Metaplex, cochez la case « Débloquer » comme indiqué sur l'image ci-dessous. Cela vous permettra d'exécuter ce fichier binaire sur votre ordinateur, car Microsoft ne lui accorde pas automatiquement sa confiance.
   • Cliquez sur « Appliquer », puis sur « OK ».
   • Relancez le programme d'installation

Si tout fonctionne correctement, vous devriez voir quelque chose comme ceci :

Vous devriez pouvoir vérifier l'installation de Sugar en saisissant sugar --version dans votre terminal. Vous devriez voir quelque chose comme ceci :

Quicknode % sugar --version
sugar-cli 2.5.0

Configurer un nouveau portefeuille

L'une des nouvelles fonctionnalités intéressantes de Sugar est qu'elle vous permettra de définir les paramètres de votre portefeuille et de votre RPC à l'aide de la CLI Solana, ce qui vous évitera de devoir les saisir à chaque fois que vous utiliserez une commande Sugar.

Nous devons tout d'abord créer un nouveau portefeuille destiné spécifiquement aux tests sur le réseau de développement (devnet) à l'aide de la commande suivante :

solana-keygen new --no-bip39-passphrase --outfile ./wallet.json

Nous pouvons vérifier que le portefeuille que nous venons de créer est bien celui que la CLI Solana utilisera en exécutant la commande suivante :

Configuration de Solana définir --keypair ./wallet.json

Remarque : dans cet exemple, nous utilisons un chemin d'accès relatif vers notre portefeuille, car nous ne changerons pas de répertoire, mais vous pouvez indiquer un chemin d'accès complet si vous le souhaitez.

Établir une connexion à votre RPC Quicknode

Se connecter à un cluster Solana via votre point de terminaison Quicknode

Pour développer sur Solana, vous aurez besoin d'un point de terminaison API pour vous connecter au réseau. Vous pouvez bien sûr utiliser des nœuds publics ou déployer et gérer votre propre infrastructure ; toutefois, si vous souhaitez bénéficier de temps de réponse 8 fois plus rapides, vous pouvez nous confier cette tâche fastidieuse.

Découvrez pourquoi plus de 50 % des projets sur Solana Choisissez Quicknode et commencez votre essai gratuit ici. Nous allons utiliser un Solana Devnet point de terminaison.

Copiez le HTTP Lien vers le prestataire :

Une fois votre terminal configuré sur le Devnet de Solana, vous pouvez désormais exécuter cette commande en remplaçant VOTRE_URL_QUICKNODE avec l'URL HTTP que vous avez copiée :

Configuration de Solana définir --url VOTRE_URL_QUICKNODE

Pour approvisionner votre portefeuille, vous pouvez exécuter la commande suivante :

Airdrop Solana 1

Si la commande s'exécute correctement, vous devriez voir s'afficher quelque chose comme ceci :

Vous pouvez également exécuter solde Solana dans votre terminal et vérifiez que le 1 SOL s'y trouve bien.

Préparer les actifs NFT

Si vous avez déjà utilisé Candy Machine, cette procédure vous sera familière. Nous devons créer un fichier .json correspondant à chaque ressource numérique en utilisant une numérotation simple commençant par 0 et augmentant de manière séquentielle, sans jamais sauter de numéro (par exemple, 0.json correspond à 0.png, puis 1.json correspond à 1.png). Nous pouvons également créer, de manière facultative, des fichiers collection.json et collection.png pour permettre à Sugar de créer automatiquement une collection sur la blockchain.

Metaplex propose un ensemble d'exemples de ressources que l'on peut télécharger et utiliser afin de garantir la cohérence. Vous pouvez modifier le fichier JSON pour y inclure les valeurs de votre choix, à condition qu'elles soient conformes au schéma JSON de l'URI.

Téléchargez l'ensemble d'exemples et décompressez-le dans ./assets/ dans le répertoire de votre projet (le répertoire par défaut dans lequel Sugar cherchera vos fichiers).

Configurer la machine à bonbons

Créez un nouveau fichier, config.json, dans le dossier racine de votre projet :

écho > config.json

Ouvrez le fichier et collez cette configuration :

{
    "number": 10,
    "symbol": "NB",
    "sellerFeeBasisPoints": 500,
    "isMutable": true,
    "isSequential": false,
    "ruleSet": null,
    "creators": [
        {
            "address": "YOUR_WALLET_ADDRESS",
            "share": 100
        }
    ],    
    "uploadMethod": "bundlr",
    "awsS3Bucket": null,
    "retainAuthority": true,
    "awsConfig": null,
    "nftStorageAuthToken": null,
    "shdwStorageAccount": null,
    "pinataConfig": null,
    "hiddenSettings": null,
    "guards": {
        "default": {
          "solPayment": {
            "value": 0.01,
            "destination": "YOUR_WALLET_ADDRESS"
          },
          "startDate": {
            "date": "2022-10-23T20:00:00Z"
          }
        }
      }    
}

Veillez à remplacer VOTRE_ADRESSE_DE_PORTEFEUILLE avec l'adresse de portefeuille que vous avez créée précédemment.

REMARQUE : vous pouvez exécuter la commande « solana address » dans votre terminal pour obtenir l'adresse du portefeuille que vous venez de créer.

Bon, tout devrait être prêt maintenant. Si vous avez suivi jusqu'ici, vous devriez avoir une structure de répertoires comme celle-ci :

sugar-demo/
├── wallet.json
├── config.json
└── assets/
  ├── [0-9].png
  ├── [0-9].json
  ├── collection.png
  └── collection.json

Sugar intègre un outil de validation qui nous permettra de vérifier s'il y a des erreurs avant de continuer. Dans le terminal, exécutez la commande suivante :

vérification de la teneur en sucre

Remarque : il se peut qu'un message d'avertissement s'affiche, indiquant « manquant propriétés.catégorie». Cela ne pose pas de problème, car cet attribut ne figure pas dans les fichiers d'exemple de Metaplex.

C'est parti ! Bravo. Construisons notre machine à bonbons.

Créer une machine à bonbons

Comme nous avons configuré notre RPC et notre portefeuille à l'aide de la CLI Solana et enregistré notre actifs et config.json Si l'on utilise les répertoires par défaut de Sugar, nos commandes seront très simples !

Téléchargez vos ressources

Dans votre terminal, tapez :

téléchargement de sucre

Vous devriez voir quelque chose comme ça :

Déployer un distributeur de bonbons

Dans votre terminal, tapez :

déploiement de Sugar

Vous devriez voir quelque chose comme ça :

Si vous obtenez une erreur « Blockhash not found », essayez de relancer la commande.

Veillez à enregistrer localement sur votre terminal l'identifiant de la machine à bonbons qui vous a été fourni. Nous en aurons besoin ultérieurement.

Vérifier la machine à bonbons

Vérifions que tout a bien fonctionné comme prévu. Dans votre terminal, tapez :

vérification du sucre

Vous devriez voir quelque chose comme ça :

Bravo !

Testez votre distributeur de bonbons

Essayez de créer un NFT à l'aide de sucre. Dans votre terminal, tapez :

menthe sucrée

Vous devriez voir quelque chose comme ça :

Ajoutez vos protections pour bonbons

Par défaut, lorsque vous déployez votre Candy Machine, vous êtes le seul à pouvoir créer des NFT. Vous devez mettre en place des « candy guards » pour définir les critères selon lesquels d’autres utilisateurs pourront créer vos NFT (par exemple : heure de début, montant du paiement, jeton de paiement, jetons de la liste blanche, etc.). Puisque nous avons déjà défini nos « guards » dans notre config.json, nous pouvons exécuter la commande suivante :

protection contre le sucre ajouter

Super ! Créons une page Mint pour faire connaître ce projet au monde entier !

Créer un site de frappe de pièces

Pour un déploiement rapide, nous utiliserons Solana dApp Scaffold, un outil pratique qui comprend une application Next.JS avec Solana Wallet Adapter déjà intégré.

Cloner le modèle de dApp

Depuis le répertoire de votre projet, dans votre terminal, tapez :

git clone https://github.com/solana-labs/dapp-scaffold ./candy-machine-ui/
cd candy-machine-ui

Installer les dépendances

Installez les dépendances fournies. Dans votre terminal, tapez :

fil

Nous aurons besoin de quelques paquets Metaplex supplémentaires pour mettre en place notre site de frappe. Dans votre terminal, tapez :

fil ajouter @metaplex-foundation/mpl-candy-machine@alpha @metaplex-foundation/mpl-token-metadata@alpha @metaplex-foundation/mpl-toolbox @metaplex-foundation/umi @metaplex-foundation/umi-bundle-defaults @metaplex-foundation/umi-signer-wallet-adapters

Créer un fichier .env

Créez un fichier, .env Dans le dossier « candy-machine-ui » :

écho > .env

Ajoutez les valeurs suivantes dans le nouveau .env fichier (en remplaçant les valeurs par les vôtres) :

NEXT_PUBLIC_RPC=<YOUR_QUICKNODE_URL>
NEXT_PUBLIC_CANDY_MACHINE_ID=<YOUR_CANDY_MACHINE_PUBKEY>
NEXT_PUBLIC_TREASURY=<YOUR_WALLET_ADDRESS>

Si vous ne vous souvenez plus de votre identifiant Candy Machine, vous devriez pouvoir le retrouver dans cache.json dans le program.candyMachine champ.

Une fois toutes ces informations saisies, vous pouvez enregistrer le fichier.

Ajouter le bouton « Mint NFT »

Nous devons ajouter un bouton à notre site de création de NFT afin de permettre aux utilisateurs de créer un NFT. Commencez par dupliquer le Demander un airdrop composant et renommez-le en CandyMint. Dans votre terminal, copiez le fichier en saisissant la commande suivante :

cp ./src/components/RequestAirdrop.tsx ./src/components/CandyMint.tsx

Ouvrir CandyMint.tsx et modifier le nom du composant exporté pour qu'il passe de Demander un airdrop to CandyMint. Vous devriez également modifier le texte du bouton pour qu'il passe de <span>Airdrop 1 </span> to <span>Mint NFT </span>. Enfin, mettons à jour nos déclarations de constantes et effaçons le contenu du onClick fonction, ce qui nous permet de repartir de zéro. Votre fichier devrait ressembler à ceci :

//...Default Imports (we will replace these later)

export const CandyMint: FC = () => {
    // 👇 Update these constant declarations
    const { connection } = useConnection();
    const wallet = useWallet();
    const { getUserSOLBalance } = useUserSOLBalanceStore();

    // TODO - Create an Umi instance

    // 👇 Update this onClick function
    const onClick = useCallback(async () => {
      if (!publicKey) {
          console.log('error', 'Wallet not connected!');
          notify({ type: 'error', message: 'error', description: 'Wallet not connected!' });
          return;
      }
      // TODO - Add minting logic here
    }, []);

    return (
        <div className="flex flex-row justify-center">
            <div className="relative group items-center">
                <div className="m-1 absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 
                    rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
                <button
                    className="px-8 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
                    onClick={onClick}
                >
                    <span>Mint NFT </span>
                </button>
            </div>
        </div>
    );
};

Il faut ajouter le CandyMint composant à notre vue d'accueil. Ouvrir ./sugar-demo/candy-machine-ui/src/views/home/index.tsx et ajoutez la directive d'importation suivante :

// Components
import { RequestAirdrop } from '../../components/RequestAirdrop';
// 👇 Add this line
import { CandyMint } from '../../components/CandyMint';

Et ajoutez le CandyMint composant vers le AccueilAfficher composant :

          <RequestAirdrop />
          {/* 👇 Add this line */}
          <CandyMint /> 

Bravo ! Vous devriez maintenant avoir un nouveau bouton, mais avant de le tester, nous devons y ajouter la fonctionnalité « mint ». Allons-y.

Ajouter la fonctionnalité « Mint »

Retour à ./sugar-demo/candy-machine-ui/src/components/CandyMint.tsx et remplacez les importations par défaut par ce qui suit :

import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { FC, useCallback, useMemo } from 'react';
import { notify } from "../utils/notifications";
import useUserSOLBalanceStore from '../stores/useUserSOLBalanceStore';
import { createUmi } from '@metaplex-foundation/umi-bundle-defaults';
import { generateSigner, transactionBuilder, publicKey, some } from '@metaplex-foundation/umi';
import { fetchCandyMachine, mintV2, mplCandyMachine, safeFetchCandyGuard } from "@metaplex-foundation/mpl-candy-machine";
import { walletAdapterIdentity } from '@metaplex-foundation/umi-signer-wallet-adapters';
import { mplTokenMetadata } from '@metaplex-foundation/mpl-token-metadata';
import { setComputeUnitLimit } from '@metaplex-foundation/mpl-toolbox';
import { clusterApiUrl } from '@solana/web3.js';
import * as bs58 from 'bs58';

// These access the environment variables we defined in the .env file
const quicknodeEndpoint = process.env.NEXT_PUBLIC_RPC || clusterApiUrl('devnet');
const candyMachineAddress = publicKey(process.env.NEXT_PUBLIC_CANDY_MACHINE_ID);
const treasury = publicKey(process.env.NEXT_PUBLIC_TREASURY);

Créer une instance Umi

Créons une instance Umi avec mémorisation en utilisant notre point de terminaison Quicknode et les plugins mplCandyMachine et mplTokenMetadata. Nous l'utiliserons pour frapper nos NFT. Remplacez // TODO - Create Umi instance avec :

    const umi = useMemo(() =>
        createUmi(quicknodeEndpoint)
            .utiliser(walletAdapterIdentity(wallet))
            .utiliser(mplCandyMachine())
            .utiliser(mplTokenMetadata()),
        [portefeuille, mplCandyMachine, walletAdapterIdentity, mplTokenMetadata, quicknodeEndpoint, createUmi]
    );

Cela permettra de créer une instance Umi qui utilisera notre portefeuille connecté via l'adaptateur de portefeuille, notre point de terminaison Quicknode et quelques plugins Metaplex.

Ajouter la logique de frappe

Mettons à jour notre onClick fonction permettant de créer un NFT à l'aide du générateur de transactions d'Umi. Remplacez le onClick Fonction avec le code suivant, puis nous allons voir en détail ce qui se passe :

    const onClick = useCallback(async () => {
        if (!wallet.publicKey) {
            console.log('error', 'Wallet not connected!');
            notify({ type: 'error', message: 'error', description: 'Wallet not connected!' });
            return;
        }

        // Fetch the Candy Machine.
        const candyMachine = await fetchCandyMachine(
            umi,
            candyMachineAddress,
        );
        // Fetch the Candy Guard.
        const candyGuard = await safeFetchCandyGuard(
            umi,
            candyMachine.mintAuthority,
        );
        try {
            // Mint from the Candy Machine.
            const nftMint = generateSigner(umi);
            const transaction = await transactionBuilder()
                .add(setComputeUnitLimit(umi, { units: 800_000 }))
                .add(
                    mintV2(umi, {
                        candyMachine: candyMachine.publicKey,
                        candyGuard: candyGuard?.publicKey,
                        nftMint,
                        collectionMint: candyMachine.collectionMint,
                        collectionUpdateAuthority: candyMachine.authority,
                        mintArgs: {
                            solPayment: some({ destination: treasury }),
                        },
                    })
                );
            const { signature } = await transaction.sendAndConfirm(umi, {
                confirm: { commitment: "confirmed" },
            });
            const txid = bs58.encode(signature);
            console.log('success', `Mint successful! ${txid}`)
            notify({ type: 'success', message: 'Mint successful!', txid });

            getUserSOLBalance(wallet.publicKey, connection);
        } catch (error: any) {
            notify({ type: 'error', message: `Error minting!`, description: error?.message });
            console.log('error', `Mint failed! ${error?.message}`);
        }
    }, [wallet, connection, getUserSOLBalance, umi, candyMachineAddress, treasury]);

Voyons ensemble ce qui se passe ici :

1. Tout d'abord, nous vérifions que le portefeuille est bien connecté. Si ce n'est pas le cas, nous en informons l'utilisateur et nous quittons la page.
2. Ensuite, nous récupérons le « Candy Machine » et le « Candy Guard » à l'aide de la aller chercher à la machine à bonbons et safeFetchCandyGuard fonctions du package mpl-candy-machine. Nous en avons besoin pour notre transaction de création de pièces.
3. Ensuite, nous générons un signataire à l'aide de la bibliothèque Umi's generateSigner fonction. Elle servira à créer notre NFT.
4. Ensuite, nous créons une transaction à l'aide de la fonction d'Umi transactionBuilder fonction. Elle servira à créer notre NFT :

• Nous ajoutons un setComputeUnitLimit instruction associée à la transaction. Cette mesure de sécurité empêche la transaction d'échouer en raison d'un dépassement de la limite d'unités de calcul.
• Nous ajoutons un mintV2 instruction associée à la transaction. Il s'agit de l'instruction qui permettra de créer notre NFT. Nous transmettons notre instance umi ainsi qu'un objet comportant les propriétés suivantes :
  • candyMachine: La clé publique du distributeur de bonbons.
  • candyGuard: La clé publique du gardien des bonbons.
  • nftMint: Le signataire que nous avons généré précédemment.
  • collectionMint: La clé publique de la collection.
  • collectionUpdateAuthority: La clé publique de l'autorité chargée de la mise à jour de la collection.
  • mintArgs: Un objet contenant les arguments « mint » associés à votre Candy Guard (ceux-ci peuvent varier en fonction de votre Candy Guard). Pour le solPayment garde, nous devons passer devant la destination du paiement (la clé publique du Trésor).

5. Nous envoyons la transaction et informons l'utilisateur du résultat. Notez qu'umi renvoie les signatures de transaction sous la forme d'un Unit8Array; nous devons donc les encoder en base58 avant de les afficher à l'utilisateur.
6. Enfin, nous appelons getUserSOLBalance (une action de stockage intégrée au scaffold) pour mettre à jour le solde SOL de l'utilisateur.

Bravo ! Notre site devrait désormais pouvoir créer des NFT.

Créer un NFT

Maintenant que nous avons ajouté la logique de création de pièces, lançons et testons le site. Dans votre terminal, exécutez la commande suivante :

fil dev

Cela ouvrira un navigateur sur localhost:3000, où vous pourrez connecter votre portefeuille et créer un NFT. Vérifiez que votre portefeuille Phantom est bien configuré sur le réseau de développement (devnet) et non sur le réseau principal (mainnet) avant de continuer.

Pour frapper un NFT, vous devrez disposer de SOL devnet dans votre portefeuille Phantom. Vous pouvez utiliser la CLI Solana pour effectuer un airdrop vers votre portefeuille Phantom en saisissant cette commande dans votre terminal :

Airdrop Solana 1 VOTRE_ADRESSE_DE_PORTEFEUILLE_PHANTOM

Lorsque vous êtes prêt, cliquez sur « Mint ». Si l'opération s'est déroulée correctement, vous devriez voir s'afficher une page web comme celle-ci :

Si le message d'erreur « Mint Failed » s'affiche, cela signifie peut-être que votre solde est insuffisant. Réessayez après avoir rechargé votre compte. Vous pourrez consulter le NFT dans votre portefeuille une fois l'achat effectué. L'affichage du NFT dans votre portefeuille peut prendre quelques instants dans Phantom. Le nôtre ressemble à ceci :

C'est vraiment un régal ! Bravo.

Conclusion

Félicitations ! Vous venez de créer une « Candy Machine » à l'aide de Metaplex Sugar et d'Umi. Vous disposez désormais de tous les outils nécessaires pour lancer votre propre frappe de NFT. Nous avons hâte de découvrir les NFT que vous allez créer ! Rejoignez-nous sur Discord ou contactez-nous via Twitter pour nous faire part de votre projet NFT.

Nous ❤️ les commentaires !

Faites-nous savoir si vous avez des commentaires ou des suggestions de nouveaux sujets. Nous serions ravis de vous entendre.