Network Nervous System Dapp is Moving to Svelte

General
1

The Network Nervous System Dapp

The Network Nervous System (NNS) is the autonomous tokenized governance system that controls the Internet Computer blockchain. It is completely open, permissionless, and decentralized.

The NNS allows anyone holding a neuron to submit and vote on proposals to the network. If adopted, a proposal is executed immediately and automatically, enabling the network to adapt and evolve in real-time.

The NNS Dapp is the web app that gives access to all the functionalities of the NNS. In this web, the user can, for example, stake ICPs into neurons and then vote for the proposals regarding the Internet Computer network.

Svelte Rewrite

The current focus is to rewrite the frontend of the NNS dapp in another frontend framework. Currently, the dapp is written in Flutter, but it was decided to switch to Svelte for the reasons that we point out below. We will keep the same design and UX. We are refactoring page by page and substituting the Flutter page with the Svelte ones as they are developed.

Svelte will bring a few improvements to the NNS Frontend

  • The most important improvement is performance, especially with mobile and scrolling, where we have seen problems with Flutter.
  • Compilation to vanilla Javascript which doesn’t need runtime dependencies, which might be a security risk.
  • End-to-end testing with Flutter has proven very cumbersome and moving back to a normal DOM will help us build a better test suite.
  • We didn’t find that working with Flutter was increasing the developer experience, rather the opposite. We hope to develop faster with Svelte.
  • It will be easier to find good frontend developers and get contributions from the community with a technology that is growing in popularity.
  • Last but not least is consistency: the DFINITY Foundation as a whole believes that Svelte is the future of frontend dapp development.

In the end, we will have the same functionality but built in Svelte with additional improvements that we are adding along the way:

  • A framework to perform end-to-end testing.
  • Minor bugs that we have found in edge cases will be solved during the rewrite.
  • UX improvements with notifications of errors and successful actions.
  • More unit tests. This is because the team has grown, and we are taking more time to bring the testing coverage to a high percentage of the project.
  • A separate package (nns-js) to interact with the Canisters that the NNS dapp needs. We are building this as a separate project so that the community will be able to use it directly.
  • The rewrite will also come with a few performance enhancements. For example, the scrolling in mobile is not smooth at the moment.

At the time of this writing, we have already started the development and are on a good track. As some of you may have noticed, we swapped the login page (check the /v2 at the URL) with the Svelte one already and will proceed with other pages.

More to come

We know that the best way to improve is by listening to the users and the community. That’s why we are always open to feedback and believe in transparency regarding our current dapps and technology.

We have many more projects in the pipeline and we’ll share them as we go, stay tuned.

21 Likes
2

Thank you for the update! I’ve been curious about Svelte as of late. I would you say it’s more similar to vanilla JavaScript than Flutter in terms of syntax?

3

Please add the manage neuron topic to your back log. This will greatly help a number of people that want to delegate their neuron, donate it, or use multi-sig to manage their neruon.

2 Likes
4

Svelte is Javascript with some templating syntax, more similar to VueJS I’d say. Much more JS friendly than Flutter.

We are enjoying developing with Svelte, I would recommend you check it out.

2 Likes
5

We have already a page to manage the neuron, what kind of features do you think are missing?

6

The follow neuron for “manage neuron” topic. It was removed after the first couple of weeks because there were no instructions about what it did. It hasn’t made its way back you currently have to inject breakpoints into the sight to try to get a follow on that topic.

It allows other neurons to submit proposals to control your neuron.

It is missing from this list:

image
image1506Ă—1450 314 KB

Although one could argue that it is confusing in that list and should have its own window with instructions about what it does. People accidently gave dfinity and ICA control of their neurons the first few weeks because there were not instructions.

2 Likes
7

Thanks for the update.
Are you planning to open and share your backlog?, I am interested to contribute. If not when do you plan to do so?

1 Like
8

Ok, got it. I am new in the project and wasn’t aware.

2 Likes
9

We want to improve many things, and enabling contributors is one of the top priorities, but first we need a more mature project. As soon as we have a mature project, proper tests, documentation, etc., we would like to open it to contributors.

We will be more active in this forum from now on. Most of the members of the team are new, and we are just landing in this massive and interesting project. So, it’s taking a while to put things in place, but we will get there.

4 Likes
10

Rewriting http://ic123.xyz/ from React-Gatsby into Svelte now

2 Likes
11

If you are re-writing can I ask you to consider a number of in my opinion. rather important features.

  • The ability to configure follow relationships for all the neurons controlled by your principle all at once or at least with a single click per neuron.
    • Manually configuring multiple neurons is very time consuming, and contributes to some of the issues we see around people just following the Dfinity foundation and spam proposals. We need a simple way of copying the follow relationships configuration of one neuron to all the neurons you control.
  • The ability to export maturity and balance history. - This is essential for tax reporting
    • This is essential for tax and yield calculations. There is currently no way to track ICP and maturity changes over time other than logging in daily to snapshot or rolling your own system which logs in and polls. This means most people are not tracking this information and most jurisdictions this is a legal requirement.
    • We need a table in the NN app which shows changes in ICP balance and maturity vs time, and which can be easily exported in CVS format.
  • The ability to prove for AML purposes that the balance of a newly spawned neuron came from the maturity of a neuron you control , and to track that though to the ledger entry when it has dissolved
    • This is essential for proving source of funds for AML purposes. Currently newly spawned neurons are created via a mint transaction but there is no way to associate the mint event to the decrease in maturity of another neuron. So if your bank asked “where did this ICP come from” there is no easy way to show them.
    • We need a table in the NNS which shows spawn and disolve events. That is that a new neuron was spawned from an existing neuron with this link clearly shown. That a normal ICP account was created when an neuron was dissolved.

In general terms I think a simple standard sortable filterable datable/datagrid component would be better than the current design.

Data grid for:

  • Neurons. [Optional user defined name, ID, balance, maturity, State, Earliest unlock time, voting power, following (tabs) with fill down functionality, actions]
  • Neuron history. [Datetime, Neuron ID, Event type (lock, unlock, merge, spawn, spawned, dissolved, maturity increase), new balance, change, from, to]
  • Open proposals [Date, proposer, ID, topic, voted, motion text, inline voting graph, approve action, reject action]
  • Voting history [Date, proposer, ID, topic, motion text, which way you voted, why you voted e.g. because of who you follow or because you manually voted]
  • Canisters…

Obviously different interfaces are more appropriate for desktop and mobile. Mostly I use mobile for voting on current open proposals or checking my overall balance. I use desktop for all other things.

3 Likes
12

Hi,

Thanks for the detailed list. As said, this is a rewrite, so there won’t be new features nor new UX. It’s the same application with a different technology.

That being said, the features you mention are very interesting. Let me share that with our UX designer so that we take that into account as soon as we finish the rewrite.

Thanks!

2 Likes
13

It seems that the new nns app has been deployed, today I tried to vote + merge maturity, the experience is very smooth, thank goodness :rofl:

4 Likes
14

Your team should move the community fund button away from the merge maturity button

It’s critical not to trap people into the wrong aspect of the system unwillingly

NNS can be slow so people can make errors

They should have to type out the word community fund and hit accept to be able to enter it

4 Likes
15

Thanks for the feedback. We are working on a new UI for that part to differentiate the Community Fund properly. We hope to release this week. I’ll let you now!

1 Like