feat(frontend): Enabled networks preview icons (#5402)

# Motivation
According to new Figma designs of the settings page, we need this
preview icons component to preview the icons of enabled networks.

# Changes

Added new component

# Tests

+2

![image](https://github.com/user-attachments/assets/d0517990-71d6-4f99-bf5e-09693f23aaa4)

+1

![image](https://github.com/user-attachments/assets/d4c269e0-235e-43cf-aace-2491ecb3e5f0)

no additional

![image](https://github.com/user-attachments/assets/f998d41f-d289-4c02-b5fb-2e7724bb0520)

Less than configured number of icons to show

![image](https://github.com/user-attachments/assets/a9d12522-59fc-4820-aba9-101c727403bb)

---------

Co-authored-by: Antonio Ventilii <[email protected]>

Author: daviddecentage

src/frontend/src/lib/components/settings/EnabledNetworksPreviewIcons.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { SUPPORTED_NETWORKS } from '$env/networks/networks.env';
+	import NetworkLogo from '$lib/components/networks/NetworkLogo.svelte';
+	import { logoSizes } from '$lib/constants/components.constants';
+	import { userNetworks } from '$lib/derived/user-networks.derived';
+	import type { Network, NetworkId } from '$lib/types/network';
+	import type { UserNetworks } from '$lib/types/user-networks';
+
+	const numberOfIcons = 4;
+
+	const getEnabledList = (networks: UserNetworks): Network[] =>
+		Object.getOwnPropertySymbols(networks ?? {}).reduce<Network[]>((enabledList, symbol) => {
+			const isEnabled = networks[symbol as NetworkId]?.enabled ?? false;
+
+			if (isEnabled) {
+				const network = SUPPORTED_NETWORKS.find((sn) => sn.id.toString() === symbol.toString());
+				if (network) {
+					enabledList.push(network);
+				}
+			}
+
+			return enabledList;
+		}, []);
+
+	let enabledList: Network[];
+	$: enabledList = getEnabledList($userNetworks);
+
+	let previewList: Network[];
+	$: previewList = enabledList.slice(0, numberOfIcons);
+</script>
+
+<div class="mr-2 mt-1 flex flex-row">
+	{#each previewList as network (network.id)}
+		<div class="-ml-1 flex">
+			<NetworkLogo size="xxs" {network} blackAndWhite />
+		</div>
+	{/each}
+	{#if enabledList.length > numberOfIcons}
+		<div
+			class="-ml-1 flex items-center justify-center overflow-hidden rounded-full bg-primary text-center text-xs ring-1 ring-primary transition-opacity duration-150"
+			style={`width: ${logoSizes.xxs}; height: ${logoSizes.xxs}`}
+		>
+			+{enabledList.length - numberOfIcons}
+		</div>
+	{/if}
+</div>