-
Notifications
You must be signed in to change notification settings - Fork 0
/
context.txt
87 lines (63 loc) · 5.07 KB
/
context.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
CommunityActions Application Overview
Function:
CommunityActions is a web application designed to facilitate community governance, proposal creation, and voting within decentralized autonomous organizations (DAOs). It provides interfaces for managing creative teams, reading clubs, and development teams, with a focus on governance activities.
Structure:
The application is built using React and follows a component-based architecture. It utilizes XState for state management, particularly in governance-related features.
Key Dependencies (from package.json):
- React: ^18.3.1
- React Router: ^5.3.4
- XState: ^5.18.2
- @xstate/react: ^4.1.3
- Tailwind CSS (for styling)
Application Flow:
1. Users land on the main page (CommunityActionsWidget)
2. They can navigate to different sections: Creative Teams, Reading Clubs, Governance, and Development Teams
3. In the Governance section, users can view proposals, create new proposals, and vote on existing ones
Key Components and Files:
- src/App.js: Main application component and routing
- src/components/Governance/CommunityActionsWidget.jsx: Dashboard component
- src/components/Governance.jsx: Main governance component
- src/components/CreativeTeams.jsx: Creative teams management
- src/components/ReadingClubs.jsx: Reading clubs management
- src/components/DevelopmentTeams.jsx: Development teams management
- src/governanceMachine.js: XState machine for governance logic
- src/components/CreateProposal.js: Proposal creation component
- src/components/ProposalDetails.js: Proposal details view
- src/components/VotingForm.js: Voting interface
- src/components/ViewProposals.js: List of proposals
Integration Task:
We are integrating Charmverse API to replace our current mock data and enhance governance functionalities. This involves updating our components, state management, and adding new API service functions.
Charmverse API Documentation:
Please read the Charmverse API documentation at: https://charmverse.io/api-docs
GitHub Repository:
Our project repository is available at: https://github.com/PageDAO/gov
Additional Resources:
- XState Documentation: https://xstate.js.org/docs/
- React Router Documentation: https://reactrouter.com/web/guides/quick-start
When working on this project, please refer to the existing code structure and naming conventions. Ensure that all new code and modifications align with the current architecture and coding style.
Summary of Application Flow:
The application's routing is managed in src/App.js using React Router. The main route ("/") renders the CommunityActionsWidget component, which serves as the dashboard and entry point for users. From there, users can navigate to different sections of the application:
- /creative-teams: Renders the CreativeTeams component
- /reading-clubs: Renders the ReadingClubs component
- /governance: Renders the Governance component
- /development-teams: Renders the DevelopmentTeams component
Each of these components is located in the /components directory and handles its specific functionality. The Governance component, in particular, utilizes the governanceMachine for state management and renders sub-components like CreateProposal, ProposalDetails, and VotingForm based on the current state.
Charmverse Integration:
- src/contexts/CharmverseContext.js: React Context for managing Charmverse API state
- src/services/charmverseApi.js: Service functions for Charmverse API endpoints
- src/components/TestCharmverseIntegration.jsx: Test component demonstrating Charmverse API integration
The CharmverseContext provides a centralized way to manage Charmverse data and API calls throughout the application. The charmverseApi.js file contains functions for interacting with specific Charmverse API endpoints, with initial focus on the GET /api/proposals endpoint.
Charmverse Integration Updates:
The following components have been refactored to use CharmverseContext and Charmverse API:
- src/components/Governance.jsx: Now uses CharmverseContext for managing governance data and state.
- src/components/CreateProposal.js: Proposal creation now uses Charmverse API calls.
- src/components/ProposalDetails.js: Fetches and displays proposal details from Charmverse.
- src/components/VotingForm.js: Voting mechanism updated to use Charmverse API.
- src/components/ViewProposals.js: Fetches and displays proposals from Charmverse.
These components now handle asynchronous data fetching, including loading states and error handling. They maintain compatibility with the existing governanceMachine state management while leveraging Charmverse data and functionality.
Dynamic.xyz Integration:
The application will use Dynamic.xyz for user management and authentication. This integration will handle the login process and provide Ethereum address information to be used with Charmverse API calls. Key points:
- User authentication will be managed through Dynamic.xyz
- Ethereum addresses obtained from Dynamic.xyz will be used for Charmverse API authentication
- The login flow needs to be updated to incorporate Dynamic.xyz SDK
- CharmverseContext and API services will need to be modified to work with the new authentication flow