Examples

Learn by building real-world governance features with the SDK.

Sample DAO

These examples use a real DAO on Sepolia testnet:

Contract	Address
DAOGovernor	`0xf51C4b7b5AA34052B9C605A6BAf4DB8E844106B0`
DAOToken	`0xcfCff2dAad166cd75458E5F4Dd0c1F01c35D8d9C`
TimelockController	`0xe0E285CaD99C1667101539C09e5b684c0A7BfF18`

DAO ID: 11155111_0xf51C4b7b5AA34052B9C605A6BAf4DB8E844106B0

Project Setup

Create a new Vite + React project:

npm create vite@latest dao-dashboard -- --template react-ts
cd dao-dashboard
npm install
npm install daocafe-sdk @tanstack/react-query

Set up the QueryClient in src/main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import './index.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60, // 1 minute
      refetchOnWindowFocus: false,
    },
  },
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

DAO Dashboard

A complete dashboard showing DAO info, proposals, and voting power.

App Component

// src/App.tsx
import { DAOHeader } from './components/DAOHeader';
import { ProposalList } from './components/ProposalList';
import { TopHolders } from './components/TopHolders';

const DAO_ID = '11155111_0xf51C4b7b5AA34052B9C605A6BAf4DB8E844106B0';

function App() {
  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <DAOHeader daoId={DAO_ID} />
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '20px' }}>
        <ProposalList daoId={DAO_ID} />
        <TopHolders daoId={DAO_ID} />
      </div>
    </div>
  );
}

export default App;

DAO Header Component

// src/components/DAOHeader.tsx
import { useDAO } from 'daocafe-sdk';

interface Props {
  daoId: string;
}

export function DAOHeader({ daoId }: Props) {
  const { data: dao, isLoading } = useDAO(daoId);

  if (isLoading) {
    return <div>Loading DAO...</div>;
  }

  if (!dao) {
    return <div>DAO not found</div>;
  }

  return (
    <header style={{ marginBottom: '30px' }}>
      <h1 style={{ margin: 0 }}>{dao.name}</h1>
      <p style={{ color: '#666' }}>
        {dao.tokenSymbol} • {dao.proposalCount} proposals
      </p>
      
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(4, 1fr)', 
        gap: '15px',
        marginTop: '20px'
      }}>
        <StatCard label="Total Supply" value={formatNumber(dao.totalSupply)} />
        <StatCard label="Voting Delay" value={formatDuration(dao.votingDelay)} />
        <StatCard label="Voting Period" value={formatDuration(dao.votingPeriod)} />
        <StatCard label="Quorum" value={`${dao.quorumNumerator}%`} />
      </div>
    </header>
  );
}

function StatCard({ label, value }: { label: string; value: string }) {
  return (
    <div style={{ 
      background: '#f5f5f5', 
      padding: '15px', 
      borderRadius: '8px' 
    }}>
      <div style={{ fontSize: '12px', color: '#666' }}>{label}</div>
      <div style={{ fontSize: '18px', fontWeight: 'bold' }}>{value}</div>
    </div>
  );
}

function formatNumber(value: string): string {
  const num = BigInt(value) / BigInt(10 ** 18);
  return num.toLocaleString();
}

function formatDuration(seconds: string): string {
  const num = Number(seconds);
  const hours = Math.floor(num / 3600);
  const days = Math.floor(hours / 24);
  if (days > 0) return `${days}d`;
  if (hours > 0) return `${hours}h`;
  return `${Math.floor(num / 60)}m`;
}

Proposal List Component

// src/components/ProposalList.tsx
import { useProposalsByDAO } from 'daocafe-sdk';
import type { Proposal, ProposalState } from 'daocafe-sdk';

interface Props {
  daoId: string;
}

export function ProposalList({ daoId }: Props) {
  const { data, isLoading } = useProposalsByDAO(daoId, {
    limit: 10,
    orderBy: 'createdAt',
    orderDirection: 'desc',
  });

  if (isLoading) {
    return <div>Loading proposals...</div>;
  }

  return (
    <section>
      <h2>Proposals</h2>
      {data?.items.length === 0 ? (
        <p>No proposals yet</p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {data?.items.map(proposal => (
            <ProposalCard key={proposal.id} proposal={proposal} />
          ))}
        </ul>
      )}
    </section>
  );
}

