Update Staking UI (hacky)

nimiq · Nov 21, 2024 · d4260f7 · d4260f7
1 parent 7dc212f
commit d4260f7
Show file tree

Hide file tree

Showing 12 changed files with 336 additions and 299 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
@@ -155,6 +155,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;
@@ -277,6 +278,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) {
@@ -356,6 +364,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
@@ -88,7 +88,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
@@ -127,6 +127,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);
                     });

diff --git a/src/i18n/de.po b/src/i18n/de.po
@@ -90,7 +90,7 @@ msgid "{percentage} fees"
 msgstr "{percentage} Gebühren"
 
 #: src/components/staking/tooltips/ValidatorDescriptionTooltip.vue:18
-#: src/components/staking/ValidatorDetailsOverlay.vue:41
+#: src/components/staking/ValidatorDetailsOverlay.vue:43
 msgid "{poolName} Website"
 msgstr ""
 
@@ -305,7 +305,7 @@ msgstr "Adresse nicht bekannt?"
 msgid "Addresses"
 msgstr "Adressen"
 
-#: src/components/staking/StakingInfoPage.vue:68
+#: src/components/staking/StakingInfoPage.vue:72
 msgid "Adjust Stake"
 msgstr ""
 
@@ -685,7 +685,7 @@ msgstr "Passwort ändern"
 msgid "Change your language setting."
 msgstr "Ändere deine Spracheinstellung."
 
-#: src/components/staking/ValidatorDetailsOverlay.vue:111
+#: src/components/staking/ValidatorDetailsOverlay.vue:113
 msgid "Changing validator"
 msgstr "Validator ändern"
 
@@ -864,7 +864,7 @@ msgstr "In USDC konvertieren"
 msgid "Convert your USDC.e to the new standard."
 msgstr "Konvertiere deine USDC.e zum neuen Standard"
 
-#: src/components/modals/UsdcTransactionModal.vue:402
+#: src/components/modals/UsdcTransactionModal.vue:401
 #: src/composables/useUsdcTransactionInfo.ts:158
 msgid "Converted {amount1} USDC.e to {amount2} USDC"
 msgstr "{amount1} USDC.e in {amount2} USDC umgewandelt"
@@ -956,7 +956,7 @@ msgstr "Krypto-Swaps werden derzeit gewartet."
 msgid "Deactivate validator"
 msgstr ""
 
-#: src/components/staking/StakingInfoPage.vue:257
+#: src/components/staking/StakingInfoPage.vue:262
 msgid "Deactivating Stake"
 msgstr ""
 
@@ -1413,9 +1413,9 @@ msgstr "Höchster Grad an Dezentralisierung"
 msgid "Historic value"
 msgstr "Historischer Wert"
 
-#: src/components/modals/BtcTransactionModal.vue:461
+#: src/components/modals/BtcTransactionModal.vue:460
 #: src/components/modals/TransactionModal.vue:513
-#: src/components/modals/UsdcTransactionModal.vue:398
+#: src/components/modals/UsdcTransactionModal.vue:397
 #: src/components/modals/UsdtTransactionModal.vue:377
 #: src/composables/useBtcTransactionInfo.ts:193
 #: src/composables/useTransactionInfo.ts:193
@@ -1424,10 +1424,10 @@ msgstr "Historischer Wert"
 msgid "HTLC Creation"
 msgstr "HTLC-Erstellung"
 
-#: src/components/modals/BtcTransactionModal.vue:461
+#: src/components/modals/BtcTransactionModal.vue:460
 #: src/components/modals/TransactionModal.vue:528
 #: src/components/modals/TransactionModal.vue:534
-#: src/components/modals/UsdcTransactionModal.vue:398
+#: src/components/modals/UsdcTransactionModal.vue:397
 #: src/components/modals/UsdtTransactionModal.vue:377
 #: src/composables/useBtcTransactionInfo.ts:193
 #: src/composables/useTransactionInfo.ts:208
