Merge branch 'develop' into refactor/components/AccountInput

.github/workflows/handbook.yml

@@ -11,11 +11,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: retypeapp/action-build@v2
+      - uses: retypeapp/action-build@v3
         with:
           config: docs
 
-      - uses: retypeapp/action-github-pages@v2
+      - uses: retypeapp/action-github-pages@latest
         with:
           branch: retype
           update-branch: true

package.json

@@ -19,7 +19,7 @@
         "patch-package": "^7.0.0",
         "prettier": "^2.3.2",
         "prettier-plugin-svelte": "^2.7.0",
-        "retypeapp": "^2.3.0",
+        "retypeapp": "^3.1.0",
         "typescript": "^5.0.3"
     },
     "scripts": {
@@ -30,7 +30,7 @@
         "check-types": "yarn check-types:shared && yarn check-types:desktop",
         "check-types:desktop": "cd packages/desktop && tsc --pretty --noEmit",
         "check-types:shared": "cd packages/shared && tsc --project tsconfig.base.json --pretty --noEmit",
-        "docs:start": "cd docs/ && retype watch",
+        "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}\"",

packages/desktop/App.svelte

@@ -27,7 +27,7 @@
     import { showAppNotification } from '@auxiliary/notification'
     import { closePopup, openPopup, PopupId, popupState } from '@auxiliary/popup'
     import { getLocalisedMenuItems } from './lib/helpers'
-    import { ToastContainer, Transition } from '@ui'
+    import { NotificationManager, Transition } from '@ui'
     import { TitleBar, Popup } from '@components'
     import { Dashboard, LoginRouter, Settings, Splash } from '@views'
     import {
@@ -40,7 +40,6 @@
         openSettings,
     } from '@desktop/routers'
     import { downloadNextNftInQueue, nftDownloadQueue } from '@core/nfts'
-    import { closeDrawer } from '@desktop/auxiliary/drawer'
     import features from '@features/features'
     import { OnboardingRouterView } from '@views/onboarding'
 
@@ -122,14 +121,12 @@
         Platform.onEvent('menu-navigate-settings', () => {
             if ($loggedIn) {
                 closePopup()
-                closeDrawer()
                 $routerManager.openSettings()
             } else {
                 settings = true
             }
         })
         Platform.onEvent('menu-check-for-update', () => {
-            closeDrawer()
             openPopup({
                 id: PopupId.CheckForUpdates,
                 props: {
@@ -138,11 +135,9 @@
             })
         })
         Platform.onEvent('menu-error-log', () => {
-            closeDrawer()
             openPopup({ id: PopupId.ErrorLog })
         })
         Platform.onEvent('menu-diagnostics', () => {
-            closeDrawer()
             openPopup({ id: PopupId.Diagnostics })
         })
 
@@ -165,6 +160,10 @@
             })
         }
     }
+
+    function onCloseSettingsClick(): void {
+        settings = false
+    }
 </script>
 
 <app-container class="block w-full h-full">
@@ -197,9 +196,9 @@
                 <OnboardingRouterView />
             {/if}
             {#if settings}
-                <Settings handleClose={() => (settings = false)} />
+                <Settings handleClose={onCloseSettingsClick} />
             {/if}
-            <ToastContainer classes="absolute right-5 bottom-5 w-100" />
+            <NotificationManager />
         {/if}
     </app-body>
 </app-container>

packages/desktop/components/AccountActivity.svelte

@@ -62,7 +62,7 @@
     }
 </script>
 
-<div class="activity-list h-full p-6 flex flex-col flex-auto flex-grow shrink-0">
+<div class="activity-list h-full flex flex-col flex-auto flex-grow shrink-0">
     <div class="mb-4">
         <div class="relative flex flex-1 flex-row justify-between">
             <Text type="h5">{localize('general.activity')}</Text>

packages/desktop/components/AccountSummary.svelte

