Ir al contenido principal
Versión: 2.0.0

Agente del Conjunto de Herramientas de Delegación MetaMask

🌟 Visión general​

MetaMask Gaia DTK Starter es una potente plantilla Next.js que integra a la perfección las capacidades avanzadas de Gaia con el Develegation Toolkit (DTK) de MetaMask. Este proyecto permite a los desarrolladores construir sofisticadas aplicaciones de blockchain con funcionalidades mejoradas de IA mientras aprovechan la infraestructura de billetera segura de MetaMask.

Gif del conjunto de herramientas de la Delegación Gaia

El startup incluye un sistema completo de creación de tokens ERC20 a través de un contrato de fábrica integrado, lo que permite a los usuarios desplegar tokens personalizados directamente a través de la aplicación. Combinado con interacciones impulsadas por IA, esto crea una potente plataforma para construir aplicaciones descentralizadas de próxima generación.

✨ Características​

  • Interacciones potenciadas por IA: Utiliza la IA de GaiaNet para crear experiencias de dApp inteligentes y con capacidad de respuesta.
  • Creación de tokens ERC20: Crear tokens ERC20 personalizados a través del contrato de fábrica integrado.
  • Integración segura con Blockchain: Conéctate con el ecosistema Ethereum a través de la infraestructura de monederos de confianza de MetaMask.
  • Gestión de delegaciones: Conjunto de herramientas de delegación de Metamask para gestionar las delegaciones de usuario a agente de la IA.
  • Integración de servicios Bundler: Conexión preconfigurada a servicios de bundler para la gestión de transacciones.
  • Componentes de interfaz de usuario modernos: Componentes de interfaz de usuario listos para usar, incluidas interfaces de chat, tarjetas y entradas.
  • Enrutador de aplicaciones Next.js: Construido sobre Next.js 13+ con la nueva arquitectura App Router.
  • Compatibilidad con TypeScript: Integración completa de TypeScript para seguridad tipográfica y mejor experiencia del desarrollador.

🚀 Primeros pasos​

Requisitos previos​

  • Node.js (v16 o posterior)
  • gestor de paquetes pnpm
  • Extensión MetaMask instalada en su navegador

Instalación​

  1. Clonar el repositorio:
git clone https://github.com/meowyx/metamask-gaia-starter.git
  1. Navegue hasta el directorio del proyecto:
cd metamask-gaia-starter
  1. Instalar dependencias usando pnpm:
instalación pnpm
  1. Crear un .env en el directorio raíz con la siguiente configuración:
# Configuración del contrato de fábrica
NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0x...
NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...

# Configuración del servicio Bundler
NEXT_PUBLIC_BUNDLER_URL=https://api.pimlico.io/v2/137/rpc?apikey=YOUR_API_KEY
NEXT_PUBLIC_CHAIN_ID=59141

# Configuración de Infura y de la clave privada
INFURA_PROJECT_ID=su_infura_project_id
PRIVATE_KEY=su_clave_privada

# Configuración del almacenamiento de delegación
NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY=su_clave_api_delegación
NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY_ID=su_clave_api_de_delegación
NEXT_PUBLIC_DELEGATION_STORAGE_ENVIRONMENT=desarrollo

# Configuración de la IA de Gaia
GAIA_MODEL_BASE_URL=su_gaia_model_url
GAIA_API_KEY=tu_gaia_api_key // no es necesario si ejecutas tu propio nodo
  1. Inicie el servidor de desarrollo:
pnpm dev
  1. Abra http://localhost:3000 en su navegador para ver la aplicación en funcionamiento.

📖 Estructura del proyecto​

