From 11ac4e8248a6b072e447b79bb9b8cbf1c62805d1 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Fri, 25 Aug 2023 14:13:09 +0100
Subject: [PATCH 1/5] initial work for network avatar

---
 packages/shared/package.json                  |  2 +-
 .../src/components/atoms/NetworkIcon.svelte   | 36 ++++---------------
 packages/shared/tailwind.config.js            |  1 -
 yarn.lock                                     |  8 ++---
 4 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/packages/shared/package.json b/packages/shared/package.json
index 40fbc6eadd..a4a2ec1e5f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Charlie Varley <charlie@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.7.0",
+        "@bloomwalletio/ui": "0.7.3",
         "@iota/bundle": "1.0.0-beta.30",
         "@iota/converter": "1.0.0-beta.30",
         "@iota/crypto.js": "1.8.6",
diff --git a/packages/shared/src/components/atoms/NetworkIcon.svelte b/packages/shared/src/components/atoms/NetworkIcon.svelte
index 7089d9c0e8..71dff66deb 100644
--- a/packages/shared/src/components/atoms/NetworkIcon.svelte
+++ b/packages/shared/src/components/atoms/NetworkIcon.svelte
@@ -1,37 +1,15 @@
 <script lang="ts">
-    import { Icon } from '@ui'
-    import { NETWORK_ICON_SVG } from '@auxiliary/icon'
+    import { Avatar, IconName } from '@bloomwalletio/ui'
     import { NetworkId, SupportedNetworkId } from '@core/network'
 
     export let networkId: NetworkId
-    export let height = 22
-    export let width = 22
-    export let outlined = true
+    export let size: 'xxs' | 'xs' | 'sm' = 'sm'
 
