chore: merge release 1.5.2 into develop

packages/backend/bindings/node/index.ts

@@ -3,7 +3,7 @@ import {
     AccountToCreate,
     AccountIdentifier,
     ListMessagesFilter,
-    SyncAccountOptions,
+    AccountSyncOptions,
     createAccount as _createAccount,
     removeAccount as _removeAccount,
     getAccount as _getAccount,
@@ -214,7 +214,7 @@ export const api = {
     },
     syncAccount: function (
         accountId: AccountIdentifier,
-        options?: SyncAccountOptions
+        options?: AccountSyncOptions
     ): (__ids: CommunicationIds) => Promise<string> {
         return (__ids: CommunicationIds) => _syncAccount(sendMessage, __ids, accountId, options)
     },

packages/desktop/public/index.html

@@ -7,7 +7,7 @@
             http-equiv="Content-Security-Policy"
             content="
             default-src 'self';
-            connect-src 'self' https://*.iota.org https://*.iota.works https://*.iota.cafe https://raw.githubusercontent.com/iotaledger/firefly/develop/packages/shared/lib/chrysalis.json https://raw.githubusercontent.com/iotaledger/participation-events/master/results/staking/shimmer.json https://raw.githubusercontent.com/iotaledger/participation-events/master/results/staking/assembly_01.json;
+            connect-src 'self' https://*.iota.org https://*.iota.works https://*.iota.cafe https://raw.githubusercontent.com/iotaledger/firefly/develop/packages/shared/lib/chrysalis.json https://raw.githubusercontent.com/iotaledger/participation-events/master/results/staking/ https://d36tzso9lqxl3c.cloudfront.net/results/staking/;
             object-src 'none';
             style-src 'self' 'unsafe-inline';
             media-src 'self' https://d17lo1ro77zjnd.cloudfront.net/firefly/videos/ledger_integration_v12.mp4"

packages/mobile/capacitor/walletPluginApi.ts

@@ -21,7 +21,7 @@ import {
     startBackgroundSync as _startBackgroundSync,
     stopBackgroundSync as _stopBackgroundSync,
     syncAccount as _syncAccount,
-    SyncAccountOptions,
+    AccountSyncOptions,
     syncAccounts as _syncAccounts,
 } from '@lib/typings/account'
 import { BridgeMessage, CommunicationIds, MessageResponse } from '@lib/typings/bridge'
@@ -188,7 +188,7 @@ export const api = {
         (__ids) =>
             _latestAddress(sendMessage, __ids, accountId),
     syncAccount:
-        (accountId: AccountIdentifier, options?: SyncAccountOptions): Api =>
+        (accountId: AccountIdentifier, options?: AccountSyncOptions): Api =>
         (__ids) =>
             _syncAccount(sendMessage, __ids, accountId, options),
     isLatestAddressUnused:

packages/shared/components/AccountNavigation.svelte

@@ -1,8 +1,8 @@
 <script lang="typescript">
     import { AccountSwitcher } from 'shared/components/drawerContent'
     import { mobileHeaderAnimation } from '@lib/animation'
-    import { activeProfile, getColor } from '@lib/profile'
-    import { selectedAccount } from '@lib/wallet'
+    import { getAccountColor } from '@lib/profile'
+    import { selectedAccountStore } from '@lib/wallet'
     import { createAccountCallback, WalletAccount } from '@lib/typings/wallet'
     import { Drawer, Icon, Text } from 'shared/components'
     import CreateAccount from 'shared/components/popups/CreateAccount.svelte'
@@ -54,8 +54,8 @@
             "
         use:animateTranslationLeft
     >
-        <span class="circle" style="--account-color: {getColor($activeProfile, $selectedAccount?.id)}" />
-        <Text type="h4">{$selectedAccount?.alias}</Text>
+        <span class="circle" style="--account-color: {getAccountColor($selectedAccountStore?.id)}" />
+        <Text type="h4">{$selectedAccountStore?.alias}</Text>
         <div class="transform transition-transform {isDrawerOpened ? 'rotate-180' : 'rotate-0'}">
             <Icon icon="chevron-down" height="18" width="18" classes="text-gray-800 dark:text-white" />
         </div>

packages/shared/components/AccountSwitcher.svelte

@@ -1,15 +1,18 @@
 <script lang="typescript">
-    import { WalletAccount } from '@lib/typings/wallet'
     import { AccountSwitcherModal, Icon, Text, Modal } from 'shared/components'
-    import { activeProfile, getColor, updateProfile } from '@lib/profile'
-    import { selectedAccount } from '@lib/wallet'
+    import { getAccountColor, updateProfile } from '@lib/profile'
+    import { selectedAccountStore } from '@lib/wallet'
+    import { WalletAccount } from '@lib/typings/wallet'
 
     export let accounts: WalletAccount[] = []
     export let onCreateAccount = (..._: any[]): void => {}
 
     let modal: Modal
     let isModalOpened: boolean
 
+    let lastSelectedAccount: WalletAccount = null
+    $: if ($selectedAccountStore) lastSelectedAccount = $selectedAccountStore
+
     function onClick() {
         modal?.toggle()
         updateProfile('hasFinishedSingleAccountGuide', true)
@@ -19,8 +22,8 @@
 <svelte:window on:click={() => (isModalOpened = modal?.isOpened())} />
 <div class="relative left-8" style="-webkit-app-region: none;">
     <button on:click={onClick} class="flex flex-row justify-center items-center space-x-2">
-        <div class="circle" style="--account-color: {getColor($activeProfile, $selectedAccount?.id)};" />
-        <Text type="h5">{$selectedAccount?.alias}</Text>
+        <div class="circle" style="--account-color: {getAccountColor(lastSelectedAccount?.id)};" />
+        <Text type="h5">{lastSelectedAccount?.alias ?? '---'}</Text>
         <div class="transform {isModalOpened ? 'rotate-180' : 'rotate-0'}">
             <Icon height="18" width="18" icon="chevron-down" classes="text-gray-800 dark:text-white" />
         </div>

packages/shared/components/ActivityDetail.svelte

@@ -6,7 +6,7 @@
     import { formatDate, localize } from '@core/i18n'
     import { getOfficialExplorer } from 'shared/lib/network'
     import { Platform } from 'shared/lib/platform'
-    import { activeProfile, getColor } from 'shared/lib/profile'
+    import { activeProfile, getAccountColor } from 'shared/lib/profile'
     import { CurrencyTypes } from 'shared/lib/typings/currency'
     import { Payload } from 'shared/lib/typings/message'
     import { WalletAccount } from 'shared/lib/typings/wallet'
@@ -128,8 +128,8 @@
         $currencies[CurrencyTypes.USD],
         $exchangeRates[$activeProfile?.settings.currency]
     )
-    $: senderColor = getColor($activeProfile, senderAccount?.id) as string
-    $: receiverColor = getColor($activeProfile, receiverAccount?.id) as string
+    $: senderColor = getAccountColor(senderAccount?.id) as string
+    $: receiverColor = getAccountColor(receiverAccount?.id) as string
 </script>
 
 {#if $mobile}

packages/shared/components/Button.svelte

@@ -26,6 +26,8 @@
     export let showHoverText = undefined
     export let iconOnly = false
     export let unstyled = false
+    export let iconHeight: string | undefined = undefined
+    export let iconWidth: string | undefined = undefined
 
     export let onClick = (): void | string => ''
 
@@ -59,7 +61,7 @@
         {disabled}
         bind:this={buttonElement}
     >
-        <Icon classes="mb-1" {icon} />
+        <Icon classes="mb-1" {icon} height={iconHeight} width={iconWidth} />
         <span class="text-12 leading-140">
             <slot />
         </span>
@@ -94,7 +96,7 @@
                     <div class="relative flex flex-row justify-between">
                         <div class="relative flex items-center flex-1">
                             <div class="absolute left-0 flex items-center">
-                                <Icon width="16" height="16" classes="mr-4" {icon} />
+                                <Icon width={iconWidth ?? '16'} height={iconHeight ?? '16'} classes="mr-4" {icon} />
                             </div>
                             <span class="font-bold text-12 leading-140"><slot /></span>
                         </div>
@@ -105,8 +107,8 @@
                             <span class="font-bold text-12 leading-140"><slot /></span>
                             <div class="absolute right-0 flex items-center">
                                 <Icon
-                                    width={showHoverText ? 20 : 16}
-                                    height={showHoverText ? 20 : 16}
+                                    width={showHoverText ? 20 : iconWidth ?? 16}
+                                    height={showHoverText ? 20 : iconHeight ?? 16}
                                     classes="ml-4 showHoverText"
                                     {icon}
                                 />
@@ -115,20 +117,20 @@
                     </div>
                 {/if}
             {:else if iconOnly}
-                <Icon width="24" height="24" {icon} />
+                <Icon width={iconWidth ?? 24} height={iconHeight ?? 24} {icon} />
             {:else}
-                <div class="relative flex flex-row justify-between">
-                    <div class="relative flex items-center flex-1">
-                        <div class="absolute left-0 flex items-center">
-                            <Icon classes="mr-4" {icon} />
-                        </div>
+                <div class="grid grid-cols-12 gap-4">
+                    <div class="col-span-1 h-full flex justify-center items-center justify-items-center">
+                        <Icon height={iconHeight} width={iconWidth} {icon} />
+                    </div>
+                    <div class="col-span-10 h-full flex items-center">
                         <span class="font-bold text-12 leading-140"><slot /></span>
                     </div>
-                    {#if !disabled}
-                        <div class="absolute right-0 flex items-center h-full">
+                    <div class="col-span-1 h-full flex items-center">
+                        {#if !disabled}
                             <Icon icon="chevron-right" classes="right" />
-                        </div>
-                    {/if}
+                        {/if}
+                    </div>
                 </div>
             {/if}
         {:else}
@@ -355,8 +357,6 @@
             }
             span {
                 @apply text-gray-800;
-                @apply ml-10;
-                @apply mr-6;
             }
             :global(svg) {
                 @apply text-blue-500;

packages/shared/components/ColorPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { Text, Icon, Tooltip, GradientPicker } from 'shared/components'
-    import { AccountColors } from 'shared/lib/wallet'
+    import { AccountColor } from '@lib/typings/color'
     import { isBright } from 'shared/lib/helpers'
     import { clickOutside } from 'shared/lib/actions'
     import { localize } from '@core/i18n'
@@ -10,7 +10,7 @@
     export let title = localize('views.picker.color.title')
     export let classes = ''
 
-    const accountColors = Object.values(AccountColors).filter((c) => /[#]/.test(c as string))
+    const accountColors = Object.values(AccountColor).filter((c) => /[#]/.test(c as string))
     const hex2rgb = (hex) => {
         hex = hex.length >= 7 ? hex : '#FFFFFF'
         return hex
@@ -62,7 +62,7 @@
         <Text type="h5">{title}</Text>
     </div>
     <ul class="{$mobile ? 'grid grid-cols-5' : 'flex flex-row flex-wrap'} gap-3.5">
-        {#each Object.keys(AccountColors).reduce((acc, val) => (/[#]/.test(val) ? acc : [...acc, val.toLowerCase()]), []) as color, i}
+        {#each Object.keys(AccountColor).reduce((acc, val) => (/[#]/.test(val) ? acc : [...acc, val.toLowerCase()]), []) as color, i}
             <li
                 tabindex="0"
                 class="w-12 h-12 rounded-lg ring-opacity-30 hover:ring-opacity-40 cursor-pointer flex justify-center items-center

packages/shared/components/MainMenu.svelte

@@ -1,8 +1,8 @@
 <script lang="typescript">
     import { Drawer, Icon, Text, ProfileActions } from 'shared/components'
     import { getInitials } from 'shared/lib/helpers'
-    import { activeProfile, getColor } from 'shared/lib/profile'
-    import { selectedAccount } from 'shared/lib/wallet'
+    import { activeProfile, getAccountColor } from 'shared/lib/profile'
+    import { selectedAccountStore } from 'shared/lib/wallet'
     import { Settings } from 'shared/routes'
     import {
         profileRoute,
@@ -16,7 +16,7 @@
 
     export let opacity = 1
 
-    $: profileColor = getColor($activeProfile, $selectedAccount?.id) as string
+    $: profileColor = getAccountColor($selectedAccountStore?.id) as string
 
     let drawer: Drawer
 

packages/shared/components/StakingAssetTile.svelte

@@ -27,7 +27,7 @@
     import { getBestTimeDuration } from 'shared/lib/time'
     import { formatUnitBestMatch } from 'shared/lib/units'
     import { capitalize } from 'shared/lib/utils'
-    import { selectedAccount } from 'shared/lib/wallet'
+    import { selectedAccountStore } from 'shared/lib/wallet'
 
     export let asset: Asset
 
@@ -78,7 +78,7 @@
     }
 
     function getAccount(accounts: WalletAccount[]): WalletAccount {
-        return accounts?.find((account) => account.alias === $selectedAccount?.alias)
+        return accounts?.find((account) => account.alias === $selectedAccountStore?.alias)
     }
 
     function getLocalizedTooltipText(): TooltipText {
@@ -103,7 +103,7 @@
                         }),
                     ],
                 }
-            } else if (!isAccountStaked($selectedAccount?.id) && isStakingPossible(stakingEventState)) {
+            } else if (!isAccountStaked($selectedAccountStore?.id) && isStakingPossible(stakingEventState)) {
                 const timeNeeded = getTimeUntilMinimumAirdropReward(airdrop)
                 const _getBody = () => {
                     if (timeNeeded) {

packages/shared/components/WalletPill.svelte

@@ -4,7 +4,7 @@
     import { localize } from '@core/i18n'
     import { isBright } from 'shared/lib/helpers'
     import { WalletAccount } from 'shared/lib/typings/wallet'
-    import { activeProfile, getColor } from 'shared/lib/profile'
+    import { getAccountColor } from 'shared/lib/profile'
 
     export let account: WalletAccount
     export let size: 's' | 'm' = 'm'
@@ -21,7 +21,7 @@
         showTooltip = !showTooltip
     }
 
-    $: backgroundColor = getColor($activeProfile, account.id)
+    $: backgroundColor = getAccountColor(account.id)
     $: bright = isBright(backgroundColor.toString())
     $: textColor = bright ? 'gray-800' : 'white'
 </script>

packages/shared/components/charts/Bar.svelte

@@ -1,13 +1,13 @@
 <script lang="typescript">
     import Chart from 'chart.js'
-    import { AccountColors } from 'shared/lib/wallet'
+    import { AccountColor } from '@lib/typings/color'
     import tailwindConfig from 'shared/tailwind.config.js'
     import { afterUpdate, onMount } from 'svelte'
     import resolveConfig from 'tailwindcss/resolveConfig'
 
     export let labels = []
     export let datasets = []
-    export let color = AccountColors.Blue.toString()
+    export let color = AccountColor.Blue.toString()
     export let inlineStyle = 'height: calc(50vh - 140px);'
     export let formatYAxis = (value: unknown): number => Number(value.toString())
 

packages/shared/components/charts/Line.svelte

@@ -1,18 +1,18 @@
 <script lang="typescript">
     import Chart from 'chart.js'
-    import { appSettings } from 'shared/lib/appSettings'
-    import { convertHexToRGBA } from 'shared/lib/helpers'
+    import { appSettings } from '@lib/appSettings'
+    import { convertHexToRGBA } from '@lib/helpers'
     import tailwindConfig from 'shared/tailwind.config.js'
     import { afterUpdate, onMount } from 'svelte'
     import resolveConfig from 'tailwindcss/resolveConfig'
-    import { AccountColors } from 'shared/lib/wallet'
+    import { AccountColor } from '@lib/typings/color'
 
     export let labels = []
     export let datasets = []
     export let xMaxTicks = 7
     export let yMaxTicks = 6
     export let formatYAxis = (value: unknown): number => Number(value.toString())
-    export let color = AccountColors.Blue.toString()
+    export let color = AccountColor.Blue.toString()
     export let beginAtZero = false
     export let inlineStyle = 'height: calc(50vh - 140px);'
 

packages/shared/components/drawerContent/AccountActions.svelte

@@ -5,17 +5,17 @@
     import { accountRouter, AccountRoute, resetWalletRoute } from '@core/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { mobile } from 'shared/lib/app'
-    import { selectedAccount, selectedMessage, wallet } from 'shared/lib/wallet'
+    import { selectedAccountStore, selectedMessage, wallet } from 'shared/lib/wallet'
 
     const { accounts } = $wallet
 
     const hiddenAccounts = $activeProfile?.hiddenAccounts ?? []
 
-    const hidden = hiddenAccounts.includes($selectedAccount?.id)
+    const hidden = hiddenAccounts.includes($selectedAccountStore?.id)
     const canDelete =
-        $selectedAccount.index === $accounts.length - 1 &&
-        $selectedAccount.rawIotaBalance === 0 &&
-        $selectedAccount.messages.length === 0
+        $selectedAccountStore.index === $accounts.length - 1 &&
+        $selectedAccountStore.rawIotaBalance === 0 &&
+        $selectedAccountStore.messages.length === 0
 
     function handleCustomiseAccountClick() {
         $accountRouter.goTo(AccountRoute.Manage)
@@ -38,7 +38,7 @@
     }
 
     function handleShowAccountClick() {
-        const idx = hiddenAccounts.indexOf($selectedAccount?.id)
+        const idx = hiddenAccounts.indexOf($selectedAccountStore?.id)
         if (idx >= 0) {
             hiddenAccounts.splice(idx, 1)
             updateProfile('hiddenAccounts', hiddenAccounts)

packages/shared/components/drawerContent/AccountSwitcher.svelte

@@ -5,16 +5,14 @@
     import { localize } from '@core/i18n'
     import { showAppNotification } from '@lib/notifications'
     import { participationAction } from '@lib/participation/stores'
-    import { activeProfile, getColor } from '@lib/profile'
-    import { isSyncing, isTransferring, selectedAccount, setSelectedAccount, wallet } from '@lib/wallet'
-    import { formatUnitPrecision } from '@lib/units'
-    import { Unit } from '@iota/unit-converter'
+    import { getAccountColor } from '@lib/profile'
+    import { isSyncing, isTransferring, selectedAccountStore, setSelectedAccount, wallet } from '@lib/wallet'
 
     export let accounts: WalletAccount[] = []
     export let handleCreateAccountPress = (): void => {}
 
     const handleMenuClick = () => $accountRouter.goTo(AccountRoute.Actions)
-    const isSelectedAccount = (accountId) => accountId !== $selectedAccount?.id
+    const isSelectedAccount = (accountId) => accountId !== $selectedAccountStore?.id
     const { balanceOverview } = $wallet
 
     let toggleEdit = false
@@ -59,7 +57,7 @@
                 on:click={() => handleAccountClick(account.id)}
                 class="hover:bg-gray-50 dark:hover:bg-gray-800 flex flex-row items-center space-x-4 p-4 pl-3 rounded"
             >
-                <div class="circle" style="--account-color: {getColor($activeProfile, account.id)};" />
+                <div class="circle" style="--account-color: {getAccountColor(account.id)};" />
                 <Text classes={isSelectedAccount(account.id) ? 'opacity-50' : ''} type="h5">
                     {account.alias}
                 </Text>

packages/shared/components/icon/icons.js

@@ -790,7 +790,7 @@ export const icons = {
         height: 24,
         path: [
             {
-                d: 'M13.5 6C13.5 5.17157 12.8284 4.5 12 4.5C11.1716 4.5 10.5 5.17157 10.5 6V10.5H6C5.17157 10.5 4.5 11.1716 4.5 12C4.5 12.8284 5.17157 13.5 6 13.5H10.5V18C10.5 18.8284 11.1716 19.5 12 19.5C12.8284 19.5 13.5 18.8284 13.5 18V13.5H18C18.8284 13.5 19.5 12.8284 19.5 12C19.5 11.1716 18.8284 10.5 18 10.5H13.5V6Z',
+                d: 'M14.4 2.4C14.4 1.07451 13.3254 0 12 0C10.6746 0 9.6 1.07451 9.6 2.4V9.6H2.4C1.07451 9.6 0 10.6746 0 12C0 13.3254 1.07451 14.4 2.4 14.4H9.6V21.6C9.6 22.9254 10.6746 24 12 24C13.3254 24 14.4 22.9254 14.4 21.6V14.4H21.6C22.9254 14.4 24 13.3254 24 12C24 10.6746 22.9254 9.6 21.6 9.6H14.4V2.4Z',
                 fillRule: 'evenodd',
                 clipRule: 'evenodd',
             },