Quickstart

Integriere das Embedded Wallet mit nur wenigen Zeilen Code.

Installation

Das Drop SDK wird aus dem privaten @skydroplabs-Scope auf GitHub Packages ausgeliefert. Lege eine .npmrc im Stammverzeichnis deines Projekts an, die den Scope auf die GitHub-Registry verweist:

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

GITHUB_TOKEN muss ein klassisches Personal Access Token mit dem Scope read:packages sein, oder dasselbe Token, das deine CI verwendet.

Installiere anschließend die beiden Pakete:

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

Verwendung

Rufe createWallet auf der obersten Ebene deiner Anwendung mit deiner appId und den Providern auf, die du bereitstellen möchtest. Damit wird das versteckte iframe erstellt und der postMessage-Transport verdrahtet.

Umschließe deine Anwendung als Nächstes mit dem Context-Provider <WalletProvider> und rendere das <WalletWidget> an einer beliebigen Stelle in deinem Layout:

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

Das Widget bleibt unsichtbar und wird erst gerendert, wenn der Nutzer das Wallet verbindet. Platziere es an einer Stelle, die immer eingebunden ist – typischerweise im Root deines Layouts, direkt neben <App />.

App ID

appId ist eine UUID, die deine Integration identifiziert. Sie steuert per-dApp Einstellungen – erlaubte Parent-Origins (frame-ancestors CSP), welche zusätzlichen Assets angezeigt werden, Feature-Flags – und wird am Drop-Wallet-Edge durchgesetzt.

Während der lokalen Entwicklung kannst du sie weglassen: Das Wallet lädt dann mit einer nur auf localhost beschränkten Allowlist.

Wenn du bereit bist, in Produktion zu gehen, registriere eine App ID. Siehe den App-ID-Leitfaden für den Registrierungsablauf.

Nächste Schritte

• App ID registrieren für deinen Produktions-Origin.
• createWallet – alle Provider-Optionen.
• <WalletWidget> – Theme, Größe und Form.