feat: Add basic address history popup with sdk known addresses (#7682)

* feat: Add Address history popup to Account actions menu

* feat: Implement a list of known addresses in AddressHistoryPopup

* feat: Use KeyValueBox in a VirtualList to list addresses with index

* enhancemenet: improve address history popup

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>

packages/desktop/components/modals/AccountActionsMenu.svelte

@@ -3,7 +3,7 @@
 
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
-    import { activeAccounts, isActiveLedgerProfile, visibleActiveAccounts } from '@core/profile/stores'
+    import { activeAccounts, activeProfile, isActiveLedgerProfile, visibleActiveAccounts } from '@core/profile/stores'
     import { deleteAccount } from '@core/profile-manager/actions'
 
     import { Icon } from '@auxiliary/icon/enums'
@@ -12,6 +12,7 @@
     import { checkOrConnectLedger } from '@core/ledger'
     import { showAppNotification } from '@auxiliary/notification'
     import { handleError } from '@core/error/handlers'
+    import { NetworkId } from '@core/network/enums'
 
     export let modal: Modal = undefined
 
@@ -28,6 +29,11 @@
         modal?.close()
     }
 
+    function onViewAddressHistoryClick(): void {
+        openPopup({ id: PopupId.AddressHistory })
+        modal?.close()
+    }
+
     function onVerifyAddressClick(): void {
         const ADDRESS_INDEX = 0
         checkOrConnectLedger(() => {
@@ -66,6 +72,13 @@
 <Modal bind:this={modal} {...$$restProps}>
     <account-actions-menu class="flex flex-col">
         <MenuItem icon={Icon.Doc} title={localize('actions.viewBalanceBreakdown')} onClick={onViewBalanceClick} />
+        {#if $activeProfile?.network?.id === NetworkId.Iota}
+            <MenuItem
+                icon={Icon.Timer}
+                title={localize('actions.viewAddressHistory')}
+                onClick={onViewAddressHistoryClick}
+            />
+        {/if}
         <MenuItem icon={Icon.Customize} title={localize('actions.customizeAcount')} onClick={onCustomiseAccountClick} />
         {#if $isActiveLedgerProfile}
             <MenuItem

packages/desktop/components/popups/AddressHistoryPopup.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { getSelectedAccount } from '@core/account'
+    import { localize } from '@core/i18n'
+    import { truncateString } from '@core/utils'
+    import { AccountAddress } from '@iota/sdk/out/types'
+    import VirtualList from '@sveltejs/svelte-virtual-list'
+    import { FontWeight, KeyValueBox, Spinner, Text, TextType } from 'shared/components'
+    import { onMount } from 'svelte'
+
+    let addressList: AccountAddress[] | undefined = undefined
+
+    onMount(() => {
+        getSelectedAccount()
+            ?.addresses()
+            .then((_addressList) => {
+                addressList = _addressList?.sort((a, b) => a.keyIndex - b.keyIndex) ?? []
+            })
+            .catch((err) => {
+                console.error(err)
+                addressList = []
+            })
+    })
+</script>
+
+<div class="flex flex-col space-y-6">
+    <Text type={TextType.h3} fontWeight={FontWeight.semibold} lineHeight="6">
+        {localize('popups.addressHistory.title')}
+    </Text>
+    <Text fontSize="15" color="gray-700" classes="text-left">{localize('popups.addressHistory.disclaimer')}</Text>
+    {#if addressList}
+        {#if addressList.length > 0}
+            <div class="w-full flex-col space-y-2 virtual-list-wrapper">
+                <VirtualList items={addressList} let:item>
+                    <div class="mb-1">
+                        <KeyValueBox
+                            isCopyable
+                            classes="flex items-center w-full py-4"
+                            keyText={truncateString(item?.address, 15, 15)}
+                            valueText={localize('popups.addressHistory.indexAndType', {
+                                values: {
+                                    index: item.keyIndex,
+                                    internal: item.internal,
+                                },
+                            })}
+                            copyValue={item.address}
+                            backgroundColor="gray-50"
+                            darkBackgroundColor="gray-900"
+                        />
+                    </div>
+                </VirtualList>
+            </div>
+        {:else}
+            <Text secondary classes="text-center">-</Text>
+        {/if}
+    {:else}
+        <div class="flex items-center justify-center">
+            <Spinner />
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .virtual-list-wrapper :global(svelte-virtual-list-viewport) {
+        margin-right: -1rem !important;
+        flex: auto;
+        overflow-y: scroll;
+        padding-right: 1.5rem !important;
+        min-height: 52px;
+        max-height: 300px;
+    }
+
+    .virtual-list-wrapper :global(svelte-virtual-list-contents) {
+        margin-right: -1rem !important;
+    }
+</style>

packages/desktop/components/popups/Popup.svelte

@@ -12,6 +12,7 @@
     import ActivityDetailsPopup from './ActivityDetailsPopup.svelte'
     import AddNodePopup from './AddNodePopup.svelte'
     import AddProposalPopup from './AddProposalPopup.svelte'
+    import AddressHistoryPopup from './AddressHistoryPopup.svelte'
     import AliasConfirmationPopup from './AliasConfirmationPopup.svelte'
     import BackupStrongholdPopup from './BackupStrongholdPopup.svelte'
     import BurnNativeTokensPopup from './BurnNativeTokensPopup.svelte'
@@ -97,6 +98,7 @@
         [PopupId.ActivityDetails]: ActivityDetailsPopup,
         [PopupId.AddNode]: AddNodePopup,
         [PopupId.AddProposal]: AddProposalPopup,
+        [PopupId.AddressHistory]: AddressHistoryPopup,
         [PopupId.AliasConfirmation]: AliasConfirmationPopup,
         [PopupId.BackupStronghold]: BackupStrongholdPopup,
         [PopupId.BurnNativeTokens]: BurnNativeTokensPopup,

packages/shared/lib/auxiliary/popup/enums/popup-id.enum.ts

@@ -3,6 +3,7 @@ export enum PopupId {
     ActivityDetails = 'activityDetails',
     AddNode = 'addNode',
     AddProposal = 'addProposal',
+    AddressHistory = 'addressHistory',
     AliasConfirmation = 'aliasConfirmation',
     BackupStronghold = 'backupStronghold',
     BurnNativeTokens = 'burnNativeTokens',

packages/shared/locales/en.json

@@ -812,12 +812,6 @@
             "errorBody2": "You currently have {balance} remaining on this wallet. Please move these funds to a different wallet and try again.",
             "errorBody3": "You cannot hide this wallet, you must have at least one."
         },
-        "addressHistory": {
-            "title": "{name} address history",
-            "currentBalance": "Balance: {balance}",
-            "internal": "Internal Address",
-            "external": "Deposit Address"
-        },
         "excludeNode": {
             "title": "Exclude node",
             "body": "Are you sure you want to exclude {url} from the available node pool?"
@@ -1188,6 +1182,12 @@
         "nodeAuthRequired": {
             "title": "Authentication required",
             "body": "This node requires additional authentication. Please fill in the appropriate information."
+        },
+        "addressHistory": {
+            "title": "Address history",
+            "disclaimer": "List of addresses with funds or known by this profile",
+            "indexAndType": "{internal, select, true {Internal address} other {Deposit address}} {index}",
+            "internal": "Internal"
         }
     },
     "charts": {
@@ -1338,6 +1338,7 @@
         "visitFaq": "Visit FAQ",
         "viewDownloads" : "View downloads",
         "viewStatus": "View status",
+        "viewAddressHistory": "View address history",
         "viewBalanceBreakdown": "View balance breakdown",
         "verifyDepositAddress": "Verify deposit address",
         "showHiddenAccounts": "Show hidden wallets",