505 replace networkicon with networkavatar using avatar

packages/desktop/components/ContactAddressCard.svelte

@@ -11,7 +11,7 @@
     import { closeDrawer } from '@desktop/auxiliary/drawer'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
     import features from '@features/features'
-    import { MeatballMenuButton, MenuItem, Modal, NetworkIcon, Text } from '@ui'
+    import { MeatballMenuButton, MenuItem, Modal, NetworkAvatar, Text } from '@ui'
     import { FontWeight, TextType } from '@ui/enums'
     import { ContactBookRoute } from '@views/dashboard/drawers/contact-book/contact-book-route.enum'
     import { SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
@@ -55,7 +55,7 @@
 >
     <contact-address-head class="flex justify-between">
         <div class="flex items-center gap-2">
-            <NetworkIcon {networkId} />
+            <NetworkAvatar {networkId} size="xs" />
             <Text fontSize="text-16" fontWeight={FontWeight.semibold}>{getNameFromNetworkId(networkId)}</Text>
         </div>
         <contact-address-menu class="block relative">
@@ -98,7 +98,7 @@
                 <Button
                     size="sm"
                     text={localize('actions.send')}
                     on:click={() => onSendClick(contactAddress.address)}
                 />
             {/if}
         </contact-address-item>

packages/desktop/components/NetworkCard.svelte

@@ -18,7 +18,7 @@
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { activeProfile } from '@core/profile/stores'
     import { UiEventFunction, truncateString } from '@core/utils'
-    import { ClickableTile, FontWeight, NetworkIcon, NetworkStatusPill, Text, TextType } from '@ui'
+    import { ClickableTile, FontWeight, NetworkAvatar, NetworkStatusPill, Text, TextType } from '@ui'
     import { NetworkConfigRoute, networkConfigRouter } from '@views/dashboard/drawers'
     import { onMount } from 'svelte'
 
@@ -80,7 +80,7 @@
         <div class="flex flex-row justify-between items-center">
             <div class="flex flex-row gap-2 items-center">
                 {#if networkId}
-                    <NetworkIcon {networkId} />
+                    <NetworkAvatar {networkId} />
                 {/if}
                 <Text type={TextType.h4} fontWeight={FontWeight.semibold}>
                     {name}

packages/desktop/views/dashboard/components/ToggleNetworkConfigButton.svelte

@@ -3,7 +3,7 @@
     import { NetworkHealth, chainStatuses, networkStatus } from '@core/network'
     import { activeProfile } from '@core/profile/stores'
     import { toggleDashboardDrawer } from '@desktop/auxiliary/drawer'
-    import { FontWeight, Icon, NetworkIcon, Text } from '@ui'
+    import { FontWeight, Icon, NetworkAvatar, Text } from '@ui'
     import { DashboardDrawerRoute } from '@views/dashboard/drawers'
 
     $: isAnyChainDisconnected = Object.values($chainStatuses ?? [])?.some(
@@ -23,7 +23,7 @@
     class="network-button hover:bg-gray-300 dark:hover:bg-gray-900 border-gray-400 dark:border-gray-700"
     on:click={onNetworkClick}
 >
-    <NetworkIcon height={12} width={12} networkId={$activeProfile.network.id} outlined={false} />
+    <NetworkAvatar size="xxs" networkId={$activeProfile.network.id} />
     <Text fontWeight={FontWeight.semibold} color="gray-800" darkColor="white">{$activeProfile.network.name}</Text>
     {#if displayWarning}
         <Icon icon={IconEnum.WarningFilled} classes="text-red-500" height={16} width={16} />

packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte

@@ -5,7 +5,7 @@
     import { getBaseToken } from '@core/profile/actions'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { BigIntLike } from '@ethereumjs/util'
-    import { NetworkIcon, Text } from '@ui'
+    import { NetworkAvatar, Text } from '@ui'
 
     export let destinationNetworkId: NetworkId | undefined = undefined
     export let estimatedGasFee: BigIntLike | undefined = undefined
@@ -18,8 +18,8 @@
     {#if destinationNetwork}
         <section class="key-value-box border-gray-200 dark:border-gray-700">
             <Text>{localize('general.destinationNetwork')}</Text>
-            <div class="flex flex-row gap-2">
-                <NetworkIcon networkId={destinationNetworkId} height={16} width={16} outlined={false} />
+            <div class="flex flex-row items-center gap-2">
+                <NetworkAvatar networkId={destinationNetworkId} size="xs" />
                 <Text color="gray-600">{destinationNetwork}</Text>
             </div>
         </section>
@@ -45,7 +45,7 @@
 
 <style lang="scss">
     .key-value-box {
-        @apply flex flex-row justify-between p-4;
+        @apply flex flex-row justify-between items-center p-4;
         @apply border-b border-solid;
 
         &:last-child {

packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte

@@ -4,7 +4,7 @@
     import { formatTokenAmountBestMatch } from '@core/token'
     import { TimePeriod } from '@core/utils'
     import { BigIntLike } from '@ethereumjs/util'
-    import { NetworkIcon, Text, TooltipIcon } from '@ui'
+    import { NetworkAvatar, Text, TooltipIcon } from '@ui'
     import { NetworkId } from '@core/network'
     import DateTimePickerButton from './DateTimePickerButton.svelte'
     import StorageDepositButton from './StorageDepositButton.svelte'
@@ -31,8 +31,8 @@
     {#if destinationNetworkId}
         <section class="key-value-box border-gray-200 dark:border-gray-700">
             <Text>{localize('general.destinationNetwork')}</Text>
-            <div class="flex flex-row gap-2">
-                <NetworkIcon networkId={destinationNetworkId} height={16} width={16} outlined={false} />
+            <div class="flex flex-row items-center gap-2">
+                <NetworkAvatar networkId={destinationNetworkId} size="xs" />
                 <Text color="gray-600">{destinationNetwork}</Text>
             </div>
         </section>
@@ -114,7 +114,7 @@
 
 <style lang="scss">
     .key-value-box {
-        @apply flex flex-row justify-between p-4;
+        @apply flex flex-row justify-between items-center p-4;
         @apply border-b border-solid;
 
         &:last-child {

packages/shared/src/components/Profile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Icon as IconEnum } from '@auxiliary/icon/enums'
     import { IPersistedProfile, ProfileType } from '@core/profile'
-    import { DeveloperIndicatorPill, Icon, NetworkIconBadge, ProfileAvatar, StrongholdBadge, Text, TextType } from '@ui'
+    import { DeveloperIndicatorPill, Icon, NetworkBadge, ProfileAvatar, StrongholdBadge, Text, TextType } from '@ui'
 
     export let profile: IPersistedProfile
     export let updateRequired: boolean = false
@@ -22,7 +22,7 @@
         >
             <ProfileAvatar {profile} size="lg" />
             {#if !updateRequired}
-                <NetworkIconBadge networkId={profile?.network?.id} tooltipText={profile?.network?.name} />
+                <NetworkBadge size="sm" networkId={profile?.network?.id} tooltipText={profile?.network?.name} />
             {:else}
                 <StrongholdBadge />
             {/if}

packages/shared/src/components/atoms/index.js

@@ -4,7 +4,6 @@ export { default as Icon } from './Icon.svelte'
 export { default as LedgerAnimation } from './LedgerAnimation.svelte'
 export { default as MediaDisplay } from './MediaDisplay.svelte'
 export { default as MenuItem } from './MenuItem.svelte'
-export { default as NetworkIcon } from './NetworkIcon.svelte'
 export { default as Pane } from './Pane.svelte'
 export { default as ProposalsDetailsButton } from './ProposalsDetailsButton.svelte'
 export { default as Tabs } from './Tabs.svelte'

packages/shared/src/components/avatars/ContactAvatar.svelte

@@ -8,5 +8,5 @@
 </script>
 
 <contact-avatar>
-    <Avatar {size} color={contact.color} text={getInitials(contact?.name, 2)} />
+    <Avatar {size} backgroundColor={contact.color} text={getInitials(contact?.name, 2)} />
 </contact-avatar>

packages/shared/src/components/avatars/NetworkAvatar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { NETWORK_ICON_SVG } from '@auxiliary/icon'
+    import { Avatar } from '@bloomwalletio/ui'
+    import { NetworkId, SupportedNetworkId, isSupportedNetworkId } from '@core/network'
+
+    export let networkId: NetworkId
+    export let size: 'xxs' | 'xs' | 'sm' = 'sm'
+
+    const AVATAR_TEXT_COLOR: { [id in SupportedNetworkId]: string } = {
+        [SupportedNetworkId.Shimmer]: '#17E1D5',
+        [SupportedNetworkId.Testnet]: 'gray-400',
+        [SupportedNetworkId.ShimmerEvm]: '#17E1D5',
+        [SupportedNetworkId.ShimmerEvmTestnet]: 'gray-400',
+    }
+
+    const AVATAR_BACKGROUND_COLOR: { [id in SupportedNetworkId]: string } = {
+        [SupportedNetworkId.Shimmer]: '#020F26',
+        [SupportedNetworkId.Testnet]: '#020F26',
+        [SupportedNetworkId.ShimmerEvm]: '#020F26',
+        [SupportedNetworkId.ShimmerEvmTestnet]: '#020F26',
+    }
+
+    $: isSupported = isSupportedNetworkId(networkId)
+    $: backgroundColor = isSupported ? AVATAR_BACKGROUND_COLOR[networkId as SupportedNetworkId] : 'gray-100'
+    $: textColor = isSupported ? AVATAR_TEXT_COLOR[networkId as SupportedNetworkId] : 'gray-400'
+    $: icon = isSupported ? NETWORK_ICON_SVG[networkId as SupportedNetworkId] : undefined
+    $: magnify = networkId === SupportedNetworkId.ShimmerEvm || networkId === SupportedNetworkId.ShimmerEvmTestnet
+</script>
+
+<!-- TODO: Add initials for not supported network IDs -->
+<Avatar {size} {backgroundColor} {textColor} {icon} {magnify} />

packages/shared/src/components/avatars/ProfileAvatar.svelte

@@ -12,6 +12,6 @@
     {#if profile?.pfp}
         <NftAvatar {size} nft={profile.pfp} />
     {:else if profile?.name}
-        <Avatar {size} color={profile.color} text={getInitials(profile.name, 3)} />
+        <Avatar {size} backgroundColor={profile.color} text={getInitials(profile.name, 3)} />
     {/if}
 </profile-avatar>

packages/shared/src/components/avatars/index.js

@@ -1,3 +1,4 @@
 export { default as ContactAvatar } from './ContactAvatar.svelte'
 export { default as NftAvatar } from './NftAvatar.svelte'
+export { default as NetworkAvatar } from './NetworkAvatar.svelte'
 export { default as ProfileAvatar } from './ProfileAvatar.svelte'

packages/shared/src/components/badges/NetworkIconBadge.svelte → packages/shared/src/components/badges/NetworkBadge.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
     import { NetworkId } from '@core/network'
-    import { NetworkIcon, InformationTooltip } from '@ui'
+    import { NetworkAvatar, InformationTooltip } from '@ui'
     import { Position } from '@ui/enums'
 
     export let networkId: NetworkId
     export let tooltipText: string = ''
-    export let width: number | undefined = undefined
-    export let height: number | undefined = undefined
+    export let size: 'xxs' | 'xs' | 'sm' = 'sm'
 
     let tooltipAnchor: HTMLElement
     let isTooltipVisible = false
@@ -21,9 +20,9 @@
     on:mouseenter={() => showTooltip(true)}
     on:mouseleave={() => showTooltip(false)}
     on:wheel={() => showTooltip(false)}
-    class="block absolute -right-1 -bottom-1"
+    class="block absolute -right-1 -bottom-1 rounded-full bg-white dark:bg-gray-900 p-0.5"
 >
-    <NetworkIcon {width} {height} {networkId} />
+    <NetworkAvatar {size} {networkId} />
 </network-icon-badge>
 {#if isTooltipVisible && tooltipText}
     <InformationTooltip anchor={tooltipAnchor} size="small" position={Position.Right} offset={6} body={tooltipText} />

packages/shared/src/components/badges/index.js

@@ -1,3 +1,3 @@
-export { default as NetworkIconBadge } from './NetworkIconBadge.svelte'
+export { default as NetworkBadge } from './NetworkBadge.svelte'
 export { default as StrongholdBadge } from './StrongholdBadge.svelte'
 export { default as VerificationBadge } from './VerificationBadge.svelte'

packages/shared/src/components/molecules/NetworkRecipientItem.svelte

@@ -2,7 +2,7 @@
     import { Icon as IconEnum } from '@auxiliary/icon'
     import { isEvmChain } from '@core/network'
     import { Subject, SubjectType } from '@core/wallet'
-    import { FontWeight, Icon, IOption, NetworkIcon, RecipientInput, Text, TextType } from '@ui'
+    import { FontWeight, Icon, IOption, NetworkAvatar, RecipientInput, Text, TextType } from '@ui'
     import { INetworkRecipientSelectorOption } from '../interfaces'
     import { ContactManager } from '@core/contact'
 
@@ -62,7 +62,7 @@
     <network-recipient-item-name>
         <div class="flex flex-row justify-between items-center space-x-4">
             <div class="flex flex-row space-x-3 items-center">
-                <NetworkIcon networkId={item.networkId} />
+                <NetworkAvatar networkId={item.networkId} />
                 <Text type={TextType.h4} fontWeight={FontWeight.semibold}>
                     {item.name}
                 </Text>

packages/shared/src/components/molecules/TokenIcon.svelte

@@ -5,7 +5,7 @@
     import { activeProfile } from '@core/profile/stores'
     import { isBright } from '@core/utils'
     import { ANIMATED_TOKEN_IDS, getTokenInitials, IPersistedToken, TokenStandard } from '@core/token'
-    import { Animation, Icon, NetworkIconBadge, VerificationBadge } from '@ui'
+    import { Animation, Icon, NetworkBadge, VerificationBadge } from '@ui'
 
     export let persistedToken: IPersistedToken
     export let networkId: NetworkId | undefined
@@ -124,7 +124,7 @@
     </div>
     <span class="absolute flex justify-center items-center bottom-0 right-0">
         {#if persistedToken.verification.verified === true && networkId}
-            <NetworkIconBadge width={10} height={10} {networkId} tooltipText={networkName} />
+            <NetworkBadge size="xxs" {networkId} tooltipText={networkName} />
         {:else}
             <VerificationBadge status={persistedToken.verification?.status} width={14} height={14} />
         {/if}

packages/shared/src/lib/auxiliary/icon/constants/network-icon-svg.ts

@@ -1,10 +1,10 @@
-import { NetworkId, SupportedNetworkId } from '@core/network'
+import { IconName } from '@bloomwalletio/ui'
+import { SupportedNetworkId } from '@core/network'
 
-import { Icon } from '../enums'
-
-export const NETWORK_ICON_SVG: { [id in NetworkId]: Icon } = {
-    [SupportedNetworkId.Shimmer]: Icon.Shimmer,
-    [SupportedNetworkId.Testnet]: Icon.Shimmer,
-    [SupportedNetworkId.ShimmerEvm]: Icon.ShimmerEvm,
-    [SupportedNetworkId.ShimmerEvmTestnet]: Icon.ShimmerEvm,
+// TODO: rename
+export const NETWORK_ICON_SVG: { [id in SupportedNetworkId]: IconName } = {
+    [SupportedNetworkId.Shimmer]: IconName.Shimmer,
+    [SupportedNetworkId.Testnet]: IconName.Shimmer,
+    [SupportedNetworkId.ShimmerEvm]: IconName.ShimmerEvm,
+    [SupportedNetworkId.ShimmerEvmTestnet]: IconName.ShimmerEvm,
 }

packages/shared/tailwind.config.js

@@ -58,7 +58,6 @@ module.exports = {
         extend: {
             colors: {
                 current: 'currentColor',
-                gray: colors.slate,
                 transparent: 'transparent',
                 black: '#000',
                 white: '#fff',