refactored network selection

src/components/ui/NetworkBadges.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 
 const props = withDefaults(
   defineProps<{
-    networks: NetworkEnum[];
+    networks: NetworkConfig[];
     size?: "sm" | "md" | "lg";
     showLabel?: boolean;
   }>(),
@@ -24,8 +24,8 @@ const sizeMap = {
 const networkData = computed(() => {
   return props.networks.map((network) => ({
     network,
-    image: getNetworkImage(String(network)),
-    name: String(network),
+    image: getNetworkImage(network.name),
+    name: network.name,
   }));
 });
 </script>
@@ -34,7 +34,7 @@ const networkData = computed(() => {
   <div class="network-badges">
     <div
       v-for="data in networkData"
-      :key="data.network"
+      :key="data.network.id"
       class="network-badge"
       :title="data.name"
     >

src/components/ui/NetworkSelector.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { NetworkEnum } from "@/model/NetworkEnum";
-import { Networks } from "@/model/Networks";
+import { Networks } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
 import Dropdown, { type DropdownItem } from "./Dropdown.vue";
 
 const props = withDefaults(
   defineProps<{
-    modelValue: NetworkEnum;
+    modelValue: NetworkConfig;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
-    availableNetworks?: NetworkEnum[];
+    availableNetworks?: NetworkConfig[];
   }>(),
   {
     disabled: false,
@@ -19,21 +19,19 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  "update:modelValue": [value: NetworkEnum];
-  change: [value: NetworkEnum];
+  "update:modelValue": [value: NetworkConfig];
+  change: [value: NetworkConfig];
 }>();
 
-const networkItems = computed((): DropdownItem<NetworkEnum>[] => {
-  const networks = props.availableNetworks || (Object.values(NetworkEnum).filter(v => typeof v === 'number') as NetworkEnum[]);
-  
-  return networks.map((network) => ({
+const networkItems = computed((): DropdownItem<NetworkConfig>[] => {  
+  return Object.values(Networks).map((network) => ({
     value: network,
-    label: Networks[network]?.chainName || String(network),
-    icon: getNetworkImage(String(network)),
+    label: network.name,
+    icon: getNetworkImage(network.name),
   }));
 });
 
-const handleChange = (value: NetworkEnum) => {
+const handleChange = (value: NetworkConfig) => {
   emit("update:modelValue", value);
   emit("change", value);
 };

src/components/ui/ToasterComponent.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
 import { useOnboard } from "@web3-onboard/vue";
-import { Networks } from "@/model/Networks";
+import { Networks } from "@/config/networks";
 import { useUser } from "@/composables/useUser";
 
 const { connectedWallet } = useOnboard();
 const user = useUser();
-const { networkId, networkName } = user;
+const { network } = user;
 
 const isWrongNetwork = ref(false);
-const targetNetworkName = computed(() => Networks[networkName.value].chainName);
+const targetNetworkName = computed(() => network.value.name);
 
 const checkNetwork = () => {
   if (connectedWallet.value) {
     const chainId = connectedWallet.value.chains[0].id;
-    isWrongNetwork.value = Number(chainId) !== networkId.value;
+    isWrongNetwork.value = Number(chainId) !== network.value.id;
   } else {
     isWrongNetwork.value = false; // No wallet connected yet
   }
@@ -27,7 +27,7 @@ const switchNetwork = async () => {
         method: "wallet_switchEthereumChain",
         params: [
           {
-            chainId: Networks[networkName.value].chainId,
+            chainId: network.value.id,
           },
         ],
       });
@@ -39,7 +39,7 @@ const switchNetwork = async () => {
 
 onMounted(checkNetwork);
 watch(connectedWallet, checkNetwork);
-watch(networkId, checkNetwork, { immediate: true });
+watch(network, checkNetwork, { immediate: true });
 </script>
 
 <template>