feat: split the accounts from the list into two

packages/desktop/components/AccountManagementDetails.svelte

@@ -41,7 +41,6 @@
  import { PopupId, openPopup } from '@auxiliary/popup'
 
  export let selectedOutput: OutputData
- export let index: number
 
  let modal: Modal
  let address: string = ''
@@ -128,7 +127,7 @@
  <right-pane-title class="flex flex-col space-y-1">
  <title-container class="flex justify-between w-full items-center">
  <title-wrapper class="flex items-center space-x-2 py-1">
- <Text type={TextType.h2}>{localize('views.accountManagement.list.tile.title')} {index}</Text>
+ <Text type={TextType.h2}>{localize('views.accountManagement.list.tile.title')}</Text>
  {#if isImplicitAccount}
  <Pill backgroundColor="yellow-200" textColor="yellow-900"
  >{localize('views.accountManagement.list.tile.pill.pending')}</Pill

packages/desktop/components/AccountManagementList.svelte

@@ -3,17 +3,22 @@
  import { AccountAddress, AccountOutput, Output, OutputData } from '@iota/sdk/out/types'
  import { Height, Pane, TextType, Text, ClickableTile, FontWeight, Pill } from '@ui'
  import { localize } from '@core/i18n'
- import { AddressConverter, isAccountOutput, isImplicitAccountOutput } from '@core/wallet/utils'
- import { selectedWalletMainAccountId } from '@core/wallet'
+ import { AddressConverter } from '@core/wallet/utils'
+ import { selectedWalletMainAccountId, selectedWallet } from '@core/wallet'
 
  export let onAccountClick: (account: OutputData) => void
- export let allOutputs: OutputData[] = []
  export let selectedOutput: OutputData
 
  $: isSelected = (output: OutputData) => output.outputId === selectedOutput.outputId
+ $: accountsOrdered = $selectedWallet.accountOutputs.sort((a, b) =>
+ (a.output as AccountOutput).accountId > (b.output as AccountOutput).accountId ? 1 : -1
+ )
+ $: implicitAccountsOrdered = $selectedWallet.implicitAccountOutputs.sort((a, b) =>
+ a.outputId > b.outputId ? 1 : -1
+ )
 
- function getAccountId(output: OutputData): string | undefined {
- return isAccountOutput(output) ? (output.output as AccountOutput)?.accountId : undefined
+ function iMainAccount(output: Output): boolean {
+ return (output as AccountOutput).accountId === $selectedWalletMainAccountId
  }
 
  function formatAndTruncateAccount(output: Output): string {
@@ -28,41 +33,60 @@
 <left-pane class="flex flex-col w-1/3">
  <Pane height={Height.Full}>
  <left-pane-container class="flex flex-col space-y-10 h-full">
- <Text type={TextType.h2}>{localize('views.accountManagement.list.title')}</Text>
- <list-wrapper class="flex flex-col space-y-2">
- {#each allOutputs as output, index}
- <ClickableTile onClick={() => onAccountClick(output)} selected={isSelected(output)}>
- <div class="flex flex-col space-y-4">
- <div class="flex space-x-2">
- <Text
- type={TextType.h5}
- color="gray-800"
- darkColor="gray-500"
- fontWeight={FontWeight.semibold}
+ {#if accountsOrdered.length > 0}
+ <Text type={TextType.h2}>{localize('views.accountManagement.list.accountTitle')}</Text>
+ <list-wrapper class="flex flex-col space-y-2">
+ {#each accountsOrdered as output}
+ <ClickableTile onClick={() => onAccountClick(output)} selected={isSelected(output)}>
+ <div class="flex flex-col space-y-4">
+ <div class="flex space-x-2">
+ <Text
+ type={TextType.h5}
+ color="gray-800"
+ darkColor="gray-500"
+ fontWeight={FontWeight.semibold}
+ >
+ {localize('views.accountManagement.list.tile.title')}
+ </Text>
+ {#if iMainAccount(output.output)}
+ <Pill backgroundColor="blue-200" textColor="blue-600"
+ >{localize('views.accountManagement.list.tile.pill.main')}</Pill
+ >
+ {/if}
+ </div>
+ <Text type={TextType.p} fontSize="13" lineHeight="leading-140" color="gray-600"
+ >{formatAndTruncateAccount(output.output)}</Text
  >
- {localize('views.accountManagement.list.tile.title')}
- {index + 1}
- </Text>
- {#if getAccountId(output) === $selectedWalletMainAccountId}
- <Pill backgroundColor="blue-200" textColor="blue-600"
- >{localize('views.accountManagement.list.tile.pill.main')}</Pill
+ </div>
+ </ClickableTile>
+ {/each}
+ </list-wrapper>
+ {/if}
+ <hr />
+ {#if implicitAccountsOrdered.length > 0}
+ <Text type={TextType.h2}>{localize('views.accountManagement.list.implicitTitle')}</Text>
+ <list-wrapper class="flex flex-col space-y-2">
+ {#each implicitAccountsOrdered as output}
+ <ClickableTile onClick={() => onAccountClick(output)} selected={isSelected(output)}>
+ <div class="flex flex-col space-y-4">
+ <div class="flex space-x-2">
+ <Text
+ type={TextType.h5}
+ color="gray-800"
+ darkColor="gray-500"
+ fontWeight={FontWeight.semibold}
  >
- {/if}
- {#if isImplicitAccountOutput(output)}
+  {localize('views.accountManagement.list.tile.title')}
+  </Text>
  <Pill backgroundColor="yellow-200" textColor="yellow-900"
  >{localize('views.accountManagement.list.tile.pill.pending')}</Pill
  >
- {/if}
+ </div>
  </div>
- {#if isAccountOutput(output)}
- <Text type={TextType.p} fontSize="13" lineHeight="leading-140" color="gray-600"
- >{formatAndTruncateAccount(output.output)}</Text
- >
- {/if}
- </div>
- </ClickableTile>
- {/each}
- </list-wrapper>
+ </ClickableTile>
+ {/each}
+ </list-wrapper>
+ {/if}
  </left-pane-container>
  </Pane>
 </left-pane>

packages/desktop/components/popups/AccountConfirmationPopup.svelte

@@ -8,13 +8,13 @@
  processAndAddToActivities,
  selectedWallet,
  updateSelectedWallet,
+ AddressConverter,
  } from '@core/wallet'
  import { UnlockConditionType, PreparedTransaction, AccountOutput } from '@iota/sdk/out/types'
  import { closePopup } from '@auxiliary/popup'
  import { onMount } from 'svelte'
  import { handleError } from '@core/error/handlers/handleError'
  import { plainToInstance } from 'class-transformer'
- import { api } from '@core/api'
  import { getClient } from '@core/wallet/actions/getClient'
 
  export let _onMount: (..._: any[]) => Promise<void> = async () => {}
@@ -25,7 +25,7 @@
 
  $: address = {
  type: 0,
- pubKeyHash: api.bech32ToHex($selectedWallet.depositAddress),
+ pubKeyHash: AddressConverter.parseBech32Address($selectedWallet.depositAddress),
  }
  $: accountOutput = address
  ? {

packages/desktop/views/dashboard/account-management/AccountManagement.svelte

@@ -3,25 +3,17 @@
  import features from '@features/features'
  import { AccountManagementDetails, AccountManagementList } from '@components'
  import { AccountOutput, OutputData } from '@iota/sdk/out/types'
- import { isAccountOutput, isImplicitAccountOutput } from '@core/wallet'
-
- $: allAccountOutputs =
- $selectedWallet?.walletUnspentOutputs?.filter(
- (output) => isAccountOutput(output) || isImplicitAccountOutput(output)
- ) || []
 
  let selectedOutput =
- $selectedWallet.walletUnspentOutputs.find(
- (output) => (output.output as AccountOutput)?.accountId === $selectedWallet.mainAccountId
- ) || allAccountOutputs?.[0]
+ $selectedWallet?.accountOutputs.find(
+ (output) => (output.output as AccountOutput)?.accountId === $selectedWallet?.mainAccountId
+ ) ||
+ $selectedWallet?.accountOutputs?.[0] ||
+ $selectedWallet?.implicitAccountOutputs?.[0]
 
  function handleAccountClick(account: OutputData): void {
  selectedOutput = account
  }
-
- function setAccountOutputIndex(account: OutputData): number {
- return allAccountOutputs.indexOf(account) + 1
- }
 </script>
 
 {#if $selectedWallet}
@@ -31,14 +23,10 @@
  <div class="flex space-x-4 max-w-7xl justify-center w-full">
  {#key $selectedWallet?.id}
  {#if features.accountManagement.accountList.enabled}
- <AccountManagementList
- onAccountClick={handleAccountClick}
- allOutputs={allAccountOutputs}
- {selectedOutput}
- />
+ <AccountManagementList onAccountClick={handleAccountClick} {selectedOutput} />
  {/if}
  {#if features.accountManagement.accountDetails.enabled}
- <AccountManagementDetails {selectedOutput} index={setAccountOutputIndex(selectedOutput)} />
+ <AccountManagementDetails {selectedOutput} />
  {/if}
  {/key}
  </div>

packages/shared/locales/en.json

@@ -690,7 +690,8 @@
  },
  "accountManagement":{
  "list": {
- "title": "Your Accounts",
+ "accountTitle": " Accounts",
+ "implicitTitle": "Pending Accounts",
  "tile": {
  "title": "Account",
  "pill": {