WaaS 빠른 시작

설치

npm(Node.js 18+)에서 helius-wallet-kit을 설치합니다:

pnpm add helius-wallet-kit

필수 피어 종속성:

react >= 18
react-dom >= 18
@solana/web3.js ^1.98

아래 추천 경로 핸들러 설정에는 next >= 14이 필요합니다.

설정

추천 설정은 Helius API 키를 서버 측에 유지합니다 — Helius 키는 브라우저로 전송되지 않습니다. 로컬에서 테스트 중이신가요? 프로토타이핑 단축키를 참조하세요.

앱을 제공자에 래핑

클라이언트 컴포넌트의 앱 루트 근처에 HeliusWalletProvider를 추가하세요. API 키 생략 — 경로 핸들러(다음 단계)에서 서버 측으로 제공합니다. SDK는 프로젝트 ID 및 키리스 Secure RPC URL을 자동으로 해결합니다.

app/providers.tsx

"use client";

import { HeliusWalletProvider } from "helius-wallet-kit";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HeliusWalletProvider config={{ cluster: "mainnet-beta" }}>
      {children}
    </HeliusWalletProvider>
  );
}

경로 핸들러 마운트

/api/helius/[...path]에 catch-all 경로 핸들러를 추가하세요. 이는 HELIUS_API_KEY을 서버 측에서 가지고 있으며, 지갑 부트스트랩, RPC, 전송 및 등록을 프록시합니다 — 그래서 Helius 키가 브라우저에 도달하지 않습니다. 이것이 송신자 최적화 랜딩 및 거래 내역을 제공하는 이유입니다.

app/api/helius/[...path]/route.ts

import { createHeliusRouteHandler } from "helius-wallet-kit/next";

export const { GET, POST } = createHeliusRouteHandler();

HELIUS_API_KEY를 서버 환경 변수로 설정하세요 (NEXT_PUBLIC_가 아닙니다); 핸들러는 전달된 요청에 주입합니다.

스타일 가져오기

SDK 스타일시트를 루트 레이아웃에 한 번 가져옵니다:

app/layout.tsx

import "helius-wallet-kit/ui/styles.css";

대시보드에서 사용자에게 표시할 로그인 방법을 선택하세요 — 로그인 방법 구성을 참조하세요.

프로토타이핑 단축키

로컬에서만 사용해 보시겠습니까? 경로 핸들러를 건너뛰고 API 키를 제공자에 직접 전달하세요:

app/providers.tsx

<HeliusWalletProvider
  config={{ apiKey: process.env.NEXT_PUBLIC_HELIUS_API_KEY!, cluster: "devnet" }}
>
  {children}
</HeliusWalletProvider>

이것은 브라우저 번들에 키를 포함하니, 로컬 테스트 전용입니다 — 배포 전에 위의 경로 핸들러 설정으로 전환하세요. 그 사이에 키의 도메인 제한을 설정하세요 (키 보안 보기): 이것은 지갑이나 자금을 만질 수 없지만, 공개 키가 여전히 크레딧을 사용하도록 할 수 있습니다.

시작하기

데이터 스트리밍 및 이벤트 수신

데이터 API 및 RPC

트레이딩

트랜잭션 전송

서비스형 지갑

개인정보 보호

리소스

설치

설정

프로토타이핑 단축키

다음 단계

구성

지갑 사용

​설치

​설정

​프로토타이핑 단축키

​다음 단계

구성

지갑 사용

설치

설정

프로토타이핑 단축키

다음 단계