chore: add nowrap to whitespaces, lower avalanche background image quality, rename some stuff

Author: kuco23

src/assets/css/custom.css

@@ -84,10 +84,10 @@
 
 /* DELEGATION LIST */
 
-
 .delegation-updates {
   display: grid;
   grid-template-columns: auto auto auto auto auto;
+  white-space: nowrap;
   overflow-x: auto;
 }
 

src/assets/css/specs.css

@@ -7,6 +7,7 @@
 
 .specs-table-container {
   overflow-x: auto;
+  white-space: nowrap;
   width: auto;
 }
 
@@ -32,8 +33,8 @@
 
 .specs-table-data-right {
   text-align: right;
-  color: white;
   font-weight: bold;
+  color: white;
 }
 
 .specs-table-data-left {

src/assets/images/protocols/avalanche/validator/background.jpeg

@@ -54,7 +54,7 @@ const FspStatsComponent = ({ stats, chain }: { stats: FspStatisticsDto, chain: C
       <div className="row">
         <div className="col-lg-6">
           <MeterBar name='Primary Success' ranges={[20, 50]} value={last.primary} text={primary} />
-          <MeterBar name='Secondary Success' ranges={[80, 95]} value={last.secondary} text={secondary} />
+          <MeterBar name='Secondary Success' ranges={[75, 90]} value={last.secondary} text={secondary} />
         </div>
         <div className="col-lg-6">
           <MeterBar name='Uptime' ranges={[95, 98]} value={last.uptime} text={uptime} />

src/assets/images/protocols/avalanche/validator/background.png

@@ -5,8 +5,8 @@ import { PageDataService } from '~/backendApi'
 import profile from "../../assets/images/about/profile.svg"
 import SlideUp from '../../utils/animations/slideUp'
 import ServerError from '../ui/serverError'
-import DelegatedStats from '../ui/baseMetrics'
-import DelegationList from '../ui/delegationList'
+import DelegationSummary from '../ui/delegationSummary'
+import DelegationUpdates from '../ui/delegationUpdates'
 import { REFRESH_QUERY_SLOW_MS } from '~/constants'
 
 
@@ -26,12 +26,12 @@ const Hero = () => {
     component = <>
       <SlideUp>
         <div className="about-content-part">
-          <DelegatedStats data={data} isLoading={isLoading} error={error} />
+          <DelegationSummary data={data} isLoading={isLoading} error={error} />
         </div>
       </SlideUp>
       <SlideUp>
         <div className="about-content-part-bottom">
-          <DelegationList data={data} isLoading={isLoading} error={error} />
+          <DelegationUpdates data={data} isLoading={isLoading} error={error} />
         </div>
       </SlideUp>
     </>

src/components/pages/fsp-stats.tsx

@@ -7,7 +7,7 @@ import { PAGE_COLOR_CODE } from "~/constants"
 const DOWN_ARROW = "M6 9L12 15L18 9"
 const UP_ARROW = "M18 15L12 9L6 15"
 
-const DelegatedStats = ({ data, isLoading, error }: {
+const DelegationSummary = ({ data, isLoading, error }: {
   data: ApiResponseDto_PageStatsDto, isLoading: boolean, error: string
 }) => {
   let delegated = null
@@ -21,8 +21,8 @@ const DelegatedStats = ({ data, isLoading, error }: {
     const _delegators1 = data.data.delegated.reduce((x, y) => x + y.delegators, 0)
     delegated = Formatter.number(_delegated1)
     delegators = Formatter.number(_delegators1)
-    delegatedDiff = Formatter.percent(_delegated0 > 0 ? _delegated1 / _delegated0 - 1 : 0, 0)
-    delegatorDiff = Formatter.percent(_delegators0 > 0 ? _delegators1 / _delegators0 - 1 : 0, 0)
+    delegatedDiff = Formatter.percent(_delegated0 > 0 ? _delegated1 / _delegated0 - 1 : 0)
+    delegatorDiff = Formatter.percent(_delegators0 > 0 ? _delegators1 / _delegators0 - 1 : 0)
   } else if (isLoading) {
     return <div style={{ textAlign: 'center' }}>
       <SpinnerCircular color={PAGE_COLOR_CODE} size={40} />
@@ -82,4 +82,4 @@ const DelegatedStats = ({ data, isLoading, error }: {
   </div>
 }
 
-export default DelegatedStats
+export default DelegationSummary

src/components/sections/hero.tsx

@@ -57,7 +57,7 @@ const NumberDiff = ({ text, value }: { text: string, value: bigint }) => {
   }
 }
 
-const DelegationList = ({ data, isLoading, error }: {
+const DelegationUpdates = ({ data, isLoading, error }: {
   data: ApiResponseDto_PageStatsDto, isLoading: boolean, error: string
 }) => {
 
@@ -97,4 +97,4 @@ const DelegationList = ({ data, isLoading, error }: {
 }
 
 
-export default DelegationList
+export default DelegationUpdates

src/components/ui/baseMetrics.tsx src/components/ui/delegationSummary.tsxsrc/components/ui/baseMetrics.tsx renamed to src/components/ui/delegationSummary.tsx

@@ -1,7 +1,10 @@
 import { Formatter } from "~/utils/misc/formatter"
 
 const MAX_PERC = 100
-const LED_TOTAL = 70
+
+const LEDS_PER_PIXEL = 0.035
+const MIN_LEDS = 10
+const MAX_LEDS = 70
 
 const OPACITY_BEFORE = 0.25
 const OPACITY_AFTER = 1
@@ -20,40 +23,45 @@ type args = {
   reverse?: boolean
 }
 
-const MeterBar = ({ name, value, text, ranges, height = 40, reverse = false }: args) => {
+const MeterBar = ({ name, value, text, ranges, height = 40 }: args) => {
+  const leds = Math.min(Math.max(LEDS_PER_PIXEL * window.innerWidth, MIN_LEDS), MAX_LEDS)
+
   value = value * MAX_PERC
+  let valueidx = 0
 
   function getRatio(index: number) {
-    return Math.floor(MAX_PERC * index / LED_TOTAL)
+    return Math.floor(MAX_PERC * index / leds)
   }
 
   function getLedOpacity(ratio: number) {
     return value < ratio ? OPACITY_BEFORE : OPACITY_AFTER
   }
 
-  function getLedColor(ratio: number) {
+  function getColorIdx(ratio: number): number {
+    if (ratio < value) {
+      return valueidx
+    }
     let coloridx = null
     for (let i = 0; i < ranges.length; i++) {
-      if (ratio < ranges[i]) {
+      if (ranges[i] >= ratio) {
         coloridx = i
         break
       }
     }
-    if (coloridx == null) coloridx = ranges.length
-    return reverse ? COLORS[ranges.length-coloridx] : COLORS[coloridx]
+    if (coloridx == null) {
+      coloridx = ranges.length
+    }
+    return coloridx
   }
 
-  const valuecolor = getLedColor(value)
-  if (text == null) {
-    text = Formatter.percent(value / 100, 0)
-  }
+  valueidx = getColorIdx(value)
 
   let data: { color: string[], opacity: number }[] = []
-  for (let i = 0; i < LED_TOTAL; i++) {
+  for (let i = 0; i < leds; i++) {
     const ratio = getRatio(i)
-    const color = getLedColor(ratio)
+    const color = getColorIdx(ratio)
     const opacity = getLedOpacity(ratio)
-    data.push({ color, opacity })
+    data.push({ color: COLORS[color], opacity })
   }
 
   return (
@@ -66,7 +74,9 @@ const MeterBar = ({ name, value, text, ranges, height = 40, reverse = false }: a
               key={i} style={{ background: d.color[1], opacity: d.opacity }}></span>
           })
         }
-        <span className='meter-bar-desc' style={{ color: valuecolor[0] }}>{ text }</span>
+        <span className='meter-bar-desc' style={{ color: COLORS[valueidx][0] }}>
+          { text ?? Formatter.percent(value / MAX_PERC) }
+        </span>
       </div>
     </div>
   );

src/components/ui/delegationList.tsx src/components/ui/delegationUpdates.tsxsrc/components/ui/delegationList.tsx renamed to src/components/ui/delegationUpdates.tsx

@@ -5,7 +5,7 @@ import { unixnow } from "~/utils/misc/time"
 import { REFRESH_QUERY_FAST_MS } from "~/constants"
 
 
-const DelegatorList = ({ delegators }: { delegators: AvalancheDelegationDto[] }) => {
+const UserDelegations = ({ delegators }: { delegators: AvalancheDelegationDto[] }) => {
   let { data: now } = useSWR('delegator-list-refresh', (_) => null, { refreshInterval: REFRESH_QUERY_FAST_MS })
   now = unixnow()
 
@@ -37,4 +37,4 @@ const DelegatorList = ({ delegators }: { delegators: AvalancheDelegationDto[] })
 
 }
 
-export default DelegatorList
+export default UserDelegations