誰でも入りやすくしたい

[hitalin]

• Snapshotの投票戦略でホワイトリスト制を採用している
• 新規加入者がいる場合、手動でホワイトリストに追加しなければならない
• Guild.xyzを使って投票権を付与する方法があるものの、もっと参加しやすくしたい

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Possible Duplicates

• SnapshotでMisskeyアカウント認証 #2

👤 Suggested Assignees

• hitalin

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Replace the manual whitelist-based voting strategy on Snapshot with an automated system that allows anyone to gain voting rights by joining Guild.xyz, eliminating the need for manual whitelist management and making participation more accessible.

Observations

This is a YAMI DAO marketing website built with Next.js 14 and React that serves as an informational hub for the DAO. Currently, the site has no authentication system, Web3 integrations, or backend API. It displays links to external services: Snapshot for voting (snapshot.org/#/s:yamidao.eth) and Guild.xyz for membership (guild.xyz/yamidao). The roadmap indicates plans to transition from whitelist-based voting to API-based strategies as part of Phase 2 development.

Assumptions

Assumption 1: Snapshot Voting Strategy Configuration

Options Considered:

• Configure Snapshot to use api-v2 strategy with Guild.xyz API endpoint (minimal website changes)
• Build Next.js API routes to serve as custom voting strategy endpoint
• Use Snapshot's built-in Guild.xyz strategy if available

Chosen Option: Build Next.js API routes to serve as custom voting strategy endpoint

Rationale: This approach provides the most control and aligns with the roadmap's transition to "API Strategy," while still being simple enough to implement on the current codebase. It also prepares the foundation for the Misskey authentication system mentioned in Phase 2 of the roadmap.

Assumption 2: User Experience Enhancement

Options Considered:

• Keep the site purely informational with updated instructions
• Add wallet connection to show real-time eligibility status
• Build a full onboarding flow with step-by-step guidance

Chosen Option: Add wallet connection to show real-time eligibility status

Rationale: This provides immediate feedback to users about their voting rights without requiring them to go to Snapshot, significantly improving the accessibility goal. It's a middle ground that enhances UX without overcomplicating the implementation.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Setup Infrastructure and Dependencies

Add Web3 capabilities and API infrastructure to support automated membership verification and provide real-time voting eligibility feedback to users.

Task 1: Add Required Dependencies

Install Web3 and API client libraries to enable wallet connection and external service integration.

• Add wagmi, viem, and @tanstack/react-query for Web3 wallet connection functionality
• Add Guild.xyz SDK or create API client utilities (check if guild.xyz npm package exists, otherwise use fetch)
• Update package.json with new dependencies and run installation

Task 2: Configure Web3 Provider

Setup wallet connection infrastructure to enable users to connect their Ethereum wallets.

• Create src/lib/wagmi-config.ts to configure wagmi with appropriate chains and connectors
• Update src/app/layout.tsx to wrap the application with WagmiProvider and QueryClientProvider
• Configure supported wallet connectors (MetaMask, WalletConnect, Coinbase Wallet at minimum)

🤖 Prompt for AI agents

Setup Web3 infrastructure by installing wagmi, viem, and react-query
dependencies to enable wallet connection functionality.

Install required Web3 packages: wagmi, viem, @tanstack/react-query, and
Guild.xyz SDK (or prepare to use fetch for Guild API)
Create wagmi configuration file at src/lib/wagmi-config.ts with chain and
connector setup
Wrap the application in src/app/layout.tsx with WagmiProvider and
QueryClientProvider
Configure wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet

Phase 2: Build Membership Verification API

Create backend API endpoints that verify Guild.xyz membership and return voting power for Snapshot's api-v2 strategy.

Task 1: Create Guild.xyz Integration Module

Build service layer to interact with Guild.xyz API and check membership status.

• Create src/lib/guild.ts with functions to check if an address is a member of guild.xyz/yamidao
• Implement checkMembership(address: string): Promise<boolean> using Guild.xyz API
• Add error handling and response caching (consider using Next.js cache or simple in-memory cache with TTL)
• Use Guild.xyz API endpoint (typically https://api.guild.xyz/v1/guild/{guildId}/members) to verify membership

Task 2: Implement Snapshot Voting Strategy API

Create Next.js API route that Snapshot will call to calculate voting power for addresses.

• Create src/app/api/snapshot-strategy/route.ts as the main voting strategy endpoint
• Implement GET/POST handler that receives addresses array from Snapshot
• For each address, call Guild.xyz integration to check membership status
• Return voting power as { [address: string]: number } where members get 1 and non-members get 0
• Follow Snapshot api-v2 strategy format requirements (addresses passed in query string or request body)
• Add rate limiting consideration (Snapshot will call this frequently during voting)

Task 3: Add Validation and Testing Endpoint

Create supplementary endpoints for testing and validation.

• Create src/app/api/check-eligibility/route.ts for individual address eligibility checks
• This endpoint will be used by the frontend to show real-time eligibility status
• Return JSON with { eligible: boolean, votingPower: number, guildMember: boolean }
• Consider adding optional metadata like Guild roles or join date

🤖 Prompt for AI agents

Build backend API infrastructure to verify Guild.xyz membership and provide
voting power data for Snapshot's api-v2 strategy.

Create Guild.xyz integration module at src/lib/guild.ts with checkMembership
function that queries Guild API
Implement Guild API calls to https://api.guild.xyz/v1/guild/{guildId}/members
with error handling and caching
Create Snapshot voting strategy endpoint at
src/app/api/snapshot-strategy/route.ts
Handle GET/POST requests with addresses array, check membership for each, return
voting power map
Create eligibility checking endpoint at src/app/api/check-eligibility/route.ts
for frontend status display
Return eligibility status with voting power and membership details in JSON
format

Phase 3: Build User-Facing Membership Status Features

Create UI components that show users their voting eligibility status and guide them through the joining process.

Task 1: Create Wallet Connection Component

Build reusable wallet connection UI that appears throughout the site.

• Create src/components/WalletConnect.tsx with connect/disconnect button
• Display connected address in truncated format (0x1234...5678)
• Show connection status and handle wallet switching
• Add to header/navigation in src/app/layout.tsx or create dedicated nav component

Task 2: Build Membership Status Checker

Create component that displays voting eligibility based on connected wallet.

• Create src/components/MembershipStatus.tsx that checks eligibility via /api/check-eligibility
• Show clear status indicators: "You have voting rights" or "Join Guild.xyz to vote"
• Display voting power and Guild membership status
• Add loading states and error handling for API calls
• Use React hooks (useAccount from wagmi, custom useMembershipStatus hook with react-query)

Task 3: Enhance Join Component with Dynamic Status

Update existing Join section to show personalized eligibility information.

• Modify src/components/Join.tsx to integrate MembershipStatus component
• Show dynamic messaging based on connection status (not connected, connected but not member, connected and member)
• Update Guild.xyz link to be more prominent for non-members
• Add call-to-action button that deep-links to guild.xyz/yamidao join page

Task 4: Update Governance Component

Enhance governance section to explain the new automated system.

• Modify src/components/Governance.tsx to describe the automated Guild.xyz-based voting system
• Replace references to manual whitelist with explanation of automated access
• Add MembershipStatus component to show real-time eligibility
• Update text to emphasize accessibility improvement

🤖 Prompt for AI agents

Build user-facing UI components that show voting eligibility status and guide
users through Guild.xyz membership.

Create WalletConnect component at src/components/WalletConnect.tsx with
connect/disconnect functionality
Display connected address in truncated format and handle wallet switching
Add wallet connection to header/navigation in layout
Create MembershipStatus component at src/components/MembershipStatus.tsx that
fetches eligibility from API
Show clear status messages with voting power and membership information
Implement loading and error states using wagmi hooks and react-query
Update Join component to integrate MembershipStatus with dynamic messaging
Add prominent Guild.xyz join link and call-to-action for non-members
Update Governance component to explain automated voting system and show
eligibility status

Phase 4: Configure Snapshot Space and Documentation

Update Snapshot space configuration to use the new API strategy and document the changes.

Task 1: Configure Snapshot Strategy

Update the yamidao.eth Snapshot space to use the custom API strategy.

• Access Snapshot space settings at snapshot.org/#/yamidao.eth/settings
• Add new voting strategy: select "api-v2" from strategy list
• Configure strategy parameters:
  • url: Your deployed API endpoint (https://yamidao-site.com/api/snapshot-strategy)
  • type: "api-get" or "api-post" depending on implementation
  • symbol: "MEMBER" or similar
• Test strategy using Snapshot's playground feature before deploying
• Consider keeping existing strategy temporarily for transition period, then remove after verification

Task 2: Update Documentation

Revise governance documentation to reflect the automated system.

• Update GOVERNANCE.md to explain Guild.xyz-based membership instead of whitelist
• Document the process: Join Guild.xyz → Automatic voting rights
• Add technical documentation about the API strategy for transparency
• Include troubleshooting section for common issues (wallet not connected, Guild.xyz membership not recognized)

Task 3: Add Environment Configuration

Setup environment variables and deployment configuration.

• Create .env.example with required variables:
  • GUILD_ID: The yamidao Guild ID
  • NEXT_PUBLIC_SNAPSHOT_SPACE: yamidao.eth
  • NEXT_PUBLIC_GUILD_URL: https://guild.xyz/yamidao
  • API rate limiting configuration if needed
• Document environment setup in README.md
• Configure production environment variables in deployment platform (Cloudflare Pages)

Task 4: Update Tests

Extend test suite to cover new functionality.

• Add tests for Guild.xyz integration module in src/lib/guild.test.ts
• Add API route tests for snapshot-strategy and check-eligibility endpoints
• Update component tests for Join.tsx and Governance.tsx to handle wallet connection states
• Add integration tests that mock Guild.xyz API responses

🤖 Prompt for AI agents

Configure Snapshot space with new API strategy and document the automated voting
system.

Access yamidao.eth Snapshot space settings and configure api-v2 voting strategy
Set API endpoint URL to deployed snapshot-strategy route with appropriate
parameters
Test strategy in Snapshot playground before full deployment
Update GOVERNANCE.md to document Guild.xyz-based membership and automated voting
access
Add troubleshooting guide for common wallet and membership issues
Create .env.example with GUILD_ID, NEXT_PUBLIC_SNAPSHOT_SPACE, and
NEXT_PUBLIC_GUILD_URL
Document environment setup in README.md and configure production variables
Add test coverage for Guild integration module, API routes, and updated
components
Create integration tests with mocked Guild.xyz API responses

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Setup Web3 infrastructure by installing wagmi, viem, and react-query
dependencies to enable wallet connection functionality.

Install required Web3 packages: wagmi, viem, @tanstack/react-query, and
Guild.xyz SDK (or prepare to use fetch for Guild API)
Create wagmi configuration file at src/lib/wagmi-config.ts with chain and
connector setup
Wrap the application in src/app/layout.tsx with WagmiProvider and
QueryClientProvider
Configure wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet
===============================================================================

Task: 2

Build backend API infrastructure to verify Guild.xyz membership and provide
voting power data for Snapshot's api-v2 strategy.

Create Guild.xyz integration module at src/lib/guild.ts with checkMembership
function that queries Guild API
Implement Guild API calls to https://api.guild.xyz/v1/guild/{guildId}/members
with error handling and caching
Create Snapshot voting strategy endpoint at
src/app/api/snapshot-strategy/route.ts
Handle GET/POST requests with addresses array, check membership for each, return
voting power map
Create eligibility checking endpoint at src/app/api/check-eligibility/route.ts
for frontend status display
Return eligibility status with voting power and membership details in JSON
format
===============================================================================

Task: 3

Build user-facing UI components that show voting eligibility status and guide
users through Guild.xyz membership.

Create WalletConnect component at src/components/WalletConnect.tsx with
connect/disconnect functionality
Display connected address in truncated format and handle wallet switching
Add wallet connection to header/navigation in layout
Create MembershipStatus component at src/components/MembershipStatus.tsx that
fetches eligibility from API
Show clear status messages with voting power and membership information
Implement loading and error states using wagmi hooks and react-query
Update Join component to integrate MembershipStatus with dynamic messaging
Add prominent Guild.xyz join link and call-to-action for non-members
Update Governance component to explain automated voting system and show
eligibility status
===============================================================================

Task: 4

Configure Snapshot space with new API strategy and document the automated voting
system.

Access yamidao.eth Snapshot space settings and configure api-v2 voting strategy
Set API endpoint URL to deployed snapshot-strategy route with appropriate
parameters
Test strategy in Snapshot playground before full deployment
Update GOVERNANCE.md to document Guild.xyz-based membership and automated voting
access
Add troubleshooting guide for common wallet and membership issues
Create .env.example with GUILD_ID, NEXT_PUBLIC_SNAPSHOT_SPACE, and
NEXT_PUBLIC_GUILD_URL
Document environment setup in README.md and configure production variables
Add test coverage for Guild integration module, API routes, and updated
components
Create integration tests with mocked Guild.xyz API responses

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!