Merge pull request #7781 from iotaledger/release/desktop-iota-2.0.4

release: desktop iota 2.0.4

Author: begonaalvarezd

.github/ISSUE_TEMPLATE/create-task.yml

@@ -18,25 +18,4 @@ body:
           label: Task description
           description: Describe the task that needs to be completed.
       validations:
-          required: true
-
-    - type: textarea
-      id: requirements
-      attributes:
-          label: Requirements
-          description: What are the requirements for this task, this could be a checklist of subtasks.
-      validations:
-          required: true
-
-    - type: checkboxes
-      id: checklist
-      attributes:
-          label: Creation checklist
-          description: 'Before submitting this task please ensure you have done the following if necessary:'
-          options:
-              - label: I have assigned this task to the correct people
-                required: false
-              - label: I have added the most appropriate labels
-                required: false
-              - label: I have linked the correct milestone and/or project
-                required: false
+          required: true

.prettierrc.yml

@@ -8,3 +8,9 @@ singleQuote: true
 tabWidth: 4
 trailingComma: es5
 useTabs: false
+plugins:
+  - prettier-plugin-svelte
+overrides:
+  - files: '*.svelte'
+    options:
+      parser: 'svelte'

package.json

@@ -29,8 +29,8 @@
         "check-types:shared": "cd packages/shared && tsc --project tsconfig.base.json --pretty --noEmit",
         "docs:start": "cd docs/ && retype start",
         "format": "yarn format:write",
-        "format:check": "prettier -c \"**/*.{ts,js,json,scss,css,svelte}\"",
-        "format:write": "prettier -w \"**/*.{ts,js,json,scss,css,svelte}\"",
+        "format:check": "prettier --plugin prettier-plugin-svelte -c \"**/*.{ts,js,json,scss,css,svelte}\"",
+        "format:write": "prettier --plugin prettier-plugin-svelte -w \"**/*.{ts,js,json,scss,css,svelte}\"",
         "lint": "yarn lint:fix",
         "lint:check": "eslint . --cache",
         "lint:fix": "eslint . --cache --fix",

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/ActivityDetailsPopup.svelte

@@ -1,20 +1,11 @@
 <script lang="ts">
+    import { PopupId, closePopup, openPopup } from '@auxiliary/popup'
+    import { openUrlInBrowser } from '@core/app'
     import { localize } from '@core/i18n'
+    import { ExplorerEndpoint } from '@core/network'
     import { getOfficialExplorerUrl } from '@core/network/utils'
-    import {
-        Text,
-        Button,
-        FontWeight,
-        TextType,
-        BasicActivityDetails,
-        AliasActivityDetails,
-        FoundryActivityDetails,
-        GovernanceActivityDetails,
-        NftActivityDetails,
-        ConsolidationActivityDetails,
-        ActivityInformation,
-    } from 'shared/components'
-    import { openUrlInBrowser } from '@core/app'
+    import { activeProfile, checkActiveProfileAuth } from '@core/profile'
+    import { setClipboard, truncateString } from '@core/utils'
     import {
         ActivityAsyncStatus,
         ActivityDirection,
@@ -23,13 +14,21 @@
         rejectActivity,
         selectedAccountActivities,
     } from '@core/wallet'
-    import { activeProfile, checkActiveProfileAuth } from '@core/profile'
-    import { setClipboard } from '@core/utils'
-    import { truncateString } from '@core/utils'
-    import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
-    import { onMount } from 'svelte'
-    import { ExplorerEndpoint } from '@core/network'
+    import {
+        ActivityInformation,
+        AliasActivityDetails,
+        BasicActivityDetails,
+        Button,
+        ConsolidationActivityDetails,
+        FontWeight,
+        FoundryActivityDetails,
+        GovernanceActivityDetails,
+        NftActivityDetails,
+        Text,
+        TextType,
+    } from 'shared/components'
     import { TextHintVariant } from 'shared/components/enums'
