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.