fix: setting the first n/w when custom n/ws contains only 1 item + shortened zk chains display names in n/w dropdown

Author: salil-naik

src/components/Output.tsx

@@ -154,11 +154,15 @@ export const Output = ({
   // when the default dest n/w is changed
   useEffect(() => {
     if (!firstNetworkRender && defaultDestNetwork) {
-      updateNetwork(
-        supportedNetworks?.find(
-          (x: Network) => x.chainId === defaultDestNetwork
-        )
-      );
+      if (supportedNetworks?.length === 1) {
+        updateNetwork(supportedNetworks[0]);
+      } else {
+        updateNetwork(
+          supportedNetworks?.find(
+            (x: Network) => x.chainId === defaultDestNetwork
+          )
+        );
+      }
     }
   }, [supportedNetworks, defaultDestNetwork]);
 

src/components/common/ChainSelect.tsx

@@ -26,6 +26,7 @@ function Option({
   borderRadius?: number;
   onlyOneNetwork?: boolean;
 }) {
+  const networkDisplayName = network?.chainId === 1101 ? 'zkEVM' : network?.chainId === 324 ? 'zkSync' : network?.name;
   return (
     <div
       className={`skt-w skt-w-flex skt-w-w-28 skt-w-items-center skt-w-cursor-pointer skt-w-flex-shrink-0 ${
@@ -42,7 +43,7 @@ function Option({
           style={{ borderRadius: `calc(0.3rem * ${borderRadius})` }}
         />
         <span className="skt-w skt-w-text-sm skt-w-text-widget-primary skt-w-mx-1">
-          {network?.name}
+          {networkDisplayName}
         </span>
       </div>
       {selected && !onlyOneNetwork && (