function ProposalCard({ proposal }: { proposal: Proposal }) {
  const forVotes = BigInt(proposal.forVotes);
  const againstVotes = BigInt(proposal.againstVotes);
  const totalVotes = forVotes + againstVotes;
  const forPercent = totalVotes > 0 
    ? Number((forVotes * 100n) / totalVotes) 
    : 0;

  return (
    <li style={{ 
      background: '#fff', 
      border: '1px solid #eee',
      borderRadius: '8px',
      padding: '15px',
      marginBottom: '10px'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <h3 style={{ margin: 0, fontSize: '16px' }}>
          {proposal.description.slice(0, 60)}...
        </h3>
        <StateLabel state={proposal.state} />
      </div>
      
      <div style={{ marginTop: '10px' }}>
        <div style={{ 
          background: '#f0f0f0', 
          borderRadius: '4px', 
          overflow: 'hidden',
          height: '8px'
        }}>
          <div style={{ 
            background: '#22c55e', 
            width: `${forPercent}%`,
            height: '100%'
          }} />
        </div>
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between',
          fontSize: '12px',
          marginTop: '5px'
        }}>
          <span style={{ color: '#22c55e' }}>For: {formatVotes(proposal.forVotes)}</span>
          <span style={{ color: '#ef4444' }}>Against: {formatVotes(proposal.againstVotes)}</span>
        </div>
      </div>
    </li>
  );
}

function StateLabel({ state }: { state: ProposalState }) {
  const colors: Record<ProposalState, string> = {
    PENDING: '#f59e0b',
    ACTIVE: '#3b82f6',
    CANCELED: '#6b7280',
    DEFEATED: '#ef4444',
    SUCCEEDED: '#22c55e',
    QUEUED: '#8b5cf6',
    EXPIRED: '#6b7280',
    EXECUTED: '#22c55e',
  };

  return (
    <span style={{ 
      background: colors[state], 
      color: 'white',
      padding: '2px 8px',
      borderRadius: '4px',
      fontSize: '12px'
    }}>
      {state}
    </span>
  );
}

function formatVotes(value: string): string {
  const num = Number(BigInt(value) / BigInt(10 ** 18));
  return num.toLocaleString();
}

Top Holders Component

// src/components/TopHolders.tsx
import { useTokenHoldersByDAO } from 'daocafe-sdk';

interface Props {
  daoId: string;
}

