@keyringnetwork/keyring-connect-sdk 3.1.0 → 4.1.0-alpha.1

package/dist/types/core.d.ts

@@ -0,0 +1,78 @@
+import { MobileConnectedMessage, ProcessingCompletedMessage, ProcessingFailedMessage, ProcessingStartedMessage, SessionCreatedMessage, SessionExpiredMessage } from "./websocket";
+export interface SessionConfig {
+    /**
+     * The name of the client.
+     */
+    name: string;
+    /**
+     * The URL of the client app which the chrome extension will communicate with.
+     */
+    app_url: string;
+    /**
+     * The URL of the client logo.
+     */
+    logo_url: string;
+    /**
+     * The onchain policy ID of the client.
+     */
+    policy_id: number;
+    /**
+     * The wallet address and chain ID of the user.
+     */
+    credential_config: {
+        chain_id: number;
+        wallet_address: string;
+    };
+    /**
+     * The API key of the client.
+     */
+    api_key: string;
+    /**
+     * Keyring Network configuration for the extension.
+     * @note this is meant to be used for internal testing and development purposes.
+     */
+    krn_config?: {
+        keyring_api_url?: string;
+        keyring_user_app_url?: string;
+        analytics_api_url?: string;
+        notaryUrl?: string;
+        websocketProxyUrl?: string;
+    };
+}
+export interface CredentialData {
+    trader: `0x${string}`;
+    policyId: number;
+    chainId: number;
+    validUntil: number;
+    cost: number;
+    key: string;
+    signature: string;
+    backdoor: string;
+}
+export interface SDKError {
+    code: string;
+    message: string;
+    details?: any;
+}
+export type SDKErrorCode = "BACKEND_UNAVAILABLE" | "SESSION_CREATION_FAILED" | "SESSION_NOT_FOUND" | "SESSION_EXPIRED" | "WEBSOCKET_CONNECTION_FAILED" | "WEBSOCKET_DISCONNECTED" | "MOBILE_PROCESSING_FAILED" | "NETWORK_ERROR" | "VALIDATION_ERROR" | "TIMEOUT_ERROR" | "QR_DISPLAY_NOT_SUPPORTED";
+export interface SDKCallbacks {
+    onSessionCreated?: (data: SessionCreatedMessage["data"]) => void;
+    onMobileConnected?: (data: MobileConnectedMessage["data"]) => void;
+    onProcessingStarted?: (data: ProcessingStartedMessage["data"]) => void;
+    onProcessingCompleted?: (data: ProcessingCompletedMessage["data"]) => void;
+    onProcessingFailed?: (data: ProcessingFailedMessage["data"]) => void;
+    onSessionExpired?: (data: SessionExpiredMessage["data"]) => void;
+    onError?: (error: SDKError) => void;
+    onConnectionStatusChanged?: (connected: boolean) => void;
+}
+export type SDKEventTypes = "sessionCreated" | "mobileConnected" | "processingStarted" | "processingCompleted" | "processingFailed" | "sessionExpired" | "error" | "connectionStatusChanged";
+export type SDKEventData = {
+    sessionCreated: SessionCreatedMessage["data"];
+    mobileConnected: MobileConnectedMessage["data"];
+    processingStarted: ProcessingStartedMessage["data"];
+    processingCompleted: ProcessingCompletedMessage["data"];
+    processingFailed: ProcessingFailedMessage["data"];
+    sessionExpired: SessionExpiredMessage["data"];
+    error: SDKError;
+    connectionStatusChanged: boolean;
+};

package/dist/types/core.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/extension.d.ts

