diff --git a/src/plugins/plugin-json-rpc.ts b/src/plugins/plugin-json-rpc.ts index 3c7cd429707..36c5a225656 100644 --- a/src/plugins/plugin-json-rpc.ts +++ b/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 { try { const response = await fetch(url, { method: "GET" }); @@ -18,7 +61,7 @@ async function fetchData(url: string, name: string): Promise { } async function fetchMultipleData( - requests: { url: string; name: string }[], + requests: { url: string; name: string }[] ): Promise { 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, }, }, - } + }; }, }; }