주요 콘텐츠로 건너뛰기
버전: 2.0.0

메타마스크 위임 툴킷 에이전트

🌟 개요​

메타마스크 Gaia DTK 스타터는 Gaia의 고급 기능을 메타마스크의 개발 위임 툴킷(DTK)과 원활하게 통합하는 강력한 Next.js 템플릿입니다. 이 프로젝트를 통해 개발자는 메타마스크의 보안 지갑 인프라를 활용하면서 AI가 강화된 기능을 갖춘 정교한 블록체인 애플리케이션을 구축할 수 있습니다.

가이아 대표단 툴킷 Gif

스타터에는 통합 팩토리 컨트랙트를 통한 완전한 ERC20 토큰 생성 시스템이 포함되어 있어 사용자가 애플리케이션을 통해 직접 커스텀 토큰을 배포할 수 있습니다. 이는 AI 기반 상호작용과 결합하여 차세대 탈중앙화 애플리케이션을 구축할 수 있는 강력한 플랫폼을 만들어냅니다.

✨ 특징​

  • AI 기반 인터랙션: GaiaNet AI를 활용하여 지능적이고 반응이 빠른 dApp 경험 만들기
  • ERC20 토큰 생성: 통합 팩토리 컨트랙트를 통해 사용자 지정 ERC20 토큰 생성
  • 안전한 블록체인 통합: 메타마스크의 신뢰할 수 있는 지갑 인프라를 통해 이더리움 생태계와 연결하세요.
  • 위임 관리: 사용자-AI 상담원 간 위임을 관리하기 위한 메타마스크의 위임 툴킷
  • 번들러 서비스 통합: 트랜잭션 처리를 위한 번들러 서비스 연결이 미리 구성되어 있습니다.
  • 최신 UI 컴포넌트: 채팅 인터페이스, 카드 및 입력을 포함한 기성 UI 구성 요소
  • Next.js 앱 라우터: 새로운 앱 라우터 아키텍처가 적용된 Next.js 13+에 구축됨
  • TypeScript 지원: 유형 안전성과 더 나은 개발자 경험을 위한 완전한 TypeScript 통합

🚀 시작하기​

전제 조건​

  • Node.js(v16 이상)
  • PNPM 패키지 관리자
  • 브라우저에 설치된 메타마스크 확장 프로그램

설치​

  1. 리포지토리를 복제합니다:
git clone https://github.com/meowyx/metamask-gaia-starter.git
  1. 프로젝트 디렉토리로 이동합니다:
CD 메타마스크-가이아 스타터
  1. pnpm을 사용하여 종속성을 설치합니다:
pnpm 설치
  1. 만들기 .env 파일을 다음 구성으로 루트 디렉토리에 추가합니다:
# 공장 계약 구성
다음_공개_팩토리_계약_주소=0x...
NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...

# 번들러 서비스 구성
NEXT_PUBLIC_BUNDLER_URL=https://api.pimlico.io/v2/137/rpc?apikey=YOUR_API_KEY
NEXT_PUBLIC_CHAIN_ID=59141

# 인퓨라 및 개인키 구성
INFURA_PROJECT_ID=귀하의_인푸라_프로젝트_ID
PRIVATE_KEY=귀하의_개인키

# 위임 저장소 구성
다음_공개_위임_스토리지_API_KEY=귀하의_위임_API_키
다음_퍼블릭_위임_스토리지_API_KEY_ID=귀하의_위임_API_키_ID
다음_공개_위임_스토리지_환경=개발 환경

# Gaia AI 구성
GAIA_MODEL_BASE_URL=귀하의 가이아 모델 URL
GAIA_API_KEY=귀하의_gaia_api_key // 자체 노드를 실행하는 경우 필요 없음
  1. 개발 서버를 시작합니다:
PNPM 개발
  1. 브라우저에서 http://localhost:3000 을 열어 애플리케이션이 실행되는 것을 확인합니다.

📖 프로젝트 구조​

