fix web3onboard calling wrong rpcUrl

src/App.vue

@@ -15,7 +15,7 @@ const targetNetwork = ref(DEFAULT_NETWORK);
 const web3Onboard = init({
   wallets: [injected],
   chains: Object.values(Networks).map((network) => ({
-    id: network.id,
+    id: `0x${network.id.toString(16)}`,
     token: network.nativeCurrency.symbol,
     label: network.name,
     rpcUrl: network.rpcUrls.default.http[0],

src/utils/imagesPath.ts

@@ -1,29 +1,11 @@
 import type { TokenEnum } from "@/model/NetworkEnum";
-
-export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
-  eager: true,
-  query: "?url",
-  import: "default",
-});
+import { Networks } from "@/config/networks";
 
 export const getNetworkImage = (networkName: string): string => {
-  const imageName = networkName
-      .toLowerCase()
-      .replace(/[^a-z0-9]/g, '-');
-  try {
-    const path = Object.keys(imagesPath).find((key) =>
-      key.endsWith(`${imageName}.svg`)
-    );
-    return path ? imagesPath[path] : "";
-  } catch (error) {
-    console.error("Error fetching network image");
-    return "";
-  }
+  const normalizedName = networkName.toLowerCase().replace(/[^a-z0-9]/g, '-');
+  return new URL(`../assets/networks/${normalizedName}.svg`, import.meta.url).href;
 };
 
 export const getTokenImage = (tokenName: TokenEnum): string => {
-  const path = Object.keys(imagesPath).find((key) =>
-    key.endsWith(`${tokenName.toLowerCase()}.svg`)
-  );
-  return path ? imagesPath[path] : "";
+  return new URL(`../assets/tokens/${tokenName.toLowerCase()}.svg`, import.meta.url).href;
 };