From 658f7403be0e54dc5154f4ba060343754d41606a Mon Sep 17 00:00:00 2001
From: Max Strasinsky <98811342+mstrasinskis@users.noreply.github.com>
Date: Fri, 10 Jan 2025 17:05:35 +0000
Subject: [PATCH] Display VP in expandable (#6138)
# Motivation
To clean up the page UI, the voting power calculations should be
displayed inside a collapsible section.
Note: it's more convenient to review with the "Hide whitespaces"
checked.
# Changes
- Use `KeyValuePairInfo` to display the VP calculation details inside
collapsible.
# Tests
- Tested manually.
![Screenshot 2025-01-10 at 00 39
06](https://github.com/user-attachments/assets/ffee3c57-48a6-452f-9479-ff60fadf7d79)
![Screenshot 2025-01-10 at 00 38
56](https://github.com/user-attachments/assets/8d72c041-a48f-4a3c-b296-e82b07cbd526)
ot
![Screenshot 2025-01-10 at 00 38
41](https://github.com/user-attachments/assets/e5bb2edc-39a6-43ca-8cb2-9d6df325f2df)
![Screenshot 2025-01-10 at 00 38
13](https://github.com/user-attachments/assets/4f3fb0c6-9e64-49d2-a097-5fdeb58b8a04)
# Todos
- [ ] Add entry to changelog (if necessary).
Not necessary.
---
.../NnsNeuronVotingPowerSection.svelte | 147 +++++++++++-------
...ls.spec.ts-desktop-Google-Chrome-linux.png | Bin 153616 -> 137085 bytes
...-details.spec.ts-desktop-firefox-linux.png | Bin 201597 -> 180160 bytes
...ils.spec.ts-mobile-Google-Chrome-linux.png | Bin 146313 -> 129166 bytes
...n-details.spec.ts-mobile-firefox-linux.png | Bin 181140 -> 161458 bytes
5 files changed, 88 insertions(+), 59 deletions(-)
diff --git a/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte b/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte
index 1530f76de2..2e7a5ac63c 100644
--- a/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte
+++ b/frontend/src/lib/components/neuron-detail/NnsNeuronVotingPowerSection.svelte
@@ -16,7 +16,7 @@
import NnsNeuronDissolveDelayItemAction from "./NnsNeuronDissolveDelayItemAction.svelte";
import NnsNeuronStateItemAction from "./NnsNeuronStateItemAction.svelte";
import NnsStakeItemAction from "./NnsStakeItemAction.svelte";
- import { Html, Section } from "@dfinity/gix-components";
+ import { Html, KeyValuePairInfo, Section } from "@dfinity/gix-components";
import type { NeuronInfo } from "@dfinity/nns";
import { ENABLE_PERIODIC_FOLLOWING_CONFIRMATION } from "$lib/stores/feature-flags.store";
@@ -29,61 +29,69 @@
- {#if canVote}
- {formatVotingPower(neuron.decidingVotingPower ?? 0n)}
- {:else}
- {$i18n.neuron_detail.voting_power_zero}
- {/if}
-
- {$i18n.neuron_detail.calculated_as}
-
- {$ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
- ? $i18n.neuron_detail.voting_power_section_calculation_generic_new
- : $i18n.neuron_detail.voting_power_section_calculation_generic}
-
- {$i18n.neuron_detail.this_neuron_calculation}
-
- {replacePlaceholders(
- $ENABLE_PERIODIC_FOLLOWING_CONFIRMATION
- ? $i18n.neuron_detail.voting_power_section_calculation_specific_new
- : $i18n.neuron_detail.voting_power_section_calculation_specific,
- {
- $stake: formatTokenE8s({
- value: neuronStake(neuron),
- }),
- $maturityStaked: formattedStakedMaturity(neuron),
- $ageMultiplier: ageMultiplier(neuron.ageSeconds).toFixed(2),
- $dissolveMultiplier: dissolveDelayMultiplier(
- neuron.dissolveDelaySeconds
- ).toFixed(2),
- $activityMultiplier: activityMultiplier(neuron).toFixed(2),
- $votingPower: formatVotingPower(neuron.decidingVotingPower ?? 0n),
- }
- )}
-
- {$i18n.neurons.voting_power}
-
+ {#if canVote} + {formatVotingPower(neuron.decidingVotingPower ?? 0n)} + {:else} + {$i18n.neuron_detail.voting_power_zero} + {/if} +
+ + + {#if canVote} + + + {$i18n.neuron_detail.calculated_as} + + + {$ENABLE_PERIODIC_FOLLOWING_CONFIRMATION + ? $i18n.neuron_detail.voting_power_section_calculation_generic_new + : $i18n.neuron_detail.voting_power_section_calculation_generic} + + + + + {$i18n.neuron_detail.this_neuron_calculation} + + + {replacePlaceholders( + $ENABLE_PERIODIC_FOLLOWING_CONFIRMATION + ? $i18n.neuron_detail + .voting_power_section_calculation_specific_new + : $i18n.neuron_detail.voting_power_section_calculation_specific, + { + $stake: formatTokenE8s({ + value: neuronStake(neuron), + }), + $maturityStaked: formattedStakedMaturity(neuron), + $ageMultiplier: ageMultiplier(neuron.ageSeconds).toFixed(2), + $dissolveMultiplier: dissolveDelayMultiplier( + neuron.dissolveDelaySeconds + ).toFixed(2), + $activityMultiplier: activityMultiplier(neuron).toFixed(2), + $votingPower: formatVotingPower( + neuron.decidingVotingPower ?? 0n + ), + } + )} + + + {:else} + + + + {/if} + +O>|q+qRy=c>RqJ
z@0Tvf?7*_RRvmE<)(+qLzxm=m!~AXxlq@Lv%#<#GZFgiICLioAzU*|zZ|tE-F;9P;
zMG4Qw2d>`<{vvmW0o!dt>*9wYokayt&Dh(ham|(N6V*|Me(EtPwhn@9qX1VZeTw!4
zg*S+u36}J63NVnQ3;S=Y62E~|G
zD{SI3Pn}Zo|ASSZ+#U+{dDjs6$F#=HRk)lyttQ9=EVb(}n8_0g1?^bM(+!y#eU6uaV61p+{{z!zQyHO;DelAFn(@wL!ZUWb{YMp2E{r&O4!lPav0h1o>})f
zHO~Ke!RO`WXN~!|4t5#tZvSKF;|s~>n@L=sy61Sa@9O_K-yY%|W49zOfw%beD3nsm
zw$&;f_f~Cp>q=Al?1}_=Om$He?or53>TSDo+g@AjSD{{7r$7
B43j-M^2Uv~z
z13U`1|LSDNKC