Rearrange API methods in the sidebar. (#2098)

* Rearrange API methods in the sidebar.

Signed-off-by: bgravenorst <[email protected]>

* Address feedback.

Signed-off-by: bgravenorst <[email protected]>

---------

Signed-off-by: bgravenorst <[email protected]>

Author: bgravenorst

src/plugins/plugin-json-rpc.ts

@@ -7,6 +7,49 @@ export interface ResponseItem {
   error: Error | null | boolean;
 }
 
+interface MethodItem {
+  name: string;
+}
+
+// Method sorting configuration
+const METHOD_SORT_PRIORITIES = {
+  wallet_: 1, // Highest priority - appears first
+  eth_: 2, // Second priority
+  personal_: 3, // Third priority
+  web3_: 4, // Fourth priority
+  // Default priority for any other prefixes
+  default: 999,
+};
+
+const METHOD_SORT_CONFIG = {
+  priorities: METHOD_SORT_PRIORITIES,
+};
+
+// Helper function to extract method prefix
+const getMethodPrefix = (methodName: string): string => {
+  const prefix = methodName.split("_")[0] + "_";
+  return prefix;
+};
+
+// Sort methods by priority group, then alphabetically within each group
+const sortMethods = (items: MethodItem[], sortConfig = METHOD_SORT_CONFIG) => {
+  return [...items].sort((a, b) => {
+    const aPrefix = getMethodPrefix(a.name);
+    const bPrefix = getMethodPrefix(b.name);
+
+    const aPriority = sortConfig.priorities[aPrefix] || sortConfig.priorities.default;
+    const bPriority = sortConfig.priorities[bPrefix] || sortConfig.priorities.default;
+
+    // First sort by priority group
+    if (aPriority !== bPriority) {
+      return aPriority - bPriority;
+    }
+
+    // Then sort alphabetically within the same group
+    return a.name.localeCompare(b.name);
+  });
+};
+
 async function fetchData(url: string, name: string): Promise<ResponseItem> {
   try {
     const response = await fetch(url, { method: "GET" });
@@ -18,7 +61,7 @@ async function fetchData(url: string, name: string): Promise<ResponseItem> {
 }
 
 async function fetchMultipleData(
-  requests: { url: string; name: string }[],
+  requests: { url: string; name: string }[]
 ): Promise<ResponseItem[]> {
   const promises = requests.map(({ url, name }) => fetchData(url, name));
   const responses = await Promise.all(promises);
@@ -45,28 +88,38 @@ const requests = [
   },
 ];
 
-export const prepareLinkItems = (items, refPath) => {
-  return items.map((method) => ({
+export const prepareLinkItems = (
+  items: MethodItem[],
+  refPath: string,
+  sortConfig = METHOD_SORT_CONFIG
+): { type: string; label: string; href: string }[] => {
+  const sortedItems = sortMethods(items, sortConfig);
+
+  return sortedItems.map(method => ({
     type: "link",
     label: method.name,
     href: `/${refPath}/${method.name.toLowerCase()}`,
-  }))
-}
+  }));
+};
 
-export const fetchAndGenerateDynamicSidebarItems = async (url: string, refPath: string, network: string) => {
+export const fetchAndGenerateDynamicSidebarItems = async (
+  url: string,
+  refPath: string,
+  network: string
+) => {
   const dynamicRefItems = await fetchData(url, network);
   if (dynamicRefItems.data && !dynamicRefItems.error) {
     return prepareLinkItems(dynamicRefItems.data.methods, refPath);
   }
-  return []
-}
+  return [];
+};
 
 export default function useNetworksMethodPlugin() {
   return {
     name: "plugin-json-rpc",
     async loadContent() {
       return await fetchMultipleData(requests)
-        .then((responseArray) => {
+        .then(responseArray => {
           return responseArray;
         })
         .catch(() => {
@@ -79,40 +132,38 @@ export default function useNetworksMethodPlugin() {
       const dynamicRoutes = content.find(item => item.name === NETWORK_NAMES.metamask);
       if (dynamicRoutes) {
         const methodsData = await createData(
-          'methodsData.json',
+          "methodsData.json",
           JSON.stringify(dynamicRoutes.data.methods)
         );
-        dynamicRoutes.data.methods.forEach(async (method) => {
-          return addRoute({
+        for (const method of dynamicRoutes.data.methods) {
+          await addRoute({
             path: `/${MM_REF_PATH}/${method.name.toLowerCase()}`,
             component: require.resolve("../components/CustomReferencePage/index.tsx"),
             modules: {
               methodsData: methodsData,
             },
             exact: true,
-            customData: { ...method, networkName: NETWORK_NAMES.metamask }
+            customData: { ...method, networkName: NETWORK_NAMES.metamask },
           });
-        });
+        }
       }
     },
     configureWebpack() {
       return {
-        plugins: [
-          new NodePolyfillPlugin()
-        ],
+        plugins: [new NodePolyfillPlugin()],
         resolve: {
           alias: {
-            "@site-global": path.resolve(__dirname, '../methodsData.json'),
+            "@site-global": path.resolve(__dirname, "../methodsData.json"),
             fs: false,
             module: false,
-            "child_process": false,
-            "worker_threads": false,
+            child_process: false,
+            worker_threads: false,
             "uglify-js": false,
             "@swc/core": false,
-            "esbuild": false,
+            esbuild: false,
           },
         },
-      }
+      };
     },
   };
 }