Agente do kit de ferramentas de delegação MetaMask

🌟 Descrição geral

O MetaMask Gaia DTK Starter é um poderoso modelo Next.js que integra perfeitamente os recursos avançados do Gaia com o MetaMask's Develegation Toolkit (DTK). Este projeto permite que os desenvolvedores criem aplicativos sofisticados de blockchain com funcionalidades aprimoradas de IA, aproveitando a infraestrutura de carteira segura da MetaMask.

O starter inclui um sistema completo de criação de tokens ERC20 por meio de um contrato de fábrica integrado, permitindo que os usuários implantem tokens personalizados diretamente por meio do aplicativo. Combinado com interações baseadas em IA, isso cria uma plataforma poderosa para a construção de aplicativos descentralizados de próxima geração.

Caraterísticas

• Interações alimentadas por IA: Utilize a IA GaiaNet para criar experiências dApp inteligentes e responsivas
• Criação de tokens ERC20: Criar tokens ERC20 personalizados através do contrato de fábrica integrado
• Integração segura de blockchain: Ligue-se ao ecossistema Ethereum através da infraestrutura de carteira de confiança da MetaMask
• Gestão de delegações: O kit de ferramentas de delegação da Metamask para gerir delegações de utilizadores para agentes de IA
• Integração de serviços Bundler: Ligação pré-configurada a serviços de bundler para tratamento de transacções
• Componentes de IU modernos: Componentes de IU prontos a usar, incluindo interfaces de conversação, cartões e entradas
• Next.js App Router: Construído em Next.js 13+ com a nova arquitetura App Router
• Suporte a TypeScript: Integração total com TypeScript para segurança de tipos e melhor experiência do desenvolvedor

🚀 Introdução

Pré-requisitos

• Node.js (v16 ou posterior)
• gestor de pacotes pnpm
• Extensão MetaMask instalada no seu browser

Instalação

1. Clonar o repositório:

git clone https://github.com/meowyx/metamask-gaia-starter.git

2. Navegue até ao diretório do projeto:

cd metamask-gaia-starter

3. Instale as dependências usando o pnpm:

instalação pnpm

4. Criar um .env no diretório raiz com a seguinte configuração:

# Configuração do contrato de fábrica
PRÓXIMO_CONTRATO_FÁBRICA_ADDRESS=0x...
NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...

# Configuração do serviço Bundler
NEXT_PUBLIC_BUNDLER_URL=https://api.pimlico.io/v2/137/rpc?apikey=YOUR_API_KEY
NEXT_PUBLIC_CHAIN_ID=59141

# Configuração do Infura e da chave privada
INFURA_PROJECT_ID=seu_infura_project_id
PRIVATE_KEY=sua_chave_privada

# Configuração do armazenamento de delegação
NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY=a sua chave_delegation_api_key
NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY_ID=seu_id_delegation_api_key
NEXT_PUBLIC_DELEGATION_STORAGE_ENVIRONMENT=development

# Configuração do Gaia AI
GAIA_MODEL_BASE_URL=seu_gaia_model_url
GAIA_API_KEY=sua_gaia_api_key // não é necessário se o utilizador executar o seu próprio nó

5. Inicie o servidor de desenvolvimento:

desenvolvimento pnpm

6. Abra http://localhost:3000 no seu browser para ver a aplicação em execução.

📖 Estrutura do projeto

