feat: add countdown logic for mana generation in implicit account cre…

…ation (#8222)

* feat: implement logic to allow tx or not based on mana cost for the X slots

* fixes and clean up

* feat: add mana cost to mint, burn, send and implicitTransition

* feat: improvements in mana box component

* feat: add mana cost to claim activity

* feat: add mana cost to create delegation

* feat: add mana cost to claim shimmer

* fixes

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

* fix: add conditional chaining

* fix: improvements

* fix: improvements

* fix: update mana box with new transactionInfo interface

* fix: json literal and seconds in fund confirmation view

* fix: minor improvements

* fix: add missing declaration

---------

Co-authored-by: marc2332 <[email protected]>
Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
Co-authored-by: evavirseda <[email protected]>

packages/desktop/views/dashboard/wallet/views/implicit-account-creation-multistep/FundConfirmationView.svelte

@@ -6,28 +6,31 @@
         ITransactionInfoToCalculateManaCost,
         getManaBalance,
         getPassiveManaForOutput,
+        DEFAULT_SECONDS_PER_SLOT,
     } from '@core/network'
     import { activeProfile } from '@core/profile'
     import { implicitAccountCreationRouter } from '@core/router'
+    import { MILLISECONDS_PER_SECOND, SECONDS_PER_MINUTE, getBestTimeDuration } from '@core/utils'
     import { IWalletState, formatTokenAmountBestMatch, selectedWallet, selectedWalletAssets } from '@core/wallet'
     import { OutputData } from '@iota/sdk/out/types'
     import { Button, FontWeight, KeyValueBox, Text, TextType, TextHint, TextHintVariant, CopyableBox } from '@ui'
     import { onDestroy, onMount } from 'svelte'
 
     export let outputId: string | undefined
 
-    // TODO: update when mana generation is available
-    const isLowManaGeneration = false
+    const LOW_MANA_GENERATION_SECONDS = 10 * SECONDS_PER_MINUTE
+
     let walletAddress: string = ''
     const transactionInfo: ITransactionInfoToCalculateManaCost = {}
     let hasEnoughMana = false
+    let isLowManaGeneration = false
 
     $: baseCoin = $selectedWalletAssets?.[$activeProfile?.network?.id]?.baseCoin
 
     $: selectedOutput = getSelectedOutput($selectedWallet, outputId)
 
     let totalAvailableMana: number
-    $: $selectedWallet, seconds, (totalAvailableMana = getTotalAvailableMana())
+    $: $selectedWallet, (totalAvailableMana = getTotalAvailableMana()), prepareTransaction(selectedOutput?.outputId)
 
     let formattedSelectedOutputBlance: string
     $: selectedOutput,
@@ -53,14 +56,14 @@
     function getTotalAvailableMana(): number {
         return (
             getManaBalance($selectedWallet?.balances?.mana?.available) +
-            $selectedWallet?.balances.totalWalletBic -
-            getImplicitAccountsMana($selectedWallet?.implicitAccountOutputs, [outputId])
+            ($selectedWallet?.balances.totalWalletBic ?? 0) -
+            getImplicitAccountsMana($selectedWallet?.implicitAccountOutputs, outputId ? [outputId] : [])
         )
     }
 
-    function getImplicitAccountsMana(implicitAccountOutputs: OutputData[], excludeIds: string[] | undefined): number {
+    function getImplicitAccountsMana(implicitAccountOutputs: OutputData[], excludeIds: string[]): number {
         return implicitAccountOutputs?.reduce((acc: number, outputData: OutputData) => {
-            if (excludeIds && excludeIds.includes(outputData.outputId)) {
+            if (excludeIds.length > 1 && !excludeIds.includes(outputData.outputId)) {
                 const totalMana = getPassiveManaForOutput(outputData)
                 return totalMana ? acc + totalMana : acc
             } else {
@@ -69,28 +72,40 @@
         }, 0)
     }
 
-    // TODO: Replace this with proper time remaining
+    async function prepareTransaction(outputId: string): Promise<void> {
+        if (!outputId) return
+        try {
+            transactionInfo.preparedTransaction = await $selectedWallet?.prepareImplicitAccountTransition(outputId)
+            seconds = 0 // If we don't get an error, it's because we can follow on to the next step
+        } catch (error) {
+            console.error(error.message)
+            if (error.message?.includes('slots remaining until enough mana')) {
+                transactionInfo.preparedTransactionError = error.message
+                const slotsRemaining = Number(error.message?.split(' ').reverse()[0].replace('`', ''))
+                seconds = slotsRemaining * DEFAULT_SECONDS_PER_SLOT
+                isLowManaGeneration = seconds >= LOW_MANA_GENERATION_SECONDS
+            }
+        }
+    }
+
     // ----------------------------------------------------------------
     let seconds: number = 10
     let countdownInterval: NodeJS.Timeout
     let timeRemaining: string
 
-    $: timeRemaining = `${seconds}s remaining`
+    $: timeRemaining = `${getBestTimeDuration(seconds * MILLISECONDS_PER_SECOND)} remaining`
 
     onMount(async () => {
-        walletAddress = await $selectedWallet?.address()
-        $selectedWallet
-            .prepareImplicitAccountTransition(selectedOutput.outputId)
-            .then((prepareTx) => (transactionInfo.preparedTransaction = prepareTx))
-            .catch((error) => (transactionInfo.preparedTransactionError = error))
+        $selectedWallet?.address().then((address) => (walletAddress = address))
+        await prepareTransaction(selectedOutput.outputId)
+        if (seconds === 0) onTimeout()
         countdownInterval = setInterval(() => {
             seconds -= 1
-
             if (seconds <= 0) {
                 clearInterval(countdownInterval)
                 onTimeout()
             }
-        }, 1000)
+        }, MILLISECONDS_PER_SECOND)
     })
 
     onDestroy(() => {
@@ -103,10 +118,10 @@
     // ----------------------------------------------------------------
 </script>
 
-<step-content class="flex flex-col items-center justify-between h-full pt-20">
-    <div class="flex flex-col h-full justify-between space-y-8 items-center">
+<step-content class={`flex flex-col items-center justify-between h-full ${isLowManaGeneration ? 'pt-8' : 'pt-20'}`}>
+    <div class="flex flex-col h-full justify-between space-y-4 items-center">
         <div class="flex flex-col text-center space-y-4 max-w-md">
-            <div class="flex items-center justify-center mb-7">
+            <div class={`flex items-center justify-center ${isLowManaGeneration ? 'mb-2' : 'mb-7'}`}>
                 <img
                     src="assets/illustrations/implicit-account-creation/step2.svg"
                     alt={localize('views.implicit-account-creation.steps.step2.title')}
@@ -140,7 +155,7 @@
             </div>
         </div>
         {#if isLowManaGeneration}
-            <div class="flex flex-col space-y-4 w-2/3">
+            <div class="flex flex-col space-y-2 w-2/3">
                 <TextHint
                     variant={TextHintVariant.Warning}
                     text={localize('views.implicit-account-creation.steps.step2.view.walletAddress.description')}