diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
index bdf535fed6a..4819d3c2fbd 100644
--- a/src/components/CCIP/Chain/Chain.astro
+++ b/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,
diff --git a/src/components/CCIP/Token/Token.astro b/src/components/CCIP/Token/Token.astro
index ad99e7ca3e8..4dd443ef653 100644
--- a/src/components/CCIP/Token/Token.astro
+++ b/src/components/CCIP/Token/Token.astro
@@ -72,25 +72,27 @@ const searchLanes = getSearchLanes({ environment })
{
- 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 || "",
diff --git a/src/config/data/ccip/data.ts b/src/config/data/ccip/data.ts
index 8b4eff5d0eb..19cc6e0a3a1 100644
--- a/src/config/data/ccip/data.ts
+++ b/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) {