cardano-reactor: Accelerating React-based Cardano Development

[GENERAL] Name and surname of main applicant

Tolga Yaycı

[GENERAL] Are you delivering this project as an individual or as an entity (whether formally incorporated or not)

Individual

[GENERAL] Please specify how many months you expect your project to last (from 2-12 months)

5

[GENERAL] Please indicate if your proposal has been auto-translated into English from another language

No

[GENERAL] Summarize your solution to the problem (200-character limit including spaces)

cardano-reactor is a React library with hooks and components for wallet integration, transactions, and smart contract interactions. Simplifies Cardano development for React developers.

[GENERAL] Does your project have any dependencies on other organizations, technical or otherwise?

No

[GENERAL] If YES, please describe what the dependency is and why you believe it is essential for your project’s delivery. If NO, please write “No dependencies.”

No dependencies.

[GENERAL] Will your project’s output/s be fully open source?

Yes

[GENERAL] Please provide here more information on the open source status of your project outputs

The project will be fully open-source, available on GitHub under the MIT license, free to use, and open to contributions from developers through pull requests and issues.

[METADATA] Horizons

Developer Tools

[SOLUTION] Please describe your proposed solution

cardano-reactor is a comprehensive React library for Cardano development. It will be written in TypeScript, ensuring type safety and providing excellent developer experience. It provides a React-specific abstraction layer for interacting with the Cardano blockchain, offering developers a seamless experience when building decentralized applications. Here are the key technical components:

Wallet Integration:

• A useWallet hook that manages wallet connection state.
• A WalletProvider context for app-wide wallet state management
• Compatibility with various Cardano wallets through standardized interfaces.

Transaction Building:

• A useTransaction hook that abstracts the complexities of the eUTXO model.
• Direct interaction with Cardano node for transaction construction and submission.
• Implementation of optimistic updates for better UX during transaction confirmation.

Smart Contract Interactions:

• A useContract hook for Plutus script interactions.
• Type-safe interfaces for contract parameters and return values.
• Custom serialization and deserialization of contract data.

State Management:

• A useCardanoState hook for managing Cardano-related application state.
• Efficient caching mechanisms to reduce unnecessary network requests.
• Integration with React Query for data fetching and caching, with Cardano-specific data fetching.

Asset Management:

• A useAssets hook for handling native tokens and NFTs.
• Direct asset operations using Cardano node APIs.
• Utility functions for common asset management tasks.

Block Explorer Integration:

• A useExplorer hook for fetching on-chain data.
• Flexible architecture allowing integration with various Cardano explorers.
• Implementation of pagination and data normalization for explorer data.

Pre-built UI Components:

• : A customizable component for connecting to Cardano wallets.
• : For rendering ADA and native token balances.
• : A form component for building and submitting transactions.
• : A generic component for interacting with Plutus scripts.
• : For displaying and managing NFT collections.
• : A component for stake pool delegation and rewards tracking.
• : For embedding block explorer functionality in dApps.

Example Applications:

• Example applications (with Next.js) demonstrating how to integrate the cardano-reactor into a full-fledged dApps.

Extensive Documentation and Usage Examples:

• Comprehensive API reference for all hooks and components.
• Step-by-step tutorials for common use cases.

Performance Optimization:

• Utilization of React's useMemo and useCallback hooks for expensive computations.
• Use of web workers for heavy computational tasks to avoid blocking the main thread.

Testing Utilities:

• Helper functions for generating test wallets and transactions.
• A custom React Testing Library renderer with Cardano-specific queries.

[IMPACT] Please define the positive impact your project will have on the wider Cardano community

cardano-reactor will have a significant positive impact on the Cardano ecosystem:

• Accelerated Development: By providing ready-to-use React hooks and components, it will dramatically reduce development time for Cardano dApps.
• Increased Developer Adoption: Lowering the barrier to entry will attract more React developers to the Cardano ecosystem, increasing innovation and growth.
• Improved Code Quality: Standardized patterns and type-safe interactions will lead to more robust and maintainable Cardano applications.
• Enhanced User Experience: Simplified state management and optimized data fetching will result in more responsive and user-friendly dApps.
• Community Growth: As more developers adopt cardano-reactor, we expect to see a growing community of contributors and users, leading to continuous improvement and expansion of the library.
• Ecosystem Standardization: cardano-reactor could become a de facto standard for React-based Cardano development, promoting consistency across projects.
• Educational Resource: The library and its documentation will serve as a learning tool for frontend developers new to Cardano.

To measure impact, I will:

• Track GitHub stars, and clones through Github Insights.
• Monitor npm download statistics
• Track the number of projects using cardano-reactor using GitHub's dependency graph

I will share progress and findings in cardano-reactor documentation website.

[CAPABILITY & FEASIBILITY] What is your capability to deliver your project with high levels of trust and accountability? How do you intend to validate if your approach is feasible?

I have a proven track record of successfully completing projects while maintaining high levels of trust and accountability. I have extensive experience in React, with a strong understanding of Cardano ecosystem. Developed many React.js projects (especially Next.js) which can be seen in my Github.

