@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/contacts/user-connect.js

@@ -1,82 +1,29 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserConnect = UserConnect;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 function UserConnect() {
-    const [mode, setMode] = (0, react_1.useState)('select');
-    const [status, setStatus] = (0, react_1.useState)('idle');
-    const [connectionCode, setConnectionCode] = (0, react_1.useState)('');
-    const [inputCode, setInputCode] = (0, react_1.useState)('');
+    const [mode, setMode] = (0, react_1.useState)("select");
+    const [status, setStatus] = (0, react_1.useState)("idle");
+    const [connectionCode, setConnectionCode] = (0, react_1.useState)("");
+    const [inputCode, setInputCode] = (0, react_1.useState)("");
     const [result, setResult] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)("");
     const [copied, setCopied] = (0, react_1.useState)(false);
     // Subscribe to userConnectStatus from the device layer
     const [connectStatus] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectStatus);
-    // Also set up a direct subscription after loading is complete
-    (0, react_1.useEffect)(() => {
-        let disposed = false;
-        let subscription;
-        peers_sdk_1.userConnectStatus.loadingPromise.then(() => {
-            if (disposed)
-                return;
-            subscription = peers_sdk_1.userConnectStatus.subscribe(() => {
-                // Force a re-render by checking the current value
-                const currentStatus = (0, peers_sdk_1.userConnectStatus)();
-                if (currentStatus && typeof currentStatus === 'string') {
-                    handleConnectStatusChange(currentStatus);
-                }
-            });
-        });
-        return () => {
-            disposed = true;
-            subscription?.dispose();
-        };
-    }, []);
-    // Handle connect status changes
     const handleConnectStatusChange = (0, react_1.useCallback)(async (connectStatusValue) => {
-        if (!connectStatusValue || status === 'success')
+        if (!connectStatusValue || status === "success")
             return;
-        if (connectStatusValue.startsWith('Error:')) {
+        if (connectStatusValue.startsWith("Error:")) {
             // Error status
-            setError(connectStatusValue.replace('Error: ', ''));
-            setStatus('error');
+            setError(connectStatusValue.replace("Error: ", ""));
+            setStatus("error");
         }
         else if (connectStatusValue.length > 0) {
             // Success - connectStatus is the remote userId
@@ -86,14 +33,16 @@ function UserConnect() {
                 const me = await (0, peers_sdk_1.getMe)();
                 const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(remoteUserId);
                 if (!remoteUser) {
-                    setError('Could not find connected user');
-                    setStatus('error');
+                    setError("Could not find connected user");
+                    setStatus("error");
                     return;
                 }
-                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).findOne({ userId: remoteUserId });
+                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).findOne({
+                    userId: remoteUserId,
+                });
                 if (!remoteDevice) {
-                    setError('Could not find connected device but connection was successful');
-                    setStatus('error');
+                    setError("Could not find connected device but connection was successful");
+                    setStatus("error");
                     return;
                 }
                 // Build user connect info for confirmation hash
@@ -111,37 +60,57 @@ function UserConnect() {
                 };
                 const confirmationHash = (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo);
                 setResult({ remoteUser, confirmationHash });
-                setStatus('success');
+                setStatus("success");
                 // Clear the codes
-                (0, peers_sdk_1.userConnectCodeOffer)('');
-                (0, peers_sdk_1.userConnectCodeAnswer)('');
+                (0, peers_sdk_1.userConnectCodeOffer)("");
+                (0, peers_sdk_1.userConnectCodeAnswer)("");
             }
             catch (err) {
-                setError(err.message || 'Failed to complete connection');
-                setStatus('error');
+                setError(err instanceof Error ? err.message : String(err));
+                setStatus("error");
             }
         }
     }, [status]);
