feat: create a delegation popup logic (#8082)

* feat: add Delegation view UI Co-authored-by: evavirseda <evavirseda@users.noreply.github.com> * feat: add header translations * fix: styles * style: make tbody scrollable * feat: create a delegation popup UI * feat: create a delegation popup logic WIP * fix: styles * fix: add fixed height in the table tag * fix: verify inputs * feat: update literals * fix: minor improvements * feat: create a delegation popup logic * fix: add TODO comment * fix: error type and form reactivity --------- Co-authored-by: evavirseda <evavirseda@users.noreply.github.com> Co-authored-by: Begoña Alvarez <balvarez@boxfish.studio>
iotaledger · Mar 1, 2024 · fd3ac60 · fd3ac60
1 parent 9d7586e
commit fd3ac60
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 15 deletions.
diff --git a/packages/desktop/components/popups/CreateDelegationPopup.svelte b/packages/desktop/components/popups/CreateDelegationPopup.svelte
@@ -1,37 +1,67 @@
 <script lang="ts">
-    import { closePopup } from '@auxiliary/popup'
+    import { closePopup, updatePopupProps } from '@auxiliary/popup'
+    import { api } from '@core/api'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
-    import { activeProfile } from '@core/profile'
-    import { convertToRawAmount, selectedWallet, visibleSelectedWalletAssets } from '@core/wallet'
+    import { activeProfile, checkActiveProfileAuth, getNetworkHrp, updateActiveWallet } from '@core/profile'
+    import {
+        convertToRawAmount,
+        getDefaultTransactionOptions,
+        selectedWallet,
+        selectedWalletId,
+        visibleSelectedWalletAssets,
+    } from '@core/wallet'
+    import { AccountAddress, CreateDelegationParams } from '@iota/sdk/out/types'
     import { Text, TextType, AssetAmountInput, TextInput, Button, HTMLButtonType } from '@ui'
+    import { onMount } from 'svelte'
+
+    export let _onMount: (..._: any[]) => Promise<void> = async () => {}
+    export let rawAmount: string = $selectedWallet?.balances?.baseCoin?.available?.toString()
+    export let accountAddress: string
 
     let assetAmountInput: AssetAmountInput
     let amount: string
-    let accountId: string
-    let rawAmount = $selectedWallet.balances.baseCoin.available.toString()
     let confirmDisabled = false
 
-    $: asset = $visibleSelectedWalletAssets[$activeProfile?.network.id].baseCoin
+    $: asset = $visibleSelectedWalletAssets[$activeProfile?.network?.id].baseCoin
     $: hasTransactionInProgress =
-        $selectedWallet?.hasConsolidatingOutputsTransactionInProgress || $selectedWallet?.isTransferring
-    $: amount, hasTransactionInProgress, setConfirmDisabled()
+        $selectedWallet?.hasConsolidatingOutputsTransactionInProgress ||
+        $selectedWallet?.hasDelegationTransactionInProgress ||
+        $selectedWallet?.isTransferring
+    $: amount, accountAddress, hasTransactionInProgress, setConfirmDisabled()
 
     function setConfirmDisabled(): void {
-        if (!amount) {
+        if (!amount || !accountAddress) {
             confirmDisabled = true
             return
         }
         const convertedSliderAmount = convertToRawAmount(amount, asset?.metadata)?.toString()
-        confirmDisabled =
-            convertedSliderAmount === $selectedWallet.balances.baseCoin.available.toString() || hasTransactionInProgress
+        confirmDisabled = convertedSliderAmount === rawAmount || hasTransactionInProgress
     }
 
     async function onSubmit(): Promise<void> {
         try {
             await assetAmountInput?.validate(true)
-            if (!amount || !accountId) return
-            // TODO: Add logic in other PR
+            if (!rawAmount || !accountAddress) return
+            updatePopupProps({ rawAmount, accountAddress })
+            await checkActiveProfileAuth(delegate, { stronghold: true, ledger: false })
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    async function delegate(): Promise<void> {
+        try {
+            const params: CreateDelegationParams = {
+                address: api.accountIdToBech32($selectedWallet.mainAccountId, getNetworkHrp()),
+                delegatedAmount: rawAmount,
+                validatorAddress: new AccountAddress(api.bech32ToHex(accountAddress)),
+            }
+            await $selectedWallet.createDelegation(params, getDefaultTransactionOptions())
+            updateActiveWallet($selectedWalletId, {
+                hasDelegationTransactionInProgress: true,
+                isTransferring: true,
+            })
         } catch (err) {
             handleError(err)
         }
@@ -40,6 +70,14 @@
     function onCancelClick(): void {
         closePopup()
     }
+
+    onMount(async () => {
+        try {
+            await _onMount()
+        } catch (err) {
+            handleError(err.error)
+        }
+    })
 </script>
 
 <create-delegation-popup class="flex flex-col space-y-6">
@@ -57,7 +95,7 @@
                 disabled={hasTransactionInProgress}
             />
             <TextInput
-                bind:value={accountId}
+                bind:value={accountAddress}
                 placeholder={localize('popups.createDelegation.account.title')}
                 label={localize('popups.createDelegation.account.description')}
             />

diff --git a/packages/desktop/views/dashboard/delegation/Delegation.svelte b/packages/desktop/views/dashboard/delegation/Delegation.svelte
@@ -52,7 +52,7 @@
     }
 
     $: delegationOutputs =
-        $selectedWallet.walletOutputs.filter((output) => output?.output?.type === OutputType.Delegation) || []
+        $selectedWallet?.walletOutputs?.filter((output) => output?.output?.type === OutputType.Delegation) || []
     $: delegationOutputs?.length > 0 && mappedDelegationData(delegationOutputs)
     $: ({ baseCoin } = $selectedWalletAssets[$activeProfile?.network.id])
 

diff --git a/packages/shared/lib/core/wallet/actions/buildWalletState.ts b/packages/shared/lib/core/wallet/actions/buildWalletState.ts
@@ -78,6 +78,7 @@ export async function buildWalletState(
         hasVotingTransactionInProgress: false,
         hasConsolidatingOutputsTransactionInProgress: false,
         hasImplicitAccountCreationTransactionInProgress: false,
+        hasDelegationTransactionInProgress: false,
         isTransferring: false,
         votingPower,
         walletOutputs,

diff --git a/packages/shared/lib/core/wallet/actions/events-handlers/handleNewOutputEvent.ts b/packages/shared/lib/core/wallet/actions/events-handlers/handleNewOutputEvent.ts
@@ -12,6 +12,7 @@ import {
     getOrRequestAssetFromPersistedAssets,
     hasBlockIssuerFeature,
     isAccountOutput,
+    isDelegationOutput,
     isImplicitAccountOutput,
     preprocessGroupedOutputs,
     syncBalance,
@@ -54,6 +55,7 @@ export async function handleNewOutputEventInternal(walletId: string, payload: Ne
     if (
         (address && wallet?.depositAddress === address && !outputData?.remainder) ||
         isAccountOutput(outputData) ||
+        isDelegationOutput(outputData) ||
         isBasicOutput
     ) {
         await syncBalance(wallet.id, true)
@@ -105,6 +107,17 @@ export async function handleNewOutputEventInternal(walletId: string, payload: Ne
             closePopup() // close ActivateAccountPopup when the account output is created
         }
     }
+
+    // TODO: update this logic when available balance is fixed
+    if (isDelegationOutput(outputData)) {
+        if (wallet?.hasDelegationTransactionInProgress) {
+            updateActiveWallet(walletId, {
+                hasDelegationTransactionInProgress: false,
+                isTransferring: false,
+            })
+            closePopup() // close CreateDelegationPopup when the account output is created
+        }
+    }
     if (isNftOutput) {
         const wrappedOutput = outputData as unknown as IWrappedOutput
         const nft = buildNftFromNftOutput(wrappedOutput, wallet.depositAddress)

diff --git a/packages/shared/lib/core/wallet/interfaces/wallet-state.interface.ts b/packages/shared/lib/core/wallet/interfaces/wallet-state.interface.ts
@@ -12,6 +12,7 @@ export interface IWalletState extends IWallet, IPersistedWalletData {
     hasVotingTransactionInProgress: boolean
     hasConsolidatingOutputsTransactionInProgress: boolean
     hasImplicitAccountCreationTransactionInProgress: boolean
+    hasDelegationTransactionInProgress: boolean
     votingPower: string
     walletOutputs: OutputData[]
     accountOutputs: OutputData[]

diff --git a/packages/shared/lib/core/wallet/utils/getDefaultTransactionOptions.ts b/packages/shared/lib/core/wallet/utils/getDefaultTransactionOptions.ts
@@ -11,5 +11,6 @@ export function getDefaultTransactionOptions(
             value: new AccountAddress(accountId),
         },
         allowMicroAmount: true,
+        allowAllottingFromAccountMana: true,
     }
 }
diff --git a/packages/shared/lib/core/wallet/utils/index.ts b/packages/shared/lib/core/wallet/utils/index.ts
@@ -20,6 +20,7 @@ export * from './getSubjectFromAddress'
 export * from './getTokenFromSelectedWallet'
 export * from './getUnitFromTokenMetadata'
 export * from './isAccountOutput'
+export * from './isDelegationOutput'
 export * from './isImplicitAccountOutput'
 export * from './isReservedTagKeyword'
 export * from './isSubjectInternal'

diff --git a/packages/shared/lib/core/wallet/utils/isDelegationOutput.ts b/packages/shared/lib/core/wallet/utils/isDelegationOutput.ts
@@ -0,0 +1,5 @@
+import { OutputData, OutputType } from '@iota/sdk/out/types'
+
+export function isDelegationOutput(output: OutputData): boolean {
+    return output?.output?.type === OutputType.Delegation
+}