Quickstart

단 몇 줄의 코드만으로 임베디드 지갑을 통합하세요.

설치

Drop SDK는 GitHub Packages의 비공개 @skydroplabs 스코프에서 제공됩니다. 프로젝트 루트에 .npmrc를 생성하여 해당 스코프를 GitHub 레지스트리로 지정하세요:

@skydroplabs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

GITHUB_TOKEN은 read:packages 스코프를 가진 classic personal access token이거나, CI에서 사용하는 동일한 토큰이어야 합니다.

그런 다음 두 패키지를 설치합니다:

npm install @money-sdk/core @money-sdk/react

사용법

애플리케이션의 최상위에서 appId와 노출하려는 provider들을 지정하여 createWallet을 호출하세요. 이는 숨겨진 iframe을 생성하고 postMessage 전송 채널을 연결합니다.

다음으로 애플리케이션을 <WalletProvider> 컨텍스트 provider로 감싸고, 레이아웃 어딘가에 <WalletWidget>을 렌더링하세요:

// src/index.tsx
import { createWallet } from '@money-sdk/core'
import { WalletProvider, WalletWidget } from '@money-sdk/react'
import { createRoot } from 'react-dom/client'

import App from './App'

const wallet = createWallet({
  appId: '<YOUR_APP_ID>', // Only required for production, see "App ID" below.
  providers: {
    ethereum: true,
    // solana: true,
    // bitcoin: true,
  },
})

const root = createRoot(document.getElementById('root')!)
root.render(
  <WalletProvider wallet={wallet}>
    <WalletWidget />
    <App />
  </WalletProvider>,
)

INFO

위젯은 사용자가 지갑을 연결하기 전까지 보이지 않으며, 연결된 후에만 렌더링됩니다. 항상 마운트되어 있는 위치 — 일반적으로 레이아웃의 루트, <App /> 옆에 — 배치하세요.

App ID

appId는 여러분의 통합을 식별하는 UUID입니다. 이는 dApp별 설정 — 허용되는 상위 origin(frame-ancestors CSP), 추가로 노출할 자산, 기능 플래그 — 을 주관하며, Drop 지갑 엣지에서 강제됩니다.

로컬 개발 중에는 생략할 수 있습니다. 지갑은 localhost 전용 허용 목록으로 로드됩니다.

프로덕션에 배포할 준비가 되면 App ID를 등록하세요. 등록 흐름은 App ID 가이드를 참조하세요.

다음 단계

• 프로덕션 origin에 대한 App ID 등록하기.
• createWallet — 전체 provider 옵션.
• <WalletWidget> — 테마, 크기, 모양.