Chuyển đến nội dung chính
Phiên bản: 2.0.0

Bộ công cụ ủy quyền MetaMask Agent

🌟 Overview​

MetaMask Gaia DTK Starter là một mẫu Next.js mạnh mẽ tích hợp liền mạch các khả năng nâng cao của Gaia với Develegation Toolkit (DTK) của MetaMask. Dự án này cho phép các nhà phát triển xây dựng các ứng dụng blockchain tinh vi với các chức năng được tăng cường AI trong khi tận dụng cơ sở hạ tầng ví an toàn của MetaMask.

Bộ công cụ ủy quyền Gaia Gif

Starter bao gồm hệ thống tạo token ERC20 đầy đủ thông qua hợp đồng nhà máy tích hợp, cho phép người dùng triển khai token tùy chỉnh trực tiếp thông qua ứng dụng. Kết hợp với tương tác do AI hỗ trợ, điều này tạo ra một nền tảng mạnh mẽ để xây dựng các ứng dụng phi tập trung thế hệ tiếp theo.

✨ Tính năng​

  • Tương tác hỗ trợ AI : Sử dụng GaiaNet AI để tạo ra trải nghiệm dApp thông minh và nhạy bén
  • Tạo mã thông báo ERC20 : Tạo mã thông báo ERC20 tùy chỉnh thông qua hợp đồng nhà máy tích hợp
  • Tích hợp Blockchain an toàn : Kết nối với hệ sinh thái Ethereum thông qua cơ sở hạ tầng ví đáng tin cậy của MetaMask
  • Quản lý ủy quyền : Bộ công cụ ủy quyền của Metamask để quản lý các ủy quyền từ người dùng đến tác nhân AI
  • Tích hợp dịch vụ Bundler : Kết nối được cấu hình sẵn với các dịch vụ bundler để xử lý giao dịch
  • Thành phần UI hiện đại : Các thành phần UI được tạo sẵn bao gồm giao diện trò chuyện, thẻ và đầu vào
  • Next.js App Router : Được xây dựng trên Next.js 13+ với kiến trúc App Router mới
  • Hỗ trợ TypeScript : Tích hợp TypeScript đầy đủ để đảm bảo an toàn cho kiểu và cải thiện trải nghiệm của nhà phát triển

🚀 Bắt đầu​

Điều kiện tiên quyết​

  • Node.js (v16 trở lên)
  • trình quản lý gói pnpm
  • Tiện ích mở rộng MetaMask được cài đặt trong trình duyệt của bạn

Cài đặt​

  1. Sao chép kho lưu trữ:
git clone https://github.com/meowyx/metamask-gaia-starter.git
  1. Điều hướng đến thư mục dự án:
cd metamask-gaia-starter
  1. Cài đặt các phụ thuộc bằng pnpm:
cài đặt pnpm
  1. Tạo một .env tập tin trong thư mục gốc với cấu hình sau:
# Cấu hình hợp đồng nhà máy
 NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0x...
 NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...

 # Cấu hình dịch vụ Bundler
 NEXT_PUBLIC_BUNDLER_URL=https://api.pimlico.io/v2/137/rpc?apikey=KHÓA_API_CỦA BẠN
 TIẾP_TẠI_CHUỖI_CÔNG_BỐ_ID=59141

 # Cấu hình Infura và khóa riêng tư
 INFURA_PROJECT_ID=ID_dự_án_infura_của_bạn
 PRIVATE_KEY=khóa_riêng_của_bạn

 # Cấu hình lưu trữ ủy quyền
 NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY=khóa_api_ủy_quyền_của_bạn
 NEXT_PUBLIC_DELEGATION_STORAGE_API_KEY_ID=ID_khóa_api_ủy_quyền_của_bạn
 NEXT_PUBLIC_DELEGATION_STORAGE_ENVIRONMENT=phát triển

 # Cấu hình AI Gaia
 GAIA_MODEL_BASE_URL=url_mô_hình_gaia_của_bạn
 GAIA_API_KEY=your_gaia_api_key // không cần thiết nếu bạn chạy nút của riêng bạn
  1. Khởi động máy chủ phát triển:
pnpm phát triển
  1. Mở http://localhost:3000 trên trình duyệt của bạn để xem ứng dụng đang chạy.

📖 Cấu trúc dự án​

