패키지 설치

선호하는 패키지 관리자를 사용하여 CreateKit를 설치하세요:
npm install @b3dotfun/basemint
CreateKit는 TypeScript로 구축되었으며 박스 안에 전체 타입 정의를 제공합니다.

의존성

CreateKit는 현대의 web3 기술 위에 구축되었으며 다음과 같은 피어 의존성이 필요합니다:
npm install viem @wagmi/core

환경 설정

1. 체인 네트워크 구성

CreateKit는 B3 네트워크에 대한 사전 구성된 체인 정의를 제공합니다:
chains.ts
import { b3Mainnet, b3Testnet } from '@b3dotfun/basemint'

// B3 메인넷 (운영)
console.log('체인 ID:', b3Mainnet.id) // 8333
console.log('이름:', b3Mainnet.name)
console.log('RPC URL:', b3Mainnet.rpcUrls.default.http[0])

// B3 테스트넷 (개발)
console.log('체인 ID:', b3Testnet.id) // 1993
console.log('이름:', b3Testnet.name)
console.log('RPC URL:', b3Testnet.rpcUrls.default.http[0])

2. Viem 클라이언트 초기화

블록체인과 상호 작용하기 위해 viem 클라이언트를 설정하세요:
client.ts
import { createPublicClient, createWalletClient, http } from 'viem'
import { privateKeyToAccount } from 'viem/accounts'
import { b3Testnet } from '@b3dotfun/basemint'

// 데이터 읽기용 공개 클라이언트
export const publicClient = createPublicClient({
  chain: b3Testnet,
  transport: http()
})

// 거래용 지갑 클라이언트 (서버 측 사용)
export const walletClient = createWalletClient({
  chain: b3Testnet,
  transport: http(),
  account: privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`)
})

3. 환경 변수

프로젝트 루트에 .env 파일을 생성하세요:
.env
# 거래 서명에 필요
PRIVATE_KEY=0x...

# 선택사항: 사용자 정의 RPC 엔드포인트
B3_MAINNET_RPC=https://your-custom-rpc.com
B3_TESTNET_RPC=https://your-custom-testnet-rpc.com
버전 관리에 개인 키를 커밋하지 마세요. 환경 변수나 안전한 키 관리 솔루션을 사용하세요.

프레임워크 통합

Next.js 설정

Next.js 애플리케이션의 경우, 설정 파일을 생성하세요:
lib/createkit.ts
import { createPublicClient, http } from 'viem'
import { b3Testnet } from '@b3dotfun/basemint'
import { 
  CollectionManager, 
  RewardTracker, 
  BaseMintStorage 
} from '@b3dotfun/basemint'

// 클라이언트 초기화
export const publicClient = createPublicClient({
  chain: b3Testnet,
  transport: http()
})

// CreateKit 관리자 초기화
export const collectionManager = new CollectionManager(publicClient)
export const rewardTracker = new RewardTracker(publicClient)
export const storage = new BaseMintStorage({
  baseUrl: 'https://api.basemint.fun'
})

React/Vite 설정

src/lib/createkit.ts
import { createPublicClient, http } from 'viem'
import { b3Testnet } from '@b3dotfun/basemint'
import { CollectionManager } from '@b3dotfun/basemint'

export const publicClient = createPublicClient({
  chain: b3Testnet,
  transport: http(import.meta.env.VITE_RPC_URL)
})

export const collectionManager = new CollectionManager(publicClient)

설치 확인

간단한 스크립트로 설치를 테스트하세요:
test-installation.ts
import { b3Testnet, CollectionManager } from '@b3dotfun/basemint'
import { createPublicClient, http } from 'viem'

async function testInstallation() {
  try {
    // 클라이언트 생성
    const client = createPublicClient({
      chain: b3Testnet,
      transport: http()
    })

    // 관리자 초기화
    const manager = new CollectionManager(client)
    
    // 연결 테스트
    const blockNumber = await client.getBlockNumber()
    console.log('✅ B3 테스트넷에 성공적으로 연결됨')
    console.log(`📊 현재 블록 번호: ${blockNumber}`)
    
    // 계약 상호 작용 테스트
    const factoryAddress = manager.getFactoryAddress()
    console.log(`🏭 팩토리 주소: ${factoryAddress}`)
    
    console.log('🎉 CreateKit 설치 성공!')
  } catch (error) {
    console.error('❌ 설치 테스트 실패:', error)
  }
}

testInstallation()
테스트 스크립트를 실행하세요:
npx tsx test-installation.ts

TypeScript 설정

tsconfig.json이 필요한 설정을 포함하고 있는지 확인하세요:
tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"]
  }
}

다음 단계

CreateKit를 설치하고 구성했으니, 이제 빌드를 시작할 준비가 되었습니다:

문제 해결