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) {