KodaDot — Return of the Vue.js

Substrate ecosystem from a Frontend perspective

Since our last write up, it was a rough season. We’ve learned a lot during this period. 🤓

🟣 What is KodaDot?

We started as an alternative to Polkadot.js.org Apps. We are reversing React components and rewriting them into VueJs so people who code in VueJs can understand code easily and fork us with the breeze.

We plan to be Whitelabel layer for your wallet, governance dashboard or custom module for your para chain. Feel free to follow us and reach us 👋

📝 Prologue

Like Substrate is an ever-changing environment, we were expecting that we picked bleeding edge. Hopefully, it will stabilize with upcoming Substrate v2. We’ve decided to wait a while till API is more robust, so we focused on other things.

We came with a new logo as we plan to continue in our efforts and want to be little more recognized in the ecosystem.

KodaDot logo, in VueJs colours showing Polkadot relay chain as entrance portal.

We’ve chosen to give a talk at Sub0.1 with vue-polkadot.js.org. Viktor could not attend as during the same time he was studying in 🇳🇴 Norway.

I was pretty happy that I could attend and could reconnect with friends from web3summit. I gave a quick talk about our development through. There is also video recording.

At once point, we’ve decided API is pretty stable, I think at that time version of Polkadot.js/api@0.100.1 was it.

Democracy modules, showing on-going on-chain governance on Kusama network
Democracy modules, showing on-going on-chain governance on Kusama network
Democracy modules, showing on-going on-chain governance on Kusama network

Viktor was in charge of doing Democracy & Extrinsics & Settings module. It went pretty well, we’ve found some new things we’re added since we signed a contract in summer and we thought it would look like unfinished without them. We decided to add new features free of charge due to the good faith of our team. It shows, it was a good move; it opened doors to another circle of people.

I’ve been in charge of creating Accounts, Addressbook, Transfer and whole UX. It was mostly done at the web version of Subkey plus required some additional logic to work seamlessly and friendly on mobile. That was our focus, be mobile-first.

Everything was smooth in terms of our planned things, no problems at all. We set a clear vision of what we want to see and what needs to be done.

We’ve been really enjoying the whole development cycle; we made a lot of new friends through various channels.

We learned a lot of new approaches. Learned through Rust codebase, how nodes in Substrate operates, various pallets, like social recovery pallet, Github PR.

We’ve also done a presentation at Substrate Seminar. Apparently some things broke the day before 😅, it was not perfect timing for us. We promise we will make another, better presentation. Otherwise, you can test our beta.

👀 What’s next?

On our roadmap, we have Staking, Treasury, Explorer, Chainstate and Toolbox.

Staking is pretty requested feature so far as it may be popular among validators community. Explorer is great for inspecting various events on-chain, including pruned events which could not be reviewed later.

Besides these features, we would like to stay as a performance version of original Polkadot.js with focus on UX. We know Staking is pretty computing feature right now. Hence on-chain governance could be hard, we would like to make it easy as possible 🤗

There are numerous possibilities for how to handle user workflow for proposals, i.e. tipping or voting.

When it will be done, it will be shipped.

Follow us on Twitter @Kodadot, we will announce new things there.

🛣💥 Bumpy road

Little knowledge sharing of our experience from Substrate ecosystem. Let’s zoom closer to that fun part. We are pretty used for breaking changes. We’ve picked Kusama as our alpha point for working releases.

Expect chaos, no promises.

🧶 Yarn upgrade

New API is here, happy new year.

Once we’ve realized something is not working after Christmas, we expected this, we’ve upgraded everything. 😌

We started from the keyring, through commons-utils, API, Vue, Vue-template-compilers, Buefy. We did whole stack upgrade and checked if everything is alright, took us an about ten days.

New cryptography has arrived.
Runtime upgrade has introduced new types, let’s see what doesn’t work

🎯 During our focus on the basic functionality of frontend, we occurred a few breaking changes along the way.

assert(name.startsWith(‘@polkadot’), `Invalid package descriptor ${name}`);

We said to our selves it’s bleeding edge, it will be fine.

Won’t happen in future, yet promised Substrate v2 is somewhere on the horizon.