├── .next/ # Đầu ra xây dựng Next.js
 ├── ai/ # Tiện ích liên quan đến AI
 │ └── tools.ts # Triển khai công cụ AI
 ├── app/ # Bộ định tuyến ứng dụng Next.js
 │ ├── api/ # Tuyến API
 │ ├── globals.css # Kiểu toàn cục
 │ ├── layout.tsx # Thành phần bố cục gốc
 │ └── page.tsx # Thành phần trang chủ
 ├── components/ # Các thành phần UI có thể tái sử dụng
 │ ├── ui/ # Các thành phần UI cơ bản
 │ │ ├── badge.tsx # Thành phần huy hiệu
 │ │ ├── button.tsx # Thành phần nút
 │ │ ├── card.tsx # Thành phần thẻ
 │ │ └── input.tsx # Thành phần đầu vào
 │ ├── Chat.tsx # Thành phần giao diện trò chuyện
 │ ├── DelegationManager.tsx # Thành phần quản lý ủy quyền
 │ └── Message.tsx # Thành phần tin nhắn
 ├── lib/ # Các hàm tiện ích và thư viện
 ├── dịch vụ/ # dịch vụ API
 │ ├── account.ts # Dịch vụ liên quan đến tài khoản
 │ ├── bundler.ts # Triển khai dịch vụ Bundler
 │ └── utils.ts # Tiện ích dịch vụ
 ├── public/ # Tài sản tĩnh
 │ ├── file.svg # Biểu tượng tệp
 │ ├── globe.svg # Biểu tượng quả địa cầu
 │ ├── next.svg # Biểu trưng Next.js
 │ └── vercel.svg # Vercel logo
 ├── node_modules/ # Phụ thuộc
 ├── .env # Biến môi trường
 ├── package.json # Phụ thuộc của dự án
 └── pnpm-lock.yaml # tập tin khóa pnpm

🔧 Cấu hình​

Thiết lập hợp đồng nhà máy ERC20​

Dự án này tích hợp với Hợp đồng Nhà máy ERC20 để cho phép khả năng tạo mã thông báo. Thực hiện theo các bước sau để thiết lập tích hợp:

  1. Sao chép và triển khai hợp đồng ERC20 Factory:

    git clone https://github.com/meowyx/erc20-factory
     cd erc20-nhà máy
     cài đặt npm
     npx hardhat biên dịch
     npx hardhat ignition triển khai ignition/modules/tokenFactory.ts --network linea-testnet

  2. Sau khi triển khai, hãy cập nhật .env tập tin có địa chỉ hợp đồng đã triển khai:

    NEXT_PUBLIC_FACTORY_CONTRACT_ADDRESS=0x... # Địa chỉ hợp đồng nhà máy đã triển khai
     NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x... # Bộ chọn hàm cho createToken

  3. Cập nhật hằng số.ts tập tin với 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. Hợp đồng nhà máy cho phép bạn tạo token ERC20 mới với các thông số tùy chỉnh như tên, ký hiệu, số thập phân và nguồn cung ban đầu.

Cấu trúc dự án Nhà máy ERC20:

nhà máy erc20/
 ├── hợp đồng/
 │ ├── BaseERC20Token.sol # Triển khai mã thông báo cơ sở
 │ └── ERC20Factory.sol # Nhà máy triển khai mã thông báo
 ├── kiểm tra/
 │ └── ERC20Factory.test.js # Tập lệnh kiểm tra
 ├── đánh lửa/
 │ └── mô-đun/
 │ └── tokenFactory.js # Cấu hình triển khai
 ├── hardhat.config.js # Cấu hình Hardhat
 └── package.json # Phụ thuộc của dự án

Thiết lập MetaMask​

  1. Cài đặt tiện ích mở rộng MetaMask trong trình duyệt của bạn
  2. Tạo hoặc nhập ví
  3. Kết nối dApp của bạn bằng các hook được cung cấp trong trình khởi động

Tích hợp Gaia​

  1. Đăng ký khóa API tại đây
  2. Thêm khóa API của bạn vào .env lưu trữ dưới GAIA_API_KEY
  3. Đặt URL cơ sở mô hình trong .env lưu trữ dưới URL CƠ SỞ GAIA
  4. Sử dụng các công cụ AI được cấu hình sẵn trong ai/tools.ts để tương tác với các tính năng của GaiaNet

Cấu hình dịch vụ Bundler​

  1. Nhận khóa API từ Pimlico hoặc dịch vụ bundler ưa thích của bạn
  2. Thêm URL bundler vào .env lưu trữ dưới URL GÓI CÔNG KHAI TIẾP THEO
  3. Đặt ID chuỗi chính xác trong .env lưu trữ dưới TIẾP_TẠI_MÃ_CHUỖI_CÔNG_BỐ_TI�

Thiết lập hệ thống ủy quyền​

  1. Cấu hình khóa API lưu trữ ủy quyền trong .env tài liệu
  2. Sử dụng DelegationManager.tsx thành phần để quản lý các nhiệm vụ giữa người dùng và tác nhân AI

📚 Tài liệu​

Để biết thông tin chi tiết hơn về các công nghệ được sử dụng trong bộ khởi động này:

🙏 Lời cảm ơn​