Swap widget

<iframe
  src="https://widget.sodax.com/?embed=1"
  title="SODAX swap"
  width="480"
  height="760"
  loading="lazy"
  referrerpolicy="origin"
  allow="ethereum; solana; clipboard-write"
  style="border: 0; border-radius: 24px; max-width: 100%"
></iframe>
<script>
  (() => {
    const frame = document.currentScript.previousElementSibling;
    const origin = new URL(frame.src).origin;
    window.addEventListener('message', event => {
      if (event.source !== frame.contentWindow || event.origin !== origin) return;
      const data = event.data;
      if (!data || typeof data !== 'object') return;
      if (data.type === 'sodax:swap' && ['started', 'submitted', 'completed', 'failed'].includes(data.status)) {
        frame.dispatchEvent(new CustomEvent('sodax:swap', { detail: { status: data.status } }));
      }
      if (data.type === 'sodax:resize' && 'height' in data && typeof data.height === 'number' && Number.isFinite(data.height)) {
        frame.height = String(Math.max(760, Math.min(1600, data.height)));
      }
    });
  })();
</script>

import { useEffect, useRef } from 'react';

type SwapStatus = 'started' | 'submitted' | 'completed' | 'failed';
type SodaxSwapWidgetProps = { src?: string; height?: number; onSwapStatus?: (status: SwapStatus) => void };

export function SodaxSwapWidget({ src = 'https://widget.sodax.com/?embed=1', height = 760, onSwapStatus }: SodaxSwapWidgetProps) {
  const frame = useRef<HTMLIFrameElement>(null);
  useEffect(() => {
    const onMessage = (event: MessageEvent<unknown>) => {
      const element = frame.current;
      if (!element || event.source !== element.contentWindow || event.origin !== new URL(src).origin) return;
      const data = event.data;
      if (!data || typeof data !== 'object' || !('type' in data)) return;
      const status = 'status' in data ? data.status : undefined;
      if (data.type === 'sodax:swap' && (status === 'started' || status === 'submitted' || status === 'completed' || status === 'failed')) {
        onSwapStatus?.(status);
      }
      if (data.type === 'sodax:resize' && 'height' in data && typeof data.height === 'number' && Number.isFinite(data.height)) {
        element.style.height = String(Math.max(760, Math.min(1600, data.height))) + 'px';
      }
    };
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, [src, onSwapStatus]);
  return (
    <iframe
      ref={frame}
      src={src}
      title="SODAX swap"
      loading="lazy"
      referrerPolicy="origin"
      allow="ethereum; solana; clipboard-write"
      style={{ width: '100%', maxWidth: 480, height, border: 0, borderRadius: 24 }}
    />
  );
}