@@ -0,0 +1,59 @@
+import { CredentialData } from "./core";
+export declare enum EVENT_ACTIONS {
+    LAUNCH_KEYRING_CONNECT = "LAUNCH_KEYRING_CONNECT",
+    GET_STATUS = "GET_STATUS",
+    KEYRING_CONNECT_STATUS = "KEYRING_CONNECT_STATUS"
+}
+export type ExtensionLaunchConfig = {
+    client: {
+        client_name: string;
+        client_app_url: string;
+        client_logo_url: string;
+        client_policy_id: number;
+        client_entity_id?: string;
+        credential_config: {
+            chain_id: number;
+            wallet_address: string;
+        };
+    };
+    krn_config?: {
+        keyring_api_url?: string;
+        keyring_user_app_url?: string;
+        analytics_api_url?: string;
+        notaryUrl?: string;
+        websocketProxyUrl?: string;
+    };
+};
+export type ExtensionStatus = "idle" | "mounted" | "proving" | "prove_error" | "prove_success" | "generate_credential" | "credential_success" | "error";
+export type AttestationStatus = "onboarding_required" | "onboarding_pending" | "attestation_ready" | "non_compliant";
+export type CredentialStatus = "expired" | "valid" | "none";
+export type User = {
+    /**
+     * Off-chain attestation status.
+     */
+    attestation_status: AttestationStatus;
+    /**
+     * On-chain keyring credential status.
+     */
+    credential_status: CredentialStatus;
+    /**
+     * Connected wallet address of the user.
+     */
+    wallet_address: string;
+    /**
+     * Keyring User ID.
+     */
+    user_id: string;
+    /**
+     * Keyring Entity ID.
+     */
+    entity_id: string;
+};
+export interface ExtensionState {
+    status: ExtensionStatus;
+    manifest?: any;
+    error?: string;
+    user?: User;
+    tlsn_proof?: string;
+    credentialData?: CredentialData;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./api";
+export * from "./core";
+export * from "./extension";
+export * from "./websocket";

package/dist/types/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./api"), exports);
+__exportStar(require("./core"), exports);
+__exportStar(require("./extension"), exports);
+__exportStar(require("./websocket"), exports);

package/dist/types/websocket.d.ts

@@ -0,0 +1,68 @@
+import { DataSource } from "@keyringnetwork/keyring-dtos";
+import { CredentialData } from "./core";
+/**
+ * Base structure for all WebSocket messages
+ */
+interface BaseMessage {
+    type: string;
+    session_id: string;
+    timestamp: number;
+    data?: any;
+}
+export interface SessionCreatedMessage extends BaseMessage {
+    type: "session_created";
+    data: {
+        session_id: string;
+        qr_code_data: string;
+        expires_at: number | string;
+    };
+}
+export interface MobileConnectedMessage extends BaseMessage {
+    type: "mobile_connected";
+    data: {
+        device_info: {
+            platform: "ios" | "android";
+            app_version: string;
+        };
+        connection_id: string;
+    };
+}
+export interface ProcessingStartedMessage extends BaseMessage {
+    type: "processing_started";
+    data: any;
+}
+export interface ProcessingCompletedMessage extends BaseMessage {
+    type: "processing_completed";
+    data: {
+        result: {
+            credential_data: CredentialData;
+            entity_type: string;
+            datasource: DataSource;
+        };
+        status: "success" | "error" | "cancelled";
+    };
+}
+export interface ProcessingFailedMessage extends BaseMessage {
+    type: "processing_failed" | "error";
+    data: {
+        error: string;
+        [key: string]: any;
+    };
+}
+export interface SessionExpiredMessage extends BaseMessage {
+    type: "session_expired";
+    data: {
+        reason: "timeout" | "manual";
+    };
+}
+/**
+ * Union of all WebSocket message types
+ * Used for type-safe message handling
+ */
+export type WebSocketMessage = SessionCreatedMessage | MobileConnectedMessage | ProcessingStartedMessage | ProcessingCompletedMessage | ProcessingFailedMessage | SessionExpiredMessage | {
+    type: string;
+    session_id: string;
+    timestamp: number;
+    data?: any;
+};
+export {};

package/dist/types/websocket.js

@@ -0,0 +1,3 @@
+"use strict";
+// ****** WebSocket Client Types ******
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/ui/UIManager.d.ts

@@ -0,0 +1,52 @@
+import "./components/keyring-button";
+import "./components/keyring-text";
+import "./composites/keyring-complete-modal";
+import "./composites/keyring-mobile-modal";
+import "./composites/keyring-qr-modal";
+import "./composites/keyring-selection-modal";
+import "./composites/keyring-terminated-modal";
+import { DataSource } from "@keyringnetwork/keyring-dtos";
+export declare class UIManager {
+    private currentModal;
+    private onCancel;
+    private onExtensionSelected;
+    private onMobileSelected;
+    private isExtensionInstalled;
+    private readonly STATUS_MODALS;
+    /**
+     * Show platform selection modal for desktop users
+     */
+    showSelectionModal(): Promise<void>;
+    /**
+     * Show QR code modal with app launch button for mobile
+     */
+    showMobileModal(qrCodeData: string, expiresAt: number | string): Promise<void>;
+    /**
+     * Show QR code modal with session information
+     */
+    showQRModal(qrCodeData: string, sessionId: string, expiresAt: number | string): Promise<void>;
+    /**
+     * Show completion modal with verification results
+     */
+    showCompleteModal(entityType: string, dataSource: DataSource): Promise<void>;
+    /**
+     * Show terminated modal with session termination reason
+     */
+    showTerminatedModal(): Promise<void>;
+    /**
+     * Update the status display in the modal
+     */
+    updateStatus(message: string, status: "pending" | "connected" | "processing" | "completed" | "failed" | "expired"): void;
+    /**
+     * Hide and clean up the current modal
+     */
+    hideModal(): void;
+    /**
+     * Set callback handlers
+     */
+    setCallbacks(onCancel: () => void, onExtensionSelected?: () => void, onMobileSelected?: () => void): void;
+    /**
+     * Generate QR code using the qr-code-styling library
+     */
+    private generateQRCode;
+}

package/dist/ui/UIManager.js

@@ -0,0 +1,257 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIManager = void 0;
+// import * as QRCode from "qrcode";
+const qr_code_styling_1 = __importDefault(require("qr-code-styling"));
+const logger_1 = require("../utils/logger");
+// Import components to register them
+require("./components/keyring-button");
+require("./components/keyring-text");
+require("./composites/keyring-complete-modal");
+require("./composites/keyring-mobile-modal");
+require("./composites/keyring-qr-modal");
+require("./composites/keyring-selection-modal");
+require("./composites/keyring-terminated-modal");
+const keyringConnectExtension_1 = require("../core/keyringConnectExtension");
+const logger = logger_1.KeyringLogger.init("UIManager");
+class UIManager {
+    constructor() {
+        this.currentModal = null;
+        this.onCancel = () => { };
+        this.onExtensionSelected = () => { };
+        this.onMobileSelected = () => { };
+        this.isExtensionInstalled = false;
+        this.STATUS_MODALS = ["KEYRING-QR-MODAL", "KEYRING-MOBILE-MODAL"];
+    }
+    /**
+     * Show platform selection modal for desktop users
+     */
+    showSelectionModal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.hideModal(); // Clean up any existing modal
+            this.isExtensionInstalled = yield keyringConnectExtension_1.KeyringConnectExtension.isKeyringConnectInstalled();
+            const modal = document.createElement("keyring-selection-modal");
+            modal.isExtensionInstalled = this.isExtensionInstalled;
+            // Set up event listeners
+            modal.addEventListener("cancel", () => {
+                this.hideModal();
+                this.onCancel();
+            });
+            modal.addEventListener("extension-selected", () => {
+                this.hideModal();
+                this.onExtensionSelected();
+            });
+            modal.addEventListener("mobile-selected", () => {
+                this.onMobileSelected();
+            });
+            // Handle backdrop clicks
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    this.hideModal();
+                    this.onCancel();
+                }
+            });
+            // Add to DOM
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+        });
+    }
+    /**
+     * Show QR code modal with app launch button for mobile
+     */
+    showMobileModal(qrCodeData, expiresAt) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.hideModal(); // Clean up any existing modal
+            const modal = document.createElement("keyring-mobile-modal");
+            // Convert expiresAt to timestamp if it's a string
+            const expiresAtTimestamp = typeof expiresAt === "string" ? new Date(expiresAt).getTime() : expiresAt;
+            // Set attributes
+            modal.qrData = qrCodeData;
+            modal.expiresAt = expiresAtTimestamp;
+            // Set up event listeners
+            modal.addEventListener("cancel", () => {
+                this.hideModal();
+                this.onCancel();
+            });
+            // Handle backdrop clicks - don't close the modal
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    return;
+                }
+            });
+            // Add to DOM
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+        });
+    }
+    /**
+     * Show QR code modal with session information
+     */
+    showQRModal(qrCodeData, sessionId, expiresAt) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.hideModal(); // Clean up any existing modal
+            const modal = document.createElement("keyring-qr-modal");
+            // Convert expiresAt to timestamp if it's a string
+            const expiresAtTimestamp = typeof expiresAt === "string" ? new Date(expiresAt).getTime() : expiresAt;
+            // Set attributes
+            modal.sessionId = sessionId;
+            modal.expiresAt = expiresAtTimestamp;
+            modal.qrData = qrCodeData;
+            // Generate and add QR code
+            const qrCanvas = yield this.generateQRCode(qrCodeData);
+            if (qrCanvas) {
+                qrCanvas.slot = "qr-code";
+                modal.appendChild(qrCanvas);
+            }
+            else {
+                modal.qrCodeError = true;
+            }
+            // Set up event listeners
+            modal.addEventListener("cancel", () => {
+                this.hideModal();
+                this.onCancel();
+            });
+            modal.addEventListener("back", () => {
+                this.onCancel();
+                this.showSelectionModal();
+            });
+            // Handle backdrop clicks - don't close the modal
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    return;
+                }
+            });
+            modal.addEventListener("close", () => {
+                this.hideModal();
+            });
+            // Add to DOM
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+        });
+    }
+    /**
+     * Show completion modal with verification results
+     */
+    showCompleteModal(entityType, dataSource) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.hideModal(); // Clean up any existing modal
+            const modal = document.createElement("keyring-complete-modal");
+            // Set attributes
+            modal.entityType = entityType;
+            modal.dataSource = dataSource.name;
+            modal.dataSourceIcon = dataSource.image;
+            // Set up event listeners
+            modal.addEventListener("close", () => {
+                this.hideModal();
+            });
+            // Handle backdrop clicks
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    this.hideModal();
+                }
+            });
+            // Add to DOM
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+        });
+    }
+    /**
+     * Show terminated modal with session termination reason
+     */
+    showTerminatedModal() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.hideModal(); // Clean up any existing modal
+            const modal = document.createElement("keyring-terminated-modal");
+            // Set up event listeners
+            modal.addEventListener("close", () => {
+                this.hideModal();
+            });
+            // Handle backdrop clicks
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    this.hideModal();
+                }
+            });
+            // Add to DOM
+            document.body.appendChild(modal);
+            this.currentModal = modal;
+        });
+    }
+    /**
+     * Update the status display in the modal
+     */
+    updateStatus(message, status) {
+        if (this.currentModal && this.STATUS_MODALS.includes(this.currentModal.tagName)) {
+            this.currentModal.updateStatus(message, status);
+        }
+    }
+    /**
+     * Hide and clean up the current modal
+     */
+    hideModal() {
+        if (this.currentModal && this.currentModal.parentNode) {
+            this.currentModal.parentNode.removeChild(this.currentModal);
+        }
+        this.currentModal = null;
+    }
+    /**
+     * Set callback handlers
+     */
+    setCallbacks(onCancel, onExtensionSelected, onMobileSelected) {
+        this.onCancel = onCancel;
+        if (onExtensionSelected) {
+            this.onExtensionSelected = onExtensionSelected;
+        }
+        if (onMobileSelected) {
+            this.onMobileSelected = onMobileSelected;
+        }
+    }
+    /**
+     * Generate QR code using the qr-code-styling library
+     */
+    generateQRCode(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const canvasContainer = document.createElement("div");
+            try {
+                const qrCode = new qr_code_styling_1.default({
+                    width: 200,
+                    height: 200,
+                    data,
+                    image: "https://uploads-ssl.webflow.com/65df8e71bab45b70f5433fba/664359927ac82d0c110ff6be_Keyring%20Icon%20Square.svg",
+                    dotsOptions: {
+                        color: "#0F2830",
+                        type: "dots",
+                    },
+                    cornersDotOptions: {
+                        type: "extra-rounded",
+                    },
+                    cornersSquareOptions: {
+                        type: "extra-rounded",
+                    },
+                    imageOptions: {
+                        crossOrigin: "anonymous",
+                    },
+                });
+                qrCode.append(canvasContainer);
+                return canvasContainer;
+            }
+            catch (error) {
+                logger.error({ error }, "Failed to generate QR code");
+                return null;
+            }
+        });
+    }
+}
+exports.UIManager = UIManager;

package/dist/ui/components/keyring-button.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+export declare class KeyringButton extends LitElement {
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+    private handleClick;
+}