feat: allow to allot mana to account (#8231)

* feat: add allot mana popup and button * feat: allow to allot mana to account WIP * fixes * feat: update manaAllotments into prepare transaction instead of preparing output * feat: improve literals * copy: update texts --------- Co-authored-by: cpl121 <[email protected]> Co-authored-by: cpl121 <[email protected]> Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Apr 18, 2024 · 1e1c3ec · 1e1c3ec
1 parent cff7a2e
commit 1e1c3ec
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 1 deletion.
diff --git a/packages/desktop/components/buttons/popup-buttons/AllotManaButton.svelte b/packages/desktop/components/buttons/popup-buttons/AllotManaButton.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { OnboardingButton } from '@ui'
+    import { localize } from '@core/i18n'
+    import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
+
+    function allotMana(): void {
+        closePopup()
+    }
+
+    function onAllotManaClick(): void {
+        openPopup({
+            id: PopupId.AllotMana,
+            props: {
+                title: localize('actions.allotMana'),
+                confirmText: localize('actions.send'),
+                onConfirm: allotMana,
+            },
+        })
+    }
+</script>
+
+<OnboardingButton
+    primaryText={localize('actions.allotMana')}
+    secondaryText={localize('general.allotManaDescription')}
+    onClick={onAllotManaClick}
+/>
diff --git a/packages/desktop/components/buttons/popup-buttons/index.js b/packages/desktop/components/buttons/popup-buttons/index.js
@@ -4,3 +4,4 @@ export { default as MintNativeTokenButton } from './MintNativeTokenButton.svelte
 export { default as MintNftButton } from './MintNftButton.svelte'
 export { default as RefreshTokenMetadataButton } from './RefreshTokenMetadataButton.svelte'
 export { default as TestDeepLinkButton } from './TestDeepLinkButton.svelte'
+export { default as AllotManaButton } from './AllotManaButton.svelte'
diff --git a/packages/desktop/components/popups/AllotManaPopup.svelte b/packages/desktop/components/popups/AllotManaPopup.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import { closePopup, updatePopupProps } from '@auxiliary/popup'
+    import { Button, Text, FontWeight, TextType, TextInput, AssetAmountInput } from '@ui'
+    import { handleError } from '@core/error/handlers'
+    import {
+        selectedWallet,
+        visibleSelectedWalletAssets,
+        convertToRawAmount,
+        getDefaultTransactionOptions,
+        AddressConverter,
+    } from '@core/wallet'
+    import { activeProfile, checkActiveProfileAuth } from '@core/profile'
+    import { ITransactionInfoToCalculateManaCost, getManaBalance } from '@core/network'
+    import { onMount } from 'svelte'
+    import { ManaBox } from '@components'
+
+    export let _onMount: (..._: any[]) => Promise<void> = async () => {}
+    export let rawAmount: string = getManaBalance($selectedWallet?.balances?.mana?.available)?.toString()
+    export let accountAddress: string
+
+    let isBusy = false
+    let error: string
+    let amount: string
+    let assetAmountInput: AssetAmountInput
+    let confirmDisabled = false
+
+    const transactionInfo: ITransactionInfoToCalculateManaCost = {}
+    let hasEnoughMana = false
+
+    $: hasTransactionInProgress =
+        $selectedWallet?.hasConsolidatingOutputsTransactionInProgress || $selectedWallet?.isTransferring
+    $: amount, accountAddress, hasTransactionInProgress, setConfirmDisabled()
+    $: asset = $visibleSelectedWalletAssets[$activeProfile?.network?.id].mana
+
+    function setConfirmDisabled(): void {
+        if (!amount || !accountAddress) {
+            confirmDisabled = true
+            return
+        }
+        const convertedSliderAmount = convertToRawAmount(amount, asset?.metadata)?.toString()
+        confirmDisabled = convertedSliderAmount === rawAmount || hasTransactionInProgress || !hasEnoughMana
+    }
+
+    async function onSubmit(): Promise<void> {
+        try {
+            await assetAmountInput?.validate(true)
+            if (!rawAmount || !accountAddress) return
+            updatePopupProps({ rawAmount, accountAddress })
+            await checkActiveProfileAuth(allotMana, { stronghold: true, ledger: false })
+        } catch (err) {
+            error = err.error
+            handleError(err)
+        } finally {
+            isBusy = false
+        }
+    }
+
+    async function preparedOutput() {
+        try {
+            const prepareOutput = await $selectedWallet.prepareOutput(
+                {
+                    recipientAddress: $selectedWallet.depositAddress,
+                    amount: '0',
+                },
+                getDefaultTransactionOptions()
+            )
+            transactionInfo.preparedTransaction = await $selectedWallet.prepareSendOutputs(
+                [prepareOutput],
+                getDefaultTransactionOptions()
+            )
+        } catch (error) {
+            transactionInfo.preparedTransactionError = error
+        }
+    }
+
+    async function allotMana(): Promise<void> {
+        try {
+            const accountId = AddressConverter.parseBech32Address(accountAddress)
+            // Send 0 amount transaction to accountAddress with amount in the allotMana
+            const prepareOutput = await $selectedWallet.prepareOutput(
+                { recipientAddress: accountAddress, amount: '0' },
+                getDefaultTransactionOptions()
+            )
+            await $selectedWallet.sendOutputs([prepareOutput], {
+                ...getDefaultTransactionOptions(accountId),
+                manaAllotments: { [accountId]: Number(rawAmount) }, // if manaAllotments amount passed as bigint it is transformed to string in the sdk
+            })
+            closePopup()
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    function onBackClick(): void {
+        closePopup()
+    }
+
+    onMount(async () => {
+        try {
+            await _onMount()
+            await preparedOutput()
+        } catch (err) {
+            handleError(err.error)
+        }
+    })
+</script>
+
+<allot-mana-popup 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.allotMana.title')}
+    </Text>
+    <div class="w-full flex-col space-y-4">
+        <form id="allot-mana" on:submit|preventDefault={onSubmit} class="flex flex-col space-y-5">
+            <div class="space-y-4">
+                <AssetAmountInput
+                    bind:this={assetAmountInput}
+                    bind:rawAmount
+                    bind:amount
+                    bind:asset
+                    containsSlider
+                    disableAssetSelection
+                    disabled={hasTransactionInProgress}
+                />
+                <TextInput
+                    {error}
+                    bind:value={accountAddress}
+                    placeholder={localize('general.accountAddress')}
+                    label={localize('popups.allotMana.body')}
+                    submitHandler={onSubmit}
+                    disabled={isBusy}
+                />
+                <ManaBox {transactionInfo} bind:hasEnoughMana />
+            </div>
+            <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
+                <Button classes="w-full" outline onClick={onBackClick} disabled={isBusy}
+                    >{localize('actions.back')}</Button
+                >
+                <Button classes="w-full" onClick={onSubmit} disabled={isBusy} {isBusy}>
+                    {localize('actions.send')}
+                </Button>
+            </popup-buttons>
+        </form>
+    </div>
+</allot-mana-popup>
diff --git a/packages/desktop/components/popups/Popup.svelte b/packages/desktop/components/popups/Popup.svelte
@@ -8,6 +8,7 @@
     import { clickOutside } from '@core/utils/ui'
 
     // Popups
+    import AllotManaPopup from './AllotManaPopup.svelte'
     import WalletSwitcherPopup from './WalletSwitcherPopup.svelte'
     import ActivityDetailsPopup from './ActivityDetailsPopup.svelte'
     import AddNodePopup from './AddNodePopup.svelte'
@@ -101,6 +102,7 @@
     let popupContent
 
     const POPUP_MAP: PopupComponentMap = {
+        [PopupId.AllotMana]: AllotManaPopup,
         [PopupId.WalletSwitcher]: WalletSwitcherPopup,
         [PopupId.ActivityDetails]: ActivityDetailsPopup,
         [PopupId.AddNode]: AddNodePopup,

diff --git a/packages/desktop/features/developer-tools.features.ts b/packages/desktop/features/developer-tools.features.ts
@@ -20,6 +20,9 @@ const developerToolsFeatures: IDeveloperFeatures = {
     deeplink: {
         enabled: false,
     },
+    allotMana: {
+        enabled: true,
+    },
 }
 
 export default developerToolsFeatures
diff --git a/packages/desktop/views/dashboard/developer/Developer.svelte b/packages/desktop/views/dashboard/developer/Developer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import {
+        AllotManaButton,
         CreateAccountButton,
         FaucetRequestButton,
         MintNativeTokenButton,
@@ -50,6 +51,9 @@
                     {#if features.developerTools.refreshTokens.enabled}
                         <RefreshTokenMetadataButton />
                     {/if}
+                    {#if features.developerTools.allotMana.enabled}
+                        <AllotManaButton />
+                    {/if}
                 </div>
             </Pane>
         </div>

diff --git a/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -1,4 +1,5 @@
 export enum PopupId {
+    AllotMana = 'allotMana',
     WalletSwitcher = 'WalletSwitcher',
     ActivityDetails = 'activityDetails',
     AddNode = 'addNode',

diff --git a/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts b/packages/shared/lib/core/wallet/utils/convertToRawAmount.ts
@@ -19,7 +19,7 @@ function convertToRawAmountFromMetadata(
     tokenMetadata: TokenMetadata,
     selectedUnit?: string
 ): Big | undefined {
-    if (tokenMetadata?.standard === TokenStandard.BaseToken) {
+    if (tokenMetadata?.standard === TokenStandard.BaseToken || tokenMetadata?.standard === TokenStandard.Mana) {
         if (selectedUnit === tokenMetadata.unit) {
             const decimals = Math.min(tokenMetadata.decimals, MAX_SUPPORTED_DECIMALS)
             return convertAmountToMatchUnit(amount, decimals)

diff --git a/packages/shared/lib/features/interfaces/developer-features.interface.ts b/packages/shared/lib/features/interfaces/developer-features.interface.ts
@@ -7,4 +7,5 @@ export interface IDeveloperFeatures extends IFeatureFlag {
     account: IFeatureFlag
     refreshTokens: IFeatureFlag
     deeplink: IFeatureFlag
+    allotMana: IFeatureFlag
 }
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
@@ -1223,6 +1223,10 @@
             "title": "Faucet request",
             "body": "Are you sure you want to request {token} tokens from the {network} faucet?"
         },
+        "allotMana": {
+            "title": "Allot Mana",
+            "body": "Select the account address to allot mana."
+        },
         "manageVotingPower": {
             "title": "Manage voting power",
             "body": "Define your voting power to vote on proposals.",
@@ -1475,6 +1479,7 @@
         "burnToken": "Burn token",
         "faucetRequest": "Get {token} tokens",
         "refreshTokenMetadata": "Refresh token metadata",
+        "allotMana": "Allot mana",
         "test": "Test",
         "testDeepLink": "Test deep link",
         "initialize": "Initialize",
@@ -1703,6 +1708,7 @@
         "mintNativeTokenDescription": "Mint native token following IRC30 standard",
         "mintNftDescription": "Mint NFT following IRC27 standard",
         "faucetRequestDescription": "Request tokens from the {network} faucet",
+        "allotManaDescription": "Allot mana to an account",
         "refreshTokenMetadataDescription": "Reset and refresh all token metadata",
         "refreshTokenMetadataHint" : "This will reset all your tokens' metadata including the verification status and unhide any hidden assets.",
         "giftStorageDeposit": "Gift storage deposit",