inkathon
@inkathon
¡Esta es una caldera DAPP completa para tinta! Contratos inteligentes con una interfaz integrada. Se puede usar para comenzar rápidamente a desarrollar su idea de hackathon o para andamiar una aplicación Web3 lista para la producción.
¡El proyecto es parte de una iniciativa de Scio Labs para mejorar la experiencia del desarrollador en la tinta! Ecosistema y un orgulloso miembro de Aleph Zero EFP. ?
Otros proyectos incluyen:
create-ink-app CLI ( próximamente )ink!athon BoilerplateuseInkathon ganchos y biblioteca de servicios públicoszink! Macros de contrato inteligenteÚnase a la discusión en nuestro grupo Telegram
Si desea contribuir, lea nuestras pautas de contribuyentes
Tabla de contenido:
¡La calderera viene con una pequeña tinta de muestra! Contrato Greeter que almacena un message (el "saludo") y permite que cualquiera lo actualice. El frontend contiene componentes de interfaz de usuario simples para conectar su billetera e interactuar con el contrato (es decir, leer y escribir el message ). Pruébalo en vivo en Inkathon.xyz.
El frontend funciona fuera de la caja, sin un nodo local que se ejecuta, ya que el contrato de muestra se desplome previamente en ciertas redes de pruebas en vivo (es decir, alephzero-testnet y shibuya ). Los metadatos y direcciones de implementación necesarios se proporcionan bajo contracts/deployments/ .
Requisitos previos:
- Configurar Node.js V18+ (recomendado a través de NVM con
nvm install 18)- Instale PNPM (recomendado a través de Node.js CorePack o
npm i -g pnpm)- Clon este repositorio
[!IMPORTANTE]
Los usuarios de Windows deben usar WSL (recomendado) o un shell personalizado como Git Bash. PowerShell no es compatible.
Requisitos previos cuando se usa WSL para Linux:
- Instale WSL y ejecute todos los comandos en el terminal WSL
- Configurar Node.js V18+ (recomendado a través de NVM con
nvm install 18)- Instale los siguientes paquetes NPM a nivel mundial:
npm i -g npmnpm i -g pnpm node-gyp make- Clonar este repositorio en el sistema de archivos WSL (por ejemplo
/home/<user>/inkathon).Consejo: puede ingresar
\wsl$en la barra superior del explorador de Windows para acceder visualmente al sistema de archivos WSL.
# Install dependencies (once)
# NOTE: This automatically creates an `.env.local` file
pnpm install
# Start Next.js frontend
pnpm run dev Opcionalmente, para habilitar simple-git-hooks (para pelusas automáticas y formateo al cometer), puede ejecutar el siguiente comando una vez: pnpm simple-git-hooks .
El archivo contracts/package.json contiene scripts de taquigrafía para construir, probar e implementar sus contratos.
Requisitos previos:
- Instale Rust a través de los documentos de sustrato (omita la sección "Compilar un nodo de sustrato")
- Instalar
cargo contract- Instalar
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 Alternativamente, también puede implementar contratos manualmente utilizando contratos UI ( pnpm contracts-ui ) en el navegador.
Abra el archivo frontend/.env.local y establezca la variable NEXT_PUBLIC_DEFAULT_CHAIN en development . Luego reinicie el interfaz y debería poder interactuar con los contratos implementados en su nodo local.
Lea más sobre las variables de entorno y todas las constantes de cadena disponibles en la sección Variables de entorno a continuación.
Hay múltiples lugares donde necesita insertar el nombre e identificador de su proyecto. La mayoría de estos ocurrencias se destacan con A /* TODO */ Comentario en el código. Puede reemplazarlos fácilmente uno por uno instalando el complemento todo-tree .
Además, están los siguientes sucesos de ONU:
inkathon.code-workspacepackage.json Json en el directorio raíz, así como en los contracts/ y frontend/ paquetes@inkathon/contracts ) definida en frontend/package.json e importada en frontend/src/deployments/deployments.ts Para reemplazar el contrato predeterminado Greeter o agregar uno nuevo, debe hacer lo siguiente:
contracts/src/contracts/Cargo.tomlcontracts/scripts/deploy.tsContractIds enum y getDeployments en frontend/src/deployments/deployments.ts Agregar scripts personalizados es útil para interactuar con sus contratos o probar cierta funcionalidad. Por lo tanto, simplemente duplique y reutilice el archivo contracts/scripts/script.template.ts y ejecútelo a través de pnpm run script <script-name> . Este comando ejecutará el archivo TypeScript directamente a través de tsx .
Para los scripts generales, la misma inicialización y configuración de la variable de entorno se aplica como se describe a continuación en la sección de implementación (por ejemplo, para cambiar la red de destino).
contracts/ y frontend/ directorios como paquetes.pnpm o yarn@stable (lea más en la sección de preguntas frecuentes a continuación)cargo-contract , substrate-contracts-nodepolkadot-js , useInkathon React Hooks & Utility Library (alternativamente: useInk )shadcn/ui , tailwindcsseslint , prettier , simple-git-hooks , lint-stagedtypechain-polkadotLas bibliotecas de estilo, pelusa y formato se pueden eliminar por completo o reemplazarse por alternativas.
A continuación, encuentre ejemplos en vivo que usen esta calderera o tengan una configuración similar inspirada en ella:
Girar una implementación a través de VERCEL es bastante sencilla ya que la configuración necesaria ya está configurada en vercel.json . Si aún no ha clonado el repositorio, también puede usar el botón de implementación a continuación para crear un nuevo repositorio a partir de esta plantilla.
Alternativamente, también puede usar DockerFiles proporcionados para implementar en cualquier proveedor de alojamiento de su elección. Lea más aquí.
Todas las variables frontend/src/config/environment.ts entorno se importan del process.env . Para una seguridad de tipo mejorada, siempre importe variables de entorno de @/config/environment y nunca directamente desde process.env .
| Variables de entorno | Valores predeterminados | Descripción |
|---|---|---|
NEXT_PUBLIC_DEFAULT_CHAIN *️⃣ | ️ alephzero-testnet | La red (cadena basada en sustratos) a la que debe conectarse por defecto y qué artefactos de implementación de contrato para importar. |
NEXT_PUBLIC_PRODUCTION_MODE | false | Bandera booleana opcional para diferenciar el entorno de producción (por ejemplo, SEO o análisis). |
NEXT_PUBLIC_URL | http://localhost:3000 | Cadena opcional que define la URL base del frontend (se inferirá automáticamente de las variables de entorno Vercel). |
NEXT_PUBLIC_SUPPORTED_CHAINS | - | Matriz opcional con identificadores de red (por ejemplo, ["alephzero-testnet", "shibuya"] ) que son compatibles con la frontend, si se supone que el DAPP es múltiple . |
*️⃣ requerido
Un elemento clave que hace que esta calderera sea tan flexible es el uso de las variables de entorno para configurar la red activa en la frontend. Esto se hace configurando la variable NEXT_PUBLIC_DEFAULT_CHAIN en el archivo frontend/.env.local o en la configuración de implementación respectivamente.
Si su red no es proporcionada por la biblioteca use-inkathon , puede agregarla manualmente creando un nuevo objeto SubstrateChain . Si cree que falta una cadena, abra un problema o relaciones públicas.
Importante
Todas las constantes de cadena compatibles se pueden encontrar aquí en el repositorio scio-labs/use-inkathon .
En la sección inicial de arriba, ya hemos implementado el contrato de Greeter de muestra en un nodo local. Para apuntar a una red en vivo, podemos usar la variable de entorno CHAIN al ejecutar el script deploy .
CHAIN=alephzero-testnet pnpm run deploy Además, se pueden usar archivos de entorno cargados dinámicamente con la convención de nombres .env.{chain} para agregar configuración adicional sobre la cuenta del implementador.
# .env.alephzero-testnet
ACCOUNT_URI=bottom drive obey lake curtain smoke basket hold race lonely fit walk//AliceAl ejecutar el mismo script nuevamente, esta cuenta del implementador definida allí se utilizará para firmar la extrínsecia.
Advertencia
Estos archivos se gitignizan de forma predeterminada, pero aún debe ser más cauteloso al agregarles información confidencial.
Puede ser útil desarrollar en VScode abriendo el archivo de trabajo inkathon.code-workspace en lugar del directorio simple. Este enfoque ofrece múltiples ventajas, como secciones en el explorador de archivos, o acciones de acceso directo para abrir el terminal en el directorio correcto.
Considere instalar la extensión zoma.vscode-auto-open-workspace para abrir automáticamente el archivo de espacio de trabajo al abrir el directorio.
Además, se recomiendan los complementos VSCode que se enumeran a continuación, ya que pueden ser muy útiles cuando trabajan con esta calderera.
| Nombre del complemento | Descripción |
|---|---|
dbaeumer.vscode-eslint | Agrega el soporte del editor de Eslint. |
esbenp.prettier-vscode | Agrega soporte de editor más bonito. |
bradlc.vscode-tailwindcss | Agrega soporte de editor de TailWindcss. |
rust-lang.rust-analyzer | Agrega soporte de lenguaje de óxido. |
ink-analyzer.ink-analyzer | Agrega tinta! apoyo lingüístico. |
tamasfe.even-better-toml | Agrega soporte de archivo .toml . |
gruntfuggly.todo-tree | Enumera todos los comentarios TODO en su espacio de trabajo. |
wayou.vscode-todo-highlight | Lo más destacado TODO los comentarios en su espacio de trabajo. |
mikestead.dotenv | Agrega resaltado de sintaxis para archivos .env . |
¡La bebida! ¡CLI es una herramienta de línea de comandos conveniente que te ayuda a jugar con tu tinta! contratos sin configurar un nodo local.
drink-cli a través de cargo install drink-cli --force --locked .pnpm run build .pnpm run drink-cli <contract-name> . Luego, solo use el comando help para ver todos los comandos disponibles y comience a interactuar con su contrato. Por ejemplo, puede implementar el contrato de ejemplo de saluda a través de d --constructor default o d "Hello World" .
Para los espacios de trabajo de Monorepo, PNPM es probablemente la opción más rápida y confiable. Sin embargo, al usarlo, se recomienda encarecidamente que todos en el equipo lo usen. No se deben realizar instalaciones ni se deben cometer ningún otro archivo de bloqueo.
Como alternativa, el hilo también es compatible y se puede usar para la instalación. Advierte al usar hilo:
yarn.lock deben comprometerse en lugar de los archivos .pnpm-lock.yaml .pnpm todavía se usa en muchos scripts package.json , por lo que tendrían que ajustarse manualmente.[!IMPORTANTE]
Como NPM carece de soporte para el protocolo de importaciónworkspace, no es compatible con la tinta! Athon.
A veces, Next.js no recoge cambios (es decir, creaciones de archivos) en los contracts/deployments/{contract}/ carpetas correctamente. Por ejemplo, cuando acabas de implementar en un nodo local por primera vez y establece el frontend .env.local para conectarse a la red development .
Para solucionar esto, puede eliminar el caché de compilación en frontend/.next . Esta es actualmente la única solución y forzará a Next.js a reconstruir el proyecto y recoger los nuevos archivos.
[!NOTA]
Para evitar este comportamiento, el archivocontracts/package.jsoncontiene un pequeño scriptpostinstallque crea un archivodevelopment.tsvacío.ts si no existe ninguno.
Actualmente ofrece un estilo a través de las siguientes opciones de la caja:
className y *.module.(s)css .[! Información]
Esta calderera intenta permanecer como no opinuada con respecto al estilo, lo que significa que puede usar cualquier estilo de estilo o biblioteca de componentes.
Con typechain-polkadot , se crean tipos para cada contrato (archivos TypeScript) al crear (a través del comando build script o build-all.sh ). Puede suprimir este comportamiento pasando --skip-types .
Se almacenan bajo contracts/typed-contracts/ e importan directamente desde el interfaz. Luego, a través del nuevo gancho useRegisteredTypedContract de useInkathon con API predefinido, la dirección del contrato dependiente de la red y el firmante inyectado. Vea greeter-contract-interactions.tsx para un ejemplo.