├── .next/ # Next.js 빌드 출력
├── ai/ # AI 관련 유틸리티
│ └── tools.ts # AI 도구 구현
├── app/ # Next.js 앱 라우터 
│ ├── api/ # API 경로
│ ├── globals.css # 글로벌 스타일
│ ├── layout.tsx # 루트 레이아웃 컴포넌트
│ └── page.tsx # 홈 페이지 컴포넌트
├── 컴포넌트/ # 재사용 가능한 UI 컴포넌트
│ ├── ui/ # 기본 UI 컴포넌트
│ │ ├── badge.tsx # 배지 컴포넌트
│ │ ├── button.tsx # 버튼 컴포넌트
│ │ ├── card.tsx # 카드 컴포넌트
│ │ └── input.tsx # 입력 컴포넌트
│ ├── chat.tsx # 채팅 인터페이스 컴포넌트
│ ├── DelegationManager.tsx # 위임 관리 컴포넌트
│ └── Message.tsx # 메시지 컴포넌트
├── lib/ # 유틸리티 함수 및 라이브러리
├── services/ # API 서비스
│ ├── account.ts # 계정 관련 서비스
│ ├── bundler.ts # 번들러 서비스 구현
│ └── utils.ts # 서비스 유틸리티
├── public/ # 정적 자산
│ ├── file.svg # 파일 아이콘
│ ├── globe.svg # 지구본 아이콘
│ ├── next.svg # Next.js 로고
│ └── vercel.svg # 버셀 로고
├── node_modules/ # 종속성
├── .env # 환경 변수
├── package.json # 프로젝트 종속성
└── pnpm-lock.yaml # pnpm 잠금 파일

🔧 구성​

ERC20 공장 계약 설정​

이 프로젝트는 ERC20 팩토리 컨트랙트와 통합되어 토큰 생성 기능을 사용할 수 있습니다. 통합을 설정하려면 다음 단계를 따르세요:

  1. ERC20 팩토리 컨트랙트를 복제하고 배포합니다:

    git clone https://github.com/meowyx/erc20-factory
    cd erc20-factory
    npm 설치
    npx 하드햇 컴파일
    npx 하드햇 점화 배포 ignition/modules/tokenFactory.ts --네트워크 리네아 테스트넷

  2. 배포 후 .env 파일에 배포된 컨트랙트 주소가 포함되어 있습니다:

    다음_공개_팩토리_계약_주소=0x...  # 배포된 팩토리 컨트랙트 주소
    NEXT_PUBLIC_CREATE_TOKEN_SELECTOR=0x...     # 토큰 생성 함수 선택기

  3. 업데이트 constants.ts 파일을 ERC20 팩토리 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. 팩토리 컨트랙트를 사용하면 이름, 기호, 소수점, 초기 공급량과 같은 사용자 지정 매개변수를 사용하여 새로운 ERC20 토큰을 생성할 수 있습니다.

ERC20 팩토리 프로젝트 구조:

erc20-factory/
├── contracts/
│ ├── BaseERC20Token.sol # 기본 토큰 구현
│ └── ERC20Factory.sol # 토큰 배포를 위한 팩토리
├── test/
│ └── ERC20Factory.test.js # 테스트 스크립트
├── ignition/ │ └──
│ └── modules/
│ └── tokenFactory.js # 배포 구성
├── hardhat.config.js # 하드햇 구성
└── package.json # 프로젝트 종속성

메타마스크 설정​

  1. 브라우저에 메타마스크 확장 프로그램을 설치하세요.
  2. 지갑 생성 또는 가져오기
  3. 스타터에 제공된 후크를 사용하여 디앱을 연결하세요.

Gaia 통합​

  1. 여기에서 API 키 신청하기
  2. API 키를 .env 파일 아래 GAIA_API_KEY
  3. 모델 기본 URL을 .env 파일 아래 가이아_모델_베이스_URL
  4. 다음에서 미리 구성된 AI 도구를 사용하세요. ai/tools.ts 를 사용하여 GaiaNet 기능과 상호 작용할 수 있습니다.

번들러 서비스 구성​

  1. 핌리코 또는 선호하는 번들러 서비스에서 API 키 받기
  2. 번들러 URL을 .env 파일 아래 다음_공개_번들러_URL
  3. 에서 올바른 체인 ID를 설정합니다. .env 파일 아래 다음_공개_체인_ID

위임 시스템 설정​

  1. 위임 스토리지 API 키를 구성합니다. .env 파일
  2. 사용 DelegationManager.tsx 컴포넌트를 사용하여 사용자와 AI 에이전트 간의 위임을 관리합니다.

📚 문서​

이 스타터에 사용된 기술에 대한 자세한 정보를 확인하세요:

🙏 감사​