@@ -16,7 +16,7 @@
     $: ({ baseCoin } = $selectedAccountAssets[$activeProfile?.network.id])
 </script>
 
-<account-summary class="block relative p-6 space-y-4">
+<account-summary class="block relative space-y-4">
     <div class="flex flex-row items-center justify-between">
         <Text type={TextType.h5} classes="text-left">
             {localize('general.balanceWithNetwork', { values: { network: fomattedNetworkName } })}

packages/desktop/components/AccountSwitcher.svelte

@@ -3,7 +3,6 @@
     import { AccountSwitcherModal } from '@components'
     import { selectedAccount } from '@core/account/stores'
     import { Icon as IconEnum } from '@auxiliary/icon'
-    import { closeDrawer } from '@desktop/auxiliary/drawer'
 
     let modal: Modal
     let isModalOpened: boolean = false
@@ -13,7 +12,6 @@
     }
 
     function onButtonClick(): void {
-        closeDrawer()
         modal?.toggle()
     }
 </script>

packages/desktop/components/buttons/popup-buttons/MintNativeTokenButton.svelte

@@ -6,6 +6,7 @@
     import { resetMintTokenDetails } from '@core/wallet'
 
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
+    import { TextHintVariant } from 'shared/components/enums'
 
     $: hasAliases = $selectedAccount.balances?.aliases.length > 0
 
