You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 16, 2026. It is now read-only.
Add a new frontend component to allow authenticated users to manually override the latest evaluation for a DAO proposal by setting the vote (Yes or No) for a specific wallet. This will directly update the recommendation field in the evaluations table in Supabase for the user's latest evaluation, ensuring that when the vote is auto-scheduled, it reflects the manual override. The component will use the Supabase JavaScript client for authentication and direct database updates, leveraging React with Tailwind CSS for styling and a CDN-hosted React setup.
Requirements
System Overview
Objective: Enable authenticated users to modify the latest evaluation for a proposal by setting the vote (Yes/No) for a specific wallet, updating the evaluations table directly via Supabase.
Scope: Create a ProposalEvaluationOverride component to query and update the evaluations table using the Supabase client, integrating with AIBTC_SUPABASE_URL for authentication and data access, and display confirmation or error messages.
Compatibility: Ensure integration with the backend's Supabase-based DAO proposal system and LangGraph-based evaluation workflow.
Features:
UI form to select a proposal, wallet, and vote (Yes/No) for authenticated users.
Update the recommendation field of the latest evaluation (highest revision) for the selected proposal_id, dao, and wallet_id in the evaluations table.
Display confirmation or error messages for the override action.
Securely manage Supabase authentication and database access.
Technical Requirements
Frontend Framework:
Use React (CDN-hosted via cdn.jsdelivr.net, e.g., react, react-dom).
Use JSX for component rendering, compiled with Babel.
Apply Tailwind CSS for styling, included via CDN.
Supabase Integration:
Use the Supabase JavaScript client (@supabase/supabase-js) for authentication and direct database access.
Authenticate users and retrieve the Supabase access token from the session.
Query the evaluations table to find the latest evaluation (max(revision)) for a given proposal_id, dao, and wallet_id.
Update the recommendation field (to "Yes" or "No") for the matching evaluation.
Database Operations:
Query: SELECT * FROM evaluations WHERE proposal_id = :proposal_id AND dao = :dao AND wallet_id = :wallet_id ORDER BY revision DESC LIMIT 1.
Update: UPDATE evaluations SET recommendation = :recommendation, updated_at = NOW() WHERE id = :evaluation_id.
Ensure the user has permission to modify the evaluation (e.g., wallet_id is associated with the authenticated user).
UI Components:
Create a ProposalEvaluationOverride component:
Display a form with dropdowns for selecting proposal_id (from active proposals), wallet_id (from user-associated wallets), and a radio button or dropdown for vote (Yes/No).
Disable form for unauthenticated users or if no active proposals/wallets are available.
Show loading state during Supabase query and update.
Display success message on successful update (e.g., "Vote override set to {vote} for wallet {wallet_id}") or error message on failure (e.g., "Please log in", "No evaluation found").
Style with Tailwind CSS for responsiveness and consistency.
State Management:
Use React hooks (useState, useEffect) for managing form state, Supabase query/update responses, and loading/error states.
Use Supabase’s onAuthStateChange to monitor authentication state and retrieve the access token.
Fetch active proposals and user wallets from Supabase tables (proposals and a presumed wallets table or user metadata) to populate dropdowns.
Error Handling:
Display user-friendly error messages for failed operations (e.g., "You must be logged in to override evaluations", "No evaluation found for this wallet").
Handle authentication errors by prompting the user to log in via Supabase auth UI or redirect.
Handle cases where no evaluation exists (e.g., "No active evaluation found for this proposal and wallet").
Log errors to console for debugging, avoiding exposure of sensitive details like tokens.
Testing:
Test component rendering, Supabase integration, and form interactions with mock Supabase sessions and data.
Validate UI responsiveness across devices.
Ensure Supabase access token and database operations are secure and not exposed in client code.
Acceptance Criteria
ProposalEvaluationOverride component is implemented in React with JSX.
Form includes dropdowns for proposal_id, wallet_id, and a Yes/No vote selector, disabled for unauthenticated users.
Supabase client queries the latest evaluation (max(revision)) for proposal_id, dao, and wallet_id from evaluations table.
Supabase client updates the recommendation field to "Yes" or "No" for the latest evaluation.
Component verifies user permission to modify the evaluation (e.g., wallet_id matches user).
UI displays loading state during Supabase operations.
Successful update triggers success message (e.g., "Vote override set to Yes for wallet {wallet_id}").
Active proposals and user wallets are fetched from Supabase and displayed in dropdowns.
Unit tests validate component rendering, authentication, form interactions, and Supabase operations.
Integration tests confirm correct Supabase queries/updates and UI updates with mock sessions.
Application runs correctly with CDN-hosted React, Tailwind CSS, and Supabase client.
Tasks
Set up Supabase client (@supabase/supabase-js) with AIBTC_SUPABASE_URL and AIBTC_SUPABASE_ANON_KEY for authentication and database access.
Create a new React component (ProposalEvaluationOverride) with JSX.
Implement Supabase query to fetch the latest evaluation (max(revision)) for proposal_id, dao, and wallet_id from evaluations table.
Implement Supabase update to set recommendation to "Yes" or "No" for the matching evaluation.
Add form with dropdowns for proposal_id, wallet_id, and Yes/No vote selector, styled with Tailwind CSS, disabling for unauthenticated users.
Implement Supabase queries to fetch active proposals (proposals table, e.g., state IN ('evaluating', 'voting')) and user wallets (from wallets table or user metadata).
Implement state management with useState, useEffect, and Supabase’s onAuthStateChange for auth state, token retrieval, and form state.
Add error handling and user feedback for Supabase operations, including authentication errors.
Style component with Tailwind CSS for responsiveness.
Write unit tests for component rendering, authentication, form interactions, and Supabase operations.
Write integration tests with mock Supabase sessions and data.
Update documentation in README.md or docs/frontend.md with setup, authentication, and usage instructions.
Dependencies
CDN-hosted React and React DOM (cdn.jsdelivr.net).
CDN-hosted Tailwind CSS for styling.
Supabase JavaScript client (@supabase/supabase-js) for authentication and database access.
Supabase backend (AIBTC_SUPABASE_URL, AIBTC_SUPABASE_ANON_KEY) for evaluations, proposals, and wallet data.
Testing framework (e.g., Jest, React Testing Library) for unit and integration tests.
Additional Notes
Configure Supabase client with environment variables (e.g., VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY) in .env.local for development.
Use Supabase’s auth UI or custom login flow to handle user authentication, redirecting to login on authentication errors.
Ensure Supabase access token is not exposed in client code (e.g., avoid logging or storing in insecure state).
Fetch proposals with state in evaluating or voting to ensure only active proposals are shown.
Verify user ownership of wallet_id (e.g., via Supabase user
Description
Add a new frontend component to allow authenticated users to manually override the latest evaluation for a DAO proposal by setting the vote (Yes or No) for a specific wallet. This will directly update the
recommendationfield in theevaluationstable in Supabase for the user's latest evaluation, ensuring that when the vote is auto-scheduled, it reflects the manual override. The component will use the Supabase JavaScript client for authentication and direct database updates, leveraging React with Tailwind CSS for styling and a CDN-hosted React setup.Requirements
System Overview
evaluationstable directly via Supabase.ProposalEvaluationOverridecomponent to query and update theevaluationstable using the Supabase client, integrating withAIBTC_SUPABASE_URLfor authentication and data access, and display confirmation or error messages.recommendationfield of the latest evaluation (highestrevision) for the selectedproposal_id,dao, andwallet_idin theevaluationstable.Technical Requirements
cdn.jsdelivr.net, e.g.,react,react-dom).@supabase/supabase-js) for authentication and direct database access.evaluationstable to find the latest evaluation (max(revision)) for a givenproposal_id,dao, andwallet_id.recommendationfield (to "Yes" or "No") for the matching evaluation.SELECT * FROM evaluations WHERE proposal_id = :proposal_id AND dao = :dao AND wallet_id = :wallet_id ORDER BY revision DESC LIMIT 1.UPDATE evaluations SET recommendation = :recommendation, updated_at = NOW() WHERE id = :evaluation_id.wallet_idis associated with the authenticated user).ProposalEvaluationOverridecomponent:proposal_id(from active proposals),wallet_id(from user-associated wallets), and a radio button or dropdown forvote(Yes/No).useState,useEffect) for managing form state, Supabase query/update responses, and loading/error states.onAuthStateChangeto monitor authentication state and retrieve the access token.proposalsand a presumedwalletstable or user metadata) to populate dropdowns.Acceptance Criteria
ProposalEvaluationOverridecomponent is implemented in React with JSX.proposal_id,wallet_id, and a Yes/No vote selector, disabled for unauthenticated users.max(revision)) forproposal_id,dao, andwallet_idfromevaluationstable.recommendationfield to "Yes" or "No" for the latest evaluation.wallet_idmatches user).Tasks
@supabase/supabase-js) withAIBTC_SUPABASE_URLandAIBTC_SUPABASE_ANON_KEYfor authentication and database access.ProposalEvaluationOverride) with JSX.max(revision)) forproposal_id,dao, andwallet_idfromevaluationstable.recommendationto "Yes" or "No" for the matching evaluation.proposal_id,wallet_id, and Yes/No vote selector, styled with Tailwind CSS, disabling for unauthenticated users.proposalstable, e.g.,state IN ('evaluating', 'voting')) and user wallets (fromwalletstable or user metadata).useState,useEffect, and Supabase’sonAuthStateChangefor auth state, token retrieval, and form state.README.mdordocs/frontend.mdwith setup, authentication, and usage instructions.Dependencies
cdn.jsdelivr.net).@supabase/supabase-js) for authentication and database access.AIBTC_SUPABASE_URL,AIBTC_SUPABASE_ANON_KEY) forevaluations,proposals, and wallet data.Additional Notes
VITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY) in.env.localfor development.stateinevaluatingorvotingto ensure only active proposals are shown.wallet_id(e.g., via Supabase user