@rockerone/xprnkit 0.3.3 → 0.3.4

package/build/components/identity/index.d.ts

@@ -2,3 +2,5 @@ export * from './xprn-identity';
 export * from './xprn-avatar';
 export * from './xprn-session-actor';
 export * from './xprn-session-name';
+export * from './xprn-account-list';
+export * from './xprn-identity-proof-gate';

package/build/components/identity/index.js

@@ -2,3 +2,5 @@ export * from './xprn-identity';
 export * from './xprn-avatar';
 export * from './xprn-session-actor';
 export * from './xprn-session-name';
+export * from './xprn-account-list';
+export * from './xprn-identity-proof-gate';

package/build/components/identity/xprn-account-list.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { type SessionStorageEntry } from "../../utils/auth-storage";
+type XPRNAccountListProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Show remove button for each account */
+    showRemove?: boolean;
+    /** Show add account button */
+    showAddAccount?: boolean;
+    /** Custom label for add account button */
+    addAccountLabel?: string;
+    /** Class name for add account button */
+    addAccountClassName?: string;
+    /** Custom render for each account item */
+    renderItem?: (props: AccountItemRenderProps) => React.ReactNode;
+    /** Called when an account is selected */
+    onSelect?: (entry: SessionStorageEntry) => void;
+    /** Called when an account is removed */
+    onRemove?: (entry: SessionStorageEntry) => void;
+    /** Called when add account is clicked */
+    onAddAccount?: () => void;
+    /** Class name for account items */
+    itemClassName?: string;
+    /** Class name for active account item */
+    activeClassName?: string;
+};
+type AccountItemRenderProps = {
+    entry: SessionStorageEntry;
+    isActive: boolean;
+    onSelect: () => void;
+    onRemove?: () => void;
+};
+/**
+ * Component that lists all stored accounts and allows switching between them
+ */
+export declare const XPRNAccountList: React.FunctionComponent<XPRNAccountListProps>;
+type XPRNAccountItemProps = {
+    entry: SessionStorageEntry;
+    isActive: boolean;
+    isSwitching?: boolean;
+    onSelect: () => void;
+    onRemove?: () => void;
+    className?: string;
+    activeClassName?: string;
+};
+/**
+ * Single account item in the list
+ */
+export declare const XPRNAccountItem: React.FunctionComponent<XPRNAccountItemProps>;
+export {};

