@openfort/react 0.3.2 → 1.0.1

package/build/hooks/useCopyToClipboard.js

@@ -0,0 +1,29 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+function useCopyToClipboard(resetDelay = 1000) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef();
+    const copy = useCallback((text) => {
+        if (!text)
+            return;
+        const trimmed = text.trim();
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(trimmed);
+        }
+        setCopied(true);
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
+    }, [resetDelay]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return { copied, copy };
+}
+
+export { useCopyToClipboard };
+//# sourceMappingURL=useCopyToClipboard.js.map

package/build/hooks/useCopyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useFitText.js

@@ -0,0 +1,125 @@
+import { useCallback, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+// Suppress `useLayoutEffect` warning when rendering on the server
+// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+const useIsoLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement !== undefined
+    ? useLayoutEffect
+    : useEffect;
+const useFitText = ({ logLevel: logLevelOption = 'info', maxFontSize = 100, minFontSize = 20, onFinish, onStart, resolution = 5, } = {}) => {
+    var _a;
+    const initState = useCallback(() => {
+        return {
+            calcKey: 0,
+            fontSize: maxFontSize,
+            fontSizePrev: minFontSize,
+            fontSizeMax: maxFontSize,
+            fontSizeMin: minFontSize,
+        };
+    }, [maxFontSize, minFontSize]);
+    const ref = useRef(null);
+    const innerHtmlPrevRef = useRef();
+    const isCalculatingRef = useRef(false);
+    const [state, setState] = useState(initState);
+    const { calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev } = state;
+    // Montior div size changes and recalculate on resize
+    let animationFrameId = null;
+    const [ro] = useState(() => new ResizeObserver(() => {
+        animationFrameId = window.requestAnimationFrame(() => {
+            if (isCalculatingRef.current) {
+                return;
+            }
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+            isCalculatingRef.current = true;
+            // `calcKey` is used in the dependencies array of
+            // `useIsoLayoutEffect` below. It is incremented so that the font size
+            // will be recalculated even if the previous state didn't change (e.g.
+            // when the text fit initially).
+            setState({
+                ...initState(),
+                calcKey: calcKey + 1,
+            });
+        });
+    }));
+    useEffect(() => {
+        if (ref.current) {
+            ro.observe(ref.current);
+        }
+        return () => {
+            animationFrameId && window.cancelAnimationFrame(animationFrameId);
+            ro.disconnect();
+        };
+    }, [animationFrameId, ro]);
+    // Recalculate when the div contents change
+    const innerHtml = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+    useEffect(() => {
+        if (calcKey === 0 || isCalculatingRef.current)
+            return;
+        if (innerHtml !== innerHtmlPrevRef.current) {
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+            setState({
+                ...initState(),
+                calcKey: calcKey + 1,
+            });
+        }
+        innerHtmlPrevRef.current = innerHtml;
+    }, [calcKey, initState, innerHtml, onStart]);
+    // Check overflow and resize font
+    useIsoLayoutEffect(() => {
+        // Don't start calculating font size until the `resizeKey` is incremented
+        // above in the `ResizeObserver` callback. This avoids an extra resize
+        // on initialization.
+        if (calcKey === 0) {
+            return;
+        }
+        const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
+        const isOverflow = !!ref.current &&
+            (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
+        const isFailed = isOverflow && fontSize === fontSizePrev;
+        const isAsc = fontSize > fontSizePrev;
+        // Return if the font size has been adjusted "enough" (change within `resolution`)
+        // reduce font size by one increment if it's overflowing.
+        if (isWithinResolution) {
+            if (isFailed) {
+                isCalculatingRef.current = false;
+            }
+            else if (isOverflow) {
+                setState({
+                    fontSize: isAsc ? fontSizePrev : fontSizeMin,
+                    fontSizeMax,
+                    fontSizeMin,
+                    fontSizePrev,
+                    calcKey,
+                });
+            }
+            else {
+                isCalculatingRef.current = false;
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(fontSize);
+            }
+            return;
+        }
+        // Binary search to adjust font size
+        let delta;
+        let newMax = fontSizeMax;
+        let newMin = fontSizeMin;
+        if (isOverflow) {
+            delta = isAsc ? fontSizePrev - fontSize : fontSizeMin - fontSize;
+            newMax = Math.min(fontSizeMax, fontSize);
+        }
+        else {
+            delta = isAsc ? fontSizeMax - fontSize : fontSizePrev - fontSize;
+            newMin = Math.max(fontSizeMin, fontSize);
+        }
+        setState({
+            calcKey,
+            fontSize: fontSize + delta / 2,
+            fontSizeMax: newMax,
+            fontSizeMin: newMin,
+            fontSizePrev: fontSize,
+        });
+    }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);
+    return { fontSize, ref };
+};
+
+export { useFitText as default };
+//# sourceMappingURL=useFitText.js.map

package/build/hooks/useFitText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFitText.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useFocusTrap.d.ts

@@ -1 +1,4 @@
-export default function FocusTrap(props: any): import("react/jsx-runtime").JSX.Element;
+import type React from 'react';
+export default function FocusTrap(props: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/build/hooks/useFocusTrap.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect, useRef } from 'react';
+
+const KEYCODE_TAB = 9;
+function useFocusTrap() {
+    const elRef = useRef(null);
+    function handleFocus(e) {
+        if (!elRef.current)
+            return;
+        var focusableEls = elRef.current.querySelectorAll(`
+        a[href]:not(:disabled),
+        button:not(:disabled),
+        textarea:not(:disabled),
+        input[type="text"]:not(:disabled),
+        input[type="radio"]:not(:disabled),
+        input[type="checkbox"]:not(:disabled),
+        select:not(:disabled)
+      `), firstFocusableEl = focusableEls[0], lastFocusableEl = focusableEls[focusableEls.length - 1];
+        var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+        if (!isTabPressed) {
+            return;
+        }
+        if (e.shiftKey) {
+            /* shift + tab */ if (document.activeElement === firstFocusableEl) {
+                lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                e.preventDefault();
+            }
+        } /* tab */
+        else {
+            if (document.activeElement === lastFocusableEl) {
+                firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+                e.preventDefault();
+            }
+        }
+    }
+    useEffect(() => {
+        if (elRef.current) {
+            elRef.current.addEventListener('keydown', handleFocus);
+            elRef.current.focus({ preventScroll: true });
+        }
+        return () => {
+            if (elRef.current) {
+                elRef.current.removeEventListener('keydown', handleFocus);
+            }
+        };
+    }, []);
+    return elRef;
+}
+function FocusTrap(props) {
+    const elRef = useFocusTrap();
+    useEffect(() => {
+        if (!elRef.current)
+            return;
+        elRef.current.focus({ preventScroll: true });
+    }, []);
+    return jsx("div", { ref: elRef, children: props.children });
+}
+
+export { FocusTrap as default };
+//# sourceMappingURL=useFocusTrap.js.map

package/build/hooks/useFocusTrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusTrap.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useGoogleFont.js

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+function useGoogleFont(font) {
+    useEffect(() => {
+        if (!font || typeof document === 'undefined')
+            return;
+        font = font.replace(/ /g, '+');
+        const googleapis = document.createElement('link');
+        googleapis.href = `https://fonts.googleapis.com`;
+        googleapis.rel = 'preconnect';
+        const gstatic = document.createElement('link');
+        gstatic.href = `https://fonts.gstatic.com`;
+        gstatic.rel = 'preconnect';
+        gstatic.crossOrigin = 'true';
+        const link = document.createElement('link');
+        link.href = `https://fonts.googleapis.com/css2?family=${font}:wght@400;500;600&display=swap`;
+        link.rel = 'stylesheet';
+        document.head.appendChild(googleapis);
+        document.head.appendChild(gstatic);
+        document.head.appendChild(link);
+        return () => {
+            document.head.removeChild(googleapis);
+            document.head.removeChild(gstatic);
+            document.head.removeChild(link);
+        };
+    }, [font]);
+}
+// OLD_TODO: This could be dynamic if theming wasn't set up as css variables
+function useThemeFont(theme) {
+    var _a;
+    const themeFonts = {
+        web95: 'Lato',
+        retro: 'Nunito',
+        midnight: 'Inter',
+        minimal: 'Inter',
+        rounded: 'Nunito',
+    };
+    const font = (_a = themeFonts[theme]) !== null && _a !== void 0 ? _a : '';
+    useGoogleFont(font !== null && font !== void 0 ? font : '');
+}
+
+export { useThemeFont };
+//# sourceMappingURL=useGoogleFont.js.map

package/build/hooks/useGoogleFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGoogleFont.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useIsMobile.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import { isMobile } from '../utils/index.js';
+
+function useIsMobile() {
+    const [mobile, setMobile] = useState(isMobile());
+    useEffect(() => {
+        const handleResize = () => {
+            setMobile(isMobile());
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return mobile;
+}
+
+export { useIsMobile as default };
+//# sourceMappingURL=useIsMobile.js.map

package/build/hooks/useIsMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobile.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/build/hooks/useIsMounted.js

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+function useIsMounted() {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    return mounted;
+}
+
+export { useIsMounted as default };
+//# sourceMappingURL=useIsMounted.js.map

package/build/hooks/useIsMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/hooks/useLastConnector.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { useEthereumBridge } from '../ethereum/OpenfortEthereumBridgeContext.js';
+import { logger } from '../utils/logger.js';
+
+const useLastConnector = () => {
+    var _a;
+    const bridge = useEthereumBridge();
+    const storage = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.config) === null || _a === void 0 ? void 0 : _a.storage;
+    const [lastConnectorId, setLastConnectorId] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        const init = async () => {
+            try {
+                const id = storage ? await storage.getItem('recentConnectorId') : null;
+                if (!cancelled)
+                    setLastConnectorId(id !== null && id !== void 0 ? id : '');
+            }
+            catch (err) {
+                if (!cancelled && process.env.NODE_ENV === 'development') {
+                    logger.warn('[Openfort] Failed to load recent connector:', err);
+                }
+            }
+        };
+        init();
+        return () => {
+            cancelled = true;
+        };
+    }, [storage]);
+    const update = (id) => {
+        storage === null || storage === void 0 ? void 0 : storage.setItem('recentConnectorId', id);
+    };
+    return {
+        lastConnectorId,
+        updateLastConnectorId: update,
+    };
+};
+
+export { useLastConnector };
+//# sourceMappingURL=useLastConnector.js.map

package/build/hooks/useLastConnector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLastConnector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useLocales.d.ts

@@ -1,2 +1,2 @@
 import type { LocaleProps } from '../localizations/locales';
-export default function useLocales(replacements?: any): LocaleProps;
+export default function useLocales(replacements?: Record<string, string>): LocaleProps;

package/build/hooks/useLocales.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import Logos from '../assets/logos.js';
+import { useOpenfort } from '../components/Openfort/useOpenfort.js';
+import { getLocale } from '../localizations/index.js';
+import { logger } from '../utils/logger.js';
+
+function useLocales(replacements) {
+    var _a;
+    const context = useOpenfort();
+    const language = (_a = context.uiConfig.language) !== null && _a !== void 0 ? _a : 'en-US';
+    const translations = useMemo(() => {
+        return getLocale(language);
+    }, [language]);
+    if (!translations) {
+        logger.error(`Missing translations for: ${language}`);
+        throw new Error(`Missing translations for: ${language}`);
+    }
+    const translated = {};
+    Object.keys(translations).forEach((key) => {
+        const string = translations[key];
+        translated[key] = localize(string, replacements);
+    });
+    return translated;
+}
+const localize = (text, replacements) => {
+    let parsedText = text;
+    if (replacements) {
+        Object.keys(replacements).forEach((key) => {
+            // use `replace` instead of `replaceAll` to support Node 14
+            parsedText = parsedText.replace(new RegExp(`({{ ${key} }})`, 'g'), replacements[key]);
+        });
+    }
+    return replaceMarkdown(parsedText);
+};
+const replaceMarkdown = (markdownText) => {
+    const lines = markdownText.split('\n');
+    return lines.map((t, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: static markdown lines don't reorder
+    jsxs(React.Fragment, { children: [wrapTags(t), i < lines.length - 1 && jsx("br", {})] }, `line-${i}-${t.substring(0, 20)}`)));
+};
+const wrapTags = (text) => {
+    // Bold markdown handling
+    const textArray = text.split(/(\*\*[^*]*\*\*)/g);
+    const result = textArray.map((str, i) => {
+        if (/(\*\*.*\*\*)/g.test(str)) {
+            // use `replace` instead of `replaceAll` to support Node 14
+            // biome-ignore lint/suspicious/noArrayIndexKey: static markdown splits don't reorder
+            return jsx("strong", { children: str.replace(/\*\*/g, '') }, `bold-${i}-${str.substring(0, 10)}`);
+        }
+        return `${str}`;
+    });
+    // Replace text with logo
+    return result.map((r) => {
+        if (typeof r === 'string') {
+            return r.split(/(\[WALLETCONNECTLOGO\])/g).map((s) => {
+                if (s === '[WALLETCONNECTLOGO]') {
+                    return (jsx("span", { className: "ck-tt-logo", children: jsx(Logos.WalletConnect, {}) }, s));
+                }
+                return s;
+            });
+        }
+        return r;
+    });
+};
+
+export { useLocales as default };
+//# sourceMappingURL=useLocales.js.map

package/build/hooks/useLocales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocales.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/useLockBodyScroll.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { useOpenfort } from '../components/Openfort/useOpenfort.js';
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+function useLockBodyScroll(initialLocked) {
+    const [locked, setLocked] = useState(initialLocked);
+    const context = useOpenfort();
+    useIsomorphicLayoutEffect(() => {
+        if (!locked)
+            return;
+        const original = {
+            overflow: document.body.style.overflow,
+            position: document.body.style.position,
+            touchAction: document.body.style.touchAction,
+            paddingRight: document.body.style.paddingRight,
+            //htmlOverflow: document.documentElement.style.overflow,
+        };
+        const style = getComputedStyle(document.body);
+        const offsetX = parseInt(style.marginRight, 10) +
+            parseInt(style.paddingRight, 10) +
+            parseInt(style.borderRight, 10) +
+            parseInt(style.marginLeft, 10) +
+            parseInt(style.paddingLeft, 10) +
+            parseInt(style.borderLeft, 10);
+        const scrollBarWidth = window.innerWidth - document.body.offsetWidth - offsetX;
+        document.documentElement.style.setProperty('--ck-scrollbar-width', `${scrollBarWidth}px`);
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'relative';
+        document.body.style.touchAction = 'none';
+        //document.documentElement.style.overflow = 'hidden'; // overflow:hidden; on <html> breaks position:sticky;
+        if (context.uiConfig.avoidLayoutShift) {
+            document.body.style.paddingRight = `${scrollBarWidth}px`;
+        }
+        return () => {
+            document.documentElement.style.removeProperty('--ck-scrollbar-width');
+            document.body.style.overflow = original.overflow;
+            document.body.style.position = original.position;
+            document.body.style.touchAction = original.touchAction;
+            //document.documentElement.style.overflow = original.htmlOverflow;
+            if (context.uiConfig.avoidLayoutShift) {
+                document.body.style.paddingRight = original.paddingRight;
+            }
+        };
+    }, [locked]);
+    useEffect(() => {
+        if (locked !== initialLocked)
+            setLocked(initialLocked);
+    }, [initialLocked]);
+    return [locked, setLocked];
+}
+
+export { useLockBodyScroll as default };
+//# sourceMappingURL=useLockBodyScroll.js.map

package/build/hooks/useLockBodyScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLockBodyScroll.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/hooks/usePrevious.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+
+function usePrevious(value, initial) {
+    const ref = useRef({ target: value, previous: initial });
+    if (ref.current.target !== value) {
+        // The value changed.
+        ref.current.previous = ref.current.target;
+        ref.current.target = value;
+    }
+    return ref.current.previous;
+}
+
+export { usePrevious as default };
+//# sourceMappingURL=usePrevious.js.map

package/build/hooks/usePrevious.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/build/hooks/useResolvedIdentity.d.ts

@@ -0,0 +1,70 @@
+/**
+ * useResolvedIdentity Hook
+ *
+ * Resolve ENS names and avatars using viem.
+ * Uses discriminated union for type-safe status handling.
+ */
+import { ChainTypeEnum } from '@openfort/openfort-js';
+/**
+ * Resolved identity state - discriminated union
+ */
+type ResolvedIdentity = {
+    status: 'idle';
+} | {
+    status: 'loading';
+} | {
+    status: 'error';
+    error: Error;
+} | {
+    status: 'success';
+    name: string | null;
+    avatar: string | null;
+};
+interface UseResolvedIdentityOptions {
+    /** Address to resolve (empty string if not available yet) */
+    address: string;
+    /** Chain type for resolution */
+    chainType?: ChainTypeEnum;
+    /** ENS chain ID. Only chainId 1 (mainnet) supports ENS. Default 0 = do not resolve. */
+    ensChainId?: number;
+    /** Enable/disable the query (for conditional fetching without breaking React rules) */
+    enabled?: boolean;
+}
+/**
+ * Hook for resolving addresses to ENS names and avatars.
+ *
+ * Uses viem for ENS resolution. Supports Solana name services in the future.
+ *
+ * @example Basic usage
+ * ```tsx
+ * function Profile({ address }: { address: string }) {
+ *   const identity = useResolvedIdentity({ address });
+ *
+ *   switch (identity.status) {
+ *     case 'idle':
+ *       return null;
+ *     case 'loading':
+ *       return <p>Resolving...</p>;
+ *     case 'error':
+ *       return <p>Error: {identity.error.message}</p>;
+ *     case 'success':
+ *       return (
+ *         <div>
+ *           {identity.avatar && <img src={identity.avatar} alt="Avatar" />}
+ *           <p>{identity.name ?? address}</p>
+ *         </div>
+ *       );
+ *   }
+ * }
+ * ```
+ *
+ * @example With enabled option
+ * ```tsx
+ * const identity = useResolvedIdentity({
+ *   address: wallet.status === 'connected' ? wallet.address : '',
+ *   enabled: wallet.status === 'connected',
+ * });
+ * ```
+ */
+export declare function useResolvedIdentity(options: UseResolvedIdentityOptions): ResolvedIdentity;
+export {};