refactor: move some settings in to menus (#885)

* ui: ui updates from bloom-ui * fix: toggle width in status tile * upgrade bloom-ui to 0.15.4 * fixes for update * enhancement: sync accounts in account menu * fix: move settings to menu --------- Co-authored-by: Tuditi <[email protected]>
bloomwalletio · Oct 4, 2023 · f36c2fb · f36c2fb
1 parent 43e0a09
commit f36c2fb
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 122 deletions.
diff --git a/packages/desktop/components/filter/Filter.svelte b/packages/desktop/components/filter/Filter.svelte
@@ -48,7 +48,7 @@
     }
 </script>
 
-<filter-container class="block h-6 relative">
+<filter-container class="items-center relative">
     <TogglableButton icon={IconName.Filter} bind:active={filterActive} onClick={modal?.toggle} />
     {#if activeFilterCount}
         <filter-badge

diff --git a/packages/desktop/components/menus/AccountActionsMenu.svelte b/packages/desktop/components/menus/AccountActionsMenu.svelte
@@ -11,6 +11,11 @@
 
     let menu: Menu | undefined = undefined
 
+    function onSyncAccountsClick(): void {
+        openPopup({ id: PopupId.SyncAccounts })
+        menu?.close()
+    }
+
     function onViewBalanceClick(): void {
         openPopup({ id: PopupId.BalanceBreakdown })
         menu?.close()
@@ -56,13 +61,18 @@
     let items: IMenuItem[] = []
     function setItems(account: IAccountState, nonHiddenActiveAccounts: IAccountState[], showDelete: boolean) {
         items = [
+            {
+                icon: IconName.Refresh,
+                title: localize('actions.syncAccounts'),
+                onClick: onSyncAccountsClick,
+            },
             {
                 icon: IconName.PieChart,
-                title: localize('actions.viewBalanceBreakdown'),
+                title: localize('general.balanceBreakdown'),
                 onClick: onViewBalanceClick,
             },
             {
-                icon: IconName.Sliders,
+                icon: IconName.SettingsSliders,
                 title: localize('actions.customizeAccount'),
                 onClick: onCustomiseAccountClick,
             },

diff --git a/packages/desktop/components/menus/TokenListMenu.svelte b/packages/desktop/components/menus/TokenListMenu.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { showNotification } from '@auxiliary/notification'
     import { IconName, Menu } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { PopupId, openPopup } from '../../lib/auxiliary/popup'
+    import { refreshAccountTokensForActiveProfile } from '@core/token/actions'
+    import { PopupId, closePopup, openPopup } from '../../lib/auxiliary/popup'
 
     let menu: Menu | undefined = undefined
 
@@ -12,15 +14,45 @@
         })
         menu?.close()
     }
+
+    function refreshTokenMetadata(): void {
+        refreshAccountTokensForActiveProfile(true)
+        showNotification({
+            variant: 'success',
+            text: localize('notifications.refreshTokenMetadata.success'),
+        })
+        closePopup()
+    }
+
+    function onRefreshTokenMetadataClick(): void {
+        openPopup({
+            id: PopupId.Confirmation,
+            props: {
+                title: localize('actions.refreshTokenMetadata'),
+                hint: localize('general.refreshTokenMetadataHint'),
+                warning: true,
+                confirmText: localize('actions.reset'),
+                onConfirm: refreshTokenMetadata,
+            },
+        })
+        menu?.close()
+    }
 </script>
 
-<Menu
-    bind:this={menu}
-    items={[
-        {
-            icon: IconName.Import,
-            title: localize('general.importErc20Token'),
-            onClick: onImportErc20TokenClick,
-        },
-    ]}
-/>
+<token-list-menu>
+    <Menu
+        bind:this={menu}
+        items={[
+            {
+                icon: IconName.Import,
+                title: localize('actions.importErc20Token'),
+                onClick: onImportErc20TokenClick,
+            },
+            {
+                icon: IconName.Refresh,
+                title: localize('actions.refreshTokenMetadata'),
+                onClick: onRefreshTokenMetadataClick,
+            },
+        ]}
+    />
+</token-list-menu>
diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
@@ -12,6 +12,7 @@
     import AddNodePopup from './popups/AddNodePopup.svelte'
     import AddProposalPopup from './popups/AddProposalPopup.svelte'
     import AliasConfirmationPopup from './popups/AliasConfirmationPopup.svelte'
+    import BalanceBreakdownPopup from './popups/BalanceBreakdownPopup.svelte'
     import BackupStrongholdPopup from './popups/BackupStrongholdPopup.svelte'
     import BurnNativeTokensPopup from './popups/BurnNativeTokensPopup.svelte'
     import BurnNativeTokensConfirmationPopup from './popups/BurnNativeTokensConfirmationPopup.svelte'
@@ -43,15 +44,14 @@
     import SignMessagePopup from './popups/SignMessagePopup.svelte'
     import SendFlowPopup from './popups/SendFlowPopup.svelte'
     import StopVotingPopup from './popups/StopVotingPopup.svelte'
-    import BalanceBreakdownPopup from './popups/BalanceBreakdownPopup.svelte'
+    import SyncAccountsPopup from './popups/SyncAccountsPopup.svelte'
     import TestDeepLinkFormPopup from './popups/TestDeepLinkFormPopup.svelte'
     import TokenInformationPopup from './popups/TokenInformationPopup.svelte'
     import UnlockStrongholdPopup from './popups/UnlockStrongholdPopup.svelte'
     import VerifyLedgerTransactionPopup from './popups/VerifyLedgerTransactionPopup.svelte'
     import CheckForUpdatesPopup from './popups/CheckForUpdatesPopup.svelte'
     import VoteForProposal from './popups/VoteForProposalPopup.svelte'
     import VotingPowerToZeroPopup from './popups/VotingPowerToZeroPopup.svelte'
-    import WalletFinderPopup from './popups/WalletFinderPopup.svelte'
 
     export let id: PopupId
     export let props: any
@@ -95,8 +95,10 @@
         [PopupId.AddProposal]: AddProposalPopup,
         [PopupId.AliasConfirmation]: AliasConfirmationPopup,
         [PopupId.BackupStronghold]: BackupStrongholdPopup,
-        [PopupId.BurnNativeTokens]: BurnNativeTokensPopup,
+        [PopupId.BalanceBreakdown]: BalanceBreakdownPopup,
         [PopupId.BurnNativeTokensConfirmation]: BurnNativeTokensConfirmationPopup,
+        [PopupId.BurnNativeTokens]: BurnNativeTokensPopup,
+        [PopupId.CheckForUpdates]: CheckForUpdatesPopup,
         [PopupId.Confirmation]: ConfirmationPopup,
         [PopupId.ConnectLedger]: ConnectLedgerPopup,
         [PopupId.CreateAccount]: CreateAccountPopup,
@@ -125,15 +127,13 @@
         [PopupId.SendFlow]: SendFlowPopup,
         [PopupId.SignMessage]: SignMessagePopup,
         [PopupId.StopVoting]: StopVotingPopup,
-        [PopupId.BalanceBreakdown]: BalanceBreakdownPopup,
+        [PopupId.SyncAccounts]: SyncAccountsPopup,
         [PopupId.TestDeepLinkForm]: TestDeepLinkFormPopup,
         [PopupId.TokenInformation]: TokenInformationPopup,
         [PopupId.UnlockStronghold]: UnlockStrongholdPopup,
         [PopupId.VerifyLedgerTransaction]: VerifyLedgerTransactionPopup,
-        [PopupId.CheckForUpdates]: CheckForUpdatesPopup,
         [PopupId.VoteForProposal]: VoteForProposal,
         [PopupId.VotingPowerToZero]: VotingPowerToZeroPopup,
-        [PopupId.WalletFinder]: WalletFinderPopup,
     }
 
     function onKey(event: KeyboardEvent): void {

diff --git a/...nts/popup/popups/WalletFinderPopup.svelte → ...nts/popup/popups/SyncAccountsPopup.svelte b/...nts/popup/popups/WalletFinderPopup.svelte → ...nts/popup/popups/SyncAccountsPopup.svelte
diff --git a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -5,6 +5,7 @@ export enum PopupId {
     AddProposal = 'addProposal',
     AliasConfirmation = 'aliasConfirmation',
     BackupStronghold = 'backupStronghold',
+    BalanceBreakdown = 'balanceBreakdown',
     BurnNativeTokens = 'burnNativeTokens',
     BurnNativeTokensConfirmation = 'burnNativeTokensConfirmation',
     CheckForUpdates = 'checkForUpdates',
@@ -33,15 +34,14 @@ export enum PopupId {
     ReceiveAddress = 'receiveAddress',
     RemoveProposal = 'removeProposal',
     Revote = 'revote',
-    SignMessage = 'signMessage',
     SendFlow = 'sendFlow',
+    SignMessage = 'signMessage',
     StopVoting = 'stopVoting',
-    BalanceBreakdown = 'balanceBreakdown',
+    SyncAccounts = 'syncAccounts',
     TestDeepLinkForm = 'testDeepLinkForm',
     TokenInformation = 'tokenInformation',
     UnlockStronghold = 'unlockStronghold',
     VerifyLedgerTransaction = 'verifyLedgerTransaction',
     VoteForProposal = 'voteForProposal',
     VotingPowerToZero = 'votingPowerToZero',
-    WalletFinder = 'walletFinder',
 }
diff --git a/packages/desktop/views/dashboard/developer/Developer.svelte b/packages/desktop/views/dashboard/developer/Developer.svelte
@@ -8,7 +8,6 @@
         FaucetRequestButton,
         MintNativeTokenButton,
         MintNftButton,
-        RefreshTokenMetadataButton,
         TestDeepLinkButton,
     } from './components'
 </script>
@@ -43,9 +42,6 @@
                     {#if features.developerTools.deeplink.enabled}
                         <TestDeepLinkButton />
                     {/if}
-                    {#if features.developerTools.refreshTokens.enabled}
-                        <RefreshTokenMetadataButton />
-                    {/if}
                 </Pane>
             </div>
         {/key}

diff --git a/packages/desktop/views/dashboard/developer/components/RefreshTokenMetadataButton.svelte b/packages/desktop/views/dashboard/developer/components/RefreshTokenMetadataButton.svelte
diff --git a/packages/desktop/views/dashboard/developer/components/index.ts b/packages/desktop/views/dashboard/developer/components/index.ts
@@ -2,5 +2,4 @@ export { default as CreateAliasButton } from './CreateAliasButton.svelte'
 export { default as FaucetRequestButton } from './FaucetRequestButton.svelte'
 export { default as MintNativeTokenButton } from './MintNativeTokenButton.svelte'
 export { default as MintNftButton } from './MintNftButton.svelte'
-export { default as RefreshTokenMetadataButton } from './RefreshTokenMetadataButton.svelte'
 export { default as TestDeepLinkButton } from './TestDeepLinkButton.svelte'
diff --git a/packages/desktop/views/dashboard/settings/Settings.svelte b/packages/desktop/views/dashboard/settings/Settings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { isLocaleLoaded } from '@core/i18n'
     import { dashboardRouter, settingsRouter } from '@core/router'
-    import { Icon } from '@ui'
+    import { IconButton, IconName } from '@bloomwalletio/ui'
     import { onDestroy } from 'svelte'
     import { SettingsViewer } from './views'
 
@@ -20,9 +20,9 @@
     })
 </script>
 
-<div class="relative h-full w-full p-8 md:bg-white md:dark:bg-gray-900 flex flex-1">
-    <button on:click={handleClose || closeSettings} class="absolute top-8 right-8">
-        <Icon icon="close" classes="text-gray-800 dark:text-white" />
-    </button>
+<div class="relative h-full w-full p-8 bg-surface dark:bg-surface-dark flex flex-1">
+    <div class="absolute top-8 right-8">
+        <IconButton icon={IconName.CrossClose} on:click={handleClose || closeSettings} />
+    </div>
     <SettingsViewer />
 </div>
diff --git a/packages/desktop/views/dashboard/settings/views/advanced/WalletFinder.svelte b/packages/desktop/views/dashboard/settings/views/advanced/WalletFinder.svelte
diff --git a/packages/desktop/views/dashboard/settings/views/advanced/advanced-settings.constant.js b/packages/desktop/views/dashboard/settings/views/advanced/advanced-settings.constant.js
@@ -1,8 +1,7 @@
-import { WalletFinder, HiddenAccounts, DeveloperToggle } from '.'
+import { HiddenAccounts, DeveloperToggle } from '.'
 import { AdvancedSettingsRoute } from '@core/router'
 
 export const ADVANCED_SETTINGS = [
-    { component: WalletFinder, childRoute: AdvancedSettingsRoute.WalletFinder, requiresLogin: true },
     { component: HiddenAccounts, childRoute: AdvancedSettingsRoute.HiddenAccounts, requiresLogin: true },
     { component: DeveloperToggle, childRoute: AdvancedSettingsRoute.DeveloperToggle, requiresLogin: true },
 ]
diff --git a/packages/desktop/views/dashboard/settings/views/advanced/index.js b/packages/desktop/views/dashboard/settings/views/advanced/index.js
@@ -1,5 +1,4 @@
 export { default as DeveloperToggle } from './DeveloperToggle.svelte'
 export { default as HiddenAccounts } from './HiddenAccounts.svelte'
-export { default as WalletFinder } from './WalletFinder.svelte'
 
 export * from './advanced-settings.constant'
diff --git a/packages/desktop/views/dashboard/wallet/tab-section/TabSection.svelte b/packages/desktop/views/dashboard/wallet/tab-section/TabSection.svelte
@@ -1,41 +1,29 @@
 <script lang="ts">
-    import { Tabs, IconButton, IconName } from '@bloomwalletio/ui'
-    import { ActivityTab } from './activity'
-    import { PortfolioTab } from './portfolio'
+    import { Tabs } from '@bloomwalletio/ui'
+    import { Filter, TokenListMenu } from '@components'
+    import { activityFilter, activitySearchTerm } from '@core/activity'
     import { localize } from '@core/i18n'
-    import { Filter } from '@components'
     import { tokenFilter, tokenSearchTerm } from '@core/token/stores'
     import { SearchInput } from '@ui'
-    import { activityFilter, activitySearchTerm } from '@core/activity'
-    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+    import { ActivityTab } from './activity'
+    import { PortfolioTab } from './portfolio'
 
     let currentTab = 0
-
-    function onImportErc20TokenClick(): void {
-        openPopup({
-            id: PopupId.ImportErc20Token,
-            overflow: true,
-        })
-    }
 </script>
 
-<top-section class="flex flex-row justify-between px-5 py-4">
+<top-section class="flex flex-row justify-between px-5 py-4 items-center">
     <Tabs
         bind:currentTab
         tabs={[localize('views.dashboard.activity.tab'), localize('views.dashboard.portfolio.tab')]}
     />
-    <div class="flex flex-row gap-2 items-center">
+    <div class="flex flex-row gap-1 items-center">
         {#if currentTab === 0}
-            <div class="flex items-center" style="height: 36px">
-                <SearchInput bind:value={$activitySearchTerm} />
-            </div>
+            <SearchInput bind:value={$activitySearchTerm} />
             <Filter filterStore={activityFilter} />
         {:else if currentTab === 1}
-            <div class="flex items-center" style="height: 36px">
-                <SearchInput bind:value={$tokenSearchTerm} />
-            </div>
+            <SearchInput bind:value={$tokenSearchTerm} />
             <Filter filterStore={tokenFilter} />
-            <IconButton icon={IconName.Plus} on:click={onImportErc20TokenClick} />
+            <TokenListMenu />
         {/if}
     </div>
 </top-section>

diff --git a/packages/shared/src/components/inputs/TogglableButton.svelte b/packages/shared/src/components/inputs/TogglableButton.svelte
@@ -11,4 +11,4 @@
     }
 </script>
 
-<IconButton {icon} size="sm" textColor={active ? 'primary' : 'secondary'} on:click={clickToggle} />
+<IconButton {icon} textColor={active ? 'primary' : 'secondary'} on:click={clickToggle} />