package/build/components/identity/xprn-account-list.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import classNames from "classnames";
+import { useXPRN } from "../../providers/XPRNProvider";
+import { sessionStorage } from "../../utils/auth-storage";
+import { XPRNAvatarWrapper, XPRNAvatarImage, XPRNAvatarFallback } from "./xprn-avatar";
+import { cn } from "../../lib/utils";
+/**
+ * Component that lists all stored accounts and allows switching between them
+ */
+export const XPRNAccountList = ({ className, showRemove = false, showAddAccount = false, addAccountLabel = "Add Account", addAccountClassName, renderItem, onSelect, onRemove, onAddAccount, itemClassName, activeClassName, ...props }) => {
+    const { config, session, switchToSession, disconnect, connect } = useXPRN();
+    const [entries, setEntries] = React.useState([]);
+    const [switching, setSwitching] = React.useState(null);
+    const dAppName = config?.requesterAccount ?? '';
+    // Load entries on mount and when session changes
+    React.useEffect(() => {
+        if (typeof window === 'undefined' || !dAppName)
+            return;
+        const storedEntries = sessionStorage.list(dAppName);
+        setEntries(storedEntries);
+    }, [session, dAppName]);
+    const currentAuth = session ? {
+        actor: session.auth.actor.toString(),
+        permission: session.auth.permission.toString(),
+    } : null;
+    const currentChainId = session?.chainId?.toString();
+    const isActive = (entry) => {
+        if (!currentAuth || !currentChainId)
+            return false;
+        return (entry.auth.actor === currentAuth.actor &&
+            entry.auth.permission === currentAuth.permission &&
+            entry.chainId === currentChainId);
+    };
+    const handleSelect = async (entry) => {
+        if (isActive(entry))
+            return;
+        const authString = `${entry.auth.actor}@${entry.auth.permission}`;
+        setSwitching(authString);
+        try {
+            await switchToSession(authString, entry.chainId);
+            onSelect?.(entry);
+        }
+        catch (error) {
+            console.error('Failed to switch session:', error);
+        }
+        finally {
+            setSwitching(null);
+        }
+    };
+    const handleRemove = async (entry) => {
+        if (!dAppName)
+            return;
+        // If removing active session, disconnect first
+        if (isActive(entry)) {
+            await disconnect();
+        }
+        // Remove from storage
+        sessionStorage.remove(dAppName, entry.auth, entry.chainId);
+        // Update local state
+        setEntries(prev => prev.filter(e => !(e.auth.actor === entry.auth.actor &&
+            e.auth.permission === entry.auth.permission &&
+            e.chainId === entry.chainId)));
+        onRemove?.(entry);
+    };
+    const handleAddAccount = () => {
+        connect(false);
+        onAddAccount?.();
+    };
+    const rootClasses = classNames({
+        "flex flex-col gap-2 bg-black p-2 rounded-lg": true,
+        [`${className}`]: className,
+    });
+    // Show add account button even if no entries
+    if (entries.length === 0 && !showAddAccount) {
+        return null;
+    }
+    const addButtonClasses = cn("flex items-center justify-center gap-2 p-2 rounded-lg cursor-pointer transition-colors", "hover:bg-gray-800 text-gray-400", addAccountClassName);
+    return (_jsxs("div", { className: rootClasses, ...props, children: [entries.map((entry) => {
+                const active = isActive(entry);
+                const authString = `${entry.auth.actor}@${entry.auth.permission}`;
+                const isSwitching = switching === authString;
+                if (renderItem) {
+                    return (_jsx(React.Fragment, { children: renderItem({
+                            entry,
+                            isActive: active,
+                            onSelect: () => handleSelect(entry),
+                            onRemove: showRemove ? () => handleRemove(entry) : undefined,
+                        }) }, authString));
+                }
+                return (_jsx(XPRNAccountItem, { entry: entry, isActive: active, isSwitching: isSwitching, onSelect: () => handleSelect(entry), onRemove: showRemove ? () => handleRemove(entry) : undefined, className: itemClassName, activeClassName: activeClassName }, authString));
+            }), showAddAccount && (_jsxs("button", { type: "button", className: addButtonClasses, onClick: handleAddAccount, children: [_jsxs("svg", { className: "h-5 w-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 5v14" }), _jsx("path", { d: "M5 12h14" })] }), addAccountLabel] }))] }));
+};
+/**
+ * Single account item in the list
+ */
+export const XPRNAccountItem = ({ entry, isActive, isSwitching, onSelect, onRemove, className, activeClassName, }) => {
+    const itemClasses = cn("flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors text-white", "hover:bg-gray-800", isActive && "bg-gray-900", isActive && activeClassName, className);
+    return (_jsxs("div", { className: itemClasses, onClick: onSelect, children: [_jsxs(XPRNAvatarWrapper, { className: "w-10 h-10 shrink-0", children: [_jsx(XPRNAvatarFallback, { children: entry.auth.actor[0]?.toUpperCase() }), entry.profile?.avatar && (_jsx(XPRNAvatarImage, { src: `data:image/png;base64,${entry.profile.avatar}` }))] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "font-medium truncate flex items-center gap-1", children: [entry.profile?.displayName || entry.auth.actor, entry.profile?.isKyc && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-gray-300 shrink-0", children: [_jsx("path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }), _jsx("path", { d: "m9 12 2 2 4-4" })] })), entry.identityProofToken && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-white shrink-0", children: [_jsx("path", { d: "M16 10h2" }), _jsx("path", { d: "M16 14h2" }), _jsx("path", { d: "M6.17 15a3 3 0 0 1 5.66 0" }), _jsx("circle", { cx: "9", cy: "11", r: "2" }), _jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" })] }))] }), _jsxs("div", { className: "text-sm text-gray-300 truncate", children: [entry.auth.actor, "@", entry.auth.permission] })] }), isSwitching && (_jsxs("svg", { className: "animate-spin h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), isActive && !isSwitching && (_jsx("svg", { className: "h-5 w-5 text-green-500", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })), onRemove && !isActive && (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, className: "p-1 hover:bg-gray-700 rounded", title: "Remove account", children: _jsxs("svg", { className: "h-4 w-4 text-gray-400", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) }))] }));
+};
+XPRNAccountList.displayName = "XPRNAccountList";
+XPRNAccountItem.displayName = "XPRNAccountItem";

package/build/components/identity/xprn-identity-proof-gate.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+type XPRNIdentityProofGateProps = {
+    /**
+     * Content to render when identity proof is obtained
+     */
+    children: React.ReactNode;
+    /**
+     * Content to render when identity proof is required but not yet obtained.
+     * If not provided, renders nothing.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Content to render while identity proof is in progress (signing/verifying).
+     * If not provided, uses fallback.
+     */
+    loading?: React.ReactNode;
+    /**
+     * Content to render when identity proof failed.
+     * If not provided, uses fallback.
+     */
+    error?: React.ReactNode;
+    /**
+     * Content to render when no session is connected.
+     * If not provided, uses fallback.
+     */
+    notConnected?: React.ReactNode;
+    /**
+     * If true, only gates when identityProof.required is true in config.
+     * If false (default), gates whenever identity proof is configured.
+     */
+    onlyWhenRequired?: boolean;
+};
+/**
+ * Conditionally renders children based on identity proof status.
+ *
+ * Use this component to gate access to features that require identity proof.
+ * When identity proof is not obtained, shows fallback content (or nothing).
+ *
+ * @example
+ * ```tsx
+ * <XPRNIdentityProofGate
+ *   fallback={<button onClick={() => requestIdentityProof(...)}>Verify Identity</button>}
+ *   loading={<span>Verifying...</span>}
+ * >
+ *   <ProtectedFeature />
+ * </XPRNIdentityProofGate>
+ * ```
+ */
+export declare const XPRNIdentityProofGate: React.FunctionComponent<XPRNIdentityProofGateProps>;
+/**
+ * Hook to check identity proof gate status
+ * Returns the same information used by XPRNIdentityProofGate
+ */
+export declare function useIdentityProofGate(options?: {
+    onlyWhenRequired?: boolean;
+}): {
+    isGateActive: boolean;
+    isConnected: boolean;
+    isInProgress: boolean;
+    hasError: boolean;
+    isVerified: boolean;
+    shouldRenderChildren: boolean;
+    needsIdentityProof: boolean;
+    requestIdentityProof: (success: (res: import("../../providers/XPRNProvider").XPRNIdentityProof) => void, fail: (e: any) => void) => void;
+    identityProofStatus: import("../..").IdentityProofStatus;
+};
+export {};

package/build/components/identity/xprn-identity-proof-gate.js

@@ -0,0 +1,77 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useXPRN } from "../../providers/XPRNProvider";
+/**
+ * Conditionally renders children based on identity proof status.
+ *
+ * Use this component to gate access to features that require identity proof.
+ * When identity proof is not obtained, shows fallback content (or nothing).
+ *
+ * @example
+ * ```tsx
+ * <XPRNIdentityProofGate
+ *   fallback={<button onClick={() => requestIdentityProof(...)}>Verify Identity</button>}
+ *   loading={<span>Verifying...</span>}
+ * >
+ *   <ProtectedFeature />
+ * </XPRNIdentityProofGate>
+ * ```
+ */
+export const XPRNIdentityProofGate = ({ children, fallback = null, loading, error, notConnected, onlyWhenRequired = false, }) => {
+    const { session, identityProof, identityProofStatus, isIdentityProofEnabled, isIdentityProofRequired, } = useXPRN();
+    // If identity proof is not enabled, render children directly
+    if (!isIdentityProofEnabled) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // If onlyWhenRequired is true and identity proof is not required, render children
+    if (onlyWhenRequired && !isIdentityProofRequired) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // No session connected
+    if (!session) {
+        return _jsx(_Fragment, { children: notConnected ?? fallback });
+    }
+    // Identity proof in progress
+    if (identityProofStatus === "signing" || identityProofStatus === "verifying" || identityProofStatus === "validating") {
+        return _jsx(_Fragment, { children: loading ?? fallback });
+    }
+    // Identity proof failed
+    if (identityProofStatus === "error" || identityProofStatus === "expired") {
+        return _jsx(_Fragment, { children: error ?? fallback });
+    }
+    // Identity proof obtained
+    if (identityProof) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Identity proof needed but not obtained
+    return _jsx(_Fragment, { children: fallback });
+};
+XPRNIdentityProofGate.displayName = "XPRNIdentityProofGate";
+/**
+ * Hook to check identity proof gate status
+ * Returns the same information used by XPRNIdentityProofGate
+ */
+export function useIdentityProofGate(options) {
+    const { session, identityProof, identityProofStatus, isIdentityProofEnabled, isIdentityProofRequired, needsIdentityProof, requestIdentityProof, } = useXPRN();
+    const onlyWhenRequired = options?.onlyWhenRequired ?? false;
+    // Determine if gating should be active
+    const isGateActive = isIdentityProofEnabled && (!onlyWhenRequired || isIdentityProofRequired);
+    // Determine current state
+    const isConnected = session !== null;
+    const isInProgress = identityProofStatus === "signing" || identityProofStatus === "verifying" || identityProofStatus === "validating";
+    const hasError = identityProofStatus === "error" || identityProofStatus === "expired";
+    const isVerified = identityProof !== null;
+    // Should render protected content?
+    const shouldRenderChildren = !isGateActive || isVerified;
+    return {
+        isGateActive,
+        isConnected,
+        isInProgress,
+        hasError,
+        isVerified,
+        shouldRenderChildren,
+        needsIdentityProof: isGateActive && needsIdentityProof,
+        requestIdentityProof,
+        identityProofStatus,
+    };
+}

package/build/components/identity/xprn-identity.d.ts

@@ -4,6 +4,10 @@ type XPRNIdentityProps = React.HTMLAttributes<HTMLDivElement> & {
     activeSessionClassName?: string;
     dropdownClassName?: string;
     avatarClassName?: string;
+    /** Match dropdown width to trigger width */
+    matchDropdownWidth?: boolean;
+    /** Close dropdown when children are clicked */
+    closeOnSelect?: boolean;
 };
 export declare const XPRNIdentity: React.FunctionComponent<XPRNIdentityProps>;
 export {};

package/build/components/identity/xprn-identity.js

@@ -8,7 +8,8 @@ import { XPRNSessionName } from "./xprn-session-name";
 import { useXPRN } from "../../providers/XPRNProvider";
 import { XPRNConnectButton } from "./../xprn-session";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./../ui/dropdown";
-export const XPRNIdentity = ({ children, className, showLogout, activeSessionClassName, dropdownClassName, avatarClassName, }) => {
+export const XPRNIdentity = ({ children, className, showLogout, activeSessionClassName, dropdownClassName, avatarClassName, matchDropdownWidth = true, closeOnSelect = true, }) => {
+    const [open, setOpen] = React.useState(false);
     const rootClasses = classNames({
         "grid grid-cols-[min-content,1fr] gap-4 items-center inline": true,
         [`${className}`]: className,
@@ -18,13 +19,13 @@ export const XPRNIdentity = ({ children, className, showLogout, activeSessionCla
         [`${activeSessionClassName}`]: activeSessionClassName,
     });
     const dropdownClasses = classNames({
-        "flex flex-col items-center gap-2": true,
+        "flex flex-col gap-2": true,
         [`${dropdownClassName}`]: dropdownClassName,
     });
-    const { session, profile, disconnect, authentication } = useXPRN();
+    const { session, profile, disconnect } = useXPRN();
     const handleDisconnect = React.useCallback((e) => {
         e.preventDefault();
         disconnect();
     }, [disconnect]);
-    return (_jsx(_Fragment, { children: session ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline w-auto flex-grow-0", children: _jsxs("div", { className: activeSessionClasses, children: [_jsx("div", { className: "w-10 h-10", children: _jsx(XPRNAvatar, { className: avatarClassName }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx(XPRNSessionName, { className: "text-md font-bold" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(XPRNSessionActor, { className: "text-md" }), showLogout && (_jsx("a", { href: "#", className: "underline", onClick: e => handleDisconnect(e), children: "Log out" }))] })] })] }) }), children && (_jsx(DropdownMenuContent, { className: dropdownClasses, children: children }))] })) : (_jsx(XPRNConnectButton, { className: rootClasses, children: "Connect" })) }));
+    return (_jsx(_Fragment, { children: session ? (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { className: "inline w-auto flex-grow-0", children: _jsxs("div", { className: activeSessionClasses, children: [_jsx("div", { className: "w-10 h-10", children: _jsx(XPRNAvatar, { className: avatarClassName }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx(XPRNSessionName, { className: "text-md font-bold" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(XPRNSessionActor, { className: "text-md" }), showLogout && (_jsx("a", { href: "#", className: "underline", onClick: e => handleDisconnect(e), children: "Log out" }))] })] })] }) }), children && (_jsx(DropdownMenuContent, { className: dropdownClasses, matchTriggerWidth: matchDropdownWidth, onClick: () => closeOnSelect && setOpen(false), children: children }))] })) : (_jsx(XPRNConnectButton, { className: rootClasses, children: "Connect" })) }));
 };

package/build/components/identity/xprn-session-name.d.ts

@@ -1,4 +1,25 @@
 import React from "react";
-type XPRNSessionNameProps = React.HTMLAttributes<HTMLHeadElement> & {};
+type XPRNSessionNameProps = React.HTMLAttributes<HTMLHeadElement> & {
+    /** Show identity proof badge with status indicator */
+    showIdentityProof?: boolean;
+    /** @deprecated Use showIdentityProof instead */
+    showAuthentication?: boolean;
+};
+/**
+ * Get badge styling based on identity proof status
+ */
+declare function useIdentityProofBadgeStyle(): {
+    visible: boolean;
+    className: string;
+    isPending?: undefined;
+    isSuccess?: undefined;
+    isError?: undefined;
+} | {
+    visible: boolean;
+    className: string;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+};
 export declare const XPRNSessionName: React.FunctionComponent<XPRNSessionNameProps>;
-export {};
+export { useIdentityProofBadgeStyle };

package/build/components/identity/xprn-session-name.js

@@ -1,14 +1,59 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import classNames from "classnames";
 import { useXPRN } from "../../providers/XPRNProvider";
+/**
+ * Get badge styling based on identity proof status
+ */
+function useIdentityProofBadgeStyle() {
+    const { identityProofStatus, isIdentityProofEnabled, needsIdentityProof } = useXPRN();
+    return useMemo(() => {
+        if (!isIdentityProofEnabled) {
+            return { visible: false, className: "" };
+        }
+        const isPending = identityProofStatus === "signing" ||
+            identityProofStatus === "verifying" ||
+            identityProofStatus === "validating";
+        const isSuccess = identityProofStatus === "success";
+        const isError = identityProofStatus === "error" || identityProofStatus === "expired";
+        const isIdle = identityProofStatus === "idle";
+        // Build className based on status
+        let className = "";
+        if (isPending) {
+            className = "animate-pulse text-gray-400";
+        }
+        else if (isSuccess) {
+            className = "text-white";
+        }
+        else if (isError) {
+            className = "text-red-500";
+        }
+        else if (isIdle && needsIdentityProof) {
+            className = "text-gray-500";
+        }
+        else {
+            className = "text-white";
+        }
+        return {
+            visible: true,
+            className,
+            isPending,
+            isSuccess,
+            isError,
+        };
+    }, [identityProofStatus, isIdentityProofEnabled, needsIdentityProof]);
+}
 export const XPRNSessionName = ({ children, className, }) => {
-    const { profile, authentication } = useXPRN();
+    const { profile, session, config } = useXPRN();
+    const badgeStyle = useIdentityProofBadgeStyle();
+    const showBadge = (config?.identityProof?.required || config?.identityProof?.enforceOnConnect) && badgeStyle.visible;
     const rootClasses = classNames({
         "flex gap-2 items-center justify-center": true,
         [`${className}`]: className,
     });
-    if (!profile)
+    if (!profile || !session)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", { className: `${rootClasses}`, children: [_jsxs("h3", { children: ["@", profile.displayName.toString()] }), _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-badge-check", children: [_jsx("path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }), _jsx("path", { d: "m9 12 2 2 4-4" })] }), authentication && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-id-card", children: [_jsx("path", { d: "M16 10h2" }), _jsx("path", { d: "M16 14h2" }), _jsx("path", { d: "M6.17 15a3 3 0 0 1 5.66 0" }), _jsx("circle", { cx: "9", cy: "11", r: "2" }), _jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" })] }))] }));
+    return (_jsxs("div", { className: `${rootClasses}`, children: [_jsx("h3", { children: profile.displayName ? profile.displayName.toString() : session.auth.actor.toString() }), profile.isKyc && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-badge-check", children: [_jsx("path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }), _jsx("path", { d: "m9 12 2 2 4-4" })] })), showBadge && (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: classNames("lucide lucide-id-card", badgeStyle.className), children: [_jsx("path", { d: "M16 10h2" }), _jsx("path", { d: "M16 14h2" }), _jsx("path", { d: "M6.17 15a3 3 0 0 1 5.66 0" }), _jsx("circle", { cx: "9", cy: "11", r: "2" }), _jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2" })] }))] }));
 };
+export { useIdentityProofBadgeStyle };

package/build/components/ui/dropdown.d.ts

@@ -10,7 +10,9 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    matchTriggerWidth?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/build/components/ui/dropdown.js

@@ -16,7 +16,10 @@ DropdownMenuSubTrigger.displayName =
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, matchTriggerWidth = false, style, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", !matchTriggerWidth && "min-w-[8rem]", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), style: {
+            ...style,
+            ...(matchTriggerWidth && { width: 'var(--radix-dropdown-menu-trigger-width)' }),
+        }, ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

package/build/components/xprn-transaction.js

@@ -14,7 +14,7 @@ const XPRNTransactionVariants = cva("inline-flex items-center justify-center whi
 });
 const XPRNTransaction = React.forwardRef(({ className, variant, size, asChild = false, onClick, children, actions, onTransactionStart, onTransactionSuccess, onTransactionFail, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { session, connect, addTransactionError, txErrorsStack } = useXPRN();
+    const { session, connect, addTransactionError } = useXPRN();
     const [txStatus, setTxStatus] = React.useState('idle');
     const TxStatusNode = React.useMemo(() => {
         if (txStatus == 'idle')
@@ -37,12 +37,14 @@ const XPRNTransaction = React.forwardRef(({ className, variant, size, asChild =
                         onTransactionSuccess(res);
                     setTxStatus('success');
                 }).catch((e) => {
+                    console.error(e);
                     setTxStatus('fail');
                     addTransactionError(e);
                 });
             }
             catch (e) {
                 setTxStatus('fail');
+                console.error(e);
                 addTransactionError(e.toString());
                 if (onTransactionFail)
                     onTransactionFail(e);