feat: show total tokens in the asset list (#8249)

evavirseda · begonaalvarezd · cpl121 · web-flow · commit 144f1d32d97d · 2024-03-28T17:26:50.000+01:00
* feat: show token balance

* fix: show total and available mana properly

* fix: update balanceSummary details

* fix import

* improvements

* feat: improve balance brekdown view, refine styles and update locales

---------

Co-authored-by: Begoña Álvarez de la Cruz &lt;balvarez@boxfish.studio&gt;
Co-authored-by: cpl121 &lt;100352899+cpl121@users.noreply.github.com&gt;
diff --git a/packages/desktop/components/popups/BalanceBreakdownPopup.svelte b/packages/desktop/components/popups/BalanceBreakdownPopup.svelte
@@ -175,7 +175,7 @@
                 subtitleKey={breakdownKey}
                 amount={breakdown[breakdownKey].amount}
                 subBreakdown={breakdown[breakdownKey].subBreakdown}
-                isBaseToken={breakdown[breakdownKey].isBaseToken}
+                isBaseToken={breakdownKey !== 'mana'}
             />
         {/each}
         <BalanceSummarySection titleKey="totalBalance" amount={Number(walletBalance?.baseCoin?.total ?? 0)} bold />
diff --git a/packages/desktop/components/popups/TokenInformationPopup.svelte b/packages/desktop/components/popups/TokenInformationPopup.svelte
@@ -23,13 +23,16 @@
         AssetActionsModal,
         MeatballMenuButton,
         Modal,
+        BalanceSummarySection,
     } from '@ui'
     import { TextHintVariant } from '@ui/enums'
     import { MANA_ID } from '@core/network'
 
     export let asset: IAsset
     export let activityId: string = undefined
 
+    const balanceSummary = getBalanceSummary()
+
     let modal: Modal
 
     function onSkipClick(): void {
@@ -72,10 +75,20 @@
             overflow: true,
         })
     }
