update network section in portfolio

bloomwalletio · Jan 22, 2024 · 2e5e1f9 · 2e5e1f9
1 parent e236e7c
commit 2e5e1f9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/desktop/views/dashboard/wallet/tab-section/portfolio/PortfolioTab.svelte b/packages/desktop/views/dashboard/wallet/tab-section/portfolio/PortfolioTab.svelte
@@ -43,9 +43,11 @@
 <portfolio-tab>
     <header-row>
         <Text type="sm" fontWeight="medium" textColor="secondary">{localize('views.dashboard.portfolio.asset')}</Text>
-        <Text type="sm" fontWeight="medium" textColor="secondary">
-            {localize('views.dashboard.portfolio.network')}
-        </Text>
+        <div class="text-center">
+            <Text type="sm" fontWeight="medium" textColor="secondary">
+                {localize('views.dashboard.portfolio.network')}
+            </Text>
+        </div>
         <div class="text-end">
             <Text type="sm" fontWeight="medium" textColor="secondary">
                 {localize('views.dashboard.portfolio.marketCap')}

diff --git a/packages/desktop/views/dashboard/wallet/tab-section/portfolio/components/TokenListRow.svelte b/packages/desktop/views/dashboard/wallet/tab-section/portfolio/components/TokenListRow.svelte
@@ -6,11 +6,13 @@
     import { truncateString } from '@core/utils'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import { TokenAvatar, NetworkAvatar } from '@ui'
-    import { Text } from '@bloomwalletio/ui'
+    import { Text, Tooltip } from '@bloomwalletio/ui'
     import { activeProfile } from '@core/profile/stores'
 
     export let token: ITokenWithBalance
 
+    let anchor: HTMLDivElement
+
     function getTokenSupply(token: ITokenWithBalance): string {
         if (token.id !== BASE_TOKEN_ID) {
             return '-'
@@ -61,7 +63,7 @@
 
 <button on:click={onTokenRowClick} class="token-row">
     <div class="flex flex-row gap-4 items-start">
-        <TokenAvatar {token} size="lg" />
+        <TokenAvatar {token} size="lg" hideNetworkBadge />
         <div class="flex flex-col items-start justify-between text-start">
             <Text>
                 {token.metadata?.name ? truncateString(token.metadata.name, 13, 0) : truncateString(token.id, 6, 7)}
@@ -71,9 +73,11 @@
             </Text>
         </div>
     </div>
-    <div class="flex flex-row gap-2 text-start items-center">
-        <NetworkAvatar size="xs" networkId={token.networkId} />
-        <Text>{getNameFromNetworkId(token.networkId)}</Text>
+    <div class="h-full flex flex-row gap-2 justify-center items-center">
+        <div bind:this={anchor}>
+            <NetworkAvatar networkId={token.networkId} />
+        </div>
+        <Tooltip {anchor} placement="top" event="hover" text={getNameFromNetworkId(token.networkId)} />
     </div>
     <div class="text-end">
         <Text>{getTokenSupply(token)}</Text>

diff --git a/packages/shared/src/components/avatars/NetworkAvatar.svelte b/packages/shared/src/components/avatars/NetworkAvatar.svelte
@@ -4,7 +4,7 @@
     import { NetworkId, SupportedNetworkId, isSupportedNetworkId } from '@core/network'
 
     export let networkId: NetworkId
-    export let size: 'xxs' | 'xs' | 'sm' | 'md' = 'base'
+    export let size: 'xxs' | 'xs' | 'sm' | 'base' | 'md' = 'base'
     export let shape: 'circle' | 'square' | 'squircle' = 'circle'
 
     const AVATAR_BACKGROUND_COLOR: { [id in SupportedNetworkId]: string } = {