Descarga build onchain apps - Descargar el código fuente build onchain apps

build onchain apps

Código Fuente de IA

v0.31.0

Descargar

Plantilla de compilación de aplicaciones OnChain

TRECTURA DE APLICACIÓN DE LA APLICACIÓN ONCHAIN (⛵️)

Acelere su creatividad de Onchain con la plantilla Build OnChain Apps. ☕️

La plantilla de compilación de aplicaciones OnChain (también conocida como Boat ⛵️) lo ayudará a ahorrar semanas de configuración inicial de aplicaciones y la molestia de integrar los componentes de la cadena con la infraestructura Web2. ?

Hacemos esto adoptando un enfoque obstinado para racionalizar las primeras decisiones que debe tomar al construir una aplicación Onchain.

Ya sea que sea un participante de Hackathon o un emprendedor ambicioso que busque construir la próxima gran cosa, esta plantilla está diseñada con usted en mente. ?

Fuera de la caja ? ?

Soporte de aplicaciones web progresivas usando next.js
¿Soporte de Ethereum L2 a través de la base?
Creación de cuenta fácil con billetera inteligente
Ejemplos y documentación en vivo para experiencias de menta y pagos con Wagmi y Viem
Las últimas prácticas de estilo de estilo con CSS de viento de cola?
Mantenimiento fácil con pelusas, formateo y pruebas ✅
¿Conocimientos sobre las métricas de rendimiento de Web vital con perfume.js?
Implementación de contrato inteligente con Foundry ☁️
Soporte para un nodo de TestNet local para probar contratos inteligentes con el Anvil. ?

Empezando

Paso 1: Configuración de variables de entorno

Obtenga una URL de RPC base de la plataforma de desarrollador Coinbase y asigne al archivo .env.local

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

Paso 2: Instale y ejecute su aplicación OnChain

 # Install
yarn

# Run
yarn dev

Desarrollar

Para formatear y vincular el paquete localmente, use estos pasos rápidos.

 # Format fix
yarn format

# Lint fix
yarn lint

Actualización de ABI

Después de crear un proyecto usando Boat, estas son las carpetas y archivos que le interesan al actualizar un contrato inteligente: Uso de BuyMeCoffee Smart Contract como un ejemplo a continuación

 < project-name >
├── contracts
│   ├── src
│   │   └── BuyMeACoffee.sol          ← smart contract code
│   └──out/BuyMeACoffee.sol
│       └── BuyMeACoffee.json         ← output from " forge build " which contains the updated ABI
│
└── web/app/buy-me-coffee
    └── _contracts
        ├── BuyMeACoffeeABI.ts             ← copy of ABI from contracts/out/BuyMeACoffee.json
        └── useBuyMeACoffeeContract.ts     ← deploy address

Importación de ABI actualizado para frontend Code

Después de actualizar su código de contrato inteligente, ejecute forge build en la carpeta contracts . Esto creará un JSON en el directorio contracts/out .

La salida JSON contiene información adicional. Solo necesitamos la propiedad abi de ese objeto JSON. Usemos jq para extraer solo la propiedad abi

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

Tome la salida de jq y actualice web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

¡Hecho con el primer paso!

Implementar su contrato inteligente y actualizar el código frontend

¡Asegúrese de obtener todas las variables de entorno cuadradas en contracts/.env y obtenga un poco de sepolia eth de un grifo!

Para implementar su contrato inteligente,

 # from the "contract" folder

source .env && forge script script/LocalContract.s.sol:LocalContractScript  --broadcast --rpc-url https://sepolia.base.org

En la larga salida, encuentre el valor para Contract Address .

Copie ese valor y actualice web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts con la nueva dirección.

Outro

Este es uno de los pasos más propensos a errores. Tómelo paso a paso.

Si es una nueva implementación de contrato inteligente, simplemente intente implementar el contrato BuyMeACoffee existente y reemplace la dirección del contrato. Después, intente actualizar BuyMeACoffee.sol y obtenga el nuevo ABI en su código frontend.

¡Estamos pensando en formas de facilitar este paso en el futuro! ¡Feliz piratería!