@hsuite/native-connect-angular 1.0.0

package/src/lib/components/wallet-connection-modal/qr-pairing-step/qr-pairing-step.component.html

@@ -0,0 +1,94 @@
+<!-- QR Pairing Step -->
+<div class="qr-pairing-step">
+  <!-- Header -->
+  <div class="step-header">
+    <button type="button" class="back-button" (click)="cancel()">
+      <ion-icon name="arrow-back-outline"></ion-icon>
+    </button>
+    <div class="header-content">
+      <h3 class="step-title">Connect Mobile Wallet</h3>
+      <p class="step-description">Scan the QR code with your HSuite Wallet app</p>
+    </div>
+  </div>
+
+  <!-- Loading State -->
+  <div class="state-container loading" *ngIf="pairingState() === 'loading'">
+    <ion-spinner name="crescent"></ion-spinner>
+    <p>Generating secure connection...</p>
+  </div>
+
+  <!-- QR Display State -->
+  <div class="qr-container" *ngIf="isQrVisible()">
+    <hs-qr-pairing-display
+      [offerData]="offerData"
+      [size]="256"
+      [expirySeconds]="expirySeconds"
+      title="Scan to Connect"
+      [subtitle]="appName + ' wants to connect'"
+      (expired)="onQrExpired()"
+      (refreshRequested)="refresh()"
+    ></hs-qr-pairing-display>
+  </div>
+
+  <!-- Connecting State -->
+  <div class="state-container connecting" *ngIf="pairingState() === 'connecting'">
+    <div class="connecting-animation">
+      <ion-icon name="phone-portrait-outline"></ion-icon>
+      <div class="connecting-dots">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <ion-icon name="qr-code-outline"></ion-icon>
+    </div>
+    <p>Establishing secure connection...</p>
+    <span class="hint">Approve the connection request on your wallet</span>
+  </div>
+
+  <!-- Connected State -->
+  <div class="state-container connected" *ngIf="pairingState() === 'connected'">
+    <ion-icon name="checkmark-circle-outline" class="success-icon"></ion-icon>
+    <p>Connected successfully!</p>
+  </div>
+
+  <!-- Expired State -->
+  <div class="state-container expired" *ngIf="pairingState() === 'expired'">
+    <ion-icon name="close-circle-outline" class="expired-icon"></ion-icon>
+    <p>QR code expired</p>
+    <button type="button" class="refresh-button" (click)="refresh()">
+      <ion-icon name="refresh-outline"></ion-icon>
+      Generate New Code
+    </button>
+  </div>
+
+  <!-- Error State -->
+  <div class="state-container error" *ngIf="pairingState() === 'error'">
+    <ion-icon name="close-circle-outline" class="error-icon"></ion-icon>
+    <p>{{ errorMessage || 'Something went wrong' }}</p>
+    <button type="button" class="refresh-button" (click)="refresh()">
+      <ion-icon name="refresh-outline"></ion-icon>
+      Try Again
+    </button>
+  </div>
+
+  <!-- Instructions -->
+  <div class="instructions" *ngIf="pairingState() === 'displaying'">
+    <h4>How to connect:</h4>
+    <ol>
+      <li>Open the <strong>HSuite Wallet</strong> app on your phone</li>
+      <li>Go to <strong>Sessions</strong> and tap <strong>Scan QR</strong></li>
+      <li>Scan this QR code with your camera</li>
+      <li>Approve the connection request</li>
+    </ol>
+  </div>
+
+  <!-- Cancel Button -->
+  <button
+    type="button"
+    class="cancel-button"
+    *ngIf="pairingState() !== 'connected'"
+    (click)="cancel()"
+  >
+    Cancel
+  </button>
+</div>

package/src/lib/components/wallet-connection-modal/qr-pairing-step/qr-pairing-step.component.scss