-    $: backgroundColor = classesMap[networkId]?.backgroundColor ?? 'bg-gray-400'
-    $: iconColor = classesMap[networkId]?.iconColor ?? 'text-black'
-
-    const classesMap: { [id in NetworkId]?: Record<string, string> } = {
-        [SupportedNetworkId.Shimmer]: {
-            backgroundColor: 'bg-shimmer-highlight',
-            iconColor: 'text-black',
-        },
-        [SupportedNetworkId.Testnet]: {
-            backgroundColor: 'bg-gray-400',
-            iconColor: 'text-black',
-        },
+    const AVATAR_COLOR: { [id in NetworkId]?: string } = {
+        [SupportedNetworkId.Shimmer]: '#17E1D5',
+        [SupportedNetworkId.Testnet]: 'gray-400',
     }
 </script>
 
-<network-icon class={backgroundColor} class:outlined>
-    <Icon {height} {width} icon={NETWORK_ICON_SVG[networkId]} classes={iconColor} />
-</network-icon>
-
-<style lang="scss">
-    network-icon {
-        @apply flex items-center justify-center p-0.5 rounded-full;
-        &.outlined {
-            @apply ring-2 ring-white dark:ring-gray-900;
-        }
-    }
-</style>
+<!-- Todo: replace with icon colour and correct icon name when added bloom-ui -->
+<Avatar {size} color={AVATAR_COLOR[networkId] ?? 'gray-400'} icon={IconName.Cpu} />
diff --git a/packages/shared/tailwind.config.js b/packages/shared/tailwind.config.js
index 8a85d0145c..09cf252462 100644
--- a/packages/shared/tailwind.config.js
+++ b/packages/shared/tailwind.config.js
@@ -58,7 +58,6 @@ module.exports = {
         extend: {
             colors: {
                 current: 'currentColor',
-                gray: colors.slate,
                 transparent: 'transparent',
                 black: '#000',
                 white: '#fff',
diff --git a/yarn.lock b/yarn.lock
index 706bc92312..0000c4fd94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -342,10 +342,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.7.0":
-  version "0.7.0"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.0/644b7f7d5608b7cef279725e75a731a505dd3618#644b7f7d5608b7cef279725e75a731a505dd3618"
-  integrity sha512-665sGBFhZ6eCkb73wtjJlWh2xubAyn+ALqOrt5c8hLZ6BvHeq9H87IV5/j60d3P6wcl3pwFpO1ouNE3j/JNuQA==
+"@bloomwalletio/ui@0.7.3":
+  version "0.7.3"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.3/df026d1af49387464dfaf7a19c5053bb46c3ca3e#df026d1af49387464dfaf7a19c5053bb46c3ca3e"
+  integrity sha512-8mHup7u9MY7qKzJS2MeFyCDGflZdMsgP3oiEodmIaBOSReXmgCzibEfYh8CxRV97pUDyI7DdApLeYLozI6WQAQ==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"

From 1a12015c83896e2e1906703d24d0d1385ca97fff Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Fri, 25 Aug 2023 15:54:29 +0100
Subject: [PATCH 2/5] network avatar refactor

Co-authored-by: Tuditi <Tuditi@users.noreply.github.com>
Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev>
Co-authored-by: MarkNerdi996 <MarkNerdi996@users.noreply.github.com>
---
 packages/desktop/components/ContactAddressCard.svelte         | 4 ++--
 .../desktop/components/modals/AccountSwitcherModal.svelte     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/components/ContactAddressCard.svelte b/packages/desktop/components/ContactAddressCard.svelte
index 7e84375457..1f1c4b4aa2 100644
--- a/packages/desktop/components/ContactAddressCard.svelte
+++ b/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">
diff --git a/packages/desktop/components/modals/AccountSwitcherModal.svelte b/packages/desktop/components/modals/AccountSwitcherModal.svelte
index 46167ea861..74c31ed63a 100644
--- a/packages/desktop/components/modals/AccountSwitcherModal.svelte
+++ b/packages/desktop/components/modals/AccountSwitcherModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, IconName } from '@bloomwalletio/ui'
     import { sumBalanceForAccounts } from '@core/account'
     import { selectedAccount } from '@core/account/stores'
     import { formatCurrency, localize } from '@core/i18n'
@@ -49,7 +49,7 @@
         class=" flex flex-row justify-between w-full p-8 hover:bg-gray-50 dark:hover:bg-gray-800"
         on:click={onCreateAccountClick}
     >
-        <Button icon={FlatIconName.Plus} variant="text" text={localize('general.addAWallet')} />
+        <Button icon={IconName.Plus} variant="text" text={localize('general.addAWallet')} />
         <div class="flex flex-col items-end text-right space-y-1">
             <Text type={TextType.h5}>
                 {formatTokenAmountBestMatch(totalBalance, getBaseToken())}

From 1afc5b4f53b9e3c694d5ce3717fb419a09621232 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Fri, 25 Aug 2023 17:09:30 +0100
Subject: [PATCH 3/5] refactor: network avatar

---
 .../desktop/components/NetworkCard.svelte     |  8 ++---
 .../ToggleNetworkConfigButton.svelte          |  4 +--
 .../views/ContactInformationDrawer.svelte     |  4 +--
 .../views/ContactListDrawer.svelte            |  4 +--
 .../views/EditNetworkAddressesDrawer.svelte   |  4 +--
 .../components/EvmTransactionDetails.svelte   |  4 +--
 .../StardustTransactionDetails.svelte         |  4 +--
 packages/shared/package.json                  |  2 +-
 packages/shared/src/components/Profile.svelte |  4 +--
 .../src/components/atoms/NetworkIcon.svelte   | 15 ----------
 packages/shared/src/components/atoms/index.js |  1 -
 .../components/avatars/ContactAvatar.svelte   |  2 +-
 .../components/avatars/NetworkAvatar.svelte   | 30 +++++++++++++++++++
 .../components/avatars/ProfileAvatar.svelte   |  2 +-
 .../shared/src/components/avatars/index.js    |  1 +
 ...rkIconBadge.svelte => NetworkBadge.svelte} |  9 +++---
 .../shared/src/components/badges/index.js     |  2 +-
 .../molecules/NetworkRecipientItem.svelte     |  4 +--
 .../src/components/molecules/TokenIcon.svelte |  4 +--
 .../icon/constants/network-icon-svg.ts        | 16 +++++-----
 yarn.lock                                     |  8 ++---
 21 files changed, 73 insertions(+), 59 deletions(-)
 delete mode 100644 packages/shared/src/components/atoms/NetworkIcon.svelte
 create mode 100644 packages/shared/src/components/avatars/NetworkAvatar.svelte
 rename packages/shared/src/components/badges/{NetworkIconBadge.svelte => NetworkBadge.svelte} (73%)

diff --git a/packages/desktop/components/NetworkCard.svelte b/packages/desktop/components/NetworkCard.svelte
index 89cf7bcb74..f8208d253f 100644
--- a/packages/desktop/components/NetworkCard.svelte
+++ b/packages/desktop/components/NetworkCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, CopyableButton, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, CopyableButton, IconName } from '@bloomwalletio/ui'
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
     import { generateAndStoreEvmAddressForAccount } from '@core/layer-2'
@@ -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}
@@ -111,7 +111,7 @@
                 {/if}
             </div>
             {#if address}
-                <Button variant="text" icon={FlatIconName.Qrcode} on:click={onQrCodeIconClick} />
+                <Button variant="text" icon={IconName.QrCode} on:click={onQrCodeIconClick} />
             {/if}
         </div>
     </div>
diff --git a/packages/desktop/views/dashboard/components/ToggleNetworkConfigButton.svelte b/packages/desktop/views/dashboard/components/ToggleNetworkConfigButton.svelte
index 51a597cc5e..9166c4d0a4 100644
--- a/packages/desktop/views/dashboard/components/ToggleNetworkConfigButton.svelte
+++ b/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} />
diff --git a/packages/desktop/views/dashboard/drawers/contact-book/views/ContactInformationDrawer.svelte b/packages/desktop/views/dashboard/drawers/contact-book/views/ContactInformationDrawer.svelte
index b742dcf8a5..750523b440 100644
--- a/packages/desktop/views/dashboard/drawers/contact-book/views/ContactInformationDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/contact-book/views/ContactInformationDrawer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Icon as IconEnum } from '@auxiliary/icon'
-    import { Button, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, IconName } from '@bloomwalletio/ui'
     import { ContactAddressCard, ContactMetadataTable, DrawerTemplate } from '@components'
     import { ContactManager, selectedContact } from '@core/contact'
     import { localize } from '@core/i18n'