+    import { onMount } from 'svelte'
 
     export let activityId: string
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
@@ -45,7 +44,13 @@
         activity?.asyncData?.asyncStatus === ActivityAsyncStatus.Unclaimed
 
     function onExplorerClick(): void {
-        openUrlInBrowser(`${explorerUrl}/${ExplorerEndpoint.Transaction}/${activity?.transactionId}`)
+        let url: string
+        if (activity?.type === ActivityType.Vesting) {
+            url = `${explorerUrl}/${ExplorerEndpoint.Output}/${activity?.outputId}`
+        } else {
+            url = `${explorerUrl}/${ExplorerEndpoint.Transaction}/${activity?.transactionId}`
+        }
+        openUrlInBrowser(url)
     }
 
     function onTransactionIdClick(): void {

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/LedgerAppGuidePopup.svelte

@@ -4,9 +4,10 @@
     import { LedgerAppName, ledgerAppName } from '@core/ledger'
     import { localize } from '@core/i18n'
     import { IllustrationEnum } from '@auxiliary/illustration'
+    import { Icon } from '@auxiliary/icon'
 
     let stepIndex = 0
-    const stepAnimations = [
+    const stepIlustrations = [
         IllustrationEnum.LedgerLiveUpdatedDesktop,
         IllustrationEnum.LedgerConnected2Desktop,
         $ledgerAppName === LedgerAppName.Shimmer
@@ -16,6 +17,14 @@
         IllustrationEnum.LedgerCloseLiveDesktop,
     ]
 
+    const stepIconWithIlustrations = [
+        undefined,
+        undefined,
+        undefined,
+        $ledgerAppName === LedgerAppName.Shimmer ? Icon.Shimmer : Icon.Iota,
+        undefined,
+    ]
+
     function changeIndex(increment: number): void {
         stepIndex += increment
     }
@@ -29,7 +38,12 @@
     {localize('popups.ledgerAppGuide.title', { values: { legacy: $ledgerAppName } })}
 </Text>
 <div class="w-full flex flex-row flex-wrap">
-    <LedgerAnimation illustration={stepAnimations[stepIndex]} classes="illustration-wrapper" bgClasses="top-6" />
+    <LedgerAnimation
+        illustration={stepIlustrations[stepIndex]}
+        iconNetwork={stepIconWithIlustrations[stepIndex]}
+        classes="illustration-wrapper"
+        bgClasses="top-6"
+    />
     <div class="w-full text-center my-9 px-10">
         <Text secondary>
             {localize(`popups.ledgerAppGuide.steps.${stepIndex}`, { values: { legacy: $ledgerAppName } })}

packages/desktop/components/popups/LedgerConnectionGuidePopup.svelte

@@ -4,16 +4,24 @@
     import { closePopup } from '@auxiliary/popup'
     import { localize } from '@core/i18n'
     import { IllustrationEnum } from '@auxiliary/illustration'
-    import { ledgerAppName } from '@core/ledger'
+    import { LedgerAppName, ledgerAppName } from '@core/ledger'
+    import { Icon } from '@auxiliary/icon'
 
     let stepIndex = 0
-    const stepAnimations = [
+    const stepIllustrations = [
         IllustrationEnum.LedgerBackgroundLiveDesktop,
         IllustrationEnum.LedgerPinDesktop,
         IllustrationEnum.LedgerOpenAppDesktop,
         IllustrationEnum.LedgerSupport,
     ]
 
+    const stepIconWithIlustrations = [
+        undefined,
+        undefined,
+        $ledgerAppName === LedgerAppName.Shimmer ? Icon.Shimmer : Icon.Iota,
+        undefined,
+    ]
+
     function changeIndex(increment: number): void {
         stepIndex += increment
     }
@@ -25,7 +33,12 @@
 
 <Text type={TextType.h4} classes="mb-6">{localize('popups.ledgerConnectionGuide.title')}</Text>
 <div class="w-full flex flex-row flex-wrap relative z-0">
-    <LedgerAnimation illustration={stepAnimations[stepIndex]} classes="illustration-wrapper" bgClasses="top-7" />
+    <LedgerAnimation
+        illustration={stepIllustrations[stepIndex]}
+        iconNetwork={stepIconWithIlustrations[stepIndex]}
+        classes="illustration-wrapper"
+        bgClasses="top-7"
+    />
     <div class="w-full text-center my-9 px-10 z-10">
         {#if typeof localize(`popups.ledgerConnectionGuide.steps.${stepIndex}`) === 'string'}
             <Text secondary classes="inline-block"

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,