fix: Align Networks/Tokens/lanes Alphabetically

src/components/CCIP/Chain/Chain.astro

@@ -25,14 +25,16 @@ const networks = getAllNetworks({ filter: environment })
 const allTokens = getTokensOfChain({
   chain: network?.chain || "",
   filter: environment,
-}).map((token) => {
-  const logo = getTokenIconUrl(token) || ""
-  return {
-    name: token,
-    logo,
-    totalNetworks: networks.length, // Add totalNetworks property
-  }
 })
+  .map((token) => {
+    const logo = getTokenIconUrl(token) || ""
+    return {
+      name: token,
+      logo,
+      totalNetworks: networks.length, // Add totalNetworks property
+    }
+  })
+  .sort((a, b) => a.name.localeCompare(b.name))
 
 const lanes = await getAllNetworkLanes({
   environment: environment,

src/components/CCIP/Token/Token.astro

@@ -72,25 +72,27 @@ const searchLanes = getSearchLanes({ environment })
       <Table
         client:only="react"
         environment={environment}
-        networks={Object.keys(data).map((key) => {
-          const directory = directoryToSupportedChain(key || "")
-          const title = getTitle(directory) || ""
-          const networkLogo = getChainIcon(directory) || ""
-          const explorerUrl = getExplorer(directory)
-          return {
-            name: title,
-            token: data[key].name || "",
-            key: key,
-            logo: networkLogo,
-            symbol: token,
-            tokenLogo: logo || "",
-            decimals: data[key].decimals || 0,
-            tokenAddress: data[key].tokenAddress || "",
-            tokenPoolType: data[key].poolType || "",
-            tokenPoolAddress: data[key].poolAddress || "",
-            explorerUrl: explorerUrl || "",
-          }
-        })}
+        networks={Object.keys(data)
+          .map((key) => {
+            const directory = directoryToSupportedChain(key || "")
+            const title = getTitle(directory) || ""
+            const networkLogo = getChainIcon(directory) || ""
+            const explorerUrl = getExplorer(directory)
+            return {
+              name: title,
+              token: data[key].name || "",
+              key: key,
+              logo: networkLogo,
+              symbol: token,
+              tokenLogo: logo || "",
+              decimals: data[key].decimals || 0,
+              tokenAddress: data[key].tokenAddress || "",
+              tokenPoolType: data[key].poolType || "",
+              tokenPoolAddress: data[key].poolAddress || "",
+              explorerUrl: explorerUrl || "",
+            }
+          })
+          .sort((a, b) => a.name.localeCompare(b.name))}
         lanes={lanes}
         token={{
           name: data[Object.keys(data)[0]]?.name || "",

src/config/data/ccip/data.ts

@@ -426,7 +426,7 @@ export const getAllNetworks = ({ filter }: { filter: Environment }) => {
     })
   }
 
-  return allChains
+  return allChains.sort((a, b) => a.name.localeCompare(b.name))
 }
 
 export const getNetwork = ({ chain, filter }: { chain: string; filter: Environment }) => {
@@ -531,7 +531,8 @@ export const getAllNetworkLanes = async ({
       status: operationalData[lane] || undefined,
     }
   })
-  return lanesData
+
+  return lanesData.sort((a, b) => a.name.localeCompare(b.name))
 }
 
 export function getAllTokenLanes({
@@ -632,7 +633,14 @@ export function getSearchLanes({ environment }: { environment: Environment }) {
     }
   }
 
-  return allLanes
+  // sorting lanes by source chain name and destination chain name
+  return allLanes.sort((a, b) => {
+    if (a.sourceNetwork.name > b.sourceNetwork.name) return 1
+    if (a.sourceNetwork.name < b.sourceNetwork.name) return -1
+    if (a.destinationNetwork.name > b.destinationNetwork.name) return 1
+    if (a.destinationNetwork.name < b.destinationNetwork.name) return -1
+    return 0
+  })
 }
 
 export async function getOperationalState(chain: string, site: string) {