@@ -75,7 +75,7 @@
         {#if features.contacts.addNetworkAddress.enabled}
             <Button
                 variant="text"
-                icon={FlatIconName.Plus}
+                icon={IconName.Plus}
                 text={localize(
                     `views.dashboard.drawers.contactBook.${ContactBookRoute.ContactInformation}.addNetworkAddress`
                 )}
diff --git a/packages/desktop/views/dashboard/drawers/contact-book/views/ContactListDrawer.svelte b/packages/desktop/views/dashboard/drawers/contact-book/views/ContactListDrawer.svelte
index 51751e7337..1024bbd218 100644
--- a/packages/desktop/views/dashboard/drawers/contact-book/views/ContactListDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/contact-book/views/ContactListDrawer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FlatIconName, Button } from '@bloomwalletio/ui'
+    import { IconName, Button } from '@bloomwalletio/ui'
     import { ContactCard, DrawerTemplate } from '@components'
     import { ContactManager, IContact, clearSelectedContact, setSelectedContact } from '@core/contact'
     import { localize } from '@core/i18n'
@@ -39,7 +39,7 @@
         {#if features.contacts.addContact.enabled}
             <Button
                 variant="text"
-                icon={FlatIconName.Plus}
+                icon={IconName.Plus}
                 text={localize(`views.dashboard.drawers.contactBook.${ContactBookRoute.ContactList}.addContact`)}
                 on:click={onAddContactClick}
             />
diff --git a/packages/desktop/views/dashboard/drawers/contact-book/views/EditNetworkAddressesDrawer.svelte b/packages/desktop/views/dashboard/drawers/contact-book/views/EditNetworkAddressesDrawer.svelte
index 542e70ed66..29ce6ac2e8 100644
--- a/packages/desktop/views/dashboard/drawers/contact-book/views/EditNetworkAddressesDrawer.svelte
+++ b/packages/desktop/views/dashboard/drawers/contact-book/views/EditNetworkAddressesDrawer.svelte
@@ -3,7 +3,7 @@
 
     import { onMount } from 'svelte'
 
-    import { Button, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, IconName } from '@bloomwalletio/ui'
     import { DrawerTemplate } from '@components'
     import { TextInput } from '@ui'
 
@@ -217,7 +217,7 @@
         <Button
             variant="text"
             text={localize(`views.dashboard.drawers.contactBook.${ContactBookRoute.EditNetworkAddresses}.addAddress`)}
-            icon={FlatIconName.Plus}
+            icon={IconName.Plus}
             width="full"
             on:click={onAddNewAddressClick}
         />
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
index 9776d938ef..90f178834f 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
+++ b/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
@@ -19,7 +19,7 @@
         <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} />
