Update Staking UI (hacky)

nimiq · Nov 21, 2024 · 7533c2c · 7533c2c
1 parent a5a6bba
commit 7533c2c
Show file tree

Hide file tree

Showing 12 changed files with 1,416 additions and 1,308 deletions.
diff --git a/src/components/staking/StakingGraphPage.vue b/src/components/staking/StakingGraphPage.vue
@@ -148,6 +148,12 @@ export default defineComponent({
                         );
                         const txs = await sendStaking({
                             transaction: transaction.serialize(),
+                            recipientLabel: 'name' in activeValidator.value! ? activeValidator.value.name : 'Validator',
+                            // @ts-expect-error Not typed yet in Hub
+                            validatorImageUrl: 'logo' in activeValidator.value!
+                                && !activeValidator.value.hasDefaultIcon
+                                ? activeValidator.value.logo
+                                : undefined,
                         }).catch((error) => {
                             throw new Error(error.data);
                         });
@@ -185,6 +191,13 @@ export default defineComponent({
                         );
                         const txs = await sendStaking({
                             transaction: transaction.serialize(),
+                            recipientLabel: 'name' in activeValidator.value! ? activeValidator.value.name : 'Validator',
+                            // @ts-expect-error Not typed yet in Hub
+                            validatorAddress: activeValidator.value!.address,
+                            validatorImageUrl: ('logo' in activeValidator.value!
+                                && !activeValidator.value.hasDefaultIcon)
+                                ? activeValidator.value.logo
+                                : undefined,
                         }).catch((error) => {
                             throw new Error(error.data);
                         });
@@ -227,6 +240,13 @@ export default defineComponent({
                     );
                     const txs = await sendStaking({
                         transaction: transaction.serialize(),
+                        recipientLabel: 'name' in activeValidator.value! ? activeValidator.value.name : 'Validator',
+                        // @ts-expect-error Not typed yet in Hub
+                        validatorAddress: activeValidator.value!.address,
+                        validatorImageUrl: 'logo' in activeValidator.value! && !activeValidator.value.hasDefaultIcon
+                            ? activeValidator.value.logo
+                            : undefined,
+                        amount: Math.abs(stakeDelta.value),
                     }).catch((error) => {
                         throw new Error(error.data);
                     });

diff --git a/src/components/staking/StakingInfoPage.vue b/src/components/staking/StakingInfoPage.vue
@@ -151,6 +151,7 @@
             >
                 <a href="#" slot="unstakeEverythingLink" @click="deactivateAll">{{ $t('unstake everything') }}</a>
             </i18n>
+            <div v-else class="switch-validator"></div>
 
             <!-- <button class="nq-button-s rewards-history" @click="$emit('next')">
                 {{ $t('Rewards history') }} &gt;
@@ -273,6 +274,13 @@ export default defineComponent({
 
                     const txs = await sendStaking({
                         transaction: transaction.serialize(),
+                        recipientLabel: 'name' in validator.value! ? validator.value.name : 'Validator',
+                        // @ts-expect-error Not typed yet in Hub
+                        validatorAddress: validator.value!.address,
+                        validatorImageUrl: 'logo' in validator.value! && !validator.value.hasDefaultIcon
+                            ? validator.value.logo
+                            : undefined,
+                        amount: Math.abs(stake.value.activeBalance),
                     });
 
                     if (!txs) {
@@ -352,6 +360,12 @@ export default defineComponent({
 
                 const txs = await sendStaking({
                     transaction: transactions.map((tx) => tx.serialize()),
+                    recipientLabel: 'name' in validator.value! ? validator.value.name : 'Validator',
+                    // @ts-expect-error Not typed yet in Hub
+                    validatorAddress: validator.value!.address,
+                    validatorImageUrl: 'logo' in validator.value! && !validator.value.hasDefaultIcon
+                        ? validator.value.logo
+                        : undefined,
                 });
 
                 if (!txs) {

diff --git a/src/components/staking/ValidatorDetailsOverlay.vue b/src/components/staking/ValidatorDetailsOverlay.vue
@@ -86,7 +86,7 @@ export default defineComponent({
     },
     setup(props, context) {
         const { activeAddress } = useAddressStore();
-        const { activeStake, setStake } = useStakingStore();
+        const { activeStake, setStake, activeValidator } = useStakingStore();
 
         async function selectValidator() {
             const validatorLabelOrAddress = 'name' in props.validator
@@ -125,6 +125,18 @@ export default defineComponent({
 
                     const txs = await sendStaking({
                         transaction: transaction.serialize(),
+                        senderLabel: 'name' in activeValidator.value! ? activeValidator.value.name : 'Validator',
+                        recipientLabel: 'name' in props.validator ? props.validator.name : 'Validator',
+                        // @ts-expect-error Not typed yet in Hub
+                        validatorAddress: props.validator.address,
+                        validatorImageUrl: 'logo' in props.validator && !props.validator.hasDefaultIcon
+                            ? props.validator.logo
+                            : undefined,
+                        fromValidatorAddress: activeValidator.value!.address,
+                        fromValidatorImageUrl: 'logo' in activeValidator.value! && !activeValidator.value.hasDefaultIcon
+                            ? activeValidator.value.logo
+                            : undefined,
+                        amount: activeStake.value.inactiveBalance,
                     }).catch((error) => {
                         throw new Error(error.data);
                     });