inkathon下載 - inkathon源代碼下載

inkathon

Ai源碼

@inkathon

下載

這是用於墨水的全棧DAPP樣板！與集成前端的智能合同。它可以用來快速開始開發您的黑客馬拉松想法或腳阻塞生產的Web3應用程序。

該項目是SCIO Labs計劃的一部分，旨在改善墨水的開發人員體驗！生態系統和Aleph Zero EFP的驕傲成員。？

其他項目包括：

create-ink-app CLI（即將推出）
ink!athon樣板
useInkathon Hook＆Utility庫
zink!智能合約宏

加入我們的電報小組的討論

如果您想做出貢獻，請閱讀我們的撰稿人指南

目錄：

關於
入門
1. 1。運行前端
2. 2。在本地節點上建立和部署合同
3. 3。將前端連接到本地節點
定制？
1. 1。項目名稱
2. 2。自定義合同
3. 3。自定義腳本
堆棧？
現場例子
部署？
1. 環境變量
2. 合同部署
VSCODE設置？
1. 工作區
2. 插件
喝！ CLI使用？
常見問題和故障排除

關於

樣板配有小樣品墨水！ Greeter合同存儲一條message （“問候”），並允許任何人對其進行更新。前端包含簡單的UI組件來連接您的錢包並與合同進行交互（即讀和寫message ）。在inkathon.xyz上現場嘗試。

入門

1。運行前端

前端可以在沒有局部節點運行的情況下進行操作，因為樣本合同已在某些Live TestNet（即alephzero-testnet和shibuya ）上進行了預測。根據contracts/deployments/提供必要的部署元數據和地址。

先決條件：
設置node.js v18+（通過NVM推薦使用nvm install 18 ）
安裝PNPM（通過Node.js CorePack或npm i -g pnpm推薦）
克隆這個存儲庫

Windows用戶的特殊說明

[！重要的]
Windows用戶必須使用WSL（推薦）或像Git Bash這樣的自定義外殼。 Powershell不受支持。

使用WSL作為Linux時的先決條件：
安裝WSL並在WSL終端中執行所有命令
設置node.js v18+（通過NVM推薦使用nvm install 18 ）
全球安裝以下NPM軟件包：
npm i -g npm
npm i -g pnpm node-gyp make
將此存儲庫克隆到WSL文件系統（例如/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

可選地，要啟用簡單的pnpm simple-git-hooks simple-git-hooks 。

2。在本地節點上建立和部署合同

contracts/package.json文件包含用於建立，測試和部署合同的速記腳本。

先決條件：
通過基板文檔安裝RUST（跳過“編譯基板節點”部分）
安裝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 ）手動部署合同。

3。將前端連接到本地節點

打開frontend/.env.local文件，然後將NEXT_PUBLIC_DEFAULT_CHAIN變量設置為development 。然後重新啟動前端，您應該能夠與本地節點上部署的合同進行交互。

在下面的“環境變量”部分中閱讀有關環境變量和所有可用鏈常數的更多信息。

定制？

1。項目名稱

在多個地方，您需要插入項目的姓名和標識符。這些事件中的大多數都用代碼中的a /* TODO */註釋突出顯示。您可以通過安裝todo-tree插件來輕鬆替換它們。

此外，還有以下未照明的事件：

inkathon.code-workspace文件的名稱
package.json在根目錄中以及contracts/和frontend/ packages中的名稱和元數據
在frontend/package.json中定義的工作空間依賴關係（ @inkathon/contracts ）在frontend/src/deployments/deployments.ts中導入

2。自定義合同

要替換默認的Greeter合同或添加新合同，您需要執行以下操作：

根據contracts/src/添加新合同目錄
將其添加為contracts/Cargo.toml的另一個工作空間成員
添加另一個部署腳本或調整contracts/scripts/deploy.ts
在frontend/src/deployments/deployments.ts中調整ContractIds枚舉和getDeployments功能

3。自定義腳本

添加自定義腳本對於與您的合同交互或測試某些功能很有用。因此，只需複制並重複使用contracts/scripts/script.template.ts pnpm run script <script-name>此命令將通過tsx直接運行打字稿文件。

對於一般腳本，相同的環境變量初始化和配置如下所述（例如，更改目標網絡）。

堆棧？

詳細堆棧

帶有contracts/和frontend/目錄作為軟件包的MonorePo工作區。
軟件包管理器： pnpm或yarn@stable （在下面的常見問題解答中閱讀更多）
智能合約開發：Rust，Ink！， cargo-contract ， substrate-contracts-node
frontend：next.js（app-dir），react，tyspript
- 合同互動： polkadot-js ， useInkathon React Hook＆Utility Library（或者： useInk ）
- 樣式： shadcn/ui ， tailwindcss
- 絨毛和格式： eslint ， prettier ， simple-git-hooks ， lint-staged
通過typechain-polkadot產生類型安全合同

可以完全刪除或用替代方案將造型，裁剪和格式化庫完全刪除或替換。

Inkathon堆棧圖

現場例子

在下面，您可以找到使用此樣板的實時示例或具有相似的設置為靈感：