@@ -1811,7 +1811,7 @@ msgid "No connection to {chain} network."
 msgstr "Keine Verbindung zum {chain}-Netzwerk"
 
 #: src/components/staking/tooltips/ValidatorDescriptionTooltip.vue:12
-#: src/components/staking/ValidatorDetailsOverlay.vue:35
+#: src/components/staking/ValidatorDetailsOverlay.vue:37
 msgid "No description available"
 msgstr "Keine Beschreibung verfügbar"
 
@@ -1924,7 +1924,6 @@ msgstr "Oder kaufe BTC direkt in der Wallet."
 msgid "Overwrite how the Keyguard is opened."
 msgstr "Überschreibe wie der Keyguard geöffnet wird."
 
-#: src/components/staking/StakingPreview.vue:21
 #: src/components/staking/tooltips/ValidatorReward.vue:8
 msgid "p.a."
 msgstr "p.a."
@@ -2193,7 +2192,7 @@ msgstr "Seite neuladen um fortzufahren."
 msgid "Refund"
 msgstr "Rückerstattung"
 
-#: src/components/modals/UsdcTransactionModal.vue:564
+#: src/components/modals/UsdcTransactionModal.vue:563
 #: src/components/modals/UsdtTransactionModal.vue:532
 msgid "Refund failed: "
 msgstr "Rückerstattung fehlgeschlagen:"
@@ -2321,7 +2320,7 @@ msgstr "Sicherheit"
 msgid "Select a currency and an amount."
 msgstr "Währung und Menge auswählen"
 
-#: src/components/staking/ValidatorDetailsOverlay.vue:52
+#: src/components/staking/ValidatorDetailsOverlay.vue:54
 msgid "Select validator"
 msgstr ""
 
@@ -2433,7 +2432,7 @@ msgid "Send, receive and hold BTC in your wallet."
 msgstr "Sende, empfange und verwahre BTC in deiner Wallet."
 
 #: src/components/staking/StakingGraphPage.vue:136
-#: src/components/staking/StakingGraphPage.vue:218
+#: src/components/staking/StakingGraphPage.vue:231
 msgid "Sending Staking Transaction"
 msgstr ""
 
@@ -2443,7 +2442,7 @@ msgstr ""
 msgid "Sending Transaction"
 msgstr "Transaktion wird versendet"
 
-#: src/components/staking/StakingInfoPage.vue:320
+#: src/components/staking/StakingInfoPage.vue:332
 msgid "Sending Unstaking Transaction"
 msgstr ""
 
@@ -2587,10 +2586,10 @@ msgstr "Überspringen"
 #: src/components/modals/SendModal.vue:636
 #: src/components/modals/SendModal.vue:821
 #: src/components/modals/StablecoinSendModal.vue:677
-#: src/components/staking/StakingGraphPage.vue:272
-#: src/components/staking/StakingInfoPage.vue:307
-#: src/components/staking/StakingInfoPage.vue:384
-#: src/components/staking/ValidatorDetailsOverlay.vue:161
+#: src/components/staking/StakingGraphPage.vue:292
+#: src/components/staking/StakingInfoPage.vue:319
+#: src/components/staking/StakingInfoPage.vue:402
+#: src/components/staking/ValidatorDetailsOverlay.vue:175
 msgid "Something went wrong"
 msgstr "Etwas ging schief"
 
@@ -2634,13 +2633,13 @@ msgstr "Stake deine NIM für Zinsen und um das Netzwerk zu sichern."
 msgid "Stake now"
 msgstr ""
 
-#: src/components/staking/StakingInfoPage.vue:52
+#: src/components/staking/StakingInfoPage.vue:56
 msgid "Staked"
 msgstr ""
 
 #: src/components/layouts/AddressOverview.vue:40
 #: src/components/LegacyAccountNotice.vue:28
-#: src/components/staking/StakingInfoPage.vue:11
+#: src/components/staking/StakingInfoPage.vue:15
 msgid "Staking"
 msgstr "Staking"
 
