fixed network selection (hex string) and icons

src/App.vue

@@ -14,9 +14,10 @@ const targetNetwork = ref(DEFAULT_NETWORK);
 
 const web3Onboard = init({
   wallets: [injected],
-  chains: Object.entries(Networks).map(([, network]) => ({
+  chains: Object.values(Networks).map((network) => ({
     id: network.id,
-    label: network.nativeCurrency.symbol,
+    token: network.nativeCurrency.symbol,
+    label: network.name,
     rpcUrl: network.rpcUrls.default.http[0],
   })),
   connect: {

src/components/TopBar/TopBar.vue

@@ -80,9 +80,10 @@ const closeMenu = (): void => {
 
 const networkChange = async (network: NetworkConfig): Promise<void> => {
   currencyMenuOpenToggle.value = false;
+  const chainId = network.id.toString(16)
   try {
     await setChain({
-      chainId: String(network.id),
+      chainId: `0x${chainId}`,
       wallet: connectedWallet.value?.label || "",
     });
     user.setNetwork(network);

src/components/ui/ToasterComponent.vue

@@ -23,11 +23,12 @@ const checkNetwork = () => {
 const switchNetwork = async () => {
   try {
     if (connectedWallet.value && connectedWallet.value.provider) {
+      let chainId = network.value.id.toString(16);
       await connectedWallet.value.provider.request({
         method: "wallet_switchEthereumChain",
         params: [
           {
-            chainId: network.value.id,
+            chainId: `0x${chainId}`,
           },
         ],
       });

src/config/networks.ts

@@ -12,7 +12,7 @@ export const Networks: {[key:string]: NetworkConfig} = {
     subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL]
   },
   rootstockTestnet: { ...rootstockTestnet,
-    rpcUrls: { default: { http: [import.meta.env.VITE_ROOTSTOCK_API_URL]}},
+    rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL]}},
     contracts: { ...rootstockTestnet.contracts,
       p2pix: {address:"0x57Dcba05980761169508886eEdc6f5E7EC0411Dc"} },
     tokens: {

src/utils/imagesPath.ts

@@ -7,17 +7,16 @@ export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
 });
 
 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(`${networkName.toLowerCase()}.svg`)
+      key.endsWith(`${imageName}.svg`)
     );
     return path ? imagesPath[path] : "";
   } catch (error) {
     console.error("Error fetching network image");
-    const path = Object.keys(imagesPath).find((key) =>
-      key.endsWith(`invalidIcon.svg`)
-    );
-    return path ? imagesPath[path] : "";
     return "";
   }
 };