Démarrage rapide

Intégrez le portefeuille intégré en seulement quelques lignes de code.

Installation

Le SDK Drop est publié depuis le scope privé @skydroplabs sur GitHub Packages. Créez un fichier .npmrc à la racine de votre projet qui fait pointer le scope vers le registre GitHub :

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

GITHUB_TOKEN doit être un jeton d'accès personnel classique avec le scope read:packages, ou le même jeton que celui utilisé par votre CI.

Installez ensuite les deux packages :

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

Utilisation

Appelez createWallet au niveau supérieur de votre application avec votre appId et les providers que vous souhaitez exposer. Cela crée l'iframe caché et met en place le transport postMessage.

Ensuite, enveloppez votre application dans le context provider <WalletProvider> et affichez le <WalletWidget> quelque part dans votre mise en page :

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

Le widget reste invisible et ne s'affiche que lorsque l'utilisateur connecte le portefeuille. Placez-le à un endroit toujours monté — généralement à la racine de votre mise en page, à côté de <App />.

App ID

appId est un UUID qui identifie votre intégration. Il pilote les paramètres propres à chaque dApp — origines parentes autorisées (CSP frame-ancestors), assets supplémentaires à exposer, feature flags — et est appliqué à la périphérie du portefeuille Drop.

Pendant le développement local, vous pouvez l'omettre : le portefeuille se chargera avec une liste d'autorisation limitée à localhost.

Lorsque vous êtes prêt à passer en production, enregistrez un App ID. Consultez le guide App ID pour le processus d'enregistrement.

Étapes suivantes

• Enregistrer un App ID pour votre origine de production.
• createWallet — options complètes des providers.
• <WalletWidget> — thème, taille et forme.