feat: set a primary key (account management)

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}

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:

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"
             />

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}

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
 }