@keyringnetwork/keyring-connect-sdk 3.2.0 → 4.1.0-alpha.2

package/dist/{types.d.ts → types/extension.d.ts}

@@ -1,46 +1,9 @@
+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 ExtensionSDKConfig = {
-    /**
-     * 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;
-    };
-    /**
-     * 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;
-        keyring_access_token?: string;
-        entity_id?: string;
-        notaryUrl?: string;
-        websocketProxyUrl?: string;
-    };
-};
 export type ExtensionLaunchConfig = {
     client: {
         client_name: string;
@@ -61,7 +24,7 @@ export type ExtensionLaunchConfig = {
         websocketProxyUrl?: string;
     };
 };
-export type ExtensionStatus = "idle" | "mounted" | "proving" | "prove_error" | "prove_success" | "error";
+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 = {
@@ -94,13 +57,3 @@ export interface ExtensionState {
     tlsn_proof?: string;
     credentialData?: CredentialData;
 }
-export interface CredentialData {
-    trader: `0x${string}`;
-    policyId: number;
-    chainId: number;
-    validUntil: number;
-    cost: number;
-    key: string;
-    signature: string;
-    backdoor: string;
-}

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 { DatasourceTypes } 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;
+            datasourceObject: DatasourceTypes.DatasourceObject;
+        };
+        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 { DatasourceTypes } 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, dataSourceObject: DatasourceTypes.DatasourceObject): 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, dataSourceObject) {
+        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 = dataSourceObject.datasource.name;
+            modal.dataSourceIcon = dataSourceObject.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;
+}

package/dist/ui/components/keyring-button.js

@@ -0,0 +1,140 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyringButton = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let KeyringButton = class KeyringButton extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "primary";
+        this.size = "md";
+        this.disabled = false;
+        this.loading = false;
+    }
+    render() {
+        return (0, lit_1.html) `
+      <button
+        class="button ${this.variant} ${this.size}"
+        ?disabled=${this.disabled || this.loading}
+        @click=${this.handleClick}
+      >
+        ${this.loading ? (0, lit_1.html) `<div class="loading-spinner"></div>` : ""}
+        <slot></slot>
+      </button>
+    `;
+    }
+    handleClick(e) {
+        if (this.disabled || this.loading) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("click", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+exports.KeyringButton = KeyringButton;
+KeyringButton.styles = (0, lit_1.css) `
+    :host {
+      display: inline-block;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      border: none;
+      border-radius: 8px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+      width: 100%;
+    }
+
+    .button:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Sizes */
+
+    .xs {
+      padding: 6px 10px;
+      font-size: 12px;
+    }
+
+    .sm {
+      padding: 8px 12px;
+      font-size: 14px;
+    }
+
+    .md {
+      padding: 10px 16px;
+      font-size: 14px;
+    }
+
+    .lg {
+      padding: 12px 20px;
+      font-size: 16px;
+    }
+
+    /* Variants */
+    .primary {
+      background: #0f2830;
+      color: #fff;
+    }
+
+    .primary:hover:not(:disabled) {
+      background: #1a3d48;
+    }
+
+    .ghost {
+      background: transparent;
+      color: #6b7280;
+    }
+
+    .ghost:hover:not(:disabled) {
+      color: #374151;
+      background: #f9fafb;
+    }
+
+    .loading-spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid transparent;
+      border-top: 2px solid currentColor;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringButton.prototype, "variant", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringButton.prototype, "size", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], KeyringButton.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], KeyringButton.prototype, "loading", void 0);
+exports.KeyringButton = KeyringButton = __decorate([
+    (0, decorators_js_1.customElement)("keyring-button")
+], KeyringButton);

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

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export type TextVariant = "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl" | "text-2xl";
+export type TextColor = "primary" | "secondary" | "success" | "warning" | "error";
+export type FontWeight = "light" | "normal" | "medium" | "semibold" | "bold";
+export declare class KeyringText extends LitElement {
+    variant: TextVariant;
+    color: TextColor;
+    align: "left" | "center" | "right";
+    weight: FontWeight;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}