+
+    function getBalanceSummary(): { amount: number; details?: { [key: string]: { amount: number } } } {
+        const totalBalance = asset?.balance?.total
+
+        const details = {
+            availableAmount: { amount: asset?.balance?.available },
+            conditionallyLocked: { amount: asset?.balance?.total - asset?.balance?.available },
+        }
+        return { amount: totalBalance, details }
+    }
 </script>
 
 {#if asset}
-    <div class="space-y-6">
+    <div class="space-y-6 max-h-xl scrollable-y">
         <div class="flex flex-row justify-between items-center space-x-3 mr-8">
             <Text
                 type={TextType.h4}
@@ -127,9 +140,16 @@
                         isCopyable
                     />
                 {/if}
+                <balance-wrapper class="flex flex-col bg-gray-50 dark:bg-gray-850 px-4 py-4 rounded-lg">
+                    <BalanceSummarySection
+                        {asset}
+                        titleKey="totalBalanceAmount"
+                        amount={balanceSummary?.amount}
+                        subBreakdown={balanceSummary?.details}
+                    />
+                </balance-wrapper>
             </div>
         </div>
-
         <div class="flex flex-row flex-nowrap w-full space-x-4">
             {#if asset.verification?.status === NotVerifiedStatus.New}
                 <Button outline classes="w-full" onClick={onSkipClick}>
diff --git a/packages/shared/components/BalanceSummaryRow.svelte b/packages/shared/components/BalanceSummaryRow.svelte
@@ -6,33 +6,39 @@
     export let bold: boolean = false
     export let amount: string
     export let convertedAmount: string
+    export let secondaryStyle: boolean = false
 
-    const PRIMARY_TEXT_CONFIG = {
-        color: 'gray-800',
-        darkColor: 'white',
-        fontSize: '15',
-        fontWeight: bold ? FontWeight.semibold : FontWeight.normal,
-        lineHeight: '5',
-    }
-
-    const SECONDARY_TEXT_CONFIG = {
-        color: 'gray-600',
-        darkColor: 'gray-400',
-        fontSize: '13',
-        fontWeight: FontWeight.normal,
-        lineHeight: '4',
+    const TEXT_CONFIG = {
+        primary: {
+            color: 'gray-800',
+            darkColor: 'white',
+            fontSize: '15',
+            fontWeight: bold ? FontWeight.semibold : FontWeight.normal,
+            lineHeight: '5',
+        },
+        secondary: {
+            color: 'gray-600',
+            darkColor: 'gray-400',
+            fontSize: '13',
+            fontWeight: FontWeight.normal,
+            lineHeight: '4',
+        },
     }
 </script>
 
 <div class="flex flex-row justify-between flex-grow">
     <div class={title ? 'flex flex-col space-y-0.5' : null}>
-        <Text {...PRIMARY_TEXT_CONFIG}>{title}</Text>
+        <Text {...secondaryStyle ? TEXT_CONFIG.secondary : TEXT_CONFIG.primary}>
+            {title}
+        </Text>
         {#if subtitle}
-            <Text {...SECONDARY_TEXT_CONFIG}>{subtitle}</Text>
+            <Text {...TEXT_CONFIG.secondary}>{subtitle}</Text>
         {/if}
     </div>
     <div class="flex flex-col items-end space-y-0.5">
-        <Text {...PRIMARY_TEXT_CONFIG} classes="text-right">{amount}</Text>
-        <Text {...SECONDARY_TEXT_CONFIG} classes="text-right">{convertedAmount}</Text>
+        <Text {...secondaryStyle ? TEXT_CONFIG.secondary : TEXT_CONFIG.primary} classes="text-right">
+            {amount}
+        </Text>
+        <Text {...TEXT_CONFIG.secondary} classes="text-right">{convertedAmount}</Text>
     </div>
 </div>
diff --git a/packages/shared/components/BalanceSummarySection.svelte b/packages/shared/components/BalanceSummarySection.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { formatCurrency, localize } from '@core/i18n'
     import { getMarketAmountFromAssetValue } from '@core/market/utils'
-    import { formatTokenAmountBestMatch, selectedWalletAssets } from '@core/wallet'
+    import { IAsset, TokenMetadata, formatTokenAmountBestMatch, selectedWalletAssets } from '@core/wallet'
     import { BalanceSummaryRow, Icon } from '@ui'
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { activeProfile } from '@core/profile'
     import { DEFAULT_MANA } from '@core/network'
 
+    export let asset: IAsset | null = null
     export let titleKey: string
     export let subtitleKey: string = ''
     export let subBreakdown: { [key: string]: { amount: number } } = {}
@@ -19,8 +20,12 @@
     $: hasChildren = !!Object.keys(subBreakdown ?? {}).length
     $: ({ baseCoin } = $selectedWalletAssets?.[$activeProfile?.network?.id] ?? {})
 
-    function getAmount(amount: number): string {
-        return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin?.metadata) : ''
+    function getAmount(amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return baseCoin?.metadata ? formatTokenAmountBestMatch(amount, baseCoin?.metadata) : ''
+        } else {
+            return asset?.metadata ? formatTokenAmountBestMatch(amount, asset?.metadata) : ''
+        }
     }
 
     function getAmountMana(amount: number): string {
@@ -32,16 +37,28 @@
         }
     }
 
-    function handleAmount(isBaseToken: boolean, amount: number) {
-        return isBaseToken ? getAmount(amount) : getAmountMana(amount)
+    function handleAmount(isBaseToken: boolean = false, amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return isBaseToken ? getAmount(amount, null) : getAmountMana(amount)
+        } else {
+            return getAmount(amount, asset)
+        }
     }
 
-    function handleCurrencyAmount(isBaseToken: boolean, amount: number) {
-        return isBaseToken ? getCurrencyAmount(amount) : getAmountMana(amount)
+    function handleCurrencyAmount(isBaseToken: boolean = false, amount: number, asset: IAsset | null): string {
+        if (!asset) {
+            return isBaseToken ? getCurrencyAmount(amount, null, baseCoin) : ''
+        } else {
+            return ''
+        }
     }
 
-    function getCurrencyAmount(amount: number): string {
-        return baseCoin ? formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin)) : ''
+    function getCurrencyAmount(amount: number, asset: IAsset | null, baseCoin: IAsset | null | undefined): string {
+        if (!asset) {
+            return baseCoin ? formatCurrency(getMarketAmountFromAssetValue(amount, baseCoin)) : ''
+        } else {
+            return formatTokenAmountBestMatch(amount, asset?.metadata as TokenMetadata)
+        }
     }
 
     function toggleExpandedView(): void {
@@ -67,8 +84,8 @@
         <BalanceSummaryRow
             title={titleKey ? localize(`popups.balanceBreakdown.${titleKey}.title`) : ''}
             subtitle={subtitleKey ? localize(`popups.balanceBreakdown.${subtitleKey}.subtitle`) : ''}
-            amount={handleAmount(isBaseToken, amount)}
-            convertedAmount={handleCurrencyAmount(isBaseToken, amount)}
+            amount={handleAmount(isBaseToken, amount, asset)}
+            convertedAmount={handleCurrencyAmount(isBaseToken, amount, asset)}
             {bold}
         />
     </div>
@@ -77,9 +94,10 @@
             <balance-summary-row-expanded class="ml-8">
                 <BalanceSummaryRow
                     title={localize(`popups.balanceBreakdown.${breakdownKey}.title`)}
-                    subtitle={localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`)}
-                    amount={handleAmount(isBaseToken, subBreakdown[breakdownKey].amount)}
-                    convertedAmount={handleCurrencyAmount(isBaseToken, subBreakdown[breakdownKey].amount)}
+                    subtitle={!asset ? localize(`popups.balanceBreakdown.${breakdownKey}.subtitle`) : undefined}
+                    amount={handleAmount(isBaseToken, subBreakdown[breakdownKey].amount, asset)}
+                    convertedAmount={handleCurrencyAmount(isBaseToken, subBreakdown[breakdownKey].amount, asset)}
+                    secondaryStyle={asset ? true : false}
                 />
             </balance-summary-row-expanded>
         {/each}
diff --git a/packages/shared/components/tiles/AssetTile.svelte b/packages/shared/components/tiles/AssetTile.svelte
@@ -6,6 +6,7 @@
     import { getMarketAmountFromAssetValue } from '@core/market/utils/getMarketAmountFromAssetValue'
     import { getMarketPriceForAsset } from '@core/market/utils'
     import { AssetIconSize } from '@ui/enums'
+    import { MANA_ID } from '@core/network'
 
     export let asset: IAsset | undefined
     export let onClick: () => unknown
@@ -15,6 +16,7 @@
 
     $: marketPrice = asset ? getMarketPriceForAsset(asset) : undefined
     $: marketBalance = asset ? getMarketAmountFromAssetValue(asset.balance?.total, asset) : undefined
+    $: total = (asset?.id === MANA_ID ? asset?.balance?.available : asset?.balance?.total) ?? 0
 </script>
 
 {#if asset}
@@ -46,7 +48,7 @@
             </div>
             <div class="flex flex-col text-right">
                 <Text type={TextType.p} fontWeight={FontWeight.semibold}>
-                    {asset.metadata ? formatTokenAmountBestMatch(asset.balance?.total, asset.metadata) : '-'}
+                    {asset.metadata ? formatTokenAmountBestMatch(total, asset.metadata) : '-'}
                 </Text>
                 {#if !squashed}
                     <div class="flex flex-row justify-between items-center text-right">
diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
@@ -851,6 +851,15 @@
                 "title": "Available Mana",
                 "subtitle": "Mana available to send and issue blocks"
             },
+            "totalBalanceAmount": {
+                "title": "Total balance amount"
+            },
+            "availableAmount": {
+                "title": "Available amount"
+            },
+            "conditionallyLocked": {
+                "title": "Conditionally locked amount"
+            },
             "minimizeStorageDepositButton": "Minimize storage deposit"
         },
         "minimizeStorageDeposit": {