inkathon.xyz - 該樣板的實時演示部署
azero.id - Aleph Zero及以後的域名服務
來自Ethwarsaw，Hackonchain，Ethdam和Polkadot Ink的多個黑客馬拉松項目！黑客松.

部署？

通過Vercel旋轉部署非常簡單，因為在vercel.json中已經配置了必要的設置。如果尚未將存儲庫克隆，也可以使用下面的部署按鈕從此模板中創建新的存儲庫。

另外，您也可以使用提供的Dockerfiles部署給您選擇的任何託管提供商。在這裡閱讀更多。

環境變量

所有環境變量均從process.env中的frontend/src/config/environment.ts導入，並從那裡重新出口。為了提高類型安全性，始終僅從@/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應該是多鏈，則具有帶有網絡標識符（例如[EG `["alephzero-testnet", "shibuya"]` ）的可選數組。

*需要

支撐的連鎖店

使此樣板如此靈活的一個關鍵要素是環境變量的使用來配置前端中的活動網絡。這是通過在frontend/.env.local文件或部署設置中設置NEXT_PUBLIC_DEFAULT_CHAIN變量來完成的。

如果您的網絡未由use-inkathon庫提供，則可以通過創建新的SubstrateChain對象手動添加它。如果您認為缺少鏈條，請打開問題或公關。

重要的

所有受支持的鏈常數都可以在scio-labs/use-inkathon存儲庫中找到。

合同部署

在上面的“入門”部分中，我們已經在本地節點上部署了示例Greeter合同。要定位實時網絡，運行deploy腳本時可以使用CHAIN環境變量。

CHAIN=alephzero-testnet pnpm run deploy

此外，可以使用.env.{chain}命名約定的動態加載環境文件來添加有關Deployer帳戶的其他配置。

 # .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//Alice

再次運行同一腳本時，將使用此Deployer帳戶來簽名外部。

警告

這些文件默認情況下是Gitign的，但是在向其添加敏感信息時，您仍然應該非常謹慎。

VSCODE設置？

工作區

通過打開workspace文件inkathon.code-workspace而不僅僅是普通目錄，可以在VSCODE中開發。此方法提供了多個優點，例如文件資源管理器中的部分或快捷操作，以打開正確目錄中的終端。

考慮在打開目錄時zoma.vscode-auto-open-workspace 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使用？

喝酒！ CLI是一種方便的命令行工具，可幫助您使用墨水！合同而無需設置本地節點。

通過貨物安裝drink-cli cargo install drink-cli --force --locked 。
通過pnpm run build建立合同。
運行以下命令為您的合同準備和打開CLI： pnpm run drink-cli <contract-name> 。

然後，只需使用help命令查看所有可用命令並開始與您的合同進行交互。例如，您可以通過d --constructor default或d "Hello World"部署Greeter示例合同。

常見問題和故障排除

支持哪些軟件包經理？我必須使用PNPM嗎？

對於MonorePo工作區，PNPM可能是最快，最可靠的選擇。不過，在使用它時，強烈建議團隊中的每個人都使用它。不應執行任何安裝，也不應提交任何其他鎖定文件。

作為替代方案，還支持紗線，可用於安裝。使用紗線時要注意：

僅支持穩定版本的紗線（目前V3），而不是紗線經典（V1）。
yarn.lock文件應投入使用，而不是.pnpm-lock.yaml文件。
pnpm CLI仍在許多package.json中使用。 JSON腳本，因此必須手動調整這些腳本。

[！重要的]
由於NPM缺乏對workspace導入協議的支持，因此它與墨水不兼容。

如何求解“找不到模塊”。 /entrier/development.ts'？

有時，next.js不會正確訪問contracts/deployments/{contract}/文件夾中的更改（即文件創建）。例如，當您第一次部署在本地節點上並設置前端的.env.local以連接到development網絡。

要解決此問題，您可以在frontend/.next上刪除構建緩存。這是當前唯一的解決方案，將強迫Next.js重建項目並拾取新文件。

[！筆記]
為了防止這種行為， contracts/package.json文件包含一個小的postinstall腳本，該腳本會創建一個空的development.ts文件如果不存在。

如何處理樣式？

目前，它可以通過以下選項開箱即用：

SHADCN/UI-使用Radix UI和尾風CSS構建的可重複使用的組件。
Vanilla Tailwind CSS通過className和*.module.(s)css文件。
默認的CSS樣式。

[！資訊]
該樣板試圖在造型方面保持不明狀態，這意味著您可以使用任何樣式或組件庫。

類型安全合同交互如何工作？

使用typechain-polkadot ，在構建（通過build script或build-all.sh命令）上創建每個合同（打字稿文件）的類型。您可以通過傳遞--skip-types來抑制這種行為。

它們是根據contracts/typed-contracts/存儲的，並直接從前端進口。然後，通過useInkathon預定義的API，依賴於網絡的合同地址和注入的簽名者的新的useRegisteredTypedContract Contract掛鉤。有關示例，請參見greeter-contract-interactions.tsx 。

了解有關底物，墨水！和polkadot.js的更多資源