+                <NetworkAvatar networkId={destinationNetworkId} />
                 <Text color="gray-600">{destinationNetwork}</Text>
             </div>
         </section>
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
index 4a8c4bc7e2..3f9cb03ba1 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
+++ b/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'
@@ -32,7 +32,7 @@
         <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} />
+                <NetworkAvatar networkId={destinationNetworkId} />
                 <Text color="gray-600">{destinationNetwork}</Text>
             </div>
         </section>
diff --git a/packages/shared/package.json b/packages/shared/package.json
index a4a2ec1e5f..19ff63b0df 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Charlie Varley <charlie@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.7.3",
+        "@bloomwalletio/ui": "0.7.5",
         "@iota/bundle": "1.0.0-beta.30",
         "@iota/converter": "1.0.0-beta.30",
         "@iota/crypto.js": "1.8.6",
diff --git a/packages/shared/src/components/Profile.svelte b/packages/shared/src/components/Profile.svelte
index 8ace290b7c..b248ea089a 100644
--- a/packages/shared/src/components/Profile.svelte
+++ b/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}
diff --git a/packages/shared/src/components/atoms/NetworkIcon.svelte b/packages/shared/src/components/atoms/NetworkIcon.svelte
deleted file mode 100644
index 71dff66deb..0000000000
--- a/packages/shared/src/components/atoms/NetworkIcon.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-    import { Avatar, IconName } from '@bloomwalletio/ui'
-    import { NetworkId, SupportedNetworkId } from '@core/network'
-
-    export let networkId: NetworkId
-    export let size: 'xxs' | 'xs' | 'sm' = 'sm'
-
-    const AVATAR_COLOR: { [id in NetworkId]?: string } = {
-        [SupportedNetworkId.Shimmer]: '#17E1D5',
-        [SupportedNetworkId.Testnet]: 'gray-400',
-    }
-</script>
-
-<!-- Todo: replace with icon colour and correct icon name when added bloom-ui -->
-<Avatar {size} color={AVATAR_COLOR[networkId] ?? 'gray-400'} icon={IconName.Cpu} />
diff --git a/packages/shared/src/components/atoms/index.js b/packages/shared/src/components/atoms/index.js
index 90753928da..cf59112f90 100644
--- a/packages/shared/src/components/atoms/index.js
+++ b/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'
diff --git a/packages/shared/src/components/avatars/ContactAvatar.svelte b/packages/shared/src/components/avatars/ContactAvatar.svelte
index e52c2e1b2c..f851034bef 100644
--- a/packages/shared/src/components/avatars/ContactAvatar.svelte
+++ b/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>
diff --git a/packages/shared/src/components/avatars/NetworkAvatar.svelte b/packages/shared/src/components/avatars/NetworkAvatar.svelte
new file mode 100644
index 0000000000..45ce0d0b9f
--- /dev/null
+++ b/packages/shared/src/components/avatars/NetworkAvatar.svelte
@@ -0,0 +1,30 @@
+<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
+</script>
+
+<!-- TODO: Add initials for not supported network IDs -->
+<Avatar {size} {backgroundColor} {textColor} {icon} />
diff --git a/packages/shared/src/components/avatars/ProfileAvatar.svelte b/packages/shared/src/components/avatars/ProfileAvatar.svelte
index 56b4a7749c..acc5d8fc71 100644
--- a/packages/shared/src/components/avatars/ProfileAvatar.svelte
+++ b/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>
diff --git a/packages/shared/src/components/avatars/index.js b/packages/shared/src/components/avatars/index.js
index 79e14ffbbf..423547814e 100644
--- a/packages/shared/src/components/avatars/index.js
+++ b/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'
diff --git a/packages/shared/src/components/badges/NetworkIconBadge.svelte b/packages/shared/src/components/badges/NetworkBadge.svelte
similarity index 73%
rename from packages/shared/src/components/badges/NetworkIconBadge.svelte
rename to packages/shared/src/components/badges/NetworkBadge.svelte
index ed4704cef2..c7a9795b36 100644
--- a/packages/shared/src/components/badges/NetworkIconBadge.svelte
+++ b/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} />
diff --git a/packages/shared/src/components/badges/index.js b/packages/shared/src/components/badges/index.js
index 0ca84db7f5..28f126cc7a 100644
--- a/packages/shared/src/components/badges/index.js
+++ b/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'
diff --git a/packages/shared/src/components/molecules/NetworkRecipientItem.svelte b/packages/shared/src/components/molecules/NetworkRecipientItem.svelte
index abd9f35fe8..a7cca55a6a 100644
--- a/packages/shared/src/components/molecules/NetworkRecipientItem.svelte
+++ b/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'
 
     export let item: INetworkRecipientSelectorOption
