Integration Examples

React Component

npm install @dragonfire/wallet-sdk @dragonfire/wallet-react

import React from 'react';
import { DragonWalletProvider, useWallet } from '@dragonfire/wallet-react';

function App() {
    return (
        <DragonWalletProvider apiKey="YOUR_API_KEY">
            <WalletComponent />
        </DragonWalletProvider>
    );
}

function WalletComponent() {
    const { wallet, connect, balance } = useWallet();
    
    return (
        <div>
            {!wallet ? (
                <button onClick={connect}>Connect Wallet</button>
            ) : (
                <div>
                    <p>Balance: {balance} DRGC</p>
                </div>
            )}
        </div>
    );
}

Vue.js Integration

npm install @dragonfire/wallet-sdk @dragonfire/wallet-vue

import { createApp } from 'vue';
import { DragonWalletPlugin } from '@dragonfire/wallet-vue';

const app = createApp(App);
app.use(DragonWalletPlugin, {
    apiKey: 'YOUR_API_KEY'
});
app.mount('#app');

Angular Module

npm install @dragonfire/wallet-sdk @dragonfire/wallet-angular

import { NgModule } from '@angular/core';
import { DragonWalletModule } from '@dragonfire/wallet-angular';

@NgModule({
    imports: [
        DragonWalletModule.forRoot({
            apiKey: 'YOUR_API_KEY'
        })
    ]
})
export class AppModule { }