{chains.map((row, idx) =>
{row.chain}
{row.token}
{row.time}
)}
;
};
export const BridgeEmbed = () => {
const [targetHeight, setTargetHeight] = React.useState(null);
const [iframeReady, setIframeReady] = React.useState(false);
const [minTimeElapsed, setMinTimeElapsed] = React.useState(false);
const [completing, setCompleting] = React.useState(false);
const [revealed, setRevealed] = React.useState(false);
const [loaderHidden, setLoaderHidden] = React.useState(false);
const [isDesktop, setIsDesktop] = React.useState(true);
React.useEffect(() => {
const checkIsDesktop = () => setIsDesktop(window.innerWidth >= 768);
checkIsDesktop();
window.addEventListener('resize', checkIsDesktop);
return () => window.removeEventListener('resize', checkIsDesktop);
}, []);
const circumference = 2 * Math.PI * 10;
const arcLength = circumference * 0.25;
const growAmount = circumference - arcLength;
React.useEffect(() => {
const timer = setTimeout(() => setMinTimeElapsed(true), 1500);
return () => clearTimeout(timer);
}, []);
React.useEffect(() => {
if (iframeReady && minTimeElapsed && !completing) {
setCompleting(true);
setRevealed(true);
setTimeout(() => setLoaderHidden(true), 600);
}
}, [iframeReady, minTimeElapsed, completing]);
React.useEffect(() => {
const handleMessage = event => {
if ((event.data.type === 'ready' || event.data.type === 'resize') && event.data.height) {
console.log('[BridgeEmbed] Received:', event.data.type, 'height:', event.data.height);
setTargetHeight(event.data.height);
setIframeReady(true);
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
const finalHeight = (targetHeight || 650) + 75;
const displayHeight = revealed ? finalHeight : 75;
if (!isDesktop) return null;
return 
