feat: add countdown logic for mana generation in implicit account creation

packages/desktop/components/ManaBox.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import { DEFAULT_SECONDS_PER_SLOT, getExtraMana, getManaBalance } from '@core/network'
+    import { activeProfile } from '@core/profile'
+    import { MILLISECONDS_PER_SECOND } from '@core/utils'
+    import { selectedWallet, formatTokenAmountBestMatch, selectedWalletAssets } from '@core/wallet'
+    import { PreparedTransaction } from '@iota/sdk/out/types'
+    import { KeyValueBox, Text, TextType } from '@ui'
+    import { onMount, onDestroy } from 'svelte'
+
+    export let preparedTransaction: PreparedTransaction | undefined
+    export let hasEnoughMana: boolean
+    export let showCountdown: boolean = true
+
+    const NUMBER_OF_EXTRA_SLOTS_MANA = 3
+
+    let allotmentManaCost: number = 0
+    let countdownInterval: NodeJS.Timeout
+    let extraMana: number = getExtraMana(NUMBER_OF_EXTRA_SLOTS_MANA)
+    let secondsToRefreshExtraMana = NUMBER_OF_EXTRA_SLOTS_MANA * DEFAULT_SECONDS_PER_SLOT
+
+    $: preparedTransaction && calculateAndSetManaCost() // updates mana values when preparedTransaction changes
+    $: mana = ($selectedWalletAssets?.[$activeProfile?.network?.id] ?? {}).mana
+    $: availableMana = getManaBalance($selectedWallet?.balances?.mana?.available)
+    $: hasEnoughMana = availableMana >= requiredMana
+    $: requiredMana = allotmentManaCost + extraMana
+
+    function calculateAndSetManaCost(): void {
+        allotmentManaCost =
+            preparedTransaction?._preparedData?.transaction?.allotments?.reduce(
+                (acc, { mana }) => acc + Number(mana),
+                0
+            ) || 0
+        extraMana = getExtraMana(NUMBER_OF_EXTRA_SLOTS_MANA)
+    }
+
+    onMount(() => {
+        calculateAndSetManaCost()
+        countdownInterval = setInterval(() => {
+            secondsToRefreshExtraMana -= 1
+            if (secondsToRefreshExtraMana <= 0) {
+                calculateAndSetManaCost()
+                secondsToRefreshExtraMana = NUMBER_OF_EXTRA_SLOTS_MANA * DEFAULT_SECONDS_PER_SLOT
+            }
+        }, MILLISECONDS_PER_SECOND)
+    })
+
+    onDestroy(() => {
+        clearInterval(countdownInterval)
+    })
+</script>
+
+<div class="flex flex-col space-y-2">
+    <KeyValueBox
+        keyText={localize('general.manaCost')}
+        valueText={formatTokenAmountBestMatch(requiredMana, mana.metadata)}
+    />
+
+    <!-- TODO: Update with mana generation -->
+    {#if !hasEnoughMana}
+        <Text type={TextType.p} error classes="text-center">
+            {localize('general.insufficientMana', {
+                values: {
+                    availableMana,
+                },
+            })}
+        </Text>
+    {/if}
+    {#if showCountdown}
+        <Text type={TextType.p} classes="text-center">
+            {localize('general.secondsToRefreshManaCost', {
+                values: {
+                    seconds: secondsToRefreshExtraMana,
+                },
+            })}
+        </Text>
+    {/if}
+</div>

packages/desktop/components/index.js

@@ -23,3 +23,4 @@ export { default as VotingPower } from './VotingPower.svelte'
 export { default as VestingSchedule } from './VestingSchedule.svelte'
 export { default as AccountManagementDetails } from './AccountManagementDetails.svelte'
 export { default as AccountManagementList } from './AccountManagementList.svelte'
+export { default as ManaBox } from './ManaBox.svelte'

packages/desktop/components/popups/ActivityDetailsPopup.svelte

@@ -12,8 +12,10 @@
         ActivityType,
         claimActivity,
         rejectActivity,
+        selectedWallet,
         selectedWalletActivities,
     } from '@core/wallet'
+    import { PreparedTransaction } from '@iota/sdk/out/types'
     import {
         ActivityInformation,
         AccountActivityDetails,
@@ -29,12 +31,16 @@
     } from '@ui'
     import { TextHintVariant } from '@ui/enums'
     import { onMount } from 'svelte'
+    import { ManaBox } from '@components'
 
     export let activityId: string
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
 
     const explorerUrl = getOfficialExplorerUrl($activeProfile?.network?.id)
 
+    let preparedTransaction: PreparedTransaction
+    let hasEnoughMana = false
+
     $: activity = $selectedWalletActivities?.find((_activity) => _activity.id === activityId)
     $: isTimelocked = activity?.asyncData?.asyncStatus === ActivityAsyncStatus.Timelocked
     $: isActivityIncomingAndUnclaimed =
@@ -69,6 +75,10 @@
         await checkActiveProfileAuth(claim, { stronghold: true, ledger: false })
     }
 
