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

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

@@ -0,0 +1,169 @@
+"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.KeyringText = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let KeyringText = class KeyringText extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "text-base";
+        this.color = "primary";
+        this.align = "left";
+        this.weight = "normal";
+    }
+    render() {
+        return (0, lit_1.html) `
+      <p class="text ${this.variant} ${this.weight} ${this.color} ${this.align}">
+        <slot></slot>
+      </p>
+    `;
+    }
+};
+exports.KeyringText = KeyringText;
+KeyringText.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+      /* CSS Variables */
+      --text-xs: 0.75rem; /* 12px */
+      --text-xs--line-height: 1.333; /* calc(1 / 0.75) */
+
+      --text-sm: 0.875rem; /* 14px */
+      --text-sm--line-height: 1.429; /* calc(1.25 / 0.875) */
+
+      --text-base: 1rem; /* 16px */
+      --text-base--line-height: 1.5; /* calc(1.5 / 1) */
+
+      --text-lg: 1.125rem; /* 18px */
+      --text-lg--line-height: 1.556; /* calc(1.75 / 1.125) */
+
+      --text-xl: 1.25rem; /* 20px */
+      --text-xl--line-height: 1.4; /* calc(1.75 / 1.25) */
+
+      --text-2xl: 1.5rem; /* 24px */
+      --text-2xl--line-height: 1.333; /* calc(2 / 1.5) */
+
+      --text-3xl: 1.875rem; /* 30px */
+      --text-3xl--line-height: 1.2; /* calc(2.25 / 1.875) */
+    }
+
+    .text {
+      margin: 0;
+      font-family: Inter, "Segoe UI", Roboto, sans-serif;
+    }
+
+    /* Size Variants */
+    .text-xs {
+      font-size: var(--text-xs);
+      line-height: var(--text-xs--line-height);
+    }
+
+    .text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--text-sm--line-height);
+    }
+
+    .text-base {
+      font-size: var(--text-base);
+      line-height: var(--text-base--line-height);
+    }
+
+    .text-lg {
+      font-size: var(--text-lg);
+      line-height: var(--text-lg--line-height);
+    }
+
+    .text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--text-xl--line-height);
+    }
+
+    .text-2xl {
+      font-size: var(--text-2xl);
+      line-height: var(--text-2xl--line-height);
+    }
+
+    .text-3xl {
+      font-size: var(--text-3xl);
+      line-height: var(--text-3xl--line-height);
+    }
+
+    /* Font Weight Variants */
+    .light {
+      font-weight: 300;
+    }
+
+    .normal {
+      font-weight: 400;
+    }
+
+    .medium {
+      font-weight: 500;
+    }
+
+    .semibold {
+      font-weight: 600;
+    }
+
+    .bold {
+      font-weight: 700;
+    }
+
+    /* Colors */
+    .primary {
+      color: #0f2830;
+    }
+
+    .secondary {
+      color: #75849a;
+    }
+
+    .success {
+      color: #24af75;
+    }
+
+    .warning {
+      color: #f59e0b;
+    }
+
+    .error {
+      color: #eb4577;
+    }
+
+    .white {
+      color: #ffffff;
+    }
+
+    /* Alignment */
+    .left {
+      text-align: left;
+    }
+
+    .center {
+      text-align: center;
+    }
+
+    .right {
+      text-align: right;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringText.prototype, "variant", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringText.prototype, "color", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringText.prototype, "align", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringText.prototype, "weight", void 0);
+exports.KeyringText = KeyringText = __decorate([
+    (0, decorators_js_1.customElement)("keyring-text")
+], KeyringText);

package/dist/ui/composites/keyring-complete-modal.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import "../components/keyring-button";
+import "../components/keyring-text";
+import "../icons/check-circle";
+import "../icons/keyring";
+import "../icons/success";
+export declare class KeyringCompleteModal extends LitElement {
+    title: string;
+    subtitle: string;
+    entityType: string;
+    dataSource: string;
+    dataSourceIcon: string;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    private handleDone;
+    private stopPropagation;
+    private trapFocus;
+}

package/dist/ui/composites/keyring-complete-modal.js

