Rewrite activity in vue

[Duddino]

Abstract

This is the first of a hopefully series of PRs aimed at rewriting parts MPW in Vue.js

Why vue.js?

Vue is a fairly light framework, and can be integrated into our current codebase from the botton up, meaning that we can start by rewriting singular components, then entire tabs and maybe the entire page eventually.
The syntax is very similar to old school web development, but it avoids a lot of the boilerplate.
For instance, take this snippet of code, repeated many times in our codebase:

document.getElementById('id').style.display = variable ? 'block' : 'none';

In vue, this becomes

<div v-if="variable"> </div>

Note that we no longer need to assign an id to the div.
Other benefits include:

• The ability to split code in multiple files (index.template.html no longer needs to include everything).
• Harder to include vulnerabilities such as Xss
• Ability to containerize css (and js) to the component, and avoiding having big namespaces
• Probably more?

---

Why start with the activity?

The activity list is a fairly complex component, which is reused two times (Dashboard and stake tab). It is a perfect example on how other parts can be rewritten as it needs to fetch transaction from the network, process the information and display it.

---

Testing

• Test that the activity and stake reward list matches with app.mypivxwallet.org.
• Check that both of the lists are changed upon translation.
• Check that both of the lists update properly when Translations are changed.

---

[JSKitty]

I've read this implementation over a few times now, and tested lightly as well.

Honestly: I think this is a great idea, it looks plenty flexible and easy enough for us to learn and adapt to, it chips away at our huge global.js mess, and it reduces the HTML template size a ton, this is definitely the modularisation we needed, in my opinion.

Onwards to Vue.js, I say...

A bug note: the Staking Activity exclusively is not loading for me, and when attempting to load it, my Firefox is freezing up - no errors logged, maybe a bad loop:

[Duddino]

A bug note: the Staking Activity exclusively is not loading for me, and when attempting to load it, my Firefox is freezing up - no errors logged, maybe a bad loop:

That was because I forgot to properly pass fNewOnly, should be fixe now

[Liquid369]

Overall it's looking good, one nit if we really need that console.log I commented on.
It runs very well for my large testnet wallet, loading quickly and not freezing up on me gg

[Liquid369]

tACK 8393b78

I am excited about the Vue work! GG @Duddino

[JSKitty]

There's one minor regression compared to app.mypivxwallet.org: After loading the Activity on the Dashboard automatically, the 'Stake History' is not rendered, so when the user navigates to the Staking tab, it will always be empty unless you manually hit "Load More" and sync additional history data (more than necessary) from the network.

Previously, MPW renders both at the same time, to prevent this edgecase.

Additional note: Since the merging of #160, this PR needs updating with Translation tags for all Activity UI text.

[panleone]

tACK 2eec65e
I really like this PR: apart from the activity refactor, with vue we can finally unify UI and logic in a single file instead of putting the UI in global.js Also I like lines like export const translation = reactive({}); in such a way that translation is automatically updated.

[JSKitty]

npm run prettier

[panleone]

re-tACK 00e1e70

[JSKitty]

tACK 76a8266

Smooth, almost identical functionality to Production, a really good cleanup for global.js, and a step towards MPW modularity

[JSKitty]

tACK 190b044

[Liquid369]

tACK 190b044

[panleone]

tACK 190b044