> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paxos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Settlement Times

> Interactive tool to estimate processing times across Paxos payment corridors.

export const FullpageEmbed = ({src, title = 'Embedded app'}) => {
  const containerRef = React.useRef(null);
  const [iframeSrc, setIframeSrc] = React.useState(null);
  React.useEffect(() => {
    const isDark = document.documentElement.classList.contains('dark');
    const sep = src.includes('?') ? '&' : '?';
    setIframeSrc(src + sep + 'embed=true&theme=' + (isDark ? 'dark' : 'light'));
    const setTop = () => {
      const nav = document.querySelector('.nav-tabs') || document.querySelector('nav');
      if (nav && containerRef.current) {
        containerRef.current.style.top = nav.getBoundingClientRect().bottom + 'px';
      }
    };
    requestAnimationFrame(setTop);
    window.addEventListener('resize', setTop);
    let ignoreNextMutation = false;
    const sendTheme = () => {
      const t = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
      const iframe = containerRef.current && containerRef.current.querySelector('iframe');
      if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage({
          type: 'theme-sync',
          theme: t
        }, '*');
      }
    };
    const handleMessage = e => {
      if (e.data && e.data.type === 'theme-request') {
        sendTheme();
        return;
      }
      if (e.data && e.data.type === 'theme-sync') {
        const wasDark = document.documentElement.classList.contains('dark');
        const wantsDark = e.data.theme === 'dark';
        if (wasDark !== wantsDark) {
          ignoreNextMutation = true;
          document.documentElement.classList.toggle('dark');
        }
      }
    };
    window.addEventListener('message', handleMessage);
    const obs = new MutationObserver(() => {
      if (ignoreNextMutation) {
        ignoreNextMutation = false;
        return;
      }
      sendTheme();
    });
    obs.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      window.removeEventListener('resize', setTop);
      window.removeEventListener('message', handleMessage);
      obs.disconnect();
    };
  }, [src]);
  if (!iframeSrc) return null;
  return <div id="fullpage-embed-container" ref={containerRef}>
      <iframe id="fullpage-embed-iframe" src={iframeSrc} title={title} allow="clipboard-write" />
    </div>;
};

<FullpageEmbed src="https://how-long-transaction-take.vercel.app/" title="Paxos Settlement Time Estimator" />