@@ -0,0 +1,200 @@
+"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.KeyringCompleteModal = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+require("../components/keyring-button");
+require("../components/keyring-text");
+require("../icons/check-circle");
+require("../icons/keyring");
+require("../icons/success");
+let KeyringCompleteModal = class KeyringCompleteModal extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "Verification Completed";
+        this.subtitle = "Your verification has been completed successfully.";
+        this.entityType = "Individual";
+        this.dataSource = "Binance";
+        this.dataSourceIcon = "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.trapFocus();
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div class="modal" @click=${this.stopPropagation}>
+        <div class="content">
+          <success-icon></success-icon>
+
+          <div class="text-wrapper">
+            <keyring-text variant="text-3xl" weight="medium">${this.title}</keyring-text>
+            <keyring-text variant="text-sm">${this.subtitle}</keyring-text>
+          </div>
+
+          <div class="info-box">
+            <div class="info-row">
+              <keyring-text>Entity Type</keyring-text>
+              <keyring-text weight="semibold">${this.entityType}</keyring-text>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="info-row">
+              <keyring-text>Data Source</keyring-text>
+              <div class="data-source-value">
+                ${this.dataSourceIcon
+            ? (0, lit_1.html) `<div class="data-source-icon">
+                      <img src="${this.dataSourceIcon}" alt="${this.dataSource} icon" />
+                    </div>`
+            : ""}
+                <keyring-text weight="semibold">${this.dataSource}</keyring-text>
+              </div>
+            </div>
+          </div>
+
+          <keyring-button class="done-button" @click=${this.handleDone}>Done</keyring-button>
+        </div>
+      </div>
+    `;
+    }
+    // Event handlers
+    handleDone() {
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    trapFocus() {
+        var _a;
+        // Simple focus trap implementation
+        const focusableElements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+};
+exports.KeyringCompleteModal = KeyringCompleteModal;
+KeyringCompleteModal.styles = (0, lit_1.css) `
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(15, 40, 48, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      font-family: Inter, "Segoe UI", Roboto, sans-serif;
+    }
+
+    .modal {
+      background: white;
+      border-radius: 20px;
+      display: flex;
+      gap: 24px;
+      padding: 40px 24px 40px 24px;
+      flex-direction: column;
+      align-items: center;
+      max-width: 524px;
+      width: 100%;
+      max-height: 90vh;
+      overflow-y: auto;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .info-box {
+      width: 100%;
+      border: 1px solid #e3e7ee;
+      border-radius: 16px;
+      background: linear-gradient(0deg, #f3f5fa 0%, #f3f5fa 100%);
+      padding: 12px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      box-sizing: border-box;
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .data-source-value {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .divider {
+      width: 100%;
+      height: 1px;
+      background-color: rgba(15, 40, 48, 0.12);
+    }
+
+    .data-source-icon {
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .data-source-icon img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .done-button {
+      width: 100%;
+      max-width: 200px;
+      margin: 0 auto;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringCompleteModal.prototype, "title", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], KeyringCompleteModal.prototype, "subtitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "entity-type" })
+], KeyringCompleteModal.prototype, "entityType", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "data-source" })
+], KeyringCompleteModal.prototype, "dataSource", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "data-source-icon" })
+], KeyringCompleteModal.prototype, "dataSourceIcon", void 0);
+exports.KeyringCompleteModal = KeyringCompleteModal = __decorate([
+    (0, decorators_js_1.customElement)("keyring-complete-modal")
+], KeyringCompleteModal);

package/dist/ui/composites/keyring-mobile-modal.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import "../components/keyring-button";
+import "../components/keyring-text";
+import "../icons/checkmark";
+import "../icons/gradient-donut";
+import "../icons/keyring";
+import { ModalStatus } from "./keyring-qr-modal";
+export declare class KeyringMobileModal extends LitElement {
+    qrData: string;
+    expiresAt: number;
+    private status;
+    private statusMessage;
+    private timeLeft;
+    private countdownInterval?;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    updateStatus(message: string, status: ModalStatus): void;
+    private handleCancel;
+    private stopPropagation;
+    private trapFocus;
+    private startCountdown;
+    private getStatusIcon;
+}