@@ -0,0 +1,272 @@
+/**
+ * QR Pairing Step Styles
+ * Uses unified --token-* and Ionic color system for theme compatibility
+ */
+
+:host {
+  display: block;
+}
+
+.qr-pairing-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--token-space-4, 16px);
+  min-height: 400px;
+}
+
+// ========== Header ==========
+
+.step-header {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: var(--token-space-6, 24px);
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin-right: var(--token-space-3, 12px);
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--ion-color-medium);
+  transition: all var(--token-transition-normal, 0.2s) ease;
+
+  &:hover {
+    background: var(--token-surface-hover, rgba(var(--ion-text-color-rgb), 0.05));
+    color: var(--ion-text-color);
+  }
+
+  ion-icon {
+    font-size: 20px;
+  }
+}
+
+.header-content {
+  flex: 1;
+}
+
+.step-title {
+  margin: 0 0 4px;
+  font-size: var(--token-font-size-4, 18px);
+  font-weight: var(--token-font-weight-semibold, 600);
+  color: var(--ion-text-color);
+}
+
+.step-description {
+  margin: 0;
+  font-size: var(--token-font-size-2, 14px);
+  color: var(--ion-color-medium);
+}
+
+// ========== QR Container ==========
+
+.qr-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--token-space-6, 24px);
+}
+
+// ========== State Containers ==========
+
+.state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--token-space-8, 32px);
+  text-align: center;
+  flex: 1;
+
+  p {
+    margin: var(--token-space-4, 16px) 0 0;
+    font-size: var(--token-font-size-3, 16px);
+    font-weight: var(--token-font-weight-medium, 500);
+    color: var(--ion-text-color);
+  }
+
+  .hint {
+    display: block;
+    margin-top: var(--token-space-2, 8px);
+    font-size: var(--token-font-size-2, 14px);
+    font-weight: var(--token-font-weight-normal, 400);
+    color: var(--ion-color-medium);
+  }
+
+  ion-spinner {
+    width: 48px;
+    height: 48px;
+    --color: var(--ion-color-primary);
+  }
+}
+
+// ========== Connecting Animation ==========
+
+.connecting-animation {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-3, 12px);
+
+  ion-icon {
+    font-size: 40px;
+    color: var(--ion-color-primary);
+  }
+}
+
+.connecting-dots {
+  display: flex;
+  gap: 6px;
+
+  span {
+    width: 8px;
+    height: 8px;
+    background: var(--ion-color-primary);
+    border-radius: 50%;
+    animation: pulse 1.4s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// ========== Status Icons ==========
+
+.success-icon {
+  font-size: 64px;
+  color: var(--ion-color-success);
+}
+
+.expired-icon,
+.error-icon {
+  font-size: 64px;
+  color: var(--ion-color-warning);
+}
+
+.error-icon {
+  color: var(--ion-color-danger);
+}
+
+// ========== Refresh Button ==========
+
+.refresh-button {
+  display: flex;
+  align-items: center;
+  gap: var(--token-space-2, 8px);
+  margin-top: var(--token-space-4, 16px);
+  padding: var(--token-space-3, 12px) var(--token-space-4, 16px);
+  background: var(--ion-color-primary);
+  color: var(--ion-color-primary-contrast);
+  font-size: var(--token-font-size-2, 14px);
+  font-weight: var(--token-font-weight-medium, 500);
+  border: none;
+  border-radius: var(--token-radius-2, 8px);
+  cursor: pointer;
+  transition: all var(--token-transition-normal, 0.2s) ease;
+
+  &:hover {
+    background: var(--ion-color-primary-shade);
+  }
+
+  ion-icon {
+    font-size: 18px;
+  }
+}
+
+// ========== Instructions ==========
+
+.instructions {
+  width: 100%;
+  max-width: 320px;
+  padding: var(--token-space-4, 16px);
+  background: var(--token-surface-3, rgba(var(--ion-text-color-rgb), 0.04));
+  border-radius: var(--token-radius-2, 8px);
+  margin-bottom: var(--token-space-6, 24px);
+
+  h4 {
+    margin: 0 0 var(--token-space-3, 12px);
+    font-size: var(--token-font-size-2, 14px);
+    font-weight: var(--token-font-weight-semibold, 600);
+    color: var(--ion-text-color);
+  }
+
+  ol {
+    margin: 0;
+    padding-left: 1.5em;
+
+    li {
+      margin-bottom: var(--token-space-2, 8px);
+      font-size: var(--token-font-size-2, 14px);
+      color: var(--ion-color-medium);
+      line-height: 1.5;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      strong {
+        color: var(--ion-text-color);
+      }
+    }
+  }
+}
+
+// ========== Cancel Button ==========
+
+.cancel-button {
+  margin-top: auto;
+  padding: var(--token-space-3, 12px) var(--token-space-6, 24px);
+  background: transparent;
+  color: var(--ion-color-medium);
+  font-size: var(--token-font-size-2, 14px);
+  font-weight: var(--token-font-weight-medium, 500);
+  border: none;
+  cursor: pointer;
+  transition: color var(--token-transition-normal, 0.2s) ease;
+
+  &:hover {
+    color: var(--ion-text-color);
+  }
+}
+
+// ========== Reduced Motion Support ==========
+
+@media (prefers-reduced-motion: reduce) {
+  .connecting-dots span {
+    animation: none;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .back-button,
+  .refresh-button,
+  .cancel-button {
+    transition: none;
+  }
+}