Hızlı Başlangıç

Gömülü cüzdanı yalnızca birkaç satır kodla entegre edin.

Kurulum

Drop SDK, GitHub Packages üzerindeki özel @skydroplabs scope'undan gönderilir. Projenizin kökünde, scope'u GitHub registry'sine yönlendiren bir .npmrc oluşturun:

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

GITHUB_TOKEN, read:packages scope'una sahip bir klasik kişisel erişim token'ı veya CI'nizin kullandığı tokenın aynısı olmalıdır.

Ardından iki paketi kurun:

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

Kullanım

Uygulamanızın en üst seviyesinde, appId'niz ve açığa çıkarmak istediğiniz sağlayıcılarla createWallet fonksiyonunu çağırın. Bu, gizli iframe'i oluşturur ve postMessage aktarımını bağlar.

Ardından, uygulamanızı <WalletProvider> context sağlayıcısı ile sarın ve düzeninizde bir yere <WalletWidget> bileşenini render edin:

// 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 görünmez kalır ve yalnızca kullanıcı cüzdanı bağladığında render edilir. Her zaman mount edilmiş bir yere yerleştirin — genellikle düzeninizin kökünde, <App /> bileşeninin yanında.

App ID

appId, entegrasyonunuzu tanımlayan bir UUID'dir. dApp başına ayarları — izin verilen üst origin'ler (frame-ancestors CSP), hangi ek varlıkların gösterileceği, feature flag'ler — yönetir ve Drop cüzdanı edge'inde uygulanır.

Yerel geliştirme sırasında bunu atlayabilirsiniz: cüzdan yalnızca localhost'a izin veren bir allow-list ile yüklenir.

Üretime göndermeye hazır olduğunuzda bir App ID kaydedin. Kayıt akışı için App ID kılavuzuna bakın.

Sonraki adımlar

• Üretim origin'iniz için bir App ID kaydedin.
• createWallet — tüm sağlayıcı seçenekleri.
• <WalletWidget> — tema, boyut ve şekil.