@airdropprotocol/widget

Drop-in React claim widget for airdrop-protocol. Built on @solana/wallet-adapter-react and @airdropprotocol/sdk.

npm install @airdropprotocol/widget @airdropprotocol/sdk \
  @solana/web3.js \
  @solana/wallet-adapter-react \
  @solana/wallet-adapter-wallets \
  @solana/wallet-adapter-react-ui

Usage

import { AirdropClaim } from "@airdropprotocol/widget";
import "@airdropprotocol/widget/styles.css";
import "@solana/wallet-adapter-react-ui/styles.css";

export default function ClaimPage() {
  return (
    <AirdropClaim
      proofsUrl="/proofs.json"
      distributor="MerkleDistributorPubkey..."
      vault="VaultTokenAccountPubkey..."
    />
  );
}

Wrap your app with the usual ConnectionProvider / WalletProvider from wallet-adapter — the widget reads connection and wallet from context.

Props

| Prop | Required | Description | |---|---|---| | proofsUrl | ✅ | URL to the static proofs.json produced by airdrop tree | | distributor | ✅ | Pubkey of the deployed MerkleDistributor account | | vault | ✅ | Pubkey of the distributor's token vault (holds the supply) | | programId | | Distributor program (defaults to the Jupiter merkle-distributor) | | title | | Widget header text (default: "claim your airdrop") | | className | | Added to the root .ap-widget element | | explorerUrl | | (sig) => string — defaults to Solscan |

Headless mode

If you want to build your own UI, skip the component and use the hook:

import { useAirdropClaim } from "@airdropprotocol/widget";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";

function Custom() {
  const { connection } = useConnection();
  const { publicKey, signTransaction } = useWallet();
  const state = useAirdropClaim({
    proofsUrl: "/proofs.json",
    distributor: "...",
    vault: "...",
    connection,
    wallet: { publicKey, signTransaction },
  });
  // state.phase: "loading" | "not-connected" | "not-eligible" | "eligible" | "claiming" | "claimed" | "error"
  // state.allocation, state.signature, state.error
  // state.claim() — triggers the claim tx
}

Theming

The widget uses CSS variables on .ap-widget. Override at any level:

.ap-widget {
  --ap-accent:    #6fe3a5;
  --ap-fg:        #0b0b0b;
  --ap-bg:        #ffffff;
  --ap-border:    #0b0b0b;
  --ap-radius:    12px;
  --ap-font:      "Inter", system-ui, sans-serif;
  --ap-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Full prop / hook / theming reference: docs/widget.md.

License

MIT