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

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

@@ -0,0 +1,464 @@
+"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;
+};
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyringQRModal = 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/apple-icon");
+require("../icons/checkmark");
+require("../icons/google-icon");
+require("../icons/gradient-donut");
+let KeyringQRModal = class KeyringQRModal extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.sessionId = "";
+        this.expiresAt = 0;
+        this.qrData = "";
+        this.qrCodeError = false;
+        this.status = "pending";
+        this.statusMessage = "Waiting for mobile app...";
+        this.timeLeft = "";
+        this.linkCopied = false;
+    }
+    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">
+          <div class="header-title">
+            <button class="close-btn" @click=${this.handleBack} aria-label="Back">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M5.29297 11.2938C4.90234 11.6844 4.90234 12.3188 5.29297 12.7094L10.293 17.7094C10.6836 18.1 11.318 18.1 11.7086 17.7094C12.0992 17.3188 12.0992 16.6844 11.7086 16.2938L8.41172 13H17.9992C18.5523 13 18.9992 12.5531 18.9992 12C18.9992 11.4469 18.5523 11 17.9992 11H8.41484L11.7055 7.70627C12.0961 7.31565 12.0961 6.68127 11.7055 6.29065C11.3148 5.90002 10.6805 5.90002 10.2898 6.29065L5.28984 11.2906L5.29297 11.2938Z"
+                  fill="#0F2830"
+                />
+              </svg>
+            </button>
+            <keyring-text variant="text-2xl" weight="medium">Scan QR Code</keyring-text>
+          </div>
+          <button
+            class="close-btn"
+            @click=${this.status === "completed" ? this.handleClose : 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">
+          <div class="qr-container">
+            ${this.qrCodeError
+            ? (0, lit_1.html) `
+                  <keyring-text class="qr-title">Unable to generate QR code</keyring-text>
+                  <keyring-text variant="text-sm" color="secondary" class="qr-subtitle">
+                    On your mobile device, open the link below to continue verification
+                  </keyring-text>
+                  <div class="qr-link-container">
+                    <keyring-text variant="text-sm" color="primary" class="qr-link"
+                      >${this.qrData}</keyring-text
+                    >
+                    <keyring-button
+                      variant="ghost"
+                      size="sm"
+                      @click=${() => this.onCopy(this.qrData, "linkCopied")}
+                      >${this.linkCopied ? "Copied" : "Copy"}</keyring-button
+                    >
+                  </div>
+                `
+            : (0, lit_1.html) `
+                  <keyring-text class="qr-title">Scan with Keyring Connect App</keyring-text>
+                  <keyring-text variant="text-sm" color="secondary" class="qr-subtitle">
+                    Open the app and scan this code to continue verification
+                  </keyring-text>
+                  <slot name="qr-code"></slot>
+                `}
+          </div>
+
+          <div class="app-download">
+            <keyring-text>Don't have the app?</keyring-text>
+            <div class="app-download-btn-wrapper">
+              <a href="https://apps.apple.com/app/keyring-connect/id6635768260" target="_blank">
+                <apple-icon></apple-icon>
+              </a>
+              <a
+                href="https://play.google.com/store/apps/details?id=com.keyring.connect"
+                target="_blank"
+              >
+                <google-icon></google-icon>
+              </a>
+            </div>
+          </div>
+        </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}">
+            <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>
+    `;
+    }
+    // Public API methods
+    updateStatus(message, status) {
+        this.statusMessage = message;
+        this.status = status;
+    }
+    // Event handlers
+    handleClose() {
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    }
+    handleCancel() {
+        this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+    }
+    handleBack() {
+        this.dispatchEvent(new CustomEvent("back", { bubbles: true, composed: true }));
+    }
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+    // Utility methods
+    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);
+    }
+    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();
+        }
+    }
+    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>`;
+            case "failed":
+                return (0, lit_1.html) `<gradient-donut-icon startColour="#EB4577"></gradient-donut-icon>`;
+            default:
+                return (0, lit_1.html) `<gradient-donut-icon startColour="#75849A"></gradient-donut-icon>`;
+        }
+    }
+    onCopy(text, stateKey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            navigator.clipboard.writeText(text);
+            this[stateKey] = true;
+            setTimeout(() => {
+                this[stateKey] = false;
+            }, 2000);
+        });
+    }
+};
+exports.KeyringQRModal = KeyringQRModal;
+KeyringQRModal.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: 24px 24px 32px 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);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .header-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    .close-btn {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 300ms ease-in-out;
+    }
+
+    .close-btn:hover {
+      background-color: #75849a1a;
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .content > * {
+      width: 100%;
+    }
+
+    .qr-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding-top: 24px;
+      padding-bottom: 16px;
+      border-radius: 12px;
+      border: 1px solid #e3e7ee;
+    }
+
+    .qr-container .qr-title {
+      margin-bottom: 12px;
+    }
+
+    .qr-container .qr-subtitle {
+      margin-bottom: 16px;
+    }
+
+    .app-download {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+    }
+
+    .app-download-btn-wrapper {
+      display: flex;
+      gap: 12px;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .app-download-btn-wrapper a {
+      text-decoration: none;
+      transition: all 300ms ease-in-out;
+    }
+
+    .app-download-btn-wrapper a:hover {
+      opacity: 0.8;
+    }
+
+    .status-container {
+      margin: 24px -24px -32px;
+      padding: 16px;
+      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-container.failed {
+      background-color: #ffefef;
+      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;
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    a:hover {
+      text-decoration: underline;
+      color: #75849a;
+    }
+
+    .qr-link-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .qr-link {
+      padding: 4px 8px;
+      border: 1px solid rgba(15, 40, 48, 0.12);
+      border-radius: 8px;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "session-id" })
+], KeyringQRModal.prototype, "sessionId", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "expires-at", type: Number })
+], KeyringQRModal.prototype, "expiresAt", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "qr-data" })
+], KeyringQRModal.prototype, "qrData", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: "qr-code-error" })
+], KeyringQRModal.prototype, "qrCodeError", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringQRModal.prototype, "status", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringQRModal.prototype, "statusMessage", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringQRModal.prototype, "timeLeft", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], KeyringQRModal.prototype, "linkCopied", void 0);
+exports.KeyringQRModal = KeyringQRModal = __decorate([
+    (0, decorators_js_1.customElement)("keyring-qr-modal")
+], KeyringQRModal);

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import "../components/keyring-button";
+import "../components/keyring-text";
+import "../icons/check-circle";
+import "../icons/close-circle";
+import "../icons/extension-grid";
+import "../icons/gradient-donut";
+import "../icons/keyring";
+import "../icons/mobile-grid";
+export declare class KeyringSelectionModal extends LitElement {
+    title: string;
+    subtitle: string;
+    isExtensionInstalled: boolean;
+    extensionBtnText: string;
+    mobileBtnText: string;
+    private mobileSelected;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    private handleCancel;
+    private handleExtensionSelect;
+    private handleMobileSelect;
+    private stopPropagation;
+    private trapFocus;
+}