635 lines
20 KiB
Vue
635 lines
20 KiB
Vue
<template>
|
|
<div v-if="stats" class="live-stats">
|
|
<div class="live-header">
|
|
<span class="live-dot" :class="{ 'live-dot-error': error }"></span>
|
|
<span class="live-text">Live</span>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-item" :class="{ 'stat-changed': changedStats.has('ethReserve') }">
|
|
<div class="stat-label">ETH Reserve</div>
|
|
<div class="stat-value">{{ ethReserveDisplay }}</div>
|
|
<div v-if="ethReserveSecondary" class="stat-secondary">{{ ethReserveSecondary }}</div>
|
|
<div v-if="growthIndicator !== null" class="growth-badge" :class="growthClass">{{ growthIndicator }}</div>
|
|
<svg v-if="ethReserveSpark.length > 1" class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none">
|
|
<polyline :points="toSvgPoints(ethReserveSpark)" fill="none" stroke="rgba(96,165,250,0.5)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
|
|
</svg>
|
|
<span v-else-if="stats" class="spark-placeholder">Gathering data...</span>
|
|
</div>
|
|
<div class="stat-item" :class="{ 'stat-changed': changedStats.has('ethPerToken') }">
|
|
<div class="stat-label">ETH / Token</div>
|
|
<div class="stat-value">{{ ethPerTokenDisplay }}</div>
|
|
<div v-if="ethPerTokenSecondary" class="stat-secondary">{{ ethPerTokenSecondary }}</div>
|
|
</div>
|
|
<div class="stat-item" :class="{ 'stat-changed': changedStats.has('supply') }">
|
|
<div class="stat-label">Supply (7d)</div>
|
|
<div class="stat-value">{{ totalSupply }}</div>
|
|
<div v-if="netSupplyIndicator !== null" class="growth-badge" :class="netSupplyClass">{{ netSupplyIndicator }}</div>
|
|
<svg v-if="supplySpark.length > 1" class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none">
|
|
<polyline :points="toSvgPoints(supplySpark)" fill="none" stroke="rgba(74,222,128,0.5)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
|
|
</svg>
|
|
<span v-else-if="stats" class="spark-placeholder">Gathering data...</span>
|
|
</div>
|
|
<div class="stat-item" :class="{ 'stat-changed': changedStats.has('holders') }">
|
|
<div class="stat-label">Holders</div>
|
|
<div class="stat-value">{{ holders }}</div>
|
|
<div v-if="holderGrowthIndicator !== null" class="growth-badge" :class="holderGrowthClass">{{ holderGrowthIndicator }}</div>
|
|
<svg v-if="holdersSpark.length > 1" class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none">
|
|
<polyline :points="toSvgPoints(holdersSpark)" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
|
|
</svg>
|
|
<span v-else-if="stats" class="spark-placeholder">Gathering data...</span>
|
|
</div>
|
|
<div class="stat-item" :class="{ 'pulse': isRecentRebalance, 'stat-changed': changedStats.has('rebalances') }">
|
|
<div class="stat-label">Rebalances</div>
|
|
<div class="stat-value">{{ rebalanceCount }}</div>
|
|
<div class="growth-badge growth-flat">{{ lastRebalance }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="freshness">{{ error ? 'Connection lost' : `Updated ${secondsSinceUpdate}s ago` }}</div>
|
|
</div>
|
|
<div v-else-if="!error" class="live-stats">
|
|
<div class="stats-grid">
|
|
<div class="stat-item skeleton" v-for="i in 6" :key="i">
|
|
<div class="stat-label skeleton-text"></div>
|
|
<div class="stat-value skeleton-text"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="live-stats live-stats-error" data-testid="livestats-error">
|
|
<p class="error-message">Protocol data unavailable</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
|
|
|
// Must match RING_BUFFER_SEGMENTS and HOURS_IN_RING_BUFFER in services/ponder/src/helpers/stats.ts
|
|
const RING_SEGMENTS = 4; // ethReserve, minted, burned, holderCount
|
|
const RING_HOURS = 168; // 7 days * 24 hours
|
|
|
|
interface Stats {
|
|
kraikenTotalSupply: string;
|
|
holderCount: number;
|
|
lastRecenterTimestamp: number;
|
|
recentersLastWeek: number;
|
|
lastEthReserve: string;
|
|
mintedLastWeek: string;
|
|
burnedLastWeek: string;
|
|
netSupplyChangeWeek: string;
|
|
ethReserveGrowthBps: number | null;
|
|
ringBuffer: string[] | null;
|
|
ringBufferPointer: number | null;
|
|
}
|
|
|
|
const stats = ref<Stats | null>(null);
|
|
const error = ref(false);
|
|
const ethUsdPrice = ref<number | null>(null);
|
|
let refreshInterval: number | null = null;
|
|
let ethPriceInterval: number | null = null;
|
|
let ethPriceCacheTime = 0;
|
|
const ETH_PRICE_CACHE_MS = 5 * 60 * 1000; // 5 minutes
|
|
const changedStats = ref<Set<string>>(new Set());
|
|
const secondsSinceUpdate = ref(0);
|
|
let freshnessTicker: number | null = null;
|
|
let changeTimeout: number | null = null;
|
|
let loadingTimer: number | null = null;
|
|
const LOADING_TIMEOUT_MS = 10_000; // escalate to error after 10s with no data
|
|
|
|
// Helper: safely convert a Wei BigInt string to ETH float
|
|
function weiToEth(wei: string | null | undefined): number {
|
|
if (!wei || wei === '0') return 0;
|
|
try {
|
|
return Number(BigInt(wei)) / 1e18;
|
|
} catch {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Extract a time-ordered series from the ring buffer for a given slot offset.
|
|
* Skips leading zeros (pre-launch padding).
|
|
*/
|
|
function extractSeries(ringBuffer: string[], pointer: number, slotOffset: number): number[] {
|
|
if (ringBuffer.length !== RING_HOURS * RING_SEGMENTS) {
|
|
return [];
|
|
}
|
|
const raw: number[] = [];
|
|
for (let i = 0; i < RING_HOURS; i++) {
|
|
// Walk from oldest to newest
|
|
const idx = ((pointer + 1 + i) % RING_HOURS) * RING_SEGMENTS + slotOffset;
|
|
raw.push(Number(ringBuffer[idx] || '0'));
|
|
}
|
|
// Skip leading zeros (pre-launch padding) — use findIndex on any non-zero
|
|
// Note: legitimate zero values mid-series are kept, only leading zeros trimmed
|
|
const firstNonZero = raw.findIndex(v => v > 0);
|
|
return firstNonZero === -1 ? [] : raw.slice(firstNonZero);
|
|
}
|
|
|
|
/**
|
|
* Build cumulative net supply series from minted (slot 1) and burned (slot 2).
|
|
*/
|
|
function extractSupplySeries(ringBuffer: string[], pointer: number): number[] {
|
|
if (ringBuffer.length !== RING_HOURS * RING_SEGMENTS) return [];
|
|
const minted: number[] = [];
|
|
const burned: number[] = [];
|
|
for (let i = 0; i < RING_HOURS; i++) {
|
|
const idx = ((pointer + 1 + i) % RING_HOURS) * RING_SEGMENTS;
|
|
minted.push(Number(ringBuffer[idx + 1] || '0'));
|
|
burned.push(Number(ringBuffer[idx + 2] || '0'));
|
|
}
|
|
// Find first hour with any activity (align with extractSeries)
|
|
const firstActive = minted.findIndex((m, i) => m > 0 || burned[i] > 0);
|
|
if (firstActive === -1) return [];
|
|
// Build cumulative net supply change from first active hour
|
|
const cumulative: number[] = [];
|
|
let sum = 0;
|
|
for (let i = firstActive; i < RING_HOURS; i++) {
|
|
sum += minted[i] - burned[i];
|
|
cumulative.push(sum);
|
|
}
|
|
return cumulative;
|
|
}
|
|
|
|
/**
|
|
* Convert a number[] series to SVG polyline points string, scaled to 80x24.
|
|
*/
|
|
function toSvgPoints(series: number[]): string {
|
|
if (series.length < 2) return '';
|
|
const min = Math.min(...series);
|
|
const max = Math.max(...series);
|
|
const range = max - min || 1;
|
|
const isFlat = max === min;
|
|
return series
|
|
.map((v, i) => {
|
|
const x = (i / (series.length - 1)) * 80;
|
|
const y = isFlat ? 12 : 24 - ((v - min) / range) * 22 - 1; // center flat lines
|
|
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
|
})
|
|
.join(' ');
|
|
}
|
|
|
|
// Sparkline series extracted from ring buffer
|
|
const ethReserveSpark = computed(() => {
|
|
if (!stats.value?.ringBuffer || stats.value.ringBufferPointer == null) return [];
|
|
return extractSeries(stats.value.ringBuffer, stats.value.ringBufferPointer, 0);
|
|
});
|
|
|
|
const supplySpark = computed(() => {
|
|
if (!stats.value?.ringBuffer || stats.value.ringBufferPointer == null) return [];
|
|
return extractSupplySeries(stats.value.ringBuffer, stats.value.ringBufferPointer);
|
|
});
|
|
|
|
const holdersSpark = computed(() => {
|
|
if (!stats.value?.ringBuffer || stats.value.ringBufferPointer == null) return [];
|
|
return extractSeries(stats.value.ringBuffer, stats.value.ringBufferPointer, 3);
|
|
});
|
|
|
|
// Holder growth indicator from ring buffer
|
|
const holderGrowthIndicator = computed((): string | null => {
|
|
const series = holdersSpark.value;
|
|
if (series.length < 2) return null;
|
|
const oldest = series[0];
|
|
const newest = series[series.length - 1];
|
|
if (oldest === 0) return newest > 0 ? `${newest} holders` : null;
|
|
const pct = ((newest - oldest) / oldest) * 100;
|
|
if (Math.abs(pct) < 0.1) return '~ flat';
|
|
return pct > 0 ? `↑ ${pct.toFixed(1)}% this week` : `↓ ${Math.abs(pct).toFixed(1)}% this week`;
|
|
});
|
|
|
|
const holderGrowthClass = computed(() => {
|
|
const series = holdersSpark.value;
|
|
if (series.length < 2) return '';
|
|
const oldest = series[0];
|
|
const newest = series[series.length - 1];
|
|
if (newest > oldest) return 'growth-up';
|
|
if (newest < oldest) return 'growth-down';
|
|
return 'growth-flat';
|
|
});
|
|
|
|
// Format tiny ETH values without truncating to zero
|
|
function formatSmallEth(eth: number): string {
|
|
if (eth === 0) return '0 ETH';
|
|
if (eth >= 1) return `${eth.toFixed(2)} ETH`;
|
|
if (eth >= 0.01) return `${eth.toFixed(4)} ETH`;
|
|
if (eth >= 0.0001) return `${eth.toFixed(6)} ETH`;
|
|
const s = eth.toPrecision(4);
|
|
return `${s} ETH`;
|
|
}
|
|
|
|
// Format USD with tiered precision
|
|
function formatUsd(usd: number): string {
|
|
if (usd >= 1000) return `$${(usd / 1000).toFixed(1)}k`;
|
|
if (usd >= 1) return `$${usd.toFixed(2)}`;
|
|
if (usd >= 0.01) return `$${usd.toFixed(3)}`;
|
|
return `$${usd.toFixed(4)}`;
|
|
}
|
|
|
|
// Fetch ETH/USD price from CoinGecko with 5-min cache
|
|
async function fetchEthPrice() {
|
|
const now = Date.now();
|
|
if (ethUsdPrice.value !== null && (now - ethPriceCacheTime) < ETH_PRICE_CACHE_MS) return;
|
|
try {
|
|
const controller = new AbortController();
|
|
const timeout = setTimeout(() => controller.abort(), 5000);
|
|
const resp = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd', {
|
|
signal: controller.signal,
|
|
});
|
|
clearTimeout(timeout);
|
|
if (!resp.ok) throw new Error('ETH price fetch failed');
|
|
const data = await resp.json();
|
|
if (data.ethereum?.usd) {
|
|
ethUsdPrice.value = data.ethereum.usd;
|
|
ethPriceCacheTime = now;
|
|
}
|
|
} catch {
|
|
// Keep existing cached price or null; ETH fallback will be used
|
|
}
|
|
}
|
|
|
|
// Primary/secondary display helpers
|
|
const ethReserveDisplay = computed(() => {
|
|
if (!stats.value) return '$0.00';
|
|
const eth = weiToEth(stats.value.lastEthReserve);
|
|
if (ethUsdPrice.value) return formatUsd(eth * ethUsdPrice.value);
|
|
return formatSmallEth(eth);
|
|
});
|
|
|
|
const ethReserveSecondary = computed((): string | null => {
|
|
if (!stats.value || !ethUsdPrice.value) return null;
|
|
const eth = weiToEth(stats.value.lastEthReserve);
|
|
return `(${eth.toFixed(2)} ETH)`;
|
|
});
|
|
|
|
// Growth indicator: null = hide (< 7 days history or missing)
|
|
const growthIndicator = computed((): string | null => {
|
|
if (!stats.value || stats.value.ethReserveGrowthBps == null) return null;
|
|
const bps = Number(stats.value.ethReserveGrowthBps);
|
|
const pct = Math.abs(bps / 100);
|
|
if (bps > 10) return `↑ ${pct.toFixed(1)}%`;
|
|
if (bps < -10) return `↓ ${pct.toFixed(1)}%`;
|
|
return `~ ${pct.toFixed(1)}%`;
|
|
});
|
|
|
|
const growthClass = computed(() => {
|
|
if (!stats.value || stats.value.ethReserveGrowthBps == null) return '';
|
|
const bps = Number(stats.value.ethReserveGrowthBps);
|
|
if (bps > 10) return 'growth-up';
|
|
if (bps < -10) return 'growth-down';
|
|
return 'growth-flat';
|
|
});
|
|
|
|
// ETH backing per token
|
|
const ethPerToken = computed(() => {
|
|
if (!stats.value) return '—';
|
|
const reserve = weiToEth(stats.value.lastEthReserve);
|
|
const supply = Number(stats.value.kraikenTotalSupply) / 1e18;
|
|
if (supply === 0) return '—';
|
|
const ratio = reserve / supply;
|
|
return ratio;
|
|
});
|
|
|
|
const ethPerTokenDisplay = computed(() => {
|
|
if (!stats.value) return '—';
|
|
const ratio = ethPerToken.value;
|
|
if (typeof ratio === 'string') return ratio;
|
|
if (ethUsdPrice.value) return formatUsd(ratio * ethUsdPrice.value);
|
|
return formatSmallEth(ratio);
|
|
});
|
|
|
|
const ethPerTokenSecondary = computed((): string | null => {
|
|
if (!stats.value || !ethUsdPrice.value) return null;
|
|
const ratio = ethPerToken.value;
|
|
if (typeof ratio === 'string') return null;
|
|
return `(${formatSmallEth(ratio).replace(' ETH', '')} ETH)`;
|
|
});
|
|
|
|
// Net supply change indicator (7d)
|
|
const netSupplyIndicator = computed((): string | null => {
|
|
if (!stats.value) return null;
|
|
const minted = Number(BigInt(stats.value.mintedLastWeek || '0'));
|
|
const burned = Number(BigInt(stats.value.burnedLastWeek || '0'));
|
|
const supply = Number(BigInt(stats.value.kraikenTotalSupply || '1'));
|
|
if (supply === 0) return null;
|
|
const netPct = ((minted - burned) / supply) * 100;
|
|
if (Math.abs(netPct) < 0.01) return '~ flat';
|
|
return netPct > 0 ? `↑ ${netPct.toFixed(1)}%` : `↓ ${Math.abs(netPct).toFixed(1)}%`;
|
|
});
|
|
|
|
const netSupplyClass = computed(() => {
|
|
if (!stats.value) return '';
|
|
const minted = Number(BigInt(stats.value.mintedLastWeek || '0'));
|
|
const burned = Number(BigInt(stats.value.burnedLastWeek || '0'));
|
|
if (minted > burned * 1.01) return 'growth-up';
|
|
if (burned > minted * 1.01) return 'growth-down';
|
|
return 'growth-flat';
|
|
});
|
|
|
|
// Rebalance count (weekly)
|
|
const rebalanceCount = computed(() => {
|
|
if (!stats.value) return '0';
|
|
return `${stats.value.recentersLastWeek} this week`;
|
|
});
|
|
|
|
const holders = computed(() => {
|
|
if (!stats.value) return '0 holders';
|
|
return `${stats.value.holderCount} holders`;
|
|
});
|
|
|
|
const lastRebalance = computed(() => {
|
|
if (!stats.value) return 'Never';
|
|
const now = Math.floor(Date.now() / 1000);
|
|
const diff = now - stats.value.lastRecenterTimestamp;
|
|
|
|
if (diff < 60) return 'Just now';
|
|
if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
|
|
if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
|
|
return `${Math.floor(diff / 86400)} days ago`;
|
|
});
|
|
|
|
const isRecentRebalance = computed(() => {
|
|
if (!stats.value) return false;
|
|
const now = Math.floor(Date.now() / 1000);
|
|
return (now - stats.value.lastRecenterTimestamp) < 3600;
|
|
});
|
|
|
|
const totalSupply = computed(() => {
|
|
if (!stats.value) return '0K KRK';
|
|
const supply = Number(stats.value.kraikenTotalSupply) / 1e18;
|
|
if (supply >= 1000000) {
|
|
return `${(supply / 1000000).toFixed(1)}M KRK`;
|
|
}
|
|
return `${(supply / 1000).toFixed(1)}K KRK`;
|
|
});
|
|
|
|
async function fetchStats() {
|
|
try {
|
|
const controller = new AbortController();
|
|
const timeout = setTimeout(() => controller.abort(), 10000);
|
|
const query = `
|
|
query ProtocolStats {
|
|
statss(where: { id: "0x01" }) {
|
|
items {
|
|
kraikenTotalSupply
|
|
holderCount
|
|
lastRecenterTimestamp
|
|
recentersLastWeek
|
|
lastEthReserve
|
|
mintedLastWeek
|
|
burnedLastWeek
|
|
netSupplyChangeWeek
|
|
ethReserveGrowthBps
|
|
ringBuffer
|
|
ringBufferPointer
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
const endpoint = `${window.location.origin}/api/graphql?query=${encodeURIComponent(query)}`;
|
|
const response = await fetch(endpoint, {
|
|
method: 'GET',
|
|
signal: controller.signal,
|
|
});
|
|
|
|
clearTimeout(timeout);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch stats');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.data?.statss?.items?.[0]) {
|
|
const s = data.data.statss.items[0];
|
|
// Detect changed fields for flash animation
|
|
const prev = stats.value;
|
|
if (prev) {
|
|
const changed = new Set<string>();
|
|
if (s.lastEthReserve !== prev.lastEthReserve) {
|
|
changed.add('ethReserve');
|
|
changed.add('ethPerToken');
|
|
}
|
|
if (s.kraikenTotalSupply !== prev.kraikenTotalSupply) {
|
|
changed.add('supply');
|
|
changed.add('ethPerToken');
|
|
}
|
|
if (s.holderCount !== prev.holderCount) changed.add('holders');
|
|
if (s.recentersLastWeek !== prev.recentersLastWeek) changed.add('rebalances');
|
|
if (changed.size > 0) {
|
|
changedStats.value = changed;
|
|
if (changeTimeout) clearTimeout(changeTimeout);
|
|
changeTimeout = window.setTimeout(() => { changedStats.value = new Set(); }, 700);
|
|
}
|
|
}
|
|
stats.value = s;
|
|
secondsSinceUpdate.value = 0;
|
|
error.value = false;
|
|
if (loadingTimer) { clearTimeout(loadingTimer); loadingTimer = null; }
|
|
} else {
|
|
throw new Error('No stats data');
|
|
}
|
|
} catch (err) {
|
|
// eslint-disable-next-line no-console
|
|
console.error('Failed to fetch protocol stats:', err);
|
|
error.value = true;
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// Escalate to error state if no data arrives within the timeout window
|
|
loadingTimer = window.setTimeout(() => {
|
|
if (!stats.value) error.value = true;
|
|
loadingTimer = null;
|
|
}, LOADING_TIMEOUT_MS);
|
|
await fetchStats();
|
|
fetchEthPrice();
|
|
refreshInterval = window.setInterval(fetchStats, 30000); // Refresh every 30 seconds
|
|
ethPriceInterval = window.setInterval(fetchEthPrice, ETH_PRICE_CACHE_MS);
|
|
freshnessTicker = window.setInterval(() => { secondsSinceUpdate.value++; }, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (refreshInterval) clearInterval(refreshInterval);
|
|
if (ethPriceInterval) clearInterval(ethPriceInterval);
|
|
if (freshnessTicker) clearInterval(freshnessTicker);
|
|
if (changeTimeout) clearTimeout(changeTimeout);
|
|
if (loadingTimer) clearTimeout(loadingTimer);
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.live-stats
|
|
width: 100%
|
|
padding: 40px 0
|
|
margin-top: 60px
|
|
|
|
.stats-grid
|
|
display: grid
|
|
grid-template-columns: 1fr
|
|
gap: 24px
|
|
max-width: 840px
|
|
margin: 0 auto
|
|
padding: 0 32px
|
|
|
|
@media (min-width: 640px)
|
|
grid-template-columns: repeat(2, 1fr)
|
|
|
|
@media (min-width: 992px)
|
|
grid-template-columns: repeat(3, 1fr)
|
|
gap: 32px
|
|
|
|
.stat-item
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 6px
|
|
padding: 20px
|
|
background: rgba(255, 255, 255, 0.03)
|
|
border: 1px solid rgba(255, 255, 255, 0.08)
|
|
border-radius: 12px
|
|
transition: all 0.3s ease
|
|
|
|
&:hover
|
|
background: rgba(255, 255, 255, 0.05)
|
|
border-color: rgba(255, 255, 255, 0.12)
|
|
|
|
.sparkline
|
|
width: 80px
|
|
height: 24px
|
|
margin-top: 4px
|
|
opacity: 0.8
|
|
|
|
.stat-label
|
|
font-size: 12px
|
|
color: rgba(240, 240, 240, 0.6)
|
|
text-transform: uppercase
|
|
letter-spacing: 0.5px
|
|
font-weight: 500
|
|
|
|
.stat-value
|
|
font-size: 20px
|
|
color: #F0F0F0
|
|
font-weight: 600
|
|
font-family: 'orbitron', sans-serif
|
|
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
|
|
.growth-badge
|
|
font-size: 11px
|
|
font-weight: 600
|
|
letter-spacing: 0.5px
|
|
|
|
&.growth-up
|
|
color: #4ade80
|
|
|
|
&.growth-down
|
|
color: #f87171
|
|
|
|
&.growth-flat
|
|
color: rgba(240, 240, 240, 0.45)
|
|
|
|
.stat-secondary
|
|
font-size: 12px
|
|
color: rgba(240, 240, 240, 0.45)
|
|
letter-spacing: 0.3px
|
|
|
|
.spark-placeholder
|
|
font-size: 11px
|
|
color: rgba(240, 240, 240, 0.3)
|
|
letter-spacing: 0.3px
|
|
margin-top: 4px
|
|
|
|
.pulse
|
|
animation: pulse-glow 2s ease-in-out infinite
|
|
|
|
@keyframes pulse-glow
|
|
0%, 100%
|
|
background: rgba(117, 80, 174, 0.1)
|
|
border-color: rgba(117, 80, 174, 0.3)
|
|
50%
|
|
background: rgba(117, 80, 174, 0.2)
|
|
border-color: rgba(117, 80, 174, 0.5)
|
|
|
|
.live-header
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: 6px
|
|
margin-bottom: 16px
|
|
|
|
.live-dot
|
|
width: 8px
|
|
height: 8px
|
|
border-radius: 50%
|
|
background: #4ade80
|
|
animation: dot-pulse 2s ease-in-out infinite
|
|
|
|
.live-dot-error
|
|
background: #ef4444
|
|
animation: none
|
|
|
|
.live-text
|
|
font-size: 11px
|
|
color: rgba(240, 240, 240, 0.5)
|
|
text-transform: uppercase
|
|
letter-spacing: 1px
|
|
font-weight: 500
|
|
|
|
@keyframes dot-pulse
|
|
0%, 100%
|
|
opacity: 1
|
|
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4)
|
|
50%
|
|
opacity: 0.7
|
|
box-shadow: 0 0 0 4px rgba(74, 222, 128, 0)
|
|
|
|
.freshness
|
|
text-align: center
|
|
font-size: 11px
|
|
color: rgba(240, 240, 240, 0.35)
|
|
margin-top: 16px
|
|
letter-spacing: 0.3px
|
|
|
|
.stat-changed
|
|
animation: stat-flash 0.7s ease-out
|
|
|
|
@keyframes stat-flash
|
|
0%
|
|
background: rgba(74, 222, 128, 0.15)
|
|
border-color: rgba(74, 222, 128, 0.3)
|
|
100%
|
|
background: rgba(255, 255, 255, 0.03)
|
|
border-color: rgba(255, 255, 255, 0.08)
|
|
|
|
.skeleton
|
|
pointer-events: none
|
|
|
|
.skeleton-text
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%)
|
|
background-size: 200% 100%
|
|
animation: shimmer 1.5s infinite
|
|
border-radius: 4px
|
|
|
|
&.stat-label
|
|
height: 12px
|
|
width: 80px
|
|
|
|
&.stat-value
|
|
height: 24px
|
|
width: 100px
|
|
|
|
@keyframes shimmer
|
|
0%
|
|
background-position: 200% 0
|
|
100%
|
|
background-position: -200% 0
|
|
|
|
.live-stats-error
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
.error-message
|
|
font-size: 14px
|
|
color: #f87171
|
|
text-align: center
|
|
letter-spacing: 0.3px
|
|
</style>
|