Docs · Widget

AllowanceGuard Widget

A drop-in security component you can paste into any website. Configure it below, copy the snippet, and your users get an approval scanner without leaving your page.

Pending store approval

The browser extension is built and submitted to the Chrome Web Store and Firefox Add-ons. Reviewer approval is pending. The configuration playground below works today; install snippets will go live the moment the extension lands in each store.

Live Preview

Real-time preview

AllowanceGuard

No allowances found

Configuration

Customize widget

Theme

Display Options

Show only risky allowancesCompact mode

Max Items: 5

Wallet Address

Demo wallet (Vitalik's address)

Generated Code

React Component

<AllowanceGuardWidget
  walletAddress="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
  chainId={1}
  showRiskOnly={false}
  maxItems={5}
  theme="light"
  compact={false}
  onAllowanceClick={(allowance) => {
    console.log('Allowance clicked:', allowance)
  }}
/>

HTML/JavaScript

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

Installation

The configuration above is real and runs against the live API. The install snippets below are previews of what the published install flow will look like once the extension lands in each store.

What you can do today

· Use the REST API v1 to scan wallets — see API Reference.
· Clone the Node.js SDK from /sdk.
· Subscribe to the GitHub repo to be notified when the extension publishes.

React (preview)

Pending

1. Install (when published):

npm install allowance-guard-widget

2. Use:

<AllowanceGuardWidget
  walletAddress="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
  chainId={1}
  showRiskOnly={false}
  maxItems={5}
  theme="light"
  compact={false}
  onAllowanceClick={(allowance) => {
    console.log('Allowance clicked:', allowance)
  }}
/>

HTML (preview)

Pending

1. Include the script:

<script src="https://cdn.allowanceguard.com/widget.js"></script>

2. Mount and initialise:

<div id="allowance-guard"></div>
AllowanceGuard.init({...})

Widget Properties

Property	Type	Default	Description
walletAddress	string	-	The wallet address to display allowances for
chainId	number	1	The blockchain chain ID to filter by
showRiskOnly	boolean	false	Show only high-risk allowances
maxItems	number	10	Maximum number of allowances to display
theme	string	'light'	Widget theme: 'light', 'dark', or 'auto'
compact	boolean	false	Use compact display mode
onAllowanceClick	function	-	Callback when an allowance is clicked