Skip to content
AllowanceGuard
Docs · Integration

Integration Guide

Drop AllowanceGuard into your dApp, wallet, or service. Embed the widget, call the REST API, or build against React hooks — pick the integration that fits your stack and ship in an afternoon.

Choose Your Integration Method

Release status

  • REST API v1 — Live. Public, documented, rate-limited per tier. See API Reference.
  • Browser extension — Submitted. Awaiting Chrome Web Store and Firefox Add-ons review.
  • Node.js SDK — Source available. Code lives in /sdk on GitHub. npm publish pending.
  • React hooks — On the roadmap. Not yet started.

Embeddable Widget

Pending

Drop-in browser extension. Submitted to Chrome Web Store and Firefox Add-ons; awaiting reviewer approval.

  • · Zero configuration
  • · Real-time approval screening
  • · Works on every dApp
  • · No account required

React Hooks

Roadmap

Custom React hooks for seamless integration into React applications.

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

Node.js SDK

GitHub

Backend SDK for server-side scanning, monitoring, and automated revocation. Source available now in /sdk; npm publish pending.

  • · Complete v1 API coverage
  • · Built-in retry & rate-limit handling
  • · Batch operations
  • · AGPL-3.0 (commercial license available)

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

The REST API is live today. The browser extension and SDK are in pre-release — install instructions reflect their current status.

REST API v1

Live

Authenticate with a bearer token, hit the v1 endpoints from any language. No install step.

curl -H "Authorization: Bearer ag_..." \
  https://www.allowanceguard.com/api/v1/chains
Read the API reference →

Browser Extension

Pending

Submitted to the Chrome Web Store and Firefox Add-ons. Once approved, install with a single click — no developer setup required.

Awaiting reviewer approval. We’ll announce on GitHub and X when it’s live.

Node.js SDK

GitHub

Source available now in /sdk on GitHub. npm publish pending.

git clone https://github.com/
  EazyAccessEA/Allowance-guard.git
cd Allowance-guard/sdk && npm i
Looking for React hooks? They’re on the roadmap — track progress in GitHub Issues.

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
Allowance Guard