inkathon
@inkathon
这是用于墨水的全栈DAPP样板！与集成前端的智能合同。它可以用来快速开始开发您的黑客马拉松想法或脚阻塞生产的Web3应用程序。
该项目是SCIO Labs计划的一部分，旨在改善墨水的开发人员体验！生态系统和Aleph Zero EFP的骄傲成员。 ？
其他项目包括：
create-ink-app CLI（即将推出）ink!athon样板useInkathon Hook＆Utility库zink!智能合约宏加入我们的电报小组的讨论
如果您想做出贡献，请阅读我们的撰稿人指南
目录：
样板配有小样品墨水！ Greeter合同存储一条message （“问候”），并允许任何人对其进行更新。前端包含简单的UI组件来连接您的钱包并与合同进行交互（即读和写message ）。在inkathon.xyz上现场尝试。
前端可以在没有局部节点运行的情况下进行操作，因为样本合同已在某些Live TestNet（即alephzero-testnet和shibuya ）上进行了预测。根据contracts/deployments/提供必要的部署元数据和地址。
先决条件：
- 设置node.js v18+（通过NVM推荐使用
nvm install 18）- 安装PNPM（通过Node.js CorePack或
npm i -g pnpm推荐）- 克隆这个存储库
[！重要的]
Windows用户必须使用WSL（推荐）或像Git Bash这样的自定义外壳。 Powershell不受支持。
使用WSL作为Linux时的先决条件：
- 安装WSL并在WSL终端中执行所有命令
- 设置node.js v18+（通过NVM推荐使用
nvm install 18）- 全球安装以下NPM软件包：
npm i -g npmnpm 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可选地，要启用simple-git-hooks （用于自动覆盖和格式化时），您可以运行以下命令一次： pnpm simple-git-hooks 。
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 ）手动部署合同。
打开frontend/.env.local文件，然后将NEXT_PUBLIC_DEFAULT_CHAIN变量设置为development 。然后重新启动前端，您应该能够与本地节点上部署的合同进行交互。
在下面的“环境变量”部分中阅读有关环境变量和所有可用链常数的更多信息。
在多个地方，您需要插入项目的姓名和标识符。这些事件中的大多数都用代码中的a /* TODO */注释突出显示。您可以通过安装todo-tree插件来轻松替换它们。
此外，还有以下未照明的事件：
inkathon.code-workspace文件的名称package.json在根目录中以及contracts/和frontend/ packages中的名称和元数据frontend/package.json中定义的工作空间依赖关系（ @inkathon/contracts ）在frontend/src/deployments/deployments.ts中导入要替换默认的Greeter合同或添加新合同，您需要执行以下操作：
contracts/src/添加新合同目录contracts/Cargo.toml的另一个工作空间成员contracts/scripts/deploy.tsfrontend/src/deployments/deployments.ts中调整ContractIds枚举和getDeployments功能添加自定义脚本对于与您的合同交互或测试某些功能很有用。因此，只需复制并重复使用contracts/scripts/script.template.ts pnpm run script <script-name>此命令将通过tsx直接运行打字稿文件。
对于一般脚本，相同的环境变量初始化和配置如下所述（例如，更改目标网络）。
contracts/和frontend/目录作为软件包的MonorePo工作区。pnpm或yarn@stable （在下面的常见问题解答中阅读更多）cargo-contract ， substrate-contracts-nodepolkadot-js ， useInkathon React Hook＆Utility Library（或者： useInk ）shadcn/ui ， tailwindcsseslint ， prettier ， simple-git-hooks ， lint-stagedtypechain-polkadot产生类型安全合同可以完全删除或用替代方案将造型，裁剪和格式化库完全删除或替换。
在下面，您可以找到使用此样板的实时示例或具有相似的设置为灵感：
通过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的，但是在向其添加敏感信息时，您仍然应该非常谨慎。
通过打开workspace文件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示例合同。
对于MonorePo工作区，PNPM可能是最快，最可靠的选择。不过，在使用它时，强烈建议团队中的每个人都使用它。不应执行任何安装，也不应提交任何其他锁定文件。
作为替代方案，还支持纱线，可用于安装。使用纱线时要注意：
yarn.lock文件应投入使用，而不是.pnpm-lock.yaml文件。pnpm CLI仍在许多package.json中使用。JSON脚本，因此必须手动调整这些脚本。[！重要的]
由于NPM缺乏对workspace导入协议的支持，因此它与墨水不兼容。
有时，next.js不会正确访问contracts/deployments/{contract}/文件夹中的更改（即文件创建）。例如，当您第一次部署在本地节点上并设置前端的.env.local以连接到development网络。
要解决此问题，您可以在frontend/.next上删除构建缓存。这是当前唯一的解决方案，将强迫Next.js重建项目并拾取新文件。
[！笔记]
为了防止这种行为，contracts/package.json文件包含一个小的postinstall脚本，该脚本会创建一个空的development.ts文件如果不存在。
目前，它可以通过以下选项开箱即用：
className和*.module.(s)css文件。[！信息]
该样板试图在造型方面保持不明状态，这意味着您可以使用任何样式或组件库。
使用typechain-polkadot ，在构建（通过build script或build-all.sh命令）上创建每个合同（打字稿文件）的类型。您可以通过传递--skip-types来抑制这种行为。
它们是根据contracts/typed-contracts/存储的，并直接从前端进口。然后，通过useInkathon预定义的API，依赖于网络的合同地址和注入的签名者的新的useRegisteredTypedContract挂钩。有关示例，请参见greeter-contract-interactions.tsx 。
