Cap Widget

1"use client";
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useImperativeHandle,
8  useRef,
9  useState,
10} from "react";
11 
12import type React from "react";
13 
14declare module "react" {
15  namespace JSX {
16    interface IntrinsicElements {
17      "cap-widget": React.DetailedHTMLProps<
18        React.HTMLAttributes<HTMLElement>,
19        HTMLElement
20      >;
21    }
22  }
23}
24 
25declare global {
26  interface Window {
27    CAP_CUSTOM_FETCH?: (url: string, options?: RequestInit) => Promise<unknown>;
28    CAP_CUSTOM_WASM_URL?: string;
29  }
30}
31 
32interface CapWidgetProps
33  extends Omit<React.ComponentProps<"div">, "onError" | "onProgress"> {
34  endpoint: string;
35  workerCount?: number;
36  override?: {
37    wasmUrl?: string;
38    customFetch?: (url: string, options?: RequestInit) => Promise<unknown>;
39  };
40  locale?: {
41    initial?: string;
42    verifying?: string;
43    solved?: string;
44    error?: string;
45    wasmDisabled?: string;
46    verifyingAria?: string;
47    solvedAria?: string;
48    errorAria?: string;
49  };
50  onSolve?: (token: string) => void;
51  onError?: (message: string) => void;
52  onReset?: () => void;
53  onProgress?: (progress: number) => void;
54}
55 
56const CapWidget = forwardRef<HTMLDivElement, CapWidgetProps>(
57  (
58    {
59      endpoint,
60      workerCount,
61      override,
62      locale,
63      onSolve,
64      onError,
65      onReset,
66      onProgress,
67      style,
68      ...props
69    },
70    ref,
71  ) => {
72    const { wasmUrl, customFetch } = override ?? {};
73 
74    const [loading, setLoading] = useState(true);
75    const widgetRef = useRef<HTMLDivElement>(null);
76    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
77      ref,
78      () => widgetRef.current,
79    );
80 
81    const handleSolve = useCallback(
82      (e: Event) => {
83        console.log("handleSolve", e);
84        const customEvent = e as CustomEvent<{ token?: string }>;
85        const token = customEvent.detail?.token;
86        if (!token) return;
87        onSolve?.(token);
88      },
89      [onSolve],
90    );
91 
92    const handleError = useCallback(
93      (e: Event) => {
94        const customEvent = e as CustomEvent<{ message?: string }>;
95        const message = customEvent.detail?.message;
96        if (!message) return;
97        onError?.(message);
98      },
99      [onError],
100    );
101 
102    const handleReset = useCallback(() => {
103      onReset?.();
104    }, [onReset]);
105 
106    const handleProgress = useCallback(
107      (e: Event) => {
108        const customEvent = e as CustomEvent<{ progress?: number }>;
109// … truncated