Components

AlloKit provides a comprehensive set of React components for building grant pool applications. These components are organized by functionality and provide consistent UI patterns across the platform.

Core Components

Pool Components

Pool components handle pool creation, management, and display.

Registration Components

Registration components manage project registration and application workflows.

Allocation Components

Allocation components handle token transfers and distribution.

Token Components

Token components provide utilities for working with ERC20 tokens.

Component Documentation

PoolForm

Creates a new grant pool with configuration options.

Props:

• strategies: Strategy[] - Available pool strategies
• tokens: Token[] - Available tokens for allocation/distribution
• defaultValues?: Partial<PoolSchema> - Pre-populated form values
• onSuccess?: (pool: string) => void - Callback when pool is created

Usage:

import { PoolForm } from "~/components/pool/pool-form";
 
export default function CreatePoolPage() {
  const strategies = [
    { id: "quadratic-funding", name: "Quadratic Funding" },
    { id: "direct-grants", name: "Direct Grants" }
  ];
  
  const tokens = [
    { symbol: "ETH", address: "0x...", decimals: 18 },
    { symbol: "USDC", address: "0x...", decimals: 6 }
  ];
 
  return (
    <PoolForm
      strategies={strategies}
      tokens={tokens}
      onSuccess={(poolAddress) => 
        router.push(`/pools/${poolAddress}`)
      }
    />
  );
}

PoolCard

Displays pool information in a card format with image, title, description, and matching funds.

Props:

• ...pool: Pool - Pool data spread as props
• isLoading?: boolean - Show loading state

Usage:

import { PoolCard } from "~/components/pool/pool-card";
 
export default function PoolsPage() {
  const { data: pools } = usePools();
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {pools?.items.map(pool => (
        <PoolCard key={pool.address} {...pool} />
      ))}
    </div>
  );
}

PoolDashboard

Administrative dashboard for pool owners to manage their pools.

Features:

• Pool configuration
• Application review
• Fund management
• Distribution controls

RegistrationForm

Form for projects to register or apply to pools.

Props:

• poolAddress: Address - Pool to register with
• defaultValues?: Partial<RegistrationSchema> - Pre-populated values
• onSuccess?: (value: { project: string }) => void - Success callback

Usage:

import { RegistrationForm } from "~/components/registration/registration-form";
 
export default function RegisterPage() {
  const { poolAddress } = useParams();
  
  return (
    <RegistrationForm
      poolAddress={poolAddress}
      onSuccess={({ project }) => 
        router.push(`/projects/${project}`)
      }
    />
  );
}

ApplicationsList

Displays pending applications with approve/reject functionality.

Props:

• query: IndexerQuery - GraphQL query for filtering applications

Usage:

import { ApplicationsList } from "~/components/registration/applications-list";
 
export default function AdminPage() {
  return (
    <ApplicationsList
      query={{
        where: {
          pool_in: [poolAddress],
          status: "pending"
        }
      }}
    />
  );
}

RegistrationsList

Shows registered projects in a grid layout.

Props:

• query: IndexerQuery - GraphQL query for filtering registrations

ApproveButton

Button component for approving/rejecting project applications.

Props:

• registrationId: string - ID of registration to review
• onSuccess?: () => void - Success callback

AllocationForm

Form for allocating tokens to projects (uses shopping cart).

Usage:

import { AllocationForm } from "~/components/allocation/allocation-form";
 
export default function CheckoutPage() {
  return <AllocationForm />;
}

Features:

• Shopping cart integration
• Batch allocations
• Token allowance checking
• Balance validation

AllocationsTable

Table displaying token allocation history.

Props:

• query: IndexerQuery - GraphQL query for filtering allocations

Usage:

import { AllocationsTable } from "~/components/allocation/allocations-table";
 
export default function ProjectPage() {
  const { projectAddress } = useParams();
  
  return (
    <AllocationsTable
      query={{
        where: {
          to: projectAddress
        }
      }}
    />
  );
}

DistributeButton

Button for pool owners to distribute matching funds.

Features:

• Admin-only access
• Distribution calculations
• Batch distributions

MatchingFunds

Component showing matching fund pool status and management.

Features:

• Current matching fund balance
• Add/withdraw matching funds
• Distribution history

AllowanceCheck

Wrapper component that checks and requests token allowances before executing operations.

Props:

• children: ReactNode - Component to render when allowance is sufficient
• amount?: bigint | number - Required allowance amount
• tokenAddress: Address - Token contract address
• spenderAddress: Address - Contract that needs allowance

Usage:

import { AllowanceCheck } from "~/components/token/allowance-check";
 
export function DonateButton() {
  return (
    <AllowanceCheck
      amount={donationAmount}
      tokenAddress={tokenAddress}
      spenderAddress={poolAddress}
    >
      <Button onClick={donate}>
        Donate {amount} USDC
      </Button>
    </AllowanceCheck>
  );
}

BalanceCheck

Wrapper component that checks native token (ETH) balance before executing transactions.

Props:

• children: ReactNode - Component to render when balance is sufficient
• amount?: bigint - Required native token amount

Usage:

import { BalanceCheck } from "~/components/token/balance-check";
 
export function TransactionButton() {
  return (
    <BalanceCheck amount={parseEther("0.01")}>
      <Button onClick={executeTransaction}>
        Execute Transaction
      </Button>
    </BalanceCheck>
  );
}

TokenAmount

Formats and displays token amounts with proper decimals and symbol.

Props:

• amount: number | bigint - Token amount to display
• token: Address - Token contract address
• hideSymbol?: boolean - Hide token symbol

Usage:

import { TokenAmount } from "~/components/token/token-amount";
 
export function BalanceDisplay() {
  return (
    <div>
      Balance: <TokenAmount amount={balance} token={tokenAddress} />
    </div>
  );
}

Utility Components

Grid

Generic grid component for displaying lists of items with loading and error states.

Props:

• data: T[] - Array of items to display
• renderItem: (item: T) => ReactNode - Function to render each item
• columns?: number[] - Responsive column configuration
• isPending?: boolean - Show loading state
• error?: Error - Display error state

EmptyState

Component for displaying empty states with optional call-to-action.

ErrorMessage

Component for displaying error messages with consistent styling.

ImageUpload

File upload component with drag-and-drop support and IPFS integration.

NetworkSelector

Component for switching between different blockchain networks.

BackgroundImage

Image component with fallback support and optimized loading.

ConnectButton

Wallet connection button with network and account display.

Hooks

useCart

Shopping cart functionality for managing selected projects.

const cart = useCart();
cart.add(projectAddress, poolAddress); // Add to cart
cart.remove(projectAddress, poolAddress); // Remove from cart
cart.clear(); // Clear cart

useToken

Hook for fetching token information and balances.

const { data: token } = useToken(tokenAddress, accountAddress);
// Returns: { symbol, decimals, balance }

useAllocate

Hook for allocating tokens to projects.

const allocate = useAllocate();
allocate.mutate({
  recipients: [projectAddress],
  amounts: [amount],
  token: tokenAddress
});

useRegister

Hook for registering projects with pools.

const register = useRegister(poolAddress);
register.mutate([projectAddress, metadataUri, data]);