feat: redesign validator detail page

app/components/validator/LayoutDashboard.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -68,7 +67,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <AreaChart
           :data="scoreTrendData" :height="200" :categories="scoreCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-          :y-domain="[0, 1]" hide-legend :curve-type="CurveType.MonotoneX"
+          :y-domain="[0, 1]" hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
     </div>
@@ -88,7 +87,7 @@ const donutCategories = { 0: { name: 'Availability', color: 'var(--nq-blue)' },
         <LineChart
           :data="balanceData" :height="200" :categories="balanceCategories"
           :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-          hide-legend :curve-type="CurveType.MonotoneX"
+          hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
     </div>

app/components/validator/LayoutDeepDive.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -45,7 +44,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
       <AreaChart
         :data="scoreTrendAllData" :height="280" :categories="allScoreCategories"
         :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-        :y-domain="[0, 1]" :curve-type="CurveType.MonotoneX"
+        :y-domain="[0, 1]" :curve-type="('monotoneX' as any)"
       />
     </div>
 
@@ -66,7 +65,7 @@ const dualLineCategories = { score: { name: 'Score', color: 'var(--nq-green)' }
         <span nq-label text="11 neutral-800" mb-8 block>Stakers</span>
         <LineChart
           :data="stakersData" :height="200" :categories="stakersCategories"
-          :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="CurveType.MonotoneX"
+          :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="('monotoneX' as any)"
         />
       </div>
       <div flex="~ col gap-16">

app/components/validator/LayoutProfile.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { FetchedValidatorDetails } from '~~/server/utils/validators'
-import { CurveType } from 'vue-chrts'
 
 const props = defineProps<{ validator: FetchedValidatorDetails }>()
 const validatorRef = computed(() => props.validator)
@@ -54,7 +53,7 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <AreaChart
             :data="scoreTrendData" :height="200" :categories="scoreCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => `${Math.round(t * 100)}`"
-            :y-domain="[0, 1]" hide-legend :curve-type="CurveType.MonotoneX"
+            :y-domain="[0, 1]" hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>
 
@@ -88,15 +87,15 @@ const stakersCategories = { stakers: { name: 'Stakers', color: 'var(--nq-blue)'
           <LineChart
             :data="balanceData" :height="140" :categories="balanceCategories"
             :x-formatter="(t: number) => `E${t}`" :y-formatter="(t: number) => formatLunaAsNim(t * 1e5)"
-            hide-legend :curve-type="CurveType.MonotoneX"
+            hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>
 
         <!-- Stakers chart -->
         <div bg-neutral-0 outline="~ 1.5 neutral/6" rounded-8 shadow f-p-md>
           <LineChart
             :data="stakersData" :height="140" :categories="stakersCategories"
-            :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="CurveType.MonotoneX"
+            :x-formatter="(t: number) => `E${t}`" hide-legend :curve-type="('monotoneX' as any)"
           />
         </div>
 

nuxt.config.ts

@@ -157,7 +157,7 @@ export default defineNuxtConfig({
     },
 
     externals: {
-      external: ['ws'],
+      external: ['ws', '@unovis/ts', '@unovis/vue', 'vue-chrts', 'elkjs'],
     },
   },
 

patches/@unovis__ts@1.5.2.patch

@@ -0,0 +1,15 @@
+diff --git a/index.js b/index.js
+index ef97708ce987e88d6db1189a2f735110fe04f6f6..f94a95101593cc1e05fb74e43b80ad6228b80cfd 100644
+--- a/index.js
++++ b/index.js
+@@ -1,10 +1,5 @@
+-import './containers.js';
+-import './components.js';
+-import './data-models/index.js';
+-import './types.js';
+ export { colors, colorsDark, getCSSColorVariable, getDarkerColor, getLighterColor } from './styles/colors.js';
+ export { styleExtraLargeSize, styleLargeSize } from './styles/sizes.js';
+-import './utils/index.js';
+ export { ContainerCore } from './core/container/index.js';
+ export { SingleContainer } from './containers/single-container/index.js';
+ export { XYContainer } from './containers/xy-container/index.js';

pnpm-workspace.yaml

@@ -1,6 +1,8 @@
 packages:
   - packages/**
 
+patchedDependencies:
+  '@unovis/ts@1.5.2': patches/@unovis__ts@1.5.2.patch
 catalog:
   '@antfu/eslint-config': ^4.19.0
   '@antfu/ni': ^25.0.0