I have also experience working with well-known protocols such as Arbitrum, Stellar, Internet Computer etc. showcasing my ability to handle multiple ecosystems and expertise. I have developed more than 10 projects for 7+ protocols which are well received by the communities and developers. All of these projects are open-source and available on my GitHub.

[PROJECT MILESTONES] What are the key milestones you need to achieve in order to complete your project successfully?

Core Features and Foundation

Milestone outputs:

• Project setup with TypeScript and React
• Implementation of wallet integration hooks and context
• Basic transaction building utilities
• Initial smart contract interaction hooks
• Preliminary state management solution
• Basic documentation and usage examples
• Initial set of pre-built UI components

Acceptance criteria:

• GitHub repository with initial codebase and CI/CD setup
• Successful wallet connection and balance retrieval demonstrated
• Basic ADA transfer transaction executed using the library
• Simple Plutus contract interaction implemented
• Documentation covers setup and basic usage
• At least 3 pre-built UI components functional

Evidence of milestone completion:

• Open-source code on GitHub
• Demo application showcasing wallet connection, and basic contract interaction
• Technical specification document
• The initial npm package published

Advanced Features and Optimization

Milestone outputs:

• Advanced transaction building (multi-asset, metadata)
• Comprehensive smart contract interaction hooks
• Asset management utilities
• Block explorer integration
• Performance optimizations and caching strategies
• Advanced error handling and debugging utilities
• Expanded documentation and tutorials
• Complete set of pre-built UI components
• Example applications development

Acceptance criteria:

• Successful interaction with various Plutus script types
• Native token and NFT management demonstrated
• Block explorer data fetching and display implemented
• Comprehensive documentation covering all features
• Integration with at least 3 major Cardano wallets
• All planned UI components functional
• At least 2 example applications completed

Evidence of milestone completion:

• Updated open-source code on GitHub
• Expanded demo application showcasing new features
• Updated npm package with new features
• Example applications repositories

Project Wrap-up

Milestone outputs:

• Project Close-out Report
• Demonstration Video
• Final Documentation Review

Acceptance criteria:

• Comprehensive project report detailing achievements, challenges, and future directions
• High-quality demonstration video showcasing library capabilities
• Complete and user-friendly documentation
• All example applications finalized

Evidence of milestone completion:

• Project Close-out Report document
• Demonstration video uploaded to a public platform (e.g., YouTube)
• Final version of documentation published
• All code and examples available on GitHub

[RESOURCES] Who is in the project team and what are their roles?

Tolga Yaycı - Software Developer

A full-stack developer with three years of experience, Tolga holds a degree in Computer Science. He has created several Web3 applications and developed complex React and Next.js projects, demonstrating his ability to build robust web and desktop applications. Tolga is currently a contractor for ApeWorX.

Have 10+ grantee projects for more than 7 protocols such as Arbitrum, Internet Computer, and Stellar.

• LinkedIn: https://www.linkedin.com/in/tolgayayci/
• GitHub: https://github.com/tolgayayci

Notable grantee projects include:

• Sora (Soroban CLI GUI) - https://github.com/tolgayayci/sora
• Arbitrum Stylus VS Code Extension - https://github.com/tolgayayci/stylus-vscode-extension
• dfx GUI for dfx-cli - https://github.com/tolgayayci/dfx-dashboard

[BUDGET & COSTS] Please provide a cost breakdown of the proposed work and resources

Developer Compensation: Compensation for the my time spent on designing, developing, testing, and launching cardano-reactor.

• Amount: 50,000 ADA
• Details: This covers full-time development work at a rate of 10,000 ADA per month for 5 months.

Maintenance and Support: Ongoing maintenance and user support for the project for 12 months following the development period.

• Amount: 15,000 ADA
• Details: This will cover activities such as updating the sdk to keep it compatible with new versions of react of Cardano changes. It also covers fixing any bugs that arise, and providing user support via forums and direct communications.

[VALUE FOR MONEY] How does the cost of the project represent value for money for the Cardano ecosystem?

cardano-reactor offers excellent value for money to the Cardano ecosystem:

• Accelerates dApp development, reducing time-to-market, and faster development for Cardano projects.
• Lowers the entry barrier for React developers, potentially expanding the Cardano developer base, driving growth.
• Improves code quality and standardization across Cardano projects, reducing long-term costs associated with bugs.
• Serves as an educational resource for new Cardano developers, especially in frontend devs.
• Saving significant development time across multiple projects with pre-built UI components.
• Provides a foundation for future Cardano React projects, saving duplicate effort.
• Enhances Cardano's competitiveness in attracting web developers.
• Offers long-term value as an open-source, community-maintained resource.

The cost of the project is aligned with the typical costs associated with software development in the ecosystem, ensuring that the budget reflects the standard rates for skilled developers. The budget translates to about $4,400 per month for the 5-month development period, or roughly $27/hour for full-time work. This rate is highly competitive for specialized blockchain development, especially considering the unique combination of Cardano and React expertise required.