├── .next/ # Salida de compilación de Next.js
├── ai/ # Utilidades relacionadas con la IA.
│ └── tools.ts # implementación de herramientas de IA
├── app/ # enrutador de aplicaciones Next.js 
│ ├── api/ # Rutas API
│ ├── globals.css # Estilos globales
│ ├── layout.tsx # Componente raíz de diseño
│ └── page.tsx # Componente de la página de inicio
├── components/ # Componentes de interfaz de usuario reutilizables
│ ├── ui/ # Componentes básicos de interfaz de usuario
│ │ ├── badge.tsx # Badge component
│ │ ├── button.tsx # Componente Button
│ │ ├── card.tsx # Card component
│ │ └── input.tsx # Componente de entrada
│ ├── Chat.tsx # Componente de interfaz de chat
│ ├── DelegationManager.tsx # Componente de gestión de la delegación
│ └── Message.tsx # Componente de mensajes
├── lib/ # Funciones de utilidad y bibliotecas
├── services/ # Servicios de la API
│ ├── account.ts # Servicios relacionados con las cuentas
│ ├── bundler.ts # Implementación del servicio Bundler
│ └── utils.ts # Utilidades de los servicios
├── public/ # Activos estáticos
│ ├── file.svg # Icono del archivo
│ ├── globe.svg # Icono del globo terráqueo
│ ├── next.svg # Logotipo de Next.js
│ └── vercel.svg # Logotipo de Vercel
├── node_modules/ # Dependencias
├── .env # Variables de entorno
├── package.json # Dependencias del proyecto
└── pnpm-lock.yaml # archivo de bloqueo pnpm

🔧 Configuración​

ERC20 Configuración del contrato de fábrica​

Este proyecto se integra con el ERC20 Factory Contract para permitir la creación de tokens. Siga estos pasos para configurar la integración:

  1. Clonar y desplegar el contrato ERC20 Factory:

    git clone https://github.com/meowyx/erc20-factory
    cd erc20-factory
    npm instalar
    npx hardhat compilar
    npx hardhat ignition deploy ignition/modules/tokenFactory.ts --network linea-testnet

  2. Tras la implantación, actualice .env con la dirección del contrato desplegado:

    NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0x...  # La dirección del contrato de fábrica desplegado
    NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...     # El selector de función para createToken

  3. Actualizar el constantes.ts con la ERC20 Factory ABI:

    // Add the ERC20 Factory ABI to your constants.ts file
    export const FACTORY_ABI = [
      // ... ABI contents from the compiled contract
      {
        "inputs": [
          {"internalType": "string", "name": "name", "type": "string"},
          {"internalType": "string", "name": "symbol", "type": "string"},
          {"internalType": "uint8", "name": "decimals", "type": "uint8"},
          {"internalType": "uint256", "name": "initialSupply", "type": "uint256"}
        ],
        "name": "createToken",
        "outputs": [{"internalType": "address", "name": "", "type": "address"}],
        "stateMutability": "nonpayable",
        "type": "function"
      }
      // ... other ABI entries
    ];

  4. El contrato de fábrica permite crear nuevos tokens ERC20 con parámetros personalizados como nombre, símbolo, decimales y suministro inicial.

La estructura del proyecto ERC20 Factory:

erc20-factory/
├── contratos/
│ ├── BaseERC20Token.sol # Implementación del token base.
│ └── ERC20Factory.sol # Fábrica para el despliegue de tokens.
├── test/
│ └── ERC20Factory.test.js # Scripts de prueba
├── ignition/
│ └── módulos/
│ └── tokenFactory.js # Configuración del despliegue
├── hardhat.config.js # Configuración de hardhat
└── package.json # Dependencias del proyecto

Configuración de MetaMask​

  1. Instale la extensión MetaMask en su navegador
  2. Crear o importar un monedero
  3. Conecta tu dApp utilizando los hooks proporcionados en el starter

Integración de Gaia​

  1. Regístrese para obtener una clave API aquí
  2. Añada su clave de API al campo .env archivar en GAIA_API_KEY
  3. Establezca la URL base del modelo en .env archivar en GAIA_MODEL_BASE_URL
  4. Utilice las herramientas de IA preconfiguradas en ai/tools.ts interactuar con las funciones de GaiaNet

Configuración del servicio Bundler​

  1. Obtenga una clave API de Pimlico o de su servicio de agrupación preferido
  2. Añada la URL del bundler a la carpeta .env archivar en NEXT_PUBLIC_BUNDLER_URL
  3. Establezca el ID de cadena correcto en el .env archivar en NEXT_PUBLIC_CHAIN_ID

Configuración del sistema de delegación​

  1. Configure las claves API de almacenamiento de delegación en .env archivo
  2. Utiliza el GestorDelegación.tsx componente para gestionar las delegaciones entre usuarios y agentes de IA

📚 Documentación​

Para obtener información más detallada sobre las tecnologías utilizadas en este arranque:

🙏 Agradecimientos​