next web3 boilerplate

️ Aviso

Esta plantilla ya no está bajo mantenimiento activo, está desactualizado con el estado del ecosistema de Ethereum. Algunas recomendaciones para reemplazar esto serían usar el ejemplo Next.js + TypeScript + ConnectKit de la familia, utilizando WAGMI directamente o Web3Modal.

Este es un proyecto NEXT.JS predeterminado con arranque con create-next-app , personalizado como el boilerplate predeterminado para nuevos proyectos Web3.

Características

• Paquetes separados de Esters.js para mejorar la demanda de árboles, a menudo solo los contratos de éteres
• Enfoque de los ganchos primero para obtener y almacenar datos en caché de los contratos y la memorización para el rendimiento con SWR
• Web3-react para facilitar la conexión a los proveedores de Web3 con una API sólida
• General automático tipos para el contrato abis en la carpeta /contracts a través de typechain

Generación de tipo de contrato automático

Nota : Después de agregar su nuevo contrato ABIS (en formato JSON) a la carpeta /contracts , ejecute yarn compile-contract-types para generar los tipos.

Puede importar estos tipos al declarar un nuevo gancho de contrato. Los tipos generados muestran los parámetros de la función y los tipos de retorno de sus funciones, entre otros tipos útiles.

 import MY_CONTRACT_ABI from "../contracts/MY_CONTRACT.json" ;
import type { MY_CONTRACT } from "../contracts/types" ;
import useContract from "./useContract" ;

export default function useMyContract ( ) {
  return useContract < MY_CONTRACT > ( CONTRACT_ADDRESS , MY_CONTRACT_ABI ) ;
} 

Arte anterior

• Noahzinsmeister/hipertexto

Empezando

Primero, ejecute el servidor de desarrollo:

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 con su navegador para ver el resultado.

Puede comenzar a editar la página modificando pages/index.js . La página se actualiza automáticamente mientras edita el archivo.

Obtenga más información

Para obtener más información sobre Next.js, eche un vistazo a los siguientes recursos:

• Documentación Next.JS - Aprenda sobre las funciones de Next.js y la API.
• Aprende Next.js - Un tutorial interactivo Next.js.

Puede consultar el repositorio Next.js GitHub: ¡sus comentarios y contribuciones son bienvenidos!

Desplegar en Vercel

La forma más fácil de implementar su aplicación Next.js es usar la plataforma Vercel de los creadores de Next.js.

Consulte nuestra documentación de implementación Next.js para obtener más detalles.