feat: set a primary key (account management) (#8077)

* feat: add account management router * feat: update icon * feat: add account list * fix: display as isBusy if hasImplicitAccountCreationTransactionInProgress and disable the password input * feat: format and truncate address * feat: cleanup code * feat: add features flag * feat: add account management details ui * feat: add locales * feat: enable features * feat: update accountManagement * feat: use real data * feat: fix wrong merge * feat: add isImplicitAccountAccountOutput function * fix import * fix: improve function * feat: cleanup * feat: cleanup * feat: cleanup * minor fix * feat: show address * fix type * feat: cleanup * feat: hide implicitAccount address, clenaup and display transition button * feat: update main account id and persist * feat: cleanup * feat: add locales and menuItem * feat: update details and cleanup * fix warnings * feat: update logic for details view - display popup activate account button * fix: fixes * fix: format * fix: minor improvements * fixes * feat: update styles * feat: add primary key * fixes * minor fixes * fix imports * minor fix * fix: improve UX to open link * fix: improve UX again * fix: remove unnecessary ? --------- Co-authored-by: cpl121 <[email protected]> Co-authored-by: cpl121 <[email protected]>
iotaledger · Feb 23, 2024 · db0d725 · db0d725
1 parent f3a42fa
commit db0d725
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 19 deletions.
diff --git a/packages/desktop/components/AccountManagementDetails.svelte b/packages/desktop/components/AccountManagementDetails.svelte
@@ -22,6 +22,7 @@
         getBech32AddressFromAddressTypes,
         isAccountOutput,
         isImplicitAccountOutput,
+        selectedWallet,
         selectedWalletMainAccountId,
     } from '@core/wallet'
     import {
@@ -49,15 +50,16 @@
 
     const explorerUrl = getOfficialExplorerUrl($activeProfile?.network?.id)
 
-    $: isImplicitAccount = isImplicitAccountOutput(selectedOutput?.output as CommonOutput)
-    $: accountId = isAccountOutput(selectedOutput) ? (selectedOutput?.output as AccountOutput)?.accountId : null
+    $: isImplicitAccount = isImplicitAccountOutput(selectedOutput.output as CommonOutput)
+    $: accountId = isAccountOutput(selectedOutput) ? (selectedOutput.output as AccountOutput)?.accountId : null
     $: address = accountId ? getBech32AddressFromAddressTypes(new AccountAddress(accountId)) : null
     $: isMainAccount = accountId && accountId === $selectedWalletMainAccountId
     $: balance = getAccountBalance(selectedOutput, isImplicitAccount)
     $: formattedBalance = balance ? formatTokenAmountBestMatch(balance, getBaseToken()) : '-'
     $: hasStakingFeature = hasOutputStakingFeature(selectedOutput)
     $: rawStakedAmount = getStakedAmount(selectedOutput)
     $: formattedStakedAmount = formatTokenAmountBestMatch(rawStakedAmount, getBaseToken())
+    $: primaryKey = $selectedWallet?.primaryKey
     $: listBlockKeysFeature(selectedOutput)
 
     function getAccountBalance(outputData: OutputData, isImplicitAccount: boolean): number | undefined {
@@ -157,7 +159,7 @@
                         >
                     {/if}
                 </title-container>
-                {#if selectedOutput?.outputId}
+                {#if selectedOutput.outputId}
                     <button
                         class="action w-max flex justify-start text-center font-medium text-14 text-blue-500"
                         on:click={onExplorerClick}
@@ -214,18 +216,17 @@
                         >{localize('views.accountManagement.details.mana')}</Text
                     >
                     <Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start w-[260px]"
-                        >{selectedOutput?.output?.mana}</Text
+                        >{selectedOutput.output?.mana}</Text
                     >
                 </div>
             {/if}
-            {#if isAccountOutput && keys.length > 0}
+            {#if isAccountOutput && primaryKey}
                 <div class="flex flex-col space-y-2 w-1/2">
                     <Text color="gray-600" fontWeight={FontWeight.medium} fontSize="12" type={TextType.p}
                         >{localize('views.accountManagement.details.key')}</Text
                     >
-                    <!-- TODO: When we can set a primary key, we will show the primary key here -->
                     <Text type={TextType.pre} fontSize="13" lineHeight="leading-120" classes="text-start w-[260px]"
-                        >{keys[0]}</Text
+                        >{primaryKey}</Text
                     >
                 </div>
             {/if}

diff --git a/packages/desktop/components/popups/Popup.svelte b/packages/desktop/components/popups/Popup.svelte
@@ -88,7 +88,6 @@
         case PopupId.LedgerAppGuide:
         case PopupId.ActivateAccount:
         case PopupId.LedgerConnection:
-        case PopupId.ManageKeys:
             size = PopupSize.Large
             break
         default:

diff --git a/packages/shared/components/KeyListRow.svelte b/packages/shared/components/KeyListRow.svelte
@@ -1,30 +1,42 @@
 <script lang="ts">
-    import { Pill } from './pills'
-    import { Text, Modal, MeatballMenuButton, MenuItem } from 'shared/components'
+    import { Pill, Text, Modal, MeatballMenuButton, MenuItem, TooltipIcon } from '@ui'
     import { localize } from '@core/i18n'
+    import { truncateString } from '@core/utils'
+    import { selectedWalletId, selectedWallet } from '@core/wallet'
+    import { updateActiveWalletPersistedData } from '@core/profile'
 
     export let key: string
 
     let modal: Modal | undefined
+    const truncatedKey: string = truncateString(key, 12, 12)
 
-    const isPrimary: boolean = false
+    let isPrimary: boolean = $selectedWallet?.primaryKey === key
 
     function toggleModal(): void {
         modal?.toggle()
     }
 
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async function onTogglePrimaryKeyClick(): Promise<void> {
-        if (isPrimary) {
-            // TODO: Implement the logic to set primary key
+    function onTogglePrimaryKeyClick(): void {
+        if (!isPrimary) {
+            isPrimary = true
+            updateActiveWalletPersistedData($selectedWalletId, {
+                primaryKey: key,
+            })
+        } else {
+            isPrimary = false
+            updateActiveWalletPersistedData($selectedWalletId, {
+                primaryKey: undefined,
+            })
         }
         toggleModal()
     }
 
     $: MENU_ITEMS = [
         {
             title: localize(
-                `views.accountManagement.details.manageKeys.${isPrimary ? 'unsetAsPrimary' : 'setAsPrimary'}`
+                `views.accountManagement.details.manageKeys.${
+                    $selectedWallet?.primaryKey === key || isPrimary ? 'unsetAsPrimary' : 'setAsPrimary'
+                }`
             ),
             onClick: onTogglePrimaryKeyClick,
         },
@@ -36,10 +48,12 @@
 >
     <div class="flex flex-row items-center space-x-4 overflow-hidden">
         <Text classes="self-start overflow-hidden whitespace-nowrap">
-            {key}
+            {truncatedKey}
         </Text>
-        {#if isPrimary}
+        <TooltipIcon text={key} width={15} height={15} classes="flex break-all" />
+        {#if $selectedWallet?.primaryKey === key}
             <Pill
+                clearPadding
                 data={localize('views.accountManagement.details.manageKeys.primary').toLowerCase()}
                 textColor="blue-500"
             />

diff --git a/packages/shared/components/pills/Pill.svelte b/packages/shared/components/pills/Pill.svelte
@@ -7,17 +7,19 @@
     export let backgroundColor: string = ''
     export let darkBackgroundColor: string = ''
     export let classes: string = ''
+    export let clearPadding: boolean = false
 </script>
 
 <Text
     smaller
     fontWeight={FontWeight.semibold}
     color={textColor}
     darkColor={darkTextColor || textColor}
-    classes="px-2.5 py-1 rounded-2xl
+    classes="rounded-2xl
         {backgroundColor ? 'bg-' + backgroundColor : ''}
         {darkBackgroundColor ? 'dark:bg-' + darkBackgroundColor : ''}
         {classes}
+        {clearPadding ? '' : 'px-2.5 py-1'}
     "
 >
     {#if data}

diff --git a/packages/shared/lib/core/wallet/interfaces/persisted-wallet-data.interface.ts b/packages/shared/lib/core/wallet/interfaces/persisted-wallet-data.interface.ts
@@ -8,4 +8,5 @@ export interface IPersistedWalletData {
     removedProposalIds?: ParticipationEventId[]
     walletOptions: WalletOptions
     mainAccountId?: string | undefined
+    primaryKey?: string | undefined
 }