+    async function prepareClaimOutput(): Promise<void> {
+        preparedTransaction = await $selectedWallet?.prepareClaimOutputs([activity.outputId])
+    }
+
     function onRejectClick(): void {
         openPopup({
             id: PopupId.Confirmation,
@@ -94,6 +104,9 @@
     onMount(async () => {
         try {
             await _onMount()
+            if (!isTimelocked && isActivityIncomingAndUnclaimed) {
+                await prepareClaimOutput()
+            }
         } catch (err) {
             console.error(err)
         }
@@ -139,24 +152,27 @@
             <ActivityInformation {activity} />
         </activity-details>
         {#if !isTimelocked && isActivityIncomingAndUnclaimed}
-            <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
-                <Button
-                    outline
-                    classes="w-full"
-                    disabled={activity.asyncData?.isClaiming || activity.asyncData?.isRejected}
-                    onClick={onRejectClick}
-                >
-                    {localize('actions.reject')}
-                </Button>
-                <Button
-                    classes="w-full"
-                    disabled={activity.asyncData?.isClaiming}
-                    onClick={onClaimClick}
-                    isBusy={activity.asyncData?.isClaiming}
-                >
-                    {localize('actions.claim')}
-                </Button>
-            </popup-buttons>
+            <div class="flex flex-col space-y-4">
+                <ManaBox {preparedTransaction} bind:hasEnoughMana />
+                <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
+                    <Button
+                        outline
+                        classes="w-full"
+                        disabled={activity.asyncData?.isClaiming || activity.asyncData?.isRejected}
+                        onClick={onRejectClick}
+                    >
+                        {localize('actions.reject')}
+                    </Button>
+                    <Button
+                        classes="w-full"
+                        disabled={activity.asyncData?.isClaiming || !hasEnoughMana}
+                        onClick={onClaimClick}
+                        isBusy={activity.asyncData?.isClaiming}
+                    >
+                        {localize('actions.claim')}
+                    </Button>
+                </popup-buttons>
+            </div>
         {/if}
     </activity-details-popup>
 {/if}

packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte

@@ -2,17 +2,22 @@
     import { Button, Text, TextHint, FontWeight, TextType, ButtonVariant, KeyValueBox } from '@ui'
     import { localize } from '@core/i18n'
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
-    import { burnAsset, formatTokenAmountBestMatch, IAsset } from '@core/wallet'
+    import { burnAsset, formatTokenAmountBestMatch, getDefaultTransactionOptions, IAsset } from '@core/wallet'
     import { checkActiveProfileAuth } from '@core/profile'
     import { handleError } from '@core/error/handlers'
     import { onMount } from 'svelte'
     import { selectedWallet } from '@core/wallet'
     import { TextHintVariant } from '@ui/enums'
+    import { PreparedTransaction } from '@iota/sdk/out/types'
+    import { ManaBox } from '@components'
 
     export let asset: IAsset
     export let rawAmount: string
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
 
+    let preparedTransaction: PreparedTransaction
+    let hasEnoughMana = false
+
     $: formattedAmount = formatTokenAmountBestMatch(Number(rawAmount), asset?.metadata)
 
     function onBackClick(): void {
@@ -36,9 +41,20 @@
         }
     }
 
+    async function prepareBurnFoundryTransaction(): Promise<void> {
+        if (asset && $selectedWallet && rawAmount) {
+            preparedTransaction = await $selectedWallet.prepareBurnNativeToken(
+                asset.id,
+                BigInt(rawAmount),
+                getDefaultTransactionOptions()
+            )
+        }
+    }
+
     onMount(async () => {
         try {
             await _onMount()
+            await prepareBurnFoundryTransaction()
         } catch (err) {
             handleError(err)
         }
@@ -57,14 +73,15 @@
         <KeyValueBox keyText={localize('popups.nativeToken.property.assetId')} valueText={asset.id} isCopyable />
         <KeyValueBox keyText={localize('general.amount')} valueText={formattedAmount} />
         <TextHint variant={TextHintVariant.Warning} text={localize('actions.confirmTokenBurn.hint')} />
+        <ManaBox {preparedTransaction} bind:hasEnoughMana />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={onBackClick}>{localize('actions.back')}</Button>
         <Button
             classes="w-full"
             variant={ButtonVariant.Warning}
             isBusy={$selectedWallet?.isTransferring}
-            disabled={$selectedWallet?.isTransferring}
+            disabled={$selectedWallet?.isTransferring || !hasEnoughMana}
             onClick={onBurnTokenClick}
         >
             {localize('actions.burnToken')}

packages/desktop/components/popups/CreateDelegationPopup.svelte

@@ -11,8 +11,9 @@
         selectedWalletId,
         visibleSelectedWalletAssets,
     } from '@core/wallet'
-    import { AccountAddress, CreateDelegationParams } from '@iota/sdk/out/types'
+    import { AccountAddress, CreateDelegationParams, PreparedTransaction } from '@iota/sdk/out/types'
     import { Text, TextType, AssetAmountInput, TextInput, Button, HTMLButtonType } from '@ui'
+    import { ManaBox } from '@components'
     import { onMount } from 'svelte'
 
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
@@ -23,6 +24,9 @@
     let amount: string
     let confirmDisabled = false
 
+    let preparedTransaction: PreparedTransaction
+    let hasEnoughMana = false
+
     $: asset = $visibleSelectedWalletAssets[$activeProfile?.network?.id].baseCoin
     $: hasTransactionInProgress =
         $selectedWallet?.hasConsolidatingOutputsTransactionInProgress ||
@@ -36,7 +40,7 @@
             return
         }
         const convertedSliderAmount = convertToRawAmount(amount, asset?.metadata)?.toString()
-        confirmDisabled = convertedSliderAmount === rawAmount || hasTransactionInProgress
+        confirmDisabled = convertedSliderAmount === rawAmount || hasTransactionInProgress || !hasEnoughMana
     }
 
     async function onSubmit(): Promise<void> {
@@ -67,13 +71,23 @@
         }
     }
 
+    async function prepareDelegationOutput(): Promise<void> {
+        const params: CreateDelegationParams = {
+            address: AddressConverter.addressToBech32(new AccountAddress($selectedWallet?.mainAccountId)),
+            delegatedAmount: rawAmount,
+            validatorAddress: new AccountAddress(AddressConverter.parseBech32Address(accountAddress)),
+        }
+        preparedTransaction = await $selectedWallet?.prepareCreateDelegation(params, getDefaultTransactionOptions())
+    }
+
     function onCancelClick(): void {
         closePopup()
     }
 
     onMount(async () => {
         try {
             await _onMount()
+            await prepareDelegationOutput()
         } catch (err) {
             handleError(err.error)
         }
@@ -99,6 +113,7 @@
                 placeholder={localize('popups.createDelegation.account.title')}
                 label={localize('popups.createDelegation.account.description')}
             />
+            <ManaBox {preparedTransaction} bind:hasEnoughMana />
         </div>
         <div class="flex flex-row flex-nowrap w-full space-x-4">
             <Button outline disabled={hasTransactionInProgress} classes="w-full" onClick={onCancelClick}>

packages/desktop/components/popups/MintNativeTokenConfirmationPopup.svelte

@@ -15,12 +15,17 @@
     import { onMount } from 'svelte'
     import { selectedWallet } from '@core/wallet'
     import { handleError } from '@core/error/handlers/handleError'
-    import { getClient } from '@core/wallet/actions'
+    import { getClient, prepareCreateNativeToken } from '@core/wallet/actions'
+    import { PreparedTransaction } from '@iota/sdk/out/types'
+    import { ManaBox } from '@components'
 
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
 
     let storageDeposit = '0'
 
+    let preparedTransaction: PreparedTransaction
+    let hasEnoughMana = false
+
     let metadata: IIrc30Metadata | undefined
     $: metadata = getMetadata($mintTokenDetails)
     $: isTransferring = $selectedWallet?.isTransferring
@@ -37,6 +42,11 @@
             const client = await getClient()
             const preparedOutput = await client.buildFoundryOutput(outputData)
             storageDeposit = formatTokenAmountPrecise(Number(preparedOutput.amount) ?? 0, getBaseToken())
+            preparedTransaction = await prepareCreateNativeToken(
+                Number($mintTokenDetails.totalSupply),
+                Number($mintTokenDetails.circulatingSupply),
+                metadata
+            )
         }
     }
 
@@ -151,14 +161,20 @@
                         isCopyable={value.isCopyable}
                     />
                 {/each}
+                <ManaBox {preparedTransaction} bind:hasEnoughMana />
             </details-list>
         {/if}
     </div>
     <div class="flex flex-row flex-nowrap w-full space-x-4">
         <Button outline classes="w-full" disabled={isTransferring} onClick={onBackClick}>
             {localize('actions.back')}
         </Button>
-        <Button classes="w-full" disabled={isTransferring} onClick={onConfirmClick} isBusy={isTransferring}>
+        <Button
+            classes="w-full"
+            disabled={isTransferring || !hasEnoughMana}
+            onClick={onConfirmClick}
+            isBusy={isTransferring}
+        >
             {localize('actions.confirm')}
         </Button>
     </div>