inkathon
@inkathon
これは、インク用のフルスタックのダップボイラープレートです！統合フロントエンドを使用したスマートコントラクト。ハッカソンのアイデアの開発を迅速に開始したり、生産対応のWeb3アプリケーションを足場にしたりするために使用できます。
このプロジェクトは、インクでの開発者エクスペリエンスを改善するためのSCIO Labsイニシアチブの一部です！エコシステムとアレフゼロEFPの誇り高いメンバー。 ？
その他のプロジェクトには次のものがあります。
create-ink-app （近日公開）ink!athonボイラープレートuseInkathonフック＆ユーティリティライブラリzink!スマートコントラクトマクロTelegram Groupのディスカッションに参加してください
貢献したい場合は、貢献者ガイドラインをお読みください
目次：
ボイラープレートには小さなサンプルインクが付属しています！ message （「グリーティング」）を保存し、誰でも更新できるGreeter Contract。フロントエンドには、ウォレットを接続して契約と対話するための単純なUIコンポーネントが含まれています（つまり、 messageを読み書きします）。 inkathon.xyzでライブで試してみてください。
フロントエンドは、特定のライブテストネット（つまりalephzero-testnetとshibuya ）でサンプル契約が事前に展開されているため、ローカルノードを実行することなく、箱から出して動作します。必要な展開メタデータとアドレスはcontracts/deployments/に基づいて提供されます。
前提条件：
- setup node.js v18+（
nvm install 18でNVM経由で推奨）- pnpmをインストールします（node.js corepackまたは
npm i -g pnpm経由で推奨）- このリポジトリをクローンします
[！重要]
Windowsユーザーは、WSL（推奨）またはGit Bashのようなカスタムシェルを使用する必要があります。 PowerShellはサポートされていません。
LinuxにWSLを使用する場合の前提条件：
- WSLをインストールし、WSL端末にすべてのコマンドを実行します
- setup node.js v18+（
nvm install 18でNVM経由で推奨）- 次のNPMパッケージをグローバルにインストールします。
npm i -g npmnpm i -g pnpm node-gyp make- このリポジトリをWSLファイルシステム（EG
/home/<user>/inkathon）にクローンします。ヒント： Windows Explorerの上部バーに
\wsl$を入力して、WSLファイルシステムに視覚的にアクセスできます。
# Install dependencies (once)
# NOTE: This automatically creates an `.env.local` file
pnpm install
# Start Next.js frontend
pnpm run devオプションでは、 simple-git-hooks有効にするため（コミットするときに自動リントとフォーマット用）、次のコマンドを1回実行できます： pnpm simple-git-hooks 。
contracts/package.jsonファイルには、契約を構築、テスト、展開するための速記のスクリプトが含まれています。
前提条件：
- 基板ドキュメントを介してさびを取り付けます（「基板ノードをコンパイルする」セクションをスキップします）
cargo contractをインストールします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または、ブラウザに契約UI（ pnpm contracts-ui ）を使用して手動で契約を展開することもできます。
frontend/.env.localファイルを開き、 NEXT_PUBLIC_DEFAULT_CHAIN変数をdevelopmentに設定します。次に、フロントエンドを再起動すると、ローカルノードに展開されている契約と対話できるはずです。
環境変数と、以下の環境変数セクションで利用可能なすべてのチェーン定数の詳細をご覧ください。
プロジェクトの名前と識別子を挿入する必要がある場所が複数あります。これらの発生のほとんどは、コードにA /* TODO */コメントで強調表示されます。 todo-treeプラグインをインストールすることで、簡単に1つずつ交換できます。
さらに、以下の非高ライト化された出来事があります。
inkathon.code-workspaceファイルの名前contracts/ frontend/パッケージのpackage.jsonの名前とメタデータfrontend/package.jsonで定義され、 frontend/src/deployments/deployments.tsでインポートされたワークスペース依存関係（ @inkathon/contracts ）デフォルトのGreeter契約を置き換えるか、新しい契約を追加するには、次のことを行う必要があります。
contracts/src/contracts/Cargo.tomlファイルに追加するcontracts/scripts/deploy.tsを調整しますfrontend/src/deployments/deployments.tsでContractIds EnumとgetDeployments関数を調整しますカスタムスクリプトの追加は、契約と対話したり、特定の機能をテストするのに役立ちます。したがって、 contracts/scripts/script.template.tsファイルを複製して再利用し、 pnpm run script <script-name>を介して実行します。このコマンドは、 tsxを介してTypeScriptファイルを直接実行します。
一般的なスクリプトの場合、同じ環境変数の初期化と構成が、展開セクション（ターゲットネットワークを変更するために）で説明するように適用されます。
contracts/ frontend/ディレクトリを備えたMonorepoワークスペース。pnpmまたはyarn@stable （詳細については、FAQSセクションを以下にご覧ください）cargo-contract 、 substrate-contracts-nodepolkadot-js 、 useInkathon React Hooks＆Utility Library（代わりに： useInk ）shadcn/ui 、 tailwindcsseslint 、 prettier 、 simple-git-hooks 、 lint-stagedtypechain-polkadot経由のタイプセーフ契約生成ライブラリをスタイリング、リント、フォーマットすることは、完全にドロップしたり、代替品に置き換えたりできます。
以下に、このボイラープレートを使用するか、それに触発された同様のセットアップを持っているライブ例があります。
vercel.jsonで必要な設定が既に構成されているため、Vercelを介して展開をスピンアップすることは非常に簡単です。まだリポジトリをクローン化していない場合は、下の展開ボタンを使用して、このテンプレートから新しいリポジトリを作成することもできます。
または、提供されたDockerFilesを使用して、選択したホスティングプロバイダーに展開することもできます。詳細はこちらをご覧ください。
すべての環境変数は、 frontend/src/config/environment.tsのprocess.envからインポートされ、そこから再輸出されます。タイプの安全性を改善するには、常に@/config/environmentから環境変数をインポートし、 process.envから直接インポートすることはありません。
| 環境変数 | デフォルト値 | 説明 |
|---|---|---|
NEXT_PUBLIC_DEFAULT_CHAIN *÷ | ショ和alephzero-testnet | ネットワーク（基板ベースのチェーン）フロントエンドはデフォルトで接続する必要があり、インポートする契約展開アーティファクトがあります。 |
NEXT_PUBLIC_PRODUCTION_MODE | false | 生産環境を区別するためのオプションのブールフラグ（SEOまたは分析など）。 |
NEXT_PUBLIC_URL | http://localhost:3000 | フロントエンドのベースURLを定義するオプションの文字列（vercel環境変数から自動化されます）。 |
NEXT_PUBLIC_SUPPORTED_CHAINS | - | DAPPがマルチチェーンであると思われる場合、フロントエンドでサポートされているネットワーク識別因子（ ["alephzero-testnet", "shibuya"] ）を備えたオプションの配列 |
*ピアピオンが必要です
このボイラープレートを非常に柔軟にする重要な要素の1つは、フロントエンドでアクティブネットワークを構成するための環境変数の使用です。これはfrontend/.env.localファイルにそれぞれNEXT_PUBLIC_DEFAULT_CHAIN変数を設定するか、それぞれ展開設定に設定することによって行われます。
ネットワークがuse-inkathonライブラリによって提供されていない場合は、新しいSubstrateChainオブジェクトを作成して手動で追加できます。チェーンがないと思われる場合は、問題またはPRを開いてください。
重要
サポートされているすべてのチェーン定数はscio-labs/use-inkathonリポジトリにあります。
上記の開始セクションでは、すでにローカルノードにサンプルGreeter契約を展開しています。ライブネットワークをターゲットにするために、 deployスクリプトを実行するときにCHAIN環境変数を使用できます。
CHAIN=alephzero-testnet pnpm run deployさらに、 .env.{chain}命名規則を使用して動的にロードされた環境ファイルを使用して、展開アカウントに追加の構成を追加できます。
# .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice同じスクリプトを再度実行すると、その定義されたこの展開者アカウントが外因性に署名するために使用されます。
警告
これらのファイルはデフォルトでGitignoredですが、機密情報を追加する際にはさらに注意が必要です。
ワークスペースファイルinkathon.code-workspaceをプレーンディレクトリのみで開くことで、VSCodeで開発すると役立ちます。このアプローチは、ファイルエクスプローラーのセクションなど、複数の利点を提供したり、正しいディレクトリで端末を開くためのショートカットアクションを提供します。
zoma.vscode-auto-open-workspace拡張機能をインストールして、ディレクトリを開くときにワークスペースファイルを自動的に開くことを検討してください。
さらに、以下にリストされているVSCODEプラグインは、このボイラープレートを操作するときに非常に役立つ可能性があるため推奨されます。
| プラグイン名 | 説明 |
|---|---|
dbaeumer.vscode-eslint | ESLINTエディターサポートを追加します。 |
esbenp.prettier-vscode | きれいなエディターサポートを追加します。 |
bradlc.vscode-tailwindcss | TailWindCSSエディターサポートを追加します。 |
rust-lang.rust-analyzer | 錆言語サポートを追加します。 |
ink-analyzer.ink-analyzer | インクを追加します！言語サポート。 |
tamasfe.even-better-toml | .tomlファイルサポートを追加します。 |
gruntfuggly.todo-tree | ワークスペースにすべてのTODOコメントをリストします。 |
wayou.vscode-todo-highlight | ワークスペースでTODOコメントを強調します。 |
mikestead.dotenv | .envファイルの構文強調表示を追加します。 |
飲み物！ CLIは、インクで遊ぶのに役立つ便利なコマンドラインツールです！ローカルノードをセットアップせずに契約します。
drink-cliをインストールしてcargo install drink-cli --force --locked 。pnpm run build使用して契約を構築します。pnpm run drink-cli <contract-name> 。次に、 helpコマンドを使用して利用可能なすべてのコマンドを表示し、契約とのやり取りを開始します。たとえば、 d --constructor defaultまたはd "Hello World"を介してGreeter Example契約を展開できます。
Monorepoワークスペースの場合、PNPMはおそらく最速で最も信頼性の高い選択です。ただし、それを使用すると、チームの全員が使用することを強くお勧めします。インストールを実行する必要も、他のロックファイルもコミットする必要があります。
別の方法として、糸もサポートされており、設置に使用できます。糸を使用するときの警告：
yarn.lockファイルは.pnpm-lock.yamlファイルの代わりにコミットする必要があります。pnpm CLIはまだ多くのpackage.jsonスクリプトで使用されているため、これらを手動で調整する必要があります。[！重要]
NPMにはworkspaceインポートプロトコルのサポートがないため、Ink！Athonと互換性がありません。
時々、next.jsは、 contracts/deployments/{contract}/フォルダーの変更（すなわちファイル作成）を正しく取得しない場合があります。たとえば、ローカルノードに初めて展開し、 developmentネットワークに接続するためにFrontendの.env.localを設定した場合。
これを修正するには、 frontend/.nextでビルドキャッシュを削除できます。これが現在唯一のソリューションであり、次のソリューションを強制します。
[！注記]
この動作を防ぐために、contracts/package.jsonファイルには、emptydevelopment.tsファイルが作成されていない場合に作成される小さなpostinstallスクリプトが含まれています。
現在、次のオプションを使用してスタイリングを提供しています。
classNameおよび*.module.(s)cssファイルを介したバニラテールウィンドCSSスタイルスタイル。[！情報]
このボイラープレートは、スタイリングに関してはオピノンではないままにしようとします。つまり、スタイリングやコンポーネントライブラリを使用できます。
typechain-polkadotでは、ビルド時に各契約（TypeScriptファイル）のタイプが作成されます（ buildスクリプトまたはbuild-all.shコマンドを介して）。この動作は--skip-typesを渡すことで抑制できます。
それらはcontracts/typed-contracts/の下に保存され、フロントエンドから直接インポートされます。次に、事前に定義されたAPI、ネットワーク依存契約アドレス、および注入署名者を使用して、 useRegisteredTypedContract fookを介して、 useInkathonインスタンスからのフックが作成されています。例についてはgreeter-contract-interactions.tsxを参照してください。
