From a089e3634982f372104884c3fa15576a89e5a870 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Fri, 12 Apr 2024 10:07:47 +0200
Subject: [PATCH] feat: add mana cost to burn nft

---
 .../components/popups/BurnNftPopup.svelte     | 91 +++++++++++++++++++
 .../desktop/components/popups/Popup.svelte    |  2 +
 .../modals/CollectibleActionsModal.svelte     | 29 +-----
 .../auxiliary/popup/enums/popup-id.enum.ts    |  1 +
 4 files changed, 97 insertions(+), 26 deletions(-)
 create mode 100644 packages/desktop/components/popups/BurnNftPopup.svelte

diff --git a/packages/desktop/components/popups/BurnNftPopup.svelte b/packages/desktop/components/popups/BurnNftPopup.svelte
new file mode 100644
index 00000000000..c855132b699
--- /dev/null
+++ b/packages/desktop/components/popups/BurnNftPopup.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { Button, Text, TextHint, FontWeight, TextType, ButtonVariant } from '@ui'
+    import { localize } from '@core/i18n'
+    import { closePopup } from '@auxiliary/popup'
+    import { handleError } from '@core/error/handlers'
+    import { onMount } from 'svelte'
+    import { burnNft, getDefaultTransactionOptions, selectedWallet } from '@core/wallet'
+    import { TextHintVariant } from '@ui/enums'
+    import { INft } from '@core/nfts'
+    import { ITransactionInfoToCalculateManaCost } from '@core/network'
+    import { checkActiveProfileAuth } from '@core/profile'
+    import { CollectiblesRoute, collectiblesRouter } from '@core/router'
+    import { ManaBox } from '@components'
+
+    export let nft: INft
+    export let _onMount: (..._: any[]) => Promise<void> = async () => {}
+
+    const transactionInfo: ITransactionInfoToCalculateManaCost = {}
+
+    let isBusy = false
+    let hasEnoughMana = false
+
+    async function prepareBurnNftTransaction(): Promise<void> {
+        try {
+            transactionInfo.preparedTransaction = await $selectedWallet.prepareBurnNft(
+                nft.id,
+                getDefaultTransactionOptions()
+            )
+        } catch (error) {
+            transactionInfo.preparedTransactionError = error
+        }
+    }
+
+    async function onBurnNftClick(): Promise<void> {
+        try {
+            isBusy = true
+            await checkActiveProfileAuth(
+                async () => {
+                    await burnNft(nft.id)
+                    $collectiblesRouter.goTo(CollectiblesRoute.Gallery)
+                    closePopup()
+                },
+                { stronghold: true }
+            )
+        } catch (err) {
+            handleError(err)
+        } finally {
+            isBusy = false
+        }
+    }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    onMount(async () => {
+        try {
+            await _onMount()
+            await prepareBurnNftTransaction()
+        } catch (err) {
+            handleError(err)
+        }
+    })
+</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('actions.confirmNftBurn.title', {
+            values: {
+                nftName: nft.name,
+            },
+        })}
+    </Text>
+    <div class="space-y-4">
+        <Text fontSize="14" classes="text-left break-words">{localize('actions.confirmNftBurn.description')}</Text>
+        <ManaBox {transactionInfo} bind:hasEnoughMana />
+        <TextHint variant={TextHintVariant.Warning} text={localize('actions.confirmNftBurn.hint')} />
+    </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"
+            variant={ButtonVariant.Warning}
+            disabled={$selectedWallet?.isTransferring || isBusy || !hasEnoughMana}
+            isBusy={$selectedWallet?.isTransferring || isBusy}
+            onClick={onBurnNftClick}
+        >
+            {localize('actions.burn')}
+        </Button>
+    </popup-buttons>
+</div>
diff --git a/packages/desktop/components/popups/Popup.svelte b/packages/desktop/components/popups/Popup.svelte
index 14d0d944b97..2aae7fb7ba0 100644
--- a/packages/desktop/components/popups/Popup.svelte
+++ b/packages/desktop/components/popups/Popup.svelte
@@ -63,6 +63,7 @@
     import CreateDelegationPopup from './CreateDelegationPopup.svelte'
     import ClaimDelegationRewardsPopup from './ClaimDelegationRewardsPopup.svelte'
     import ImplicitAccountAddressPopup from './ImplicitAccountAddressPopup.svelte'
+    import BurnNftPopup from './BurnNftPopup.svelte'
 
     export let id: PopupId
     export let props: any
@@ -157,6 +158,7 @@
         [PopupId.CreateDelegation]: CreateDelegationPopup,
         [PopupId.ClaimDelegationRewards]: ClaimDelegationRewardsPopup,
         [PopupId.ImplicitAccountAddress]: ImplicitAccountAddressPopup,
+        [PopupId.BurnNft]: BurnNftPopup,
     }
 
     function onKey(event: KeyboardEvent): void {
diff --git a/packages/shared/components/modals/CollectibleActionsModal.svelte b/packages/shared/components/modals/CollectibleActionsModal.svelte
index b1939c68201..b4d647c72eb 100644
--- a/packages/shared/components/modals/CollectibleActionsModal.svelte
+++ b/packages/shared/components/modals/CollectibleActionsModal.svelte
@@ -3,12 +3,8 @@
     import { openUrlInBrowser, time } from '@core/app'
     import { localize } from '@core/i18n'
     import { INft, rewriteIpfsUri } from '@core/nfts'
-    import { checkActiveProfileAuth } from '@core/profile/actions'
-    import { CollectiblesRoute, collectiblesRouter } from '@core/router'
-    import { burnNft } from '@core/wallet'
-    import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
+    import { openPopup, PopupId } from '@auxiliary/popup'
     import { activeProfile, updateActiveProfile } from '@core/profile/stores'
-    import { TextHintVariant } from '@ui/enums'
     import { Icon as IconEnum } from '@auxiliary/icon'
 
     export let modal: Modal
@@ -43,30 +39,11 @@
             disabled: isLocked,
         },
     ]
-
     function openBurnNft(): void {
         openPopup({
-            id: PopupId.Confirmation,
+            id: PopupId.BurnNft,
             props: {
-                title: localize('actions.confirmNftBurn.title', {
-                    values: {
-                        nftName: nft.name,
-                    },
-                }),
-                description: localize('actions.confirmNftBurn.description'),
-                hint: localize('actions.confirmNftBurn.hint'),
-                variant: TextHintVariant.Warning,
-                confirmText: localize('actions.burn'),
-                onConfirm: async () => {
-                    await checkActiveProfileAuth(
-                        async () => {
-                            await burnNft(nft.id)
-                            $collectiblesRouter.goTo(CollectiblesRoute.Gallery)
-                            closePopup()
-                        },
-                        { stronghold: true }
-                    )
-                },
+                nft: nft,
             },
         })
     }
diff --git a/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts
index 04a1962cc2b..b03d9c9d496 100644
--- a/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -55,4 +55,5 @@ export enum PopupId {
     ActivateAccount = 'activateAccount',
     ClaimDelegationRewards = 'claimDelegationRewardsPopup',
     ImplicitAccountAddress = 'implicitAccountAddressPopup',
+    BurnNft = 'burnNft',
 }