export function TopHolders({ daoId }: Props) {
  const { data, isLoading } = useTokenHoldersByDAO(daoId, {
    limit: 10,
    orderBy: 'votes',
    orderDirection: 'desc',
  });

  if (isLoading) {
    return <div>Loading holders...</div>;
  }

  return (
    <section>
      <h2>Top Voters</h2>
      <ol style={{ paddingLeft: '20px' }}>
        {data?.items.map((holder, index) => (
          <li key={holder.id} style={{ marginBottom: '8px' }}>
            <code style={{ fontSize: '12px' }}>
              {holder.holder.slice(0, 6)}...{holder.holder.slice(-4)}
            </code>
            <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
              {formatVotes(holder.votes)} votes
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

function formatVotes(value: string): string {
  const num = Number(BigInt(value) / BigInt(10 ** 18));
  return num.toLocaleString();
}

A standalone widget showing active proposals across all DAOs.

// src/components/ActiveProposalsWidget.tsx
import { useActiveProposals } from 'daocafe-sdk';

export function ActiveProposalsWidget() {
  const { data, isLoading, error } = useActiveProposals({ limit: 5 });

  if (isLoading) {
    return (
      <div style={{ padding: '20px', textAlign: 'center' }}>
        Loading active proposals...
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ padding: '20px', color: 'red' }}>
        Error: {error.message}
      </div>
    );
  }

  if (!data?.items.length) {
    return (
      <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
        No active proposals at this time
      </div>
    );
  }

  return (
    <div style={{ 
      background: '#1a1a2e', 
      color: 'white',
      borderRadius: '12px',
      padding: '20px'
    }}>
      <h3 style={{ margin: '0 0 15px 0' }}>
        🗳️ Active Proposals ({data.items.length})
      </h3>
      
      {data.items.map(proposal => {
        const endsIn = getTimeUntil(proposal.voteEnd);
        
        return (
          <div 
            key={proposal.id}
            style={{ 
              background: 'rgba(255,255,255,0.1)',
              borderRadius: '8px',
              padding: '12px',
              marginBottom: '10px'
            }}
          >
            <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
              {proposal.description.slice(0, 50)}...
            </div>
            <div style={{ fontSize: '12px', color: '#aaa' }}>
              Ends {endsIn}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function getTimeUntil(timestamp: string): string {
  const endTime = Number(timestamp) * 1000;
  const now = Date.now();
  const diff = endTime - now;

  if (diff <= 0) return 'soon';

  const hours = Math.floor(diff / (1000 * 60 * 60));
  const days = Math.floor(hours / 24);

  if (days > 0) return `in ${days} day${days > 1 ? 's' : ''}`;
  if (hours > 0) return `in ${hours} hour${hours > 1 ? 's' : ''}`;
  return 'in less than an hour';
}

Voter Profile

Show a user’s voting history and power across all DAOs.

// src/components/VoterProfile.tsx
import { useVotesByVoter, useTokenHoldingsByAddress } from 'daocafe-sdk';

interface Props {
  address: string;
}

export function VoterProfile({ address }: Props) {
  const { data: votes } = useVotesByVoter(address, { limit: 20 });
  const { data: holdings } = useTokenHoldingsByAddress(address);

  const forVotes = votes?.items.filter(v => v.support === 'FOR').length ?? 0;
  const againstVotes = votes?.items.filter(v => v.support === 'AGAINST').length ?? 0;
  const abstainVotes = votes?.items.filter(v => v.support === 'ABSTAIN').length ?? 0;

  return (
    <div style={{ padding: '20px' }}>
      <h2>Voter Profile</h2>
      <p style={{ fontFamily: 'monospace' }}>{address}</p>

      <h3>Holdings</h3>
      {holdings?.items.length === 0 ? (
        <p>No token holdings</p>
      ) : (
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={{ textAlign: 'left', padding: '8px', borderBottom: '1px solid #eee' }}>DAO</th>
              <th style={{ textAlign: 'right', padding: '8px', borderBottom: '1px solid #eee' }}>Balance</th>
              <th style={{ textAlign: 'right', padding: '8px', borderBottom: '1px solid #eee' }}>Votes</th>
            </tr>
          </thead>
          <tbody>
            {holdings?.items.map(h => (
              <tr key={h.id}>
                <td style={{ padding: '8px' }}>{h.daoId.slice(0, 20)}...</td>
                <td style={{ textAlign: 'right', padding: '8px' }}>{formatTokens(h.balance)}</td>
                <td style={{ textAlign: 'right', padding: '8px' }}>{formatTokens(h.votes)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <h3>Voting History</h3>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '15px' }}>
        <div>
          <span style={{ color: '#22c55e', fontWeight: 'bold' }}>{forVotes}</span> For
        </div>
        <div>
          <span style={{ color: '#ef4444', fontWeight: 'bold' }}>{againstVotes}</span> Against
        </div>
        <div>
          <span style={{ color: '#6b7280', fontWeight: 'bold' }}>{abstainVotes}</span> Abstain
        </div>
      </div>

      {votes?.items.map(vote => (
        <div 
          key={vote.id}
          style={{ 
            padding: '10px',
            borderLeft: `3px solid ${
              vote.support === 'FOR' ? '#22c55e' : 
              vote.support === 'AGAINST' ? '#ef4444' : '#6b7280'
            }`,
            marginBottom: '8px',
            background: '#f9f9f9'
          }}
        >
          <div style={{ fontWeight: 'bold' }}>{vote.support}</div>
          <div style={{ fontSize: '12px', color: '#666' }}>
            {formatTokens(vote.weight)} votes
          </div>
          {vote.reason && (
            <div style={{ marginTop: '5px', fontStyle: 'italic' }}>
              "{vote.reason}"
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function formatTokens(value: string): string {
  const num = Number(BigInt(value) / BigInt(10 ** 18));
  return num.toLocaleString();
}

Node.js Script

Fetch and analyze DAO data from the command line:

// scripts/analyze-dao.ts
import { getDAO, getProposalsByDAO, getTokenHoldersByDAO } from 'daocafe-sdk';

const DAO_ID = '11155111_0xf51C4b7b5AA34052B9C605A6BAf4DB8E844106B0';

async function main() {
  console.log('Fetching DAO data...\n');

  // Get DAO info
  const dao = await getDAO(DAO_ID);
  if (!dao) {
    console.error('DAO not found');
    return;
  }

  console.log(`=== ${dao.name} ===`);
  console.log(`Token: ${dao.tokenSymbol}`);
  console.log(`Proposals: ${dao.proposalCount}`);
  console.log(`Voting Period: ${dao.votingPeriod} seconds`);
  console.log();

  // Get proposals
  const { items: proposals } = await getProposalsByDAO(DAO_ID, { limit: 5 });
  console.log('Recent Proposals:');
  proposals.forEach((p, i) => {
    console.log(`  ${i + 1}. [${p.state}] ${p.description.slice(0, 40)}...`);
  });
  console.log();

  // Get top holders
  const { items: holders } = await getTokenHoldersByDAO(DAO_ID, {
    orderBy: 'votes',
    orderDirection: 'desc',
    limit: 5,
  });
  console.log('Top Voters:');
  holders.forEach((h, i) => {
    const votes = Number(BigInt(h.votes) / BigInt(10 ** 18));
    console.log(`  ${i + 1}. ${h.holder.slice(0, 10)}... - ${votes.toLocaleString()} votes`);
  });
}

main().catch(console.error);

Run with:

npx tsx scripts/analyze-dao.ts

Getting Started

Indexer API

SDK

Examples

Examples

Sample DAO

Project Setup

DAO Dashboard

App Component

DAO Header Component

Proposal List Component

Top Holders Component

Active Proposals Widget

Voter Profile

Node.js Script

Getting Started

Indexer API

SDK

​Examples

​Sample DAO

​Project Setup

​DAO Dashboard

​App Component

​DAO Header Component

​Proposal List Component

​Top Holders Component

​Active Proposals Widget

​Voter Profile

​Node.js Script

Examples

Sample DAO

Project Setup

DAO Dashboard

App Component

DAO Header Component

Proposal List Component

Top Holders Component

Active Proposals Widget

Voter Profile

Node.js Script