fix: balance breakdown alignment (#2364)

* fix: balance breakdown alignment * chore: improve type safety * chore: revert cols & rows
bloomwalletio · Apr 24, 2024 · d4dc7e5 · d4dc7e5
1 parent d5e7a21
commit d4dc7e5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 38 deletions.
diff --git a/packages/desktop/components/popup/popups/BalanceBreakdownPopup.svelte b/packages/desktop/components/popup/popups/BalanceBreakdownPopup.svelte
@@ -45,17 +45,17 @@
             unclaimed: BigInt(0),
             storageDepositReturn: BigInt(0),
             timelock: BigInt(0),
-            governance: $selectedAccount?.votingPower,
+            governance: $selectedAccount?.votingPower ?? BigInt(0),
         }
 
-        let unavailableTotalAmount = $selectedAccount?.votingPower
+        let unavailableTotalAmount = $selectedAccount?.votingPower ?? BigInt(0)
         for (const [outputId, unlocked] of Object.entries(accountBalance?.potentiallyLockedOutputs ?? {})) {
             if (unlocked) {
                 continue
             }
 
-            const output = (await $selectedAccount.getOutput(outputId)).output
-            if (output.type === OutputType.Treasury) {
+            const output = (await $selectedAccount?.getOutput(outputId))?.output
+            if (output?.type === OutputType.Treasury) {
                 continue
             }
 
@@ -65,15 +65,17 @@
             const commonOutput = output as CommonOutput
             if (containsUnlockCondition(commonOutput.unlockConditions, UnlockConditionType.Expiration)) {
                 type = UnavailableAmountType.Unclaimed
-                amount = BigInt(output.amount)
+                amount = BigInt(output?.amount ?? 0)
             } else if (
                 containsUnlockCondition(commonOutput.unlockConditions, UnlockConditionType.StorageDepositReturn)
             ) {
                 type = UnavailableAmountType.StorageDepositReturn
                 amount = getStorageDepositFromOutput(commonOutput)
             } else if (containsUnlockCondition(commonOutput.unlockConditions, UnlockConditionType.Timelock)) {
                 type = UnavailableAmountType.Timelock
-                amount = BigInt(output.amount)
+                amount = BigInt(output?.amount ?? 0)
+            } else {
+                continue
             }
 
             subBreakdown[type] += amount
@@ -86,7 +88,7 @@
     function getStorageDepositBreakdown(): BalanceBreakdown {
         const storageDeposits = accountBalance?.requiredStorageDeposit
         const totalStorageDeposit = storageDeposits
-            ? Object.values(accountBalance.requiredStorageDeposit).reduce(
+            ? Object.values(storageDeposits).reduce(
                   (total: bigint, value: string): bigint => total + BigInt(value ?? 0),
                   BigInt(0)
               )
@@ -129,10 +131,10 @@
 
     let currentExpandedSection: string
     const expanded: { [key: string]: boolean } = {}
-    function expandOne(breakdownKey) {
+    function expandOne(breakdownKey: string): void {
         if (currentExpandedSection === breakdownKey) {
             expanded[currentExpandedSection] = false
-            currentExpandedSection = undefined
+            currentExpandedSection = ''
         } else {
             expanded[currentExpandedSection] = false
             expanded[breakdownKey] = true

diff --git a/packages/shared/src/components/atoms/BalanceSummaryRow.svelte b/packages/shared/src/components/atoms/BalanceSummaryRow.svelte
@@ -10,24 +10,21 @@
     export let expanded: boolean = false
 </script>
 
-<div class="flex flex-row justify-between flex-grow">
-    <div class={'flex flex-col space-y-0.5'}>
+<div class="flex flex-col justify-between flex-grow space-y-0.5">
+    <div class="flex flex-row justify-between">
         <div class="flex flex-row gap-1 items-center">
             <Text fontWeight={bold ? 'bold' : 'semibold'}>{title}</Text>
             {#if expandable}
                 <Icon name={expanded ? IconName.ChevronUp : IconName.ChevronDown} size="xs" />
             {/if}
         </div>
-
-        {#if subtitle}
-            <Text textColor="secondary">
-                {subtitle}
-            </Text>
-        {/if}
+        <Text align="right" fontWeight={bold ? 'bold' : 'semibold'}>{amount}</Text>
     </div>
-    <div class="flex flex-col items-end space-y-0.5 text-right">
-        <Text fontWeight={bold ? 'bold' : 'semibold'}>{amount}</Text>
-        <Text textColor="secondary">
+    <div class="flex flex-row justify-between">
+        <Text align="left" textColor="secondary">
+            {subtitle}
+        </Text>
+        <Text align="right" textColor="secondary">
             {convertedAmount}
         </Text>
     </div>

diff --git a/packages/shared/src/components/atoms/BalanceSummarySection.svelte b/packages/shared/src/components/atoms/BalanceSummarySection.svelte
@@ -39,24 +39,16 @@
     }))
 </script>
 
-<button
-    type="button"
-    class="flex flex-col space-y-2"
-    class:expandable={hasChildren}
-    class:expanded
-    on:click={toggleExpandedView}
->
-    <div class="flex flex-row flex-grow justify-between space-x-2">
-        <BalanceSummaryRow
-            title={titleKey ? localize(`popups.balanceBreakdown.${titleKey}.title`) : ''}
-            subtitle={subtitleKey ? localize(`popups.balanceBreakdown.${subtitleKey}.subtitle`) : ''}
-            amount={getAmount(amount)}
-            convertedAmount={getCurrencyAmount(amount)}
-            expandable={hasChildren}
-            {expanded}
-            {bold}
-        />
-    </div>
+<button type="button" class="space-y-2" class:expandable={hasChildren} class:expanded on:click={toggleExpandedView}>
+    <BalanceSummaryRow
+        title={titleKey ? localize(`popups.balanceBreakdown.${titleKey}.title`) : ''}
+        subtitle={subtitleKey ? localize(`popups.balanceBreakdown.${subtitleKey}.subtitle`) : ''}
+        amount={getAmount(amount)}
+        convertedAmount={getCurrencyAmount(amount)}
+        expandable={hasChildren}
+        {expanded}
+        {bold}
+    />
     {#if expanded}
         <Table {items} />
     {/if}
@@ -66,6 +58,7 @@
     button {
         @apply rounded-xl;
         @apply p-2 -m-2;
+        @apply cursor-default;
         width: 432x;
     }
     .expandable {