+    // Also set up a direct subscription after loading is complete
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        let subscription;
+        peers_sdk_1.userConnectStatus.loadingPromise.then(() => {
+            if (disposed)
+                return;
+            subscription = peers_sdk_1.userConnectStatus.subscribe(() => {
+                // Force a re-render by checking the current value
+                const currentStatus = (0, peers_sdk_1.userConnectStatus)();
+                if (currentStatus && typeof currentStatus === "string") {
+                    handleConnectStatusChange(currentStatus);
+                }
+            });
+        });
+        return () => {
+            disposed = true;
+            subscription?.dispose();
+        };
+    }, [handleConnectStatusChange]);
     // React to userConnectStatus changes from useObservable
     (0, react_1.useEffect)(() => {
-        if (connectStatus && typeof connectStatus === 'string') {
+        if (connectStatus && typeof connectStatus === "string") {
             handleConnectStatusChange(connectStatus);
         }
     }, [connectStatus, handleConnectStatusChange]);
     // Clean up on unmount
     (0, react_1.useEffect)(() => {
         return () => {
-            if (mode === 'initiate' && status === 'waiting') {
-                (0, peers_sdk_1.userConnectCodeOffer)('');
-                (0, peers_sdk_1.userConnectCodeAnswer)('');
+            if (mode === "initiate" && status === "waiting") {
+                (0, peers_sdk_1.userConnectCodeOffer)("");
+                (0, peers_sdk_1.userConnectCodeAnswer)("");
             }
         };
     }, [mode, status]);
     const handleInitiate = (0, react_1.useCallback)(async () => {
-        setMode('initiate');
-        setStatus('waiting');
-        setError('');
-        (0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
+        setMode("initiate");
+        setStatus("waiting");
+        setError("");
+        (0, peers_sdk_1.userConnectStatus)(""); // Clear any previous status
         // Generate the connection code
         const code = (0, peers_sdk_1.generateConnectionCode)();
         (0, peers_sdk_1.userConnectCodeOffer)(code.code);
@@ -149,34 +118,34 @@ function UserConnect() {
         setConnectionCode(formattedCode);
     }, []);
     const handleRespond = (0, react_1.useCallback)(async () => {
-        if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
-            setError('Please enter a valid 12-character connection code');
+        if (inputCode.replace(/[^0-9A-Za-z]/g, "").length !== 12) {
+            setError("Please enter a valid 12-character connection code");
             return;
         }
-        setStatus('waiting');
-        setError('');
-        (0, peers_sdk_1.userConnectStatus)(''); // Clear any previous status
+        setStatus("waiting");
+        setError("");
+        (0, peers_sdk_1.userConnectStatus)(""); // Clear any previous status
         (0, peers_sdk_1.userConnectCodeAnswer)(inputCode);
     }, [inputCode]);
     const handleCancel = (0, react_1.useCallback)(async () => {
-        (0, peers_sdk_1.userConnectCodeOffer)('');
-        (0, peers_sdk_1.userConnectCodeAnswer)('');
-        (0, peers_sdk_1.userConnectStatus)('');
-        setMode('select');
-        setStatus('idle');
-        setConnectionCode('');
-        setError('');
+        (0, peers_sdk_1.userConnectCodeOffer)("");
+        (0, peers_sdk_1.userConnectCodeAnswer)("");
+        (0, peers_sdk_1.userConnectStatus)("");
+        setMode("select");
+        setStatus("idle");
+        setConnectionCode("");
+        setError("");
     }, []);
     const handleReset = (0, react_1.useCallback)(() => {
-        (0, peers_sdk_1.userConnectCodeOffer)('');
-        (0, peers_sdk_1.userConnectCodeAnswer)('');
-        (0, peers_sdk_1.userConnectStatus)('');
-        setMode('select');
-        setStatus('idle');
-        setConnectionCode('');
-        setInputCode('');
+        (0, peers_sdk_1.userConnectCodeOffer)("");
+        (0, peers_sdk_1.userConnectCodeAnswer)("");
+        (0, peers_sdk_1.userConnectStatus)("");
+        setMode("select");
+        setStatus("idle");
+        setConnectionCode("");
+        setInputCode("");
         setResult(null);
-        setError('');
+        setError("");
         setCopied(false);
     }, []);
     const handleSaveContact = (0, react_1.useCallback)(async () => {
@@ -190,7 +159,7 @@ function UserConnect() {
             (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
         }
         catch (err) {
-            setError(err.message || 'Failed to save contact');
+            setError(err instanceof Error ? err.message : String(err));
         }
     }, [result]);
     // Copy connection code to clipboard
@@ -202,13 +171,13 @@ function UserConnect() {
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
         }
-        catch (err) {
+        catch (_err) {
             // Fallback for older browsers
-            const textArea = document.createElement('textarea');
+            const textArea = document.createElement("textarea");
             textArea.value = connectionCode;
             document.body.appendChild(textArea);
             textArea.select();
-            document.execCommand('copy');
+            document.execCommand("copy");
             document.body.removeChild(textArea);
             setCopied(true);
             setTimeout(() => setCopied(false), 2000);
@@ -217,96 +186,26 @@ function UserConnect() {
     // Format input code as user types
     const handleCodeInput = (value) => {
         // Remove non-alphanumeric characters
-        const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
+        const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
         // Format as XXXX-YYYY-ZZZZ
-        let formatted = '';
+        let formatted = "";
         for (let i = 0; i < cleaned.length && i < 12; i++) {
             if (i === 4 || i === 8)
-                formatted += '-';
+                formatted += "-";
             formatted += cleaned[i];
         }
         setInputCode(formatted);
     };
-    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
-        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
-            react_1.default.createElement("h4", null,
-                react_1.default.createElement("i", { className: "bi-person-plus-fill me-2" }),
-                "Connect to New User"),
-            mode !== 'select' && (react_1.default.createElement("button", { className: "btn btn-outline-secondary btn-sm", onClick: handleReset },
-                react_1.default.createElement("i", { className: "bi-arrow-left me-1" }),
-                "Back"))),
-        mode === 'select' && (react_1.default.createElement("div", { className: "row g-3" },
-            react_1.default.createElement("div", { className: "col-md-6" },
-                react_1.default.createElement("div", { className: "card h-100 border-primary", style: { cursor: 'pointer' }, onClick: handleInitiate },
-                    react_1.default.createElement("div", { className: "card-body text-center p-4" },
-                        react_1.default.createElement("i", { className: "bi-qr-code display-4 text-primary mb-3" }),
-                        react_1.default.createElement("h5", { className: "card-title" }, "Create Connection Code"),
-                        react_1.default.createElement("p", { className: "card-text text-muted" }, "Generate a code to share with someone who wants to connect with you")))),
-            react_1.default.createElement("div", { className: "col-md-6" },
-                react_1.default.createElement("div", { className: "card h-100 border-success", style: { cursor: 'pointer' }, onClick: () => setMode('respond') },
-                    react_1.default.createElement("div", { className: "card-body text-center p-4" },
-                        react_1.default.createElement("i", { className: "bi-keyboard display-4 text-success mb-3" }),
-                        react_1.default.createElement("h5", { className: "card-title" }, "Enter Connection Code"),
-                        react_1.default.createElement("p", { className: "card-text text-muted" }, "Enter a code that someone shared with you to connect")))))),
-        mode === 'initiate' && status === 'waiting' && (react_1.default.createElement("div", { className: "text-center" },
-            react_1.default.createElement("div", { className: "mb-4" },
-                react_1.default.createElement("p", { className: "text-muted" }, "Share this code with the person you want to connect with:")),
-            react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
-                react_1.default.createElement("div", { className: "input-group" },
-                    react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", value: connectionCode || 'XXXX-YYYY-ZZZZ', readOnly: true, style: { letterSpacing: '0.15em', fontSize: '1.5rem' } }),
-                    react_1.default.createElement("button", { className: "btn btn-outline-primary", onClick: handleCopyCode, title: "Copy to clipboard" },
-                        react_1.default.createElement("i", { className: copied ? "bi-check-lg" : "bi-clipboard" }))),
-                copied && (react_1.default.createElement("small", { className: "text-success mt-1 d-block" }, "Copied!"))),
-            react_1.default.createElement("div", { className: "mb-4" },
-                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }),
-                react_1.default.createElement("span", { className: "text-muted" }, "Waiting for connection...")),
-            react_1.default.createElement("p", { className: "text-muted small" }, "This code will expire in 10 minutes"),
-            react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleCancel }, "Cancel"))),
-        mode === 'respond' && status !== 'success' && (react_1.default.createElement("div", { className: "text-center" },
-            react_1.default.createElement("div", { className: "mb-4" },
-                react_1.default.createElement("p", { className: "text-muted" }, "Enter the connection code shared with you:")),
-            react_1.default.createElement("div", { className: "mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
-                react_1.default.createElement("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", placeholder: "XXXX-YYYY-ZZZZ", value: inputCode, onChange: (e) => handleCodeInput(e.target.value), maxLength: 14, style: { letterSpacing: '0.15em', fontSize: '1.5rem' }, autoFocus: true })),
-            error && (react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error)),
-            react_1.default.createElement("button", { className: "btn btn-primary btn-lg", onClick: handleRespond, disabled: status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12 }, status === 'waiting' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }),
-                "Connecting...")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("i", { className: "bi-link-45deg me-2" }),
-                "Connect"))))),
-        status === 'success' && result && (react_1.default.createElement("div", { className: "text-center" },
-            react_1.default.createElement("div", { className: "mb-4" },
-                react_1.default.createElement("i", { className: "bi-check-circle-fill text-success display-3" })),
-            react_1.default.createElement("h5", { className: "mb-4" }, "Connection Successful!"),
-            react_1.default.createElement("div", { className: "card mb-4", style: { maxWidth: '400px', margin: '0 auto' } },
-                react_1.default.createElement("div", { className: "card-body" },
-                    react_1.default.createElement("p", { className: "text-muted mb-2" }, "Verify with the other person that you both see:"),
-                    react_1.default.createElement("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: '0.2em' } }, result.confirmationHash),
-                    react_1.default.createElement("hr", null),
-                    react_1.default.createElement("div", { className: "text-start" },
-                        react_1.default.createElement("small", { className: "text-muted" }, "Name:"),
-                        react_1.default.createElement("p", { className: "mb-2" }, result.remoteUser.name),
-                        react_1.default.createElement("small", { className: "text-muted" }, "User ID:"),
-                        react_1.default.createElement("p", { className: "font-monospace small mb-0" }, result.remoteUser.userId)))),
-            react_1.default.createElement("div", { className: "d-flex gap-2 justify-content-center" },
-                react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleSaveContact },
-                    react_1.default.createElement("i", { className: "bi-check-lg me-2" }),
-                    "Trust & View Contact"),
-                react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleReset }, "Connect Another")))),
-        status === 'error' && (react_1.default.createElement("div", { className: "text-center" },
-            react_1.default.createElement("div", { className: "mb-4" },
-                react_1.default.createElement("i", { className: "bi-x-circle-fill text-danger display-3" })),
-            react_1.default.createElement("h5", { className: "mb-4" }, "Connection Failed"),
-            react_1.default.createElement("div", { className: "alert alert-danger", style: { maxWidth: '400px', margin: '0 auto 1rem' } }, error),
-            react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleReset }, "Try Again")))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsxs)("h4", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus-fill me-2" }), "Connect to New User"] }), mode !== "select" && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-outline-secondary btn-sm", onClick: handleReset, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-left me-1" }), "Back"] }))] }), mode === "select" && ((0, jsx_runtime_1.jsxs)("div", { className: "row g-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)("div", { className: "card h-100 border-primary", style: { cursor: "pointer" }, onClick: handleInitiate, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body text-center p-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-qr-code display-4 text-primary mb-3" }), (0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Create Connection Code" }), (0, jsx_runtime_1.jsx)("p", { className: "card-text text-muted", children: "Generate a code to share with someone who wants to connect with you" })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)("div", { className: "card h-100 border-success", style: { cursor: "pointer" }, onClick: () => setMode("respond"), children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body text-center p-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-keyboard display-4 text-success mb-3" }), (0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Enter Connection Code" }), (0, jsx_runtime_1.jsx)("p", { className: "card-text text-muted", children: "Enter a code that someone shared with you to connect" })] }) }) })] })), mode === "initiate" && status === "waiting" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Share this code with the person you want to connect with:" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", value: connectionCode || "XXXX-YYYY-ZZZZ", readOnly: true, style: { letterSpacing: "0.15em", fontSize: "1.5rem" } }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-primary", onClick: handleCopyCode, title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("i", { className: copied ? "bi-check-lg" : "bi-clipboard" }) })] }), copied && (0, jsx_runtime_1.jsx)("small", { className: "text-success mt-1 d-block", children: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Waiting for connection..." })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "This code will expire in 10 minutes" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleCancel, children: "Cancel" })] })), mode === "respond" && status !== "success" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Enter the connection code shared with you:" }) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", placeholder: "XXXX-YYYY-ZZZZ", value: inputCode, onChange: (e) => handleCodeInput(e.target.value), maxLength: 14, style: { letterSpacing: "0.15em", fontSize: "1.5rem" } }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", style: { maxWidth: "400px", margin: "0 auto 1rem" }, children: error })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-lg", onClick: handleRespond, disabled: status === "waiting" || inputCode.replace(/[^0-9A-Z]/gi, "").length !== 12, children: status === "waiting" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-link-45deg me-2" }), "Connect"] })) })] })), status === "success" && result && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-check-circle-fill text-success display-3" }) }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-4", children: "Connection Successful!" }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "Verify with the other person that you both see:" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: "0.2em" }, children: result.confirmationHash }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "Name:" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-2", children: result.remoteUser.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "User ID:" }), (0, jsx_runtime_1.jsx)("p", { className: "font-monospace small mb-0", children: result.remoteUser.userId })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-primary", onClick: handleSaveContact, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-lg me-2" }), "Trust & View Contact"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleReset, children: "Connect Another" })] })] })), status === "error" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x-circle-fill text-danger display-3" }) }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-4", children: "Connection Failed" }), (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", style: { maxWidth: "400px", margin: "0 auto 1rem" }, children: error }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleReset, children: "Try Again" })] }))] }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '000user00connect0screen01',
+    peersUIId: "000user00connect0screen01",
     component: UserConnect,
     routes: [
         {
-            isMatch: (props, context) => context.path === 'contacts/connect',
-            uiCategory: 'screen',
-            priority: 3
-        }
-    ]
+            isMatch: (_props, context) => context.path === "contacts/connect",
+            uiCategory: "screen",
+            priority: 3,
+        },
+    ],
 });

package/dist/screens/data-explorer/data-explorer.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function DataExplorerList(): React.JSX.Element;
+export declare function DataExplorerList(): import("react/jsx-runtime").JSX.Element;