);
};
// Ticker USDT/BRL — busca preço real da Binance (atualiza a cada 5s)
const useTicker = (base = 5.42, amplitude = 0.008) => {
const [price, setPrice] = React.useState(base);
const [trend, setTrend] = React.useState(0);
React.useEffect(() => {
let cancelled = false;
const fetchPrice = async () => {
try {
const res = await fetch("https://api.binance.com/api/v3/ticker/price?symbol=USDTBRL");
if (!res.ok) throw new Error("API error");
const data = await res.json();
const next = +parseFloat(data.price).toFixed(4);
if (!cancelled && !isNaN(next)) {
setPrice((prev) => {
setTrend(next - prev);
return next;
});
}
} catch (e) {
// Fallback: leve oscilação se API falhar
if (!cancelled) {
setPrice((prev) => {
const drift = (Math.random() - 0.5) * amplitude * 2;
const next = +(prev + drift).toFixed(4);
setTrend(next - prev);
return next;
});
}
}
};
fetchPrice(); // primeira chamada imediata
const id = setInterval(fetchPrice, 5000); // atualiza a cada 5s
return () => { cancelled = true; clearInterval(id); };
}, [amplitude]);
return { price, trend };
};
// Hook que busca BID/ASK reais do orderbook USDT/BRL na Binance
const useOrderBook = () => {
const [book, setBook] = React.useState({ bid: 0, ask: 0, spread: 0 });
React.useEffect(() => {
let cancelled = false;
const fetchBook = async () => {
try {
const res = await fetch("https://api.binance.com/api/v3/ticker/bookTicker?symbol=USDTBRL");
if (!res.ok) throw new Error("API error");
const data = await res.json();
const bid = parseFloat(data.bidPrice);
const ask = parseFloat(data.askPrice);
if (!cancelled && !isNaN(bid) && !isNaN(ask)) {
const spread = ((ask - bid) / bid) * 100;
setBook({ bid, ask, spread });
}
} catch (e) {/* mantém valores anteriores */}
};
fetchBook();
const id = setInterval(fetchBook, 5000);
return () => { cancelled = true; clearInterval(id); };
}, []);
return book;
};
// Sparkline animada — desenha-se ao entrar em view + cor reflete trend
const Sparkline = ({ width = 120, height = 32, color = "#9a9aa2", trend = 0 }) => {
const [points, setPoints] = React.useState(() =>
Array.from({ length: 24 }, () => Math.random())
);
const [ref, shown] = useReveal();
const pathRef = React.useRef(null);
const [pathLen, setPathLen] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => {
setPoints((prev) => [...prev.slice(1), Math.random()]);
}, 1200);
return () => clearInterval(id);
}, []);
// Mede o comprimento real do path para a entrance (stroke-dash) animation
React.useEffect(() => {
if (pathRef.current && pathLen === 0) {
try {
setPathLen(pathRef.current.getTotalLength());
} catch (e) {}
}
});
const path = points.
map((p, i) => {
const x = i / (points.length - 1) * width;
const y = height - p * height;
return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`;
}).
join(" ");
// Cor baseada no trend (verde alta, vermelho queda, neutra padrão)
const trendColor =
trend > 0.0005 ? "oklch(0.72 0.14 152)" :
trend < -0.0005 ? "oklch(0.62 0.18 25)" :
color;
return (
);
};
// Counter que conta até um número
const useCount = (target, duration = 1400) => {
const [n, setN] = React.useState(0);
React.useEffect(() => {
const start = performance.now();
let raf;
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(target * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, duration]);
return n;
};
// Hook de visibilidade (intersection)
const useReveal = () => {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver(
([e]) => {if (e.isIntersecting) {setShown(true);obs.disconnect();}},
{ threshold: 0.15 }
);
obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return [ref, shown];
};
// Reveal wrapper
const Reveal = ({ children, delay = 0, y = 24, style = {}, ...rest }) => {
const [ref, shown] = useReveal();
return (