Decentralized Futures Proposal: Polkadot Cloud - dApp UI Library and Platform

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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:

  1. Automate publishing on version bumps.
  2. Automate package directory by leveraging project structure and package metadata.
  3. Generate change-log reports on new version releases.
  4. Categorize user requests and feedback as issues are posted.
  5. 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.

@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.

23 Likes

Excellent write-up @wirednkod!

Although Nikos has already done a fantastic job explaining the concept and state of the project, I’d like to emphasise the critical need of delivering re-usable, commonly used dApp components for the ecosystem.

The two-pronged approach of:

  • Saving months development time relative to projects developing the components themselves.
  • Ease of implementation: plug-and-play assets and React components, with great documentation.

aim to solve the primary problems of code quality (tested, bug free, feature-complete), speed of rollout, and viability even for small teams, to help grow the Polkadot dApp space.

The structure of the packages and the current automation system (the builder, CI, etc) aim to solve the secondary problems that arise when we aim to meet the above goals. Having a robust, reliable and scalable library is only possible if we have this automated approach to package building, testing, and publishing.

Concerns like future JS framework support have also been thought out with the current structure, with @polkadot-cloud/react representing React JS components, that is decoupled from the core styles and static assets of the library.

Again, this has been a very well thought-out approach to shared components, with a lot of prototyping history behind it with its current integration with Polkadot Staking Dashboard and Polkadot Live - I hope the community like Polkadot Cloud & support the initiative.

Polkadot Cloud is also being supported in the Polkadot Staking Dashboard: Maintenance and Growth: Feb - Jul 2024 proposal - please vote Aye there to bolster Cloud’s chances of success.

2 Likes

I think this is a great proposal that will allow for the faster development of good, user-friendly dApps. This is greatly needed in the ecosystem and the success of the staking dashboard, that’s improved the staking experience of some many users in the last months, is a testimony to what can be achieved with the right tools.

2 Likes

I few months ago I express my concerns about the lack of initiatives around improving Frontend Development in this Forum: Frontend Development Experience.

Is amazing to see proposals like this one, I believe this has the potential to bring significant value for front end developers, and definitely will help to see more applications being build on Polkadot.

2 Likes

Thank you @michalis for the support. We are targeting on achieving same and better level of success as Staking Dashboard - and we are empowering it with the components of the library already

Thank you so much @AlexD10S for the support!

I’m personally very enthusiastic about this proposal, especially as it will make it easier to get started for front-end builders and help create a shared visual identity for Polkadot dapps like Material Design did for Android.

I’m also very interested about the polkadot-cloud/assets initiative that will help create an independent distribution hub for shared information such as RPC endpoints, bootnodes, project logos as an easy to consume NPM package. This would be a big improvements over the current state where we have disparate initiatives such as:

@wirednkod what do you think about creating a Polkadot Cloud Console app demonstrating the use of polkadot-cloud’s libraries. This could have some of the base features of the well-known polkadot-js-apps while being a good showcase of the library on a concrete use case.

1 Like

Thank you @pierre.besson for the feedback.
This is one of the ideas that the project holds and one of the reasons that it holds the name “cloud” (Gather all scattered info/data in one place);
We already have started working towards that direction - and is part of our proposal.
Our main “landing page” will be home for these kind of demos that you refer to (e.g. validators page) and we want to document among the way as much as we can, how each “block of the puzzle” works - making the life of builders easier;
Once again - thank you for your valuable feedback

Currently the web3 wallet extensions are supported on React only. I am using Angular, would love to see support for Angular also. Is this part of roadmap to support frameworks other than React?

Thank you @muddlebee .
Indeed part of the roadmap is to create the base and recipes in other famous frameworks as well (e.g Angular, Vue etc). This is the main reason why the package is called @polkadot-cloud/react. In the future we would like to have a relevant for e.g. @polkadot-cloud/angular etc

1 Like

hey @wirednkod

thank for you including Angular in future roadmap. Any timeline for making it angular compatible? We are building a project based on Angular, it will be super useful if this angular package is supported.

1 Like