During merging upstream upgrades, regular upgrades happened.

We even proposed function should be more inclusive.

🚛 Deliverable

Once we’re pretty sure everything is working, we decided to submit our milestone. Well, it took like nine days. We’ve tried not to do any breaking changes and focus on other features, but nine days in Kusama world is like three months. A lot of things has changed between that time.

The interface didn’t work for me with Kusama. That’s probably not your fault, but due to the recent changes.

We knew it was our fault, as we perceive our frontend should be steady in any ⛈ weather. We are here to fix it 🙏

We set it and requested a review, but…two breaking changes at once occurred. Speechless.

🌾 TS 3.8 private fields.

We’ve used rollup at that time for building our packages, but we realized, they’re tech is not so bleeding edge and it becomes incompatible with our pace, so we switched 💔 our building using pure TypeScript. (💕 we still love rollup) I think this cost us like three days to figure this out and forget about rollup at that time.

Once we had working Democracy module in February, another update kicks in with runtime upgrade (1055), and suddenly our Democracy module stopped working.

these undocumented for a reason, since they can change at will, and certainly after massive breaking democracy changes, they are changing very rapidly for the sake of efficiency.

✅ Meanwhile, we’ve passed a milestone check, everything been working, for a while. 😅

Once you are quite reliable with your working project on delivering, CI/CD and particular 📦 package suddenly transform into private. Something like that happened to us. We are deeply sorry that we’ve used a package which is not suitable for external consumption 😳

🧐 Not sure why putting it as public in the first place?

Now we need to fork it anyway as our product is dependent on that so we can focus on more critical problems.

👩‍🎓 Lessons learned

At the begging of this path, we truly believed we could focus on things that matter, rather two-third of our time went for chasing the upstream wind, debugging due to various changes.

No wonder we’ve been nominated as one bleeding-edge team knowing everything from the backend to the frontend with tons of experience. We are truly blessed here 😇 and thankful for every community recommendation of KodaDot.

🕹 Demo

You can try our demo — vue-polkadot.js.org

⛽️ Sustainability

We have realized, that the maintenance costs of our “product” are quite high, is not that easy to keep that going, it requires some more massive maintenance every two weeks or so, due changing nature of Substrate. Not because of runtime upgrades, but every changing things of cryptography modules, maintenance costs can get high here.

Listing there are changes on a node in Rust codebase (which we love 💖), connecting API, common utilities, various front-facing components in React, which we follow as our ruler 📐 to design elements in VueJS.

We came through, we noticed have few options to keep us above sea level, to do so because it would be sad to leave this project and let it die.

🦜 Kusama Treasury

We’ve got advice that we should definitely go and try it out. If somebody is reading this, you might find this useful.

🚛 Substrate delivery partners

We’ve applied to make consultancy for other para chains if they will be in the scope of our experience. We can make them custom modules on the frontend. Who else will have that seamless full stack experience who have proof of built something, reversed code, understands it well on from frontend till backend side. That’s our best strength, knowledge and experience💪

🏦 Open Grants Program

This is our last scope of consideration to apply to open grants program.

👽 Unknown of unknown

We are trying through various channels to seek who would be interested in funding us. One potential ideation is we will be side-funded from our para chain project as supporting or sponsoring specific infrastructure tools like interface.

🎣 So Long, and Thanks for All the Fish

We appreciate all a warm welcome from Parity Technologies, Polkadot, Kusama Network. Looking forward to our user from DARWINIA, Polychain, Polymath, Plasm Network ( Sota Watanabe ), Edgeware, Acala Network, Centrifuge, KILT Protocol, ChainX, Phala Network, ChainLink, Laminar and all future para chains.

With support from theWeb3 Foundation Team that we could be members of grantees community. If you are interested, you can read how it started.

🌉 Gates are open, participate

If you are interested, follow this project, you can join our team 😍. You’re more than welcome to help us out 💪

I think this is an excellent opportunity to evolve skin-in-the-game with decentralized technology and we are in the super-early stage. Great to work on some beautiful open-source project.

👉 You can find out more at vue-polkadot.js.org and github.com/vue-polkadot/apps

experimental NFT landscape — https://nft.KodaDot.xyz