inkathon
@inkathon
Ceci est un chaudière DAPP complet pour encre! Contractes intelligents avec un frontend intégré. Il peut être utilisé pour commencer rapidement à développer votre idée de hackathon ou pour échafauner une application Web3 prête pour la production.
Le projet fait partie d'une initiative Scio Labs pour améliorer l'expérience du développeur à l'encre! Écosystème et un fier membre de l'Aleph Zero EFP. ?
Les autres projets comprennent:
create-ink-app ( à venir bientôt )ink!athon PlayplateuseInkathon Hooks & Utilityzink! Macros de contrat intelligentRejoignez la discussion dans notre groupe télégramme
Si vous souhaitez contribuer, veuillez lire nos directives de contributeur
Table des matières:
La passerelle est livrée avec une petite encre échantillon! Greeter contracte qui stockage un message (la "salutation") et permet à quiconque de le mettre à jour. Le frontend contient des composants d'interface utilisateur simples pour connecter votre portefeuille et interagir avec le contrat (c'est-à-dire lire et écrire le message ). Essayez-le en direct sur Inkathon.xyz.
Le frontend fonctionne hors de la boîte, sans un nœud local en cours d'exécution, car le contrat d'échantillonnage est pré-déployé sur certains tests de temps en direct (c'est-à-dire alephzero-testnet et shibuya ). Les métadonnées et les adresses de déploiement nécessaires sont fournies en vertu contracts/deployments/ .
Pré-requis:
- Configuration Node.js v18 + (recommandé via NVM avec
nvm install 18)- Installez PNPM (recommandé via Node.js CorePack ou
npm i -g pnpm)- Cloner ce référentiel
[!IMPORTANT]
Les utilisateurs de Windows doivent utiliser WSL (recommandé) ou un shell personnalisé comme Git Bash. PowerShell n'est pas soutenu.
Pré-requis lors de l'utilisation de WSL pour Linux:
- Installez WSL et exécutez toutes les commandes dans le terminal WSL
- Configuration Node.js v18 + (recommandé via NVM avec
nvm install 18)- Installez les packages NPM suivants dans le monde:
npm i -g npmnpm i -g pnpm node-gyp make- Clone ce référentiel dans le système de fichiers WSL (par exemple
/home/<user>/inkathon).Astuce: vous pouvez saisir
\wsl$dans la barre supérieure de l'explorateur Windows pour accéder visuellement au système de fichiers WSL.
# Install dependencies (once)
# NOTE: This automatically creates an `.env.local` file
pnpm install
# Start Next.js frontend
pnpm run dev En éventuellement, pour activer simple-git-hooks (pour la liaison automatique et la mise en forme lors de la validation), vous pouvez exécuter la commande suivante une fois: pnpm simple-git-hooks .
Le fichier contracts/package.json contient des scripts de raccourci pour la construction, les tests et le déploiement de vos contrats.
Pré-requis:
- Installez la rouille via les documents du substrat (sautez la section "Compiler un nœud de substrat")
- Installer
cargo contract- Installer
substrate-contracts-node
# Set `contracts/` as the active working directory in your terminal
cd contracts
# Build contracts and move artifacts to `contracts/deployments/{contract}/` folders
pnpm run build
# Start local node with persistence (contracts stay deployed after restart)
# NOTE: When using Brave, shields have to be taken down for the UIs
pnpm run node
# # IMPORTANT: Open a separate terminal window and keep the node running
# Deploy the contracts on the local node
pnpm run deploy Alternativement, vous pouvez également déployer des contrats manuellement à l'aide de contrats UI ( pnpm contracts-ui ) dans le navigateur.
Ouvrez le fichier frontend/.env.local et définissez la variable NEXT_PUBLIC_DEFAULT_CHAIN au development . Redémarrez ensuite le frontend et vous devriez être en mesure d'interagir avec les contrats déployés sur votre nœud local.
En savoir plus sur les variables d'environnement et toutes les constantes de chaîne disponibles dans la section Variables d'environnement ci-dessous.
Il y a plusieurs endroits où vous devez insérer le nom et l'identifiant de votre projet. La plupart de ces occurrences sont mises en évidence avec a /* TODO */ commentaire dans le code. Vous pouvez facilement les remplacer un par un en installant le plugin todo-tree .
De plus, il y a les occurrences non-plus lourdes suivantes:
inkathon.code-workspacepackage.json dans le répertoire racine ainsi que dans les contracts/ et frontend/ packages@inkathon/contracts ) définie dans frontend/src/deployments/deployments.ts frontend/package.json Pour remplacer le contrat Greeter par défaut ou en ajouter un nouveau, vous devez effectuer ce qui suit:
contracts/src/contracts/Cargo.tomlcontracts/scripts/deploy.tsContractIds Enum and getDeployments en frontend/src/deployments/deployments.ts L'ajout de scripts personnalisés est utile pour interagir avec vos contrats ou tester certaines fonctionnalités. Par conséquent, il suffit de dupliquer et de réutiliser les contracts/scripts/script.template.ts le fichier et l'exécuter via pnpm run script <script-name> . Cette commande exécutera le fichier TypeScript directement via tsx .
Pour les scripts généraux, la même initialisation et configuration de variables d'environnement s'appliquent ci-dessous dans la section de déploiement (par exemple pour modifier le réseau cible).
contracts/ et frontend/ répertoires comme packages.pnpm ou yarn@stable (en savoir plus dans la section FAQ ci-dessous)cargo-contract , substrate-contracts-nodepolkadot-js , useInkathon React Hooks & Utility Library (alternativement: useInk )shadcn/ui , tailwindcsseslint , prettier , simple-git-hooks , lint-stagedtypechain-polkadotLes bibliothèques de style, de liaison et de formatage peuvent être complètement abandonnées ou remplacées par des alternatives.
Vous trouverez ci-dessous des exemples en direct qui utilisent cette passe-partout ou ont une configuration similaire inspirée par elle:
La filature d'un déploiement via Vercel est assez simple car les paramètres nécessaires sont déjà configurés dans vercel.json . Si vous n'avez pas encore cloné le référentiel, vous pouvez également utiliser le bouton Déployer ci-dessous pour créer un nouveau référentiel à partir de ce modèle.
Alternativement, vous pouvez également utiliser les dockerfiles fournis pour déployer à tout fournisseur d'hébergement de votre choix. Lisez la suite ici.
Toutes les variables d'environnement sont importées de process.env dans frontend/src/config/environment.ts et réexportées à partir de là. Pour une sécurité améliorée de type, n'importez toujours que des variables d'environnement à partir de @/config/environment et jamais directement à partir de process.env .
| Variables d'environnement | Valeurs par défaut | Description |
|---|---|---|
NEXT_PUBLIC_DEFAULT_CHAIN * ️⃣ | ️ alephzero-testnet | Le réseau (chaîne basée sur le substrat) à laquelle le frontend doit se connecter par défaut et à quels artefacts de déploiement de contrat à importer. |
NEXT_PUBLIC_PRODUCTION_MODE | false | Flag booléen facultatif pour différencier l'environnement de production (par exemple pour le SEO ou l'analyse). |
NEXT_PUBLIC_URL | http://localhost:3000 | Chaîne facultative qui définit l'URL de base du frontend (sera automatiquement inférieure à des variables d'environnement Vercel). |
NEXT_PUBLIC_SUPPORTED_CHAINS | - | Tableau facultatif avec des identifiants de réseau (par exemple ["alephzero-testnet", "shibuya"] ) qui sont pris en charge par le frontend, si le DAPP est censé être multi-chaînes . |
* ️⃣ requis
Un élément clé, ce qui rend cet chauffeur si flexible est l'utilisation des variables d'environnement pour configurer le réseau actif dans le frontend. Cela se fait en définissant la variable NEXT_PUBLIC_DEFAULT_CHAIN dans le fichier frontend/.env.local , ou dans les paramètres de déploiement respectivement.
Si votre réseau n'est pas fourni par la bibliothèque use-inkathon , vous pouvez l'ajouter manuellement en créant un nouvel objet SubstrateChain . Si vous pensez qu'une chaîne est manquante, veuillez ouvrir un problème ou des relations publiques.
Important
Toutes les constantes de chaîne prise en charge peuvent être trouvées ici dans le référentiel scio-labs/use-inkathon .
Dans la section de démarrage ci-dessus, nous avons déjà déployé l'échantillon de contrat Greeter sur un nœud local. Pour cibler un réseau en direct, nous pouvons utiliser la variable d'environnement CHAIN lors de l'exécution du script deploy .
CHAIN=alephzero-testnet pnpm run deploy De plus, des fichiers d'environnement chargés dynamiquement avec la convention de dénomination .env.{chain} peuvent être utilisés pour ajouter une configuration supplémentaire sur le compte de déploiement.
# .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//AliceLorsque vous exécutez à nouveau le même script, ce compte de déploieur défini sera utilisé pour signer l'extrinsèque.
Avertissement
Ces fichiers sont gitignés par défaut, mais vous devriez toujours être très prudent lorsque vous leur ajoutez des informations sensibles.
Il peut être utile de se développer dans VScode en ouvrant le fichier de travail d'espace inkathon.code-workspace au lieu du répertoire simple. Cette approche offre plusieurs avantages, comme des sections dans l'explorateur de fichiers, ou des actions de raccourci pour ouvrir le terminal dans le répertoire correct.
Envisagez d'installer l'extension zoma.vscode-auto-open-workspace pour ouvrir automatiquement le fichier d'espace de travail lors de l'ouverture du répertoire.
De plus, les plugins VScode répertoriés ci-dessous sont recommandés car ils peuvent être très utiles lorsqu'ils travaillent avec cette passerelle.
| Nom du plugin | Description |
|---|---|
dbaeumer.vscode-eslint | Ajoute la prise en charge de l'éditeur Eslint. |
esbenp.prettier-vscode | Ajoute une prise en charge de l'éditeur plus joli. |
bradlc.vscode-tailwindcss | Ajoute la prise en charge de l'éditeur de TailwindCSS. |
rust-lang.rust-analyzer | Ajoute le support du langage de la rouille. |
ink-analyzer.ink-analyzer | Ajoute de l'encre! Support linguistique. |
tamasfe.even-better-toml | Ajoute la prise en charge du fichier .toml . |
gruntfuggly.todo-tree | Répertorie tous les commentaires TODO dans votre espace de travail. |
wayou.vscode-todo-highlight | Souligne les commentaires TODO dans votre espace de travail. |
mikestead.dotenv | Ajoute la mise en évidence de la syntaxe pour les fichiers .env . |
La boisson! CLI est un outil de ligne de commande pratique qui vous aide à jouer avec votre encre! Contractes sans configurer un nœud local.
drink-cli via cargo install drink-cli --force --locked .pnpm run build .pnpm run drink-cli <contract-name> . Ensuite, utilisez simplement la commande help pour voir toutes les commandes disponibles et commencez à interagir avec votre contrat. Par exemple, vous pouvez déployer l'exemple de greeter via d --constructor default ou d "Hello World" .
Pour les espaces de travail MonorePO, PNPM est probablement le choix le plus rapide et le plus fiable. Lorsque vous l'utilisez cependant, il est fortement recommandé que tout le monde de l'équipe l'utilise. Aucune installation ne doit être effectuée ni aucun autre fichier de verrouillage ne doit être engagé.
Comme alternative, le fil est également pris en charge et peut être utilisé pour l'installation. Mises en garde lors de l'utilisation du fil:
yarn.lock doivent être engagés à la place des fichiers .pnpm-lock.yaml .pnpm est toujours utilisée dans de nombreux scripts package.json , ils devraient donc être ajustés manuellement.[!IMPORTANT]
Comme NPM manque de prise en charge du protocole d'importationworkspace, il n'est pas compatible avec l'encre! Athon.
Parfois, Suivant.js ne prend pas de modifications (c.-à-d. Créations de fichiers) dans les contracts/deployments/{contract}/ les dossiers correctement. Par exemple, lorsque vous venez de déployer sur un nœud local pour la première fois et de définir le .env.local de Frontend pour se connecter au réseau development .
Pour résoudre ce problème, vous pouvez supprimer le cache de construction sur frontend/.next . Il s'agit actuellement de la seule solution et obligera Next.js à reconstruire le projet et à prendre les nouveaux fichiers.
[!NOTER]
Pour éviter ce comportement, le fichiercontracts/package.jsoncontient un petit scriptpostinstallqui crée un fichierdevelopment.tsvide si aucun n'existe.
Actuellement, il offre un style via les options suivantes hors de la boîte:
className et *.module.(s)css .[! Info]
Cette passe-partout essaie de rester non opinée en ce qui concerne le style, ce qui signifie que vous pouvez utiliser n'importe quelle bibliothèque de styles ou de composants.
Avec typechain-polkadot , les types pour chaque contrat (fichiers TypeScript) sont créés sur build (via le script build ou la commande build-all.sh ). Vous pouvez supprimer ce comportement en passant --skip-types .
Ils sont stockés sous contracts/typed-contracts/ et importés directement du frontend. Ensuite, via le nouveau crochet useRegisteredTypedContract des instances useInkathon avec une API prédéfinie, une adresse de contrat détendue du réseau et un signataire injecté sont en cours de création. Voir greeter-contract-interactions.tsx pour un exemple.
