feat: create claimDelegationRewardsPopup

packages/desktop/components/popups/ClaimDelegationRewardsPopup.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { closePopup, updatePopupProps } from '@auxiliary/popup'
+    import { ManaBox } from '@components'
+    import { openUrlInBrowser } from '@core/app'
+    import { handleError } from '@core/error/handlers'
+    import { localize } from '@core/i18n'
+    import { ITransactionInfoToCalculateManaCost } from '@core/network'
+    import { getOfficialExplorerUrl } from '@core/network/utils'
+    import { activeProfile, updateActiveWallet } from '@core/profile'
+    import { checkActiveProfileAuth } from '@core/profile/actions'
+    import { getDefaultTransactionOptions, selectedWallet } from '@core/wallet'
+    import { Button, FontWeight, KeyValueBox, Text, TextType } from '@ui'
+    import { onMount } from 'svelte'
+
+    export let _onMount: (..._: any[]) => Promise<void> = async () => {}
+    export let delegationId: string
+    export let rewards: number
+    export let isBusy = false
+
+    let hasEnoughMana = false
+    const transactionInfo: ITransactionInfoToCalculateManaCost = {}
+    const explorerUrl = getOfficialExplorerUrl($activeProfile?.network?.id)
+
+    async function onConfirmClick(): Promise<void> {
+        isBusy = true
+        try {
+            updatePopupProps({ isBusy })
+            await checkActiveProfileAuth(burnDelegationOutput, { stronghold: true })
+        } catch (error) {
+            console.error(error)
+        } finally {
+            isBusy = false
+        }
+    }
+
+    async function burnDelegationOutput(): Promise<void> {
+        try {
+            await $selectedWallet.burn({ delegations: [delegationId] }, getDefaultTransactionOptions())
+            updateActiveWallet($selectedWallet.id, {
+                hasDelegationRewardClaimTransactionInProgress: true,
+                isTransferring: true,
+            })
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    async function prepareBurnDelegationOutput(): Promise<void> {
+        try {
+            transactionInfo.preparedTransaction = await $selectedWallet?.prepareBurn(
+                { delegations: [delegationId] },
+                getDefaultTransactionOptions()
+            )
+        } catch (error) {
+            transactionInfo.preparedTransactionError = error
+        }
+    }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    function onExplorerClick(): void {
+        openUrlInBrowser(`${explorerUrl}/search/${delegationId}`)
+    }
+
+    onMount(async () => {
+        try {
+            await _onMount()
+            await prepareBurnDelegationOutput()
+        } catch (err) {
+            handleError(err.error)
+        }
+    })
+</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>
+    <button
+        class="action w-max flex justify-start text-center font-medium text-14 text-blue-500"
+        on:click={onExplorerClick}
+    >
+        {localize('general.viewOnExplorer')}
+    </button>
+    <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 {transactionInfo} 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/components/popups/MintNftConfirmationPopup.svelte

@@ -113,7 +113,7 @@
                 <Tabs bind:activeTab {tabs} />
                 {#if activeTab === Tab.Transaction}
                     {#if quantity > 1}
-                        <KeyValueBox keyText={localize('general.quantity')} valueText={quantity} />
+                        <KeyValueBox keyText={localize('general.quantity')} valueText={quantity.toString()} />
                         <KeyValueBox
                             keyText={localize('general.storageDepositPerNft')}
                             valueText={formatTokenAmountPrecise(storageDeposit, getBaseToken())}

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/views/dashboard/delegation/Delegation.svelte

@@ -14,13 +14,11 @@
         CopyableBox,
         BoxedIconWithText,
         PingingBadge,
-        TextHintVariant,
     } from '@ui'
-    import { activeProfile, checkActiveProfileAuth } from '@core/profile'
+    import { activeProfile } from '@core/profile'
     import {
         formatTokenAmountBestMatch,
         AddressConverter,
-        getDefaultTransactionOptions,
         selectedWalletAssets,
         EMPTY_HEX_ID,
         getOutputRewards,
@@ -29,7 +27,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'
@@ -58,8 +56,8 @@
 
     $: delegationOutputs =
         $selectedWallet?.walletUnspentOutputs?.filter((output) => output?.output?.type === OutputType.Delegation) || []
-    $: delegationOutputs?.length > 0 && setCurrentEpochAndCommittee()
-    $: delegationOutputs?.length > 0 && currentEpoch && buildMappedDelegationData(delegationOutputs)
+    $: delegationOutputs, setCurrentEpochAndCommittee()
+    $: currentEpoch, delegationOutputs?.length > 0 && buildMappedDelegationData(delegationOutputs)
     $: ({ baseCoin } = $selectedWalletAssets[$activeProfile?.network.id])
 
     $: rawDelegatedAmount = delegationOutputs.reduce((acc, prev) => acc + Number(prev.output.amount), 0)
@@ -105,26 +103,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,
             },
         })
     }
