@mundogamernetwork/shared-ui 1.13.2 → 1.13.4

package/components/ui/MgXpLevelBar.vue

@@ -32,6 +32,27 @@ const emit = defineEmits<{ (e: "navigate"): void }>();
 /** Missions and the reward store live on Community for the whole ecosystem. */
 const COMMUNITY_URL = "https://mundogamer.community";
 
+/**
+ * Dig out the payload regardless of how many envelopes wrap it.
+ *
+ * The API nests deeper than its own sendResponse() suggests — the gateway adds
+ * a second {message,data,status_code} layer on top, so the payload sits at
+ * response.data.data.data rather than response.data.data. Reading a fixed
+ * depth silently returned the inner envelope, which has no `level`, so the bar
+ * loaded and vanished on a perfectly good 200. Walking down until the shape
+ * appears survives either nesting.
+ */
+function unwrapSummary(payload: any): GamificationSummary | null {
+	let node = payload;
+
+	for (let depth = 0; depth < 4 && node && typeof node === "object"; depth += 1) {
+		if (node.level || node.wallet || node.missions) return node as GamificationSummary;
+		node = node.data;
+	}
+
+	return null;
+}
+
 const summary = ref<GamificationSummary | null>(null);
 const loaded = ref(false);
 
@@ -55,7 +76,12 @@ const destination = computed(() => {
 const balance = computed(() => {
 	const fromHost = props.mgcBalance;
 	const value = fromHost !== null && fromHost !== undefined ? fromHost : summary.value?.wallet?.balance;
-	return typeof value === "number" ? Math.floor(value).toLocaleString() : null;
+	// The API sends the balance as a decimal string ("1801.50"), not a number.
+	const numeric = typeof value === "string" ? Number(value) : value;
+
+	return typeof numeric === "number" && Number.isFinite(numeric)
+		? Math.floor(numeric).toLocaleString()
+		: null;
 });
 
 // progress_percent comes from the API; the local computation is a fallback for
@@ -71,7 +97,7 @@ const percent = computed(() => {
 onMounted(async () => {
 	try {
 		const response = await fetchGamificationSummary();
-		summary.value = response?.data?.data ?? response?.data ?? null;
+		summary.value = unwrapSummary(response?.data);
 	} catch (error) {
 		// Never let a gamification hiccup break the header it sits in — but say
 		// so. Swallowing this silently made a deployed bar that renders nothing
@@ -86,13 +112,24 @@ onMounted(async () => {
 </script>
 
 <template>
+	<!--
+		The root renders unconditionally so the server and the client agree on
+		the node at hydration time. A v-if here produced a comment on the server
+		and an <a> on the client, and Vue bails out of hydrating a subtree whose
+		node type disagrees — leaving the server markup in place and never
+		mounting the component, so onMounted never ran and the bar was silently
+		dead. The skeleton is what both sides render before the fetch resolves.
+	-->
 	<a
-		v-if="loaded && level"
 		:href="destination"
 		class="mg-xp-bar"
-		:class="{ 'mg-xp-bar--compact': props.compact }"
+		:class="{
+			'mg-xp-bar--compact': props.compact,
+			'mg-xp-bar--empty': loaded && !level,
+		}"
 		@click="emit('navigate')"
 	>
+		<template v-if="level">
 		<div class="mg-xp-bar__top">
 			<span class="mg-xp-bar__badge">{{ level.current_level }}</span>
 
@@ -111,6 +148,17 @@ onMounted(async () => {
 		<div class="mg-xp-bar__track">
 			<div class="mg-xp-bar__fill" :style="{ width: percent + '%' }" />
 		</div>
+		</template>
+
+		<template v-else>
+			<div class="mg-xp-bar__top">
+				<span class="mg-xp-bar__badge mg-xp-bar__skeleton" />
+				<div class="mg-xp-bar__meta">
+					<span class="mg-xp-bar__skeleton mg-xp-bar__skeleton--line" />
+				</div>
+			</div>
+			<div class="mg-xp-bar__track" />
+		</template>
 	</a>
 </template>
 
@@ -232,6 +280,22 @@ onMounted(async () => {
 		transition: width 0.3s ease;
 	}
 
+	// Hidden only after the fetch resolves with nothing — a client-side change
+	// that happens well after hydration, so it cannot cause a mismatch.
+	&--empty {
+		display: none;
+	}
+
+	&__skeleton {
+		background: rgba(128, 128, 128, 0.25);
+		border-color: transparent;
+
+		&--line {
+			height: 9px;
+			width: 70%;
+		}
+	}
+
 	&--compact {
 		padding: 0.35rem 0.5rem;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/services/gamificationService.ts

@@ -18,7 +18,8 @@ export interface XpLevel {
 
 export interface GamificationSummary {
 	level: XpLevel;
-	wallet: { balance: number; lifetime_earned: number };
+	/** The API serialises these as decimal strings, not numbers. */
+	wallet: { balance: number | string; lifetime_earned: number | string };
 	missions: { active: any[]; claimable_count: number };
 	achievements: { total_unlocked: number; recent: any[] };
 }