feat: add OutdatedMetrics component

Author: ev-d

features/overview/content/banners/banners.tsx

@@ -4,6 +4,7 @@ import { CapitalQuarantined } from './capital-quarantined';
 import { CapacityExceeded } from './capacity-exceeded';
 import { ThresholdExceeded } from './threshold-exceeded';
 import { DepositsRestricted } from './deposits-restricted';
+import { OutdatedMetrics } from './outdated-metrics';
 
 import { BannerContainer } from './styles';
 
@@ -16,6 +17,7 @@ export const Banners = () => {
       <CapacityExceeded />
       <ThresholdExceeded />
       <DepositsRestricted />
+      <OutdatedMetrics />
     </BannerContainer>
   );
 };

features/overview/content/banners/outdated-metrics/index.ts

@@ -0,0 +1 @@
+export { OutdatedMetrics } from './outdated-metrics';

features/overview/content/banners/outdated-metrics/outdated-metrics.tsx

@@ -0,0 +1,22 @@
+import { NoticeContainer } from 'features/overview/shared';
+
+import { TextStyled } from '../styles';
+
+export const OutdatedMetrics = () => {
+  const date = new Date().toDateString();
+  const title = `Validator Balance Spike Detected — Metrics as of ${date}`;
+
+  return (
+    <NoticeContainer title={title}>
+      <div>
+        <TextStyled size="xxs">
+          A balance spike was detected on one or more validators, likely caused
+          by a side deposit or consolidation event. Due to current UI
+          limitations, today&apos;s metrics — Rewards, APR, Carry Spread, and
+          others — cannot be calculated accurately for this day. Data shown
+          reflects the last valid snapshot: {date}.
+        </TextStyled>
+      </div>
+    </NoticeContainer>
+  );
+};