Quickstart

Integrate the embedded wallet in just a few lines of code.

Installation

The Drop SDK ships from the private @skydroplabs scope on GitHub Packages. Create an .npmrc at the root of your project pointing the scope at the GitHub registry:

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

GITHUB_TOKEN must be a classic personal access token with read:packages scope, or the same token used by your CI.

Then install the two packages:

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

Usage

Call createWallet at the top level of your application with your appId and the providers you want to expose. This creates the hidden iframe and wires up the postMessage transport.

Next, wrap your application in the <WalletProvider> context provider and render the <WalletWidget> somewhere in your 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

The widget stays invisible and only renders once the user connects the wallet. Place it somewhere that is always mounted — typically at the root of your layout, next to <App />.

App ID

appId is a UUID that identifies your integration. It drives per-dApp settings — allowed parent origins (frame-ancestors CSP), which additional assets to surface, feature flags — and is enforced at the Drop wallet edge.

During local development you can omit it: the wallet will load with a localhost-only allow-list.

When you're ready to ship to production, register an App ID. See the App ID guide for the registration flow.

Next steps

• Register an App ID for your production origin.
• createWallet — full provider options.
• <WalletWidget> — theme, size and shape.