├── .next/ # Saída de compilação do Next.js
├─── ai/ # Utilitários relacionados a IA
│ └─── tools.ts # Implementação de ferramentas de IA
├─── app/ # Roteador de aplicativos Next.js 
│ ├─── api/ # Rotas da API
│ ├─── globals.css # Estilos globais
│ ├─── layout.tsx # Componente raiz do layout
│ └─── page.tsx # Componente da página inicial
├─── componentes/ # Componentes de IU reutilizáveis
│ ├─── ui/ # Componentes básicos da IU
│ │ ├─── badge.tsx # Componente de crachá
│ │ ├─── button.tsx # Componente de botão
│ │ ├─── card.tsx # Componente de cartão
│ │ └─── input.tsx # Componente de entrada
│ ├─── Chat.tsx # Componente de interface de chat
│ ├─── DelegationManager.tsx # Componente de gestão de delegações
│ └─── Message.tsx # Componente de mensagem
├─── lib/ # Funções utilitárias e bibliotecas
├─── serviços/ # Serviços de API
│ ├─── account.ts # Serviços relacionados com a conta
│ ├─── bundler.ts # Implementação do serviço bundler
│ └─── utils.ts # Utilidades do serviço
├─── public/ # Ativos estáticos
│ ├─── file.svg # Ícone de ficheiro
│ ├─── globe.svg # Ícone de globo
│ ├─── next.svg # Logotipo next.js
│ └─── vercel.svg # Logótipo da Vercel
├─── node_modules/ # Dependências
.env # Variáveis de ambiente
package.json # Dependências do projeto
└── pnpm-lock.yaml # arquivo de bloqueio do pnpm

🔧 Configuração

Configuração do contrato de fábrica ERC20

Este projeto integra-se com o Contrato de Fábrica ERC20 para permitir capacidades de criação de tokens. Siga estes passos para configurar a integração:

1. Clonar e implementar o contrato ERC20 Factory:

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

2. Após a implantação, actualize o seu .env com o endereço do contrato implementado:

   NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0x...  # O endereço do contrato de fábrica implementado
   NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...     # O seletor de funções para createToken

3. Atualizar o constantes.ts com o ficheiro 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. O contrato de fábrica permite-lhe criar novos tokens ERC20 com parâmetros personalizados, como o nome, o símbolo, as casas decimais e o fornecimento inicial.

A estrutura do projeto ERC20 Factory:

erc20-fábrica/
├── contratos/
│ ├── BaseERC20Token.sol # Implementação do token base
│ └─── ERC20Factory.sol # Fábrica para implementação de tokens
├─── test/
│ └── ERC20Factory.test.js # Scripts de teste
├─── ignição/
│ └── módulos/
│ └── tokenFactory.js # Configuração de implantação
├─── hardhat.config.js # Configuração do Hardhat
└── package.json # Dependências do projeto

Configuração de MetaMask

1. Instalar a extensão MetaMask no seu browser
2. Criar ou importar uma carteira
3. Ligue a sua dApp utilizando os ganchos fornecidos no motor de arranque

Integração de Gaia

1. Inscreva-se para obter uma chave de API aqui
2. Adicione a sua chave API ao ficheiro .env ficheiro em GAIA_API_KEY
3. Definir o URL de base do modelo no .env ficheiro em GAIA_MODEL_BASE_URL
4. Utilize as ferramentas de IA pré-configuradas em ai/tools.ts para interagir com as funcionalidades do GaiaNet

Configuração do serviço Bundler

1. Obter uma chave API do Pimlico ou do seu serviço de agrupamento preferido
2. Adicione o URL do bundler ao ficheiro .env ficheiro em NEXT_PUBLIC_BUNDLER_URL
3. Defina o ID correto da cadeia no .env ficheiro em NEXT_PUBLIC_CHAIN_ID

Configuração do sistema de delegação

1. Configurar as chaves da API de armazenamento de delegação no .env ficheiro
2. Utilizar o DelegationManager.tsx componente para gerir delegações entre utilizadores e agentes de IA

📚 Documentação

Para obter informações mais pormenorizadas sobre as tecnologias utilizadas neste arranque:

• Documentação do Next.js
• Documentação do MetaMask
• Documentação de Gaia
• Documentação do pnpm

🙏 Agradecimentos

• MetaMask Delegation Toolkit para o seu kit de ferramentas de delegação.
• Gaia para a sua plataforma de IA
• Next.js para a estrutura React
• Vercel AI SDK para O kit de ferramentas de IA para TypeScript