Add Snapshot integration for community governance voting and proposal creation

[Copilot]

Integrates Snapshot to enable off-chain voting on community proposals outside LIPs and treasury funding, allowing orchestrators and delegators to express support or opposition to smaller governance changes and create new proposals directly in the Explorer.

Implementation

API Layer (lib/api/snapshot.ts)

• GraphQL queries to Snapshot Hub for proposals, votes, and voting power
• castSnapshotVote() wrapper around @snapshot-labs/snapshot.js SDK client
• createSnapshotProposal() function for creating new proposals via SDK

React Integration

• SWR hooks in hooks/useSwr.tsx: useSnapshotProposals(), useSnapshotProposal(), useSnapshotVotingPower(), useSnapshotHasVoted()
• Reuses existing treasury patterns for consistent UX

UI Components

• SnapshotProposalRow: List view with status badges (active/pending/closed)
• SnapshotVotingWidget: Vote breakdown percentages, time remaining, voting interface with optional reason field
• SnapshotVoteButton: Handles wallet client integration for vote submission

Pages

• /snapshots - Proposal list from configured Snapshot space with "Create Snapshot" button
• /snapshots/[proposal] - Detail view with markdown description, vote distribution, metadata card (voting system, dates, snapshot block)
• /snapshots/create-proposal - In-app form interface for creating proposals directly with fields for title, description (Markdown support), voting choices, start date, and end date

Navigation

• Added "Snapshots" link to main nav and drawer menu

Configuration

NEXT_PUBLIC_SNAPSHOT_SPACE=livepeer.eth

Example Usage

// Fetch proposals with state filtering
const { data: proposals } = useSnapshotProposals("active");

// Calculate voting power at snapshot block
const { data: votingPower } = useSnapshotVotingPower(
  address, 
  proposalId, 
  snapshot, 
  strategies
);

// Cast vote via SDK
await castSnapshotVote(walletClient, address, proposalId, choice, reason);

// Create new proposal via SDK
await createSnapshotProposal(walletClient, address, {
  title,
  body,
  choices,
  start,
  end
});

Dependencies

• @snapshot-labs/[email protected]: Official SDK for vote signing, submission, and proposal creation

• Fixes Snapshot Integration for Non-LIP/Treasury Governance #324

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Snapshot Integration for Non-LIP/Treasury Governance</issue_title>
<issue_description>Several ecosystems use Snapshot to gauge community sentiment on proposals that are not related to LIPs or treasury funding. We should integrate Snapshot.box into our explorer and Go client (outside scope) so that orchestrators and delegators can express support or opposition to smaller governance changes.

Requirements

• Display: Snapshots must be displayed cleanly and intuitively within the app. We can reuse the treasury page widgets.
• Interaction: Users should be able to read proposal details and cast their votes directly. We can reuse the treasury page voting widget.

Outside scope:

• Secure Signing: Orchestrators should be able to sign and vote through the Go client, avoiding the need to expose their wallets to a browser.</issue_description>

<agent_instructions>You can use the snapshot.box sdk to integrate this by duplicating the treasury page logic but now show snapshots from snapshot.box account and allow people to vote. </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Snapshot Integration for Non-LIP/Treasury Governance #324

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
explorer-arbitrum-one	Ready	Preview	Comment	Nov 15, 2025 7:00am

[rickstaa]

@copilot looks good some smaak changed. The snapshot stuff should go on its own folder similar to treasury and governance under pages to not bloat the already exciting governance page code. Additionally it should be called snapshots and it should have a crwTe snapshot button and page.

[Copilot]

@copilot looks good some smaak changed. The snapshot stuff should go on its own folder similar to treasury and governance under pages to not bloat the already exciting governance page code. Additional...

Done! I've refactored the implementation:

✅ Moved Snapshot pages to /snapshots directory (separate from the existing /voting governance pages)
✅ Changed navigation from "Community" to "Snapshots"
✅ Added "Create Proposal" button on the index page
✅ Created /snapshots/create-proposal page that links to Snapshot.org for proposal creation

Changes in commit 2504992.

[rickstaa]

@copilot You should use https://snapshot.box/#/s:feifeifly.eth which has a ts sdk. Meaning people should be able to create directly from the Explorer. Not have to go to website. Also button has to be named create snapshot

[Copilot]

@copilot You should use https://snapshot.box/#/s:feifeifly.eth which has a ts sdk. Meaning people should be able to create directly from the Explorer. Not have to go to website. Also button has to be ...

Done! I've updated the implementation to support in-app Snapshot creation:

✅ Changed button text to "Create Snapshot"
✅ Replaced external link with full in-app form interface
✅ Users can now create proposals directly in the Explorer without redirecting to external website
✅ Added createSnapshotProposal() API function using @snapshot-labs/snapshot.js SDK
✅ Form includes fields for title, description (Markdown), choices, start date, and end date
✅ Form validates inputs and requires wallet connection
✅ Shows success message and redirects to snapshots list after creation

The SDK (@snapshot-labs/snapshot.js) works with both snapshot.org and snapshot.box as they share the same backend hub.

Changes in commit 78d0d83.