Quickstart

Integrasikan embedded wallet hanya dalam beberapa baris kode.

Instalasi

Drop SDK dirilis dari scope privat @skydroplabs di GitHub Packages. Buat .npmrc di root proyek Anda yang mengarahkan scope ke registry GitHub:

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

GITHUB_TOKEN harus berupa classic personal access token dengan scope read:packages, atau token yang sama yang digunakan oleh CI Anda.

Lalu pasang kedua paketnya:

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

Penggunaan

Panggil createWallet di level teratas aplikasi Anda dengan appId Anda dan provider yang ingin Anda ekspos. Ini akan membuat iframe tersembunyi dan menyiapkan transport postMessage.

Selanjutnya, bungkus aplikasi Anda di dalam context provider <WalletProvider> dan render <WalletWidget> di suatu tempat di layout Anda:

// 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

Widget tetap tidak terlihat dan hanya dirender setelah pengguna menghubungkan wallet. Letakkan di tempat yang selalu ter-mount — biasanya di root layout Anda, di samping <App />.

App ID

appId adalah UUID yang mengidentifikasi integrasi Anda. Ini mengatur pengaturan per-dApp — origin parent yang diizinkan (frame-ancestors CSP), aset tambahan yang ditampilkan, feature flag — dan ditegakkan di edge Drop wallet.

Selama pengembangan lokal Anda dapat mengabaikannya: wallet akan dimuat dengan allow-list khusus localhost.

Ketika Anda siap rilis ke production, daftarkan App ID. Lihat panduan App ID untuk alur registrasinya.

Langkah berikutnya

• Daftarkan App ID untuk origin production Anda.
• createWallet — opsi provider lengkap.
• <WalletWidget> — theme, size, dan shape.