Yepple - React/Next.js Wallet Connector for Mainstream Adoption

[GENERAL] Name and surname of main applicant

Nicholas Fekete

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

Entity (Incorporated)

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

4

[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)

We will open-source a React/Next.js wallet connection library with a direct focus on developer and user experience (DX & UX) to make Cardano adoption trivial for web developers around the world.

[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

This project and all associated deliverables will be open sourced with an MIT License.

Our modular open source developer tooling will be open source and free to use with a focus on portability, transparency, and community collaboration within all components of the solution. Our goal is for the deliverables of this project to serve as a backbone to the current and future needs of many Cardano developers as it evolves during and after the scope of this proposal.

[METADATA] Horizons

Developer Tools

[SOLUTION] Please describe your proposed solution

At Yepple, we’ve observed that essentially all project owners in the Cardano ecosystem have a use case for allowing wallet interactions on their website but do not have the resources to enable wallet connection with a positive user experience. Often, they resort to seeking our help because managing message signatures, transaction building, stake pool delegation, and reactive asset ownership tracking proves too costly, complex, and error-prone. The CIP-30 standard enables a consistent way for websites to send commands to Cardano wallets, however it does not have any bearing on the UI, UX, or DX (developer experience) when implementing it. Over the past few years, our team has obtained a solid understanding of which wallet data and actions are common and crucial to business use cases. While several companies on Cardano have released tools to make the process of wallet connection a bit easier, we have not seen any feature-complete solutions that cover the most essential use cases, and we have especially not seen any solutions that focus on having dynamic and customizable UI/UX options out of the box for developers. Perhaps even more importantly, we have not seen any of these solutions specifically targeted at React/Next.js, the most popular website development framework in the world according to Statista and Stack Overflow surveys for 2023/2024.

Our open-source wallet solution tackles all of these problems head-on, giving React/Next.js developers a turnkey solution for implementing Cardano wallet connection. Using the concept of Providers and Contexts (common React features), we will provide developers with a suite of organized wallet state (another React feature) that can be used to respond to any and all wallet changes in a responsive manner that provides a user experience that is intuitive and can provide feedback in every situation. The library will also feature many actions (like those described in the paragraph above for the most critical wallet functions), each of which will drive state changes for a highly reactive experience. There will no longer be a need for developers to repeatedly query the wallet for updates in an inefficient and delayed process. State updates will be instant based on wallet actions performed on the website. We will also include multiple React components, each with its own configurations, for placing UI/UX-friendly elements on the website where users can connect and utilize their wallets. This will not only include components for the wallet connecting itself, but also for all of the common actions such as message signing, transaction building, and stake pool delegating. These components will be responsive, meaning that they will work well on any device and any screen size.

With all of these pieces put together, any developer familiar with React/Next.js (which is the majority of web developers) will be able to implement Cardano’s CIP-30 standard, support wallet connection with an intuitive UI, and allow users to sign messages, log in with a wallet, submit transactions, delegate to stake pools, view their assets, and more – all within minutes!

Demonstrating Impact:

We will track the adoption of our solutions through direct feedback, tool usage metrics, and success stories from project owners who utilize our wallet connection library. This will allow us to continuously refine our offerings and provide tangible evidence of our impact on the ecosystem.

Uniqueness and Benefits:

What sets our solution apart is its proven track record (our proprietary implementation is being used in all of our modern hosted services such as minting and staking), ease of integration, support for customization, and its targeted approach at React/Next.js, which allows us to cater to the exact needs of developers in these frameworks. By democratizing access to a high-quality Cardano wallet connector, we are providing a direct reduction in onboarding friction, supporting independent developers, and ensuring a smooth and improved experience for all Cardano users across the dApps that they use.

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

Our project will serve as a fundamental building block to dApp development on Cardano, significantly enhancing the number of developers that can be easily onboarded to the Cardano ecosystem. By open-sourcing this wallet connection library, we will empower developers across the globe to implement Cardano into new and existing websites using a free and reliable tool. By targeting the most popular website development framework, we will attract the largest developer base possible. This not only drives innovation within the Cardano community but also attracts new users and developers to the platform, strengthening its position in the competitive blockchain space. Having this solution available will also set a new standard of UI/UX for Cardano, where unfortunately many dApp developers are currently unable to prioritize user experience in their dApps due to a lack of resources. This will boost the reputation of Cardano from the community’s perspective and accelerate the speed at which projects are able to launch their products.

We will measure the impact of our project through several key metrics:

1. Adoption Rate: Tracking the number of projects and users adopting our wallet connection library.
2. Community Contributions: Monitoring updates and enhancements made by the community to the open-source code.
3. Cost Savings: Calculating the average cost savings for projects using our tool compared to the redundant in-house development currently required, as these cost savings are now going directly back to the community in the form of increased project success.

To ensure wide distribution and engagement, our outputs will consist of:

• A GitHub repository hosting the complete source code
• Comprehensive documentation of how to use and get the most value out of this comprehensive wallet connection library, including using `Providers`, `Contexts`, wallet `state`, and wallet actions.
• Advice, insights, and guides on the best practices surrounding common wallet connection use-cases, gained from several years of experience of dApp development.

[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?

Yepple has a strong track record of delivering high-quality blockchain solutions since February 2021. Having successfully managed over 200 projects on the Cardano platform over the past three years, we have not only mastered the technology relevant to this proposal but also gained countless invaluable insights into the specific needs of creators of NFT projects and fungible tokens (CNTs). Our team is composed of seasoned blockchain developers, project managers, and strategists who are deeply knowledgeable about the Cardano ecosystem. This experience positions us uniquely to deliver this project with high levels of expertise, trust, and accountability. Several of the projects we have worked with, and the work that we performed for them, can be found on the “contributions” link attached to this proposal. We are also registered as a DRep for Cardano, further showcasing our commitment and dedication to this blockchain.

All of the services that we have provided to clients over the years have involved wallet connection in some form. Whether it is signing messages for token/NFT staking registration and DAO voting, submitting transactions for mint payments or rewards claiming, or reading assets to display project-specific collection data, wallet connection is the key to making all of our dApps possible. Through the years, we have learned the pain points of developing wallet interactions using CIP-30, particularly when it comes to having a responsive webpage that adapts to changes to the wallet (e.g. connection status, available assets, etc.). We have also paid close attention to user feedback of our own UI/UX as well as feedback to other applications, giving us a very strong understanding of the different ideal user flows for different types of applications. Working primarily with React/Next.js throughout our years of operation, we see a large gap in the open-source Cardano community in this area. We are confident that taking everything we have learned and built, and further preparing it for mainstream usage and open-source development, will produce a product that the Cardano community can be proud to share for onboarding new developers and for improving the experience of current developers.

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

Milestone 1 (Planning & Technical Design): 

• Outputs: Scope of work, design, and other associated planning documents for all technical aspects of the proposal. Importantly, this includes documentation, particularly documentation of the exposed wallet states and actions available to developers through the library.
• Acceptance Criteria: The designs and documentation provide a clear preliminary understanding of how a project owner can set up and run their own Cardano token (NFT & FT) airdrop. The documentation elaborates on the solution to all high-level technical requirements in this proposal and aligns with the future milestones of this proposal.
• Evidence: Documentation in a public GitHub repository (alongside the future codebase) detailing the planned method of interacting with the finished product.

Milestone 2 (Product Development): 

• Outputs: A product encompassing every technical feature and all functionality detailed in this proposal. This includes a publicly hosted GitHub repository as well as a public NPM package available for instantly adding the wallet connection library as a dependency to React/Next.js projects. The library will feature all necessary states and actions as described, will be compatible with all CIP-30 wallets, and will be fully compatible with modern React/Next.js projects out of the box. A demonstration video will be provided to show the successful operation of the library in a simple Next.js application.
• Acceptance Criteria: Product development meets all technical requirements described in this proposal. Both a GitHub repository and associated NPM package are publicly available and work as expected when added to a React/Next.js project. The demonstration video shows successful loading and operation of the library in a Next.js application.
• Evidence: The GitHub repository codebase, associated NPM package, and demonstration video will serve as evidence of the completed product development and its effectiveness as a deployed solution. 

Milestone 3 (Technical Documentation, User Instructions, & Community Support): 

• Outputs: Codebase documentation and enhanced user documentation. The codebase documentation will increase the ability for developers to understand and contribute to future versions of the codebase, increasing long-term sustainability. With the product in place, the enhanced user documentation will provide project owners with a complete instruction manual for integrating the library into their own websites using the current version of the codebase at this stage.
• Acceptance Criteria: There is sufficient documentation within the code and alongside the GitHub repository to meet open source best practices and assist in the community’s ability to build and iterate on the solution. Yepple is available through Discord to accept and respond to all community feedback and questions. Any issues or feature requests mentioned through GitHub or Discord have been documented and considered for feasibility; if feasible within the scope of this proposal, the features were added for an improved experience.
• Evidence: The project structure and modules have their purposes all clearly explained in the repository documentation. All critical components of the code have appropriate documentation for classes, methods, and other key logic. Responses to GitHub Issues within the repository. A channel in Yepple’s official Discord dedicated to feedback on our open source development where the Yepple team is responsive to questions and comments.

Milestone 4 (Close-Out Report & Video): 

• Outputs: Comprehensive project report detailing the development process, community impact, and future directions. A professional video showcasing the project's journey and final product.
• Acceptance Criteria: The report and video must comprehensively cover all aspects of the project, demonstrating the success and community benefit.
• Evidence: Final project close-out report and a video link shared with the community through Discord, social media, and potentially additional locations.

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

Nicholas Fekete - CEO/Management - https://www.linkedin.com/in/nicholas-fekete/

Since founding Yepple and leading the team from day 1, Nicholas has driven progress and overseen project management across all internal and external projects that we have completed within Cardano and for our clients. With more than 5 years of experience as a startup founder, Nicholas has a fundamental understanding of how to run a cost-efficient company with values and quality that his team and our clients can be proud of.

Jake Shearman - CTO/Fullstack Blockchain Developer - https://www.linkedin.com/in/jake-shearman/

Handling the trinity of design, development, and documentation, Jake has led Yepple’s development team across the finish line for all development projects. With a formal computer science education, a work history in FinTech, and many years as a hobby blockchain developer that eventually turned into a career, Jake has been learning about and building on Cardano since before the very first Plutus Pioneer Program that he was a part of. He has remained committed to Cardano ever since, and is looking forward to improving and open sourcing many of the developer tools that he has built.

Dominic Monette - Developer/Quality Assurance

We take great pride in our quality, and we owe much of that quality to Dominic’s contributions as a developer, operations manager, and product quality assurance engineer.

Tyler McVety - DevOps/Blockchain Developer

Working behind the scenes, the server infrastructure set up by Tyler is what has allowed Yepple’s hosted solutions (stake pools, mints, CNT/NFT staking, and custom dApp transaction processing) to remain reliable and efficient.

Campurean Alexandru (Sic) - Marketing

As one of our most valuable connections to the Cardano community, Sic is a core community member of countless CNT/CNFT projects. Not only is he crucial in spreading awareness of the solutions and tools that our team has created, but he also ensures that we are constantly aware and deeply considerate of the types of user experience and functionality Cardano community members are looking for. 

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

Design:

Detailed planning and technical design documentation to outline scope, configurations, and usability for React/Next.js developers.

Cost: 15k ADA

Development:

Development of the feature-complete React Provider/Context as described throughout the proposal, allowing for reactive state management and all wallet actions as described.

Cost: 55k ADA

Development of the responsive React/Next.js components, providing turnkey solutions for all common use cases such as wallet connection, transaction signing/building, and asset displaying that works across devices of all sizes.

Cost: 20k ADA

Documentation: 

Creation of thorough codebase and user documentation to facilitate understanding, contribution, and practical use. Development of exhaustive examples showcasing all caveats and use-cases of the library.

Cost: 12k ADA

Management: 

Ongoing project oversight, ensuring alignment with technical specifications and milestone achievements.

Cost: 4k ADA

Marketing & Support: 

Community engagement and support via channels like Discord, including responsiveness to feedback and issues.

Cost: 4k ADA

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

Our proposed budget represents exceptional value for money for the Cardano ecosystem, reflecting more than three years of intensive development by our experienced team. This development has the potential to serve as a fundamental building block for all dApps, making it invaluable to the growth and evolution of Cardano projects, particularly when it comes to developer onboarding and user experience. The investment of 110k ADA in open-sourcing this wallet connect solution in a highly practical and accessible package is significantly lower than the industry costs of building a similar robust, efficient, responsive, and fully-functional wallet integration from scratch. In particular, when it comes to the quintessential aspect of user experience in a Web3 application, it is necessary to utilize technology that has been tested and refined relentlessly as our wallet integration has been with the hundreds of thousands of times users have connected their wallets to the dApps we host for our various clients. As a US-based company highly specialized in Cardano dApp development, especially when it comes to React/Next.js, CIP-30, and Cardano serialization, we are uniquely positioned to create a pivotal open-source product at this price point. We are not only offering the Cardano community access to our refined, bulletproof technology but also providing comprehensive documentation. This ensures that even those new to the space can quickly leverage our library to efficiently launch a dApp, thereby enhancing onboarding, adoption, innovation and participation within the Cardano ecosystem. The solutions we have provided for House of Titans, $BANK, Evolutions, Walkers, Salty Seagulls, Inmates, Hoarders, and many others have showcased the engagement and community morale that can be obtained through an intuitive dApp, which directly translates into value for the projects using the technology as well as the ecosystem and community as a whole.