chore: package Diff component and reuse it for the delegation list

Author: kuco23

src/assets/css/pageStatsPanel.scss

@@ -85,9 +85,6 @@
   }
 
   .metric-trend {
-    display: flex;
-    align-items: center;
-    gap: 5px;
     margin-top: 12px;
     font-size: 1.2rem;
   }

src/components/pages/diff.tsx

@@ -0,0 +1,14 @@
+export const Diff = ({ diff, unit }) => {
+  let color = '#50e3c2'
+  const neg = typeof diff == 'string' && diff.startsWith('-')
+  if (neg) {
+    diff = diff.slice(1)
+    color = '#ff3e55'
+  }
+  return <span style={{ color }}>
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d={neg ? "M6 9L12 15L18 9" : "M18 15L12 9L6 15"} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+    <span style={{ marginLeft: 5 }}>{diff} {unit}</span>
+  </span>
+}

src/components/sections/callToAction.tsx

@@ -29,7 +29,7 @@ const CallToAction = () => {
   if (walletAddress == null) {
     component = <div className="hero-btns">
       <a onClick={onConnectWallet} className="theme-btn">
-        Connect Wallet To See Your Options
+        Connect Wallet
       </a>
     </div>
   } else if (isLoading) {

src/components/ui/delegationSummary.tsx

@@ -1,11 +1,10 @@
-import classNames from "classnames"
 import { SpinnerCircular } from "spinners-react"
 import { ApiResponseDto_PageStatsDto } from "~/backendApi"
 import { Formatter } from "~/utils/misc/formatter"
+import { Diff } from "../pages/diff"
 import { PAGE_COLOR_CODE } from "~/constants"
 
-const DOWN_ARROW = "M6 9L12 15L18 9"
-const UP_ARROW = "M18 15L12 9L6 15"
+
 
 const DelegationSummary = ({ data, isLoading, error }: {
   data: ApiResponseDto_PageStatsDto, isLoading: boolean, error: string
@@ -31,20 +30,10 @@ const DelegationSummary = ({ data, isLoading, error }: {
     console.log(String(error)) // should not happen
   }
 
-  const delegatedNeg = typeof delegatedDiff == 'string' && delegatedDiff.startsWith('-')
-  const delegatorNeg = typeof delegatorDiff == 'string' && delegatorDiff.startsWith('-')
-
-  if (delegatedNeg) {
-    delegatedDiff = delegatedDiff.slice(1)
-  }
-  if (delegatorNeg) {
-    delegatorDiff = delegatorDiff.slice(1)
-  }
-
   return <div className="page-stats-container">
     <div className="dashboard loading">
-
       <div className="metrics-grid">
+
         <div className="metric-card" data-start="0" data-end="7489" data-increment="1" data-speed="10">
           <div className="metric-title">
             Total Delegated
@@ -53,11 +42,8 @@ const DelegationSummary = ({ data, isLoading, error }: {
             <span className="counter-unit">$</span>
             <div className="counter" id="counter-1">{delegated}</div>
           </div>
-          <div className={classNames('metric-trend', { 'trend-down': delegatedNeg, 'trend-up': !delegatedNeg })}>
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d={delegatedNeg ? DOWN_ARROW : UP_ARROW} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-            <span>{delegatedDiff} in 24h</span>
+          <div className="metric-trend">
+            <Diff diff={delegatedDiff} unit={"in 24h"} />
           </div>
         </div>
 
@@ -69,11 +55,8 @@ const DelegationSummary = ({ data, isLoading, error }: {
             <div className="counter" id="counter-2">{delegators}</div>
             <span className="counter-unit">users</span>
           </div>
-          <div className={classNames('metric-trend', { 'trend-down': delegatorNeg, 'trend-up': !delegatorNeg })}>
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d={delegatorNeg ? DOWN_ARROW : UP_ARROW} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-            <span>{delegatorDiff} in 24h</span>
+          <div className="metric-trend">
+            <Diff diff={delegatorDiff} unit={"in 24h"} />
           </div>
         </div>
 

src/components/ui/delegationUpdates.tsx

@@ -1,9 +1,10 @@
 import React from "react"
 import { SpinnerCircular } from "spinners-react"
 import { ApiResponseDto_PageStatsDto, DelegationDto } from "~/backendApi"
-import * as C from "~/constants"
 import { Formatter } from "~/utils/misc/formatter"
 import { HashLink } from "../utils/links"
+import { Diff } from "../pages/diff"
+import * as C from "~/constants"
 import avalanche from "../../assets/images/tokens/AVAX.svg"
 import flare from "../../assets/images/tokens/FLR.svg"
 import songbird from "../../assets/images/tokens/SGB.svg"
@@ -59,16 +60,6 @@ function resolveProtocolName(protocol: DelegationDto.protocol): string {
   }
 }
 
-const NumberDiff = ({ text, value }: { text: string, value: number }) => {
-  if (value > 0) {
-    return <span style={{ color: '#50e3c2' }}>+{text}</span>
-  } else if (value < 0) {
-    return <span style={{ color: '#ff3e55' }}>{text}</span>
-  } else {
-    return <span style={{ color: 'white' }}>0</span>
-  }
-}
-
 const DelegationUpdates = ({ data, isLoading, error }: {
   data: ApiResponseDto_PageStatsDto, isLoading: boolean, error: string
 }) => {
@@ -94,12 +85,12 @@ const DelegationUpdates = ({ data, isLoading, error }: {
       {delegations.map((delegation, i) => {
         const logo = chainToLogoUrl(delegation.chain)
         const url = chainToTransactionUrl(delegation.chain, delegation.protocol, delegation.transaction)
-        const delegated = Formatter.number(delegation.delegated)
+        const diff = Formatter.number(delegation.delegated)
         return <React.Fragment key={i}>
           <div><img src={logo} width={25} /></div>
           <div>{resolveProtocolName(delegation.protocol)}</div>
           <div><HashLink address={delegation.transaction} url={url} length={5} copy={false} /></div>
-          <div><NumberDiff value={Number(delegation.delegated)} text={delegated} /></div>
+          <div style={{ textAlign: 'center' }}><Diff diff={diff} unit={chainToSymbol(delegation.chain)} /></div>
           <div>{Formatter.relativeDate(delegation.timestamp)}</div>
         </React.Fragment>
       })}

src/pages/protocols/flare-fsp/components/delegateLocal.tsx

@@ -59,7 +59,7 @@ const FlareFspLocalDelegateComponent = () => {
   if (walletAddress == null) {
     component = <div style={{ textAlign: 'center' }}>
       <a onClick={connectWallet} className="theme-btn">
-        Connect Wallet To See Your Position
+        Connect Wallet
       </a>
     </div>
   } else if (isLoading) {

src/pages/protocols/flare-validator/components/delegateLocal.tsx

@@ -121,7 +121,7 @@ const FlareValidatorLocalDelegateComponent = () => {
   if (walletAddress == null) {
     component = <div style={{ textAlign: 'center' }}>
       <a onClick={onConnectWallet} className="theme-btn">
-        Connect Wallet To See Your Position
+        Connect Wallet
       </a>
     </div>
   } else if (isLoading && resp?.data == null && resp?.status != 404) {

src/pages/protocols/songbird-fsp/components/delegateLocal.tsx

@@ -59,7 +59,7 @@ const SongbirdFspLocalDelegateComponent = () => {
   if (walletAddress == null) {
     component = <div style={{ textAlign: 'center' }}>
       <a onClick={connectWallet} className="theme-btn">
-        Connect Wallet To See Your Position
+        Connect Wallet
       </a>
     </div>
   } else if (isLoading) {