feat: create claimDelegationRewardPopup

Author: evavirseda

packages/desktop/components/popups/Popup.svelte

@@ -61,6 +61,7 @@
     import ActivateAccountPopup from './ActivateAccountPopup.svelte'
     import ManageKeysPopup from './ManageKeysPopup.svelte'
     import CreateDelegationPopup from './CreateDelegationPopup.svelte'
+    import claimDelegationRewardsPopup from './claimDelegationRewardsPopup.svelte'
 
     export let id: PopupId
     export let props: any
@@ -153,6 +154,7 @@
         [PopupId.ActivateAccount]: ActivateAccountPopup,
         [PopupId.ManageKeys]: ManageKeysPopup,
         [PopupId.CreateDelegation]: CreateDelegationPopup,
+        [PopupId.claimDelegationRewards]: claimDelegationRewardsPopup,
     }
 
     function onKey(event: KeyboardEvent): void {

packages/desktop/components/popups/claimDelegationRewardsPopup.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Button, Text, FontWeight, TextType, KeyValueBox } from '@ui'
+    import { localize } from '@core/i18n'
+    import { closePopup } from '@auxiliary/popup'
+    import { getDefaultTransactionOptions, selectedWallet } from '@core/wallet'
+    import { checkActiveProfileAuth } from '@core/profile/actions'
+    import { PreparedTransaction } from '@iota/sdk/out/types'
+    import { ManaBox } from '@components'
+
+    export let delegationId: string
+    export let rewards: number
+
+    let isBusy = false
+    let hasEnoughMana = false
+    let preparedTransaction: PreparedTransaction
+
+    async function onConfirmClick(): Promise<void> {
+        try {
+            isBusy = true
+            await checkActiveProfileAuth(
+                async () => {
+                    const burnOutput = await $selectedWallet.burn(
+                        { delegations: [delegationId] },
+                        getDefaultTransactionOptions()
+                    )
+                    if (burnOutput) {
+                        closePopup()
+                    }
+                },
+                { stronghold: true }
+            )
+        } catch (error) {
+            console.error(error)
+        } finally {
+            isBusy = false
+        }
+    }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+</script>
+
+<div class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
+    <Text type={TextType.h3} fontWeight={FontWeight.semibold} classes="text-left">
+        {localize('popups.claimDelegationRewards.title')}
+    </Text>
+    <div class="flex flex-col space-y-4">
+        <KeyValueBox keyText={localize('popups.claimDelegationRewards.delegationId')} valueText={delegationId} />
+        <KeyValueBox keyText={localize('popups.claimDelegationRewards.rewards')} valueText={rewards.toString()} />
+        <ManaBox {preparedTransaction} bind:hasEnoughMana />
+    </div>
+    <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
+        <Button classes="w-full" outline onClick={onCancelClick}>{localize('actions.cancel')}</Button>
+        <Button
+            classes="w-full"
+            disabled={$selectedWallet?.isTransferring || isBusy || !hasEnoughMana}
+            isBusy={$selectedWallet?.isTransferring || isBusy}
+            onClick={onConfirmClick}
+        >
+            {localize('popups.claimDelegationRewards.confirmButton')}
+        </Button>
+    </popup-buttons>
+</div>

packages/desktop/views/dashboard/delegation/Delegation.svelte

@@ -13,13 +13,11 @@
         ButtonSize,
         CopyableBox,
         BoxedIconWithText,
-        TextHintVariant,
     } from '@ui'
-    import { activeProfile, checkActiveProfileAuth } from '@core/profile'
+    import { activeProfile } from '@core/profile'
     import {
         formatTokenAmountBestMatch,
         AddressConverter,
-        getDefaultTransactionOptions,
         selectedWalletAssets,
         EMPTY_HEX_ID,
         getOutputRewards,
@@ -28,7 +26,7 @@
     import { truncateString } from '@core/utils'
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { OutputType, DelegationOutput, OutputData, DelegationId } from '@iota/sdk/out/types'
-    import { PopupId, closePopup, openPopup } from '@auxiliary/popup'
+    import { PopupId, openPopup } from '@auxiliary/popup'
     import features from '@features/features'
     import { api } from '@core/api'
     import { DEFAULT_MANA } from '@core/network'
@@ -102,26 +100,12 @@
             id: PopupId.CreateDelegation,
         })
     }
-
     function handleClaimRewards(delegationId: string, rewards: number): void {
         openPopup({
-            id: PopupId.Confirmation,
+            id: PopupId.claimDelegationRewards,
             props: {
-                title: localize('popups.claimDelegationRewards.title'),
-                description: localize('popups.claimDelegationRewards.description', {
-                    values: { rewards, delegationId },
-                }),
-                confirmText: localize('popups.claimDelegationRewards.confirmButton'),
-                variant: TextHintVariant.Success,
-                onConfirm: async () => {
-                    await checkActiveProfileAuth(
-                        async () => {
-                            await $selectedWallet.burn({ delegations: [delegationId] }, getDefaultTransactionOptions())
-                            closePopup()
-                        },
-                        { stronghold: true }
-                    )
-                },
+                delegationId,
+                rewards,
             },
         })
     }

packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts

@@ -53,4 +53,5 @@ export enum PopupId {
     WithdrawFromL2 = 'withdrawFromL2',
     CreateDelegation = 'createDelegation',
     ActivateAccount = 'activateAccount',
+    claimDelegationRewards = 'claimDelegationRewardsPopup',
 }

packages/shared/locales/en.json

@@ -1263,8 +1263,9 @@
         },
         "claimDelegationRewards": {
             "title": "Claim Rewards",
-            "description": "Claim all the rewards, {rewards} Mana, of this delegation output {delegationId}",
-            "confirmButton": "Claim"
+            "confirmButton": "Claim",
+            "rewards": "Rewards",
+            "delegationId": "Delegation output ID"
         }
     },
     "actions": {