enhancement: adds total balance to AccountSwitcher (#2601)

* enhancement: add total balance to AccountSwitcher * enhancement: adds create account button in breadcrumb AccountSwitcher * remove compact variant from account switcher * chore: increment bloom-ui version to 0.21.3 --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Jun 11, 2024 · a624244 · a624244
1 parent cef3664
commit a624244
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 15 deletions.
diff --git a/packages/desktop/components/AccountSwitcher.svelte b/packages/desktop/components/AccountSwitcher.svelte
@@ -9,7 +9,6 @@
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
 
     export let breadcrumb: boolean = false
-    export let compact: boolean = false
     export let hasCreateAccount: boolean = false
     export let placement: 'bottom-start' | 'bottom-end' = 'bottom-start'
 
@@ -30,7 +29,19 @@
                 onClick: () => onAccountClick(account.index),
             }
         })
+
+        const totalBalance = Object.values($allAccountFiatBalances)
+            .reduce((acc, balance) => Number(acc) + Number(balance), 0)
+            .toString()
+
+        items = items.concat({
+            title: localize('general.totalBalance'),
+            subtitle: formatCurrency(totalBalance),
+            selected: false,
+            hidden: accounts.length < 2,
+        })
     }
+
     $: setItems($visibleActiveAccounts, $selectedAccount?.index)
 
     function onCreateAccountClick(): void {
@@ -41,7 +52,7 @@
 
 <Menu
     {items}
-    {compact}
+    compact={false}
     {...hasCreateAccount && { button: { text: localize('general.newAccount'), onClick: onCreateAccountClick } }}
     {placement}
     maxHeight={320}
@@ -51,12 +62,12 @@
             {#if breadcrumb}
                 <Indicator color={$selectedAccount?.color} size="sm" />
             {/if}
-            <div class="flex flex-row justify-center items-center {compact ? 'space-x-1' : 'space-x-2'}">
-                <Text type={compact ? 'base' : 'body1'}>
+            <div class="flex flex-row justify-center items-center {breadcrumb ? 'space-x-1' : 'space-x-2'}">
+                <Text type={breadcrumb ? 'base' : 'body1'}>
                     {$selectedAccount?.name}
                 </Text>
                 {#if !breadcrumb}
-                    <Icon name={IconName.ChevronSelectorVertical} size={compact ? 'xs' : 'sm'} textColor="secondary" />
+                    <Icon name={IconName.ChevronSelectorVertical} size="sm" textColor="secondary" />
                 {/if}
             </div>
         </div>

diff --git a/packages/desktop/views/dashboard/components/Breadcrumbs.svelte b/packages/desktop/views/dashboard/components/Breadcrumbs.svelte
@@ -66,7 +66,7 @@
     />
     <div class="flex flex-row space-x-1 items-center">
         <div class="shrink-0">
-            <AccountSwitcher breadcrumb compact />
+            <AccountSwitcher breadcrumb hasCreateAccount />
         </div>
         <Icon name={IconName.ChevronRight} size="sm" />
         <Breadcrumb

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.21.1",
+        "@bloomwalletio/ui": "0.21.3",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",

diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -1738,7 +1738,8 @@
         "average": "Average",
         "fast": "Fast",
         "spender": "Spender",
-        "status": "Status"
+        "status": "Status",
+        "totalBalance": "Total balance"
     },
     "filters":{
         "title": "Filters",

diff --git a/yarn.lock b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/[email protected].1":
-  version "0.21.1"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.1/ce60ed69ad083f7ebc27164cc2fa69c8bf1a041f#ce60ed69ad083f7ebc27164cc2fa69c8bf1a041f"
-  integrity sha512-1//FX06CFUvv2SXUHQGZwQ9Y8FbO/Irj8cYO3cVXNbQHiM93UCtxgb/jYmryaOSHBrhH7OtrzDt+/0Hg88BA1w==
+"@bloomwalletio/[email protected].3":
+  version "0.21.3"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.3/2bf5587205e01b89f67cd6b990495d3a1175b5de#2bf5587205e01b89f67cd6b990495d3a1175b5de"
+  integrity sha512-McwM3nbGmGkkq8zJAWBfriMvSDXXurTrqL26vHrTbNP1LNJJSujRo4o2Oep0sjf1xeQRoHy7HZSPVml/EKwF/g==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
@@ -9911,7 +9911,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9988,7 +9997,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11355,7 +11371,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==