Integration Guide

Integrate AllowanceGuard into your dApp, wallet, or service with our comprehensive toolkit. Choose from React hooks, embeddable widgets, or Node.js SDK.

Choose Your Integration Method

Embeddable Widget

Drop-in widget for any website. Works with React, Vue, Angular, or vanilla HTML.

• Zero configuration
• Customizable themes
• Real-time updates
• Mobile responsive

React Hooks

Custom React hooks for seamless integration into React applications.

• TypeScript support
• Automatic caching
• Error handling
• Real-time updates

Node.js SDK

Full-featured SDK for backend services and server-side applications.

• Complete API coverage
• Built-in retry logic
• Data export features
• Batch operations

Live Widget Demo

See the AllowanceGuard widget in action with real data.

All Allowances

AllowanceGuard

No allowances found

High Risk Only

AllowanceGuard

No risky allowances found

Code Examples

React Widget Integration

Install the widget package and embed it in your React application.

import React from 'react'
import AllowanceGuardWidget from 'allowance-guard-widget'

function MyApp() {
  return (
    <div>
      <h1>My DeFi App</h1>
      
      {/* Embed AllowanceGuard Widget */}
      <AllowanceGuardWidget
        walletAddress="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
        chainId={1}
        showRiskOnly={true}
        maxItems={5}
        theme="light"
        onAllowanceClick={(allowance) => {
          console.log('Allowance clicked:', allowance)
        }}
      />
    </div>
  )
}

export default MyApp

HTML/JavaScript Integration

Include the widget script and initialize it in any HTML page.

<!DOCTYPE html>
<html>
<head>
  <title>My DeFi App</title>
  <script src="https://unpkg.com/allowance-guard-widget@latest/dist/widget.js"></script>
</head>
<body>
  <h1>My DeFi App</h1>
  
  <!-- AllowanceGuard Widget -->
  <div id="allowance-guard-widget"></div>
  
  <script>
    // Initialize the widget
    AllowanceGuardWidget.init({
      container: '#allowance-guard-widget',
      walletAddress: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
      chainId: 1,
      showRiskOnly: true,
      maxItems: 5,
      theme: 'light',
      onAllowanceClick: (allowance) => {
        console.log('Allowance clicked:', allowance)
      }
    })
  </script>
</body>
</html>

React Hooks Integration

Use our custom hooks for more control over data fetching and state management.

import React, { useState, useEffect } from 'react'
import { useAllowances, useRiskAssessment, useNetworks } from 'allowance-guard-hooks'

function MyWalletComponent({ walletAddress }) {
  const { data: allowances, loading, error } = useAllowances({
    walletAddress,
    riskOnly: true,
    pageSize: 10
  })

  const { data: networks } = useNetworks()

  if (loading) return <div>Loading allowances...</div>
  if (error) return <div>Error: {error}</div>

  return (
    <div>
      <h2>Wallet Security Status</h2>
      <p>Supported networks: {networks?.supported.length || 0}</p>
      
      <div className="allowances-list">
        {allowances.map((allowance, index) => (
          <div key={index} className="allowance-item">
            <h3>{allowance.tokenName}</h3>
            <p>Spender: {allowance.spenderName}</p>
            <p>Risk Level: {allowance.riskLevel}</p>
            <p>Amount: {allowance.allowanceFormatted}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

export default MyWalletComponent

Node.js SDK Integration

Use the SDK in your backend services for comprehensive wallet security analysis.

const AllowanceGuardSDK = require('allowance-guard-sdk')

// Initialize the SDK
const sdk = new AllowanceGuardSDK({
  apiKey: process.env.ALLOWANCE_GUARD_API_KEY, // Optional
  timeout: 30000
})

async function checkWalletSecurity(walletAddress) {
  try {
    // Get allowances
    const allowances = await sdk.getAllowances(walletAddress, {
      riskOnly: true,
      pageSize: 50
    })

    // Analyze risk
    const criticalAllowances = allowances.data.filter(a => a.riskLevel >= 3)
    
    console.log(`Found ${criticalAllowances.length} high-risk allowances`)
    
    // Export report
    const csvData = await sdk.exportAllowances(walletAddress, 'csv')
    
    return {
      totalAllowances: allowances.data.length,
      criticalAllowances: criticalAllowances.length,
      csvData: csvData
    }
  } catch (error) {
    console.error('Error checking wallet security:', error)
    throw error
  }
}

// Usage
checkWalletSecurity('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045')
  .then(result => {
    console.log('Security check completed:', result)
  })
  .catch(error => {
    console.error('Security check failed:', error)
  })

Installation & Setup

React Widget

Installation:

npm install allowance-guard-widget

Import:

import AllowanceGuardWidget from 'allowance-guard-widget'

React Hooks

Installation:

npm install allowance-guard-hooks

Import:

import { useAllowances } from 'allowance-guard-hooks'

Node.js SDK

Installation:

npm install allowance-guard-sdk

Import:

const AllowanceGuardSDK = require('allowance-guard-sdk')

HTML Widget

CDN Script:

<script src="https://unpkg.com/allowance-guard-widget@latest/dist/widget.js"></script>

Initialize:

AllowanceGuardWidget.init({...})

Best Practices

Security

• Always validate wallet addresses client-side
• Use HTTPS for all API requests
• Implement proper error handling
• Don't expose API keys in client-side code

Performance

• Use pagination for large datasets
• Implement client-side caching
• Debounce user input for search
• Use appropriate page sizes

User Experience

• Show loading states during API calls
• Provide clear error messages
• Use consistent theming
• Make widgets mobile-responsive

Integration

• Test with multiple wallet addresses
• Handle network switching gracefully
• Implement proper TypeScript types
• Follow semantic versioning