Decentralized Futures Proposal: Polkadot Cloud
We are excited to present a proposal for the creation of a comprehensive library and automated platform designed to streamline the development and publishing of assets for Polkadot decentralized applications (DApps).
Polkadot Cloud is a library, hub and an automated platform for developing and publishing common-good assets for Polkadot DApps, with the goal to improve & expedite Polkadot UX throughout the ecosystem.
This initiative aims to address the current need for a unified and efficient solution to empower developers in the Polkadot ecosystem. By establishing a dedicated library, we intend to provide a repository of essential assets, such as shared UI components, specific-case reusable components (“recipes”) and standardized design elements, fostering a more straightforward and accelerated development process for DApps on the Polkadot ecosystem.
With W3F’s “Decentralized Futures” support, we envision this project significantly advancing the Polkadot DApp ecosystem, speeding up the development process for consumer-based DApps, and drastically reducing the time-to-market.
PoC Resources
Polkadot Cloud App (Beta) - Landing Page
Polkadot Cloud Library Source Code
Problems in Application-Side Polkadot
Polkadot Cloud fills a void in the Polkadot consumer dApp development space. We aim to resolve the following problems:
- DApp Scarcity: Users expressing dissatisfaction with the scarcity of DApps on Polkadot is a valid concern. By establishing a comprehensive component library and automated platform, we seek to catalyze the development of high-quality applications. This initiative aims to empower Parachain teams, traditionally focused on system development, with the necessary tools and resources to elevate the user experience in their applications.
- Expertise and Quality Gap: Recognizing the expertise and quality gap in end-user DApps developed by Parachain teams, our project aims to bridge this divide. The component library will serve as a knowledge repository, offering standardized UI components, best practices, and design elements. This will empower developers, regardless of their primary expertise, to create polished and user-friendly applications with battle-tested components out of the box.
- Lack of Comparative / Standardized UX Practices: Acknowledging the gap between Polkadot and Ethereum in terms of highly used, polished UI products, our project intends to elevate the quality of Polkadot DApps. The establishment of a central platform for front-end assets will contribute to closing this gap, fostering the creation of aesthetically pleasing and functionally robust applications.
- Standardized Flows: The varied implementation of flows across Polkadot DApps contributes to user confusion and raises the entry barrier. Our proposed library and platform seek to standardize these flows, providing a consistent and intuitive user experience across different applications. This standardization will enhance user comprehension and ease of interaction.
- Lack of Developer Discussion Hub: There is an absence of a designated space for Polkadot DApps developers to discuss components and conventions, provide solutions, and contribute with data and static assets of their own…
Solution: Polkadot Cloud Library
Our project aims to fill this void by creating a dedicated hub within the library platform. This collaborative space will encourage developers to share insights, best practices, and collectively contribute to the improvement of the Polkadot DApps development landscape.
Polkadot Cloud aims to achieve the following goals:
Be poised as a reliable and capable platform for components
For the community to take the library seriously, it must have all the above capabilities and execute them to a good standard. This in and of itself is another MVP goal - to have credibility in the eyes of developers.
Have a small collection of packages and components
The initial collection of components do not have to be ground-breaking, but need to demonstrate the capabilities of the library. Wallet icons, community resources, themes starting with networks, network information and projects themes (e.g. Polkadot [relay], Kusama, etc), and a couple of useful UI components.
Components should be built to React (as the most popular JS framework by far), but ideally should be able to be built for multiple frameworks. Having a PoC of multi-framework support would be a nice-to-have at MVP stage.
More components and examples will be added by applying the learnings of the initial package list.
Have a unique, recognisable brand
Just like Apple calls their chips names “Bionic” instead of “A14”, or their displays “Super Retina Pro-motion”, rather than a spec list, this library needs an attractive name that resonates with users, and that represents a unique and distinct product offering. A distinct icon also should be aimed for.
It should also not be called something that will step on the toes of other Polkadot DApps, or sound like it is enforcing its views on the Polkadot community. For example, a name of “Polkadot UI” inherently suggests it is the de-facto source of Polkadot UI in the space, which is simply not the case, and will annoy many of the Parachain teams who have worked on their own UI.
To that end, “Polkadot Cloud” is the current name for the hub/library. It is a neutral sounding name that gives the product room to grow into something that the community shapes.
Automated and CI driven, ensuring package integrity
The library must leverage CI/CD almost obsessively to automate package building, publishing, and maintenance. CI can:
- Automate publishing on version bumps.
- Automate package directory by leveraging project structure and package metadata.
- Generate change-log reports on new version releases.
- Categorize user requests and feedback as issues are posted.
- Carry out integrity checks on package / project structure.
Our PoC has already been designed to scale with 50 - 100 packages and beyond, and within the packages, we’ve established build tools to compile 1000s of components into NPM packages for distribution. This process relies heavily on our automation goals.
Ecosystem Fit
Market Needs
Our hypothesis is grounded in the recognition of a crucial need for quality UI, and simple means of constructing it through reusable components, accompanied with clear, accessible instructions.
The Polkadot Staking Dashboard has proven to be instrumental in laying the foundation for our proposed project, where many components have already been taken and abstracted into reusable components for our PoC.
Target Audience
Parachain app developers and the wider Polkadot application-side developer community.
Other applications within the ecosystem, such as Interlay (https://app.interlay.io/wallet), Moonbeam (Moonbeam Dapps), and Astar (https://portal.astar.network/astar/assets), have sought to emulate the design principles of the Polkadot Staking Dashboard. However, the outcomes of these attempts have been mixed, indicating an opportunity for improvement and standardization.
The above dApps adhere to the same app structure and layout, but Polkadot Cloud can also cater for completely different designs - it does not enforce a particular style or dApp template to adhere to.
Work Done So Far
In the past few months, we have built an MVP that is currently transitioning into its Beta version. We’ve deployed docs to accompany the library at http://polkadot.cloud.
One standout example within this MVP is the implementation of a reusable component designed for effortless integration with some of the most renowned web and hardware wallets, with the added features of read-only and proxy accounts.
The next sections will explore this reusable component library and its structure in more detail.
NPM Packages
The following diagram represents the package structure of Polkadot Cloud. Styles are packaged in a “core” package, separated from the JavaScript component package. This allows them to support an arbitrary number of JavaScript frameworks, each isolated in their own packages & build pipeline.
Static assets and utilities are a part of the library, existing as separate packages. Recipes exist one level up, hosting examples of how the library can be used by combining multiple assets and components together.
NPM Weekly Downloads
We are already seeing positive quantitative and qualitative signs in the market with the existing prototype work. NPM figures are showing activity for all Polkadot Cloud packages. The community seems very interested in the initiative and acknowledges the importance of it.
@polkadot-cloud/core: 2,155
@polkadot-cloud/utils: 2,202
@polkadot-cloud/assets: 2,323
@polkadot-cloud/react: 2,445
@polkadot-cloud/recipes: 1,025
PoC Package Structure
@polkadot-cloud/core: Core Styles & Themes
- Plug and play 2-dimensional themes, composed of CSS variables.
- Fonts are provided with theme templates.
- Hosts a library of styles for UI components that are implemented with
@polkadot-cloud/react.
The result of a future-forward approach that aims to cater to the diverse preferences and requirements of developers within the Polkadot ecosystem. Provides added flexibility to the product, by leveraging a core theme package that can be reused across different frameworks, fostering this way, a collaborative and inclusive environment for the creation of high-quality, cross-framework applications.
@polkadot-cloud/react: React JS Components
Functional React components for Polkadot DApps.
- Headless components provided as React context providers and hooks.
- Fully functional UI implementations of headless components.
- Useful UI components for Polkadot DApps.
We anticipate broadening the library’s compatibility to include additional frameworks, such as Vue and Svelte. Decision to extend framework support will depend on technology trends and market demand.
@polkadot-cloud/assets: Static Assets
Ecosystem data sources and static assets.
- A list of popular web3 extension wallets with metadata and their SVG icons. Supported wallets.
- A list of validator operators with metadata, and their SVG icons.
@polkadot-cloud/utils: Utilities
A collection of reusable base (manipulating string / number / arrays etc.) and
unit utilities (collection of reusable utilities for manipulating chain units).
Will eventually host many ecosystem-specific utilities.
@polkadot-cloud/recipes: Usage Examples
Additionally, our proposed library is designed to offer developers more than just UI components; it will also provide valuable examples for seamless integration with key elements of the Polkadot ecosystem.
This shall include comprehensive support for the Polkadot JS API, enabling developers to harness the full power of Polkadot’s JavaScript libraries. Moreover, these examples will be engineered to seamlessly integrate with the new Polkadot API, aligning with the latest advancements in the Polkadot network’s infrastructure.
Recognizing the importance of light client solutions, our examples will also support integration with light clients, emphasizing efficiency and responsiveness.
Documentation / Front Page App (https://polkadot.cloud)
Usage instructions need to be provided for each package and docs need to be easily maintained by contributors;
In a similar way that Material UI provides docs with markdown and embedded component demos, the library should also have markdown based documents with embedded demos of the components.
Such a setup would make doc editing simple (markdown only) so even external contributors can provide or update documents with ease.
By providing versatile and well-documented example code, we aim to empower developers to effortlessly integrate our UI components into their projects, fostering a more accessible and developer-friendly Polkadot ecosystem, but also contribute.
Feedback
We are getting ready to submit our proposal to the Decentralized Futures program and we, of course, value your insights and support. It would be great to hear your feedback, your opinion, to make us better and shape a more promising future for Polkadot dApps and ecosystem.
), what truly matters to me is preserving the essence of the original idea.