Inicio rápido

Integra la wallet integrada en tan solo unas pocas líneas de código.

Instalación

El SDK de Drop se distribuye desde el scope privado @skydroplabs en GitHub Packages. Crea un archivo .npmrc en la raíz de tu proyecto apuntando el scope al registro de GitHub:

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

GITHUB_TOKEN debe ser un token de acceso personal clásico con el scope read:packages, o el mismo token que utiliza tu CI.

A continuación, instala los dos paquetes:

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

Uso

Llama a createWallet en el nivel superior de tu aplicación con tu appId y los proveedores que quieras exponer. Esto crea el iframe oculto y configura el transporte de postMessage.

A continuación, envuelve tu aplicación en el proveedor de contexto <WalletProvider> y renderiza <WalletWidget> en algún lugar de tu 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

El widget permanece invisible y solo se renderiza una vez que el usuario conecta la wallet. Colócalo en un lugar que esté siempre montado: normalmente en la raíz de tu layout, junto a <App />.

App ID

appId es un UUID que identifica tu integración. Controla la configuración por dApp: orígenes padre permitidos (CSP frame-ancestors), qué activos adicionales mostrar, feature flags, y se aplica en el edge de la wallet de Drop.

Durante el desarrollo local puedes omitirlo: la wallet se cargará con una lista blanca solo para localhost.

Cuando estés listo para desplegar a producción, registra un App ID. Consulta la guía del App ID para conocer el flujo de registro.

Próximos pasos

• Registra un App ID para tu origen de producción.
• createWallet — opciones completas de proveedores.
• <WalletWidget> — theme, size y shape.