Quickstart

Integre a carteira embutida em apenas algumas linhas de código.

Instalação

O Drop SDK é distribuído a partir do escopo privado @skydroplabs no GitHub Packages. Crie um .npmrc na raiz do seu projeto apontando o escopo para o registry do GitHub:

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

GITHUB_TOKEN deve ser um classic personal access token com o escopo read:packages, ou o mesmo token usado pelo seu CI.

Em seguida, instale os dois pacotes:

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

Uso

Chame createWallet no nível mais alto da sua aplicação com seu appId e os providers que você deseja expor. Isso cria o iframe oculto e configura o transporte via postMessage.

Em seguida, envolva sua aplicação com o context provider <WalletProvider> e renderize o <WalletWidget> em algum lugar do seu 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

O widget permanece invisível e só é renderizado quando o usuário conecta a carteira. Coloque-o em um lugar que esteja sempre montado — normalmente na raiz do seu layout, ao lado de <App />.

App ID

appId é um UUID que identifica sua integração. Ele controla as configurações por dApp — origens pai permitidas (CSP frame-ancestors), quais ativos adicionais exibir, feature flags — e é aplicado na edge da carteira Drop.

Durante o desenvolvimento local, você pode omiti-lo: a carteira será carregada com uma lista de permissões restrita a localhost.

Quando estiver pronto para ir para produção, registre um App ID. Consulte o guia do App ID para o fluxo de registro.

Próximos passos

• Registrar um App ID para sua origem de produção.
• createWallet — opções completas de providers.
• <WalletWidget> — tema, tamanho e formato.