Docs · Widget

Widget builder.

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.

Live. The extension is approved on the Chrome Web Store and Firefox Add-ons. Configure the widget below and paste the snippet into any page.

Configure and preview.

Live preview

Real-time

AllowanceGuard

No allowances found

Configuration

Customise

Theme

Display options

Show only risky allowancesCompact mode

Max items5

Wallet address

Demo wallet — Vitalik’s public 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)
 }}
/>

Plain HTML.

<!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 runs against the live API today. The install snippets below are previews of the published flow — they become copy-paste-ready the moment the extension lands in each store.

What you can do right now

Use the REST API v1 to scan wallets. See the API reference.
Clone the Node.js SDK from packages/client.
Watch the GitHub repository 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)