Quickstart

Embedded wallet को कोड की कुछ ही lines में integrate करें।

Installation

Drop SDK GitHub Packages पर private @skydroplabs scope से आता है। अपने project की root पर एक .npmrc बनाएँ जो scope को GitHub registry की ओर संकेत करे:

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

GITHUB_TOKEN read:packages scope के साथ एक classic personal access token होना चाहिए, या आपके CI द्वारा उपयोग किया जाने वाला वही token।

फिर दोनों packages को install करें:

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

उपयोग

अपने application के top level पर अपने appId और जिन providers को आप expose करना चाहते हैं उनके साथ createWallet को call करें। यह hidden iframe बनाता है और postMessage transport को wire करता है।

इसके बाद, अपने application को <WalletProvider> context provider में wrap करें और अपने layout में कहीं <WalletWidget> render करें:

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

Widget invisible रहता है और केवल तभी render होता है जब user wallet से connect करता है। इसे ऐसी जगह रखें जो हमेशा mounted रहे — आमतौर पर आपके layout की root पर, <App /> के पास।

App ID

appId एक UUID है जो आपके integration की पहचान करता है। यह per-dApp settings को संचालित करता है — allowed parent origins (frame-ancestors CSP), कौन-से अतिरिक्त assets दिखाने हैं, feature flags — और Drop wallet edge पर लागू किया जाता है।

Local development के दौरान आप इसे छोड़ सकते हैं: wallet एक localhost-only allow-list के साथ load होगा।

जब आप production में ship करने के लिए तैयार हों, तो एक App ID register करें। Registration flow के लिए App ID guide देखें।

अगले कदम

• अपने production origin के लिए Register an App ID।
• createWallet — पूर्ण provider options।
• <WalletWidget> — theme, size और shape।