@@ -54,7 +54,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>
diff --git a/packages/shared/src/components/molecules/TokenIcon.svelte b/packages/shared/src/components/molecules/TokenIcon.svelte
index d16b458fab..da1dce781a 100644
--- a/packages/shared/src/components/molecules/TokenIcon.svelte
+++ b/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}
diff --git a/packages/shared/src/lib/auxiliary/icon/constants/network-icon-svg.ts b/packages/shared/src/lib/auxiliary/icon/constants/network-icon-svg.ts
index e5f0921cee..ebc49f4eac 100644
--- a/packages/shared/src/lib/auxiliary/icon/constants/network-icon-svg.ts
+++ b/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,
 }
diff --git a/yarn.lock b/yarn.lock
index 0000c4fd94..c96b2a07b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -342,10 +342,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.7.3":
-  version "0.7.3"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.3/df026d1af49387464dfaf7a19c5053bb46c3ca3e#df026d1af49387464dfaf7a19c5053bb46c3ca3e"
-  integrity sha512-8mHup7u9MY7qKzJS2MeFyCDGflZdMsgP3oiEodmIaBOSReXmgCzibEfYh8CxRV97pUDyI7DdApLeYLozI6WQAQ==
+"@bloomwalletio/ui@0.7.5":
+  version "0.7.5"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.7.5/4e88fe7174997be3188132c28041b36c6f9d53af#4e88fe7174997be3188132c28041b36c6f9d53af"
+  integrity sha512-7Vs4iMmyLqyXojwrl0k2o5uznfNLGZ2EOjbFqF1WWv2nrl376ItpS/hpjIBP9SDuPq4HRqvohln3LV/3Byg32w==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"

From bdd4b5624d7a271cc1f51f69889492aec8db9a4a Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Wed, 30 Aug 2023 22:21:43 +0100
Subject: [PATCH 4/5] enhancement: make evm icon bigger

---
 packages/shared/src/components/avatars/NetworkAvatar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/avatars/NetworkAvatar.svelte b/packages/shared/src/components/avatars/NetworkAvatar.svelte
index 45ce0d0b9f..d5016852fd 100644
--- a/packages/shared/src/components/avatars/NetworkAvatar.svelte
+++ b/packages/shared/src/components/avatars/NetworkAvatar.svelte
@@ -24,7 +24,8 @@
     $: 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} />
+<Avatar {size} {backgroundColor} {textColor} {icon} {magnify} />

From d65b5c505c64d5b7222007af6e2b63dbe30561e5 Mon Sep 17 00:00:00 2001
From: Jean Ribeiro <contact@jeanribeiro.dev>
Date: Thu, 31 Aug 2023 22:35:27 -0300
Subject: [PATCH 5/5] fix: NetworkAvatar size in TransactionDetails

---
 .../send-flow/views/components/EvmTransactionDetails.svelte | 6 +++---
 .../views/components/StardustTransactionDetails.svelte      | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
index 90f178834f..c8b81fda08 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
@@ -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">
-                <NetworkAvatar networkId={destinationNetworkId} />
+            <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 {
diff --git a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
index 3f9cb03ba1..662abef8e5 100644
--- a/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.svelte
+++ b/packages/desktop/views/dashboard/send-flow/views/components/StardustTransactionDetails.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">
-                <NetworkAvatar networkId={destinationNetworkId} />
+            <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 {