Fix badge loading

Author: GusevPM

components/modules/rollup/RollupOverview.vue

@@ -22,6 +22,9 @@ import { getRankCategory } from "@/services/constants/rollups"
 /** API */
 import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
 
+/** Data */
+import badges from "@data/badges.json"
+
 /** Store */
 import { useCacheStore } from "@/store/cache.store"
 import { useNotificationsStore } from "@/store/notifications.store"
@@ -100,10 +103,9 @@ const tags = computed(() =>
 	}, []),
 )
 
-const { data: badges } = await useFetch('/api/badges')
 const showBadges = computed(() => {
-	const showSettled = props.rollup?.settled_on && badges.value?.settled?.includes(props.rollup?.settled_on?.toLowerCase())
-	const showProvider = props.rollup?.provider && badges.value?.providers?.includes(props.rollup?.provider?.toLowerCase())
+	const showSettled = props.rollup?.settled_on && badges?.settled?.includes(props.rollup?.settled_on?.toLowerCase())
+	const showProvider = props.rollup?.provider && badges?.provider?.includes(props.rollup?.provider?.toLowerCase())
 	
 	return {
 		show: showSettled || showProvider,
@@ -416,7 +418,7 @@ const handleCSVDownload = async (value) => {
 						/>
 					</Flex>
 
-					<Flex align="center" justify="start" gap="16" wrap="wrap" :style="{ marginTop: showBadges.show ? '0px' : '-24px' }">
+					<Flex align="center" justify="start" gap="16" wrap="wrap" :style="{ marginTop: showBadges.show ? '0px' : '-20px' }">
 						<Tooltip v-if="rollup.website" position="start" delay="300">
 							<a :href="rollup.website" target="_blank">
 								<Icon name="globe" size="14" color="secondary" />

nuxt.config.ts

@@ -143,6 +143,7 @@ export default defineNuxtConfig({
 		resolve: {
 			alias: {
 				"unenv/runtime/node/buffer/index/": path.resolve(__dirname, "./node_modules/buffer/index"),
+				"@data": path.resolve(__dirname, "src/data"),
 			},
 		},
 		plugins: [wasm(), topLevelAwait(), nodePolyfills()],

package.json

@@ -6,9 +6,10 @@
 	"license": "MIT",
 	"type": "module",
 	"scripts": {
-		"build": "nuxt build",
-		"dev": "cross-env PORT=9090 nuxt dev",
+		"build": "npm run generate-badges && nuxt build",
+		"dev": "npm run generate-badges && cross-env PORT=9090 nuxt dev",
 		"generate": "nuxt generate",
+		"generate-badges": "node scripts/generateBadgesList.js",
 		"preview": "nuxt preview",
 		"postinstall": "nuxt prepare",
 		"lint": "oxlint"

scripts/generateBadgesList.js

@@ -0,0 +1,27 @@
+import fs from "fs"
+import path from "path"
+
+const folders = ["provider", "settled"]
+const publicPath = path.resolve("public/img/badges")
+
+let result = {}
+
+for (const folder of folders) {
+    const folderPath = path.join(publicPath, folder)
+    const files = fs.readdirSync(folderPath)
+        .filter(file => !file.startsWith("."))
+        .map(file => path.parse(file).name)
+    
+    result[folder] = files
+}
+
+const outputDir = path.resolve("src/data");
+fs.mkdirSync(outputDir, { recursive: true });
+
+const outputPath = path.join(outputDir, "badges.json");
+fs.writeFileSync(
+    outputPath,
+    JSON.stringify(result, null, 2)
+)
+
+console.log("✅ Badges list generated:", result);

server/api/badges.get.js

@@ -12,7 +12,7 @@ export default defineEventHandler(() => {
     }
 
     return {
-        providers: getFiles('provider'),
+        provider: getFiles('provider'),
         settled: getFiles('settled')
     }
 })

services/config.js

@@ -42,7 +42,7 @@ export const useServerURL = () => {
 			return Server.API.dev
 
 		default:
-			return Server.API.mainnet
+			return Server.API.mocha
 	}
 }
 
@@ -69,7 +69,7 @@ export const useSocketURL = () => {
 			return Server.WSS.dev
 
 		default:
-			return Server.WSS.mainnet
+			return Server.WSS.mocha
 	}
 }
 

src/data/badges.json

@@ -0,0 +1,16 @@
+{
+  "provider": [
+    "bvm.network",
+    "caldera",
+    "conduit",
+    "dymension",
+    "gelato",
+    "initia",
+    "movement"
+  ],
+  "settled": [
+    "arbitrum",
+    "base",
+    "ethereum"
+  ]
+}