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

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

@@ -0,0 +1,308 @@
+"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.KeyringMobileModal = 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/checkmark");
+require("../icons/gradient-donut");
+require("../icons/keyring");
+let KeyringMobileModal = class KeyringMobileModal extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.qrData = "";
+        this.expiresAt = 0;
+        this.status = "pending";
+        this.statusMessage = "Waiting for mobile app...";
+        this.timeLeft = "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startCountdown();
+        this.trapFocus();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+        }
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div class="modal" @click=${this.stopPropagation}>
+        <div class="header">
+          <keyring-text variant="text-2xl" weight="medium" align="center"
+            >Continue with mobile app</keyring-text
+          >
+          <button class="close-btn" @click=${this.handleCancel} aria-label="Close">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <path
+                d="M16.0391 6.54694C16.4296 6.15641 17.0626 6.15641 17.4531 6.54694C17.8436 6.93747 17.8436 7.5705 17.4531 7.961L13.4141 12.0001L17.4531 16.0391C17.8436 16.4297 17.8436 17.0627 17.4531 17.4532C17.0626 17.8437 16.4296 17.8436 16.0391 17.4532L12 13.4141L7.96094 17.4532C7.57044 17.8437 6.93741 17.8436 6.54688 17.4532C6.15635 17.0627 6.15635 16.4296 6.54688 16.0391L10.5859 12.0001L6.54688 7.961C6.15635 7.57047 6.15635 6.93746 6.54688 6.54694C6.9374 6.15641 7.57041 6.15641 7.96094 6.54694L12 10.586L16.0391 6.54694Z"
+                fill="#75849A"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class="content">
+          <a href="${this.qrData}" target="_blank" class="launch-link">
+            <keyring-button class="done-button">Launch Keyring App</keyring-button>
+          </a>
+        </div>
+
+        <div class="footer">
+          <div class="footer-content">
+            <div class="footer-branding">
+              <keyring-text variant="text-sm" color="secondary"
+                >Verification provided by</keyring-text
+              >
+              <keyring-icon></keyring-icon>
+            </div>
+            <div class="footer-links">
+              <a href="https://www.keyring.network/terms" target="_blank" class="link">
+                <keyring-text variant="text-sm" color="secondary"
+                  >Keyring Terms and Conditions</keyring-text
+                >
+              </a>
+              <a href="https://docs.keyring.network/docs" target="_blank" class="link">
+                <keyring-text variant="text-sm" color="secondary">Keyring Docs</keyring-text>
+              </a>
+            </div>
+          </div>
+
+          <div class="status-container ${this.status === "connected" ? "connected" : ""}">
+            <div class="status-item">
+              ${this.getStatusIcon()}
+              <keyring-text variant="text-sm">${this.statusMessage}</keyring-text>
+            </div>
+            ${this.timeLeft !== "00:00"
+            ? (0, lit_1.html) `
+                  <keyring-text variant="text-xs" color="secondary">
+                    Expires: <span>${this.timeLeft}</span>
+                  </keyring-text>
+                `
+            : (0, lit_1.html) ``}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    updateStatus(message, status) {
+        this.statusMessage = message;
+        this.status = status;
+    }
+    // Event handlers
+    handleCancel() {
+        this.dispatchEvent(new CustomEvent("cancel", { 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:not([style*="display: none"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements && focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    startCountdown() {
+        if (this.countdownInterval) {
+            clearInterval(this.countdownInterval);
+        }
+        const updateCountdown = () => {
+            const now = Date.now();
+            const timeLeft = this.expiresAt - now;
+            if (timeLeft <= 0) {
+                this.timeLeft = "00:00";
+                this.updateStatus("Session expired", "expired");
+                if (this.countdownInterval)
+                    clearInterval(this.countdownInterval);
+                return;
+            }
+            const minutes = Math.floor(timeLeft / 60000);
+            const seconds = Math.floor((timeLeft % 60000) / 1000);
+            this.timeLeft = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+        };
+        updateCountdown();
+        this.countdownInterval = window.setInterval(updateCountdown, 1000);
+    }
+    getStatusIcon() {
+        switch (this.status) {
+            case "pending":
+            case "processing":
+                return (0, lit_1.html) `<gradient-donut-icon spinning></gradient-donut-icon>`;
+            case "connected":
+                return (0, lit_1.html) `<checkmark-icon></checkmark-icon>`;
+            default:
+                return (0, lit_1.html) `<gradient-donut-icon startColour="#75849A"></gradient-donut-icon>`;
+        }
+    }
+};
+exports.KeyringMobileModal = KeyringMobileModal;
+KeyringMobileModal.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 16px 24px;
+      flex-direction: column;
+      align-items: center;
+      max-width: 350px;
+      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);
+      position: relative;
+    }
+
+    .header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    .close-btn {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 300ms ease-in-out;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+
+    .close-btn:hover {
+      background-color: #75849a1a;
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .done-button {
+      width: 100%;
+      max-width: 180px;
+      margin: 0 auto;
+    }
+
+    .launch-link {
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+    }
+
+    .status-container {
+      margin: 24px -16px -24px;
+      padding: 8px;
+      border-top: 1px solid #e3e7ee;
+      background-color: #f3f5fa;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .status-container.connected {
+      background-color: #f2fcf7;
+      border-color: #e3e7ee;
+    }
+
+    .status-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+    }
+
+    .footer {
+      width: 100%;
+      border-top: 1px solid rgba(15, 40, 48, 0.12);
+    }
+
+    .footer-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 24px;
+    }
+
+    .footer-branding {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .footer-links {
+      width: 100%;
+      display: flex;
+      gap: 24px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .footer-links a {
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .footer-links a:hover {
+      text-decoration: underline;
+      color: #75849a;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "qr-data" })
+], KeyringMobileModal.prototype, "qrData", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "expires-at", type: Number })
+], KeyringMobileModal.prototype, "expiresAt", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringMobileModal.prototype, "status", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringMobileModal.prototype, "statusMessage", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringMobileModal.prototype, "timeLeft", void 0);
+exports.KeyringMobileModal = KeyringMobileModal = __decorate([
+    (0, decorators_js_1.customElement)("keyring-mobile-modal")
+], KeyringMobileModal);

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

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+import "../components/keyring-button";
+import "../components/keyring-text";
+import "../icons/apple-icon";
+import "../icons/checkmark";
+import "../icons/google-icon";
+import "../icons/gradient-donut";
+export type ModalStatus = "pending" | "connected" | "processing" | "completed" | "failed" | "expired";
+export declare class KeyringQRModal extends LitElement {
+    sessionId: string;
+    expiresAt: number;
+    qrData: string;
+    qrCodeError: boolean;
+    private status;
+    private statusMessage;
+    private timeLeft;
+    private linkCopied;
+    private countdownInterval?;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    updateStatus(message: string, status: ModalStatus): void;
+    private handleClose;
+    private handleCancel;
+    private handleBack;
+    private stopPropagation;
+    private startCountdown;
+    private trapFocus;
+    private getStatusIcon;
+    private onCopy;
+}