inkathon
@inkathon
Это полный патлер DAPP для чернил! Умные контракты с интегрированным фронтом. Его можно использовать для быстрого начала разработки вашей идеи хакатона или для подготовки подготовки к производству приложения Web3.
Проект является частью инициативы Scio Labs по улучшению опыта разработчика в чернилах! Экосистема и гордый член Aleph Zero EFP. ?
Другие проекты включают:
create-ink-app CLI ( скоро наступит )ink!athon CowerplateuseInkathon библиотеку крючков и утилитыzink! Умные контрактные макросыПрисоединяйтесь к дискуссии в нашей группе Telegram
Если вы хотите внести свой вклад, прочитайте наши руководящие принципы участника
Оглавление:
Корлер поставляется с небольшими чернилами образца! Greeter контракт, который хранит message («приветствие») и позволяет любому обновлять его. Frontend содержит простые компоненты пользовательского интерфейса для подключения вашего кошелька и взаимодействия с контрактом (т.е. прочитайте и напишите message ). Попробуйте это вживую на inkathon.xyz.
Фронталь работает из коробки, без локального узла, так как контракт с образцом предварительно развернута на определенных живых тестах (то есть 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).Совет: вы можете ввести
\wsl$в верхней панели проводника Windows, чтобы визуально доступ к файловой системе 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 содержит сокращенные сценарии для строительства, тестирования и развертывания ваших контрактов.
Предварительные условия:
- Установите ржавчину через подложку DOCS (пропустите раздел «Скомпилируйте узлы подложки»)
- Установите
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 В качестве альтернативы, вы также можете развернуть контракты вручную, используя пользовательский интерфейс контрактов ( pnpm contracts-ui ) в браузере.
Откройте файл frontend/.env.local и установите переменную NEXT_PUBLIC_DEFAULT_CHAIN для development . Затем перезапустите фронт, и вы сможете взаимодействовать с контрактами, развернутыми на вашем локальном узле.
Узнайте больше о переменных окружающей среды и всех доступных цепных констант в разделе переменных среды ниже.
Есть несколько мест, где вам нужно вставить имя и идентификатор вашего проекта. Большинство из этих случаев выделены A /* TODO */ Comment в коде. Вы можете легко заменить их один за другим, установив плагин todo-tree .
Кроме того, существуют следующие неостановленные события:
inkathon.code-workspacepackage.json в корневом каталоге, а также в contracts/ и frontend/ пакетах@inkathon/contracts ), определенная на frontend/package.json и импортируется в frontend/src/deployments/deployments.ts Чтобы заменить контракт по Greeter или добавить новый, вам нужно сделать следующее:
contracts/src/contracts/Cargo.tomlcontracts/scripts/deploy.tsContractIds getDeployments в frontend/src/deployments/deployments.ts Добавление пользовательских сценариев полезно для взаимодействия с вашими контрактами или тестирования определенных функций. Поэтому просто дублируйте и повторно используйте contracts/scripts/script.template.ts и запустите его через pnpm run script <script-name> . Эта команда будет запускать файл TypeScript напрямую через tsx .
Для общих сценариев применяется та же инициализация и конфигурация переменной среды, как описано ниже в разделе развертывания (например, для изменения целевой сети).
contracts/ и frontend/ каталогами в качестве пакетов.pnpm или yarn@stable (Подробнее в разделе FAQS ниже)substrate-contracts-node , cargo-contract !polkadot-js , useInkathon React Hooks & Cutility 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 | - | Необязательный массив с сетевыми идентификаторами (например ["alephzero-testnet", "shibuya"] ), которые поддерживаются фронтом, если DAPP должен быть многоцепочечным . |
*⃣ требуется
Одним из ключевых элементов, создающих этот шаблон настолько гибким, является использование переменных среды для настройки активной сети на бренде. Это делается путем установки переменной NEXT_PUBLIC_DEFAULT_CHAIN в файле frontend/.env.local или в настройках развертывания соответственно.
Если ваша сеть не предоставлена библиотекой use-inkathon , вы можете добавить ее вручную, создав новый объект SubstrateChain . Если вы думаете, что цепочка отсутствует, откройте проблему или PR.
Важный
Все поддерживаемые цепные константы можно найти здесь, в репозитории scio-labs/use-inkathon .
В разделе «Начало работы» мы уже развернули контракт с образцом Greeter на локальном узле. Чтобы нацелиться на живую сеть, мы можем использовать переменную CHAIN среды при запуске сценария deploy .
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При снова запустив один и тот же сценарий, эта учетная запись развертывания определилась там, где будет использоваться внешний вид.
Предупреждение
Эти файлы по умолчанию заправлены, но вы все равно должны быть очень осторожны при добавлении им конфиденциальной информации.
Это может быть полезно разработать в VSCODE, открыв файл рабочей области inkathon.code-workspace вместо просто простого каталога. Этот подход предлагает несколько преимуществ, таких как разделы в исследователе файла, или ярлыки, чтобы открыть терминал в правильном каталоге.
Рассмотрим расширение zoma.vscode-auto-open-workspace чтобы автоматически открыть файл Workspace при открытии каталога.
Кроме того, плагины VSCODE, перечисленные ниже, рекомендуются, поскольку они могут быть очень полезными при работе с этим шаблоном.
| Название плагина | Описание |
|---|---|
dbaeumer.vscode-eslint | Добавляет поддержку Eslint Editor. |
esbenp.prettier-vscode | Добавляет более красивую поддержку редактора. |
bradlc.vscode-tailwindcss | Добавляет поддержку редактора Tailwindcss. |
rust-lang.rust-analyzer | Добавляет поддержку Rust Language. |
ink-analyzer.ink-analyzer | Добавляет чернила! Языковая поддержка. |
tamasfe.even-better-toml | Добавляет .toml File Support. |
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 , чтобы увидеть все доступные команды и начать взаимодействовать с вашим контрактом. Например, вы можете развернуть контракт с примером Greeter с помощью d --constructor default или d "Hello World" .
Для рабочих пространств Monorepo PNPM, вероятно, является самым быстрым и наиболее надежным выбором. Однако при использовании его, настоятельно рекомендуется, чтобы все в команде использовали его. Никакие установки не должны быть выполнены, ни какие -либо другие файлы блокировки не должны быть совершены.
В качестве альтернативы также поддерживается пряжа и может использоваться для установки. Предостережения при использовании пряжи:
yarn.lock должны быть совершены вместо файлов .pnpm-lock.yaml .pnpm CLI все еще используется во многих сценариях package.json , поэтому их нужно будет скорректировать вручную.[!ВАЖНЫЙ]
Поскольку NPM не имеет поддержки протокола импортаworkspace, он не совместим с чернилами! Athon.
Иногда Next.js не поднимает изменения (т.е. Creations) в contracts/deployments/{contract}/ папки правильно. Например, когда вы только что развернули на локальном узле впервые и установили .env.local подключения к сети development .
Чтобы исправить это, вы можете удалить кэш сборки на frontend/.next . В настоящее время это единственное решение, и он заставит next.js восстановить проект и забрать новые файлы.
[!ПРИМЕЧАНИЕ]
Чтобы предотвратить такое поведение, файлcontracts/package.jsonсодержит небольшой сценарийpostinstall, который создает пустой файлdevelopment.tsесли нет.
В настоящее время он предлагает стиль с помощью следующих вариантов из коробки:
className и *.module.(s)css .[!ИНФОРМАЦИЯ]
Этот шаблон старается оставаться как неоперационное в отношении стиля, что означает, что вы можете использовать любую библиотеку стиля или компонентов.
С помощью typechain-polkadot типы для каждого контракта (файлы типографии) создаются при сборке (через сценарий build или команду build-all.sh ). Вы можете подавить это поведение, передавая --skip-types .
Они хранятся в соответствии с contracts/typed-contracts/ и импортируются непосредственно с фронта. Затем через новый крюк useRegisteredTypedContract из экземпляров useInkathon с предварительно определенным API, создается адрес с сетью контракта и инъекционный подписчик. См. greeter-contract-interactions.tsx для примера.
