inkathon
@inkathon
Dies ist eine Dapp-Kesselplatte für Tinte! Smart Contracts mit einem integrierten Frontend. Es kann verwendet werden, um schnell Ihre Hackathon-Idee zu entwickeln oder eine produktionsbereitete Web3-Anwendung zu senken.
Das Projekt ist Teil einer SCIO Labs -Initiative, um die Entwicklererfahrung in der Tinte zu verbessern! Ökosystem und stolzes Mitglied der Aleph Zero EFP. ?
Andere Projekte umfassen:
create-ink-app CLI ( bald kommt )ink!athon BoilerplateuseInkathon Hooks & Utility Libraryzink! Smart Contract MakrosNehmen Sie an der Diskussion in unserer Telegrammgruppe teil
Wenn Sie einen Beitrag leisten möchten, lesen Sie bitte unsere Richtlinien für Mitwirkende
Inhaltsverzeichnis:
Die Kesselplatte wird mit einer kleinen Probentinte ausgestattet! Greeter , der eine message (die "Begrüßung") speichert und es jedem ermöglicht, sie zu aktualisieren. Der Frontend enthält einfache UI -Komponenten, um Ihre Brieftasche zu verbinden und mit dem Vertrag zu interagieren (dh lesen und die message schreiben). Probieren Sie es live auf Inkathon.xyz aus.
Der Frontend funktioniert nicht, ohne dass ein lokaler Knoten ausgeführt wird, da der Stichprobenvertrag auf bestimmten Live-Testnets (dh alephzero-testnet und shibuya ) vorverfolgt wird. Die erforderlichen Bereitstellungsmetadaten und Adressen werden im Rahmen von contracts/deployments/ .
Voraussetzungen:
- Setup Node.js v18+ (empfohlen über NVM mit
nvm install 18)- Installieren Sie PNPM (empfohlen über node.js corepack oder
npm i -g pnpm)- Klonen Sie dieses Repository
[!WICHTIG]
Windows -Benutzer müssen entweder WSL (empfohlen) oder eine benutzerdefinierte Shell wie Git Bash verwenden. PowerShell wird nicht unterstützt.
Voraussetzungen bei der Verwendung von WSL für Linux:
- Installieren Sie WSL und führen Sie alle Befehle im WSL -Terminal aus
- Setup Node.js v18+ (empfohlen über NVM mit
nvm install 18)- Installieren Sie die folgenden NPM -Pakete weltweit:
npm i -g npmnpm i -g pnpm node-gyp make- Klonen Sie dieses Repository in das WSL -Dateisystem (z
/home/<user>/inkathon).Tipp: Sie können
\wsl$in der oberen Leiste des Windows Explorer eingeben, um visuell auf das WSL -Dateisystem zuzugreifen.
# Install dependencies (once)
# NOTE: This automatically creates an `.env.local` file
pnpm install
# Start Next.js frontend
pnpm run dev Optional können Sie den folgenden Befehl einmal ausführen, um simple-git-hooks pnpm simple-git-hooks aktivieren (für automatische Linie und Formatierung bei der Verpflichtung).
Die Datei contracts/package.json enthält Kurzskripte zum Erstellen, Testen und Bereitstellen Ihrer Verträge.
Voraussetzungen:
- Installieren Sie Rost über die Substrat -Dokumente (überspringen Sie den Abschnitt "Ein Substratknoten kompilieren)).
cargo contractinstallieren- Installieren Sie
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 Alternativ können Sie auch Verträge manuell mit der UI ( pnpm contracts-ui ) im Browser manuell einsetzen.
Öffnen Sie die frontend/.env.local -Datei und setzen Sie die Variable NEXT_PUBLIC_DEFAULT_CHAIN auf development . Starten Sie dann die Frontend neu und Sie sollten in der Lage sein, mit den auf Ihrem lokalen Knoten eingesetzten Verträgen zu interagieren.
Weitere Informationen zu Umgebungsvariablen und allen verfügbaren Kettenkonstanten in den Abschnitt Umgebungsvariablen unten.
Es gibt mehrere Orte, an denen Sie den Namen und die Bekennung Ihres Projekts einfügen müssen. Die meisten dieser Vorkommen werden mit A /* TODO */ Kommentar im Code hervorgehoben. Sie können sie einfach einzeln ersetzen, indem Sie das todo-tree -Plugin installieren.
Darüber hinaus gibt es die folgenden nicht hohen Ereignisse:
inkathon.code-workspacepackage.json im Stammverzeichnis sowie in den contracts/ und frontend/ Paketenfrontend/package.json definierte und in frontend/src/deployments/deployments.ts importierte und importierte Arbeitsbereichsabhängigkeit ( @inkathon/contracts ). Um den Standard Greeter zu ersetzen oder einen neuen hinzuzufügen, müssen Sie Folgendes ausführen:
contracts/src/ hinzucontracts/Cargo.toml hinzucontracts/scripts/deploy.tsContractIds Enum und getDeployments in frontend/src/deployments/deployments.ts Das Hinzufügen benutzerdefinierter Skripte ist nützlich, um mit Ihren Verträgen zu interagieren oder bestimmte Funktionen zu testen. Daher doppelte und wiederverwenden Sie die Datei contracts/scripts/script.template.ts und führen Sie sie über pnpm run script <script-name> aus. In diesem Befehl wird die TypeScript -Datei direkt über tsx ausgeführt.
Für allgemeine Skripte gilt dieselbe Umgebungsvariableninitialisierung und -konfiguration wie nachstehend im Bereich Bereitstellungsabschnitt (z. B. zum Ändern des Zielnetzwerks).
contracts/ und frontend/ Verzeichnissen als Pakete.pnpm oder yarn@stable (lesen Sie mehr im Abschnitt FAQs unten)cargo-contract substrate-contracts-node , Tinte!polkadot-js , useInkathon React Hooks & Utility Library (Alternativ: useInk )shadcn/ui , tailwindcsseslint , prettier , simple-git-hooks , lint-stagedtypechain-polkadotDas Styling, das Leinen und Formatieren von Bibliotheken kann vollständig fallen gelassen oder durch Alternativen ersetzt werden.
Im Folgenden finden Sie Live -Beispiele, die diese Kesselplatte verwenden oder ein ähnliches Setup inspiriert haben:
Das Erstellen einer Bereitstellung über Vercel ist ziemlich unkompliziert, da die erforderlichen Einstellungen bereits in vercel.json konfiguriert sind. Wenn Sie das Repository noch nicht kloniert haben, können Sie auch die unten stehende Bereitstellungsschaltfläche verwenden, um ein neues Repository aus dieser Vorlage zu erstellen.
Alternativ können Sie auch die bereitgestellten Dockerfiles verwenden, um an jedem Hosting -Anbieter Ihrer Wahl bereitzustellen. Lesen Sie hier mehr.
Alle Umgebungsvariablen werden frontend/src/config/environment.ts process.env importiert. Für eine verbesserte Sicherheit vom Typ importieren Sie immer nur Umgebungsvariablen aus @/config/environment und niemals direkt von process.env .
| Umgebungsvariablen | Standardwerte | Beschreibung |
|---|---|---|
NEXT_PUBLIC_DEFAULT_CHAIN *️⃣ | ️ alephzero-testnet | Das Netzwerk (Substrat-basierte Kette) Die Frontend sollte standardmäßig herstellen und an welchen Vertragsbereitstellungsartefakten importiert werden. |
NEXT_PUBLIC_PRODUCTION_MODE | false | Optionales Boolesche Flag, um die Produktionsumgebung zu differenzieren (z. B. für SEO oder Analytics). |
NEXT_PUBLIC_URL | http://localhost:3000 | Optionale Zeichenfolge, die die Basis-URL des Frontend definiert (wird automatisch von den Variablen der Vercel-Umgebungsvariablen ausgeführt). |
NEXT_PUBLIC_SUPPORTED_CHAINS | - - | Optionales Array mit Netzwerkkennern (z. B. ["alephzero-testnet", "shibuya"] ), die vom Frontend unterstützt werden, wenn der DAPP Multi-Chain sein soll . |
*️⃣ erforderlich
Ein Schlüsselelement, das diese Kesselplatte so flexibel macht, ist die Verwendung von Umgebungsvariablen, um das aktive Netzwerk in der Frontend zu konfigurieren. Dies erfolgt durch Einstellen der Variablen NEXT_PUBLIC_DEFAULT_CHAIN in der frontend/.env.local -Datei bzw. in den Bereitstellungseinstellungen.
Wenn Ihr Netzwerk nicht von der use-inkathon -Bibliothek bereitgestellt wird, können Sie es manuell hinzufügen, indem Sie ein neues SubstrateChain -Objekt erstellen. Wenn Sie der Meinung sind, dass eine Kette fehlt, öffnen Sie bitte ein Problem oder eine PR.
Wichtig
Alle unterstützten Kettenkonstanten finden Sie hier im scio-labs/use-inkathon Repository.
Im obigen Erste -Start -Abschnitt haben wir bereits den Greeter auf einem lokalen Knoten eingesetzt. Um ein Live -Netzwerk anzusprechen, können wir die CHAIN verwenden, wenn wir das deploy ausführen.
CHAIN=alephzero-testnet pnpm run deploy Darüber hinaus kann dynamisch geladene Umgebungsdateien mit der Namenskonvention .env.{chain} verwendet werden, um zusätzliche Konfiguration zum Bereitstellungskonto hinzuzufügen.
# .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//AliceWenn das gleiche Skript erneut ausgeführt wird, wird dieses dort definierte Deployer -Konto verwendet, um die Extrinsische zu unterzeichnen.
Warnung
Diese Dateien werden standardmäßig glich gemacht, aber Sie sollten weiterhin besonders vorsichtig sein, wenn Sie ihnen vertrauliche Informationen hinzufügen.
Es kann hilfreich sein, sich in VSCODE zu entwickeln, indem die Workspace-Datei inkathon.code-workspace anstelle des einfachen Verzeichnisses geöffnet wird. Dieser Ansatz bietet mehrere Vorteile, z.
Betrachten Sie die Installation der Erweiterung zoma.vscode-auto-open-workspace um die Arbeitsbereichsdatei beim Öffnen des Verzeichnisses automatisch zu öffnen.
Darüber hinaus werden die unten aufgeführten VSCODE -Plugins empfohlen, da sie bei der Arbeit mit dieser Kesselplatte sehr hilfreich sein können.
| Plugin -Name | Beschreibung |
|---|---|
dbaeumer.vscode-eslint | Fügt den Support von Eslintinteditor hinzu. |
esbenp.prettier-vscode | Fügt hübscherer Redakteurunterstützung hinzu. |
bradlc.vscode-tailwindcss | Fügt den Herausgeber -Redakteur -Support von Tailwindcss hinzu. |
rust-lang.rust-analyzer | Fügt Rostsprachunterstützung hinzu. |
ink-analyzer.ink-analyzer | Fügt Tinte hinzu! Sprachunterstützung. |
tamasfe.even-better-toml | Fügt .toml -Dateiunterstützung hinzu. |
gruntfuggly.todo-tree | Listet alle TODO -Kommentare in Ihrem Arbeitsbereich auf. |
wayou.vscode-todo-highlight | Heben Sie TODO -Kommentare in Ihrem Arbeitsbereich hervor. |
mikestead.dotenv | Fügt die Syntax -Hervorhebung für .env -Dateien hinzu. |
Das Getränk! CLI ist ein praktisches Befehlszeilen -Tool, mit dem Sie mit Ihrer Tinte spielen können! Verträge ohne Einrichtung eines lokalen Knotens.
drink-cli über cargo install drink-cli --force --locked .pnpm run build .pnpm run drink-cli <contract-name> . Verwenden Sie dann einfach den Befehl help , um alle verfügbaren Befehle anzuzeigen und mit Ihrem Vertrag zu interagieren. Zum Beispiel können Sie den Begrüßer -Beispielvertrag über d --constructor default oder d "Hello World" bereitstellen.
Für Monorepo -Arbeitsbereiche ist PNPM wahrscheinlich die schnellste und zuverlässigste Wahl. Bei der Verwendung wird jedoch sehr empfohlen, dass jeder im Team es verwendet. Es sollten keine Installationen durchgeführt werden, noch andere Sperrdateien sollten begangen werden.
Als Alternative wird auch Garn unterstützt und kann zur Installation verwendet werden. Vorbehalte bei der Verwendung von Garn:
yarn.lock -Dateien sollten anstelle von .pnpm-lock.yaml Dateien festgelegt werden.pnpm -CLI wird in vielen package.json -Skripten immer noch verwendet, sodass diese manuell angepasst werden müssen.[!WICHTIG]
Da NPM dasworkspace-Importprotokoll fehlt, ist es nicht mit Tinte! Athon kompatibel.
Manchmal nimmt Next.js keine Änderungen (dh Dateikreationen) in den contracts/deployments/{contract}/ Ordnern korrekt auf. ZB, wenn Sie erst einmal auf einem lokalen Knoten bereitgestellt werden und die Frontends .env.local festlegen, um eine Verbindung zum development herzustellen.
Um dies zu beheben, können Sie den Build -Cache an frontend/.next löschen. Dies ist derzeit die einzige Lösung und wird als nächstes.js erzwingen, das Projekt wieder aufzubauen und die neuen Dateien abzuholen.
[!NOTIZ]
Um dieses Verhalten zu verhindern, enthält die Dateicontracts/package.jsonein kleinespostinstall-Skript, das eine leeredevelopment.ts-Datei erstellt, wenn keine vorhanden ist.
Derzeit bietet es das Styling über die folgenden Optionen aus der Box:
className und *.module.(s)css -Dateien.[!INFO]
Diese Kesselplatte versucht, in Bezug auf das Styling als nicht öffentlich zu bleiben. Dies bedeutet, dass Sie jede Styling- oder Komponentenbibliothek verwenden können.
Mit typechain-polkadot werden Typen für jeden Vertrag (TypeScript-Dateien) beim Build erstellt (über den Befehl build -Skript oder build-all.sh ). Sie können dieses Verhalten unterdrücken, indem Sie --skip-types bestehen.
Sie werden unter contracts/typed-contracts/ gelagert und direkt aus dem Frontend importiert. Dann werden über den neuen useRegisteredTypedContract Hook von useInkathon Instanzen mit vordefinierter API, netzwerkabhängiger Vertragsadresse und injizierter Unterzeichner erstellt. Ein Beispiel siehe greeter-contract-interactions.tsx .
