Reactive DOT - A reactive library for building Substrate front-ends

Hey guys :wave:,

I’m Tien. Quick introduction about myself: I was previously a Talismani, but now I’m fully independent, wanting to contribute my knowledge toward benefiting the wider ecosystem, specifically for fellow builders like myself :construction_worker_man:‍.

Building front-end DApps is hard! Even more so in the case of Polkadot based on my experience. Hence, I’ve been hard at work designing a library to ease that friction, helping developers rapidly build out high-performance and maintainable FE applications, with the first version targeting React.

Now, after nearly a month of designing and building, I’ve got a very early alpha, yet usable, version of the library ready, of which I would like to share with you guys to gain valuable feedbacks.

Repository: GitHub - tien/reactive-dot: A reactive library for building Substrate front-ends
Documentation: https://reactivedot.dev/

I’ve also drafted a quick example showcasing how easy it is to set up a multichain DApp and start querying data/submitting transactions:

Can’t wait to hear what you guys think!

18 Likes

This is fantastic, @tien! Congratulations! :clap::clap:

As a library author, it’s incredibly rewarding to see other libraries thrive after our efforts. Please continue the great work! :muscle:

4 Likes

Wow! Thanks for your words of validation, @josep. I can’t stress enough how much weight they carry :pray:

2 Likes

That’s an amazing start with Reactive Dot, Tien!! Congrats for that👏🏻 I’d love to see this project move forward.

Having a library of dozens of hooks for lots of use case makes frontend dev so much more enjoyable! Just like wagmi. This has the potential to become the wagmi for Polkadot!

Similar to wagmi, it already has some great ways to read from the chain. I’d love to see comprehensive hooks for reading balances (like useBalance) or handling transaction receipts (like useWaitForTransactionReceipt). Especially creating txs and interacting with pallets would be incredible - your useMutation seems to be going in that direction, right?

Another cool feature would be support for connections to multiple chains at once, where you can specify which chain to interact with.

Overall great work, I’m already a fan. Can’t wait to see even more hooks! :hook:

3 Likes

@noahjoeris Thanks for kind words & the great suggestions! I’ll have a look at implementing them all :saluting_face:.

support for connections to multiple chains at once

This is actually already possible, just need to be added to the documentation :muscle:.

UPDATE:
Multichain documentation has been added: Multichain | Reactive DOT

3 Likes

“Reactive Dot” sounds like an amazing project! As a Substrate developer, I know firsthand how challenging it can be to build a wallet integration for a dApp. Having a standardized ‘plug-and-play’ wallet library like RainbowKit in the Polkadot ecosystem, built using Reactive Dot, would be incredible. The ease of integration and user experience improvements would be a game changer for our ecosystem. I’m excited to see how this evolves! :rocket:

1 Like

Thanks @vstam1 :pray:, I’ve actually built a small framework-agnostic UI wallet connector PoC:

Source: GitHub - tien/dot-connect: UI widgets for managing Polkadot wallet connections
Demo: https://dot-connect-demo.pages.dev

Just to demonstrate how something like that could be achieved with Reactive DOT.

1 Like

Thanks a lot! Are you considering making this a production-ready product?
This is something the Polkadot treasury could/should fund if you ask me.

1 Like

Hmm :thinking:, yes, that thought has crossed my mind. Thanks for your input! The main goal of this post was to gauge community interest and understand what people are interested in before overcommitting myself. In other words, I don’t want to be seen as a grifter, lol :))

1 Like

Wow I’m super impressed by your work and dedication. From a simple feedback (why not papi) you’ve jumped in and already delivered so much, including a great documentation!
It’s amazing to see motivated devs coming with a fresh mind of moving the status quo of front-end development, thank you so much for that. You should absolutely get some funding for it, and keep going, I’m looking forward to using ReDot, make tutorials, and help onboard new devs with it.

1 Like

Thank you @tbaut. I wouldn’t have gone through with it if it hadn’t been for your initial push and feedback :pray:.

Thanks for all the support and feedback, everyone! I have put forward a proposal here:

https://polkadot.polkassembly.io/referenda/948

I’m pumped and truly believe that: with this, along with many other initiatives that are happening right now, we can and will surpass other ecosystems in terms of developer experience. :muscle:

1 Like

This is an awesome initiative @tien, I’ve been longing for something like this for too long. Tools like useink or use-inkathon offer something similar but really limited for ink! dapps.

2 questions:

  • Any plans on expanding the hooks to support ink! contracts?
  • Do ReDot have adapters to plug and play with different JS clients? So developers can choose which JS clients they want to use (e.g: PAPI is one option, but Dedot is also another JS client that we’re currently building)

Thank you!

2 Likes

Thanks, @sinzii :smile:. Regarding the 2 questions:

  1. There’s a lot of noise around ink! right now, since it got spun out of Parity into a community owned project. I’m waiting for the dust to settle a bit, before committing to an implementation plan.
  2. I actually initially planned for Reactive DOT to support multiple adapters, starting with PAPI & PJS. But after some testing, I decided to just focus on one adapter first to be able to rapidly prototype different ideas. It’s definitely possible, though, and could be a focus again once the lib have gotten to a more stable state.

I have had a look at Dedot, really cool stuff and will keep an eye on it :eyes:

2 Likes

I’m waiting for the dust to settle a bit, before committing to an implementation plan.

Gotcha man! There’re a lot of teams that’re using ink! now so I think ink! will be in good hands. But let’s keep observing :grin:

But after some testing, I decided to just focus on one adapter first to be able to rapidly prototype different ideas. It’s definitely possible, though, and could be a focus again once the lib have gotten to a more stable state.

I understand this, there is no need to make thing more complicated in the initial phase. But I’m glad you had the idea of multiple adapters in mind, it would probably somehow influence your design decisions for ReDot.

It’s so great to see Vietnamese builders building on Polkadot. I hope we can connect and potentially collab in the future! :partying_face:

1 Like

Good initiative! We need to make it as simple as possible to build great UIs for Polkadot, thanks for helping.

1 Like

Thanks @OliverTY, looking forward to one day potentially contributing to PoToC :smile: