Use ViewModels instead of doing data formatting inside templates

[faustbrian]

View models are entities that take care of preparing a data model for usage in templates. This ensures that the data model itself is not leaked into the view and allows to abstract away all kinds of data manipulation and formatting.

class TransactionViewModel {
    readonly #data;

    public constructor (data: object) {
        this.#data = data;
    }

    get id () {
        return truncate(this.#data.id);
    }

    get sender () {
        return knownWallets[this.#data.sender];
    }

    get recipient () {
        return knownWallets[this.#data.recipient];
    }

    get amount () {
        return this.#data.amount.toFixed(2);
    }

    get fee () {
        return this.#data.fee.toFixed(2);
    }

    get memo () {
        return Censor(this.#data.memo);
    }
}

These view models could then be instantiated through a factory as shown below.

class ViewModelFactory {
    public static make(type: string, data: object) {
        return new {
            transaction: TransactionViewModel,
        }[type](data)
    }
}

To make the usage within the wallet more seamless it could be registered as a binding on the global vue instance.

import { ViewModelFactory } from "@arkecosystem/platform-sdk";

export default {
	install(Vue) {
		Vue.prototype.$viewModel = new ViewModelFactory();
	},
};

These might be implemented by the Platform SDK and the wallets will be forced to use them.

[faustbrian]

This will be handled by the SDK to ensure both wallets use the same data formatting and representation.