Merge branch 'develop' into refactor/cleanup-qr

.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>
@@ -273,4 +272,10 @@
     app-body.top-placement {
         @apply top-12;
     }
+    hr {
+        @apply border-t;
+        @apply border-solid;
+        @apply border-gray-200;
+        @apply dark:border-gray-800;
+    }
 </style>

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/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/modals/AccountActionsMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { HR, MenuItem, MenuItemVariant, Modal, ToggleHiddenAccountMenuItem } from '@ui'
+    import { MenuItem, MenuItemVariant, Modal, ToggleHiddenAccountMenuItem } from '@ui'
 
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
@@ -41,7 +41,7 @@
         <MenuItem icon={Icon.Doc} title={localize('actions.viewBalanceBreakdown')} onClick={onViewBalanceClick} />
         <MenuItem icon={Icon.Customize} title={localize('actions.customizeAcount')} onClick={onCustomiseAccountClick} />
         <ToggleHiddenAccountMenuItem onClick={modal?.close} />
-        <HR />
+        <hr />
         {#if showDeleteAccount}
             <MenuItem
                 icon={Icon.Delete}

packages/desktop/components/modals/AccountSwitcherModal.svelte

@@ -7,7 +7,7 @@
     import { getMarketAmountFromAssetValue } from '@core/market/utils'
     import { activeProfile, getBaseToken, visibleActiveAccounts } from '@core/profile'
     import { formatTokenAmountBestMatch, selectedAccountAssets } from '@core/wallet'
-    import { AccountSwitcherMenuItem, FontWeight, HR, Icon, Modal, Text, TextType } from '@ui'
+    import { AccountSwitcherMenuItem, FontWeight, Icon, Modal, Text, TextType } from '@ui'
     import { tick } from 'svelte'
 
     export let modal: Modal = undefined
@@ -41,7 +41,7 @@
             {/each}
         </account-list>
     </account-list-container>
-    <HR />
+    <hr />
     <button
         type="button"
         class=" flex flex-row justify-between w-full p-8 hover:bg-gray-50 dark:hover:bg-gray-800"

packages/desktop/components/popups/CreateAccountPopup.svelte

@@ -63,27 +63,21 @@
     })
 </script>
 
-<create-account-popup class="flex flex-col h-full justify-between">
+<create-account-popup class="flex flex-col h-full justify-between space-y-4">
     <div>
         <title-container class="flex flex-row mb-6">
             <Text type={TextType.h5}>{localize('general.addAWallet')}</Text>
         </title-container>
-        <create-account-popup-inputs class="w-full flex flex-col justify-between">
+        <create-account-popup-inputs class="w-full flex flex-col justify-between space-y-4">
             <Input
                 {error}
                 bind:value={accountAlias}
                 placeholder={localize('general.accountName')}
                 autofocus
                 submitHandler={onCreateClick}
                 disabled={isBusy}
-                classes="mb-4"
-            />
-            <ColorPicker
-                title={localize('general.accountColor')}
-                bind:active={color}
-                classes="mb-4"
-                isCustomColorEnabled
             />
+            <ColorPicker title={localize('general.accountColor')} bind:active={color} isCustomColorEnabled />
         </create-account-popup-inputs>
     </div>
     <create-account-popup-actions class="flex flex-row justify-between px-2">

packages/desktop/components/popups/ManageAccountPopup.svelte

@@ -48,27 +48,21 @@
     }
 </script>
 
-<manage-account-popup class="flex flex-col h-full justify-between">
+<manage-account-popup class="flex flex-col h-full justify-between space-y-4">
     <div>
         <title-container class="flex flex-row mb-6">
             <Text type={TextType.h5}>{localize('general.manageAccount')}</Text>
         </title-container>
-        <manage-account-popup-inputs class="w-full flex flex-col justify-between">
+        <manage-account-popup-inputs class="w-full flex flex-col justify-between space-y-4">
             <Input
                 {error}
                 bind:value={accountAlias}
                 placeholder={localize('general.accountName')}
                 autofocus
                 submitHandler={onSaveClick}
                 disabled={isBusy}
-                classes="mb-4"
-            />
-            <ColorPicker
-                title={localize('general.accountColor')}
-                bind:active={color}
-                classes="mb-4"
-                isCustomColorEnabled
             />
+            <ColorPicker title={localize('general.accountColor')} bind:active={color} isCustomColorEnabled />
         </manage-account-popup-inputs>
     </div>
     <manage-account-popup-actions class="flex flex-row justify-between mt-2 px-2">

packages/desktop/components/popups/MintNativeTokenConfirmationPopup.svelte

@@ -2,7 +2,7 @@
     import { localize } from '@core/i18n'
     import { getBaseToken, checkActiveProfileAuth } from '@core/profile'
     import {
-        mintNativeToken,
+        createNativeToken,
         mintTokenDetails,
         TokenStandard,
         buildFoundryOutputData,
@@ -27,7 +27,12 @@
     async function prepareFoundryOutput(): Promise<void> {
         if ($mintTokenDetails && $selectedAccount && metadata) {
             const { totalSupply, circulatingSupply, aliasId } = $mintTokenDetails
-            const outputData = buildFoundryOutputData(Number(totalSupply), Number(circulatingSupply), metadata, aliasId)
+            const outputData = await buildFoundryOutputData(
+                Number(totalSupply),
+                Number(circulatingSupply),
+                metadata,
+                aliasId
+            )
             const preparedOutput = await $selectedAccount.buildFoundryOutput(outputData)
             storageDeposit = formatTokenAmountPrecise(Number(preparedOutput.amount) ?? 0, getBaseToken())
         }
@@ -89,7 +94,7 @@
     async function mintAction(): Promise<void> {
         try {
             if ($mintTokenDetails && metadata) {
-                await mintNativeToken(
+                await createNativeToken(
                     Number($mintTokenDetails.totalSupply),
                     Number($mintTokenDetails.circulatingSupply),
                     metadata

packages/desktop/components/popups/MintNftConfirmationPopup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Button, Text, FontWeight, NftImageOrIconBox, Tabs, KeyValueBox } from 'shared/components'
+    import { Button, Text, FontWeight, NftImageOrIconBox, Tabs, KeyValueBox, NftSize } from 'shared/components'
     import { localize } from '@core/i18n'
     import { selectedAccount } from '@core/account'
     import { buildNftOutputData, formatTokenAmountPrecise, mintNft, mintNftDetails } from '@core/wallet'
@@ -97,7 +97,7 @@
     </Text>
     <div class="space-y-2 max-h-100 scrollable-y flex-1">
         <nft-details class="flex flex-col justify-center items-center space-y-4">
-            <NftImageOrIconBox size="large" {type} />
+            <NftImageOrIconBox size={NftSize.Large} />
             <activity-details class="w-full h-full space-y-2 flex flex-auto flex-col shrink-0">
                 <Tabs bind:activeTab {tabs} />
                 {#if activeTab === Tab.Transaction}