Comment ajouter un portefeuille NFT à votre site Web ou application (2026)

Un portefeuille NFT permet aux utilisateurs de visualiser NFTs appartenant à une adresse de portefeuille directement dans votre produit. Ceci est couramment utilisé pour les profils d'utilisateurs, les tableaux de bord, les accès sécurisés et les pages de communauté.

Dans ce guide, nous couvrons deux façons prises en charge pour ajouter un portefeuille NFT à l'aide Gizmolab interface utilisateur:

1. Ajoutez le portefeuille NFT avec le code à l'aide du composant d'interface utilisateur Gizmolab
2. Intégrez le portefeuille NFT sous forme de widget sans code personnalisé

Les deux options utilisent le même Gizmolab UI NFT Portefeuille, vous pouvez donc choisir en fonction du contrôle dont vous avez besoin.

Ce que comprend un portefeuille NFT

Le Gizmolab UI NFT Portefeuille Le composant fournit les fonctionnalités suivantes par défaut :

• Afficher NFTs appartenant à une adresse de portefeuille
• Prise en charge des portefeuilles connectés et saisie manuelle de l'adresse
• Grille NFT paginée avec une taille de page fixe de 12
• Chargement des squelettes, état vide et gestion des erreurs
• Image de secours pour NFTs avec métadonnées manquantes

Ce comportement est identique que vous installiez le composant avec du code ou que vous l'intégriez en tant que widget.

Option 1 : ajouter un portefeuille NFT avec code

Cette option est destinée aux équipes qui créent des applications Web3 personnalisées à l'aide de React ou Next.js.

Quand utiliser cette option

• Vous créez un produit ou un tableau de bord Web3 complet
• Vous souhaitez un contrôle total sur la mise en page et le style
• Vous envisagez d'étendre le portefeuille NFT avec une logique personnalisée

Pile technologique utilisée

Le portefeuille Gizmolab UI NFT est construit à l'aide de :

• Dynamic pour la connectivité du portefeuille
• wagmi useAccount() pour l'état du portefeuille
• Alchimie SDK pour récupérer NFTs par le propriétaire
• Requête TanStack React pour la mise en cache et la pagination
• viem pour la validation de l'adresse et le formatage de la somme de contrôle
• shadcn/ui composants pour les blocs de construction de l'interface utilisateur

Toute cette logique est déjà câblée à l'intérieur du composant d'interface utilisateur Gizmolab.

Étape 1 : Installer les dépendances

Installez les dépendances requises pour la version EVM.

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

Étape 2 : ajouter les composants d'interface utilisateur requis

Installez les composants de l'interface utilisateur shadcn utilisés par le portefeuille.

npx shadcn@latest bouton squelette d'entrée de carte d'ajout

Étape 3 : ajouter des variables d'environnement

Créer un .env fichier et ajoutez votre clé Alchemy API.

ALCHEMY_API_KEY=your_mainnet_key

Étape 4 : rendre le composant de portefeuille NFT

Importez et restituez le portefeuille NFT à partir de Gizmolab interface utilisateur.

Une fois rendu, le composant prend automatiquement en charge :

• Mode portefeuille connecté
• Recherche d'adresse publique
• NFT pagination utilisant l'Alchimie pageKey
• États de chargement, vide et d'erreur

Aucune logique de récupération de données supplémentaire n'est requise.

Comportement UX inclus par défaut

Le composant gère déjà les cas extrêmes de production :

• Les adresses de portefeuille invalides sont rejetées avant la récupération
• NFTs sans images, utilisez un espace réservé
• La pagination est limitée à 12 NFTs par page
• Les utilisateurs peuvent basculer entre le mode portefeuille et le mode adresse

Option 2 : ajouter un portefeuille NFT en tant que widget intégré

Cette option est conçue pour les équipes qui souhaitent ajouter un portefeuille NFT sans écrire le code de l'application.

Quand utiliser cette option

• Vous utilisez un CMS, Webflow, Framer ou un site statique
• Vous souhaitez vous lancer rapidement
• Vous n'avez pas besoin d'une personnalisation approfondie de l'interface utilisateur

Comment fonctionne le widget intégré

L'interface utilisateur de Gizmolab fournit un widget Portfolio hébergé NFT qui peut être intégré à l'aide d'un iframe.

Le widget intégré comprend :

• Connexion au portefeuille
• Saisie manuelle de l'adresse
• NFT mise en page
• La même interface utilisateur et la même logique que le composant basé sur le code

Exemple d'extrait d'intégration

<iframe
  src="https://ui.gizmolab.io/embed/nft-portfolio"
  width="100%"
  height="720"
  loading="lazy"
></iframe>

Vous pouvez intégrer ce widget à l'intérieur :

• Pages marketing
• Pages de profil
• Portails communautaires
• Tableaux de bord d'administration
• Sites de documentation

Options de configuration des widgets

En fonction de votre configuration, l'intégration peut prendre en charge :

• Adresse du portefeuille par défaut
• Mode lecture seule
• Contraintes de hauteur et d’agencement
• Alignement du thème

Cela permet aux équipes non techniques de livrer un portefeuille NFT sans intervention d'ingénierie.

Code ou intégration : lequel choisir ?

Vous pouvez commencer avec le widget intégré et migrer ultérieurement vers le composant basé sur le code sans modifier l'expérience utilisateur.

Notes de référencement

Si la visibilité de la recherche est importante :

• Utilisez le option basée sur le code pour les pages indexables telles que /portfolio/[address]
• Ajouter du contenu descriptif au-dessus du portfolio
• Inclure le contenu de la FAQ sous le composant
• Utiliser les intégrations principalement pour le marketing ou les vues authentifiées

Foire aux questions

Conclusion

Il y a deux manières prises en charge pour ajouter un portefeuille NFT à l'aide de l'interface utilisateur Gizmolab :

• Installez le composant NFT Portfolio avec le code pour un contrôle total
• Intégrez le widget Portfolio NFT pour un déploiement instantané

Les deux options utilisent la même implémentation de niveau production.

Si vous avez besoin d'une configuration personnalisée, d'une prise en charge multi-chaînes ou d'un produit Web3 entièrement intégré, Gizmolab peut le construire pour vous.