Staking draft #46

neokrept · 2021-04-06T03:39:45Z

No description provided.

danimoh

Overall looking good so far.
Sorry, I didn't really find the time yet to look into it in detail.
I just skimmed over it such that you can already work on some feedback.

danimoh · 2021-04-07T21:05:12Z

src/lib/NumberFormatting.ts

+export function numberToLiteral(n: number): string {
+    // https://stackoverflow.com/questions/5529934/javascript-numbers-to-words
+    const ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
+    const teens = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen',
+        'sixteen', 'seventeen', 'eighteen', 'nineteen'];
+
+    function convertMillions(num: number): string {
+        if (num >= 1000000) {
+            return `${convertMillions(Math.floor(num / 1000000))} million ${convertThousands(num % 1000000)}`;
+        }
+        return convertThousands(num);
+    }
+
+    function convertThousands(num: number): string {
+        if (num >= 1000) return `${convertHundreds(Math.floor(num / 1000))} thousand ${convertHundreds(num % 1000)}`;
+        return convertHundreds(num);
+    }
+
+    function convertHundreds(num: number): string {
+        if (num > 99) return `${ones[Math.floor(num / 100)]} hundred ${convertTens(num % 100)}`;
+        return convertTens(num);
+    }
+
+    function convertTens(num: number): string {
+        if (num < 10) return ones[num];
+        if (num >= 10 && num < 20) return teens[num - 10];
+        return `${tens[Math.floor(num / 10)]} ${ones[num % 10]}`;
+    }
+
+    if (n === 0) return 'zero';
+    return convertMillions(n);
+}
+
+export function numberToLiteralTimes(n: number): string {
+    const timesTable = ['', 'once', 'twice', 'thrice'];
+
+    n = parseInt(n.toString(), 10);
+    if (n <= 0) throw new Error('Invalid Input! Times number must be positive >= 1!');
+    if (n < timesTable.length) return timesTable[n];
+
+    return `${numberToLiteral(n)} times`;
+}


This is missing internationalization.
You can import i18n from i18n-setup.ts and then use its t method.
Using variables is also supported in source strings, which shall be useful here, e.g.:

i18n.t('{millions} million {remainder}', { millions: convertMillions(Math.floor(num / 1000000)), remainder: convertThousands(num % 1000000), })

danimoh · 2021-04-07T21:07:33Z

src/lib/NumberFormatting.ts

+    function convertMillions(num: number): string {
+        if (num >= 1000000) {
+            return `${convertMillions(Math.floor(num / 1000000))} million ${convertThousands(num % 1000000)}`;
+        }
+        return convertThousands(num);
+    }
+
+    function convertThousands(num: number): string {
+        if (num >= 1000) return `${convertHundreds(Math.floor(num / 1000))} thousand ${convertHundreds(num % 1000)}`;
+        return convertHundreds(num);
+    }
+
+    function convertHundreds(num: number): string {
+        if (num > 99) return `${ones[Math.floor(num / 100)]} hundred ${convertTens(num % 100)}`;
+        return convertTens(num);
+    }
+
+    function convertTens(num: number): string {
+        if (num < 10) return ones[num];
+        if (num >= 10 && num < 20) return teens[num - 10];
+        return `${tens[Math.floor(num / 10)]} ${ones[num % 10]}`;
+    }


Defining inner methods is not very elegant as redefines the methods on each invocation of the outer method which can be heavy on the garbage collector.

danimoh · 2021-04-07T21:15:10Z

src/components/stake/StakeModal.vue

+        <template v-if="page === 1">
+            <StakeInfoPage @next="page += 1"/>
+        </template>
+        <template v-if="page === 2">
+            <StakeValidatorPage @back="page -= 1" @next="page += 1"/>
+        </template>


If the template only contains one child node, you can omit the template and apply the v-if directly on the child.

danimoh · 2021-04-07T21:18:08Z

src/components/stake/StakeValidatorFilter.vue

+<template>
+    <div class="validator-filter">
+        <div class="validator-filter-wrapper">
+            <button class="validator-switch" :class="state === FilterState.TRUST?'selected':''"


There's a more elegant way to implement conditional style classes:
:class="{ selected: state === FilterState.TRUST }"

danimoh · 2021-04-07T21:19:56Z

src/components/stake/StakeValidatorFilter.vue

+            <span class="validator-search" @click="ctrl.stateChange(FilterState.SEARCH)">
+                <SearchIcon/>
+            </span>


This should also be a button or something to be usable via keyboard navigation.
Additionally, it should probably have hover and focus styles.

danimoh · 2021-04-07T21:24:00Z