@@ -218,7 +202,7 @@
 {#if $selectedWallet}
     <delegation-container class="w-full h-full flex flex-nowrap p-8 relative space-x-4 justify-center">
         <Pane height={Height.Full} width={Width.Full}>
-            <div class="flex flex-col space-y-10 max-w-7xl w-full p-8">
+            <div class="flex flex-col space-y-10 max-w-7xl w-full h-full p-8">
                 <div class="flex flex-row justify-between">
                     <Text type={TextType.h2}>{localize('views.delegation.title')}</Text>
                     <Button onClick={handleDelegate}>{localize('views.delegation.action.delegate')}</Button>
@@ -251,7 +235,7 @@
                 </div>
                 {#if features.delegation.delegationList.enabled}
                     {#if delegationData.length > 0}
-                        <table class="flex flex-col w-full space-y-4 h-80">
+                        <table class="flex flex-col overflow-hidden h-full">
                             <thead class="w-full">
                                 <tr class="flex flex-row justify-between align-items w-full">
                                     {#each Object.values(Header) as header}

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/lib/core/network/utils/getNetworkIdFromNetworkName.ts

@@ -14,7 +14,7 @@ export function getNetworkIdFromNetworkName(networkName: string): NetworkId {
         case 'testnet-1':
         case 'testnet-2':
         case 'docker':
-        case 'docker-1711022286':
+        case 'docker-1712129396':
             return NetworkId.Testnet
         default:
             return NetworkId.Custom

packages/shared/lib/core/wallet/actions/buildWalletState.ts

@@ -93,6 +93,7 @@ export async function buildWalletState(
         hasConsolidatingOutputsTransactionInProgress: false,
         hasImplicitAccountCreationTransactionInProgress: false,
         hasDelegationTransactionInProgress: false,
+        hasDelegationRewardClaimTransactionInProgress: false,
         isTransferring: false,
         votingPower,
         walletOutputs,

packages/shared/lib/core/wallet/actions/events-handlers/handleNewOutputEvent.ts

@@ -107,7 +107,6 @@ export async function handleNewOutputEventInternal(walletId: string, payload: Ne
         }
     }
 
-    // TODO: update this logic when available balance is fixed
     if (_isDelegationOutput) {
         if (wallet?.hasDelegationTransactionInProgress) {
             updateActiveWallet(walletId, {

packages/shared/lib/core/wallet/actions/events-handlers/handleSpentOutputEvent.ts

@@ -5,6 +5,7 @@ import {
     ActivityType,
     WalletApiEventHandler,
     allWalletActivities,
+    isDelegationOutput,
     syncBalance,
     updateAsyncDataByTransactionId,
     validateWalletApiEvent,
@@ -13,6 +14,7 @@ import { SpentOutputWalletEvent, WalletEvent, WalletEventType } from '@iota/sdk/
 import { nodeInfoProtocolParameters } from '@core/network'
 import { getUnixTimestampFromNodeInfoAndSlotIndex } from '@core/network/helpers/getSlotInfoFromNodeProtocolParameters'
 import { get } from 'svelte/store'
+import { closePopup } from 'shared/lib/auxiliary/popup'
 
 export function handleSpentOutputEvent(walletId: string): WalletApiEventHandler {
     return async (error: Error, rawEvent: WalletEvent) => {
@@ -26,6 +28,8 @@ export function handleSpentOutputEvent(walletId: string): WalletApiEventHandler
 export async function handleSpentOutputEventInternal(walletId: string, payload: SpentOutputWalletEvent): Promise<void> {
     const wallet = get(activeWallets)?.find((wallet) => wallet.id === walletId)
     const output = payload.output
+    const _isDelegationOutput = isDelegationOutput(output)
+
     await syncBalance(walletId, true)
     if (wallet) {
         const walletOutputs = await wallet.outputs()
@@ -61,4 +65,12 @@ export async function handleSpentOutputEventInternal(walletId: string, payload:
             updateNftInAllWalletNfts(walletId, activity.nftId, { isSpendable: false })
         }
     }
+
+    if (_isDelegationOutput && wallet?.hasDelegationRewardClaimTransactionInProgress) {
+        updateActiveWallet(walletId, {
+            hasDelegationRewardClaimTransactionInProgress: false,
+            isTransferring: false,
+        })
+        closePopup() // close claimDelegationRewardsPopup when the account output is burned
+    }
 }

packages/shared/lib/core/wallet/interfaces/wallet-state.interface.ts

@@ -13,6 +13,7 @@ export interface IWalletState extends IWallet, IPersistedWalletData {
     hasConsolidatingOutputsTransactionInProgress: boolean
     hasImplicitAccountCreationTransactionInProgress: boolean
     hasDelegationTransactionInProgress: boolean
+    hasDelegationRewardClaimTransactionInProgress: boolean
     votingPower: string
     walletOutputs: OutputData[]
     walletUnspentOutputs: OutputData[]

packages/shared/locales/en.json

@@ -661,13 +661,13 @@
                     "title": "Step 2",
                     "body": "Fund confirmation",
                     "view": {
-                        "eyebrow": "Wallet avaible balance:",
+                        "eyebrow": "Wallet available balance:",
                         "generatedMana": "Generated Mana:",
                         "title": "Funds arrived:",
-                        "subtitle": "Generating mana...",
-                        "action": "Activate Account",
+                        "subtitle": "Generating Mana...",
+                        "action": "Activate account",
                         "walletAddress": {
-                            "description": "Send funds to your wallet address to speed up the mana generation",
+                            "description": "Send funds to your wallet address to speed up the Mana generation",
                             "show": "Show Address",
                             "copy": "Copy"
                         }
@@ -837,7 +837,7 @@
             },
             "mana": {
                 "title": "Mana",
-                "subtitle": "Total mana"
+                "subtitle": "Total Mana"
             },
             "lockedMana": {
                 "title": "Locked Mana",
@@ -1276,8 +1276,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 ID"
         }
     },
     "actions": {
@@ -1670,7 +1671,7 @@
         "copiedToClipboard": "Copied to clipboard",
         "total": "Total: {balance}",
         "availableBalanceWithValue": "Available balance: {balance}",
-        "availableManaWithValue": "Available mana: {mana}",
+        "availableManaWithValue": "Available Mana: {mana}",
         "availableBalance": "Available balance",
         "availableBalanceTooltip": "An asset's total balance minus any funds that are required to cover the storage deposit (i.e. funds that are locked in pending transactions, reserved for Native Tokens, or reserved for NFTs).",
         "amountClaimed": "{amount} claimed",
@@ -1731,9 +1732,9 @@
         "custom": "Custom",
         "verifyLedgerDepositAddress": "Please check the ledger device and verify that the deposit address matches the one displayed on the ledger device",
         "manaCost": "Estimated Mana cost",
-        "availableMana": "Available mana",
+        "availableMana": "Available Mana",
         "insufficientMana": "Insufficient {availableMana}.",
-        "secondsToRefreshManaCost": "{seconds} seconds to refresh the mana cost",
+        "secondsToRefreshManaCost": "{seconds} seconds to refresh the Mana cost",
         "mana": "Mana"
     },
     "filters":{