@hsuite/native-connect-angular 1.0.0

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

@@ -0,0 +1,197 @@
+<ion-content>
+  <div class="modal-inner-content wallet-connection-modal">
+    <div class="header">
+      <div class="title">
+        <ion-button
+          *ngIf="currentStep() > 1 && currentStep() !== ConnectionStep.ConnectionProgress"
+          (click)="back()"
+          fill="clear"
+          class="back-btn"
+        >
+          <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
+        </ion-button>
+        <p>{{ stepTitle() }}</p>
+      </div>
+      <ion-button class="close-modal" (click)="dismiss()" fill="clear" [disabled]="isConnecting()">
+        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+      </ion-button>
+    </div>
+
+    <!-- Dynamic Step Progress Indicator -->
+    <div class="dao-header">
+      <div class="step-progress">
+        <!-- Dynamic steps based on selected protocol path -->
+        <ng-container *ngFor="let label of stepConfig().labels; let i = index">
+          <div class="step-indicator">
+            <div
+              class="step-circle"
+              [class.active]="displayStep() === i + 1"
+              [class.completed]="displayStep() > i + 1"
+              [attr.title]="label"
+            >
+              <ion-icon *ngIf="displayStep() > i + 1" name="checkmark"></ion-icon>
+              <span *ngIf="displayStep() <= i + 1">{{ i + 1 }}</span>
+            </div>
+            <!-- Step line between circles (not after the last one) -->
+            <div
+              class="step-line"
+              *ngIf="i < stepConfig().labels.length - 1"
+              [class.active]="displayStep() > i + 1"
+            ></div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+
+    <div class="form">
+      <!-- Step 1: Network Selection (Direct Selection - click advances to next step) -->
+      <div *ngIf="currentStep() === ConnectionStep.NetworkSelection" class="step-content">
+        <div class="membership-section">
+          <div class="explanation">
+            <h3>Choose Network</h3>
+            <p>Select the network you want to connect to.</p>
+          </div>
+
+          <div class="options-grid direct-select">
+            <ion-card
+              *ngFor="let network of networkOptions"
+              (click)="selectNetworkAndProceed(network.id)"
+              [class.selected]="selectedNetwork() === network.id"
+              button
+            >
+              <ion-card-content>
+                <div class="option-icon">
+                  <ion-icon [name]="network.icon"></ion-icon>
+                </div>
+                <h3>{{ network.name }}</h3>
+                <p>{{ network.description }}</p>
+                <ion-badge *ngIf="network.recommended" color="success">Recommended</ion-badge>
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 2: Protocol Selection (Direct Selection - click advances to next step) -->
+      <div *ngIf="currentStep() === ConnectionStep.ProtocolSelection" class="step-content">
+        <div class="membership-section">
+          <div class="explanation">
+            <h3>Connection Protocol</h3>
+            <p>Choose how you want to connect your wallet.</p>
+          </div>
+
+          <div class="options-list direct-select">
+            <ion-card
+              *ngFor="let protocol of protocolOptions()"
+              (click)="selectProtocolAndProceed(protocol.id)"
+              [class.selected]="selectedProtocol() === protocol.id"
+              button
+            >
+              <ion-card-content>
+                <div class="protocol-header">
+                  <div class="option-icon">
+                    <ion-icon [name]="protocol.icon"></ion-icon>
+                  </div>
+                  <div class="protocol-info">
+                    <h3>{{ protocol.name }}</h3>
+                    <p>{{ protocol.description }}</p>
+                  </div>
+                </div>
+
+                <ul class="feature-list">
+                  <li *ngFor="let feature of protocol.features">
+                    <ion-icon name="checkmark-circle" color="success"></ion-icon>
+                    <span>{{ feature }}</span>
+                  </li>
+                </ul>
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: Connection Method Selection (HSuite Native only) -->
+      <div *ngIf="currentStep() === ConnectionStep.ConnectionMethodSelection" class="step-content">
+        <hsuite-connection-method-step
+          [methods]="connectionMethodOptions()"
+          [isMobile]="isMobile()"
+          [selectedMethod]="selectedConnectionMethod()"
+          (methodSelected)="onConnectionMethodSelected($event)"
+        ></hsuite-connection-method-step>
+      </div>
+
+      <!-- Step 3 (WalletConnect path): Ledger Selection (Direct Selection - click initiates connection) -->
+      <div *ngIf="currentStep() === ConnectionStep.LedgerSelection" class="step-content">
+        <div class="membership-section">
+          <div class="explanation">
+            <h3>Choose Blockchain</h3>
+            <p>Select the blockchain ledger to connect with.</p>
+          </div>
+
+          <div class="options-grid direct-select">
+            <ion-card
+              *ngFor="let ledger of ledgerOptions"
+              (click)="selectLedgerAndConnect(ledger.id)"
+              [class.selected]="selectedLedger() === ledger.id"
+              button
+            >
+              <ion-card-content>
+                <div class="option-icon">
+                  <ion-icon [name]="ledger.icon"></ion-icon>
+                </div>
+                <h3>{{ ledger.name }}</h3>
+                <p>{{ ledger.description }}</p>
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 5: QR Pairing (Mobile P2P - Nostr-first, single QR) -->
+      <div *ngIf="currentStep() === ConnectionStep.QrPairing" class="step-content">
+        <hsuite-qr-pairing-step
+          [offerData]="pairingOffer()"
+          [appName]="appName"
+          [isLoading]="isGeneratingOffer()"
+          [isWaitingForWallet]="isWaitingForWallet()"
+          [isWaitingForApproval]="isWaitingForApproval()"
+          [errorMessage]="connectionError()"
+          (expired)="onQrExpired()"
+          (refreshRequested)="onQrRefresh()"
+          (cancelled)="back()"
+        ></hsuite-qr-pairing-step>
+      </div>
+
+      <!-- Step 6: Connection Progress -->
+      <div *ngIf="currentStep() === ConnectionStep.ConnectionProgress" class="step-content">
+        <div class="membership-section connection-progress">
+          <div *ngIf="isConnecting()" class="status-info">
+            <ion-spinner name="crescent"></ion-spinner>
+            <h3>Connecting...</h3>
+            <p *ngIf="selectedProtocol() === 'walletconnect'">
+              Please approve the connection in your wallet app or scan the QR code.
+            </p>
+            <p *ngIf="selectedProtocol() === 'hsuite-native'">Opening HSuite Wallet...</p>
+          </div>
+
+          <div *ngIf="connectionError()" class="membership-section">
+            <div class="error-section">
+              <ion-item lines="none">
+                <ion-icon slot="start" name="alert-circle-outline" color="danger"></ion-icon>
+                <ion-label>
+                  <h3>Connection Failed</h3>
+                  <p>{{ connectionError() }}</p>
+                </ion-label>
+              </ion-item>
+            </div>
+            <ion-button expand="block" fill="outline" (click)="back()" class="ion-margin-top">
+              Try Again
+            </ion-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer removed: All steps now use direct selection (click to proceed) -->
+  </div>
+</ion-content>