@@ -2660,27 +2659,27 @@ msgstr ""
 msgid "Store of value, got it"
 msgstr "Wertaufbewahrung, verstanden"
 
-#: src/components/staking/StakingGraphPage.vue:205
+#: src/components/staking/StakingGraphPage.vue:218
 msgid "Successfully added {amount} NIM to your stake with {validator}"
 msgstr ""
 
-#: src/components/staking/ValidatorDetailsOverlay.vue:145
+#: src/components/staking/ValidatorDetailsOverlay.vue:159
 msgid "Successfully changed validator to {validator}"
 msgstr "Validator erfolgreich geändert zu {validator}"
 
-#: src/components/staking/StakingInfoPage.vue:291
+#: src/components/staking/StakingInfoPage.vue:303
 msgid "Successfully deactivated {amount} NIM"
 msgstr ""
 
-#: src/components/staking/StakingGraphPage.vue:247
+#: src/components/staking/StakingGraphPage.vue:267
 msgid "Successfully deactivated {amount} NIM from your stake with {validator}"
 msgstr ""
 
-#: src/components/staking/StakingGraphPage.vue:168
+#: src/components/staking/StakingGraphPage.vue:174
 msgid "Successfully staked {amount} NIM with {validator}"
 msgstr ""
 
-#: src/components/staking/StakingInfoPage.vue:370
+#: src/components/staking/StakingInfoPage.vue:388
 msgid "Successfully unstaked {amount} NIM"
 msgstr ""
 
@@ -2917,7 +2916,7 @@ msgstr ""
 "Der Validator ist allein verantwortlich für die oben bereitgestellten "
 "Informationen."
 
-#: src/components/staking/ValidatorDetailsOverlay.vue:45
+#: src/components/staking/ValidatorDetailsOverlay.vue:47
 msgid ""
 "The validator is solely responsible for the information provided above. It "
 "is not to be viewed as an endorsement or recommendation by Nimiq."
@@ -3096,7 +3095,7 @@ msgstr "Zu {exchange}"
 msgid "To swap with USDC/USDT, choose a stablecoin."
 msgstr "Um mit USDC/USDT zu tauschen, wähle einen Stablecoin."
 
-#: src/components/staking/StakingInfoPage.vue:149
+#: src/components/staking/StakingInfoPage.vue:153
 msgid "To switch validator, first {unstakeEverythingLink}."
 msgstr ""
 
@@ -3206,7 +3205,7 @@ msgstr ""
 msgid "Unstake"
 msgstr ""
 
-#: src/components/staking/StakingInfoPage.vue:152
+#: src/components/staking/StakingInfoPage.vue:156
 msgid "unstake everything"
 msgstr ""
 
@@ -3267,7 +3266,7 @@ msgstr "Nutze die Nimiq Wallet als Web-App außerhalb des Browsers."
 msgid "Use the slider to lock your NIM and earn rewards."
 msgstr ""
 
-#: src/components/staking/StakingInfoPage.vue:121
+#: src/components/staking/StakingInfoPage.vue:125
 msgid "Validator"
 msgstr "Validator"
 
@@ -3397,7 +3396,7 @@ msgstr ""
 "- in der Wallet, indem du NIM zuerst gegen BTC oder USDC tauschst, die dann verkauft werden können.\n"
 "- auf unterstützten Börsen."
 
-#: src/components/staking/StakingInfoPage.vue:70
+#: src/components/staking/StakingInfoPage.vue:74
 msgid "You can't adjust your stake while you're unstaking"
 msgstr ""
 
@@ -3539,7 +3538,7 @@ msgstr "Deine Zahlung wurde erstattet"
 msgid "Your payout is on its way"
 msgstr "Deine Auszahlung ist unterwegs"
 
-#: src/components/staking/ValidatorDetailsOverlay.vue:27
+#: src/components/staking/ValidatorDetailsOverlay.vue:29
 msgid ""
 "Your rewards are influenced by how many NIM are staked globally and your "
 "validator pool’s fee."