@@ -21,7 +22,7 @@
                 props: {
                     title: localize('popups.noAlias.title'),
                     hint: localize('popups.noAlias.description'),
-                    warning: true,
+                    variant: TextHintVariant.Warning,
                     confirmText: localize('actions.createAlias'),
                     onConfirm: () => {
                         closePopup()

packages/desktop/components/buttons/popup-buttons/RefreshTokenMetadataButton.svelte

@@ -6,6 +6,7 @@
 
     import { showAppNotification } from '@auxiliary/notification'
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
+    import { TextHintVariant } from 'shared/components/enums'
 
     function refreshTokenMetadata(): void {
         refreshAccountAssetsForActiveProfile(true)
@@ -23,7 +24,7 @@
             props: {
                 title: localize('actions.refreshTokenMetadata'),
                 hint: localize('general.refreshTokenMetadataHint'),
-                warning: true,
+                variant: TextHintVariant.Warning,
                 confirmText: localize('actions.reset'),
                 onConfirm: refreshTokenMetadata,
             },

packages/desktop/components/index.js

@@ -1,5 +1,4 @@
 export * from './buttons'
-export * from './drawers'
 export * from './filter'
 export * from './menu-buttons'
 export * from './modals'

packages/desktop/components/panes/ProposalInformationPane.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { KeyValueBox, Pane, Text } from '@ui'
+    import { Height, KeyValueBox, Pane, Text } from '@ui'
     import { formatDate, localize } from '@core/i18n'
     import { DATE_FORMAT, IKeyValueBoxList, milestoneToDate, truncateString } from '@core/utils'
     import { networkStatus } from '@core/network/stores'
@@ -61,7 +61,7 @@
     }
 </script>
 
-<Pane classes="p-6 h-fit {classes}">
+<Pane height={Height.Fit}>
     <Text smaller classes="mb-5">
         {localize('views.governance.details.proposalInformation.title')}
     </Text>

packages/desktop/components/popups/ActivityDetailsPopup.svelte

@@ -29,6 +29,7 @@
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
     import { onMount } from 'svelte'
     import { ExplorerEndpoint } from '@core/network'
+    import { TextHintVariant } from 'shared/components/enums'
 
     export let activityId: string
     export let _onMount: (..._: any[]) => Promise<void> = async () => {}
@@ -70,9 +71,8 @@
                 title: localize('actions.confirmRejection.title'),
                 description: localize('actions.confirmRejection.description'),
                 hint: localize('actions.confirmRejection.node'),
-                info: true,
                 confirmText: localize('actions.reject'),
-                warning: true,
+                variant: TextHintVariant.Warning,
                 onConfirm: () => {
                     rejectActivity(activityId)
                     closePopup()

packages/desktop/components/popups/BackupStrongholdPopup.svelte

@@ -2,6 +2,7 @@
     import { localize } from '@core/i18n'
     import { Button, Logo, Text, ExportStrongholdButton, TextType } from 'shared/components'
     import { closePopup } from '@auxiliary/popup'
+    import { Logo as LogoEnum } from 'shared/components/enums'
 
     const busy = false
 
@@ -16,7 +17,7 @@
     </Text>
     <div class="flex flex-col space-y-4">
         <div class="w-full p-10 bg-gray-50 dark:bg-gray-800 flex justify-center content-center">
-            <Logo width="50%" logo="logo-stronghold" />
+            <Logo width="50%" logo={LogoEnum.Stronghold} />
         </div>
         <div class="w-full">
             <Text type={TextType.p} color="gray-700">
@@ -28,6 +29,6 @@
         <Button outline classes="w-1/2" onClick={onCancelClick} disabled={busy}>
             {localize('actions.cancel')}
         </Button>
-        <ExportStrongholdButton showNotification overrideTitle={localize('actions.backup')} classes="w-1/2" />
+        <ExportStrongholdButton showNotification title={localize('actions.backup')} classes="w-1/2" />
     </div>
 </div>

packages/desktop/components/popups/BalanceBreakdownPopup.svelte

@@ -12,6 +12,7 @@
     import { consolidateOutputs } from '@core/wallet/actions/consolidateOutputs'
     import { getStorageDepositFromOutput } from '@core/wallet/utils/generateActivity/helper'
     import type { UnlockConditionTypes } from '@iota/types'
+    import { TextHintVariant } from 'shared/components/enums'
     import { BalanceSummarySection, Button, FontWeight, Text, TextType } from 'shared/components'
 
     interface BalanceBreakdown {
@@ -125,7 +126,7 @@
                 title: localize('popups.minimizeStorageDeposit.title'),
                 description: localize('popups.minimizeStorageDeposit.description'),
                 confirmText: localize('popups.minimizeStorageDeposit.confirmButton'),
-                info: true,
+                variant: TextHintVariant.Info,
                 onConfirm: async () => {
                     await checkActiveProfileAuth(
                         async () => {

packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte

@@ -7,6 +7,7 @@
     import { handleError } from '@core/error/handlers'
     import { onMount } from 'svelte'
     import { selectedAccount } from '@core/account'
+    import { TextHintVariant } from 'shared/components/enums'
 
     export let asset: IAsset
     export let rawAmount: string
@@ -55,7 +56,7 @@
     <div class="space-y-4">
         <KeyValueBox keyText={localize('popups.nativeToken.property.assetId')} valueText={asset.id} isCopyable />
         <KeyValueBox keyText={localize('general.amount')} valueText={formattedAmount} />
-        <TextHint warning text={localize('actions.confirmTokenBurn.hint')} />
+        <TextHint variant={TextHintVariant.Warning} text={localize('actions.confirmTokenBurn.hint')} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={onBackClick}>{localize('actions.back')}</Button>

packages/desktop/components/popups/BurnNativeTokensPopup.svelte

@@ -3,6 +3,7 @@
     import { localize } from '@core/i18n'
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
     import { IAsset } from '@core/wallet'
+    import { TextHintVariant } from 'shared/components/enums'
 
     export let asset: IAsset
     export let rawAmount: string = '0'
@@ -32,7 +33,7 @@
     </Text>
     <div class="space-y-4">
         <AssetAmountInput bind:this={assetAmountInput} bind:rawAmount {asset} containsSlider disableAssetSelection />
-        <TextHint warning text={localize('actions.confirmTokenBurn.hint')} />
+        <TextHint variant={TextHintVariant.Warning} text={localize('actions.confirmTokenBurn.hint')} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
         <Button classes="w-full" outline onClick={closePopup}>{localize('actions.cancel')}</Button>