Docs · Integration

Integration.

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

Status today.

REST API v1: Live. Public, documented, rate-limited per tier. API reference.
Browser extension: Live. Approved on the Chrome Web Store and Firefox Add-ons.
Node.js SDK: Source available. Code in packages/client on GitHub as @allowance-guard/client. npm publish in progress.
React hooks: Source available. Code in packages/react on GitHub as @allowance-guard/react. npm publish in progress.

Three paths in.

Widgets render UI. Hooks give you data. The SDK automates from your server. Pick one.

Embeddable widget

Drop-in component. Zero configuration, real-time approval screening, works on every dApp, no account required.

Widget builder →

React hooks

TypeScript-first hooks for reading allowances and risk scores. Automatic caching, error handling, and real-time updates.

Source on GitHub →

Node.js SDK

Server-side scanning, monitoring, and automated revocation. Complete v1 coverage, retries, rate-limit handling, AGPL-3.0 (commercial licence available).

Source on GitHub →

Live demo.

Rendered below against Vitalik’s public wallet, Ethereum mainnet. Left: all allowances. Right: risky only, compact.

All allowances

AllowanceGuard

No allowances found

High risk only

AllowanceGuard

No risky allowances found

Copy-paste snippets.

Four ready-to-run examples. Replace the wallet address and API key with your own.

React widget.

Install allowance-guard-widget and render it like any other component.

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

Plain HTML.

One script tag, one init call. Works in any HTML page without a build step.

<!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.

Data layer for teams that want to render the approvals themselves. Typed responses, automatic pagination.

import React from 'react'
import { useAllowances, 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.

Server-side wallet security analysis. Scan in bulk, filter by risk, export CSV.

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 {
    const allowances = await sdk.getAllowances(walletAddress, {
      riskOnly: true,
      pageSize: 50
    })

    const criticalAllowances = allowances.data.filter(a => a.riskLevel >= 3)

    console.log(`Found ${criticalAllowances.length} high-risk allowances`)

    const csvData = await sdk.exportAllowances(walletAddress, 'csv')

    return {
      totalAllowances: allowances.data.length,
      criticalAllowances: criticalAllowances.length,
      csvData
    }
  } catch (error) {
    console.error('Error checking wallet security:', error)
    throw error
  }
}

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 — 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. Live

Approved on the Chrome Web Store and Firefox Add-ons. Install with a single click — no developer setup required.

Node.js SDK. Source on GitHub

Source lives in packages/client as @allowance-guard/client. npm publish in progress.

git clone https://github.com/
  EazyAccessEA/Allowance-guard.git
cd Allowance-guard/packages/client && pnpm i

React hooks. Source on GitHub

Source lives in packages/react as @allowance-guard/react. npm publish in progress.

Before you ship.

Four buckets of housekeeping that save you support tickets later.

Security

· Validate wallet addresses client-side
· Use HTTPS for every API request
· Handle errors explicitly; do not swallow them
· Never expose ag_live_* keys in browser code

Performance

· Paginate large result sets; don’t request 100 at once
· Cache responses client-side where feasible
· Debounce user-input-driven queries
· Pick a sensible default page size

User experience

· Show loading states while scans run
· Give clear error messages, not generic codes
· Use consistent theming across the widget and your UI
· Test on mobile viewports

Integration

· Test with multiple wallet addresses and chains
· Handle network switching gracefully
· Use the provided TypeScript types
· Pin to a specific version; follow semver