Sort testnets by tvl

hooks/useFilteredChains.jsx

@@ -1,25 +1,12 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
-
-const TESTNET_KEYWORDS = ['test', 'devnet'];
+import { isTestnet } from '../utils';
 
 const createSearchMatcher = (searchTerm) => {
   const normalized = searchTerm.toLowerCase();
   return (value) => value?.toLowerCase().includes(normalized);
 };
 
-const isTestnet = (chain) => {
-  const lowercaseValues = [
-    chain.name,
-    chain.title,
-    chain.network
-  ].map((val) => val?.toLowerCase());
-
-  return TESTNET_KEYWORDS.some((keyword) => 
-    lowercaseValues.some((val) => val?.includes(keyword))
-  );
-};
-
 const matchesSearchTerm = (chain, matcher) => {
   return (
     matcher(chain.chain) ||

pages/index.js

@@ -46,7 +46,7 @@ function Home({ chains }) {
             })}
           </div>
         </React.Suspense>
-        {end - 1 < finalChains.length ? (
+        {end < finalChains.length ? (
           <button
             onClick={() => setEnd(finalChains.length)}
             className="w-full border dark:border-[#171717] border-[#EAEAEA] px-4 py-2 rounded-[50px] mb-auto text-white bg-[#2F80ED] mx-auto"

utils/fetch.js

@@ -2,18 +2,19 @@ import allExtraRpcs from "../constants/extraRpcs.js";
 import chainIds from "../constants/chainIds.js";
 import fetch from "node-fetch";
 import { overwrittenChains } from "../constants/additionalChainRegistry/list.js";
+import { isTestnet } from "./index.js";
 
 export const fetcher = (...args) => fetch(...args).then((res) => res.json());
 
-const cache = {}
+const cache = {};
 export const fetchWithCache = async (url) => {
-  if(cache[url]){
-    return cache[url]
+  if (cache[url]) {
+    return cache[url];
   }
   const data = await fetch(url).then((res) => res.json());
-  cache[url] = data
-  return data
-}
+  cache[url] = data;
+  return data;
+};
 
 function removeEndingSlashObject(rpc) {
   if (typeof rpc === "string") {
@@ -100,24 +101,79 @@ export function arrayMove(array, fromIndex, toIndex) {
   return newArray;
 }
 
+function getBaseName(name) {
+  if (!name) return "";
+
+  return name
+    .replace(/\s+(Sepolia|Goerli|Testnet|Mumbai|Fuji|Amoy|Hoodi)(\s+.*)?$/i, "")
+    .replace(/\s+Test\s+Network$/i, "")
+    .replace(/\s+Mainnet$/i, "")
+    .replace(/\s+(One|C-Chain)$/i, "")
+    .trim();
+}
+
+function handleTestnets(activeChains) {
+  const parentChainTvls = {};
+
+  // map testnets to their parent's TVL
+  activeChains.forEach((chain) => {
+    if (chain.tvl && !isTestnet(chain)) {
+      const baseName = getBaseName(chain.name);
+      if (!parentChainTvls[baseName] || parentChainTvls[baseName] < chain.tvl) {
+        parentChainTvls[baseName] = chain.tvl;
+      }
+    }
+  });
+
+  return activeChains.map((chain) => {
+    const isTestnetChain = isTestnet(chain);
+
+    if (isTestnetChain && !chain.tvl) {
+      const baseName = getBaseName(chain.name);
+      const parentTvl = parentChainTvls[baseName] || 0;
+
+      return {
+        ...chain,
+        isTestnet: true,
+        tvl: parentTvl,
+      };
+    }
+
+    return {
+      ...chain,
+      isTestnet: isTestnetChain,
+    };
+  });
+}
+
 export async function generateChainData() {
   const [chains, chainTvls] = await Promise.all([
     fetchWithCache("https://chainid.network/chains.json"),
-    fetchWithCache("https://api.llama.fi/chains")
+    fetchWithCache("https://api.llama.fi/chains"),
   ]);
 
   const overwrittenIds = overwrittenChains.reduce((acc, curr) => {
     acc[curr.chainId] = true;
     return acc;
   }, {});
 
-  const sortedChains = chains
+  const activeChains = chains
     .filter((c) => c.status !== "deprecated" && !overwrittenIds[c.chainId])
     .concat(overwrittenChains)
-    .map((chain) => populateChain(chain, chainTvls))
-    .sort((a, b) => {
-      return (b.tvl ?? 0) - (a.tvl ?? 0);
-    });
+    .map((chain) => populateChain(chain, chainTvls));
+
+  const chainsWithTestnetTvls = handleTestnets(activeChains);
+
+  const sortedChains = chainsWithTestnetTvls.sort((a, b) => {
+    // First: separate mainnets and testnets (mainnets first)
+    if (!a.isTestnet && b.isTestnet) return -1;
+    if (a.isTestnet && !b.isTestnet) return 1;
+
+    // Second: within same type (mainnet or testnet), sort by TVL (descending)
+    const aTvl = a.tvl ?? 0;
+    const bTvl = b.tvl ?? 0;
+    return bTvl - aTvl;
+  });
 
   return sortedChains;
 }

utils/index.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import en from "../translations/en.json";
-import zh from "../translations/zh.json";
+import en from "../translations/en.json" with { type: "json" };
+import zh from "../translations/zh.json" with { type: "json" };
 
 export function formatCurrency(amount, decimals = 2) {
   if (!isNaN(amount)) {
@@ -94,3 +94,17 @@ export const notTranslation =
         return en[ns][key];
     }
   };
+
+const TESTNET_KEYWORDS = ['test', 'devnet', 'sepolia', 'goerli', 'mumbai', 'fuji', 'amoy', 'hoodi'];
+
+export const isTestnet = (chain) => {
+  const lowercaseValues = [
+    chain.name,
+    chain.title,
+    chain.network
+  ].map((val) => val?.toLowerCase());
+
+  return TESTNET_KEYWORDS.some((keyword) =>
+    lowercaseValues.some((val) => val?.includes(keyword))
+  );
+};