@hsuite/native-connect-angular 1.0.0 → 2.1.0

package/coverage/lib/transports/chrome-extension-transport.ts.html

@@ -808,7 +808,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-06-02T14:30:38.372Z
+                at 2026-06-10T09:00:36.812Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lib/transports/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-06-02T14:30:38.372Z
+                at 2026-06-10T09:00:36.812Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lib/utils/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-06-02T14:30:38.372Z
+                at 2026-06-10T09:00:36.812Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lib/utils/ledger-icons.util.ts.html

@@ -304,7 +304,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-06-02T14:30:38.372Z
+                at 2026-06-10T09:00:36.812Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/dist/fesm2022/hsuite-native-connect-angular.mjs

@@ -9314,6 +9314,15 @@ class WalletConnectionModalComponent {
      * WalletConnect project ID (required for WalletConnect)
      */
     projectId;
+    /**
+     * Pins the connection network and hides the network-selection step.
+     *
+     * When set to `'mainnet'` or `'testnet'`, the host dApp decides the network
+     * and the user is never shown the network picker — the modal opens directly
+     * on protocol selection. When omitted (default), the user chooses the network
+     * as the first step.
+     */
+    network;
     /**
      * App name for WalletConnect metadata
      */
@@ -9499,21 +9508,30 @@ class WalletConnectionModalComponent {
     stepConfig = computed(() => {
         const protocol = this.selectedProtocol();
         const method = this.selectedConnectionMethod();
+        let base;
         // Initial state: show 3 placeholder steps until protocol is selected
         if (!protocol) {
-            return { total: 3, labels: ['Network', 'Protocol', '...'] };
+            base = { total: 3, labels: ['Network', 'Protocol', '...'] };
         }
-        // HSuite Native path
-        if (protocol === 'hsuite-native') {
-            // If mobile QR is selected, we need 4 steps
-            if (method === 'mobile-qr') {
-                return { total: 4, labels: ['Network', 'Protocol', 'Method', 'Pair'] };
-            }
-            // Desktop connection is 3 steps (connects immediately after method selection)
-            return { total: 3, labels: ['Network', 'Protocol', 'Method'] };
+        else if (protocol === 'hsuite-native') {
+            // HSuite Native path
+            base =
+                method === 'mobile-qr'
+                    ? // Mobile QR needs 4 steps
+                        { total: 4, labels: ['Network', 'Protocol', 'Method', 'Pair'] }
+                    : // Desktop connects immediately after method selection (3 steps)
+                        { total: 3, labels: ['Network', 'Protocol', 'Method'] };
+        }
+        else {
+            // WalletConnect path: 4 steps
+            base = { total: 4, labels: ['Network', 'Protocol', 'Ledger', 'Connect'] };
         }
-        // WalletConnect path: 4 steps
-        return { total: 4, labels: ['Network', 'Protocol', 'Ledger', 'Connect'] };
+        // When the network is pinned by the host dApp the network step is never
+        // shown — drop it from the indicator so the numbering stays accurate.
+        if (this.network) {
+            return { total: base.total - 1, labels: base.labels.slice(1) };
+        }
+        return base;
     }, ...(ngDevMode ? [{ debugName: "stepConfig" }] : []));
     /**
      * Maps the internal ConnectionStep enum to display position (1-based).
@@ -9523,20 +9541,23 @@ class WalletConnectionModalComponent {
         const step = this.currentStep();
         // Protocol could be used for protocol-specific step mapping in the future
         const _protocol = this.selectedProtocol();
+        // When the network is pinned the network step is removed, so every
+        // subsequent step shifts down one position in the indicator.
+        const networkOffset = this.network ? 1 : 0;
         // Map internal step to display position based on protocol path
         switch (step) {
             case ConnectionStep.NetworkSelection:
                 return 1;
             case ConnectionStep.ProtocolSelection:
-                return 2;
+                return 2 - networkOffset;
             case ConnectionStep.ConnectionMethodSelection:
-                return 3;
+                return 3 - networkOffset;
             case ConnectionStep.LedgerSelection:
                 // WalletConnect ledger selection is step 3
-                return 3;
+                return 3 - networkOffset;
             case ConnectionStep.QrPairing:
                 // QR pairing is step 4 for both paths that use it
-                return 4;
+                return 4 - networkOffset;
             case ConnectionStep.ConnectionProgress:
                 // Connection progress is always the last step
                 return this.stepConfig().total;
@@ -9544,6 +9565,22 @@ class WalletConnectionModalComponent {
                 return 1;
         }
     }, ...(ngDevMode ? [{ debugName: "displayStep" }] : []));
+    /**
+     * Whether a back affordance should be offered for the current step.
+     * The first reachable step has no back target — that is protocol selection
+     * when the network is pinned, otherwise network selection. The connection
+     * progress step manages its own retry navigation instead.
+     */
+    canGoBack = computed(() => {
+        const step = this.currentStep();
+        if (step === ConnectionStep.ConnectionProgress) {
+            return false;
+        }
+        const firstStep = this.network
+            ? ConnectionStep.ProtocolSelection
+            : ConnectionStep.NetworkSelection;
+        return step > firstStep;
+    }, ...(ngDevMode ? [{ debugName: "canGoBack" }] : []));
     /**
      *
      * @param modalController
@@ -9557,6 +9594,19 @@ class WalletConnectionModalComponent {
             this.onMobileConnected();
         });
     }
+    /**
+     * Apply the pinned network (if any) before the first render.
+     *
+     * When the host dApp provides a {@link network}, lock the selection to it and
+     * skip straight to protocol selection so the user never sees — and cannot
+     * change — the network. With no input, the modal opens on network selection.
+     */
+    ngOnInit() {
+        if (this.network) {
+            this.selectedNetwork.set(this.network);
+            this.currentStep.set(ConnectionStep.ProtocolSelection);
+        }
+    }
     /**
      * Select a network option (internal, use selectNetworkAndProceed for UI)
      * @param networkId
@@ -9672,7 +9722,11 @@ class WalletConnectionModalComponent {
     back() {
         const currentStep = this.currentStep();
         if (currentStep === ConnectionStep.ProtocolSelection) {
-            this.currentStep.set(ConnectionStep.NetworkSelection);
+            // When the network is pinned, protocol selection is the first reachable
+            // step — there is no network step to return to.
+            if (!this.network) {
+                this.currentStep.set(ConnectionStep.NetworkSelection);
+            }
         }
         else if (currentStep === ConnectionStep.ConnectionMethodSelection) {
             this.currentStep.set(ConnectionStep.ProtocolSelection);
@@ -9869,13 +9923,15 @@ class WalletConnectionModalComponent {
             .__HSUITE_WALLET_EXTENSION__ === true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectionModalComponent, deps: [{ token: i1$1.ModalController }, { token: UnifiedWalletService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectionModalComponent, isStandalone: true, selector: "hsuite-wallet-connection-modal", inputs: { projectId: "projectId", appName: "appName", appDescription: "appDescription", walletUrl: "walletUrl" }, outputs: { connected: "connected" }, ngImport: i0, template: "<ion-content>\n  <div class=\"modal-inner-content wallet-connection-modal\">\n    <div class=\"header\">\n      <div class=\"title\">\n        <ion-button\n          *ngIf=\"currentStep() > 1 && currentStep() !== ConnectionStep.ConnectionProgress\"\n          (click)=\"back()\"\n          fill=\"clear\"\n          class=\"back-btn\"\n        >\n          <ion-icon slot=\"icon-only\" name=\"arrow-back-outline\"></ion-icon>\n        </ion-button>\n        <p>{{ stepTitle() }}</p>\n      </div>\n      <ion-button class=\"close-modal\" (click)=\"dismiss()\" fill=\"clear\" [disabled]=\"isConnecting()\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n    </div>\n\n    <!-- Dynamic Step Progress Indicator -->\n    <div class=\"dao-header\">\n      <div class=\"step-progress\">\n        <!-- Dynamic steps based on selected protocol path -->\n        <ng-container *ngFor=\"let label of stepConfig().labels; let i = index\">\n          <div class=\"step-indicator\">\n            <div\n              class=\"step-circle\"\n              [class.active]=\"displayStep() === i + 1\"\n              [class.completed]=\"displayStep() > i + 1\"\n              [attr.title]=\"label\"\n            >\n              <ion-icon *ngIf=\"displayStep() > i + 1\" name=\"checkmark\"></ion-icon>\n              <span *ngIf=\"displayStep() <= i + 1\">{{ i + 1 }}</span>\n            </div>\n            <!-- Step line between circles (not after the last one) -->\n            <div\n              class=\"step-line\"\n              *ngIf=\"i < stepConfig().labels.length - 1\"\n              [class.active]=\"displayStep() > i + 1\"\n            ></div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"form\">\n      <!-- Step 1: Network Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.NetworkSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Network</h3>\n            <p>Select the network you want to connect to.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let network of networkOptions\"\n              (click)=\"selectNetworkAndProceed(network.id)\"\n              [class.selected]=\"selectedNetwork() === network.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"network.icon\"></ion-icon>\n                </div>\n                <h3>{{ network.name }}</h3>\n                <p>{{ network.description }}</p>\n                <ion-badge *ngIf=\"network.recommended\" color=\"success\">Recommended</ion-badge>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 2: Protocol Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ProtocolSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Connection Protocol</h3>\n            <p>Choose how you want to connect your wallet.</p>\n          </div>\n\n          <div class=\"options-list direct-select\">\n            <ion-card\n              *ngFor=\"let protocol of protocolOptions()\"\n              (click)=\"selectProtocolAndProceed(protocol.id)\"\n              [class.selected]=\"selectedProtocol() === protocol.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"protocol-header\">\n                  <div class=\"option-icon\">\n                    <ion-icon [name]=\"protocol.icon\"></ion-icon>\n                  </div>\n                  <div class=\"protocol-info\">\n                    <h3>{{ protocol.name }}</h3>\n                    <p>{{ protocol.description }}</p>\n                  </div>\n                </div>\n\n                <ul class=\"feature-list\">\n                  <li *ngFor=\"let feature of protocol.features\">\n                    <ion-icon name=\"checkmark-circle\" color=\"success\"></ion-icon>\n                    <span>{{ feature }}</span>\n                  </li>\n                </ul>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 3: Connection Method Selection (HSuite Native only) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionMethodSelection\" class=\"step-content\">\n        <hsuite-connection-method-step\n          [methods]=\"connectionMethodOptions()\"\n          [isMobile]=\"isMobile()\"\n          [selectedMethod]=\"selectedConnectionMethod()\"\n          (methodSelected)=\"onConnectionMethodSelected($event)\"\n        ></hsuite-connection-method-step>\n      </div>\n\n      <!-- Step 3 (WalletConnect path): Ledger Selection (Direct Selection - click initiates connection) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.LedgerSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Blockchain</h3>\n            <p>Select the blockchain ledger to connect with.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let ledger of ledgerOptions\"\n              (click)=\"selectLedgerAndConnect(ledger.id)\"\n              [class.selected]=\"selectedLedger() === ledger.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"ledger.icon\"></ion-icon>\n                </div>\n                <h3>{{ ledger.name }}</h3>\n                <p>{{ ledger.description }}</p>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 5: QR Pairing (Mobile P2P - Nostr-first, single QR) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.QrPairing\" class=\"step-content\">\n        <hsuite-qr-pairing-step\n          [offerData]=\"pairingOffer()\"\n          [appName]=\"appName\"\n          [isLoading]=\"isGeneratingOffer()\"\n          [isWaitingForWallet]=\"isWaitingForWallet()\"\n          [isWaitingForApproval]=\"isWaitingForApproval()\"\n          [errorMessage]=\"connectionError()\"\n          (expired)=\"onQrExpired()\"\n          (refreshRequested)=\"onQrRefresh()\"\n          (cancelled)=\"back()\"\n        ></hsuite-qr-pairing-step>\n      </div>\n\n      <!-- Step 6: Connection Progress -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionProgress\" class=\"step-content\">\n        <div class=\"membership-section connection-progress\">\n          <div *ngIf=\"isConnecting()\" class=\"status-info\">\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            <h3>Connecting...</h3>\n            <p *ngIf=\"selectedProtocol() === 'walletconnect'\">\n              Please approve the connection in your wallet app or scan the QR code.\n            </p>\n            <p *ngIf=\"selectedProtocol() === 'hsuite-native'\">Opening HSuite Wallet...</p>\n          </div>\n\n          <div *ngIf=\"connectionError()\" class=\"membership-section\">\n            <div class=\"error-section\">\n              <ion-item lines=\"none\">\n                <ion-icon slot=\"start\" name=\"alert-circle-outline\" color=\"danger\"></ion-icon>\n                <ion-label>\n                  <h3>Connection Failed</h3>\n                  <p>{{ connectionError() }}</p>\n                </ion-label>\n              </ion-item>\n            </div>\n            <ion-button expand=\"block\" fill=\"outline\" (click)=\"back()\" class=\"ion-margin-top\">\n              Try Again\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer removed: All steps now use direct selection (click to proceed) -->\n  </div>\n</ion-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}ion-content{--background: transparent;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;height:100vh;width:100%;display:flex!important;align-items:center!important;justify-content:center!important}ion-content::part(scroll){display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}.modal-inner-content{width:90%;max-width:600px;max-height:80vh;background:var(--glass-background, rgba(var(--ion-color-dark-rgb), .95));border-radius:var(--border-radius-xl, 16px);padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);border:1px solid var(--border-flat, rgba(var(--ion-color-light-rgb), .1));overflow:hidden;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg, 16px) var(--space-xl, 20px);background:transparent;flex-shrink:0}.header .title{display:flex;align-items:center;gap:var(--space-sm, 8px);flex:1}.header .title p{margin:0;font-size:var(--font-size-2xl, 24px);font-weight:var(--font-weight-bold, 700);color:var(--ion-text-color);line-height:1.2}.header .back-btn{--padding-start: 8px;--padding-end: 8px;margin:0}.header .back-btn ion-icon{font-size:22px;color:var(--ion-color-primary)}.header .close-modal{--padding-start: 8px;--padding-end: 8px;margin:0;cursor:pointer}.header .close-modal ion-icon{font-size:24px;color:var(--ion-text-color)}.header .close-modal:hover:not(:disabled){transform:scale(1.05)}.header .close-modal:active:not(:disabled){transform:scale(.95)}.form{flex:1;overflow-y:auto;padding:0 var(--space-xl, 20px) var(--space-xl, 20px) var(--space-xl, 20px);background:transparent}.form::-webkit-scrollbar{width:8px}.form::-webkit-scrollbar-track{background:var(--surface-flat, rgba(var(--ion-color-light-rgb), .05));border-radius:4px}.form::-webkit-scrollbar-thumb{background:rgba(var(--ion-color-light-rgb),.2);border-radius:4px}.form::-webkit-scrollbar-thumb:hover{background:rgba(var(--ion-color-light-rgb),.3)}@media(min-width:768px){.modal-inner-content{width:80%;max-width:700px;border-radius:20px}.header{padding:20px 24px}.dao-header{margin:0 24px 24px}.form{padding:0 24px 24px}}@media(max-width:480px){.modal-inner-content{width:95%;max-height:85vh}.header{padding:14px 16px}.dao-header{margin:0 16px 20px}.form{padding:0 16px 16px}}.dao-header{margin:0 var(--space-xl, 20px) var(--token-space-6, 24px) var(--space-xl, 20px);padding:var(--token-space-4, 16px);background:var(--token-surface-2, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);box-shadow:var(--token-elevation-1, var(--shadow-sm));flex-shrink:0;animation:fadeIn var(--token-transition-slow, .3s) ease}.dao-header .step-progress{display:flex;align-items:center;justify-content:center}.dao-header .step-progress .step-indicator{display:flex;align-items:center}.dao-header .step-progress .step-indicator .step-circle{width:36px;height:36px;border-radius:var(--token-radius-full, 50%);display:flex;align-items:center;justify-content:center;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .1));color:var(--ion-text-color);font-weight:var(--token-font-weight-semibold, 600);font-size:var(--token-font-size-2, 14px);border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));transition:all var(--token-transition-slow, .3s) var(--token-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.dao-header .step-progress .step-indicator .step-circle.active{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-color:var(--ion-color-primary);transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.dao-header .step-progress .step-indicator .step-circle.completed{background:var(--ion-color-success);color:var(--ion-color-success-contrast);border-color:var(--ion-color-success);transform:scale(1.05)}.dao-header .step-progress .step-indicator .step-circle:hover:not(.active):not(.completed){transform:scale(1.05);background:rgba(var(--ion-color-light-rgb),.15)}.dao-header .step-progress .step-indicator .step-circle ion-icon{font-size:20px}.dao-header .step-progress .step-indicator .step-line{width:40px;height:var(--token-border-width-2, 2px);background:var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));margin:0 var(--token-space-2, 8px);transition:all var(--token-transition-slow, .3s) ease}.dao-header .step-progress .step-indicator .step-line.active{background:var(--ion-color-success);box-shadow:0 0 8px rgba(var(--ion-color-success-rgb),.5)}.membership-section{margin-bottom:var(--token-space-6, 24px);animation:fadeIn var(--token-transition-slow, .3s) ease}.membership-section .explanation{margin-bottom:var(--token-space-4, 16px)}.membership-section .explanation h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-text-color);line-height:var(--token-line-height-tight, 1.3);margin:0 0 var(--token-space-2, 8px) 0}.membership-section .explanation p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);line-height:var(--token-line-height-normal, 1.4);margin:0}.membership-section .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--token-space-3, 12px)}.membership-section .options-grid ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-grid ion-card:hover{transform:translateY(-2px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-grid ion-card:active{transform:translateY(0)}.membership-section .options-grid ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-grid ion-card ion-card-content{text-align:center;padding:var(--token-space-5, 20px)}.membership-section .options-grid ion-card ion-card-content .option-icon{margin-bottom:var(--token-space-3, 12px)}.membership-section .options-grid ion-card ion-card-content .option-icon ion-icon{font-size:40px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-grid ion-card ion-card-content h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 6px) 0;color:var(--ion-text-color)}.membership-section .options-grid ion-card ion-card-content p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0 0 var(--token-space-2, 8px) 0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-grid ion-card:hover .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section .options-list{display:flex;flex-direction:column;gap:var(--token-space-3, 12px)}.membership-section .options-list ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-list ion-card:hover{transform:translate(4px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-list ion-card:active{transform:translate(2px)}.membership-section .options-list ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-list ion-card ion-card-content{padding:var(--token-space-4, 16px)}.membership-section .options-list ion-card ion-card-content .protocol-header{display:flex;align-items:center;gap:var(--token-space-3, 12px);margin-bottom:var(--token-space-3, 12px)}.membership-section .options-list ion-card ion-card-content .protocol-header .option-icon ion-icon{font-size:36px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info{flex:1;min-width:0}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-1, 4px) 0;color:var(--ion-text-color)}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-list ion-card ion-card-content .feature-list{list-style:none;padding:0;margin:0}.membership-section .options-list ion-card ion-card-content .feature-list li{display:flex;align-items:center;gap:var(--token-space-2, 8px);padding:var(--token-space-1, 4px) 0;font-size:var(--token-font-size-1, 13px);color:var(--ion-text-color);line-height:var(--token-line-height-normal, 1.4)}.membership-section .options-list ion-card ion-card-content .feature-list li ion-icon{font-size:var(--token-space-4, 16px);flex-shrink:0;color:var(--ion-color-success)}.membership-section .options-list ion-card:hover .protocol-header .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section.connection-progress{display:flex;justify-content:center;align-items:center;min-height:200px}.membership-section.connection-progress .status-info{text-align:center;padding:var(--token-space-6, 24px)}.membership-section.connection-progress .status-info ion-spinner{font-size:48px;margin-bottom:var(--token-space-4, 16px);color:var(--ion-color-primary)}.membership-section.connection-progress .status-info h3{font-size:var(--token-font-size-4, 18px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 8px) 0;color:var(--ion-text-color)}.membership-section.connection-progress .status-info p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);margin:0;max-width:300px;line-height:var(--token-line-height-normal, 1.4)}.membership-section .error-section{padding:var(--token-space-3, 12px);background:rgba(var(--ion-color-danger-rgb),.1);border:1px solid rgba(var(--ion-color-danger-rgb),.2);border-radius:var(--token-radius-2, 8px)}.membership-section .error-section ion-item{--background: transparent;--padding-start: 0;--inner-padding-end: 0}.membership-section .error-section ion-item ion-icon{font-size:var(--token-space-6, 24px)}.membership-section .error-section ion-item ion-label h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-color-danger);margin:0 0 var(--token-space-1, 4px) 0}.membership-section .error-section ion-item ion-label p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.step-content{animation:stepFadeIn var(--token-transition-normal, .25s) var(--token-ease-out, cubic-bezier(0, 0, .2, 1))}.direct-select ion-card{position:relative;overflow:hidden}.direct-select ion-card:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%) translate(0);width:0;height:0;border-left:6px solid var(--ion-color-primary);border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0;transition:all var(--token-transition-fast, .15s) ease}.direct-select ion-card:hover:after{opacity:.6;transform:translateY(-50%) translate(4px)}.direct-select ion-card:hover{border-color:rgba(var(--ion-color-primary-rgb),.4)}.direct-select ion-card:hover .option-icon ion-icon{color:var(--ion-color-primary)}.direct-select ion-card:active{transform:scale(.98);background:rgba(var(--ion-color-primary-rgb),.15)!important}.direct-select.options-grid ion-card:after{right:8px;top:16px;transform:translateY(0) translate(0)}.direct-select.options-grid ion-card:hover:after{transform:translateY(0) translate(4px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),.4)}70%{box-shadow:0 0 0 8px rgba(var(--ion-color-primary-rgb),0)}to{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),0)}}.step-progress .step-indicator .step-circle.active{animation:stepPulse 1.5s ease-out infinite}@media(max-width:768px){.membership-section .options-grid{grid-template-columns:1fr}.dao-header .step-progress .step-indicator .step-circle{width:28px;height:28px;font-size:12px}.dao-header .step-progress .step-indicator .step-line{width:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes fadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%,to{box-shadow:none}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ConnectionMethodStepComponent, selector: "hsuite-connection-method-step", inputs: ["methods", "isMobile", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: QrPairingStepComponent, selector: "hsuite-qr-pairing-step", inputs: ["offerData", "appName", "isLoading", "isWaitingForWallet", "isWaitingForApproval", "errorMessage", "expirySeconds"], outputs: ["expired", "connected", "cancelled", "refreshRequested"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectionModalComponent, isStandalone: true, selector: "hsuite-wallet-connection-modal", inputs: { projectId: "projectId", network: "network", appName: "appName", appDescription: "appDescription", walletUrl: "walletUrl" }, outputs: { connected: "connected" }, ngImport: i0, template: "<ion-content>\n  <div class=\"modal-inner-content wallet-connection-modal\">\n    <div class=\"header\">\n      <div class=\"title\">\n        <ion-button *ngIf=\"canGoBack()\" (click)=\"back()\" fill=\"clear\" class=\"back-btn\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-back-outline\"></ion-icon>\n        </ion-button>\n        <p>{{ stepTitle() }}</p>\n      </div>\n      <ion-button class=\"close-modal\" (click)=\"dismiss()\" fill=\"clear\" [disabled]=\"isConnecting()\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n    </div>\n\n    <!-- Dynamic Step Progress Indicator -->\n    <div class=\"dao-header\">\n      <div class=\"step-progress\">\n        <!-- Dynamic steps based on selected protocol path -->\n        <ng-container *ngFor=\"let label of stepConfig().labels; let i = index\">\n          <div class=\"step-indicator\">\n            <div\n              class=\"step-circle\"\n              [class.active]=\"displayStep() === i + 1\"\n              [class.completed]=\"displayStep() > i + 1\"\n              [attr.title]=\"label\"\n            >\n              <ion-icon *ngIf=\"displayStep() > i + 1\" name=\"checkmark\"></ion-icon>\n              <span *ngIf=\"displayStep() <= i + 1\">{{ i + 1 }}</span>\n            </div>\n            <!-- Step line between circles (not after the last one) -->\n            <div\n              class=\"step-line\"\n              *ngIf=\"i < stepConfig().labels.length - 1\"\n              [class.active]=\"displayStep() > i + 1\"\n            ></div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"form\">\n      <!-- Step 1: Network Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.NetworkSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Network</h3>\n            <p>Select the network you want to connect to.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let network of networkOptions\"\n              (click)=\"selectNetworkAndProceed(network.id)\"\n              [class.selected]=\"selectedNetwork() === network.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"network.icon\"></ion-icon>\n                </div>\n                <h3>{{ network.name }}</h3>\n                <p>{{ network.description }}</p>\n                <ion-badge *ngIf=\"network.recommended\" color=\"success\">Recommended</ion-badge>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 2: Protocol Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ProtocolSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Connection Protocol</h3>\n            <p>Choose how you want to connect your wallet.</p>\n          </div>\n\n          <div class=\"options-list direct-select\">\n            <ion-card\n              *ngFor=\"let protocol of protocolOptions()\"\n              (click)=\"selectProtocolAndProceed(protocol.id)\"\n              [class.selected]=\"selectedProtocol() === protocol.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"protocol-header\">\n                  <div class=\"option-icon\">\n                    <ion-icon [name]=\"protocol.icon\"></ion-icon>\n                  </div>\n                  <div class=\"protocol-info\">\n                    <h3>{{ protocol.name }}</h3>\n                    <p>{{ protocol.description }}</p>\n                  </div>\n                </div>\n\n                <ul class=\"feature-list\">\n                  <li *ngFor=\"let feature of protocol.features\">\n                    <ion-icon name=\"checkmark-circle\" color=\"success\"></ion-icon>\n                    <span>{{ feature }}</span>\n                  </li>\n                </ul>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 3: Connection Method Selection (HSuite Native only) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionMethodSelection\" class=\"step-content\">\n        <hsuite-connection-method-step\n          [methods]=\"connectionMethodOptions()\"\n          [isMobile]=\"isMobile()\"\n          [selectedMethod]=\"selectedConnectionMethod()\"\n          (methodSelected)=\"onConnectionMethodSelected($event)\"\n        ></hsuite-connection-method-step>\n      </div>\n\n      <!-- Step 3 (WalletConnect path): Ledger Selection (Direct Selection - click initiates connection) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.LedgerSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Blockchain</h3>\n            <p>Select the blockchain ledger to connect with.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let ledger of ledgerOptions\"\n              (click)=\"selectLedgerAndConnect(ledger.id)\"\n              [class.selected]=\"selectedLedger() === ledger.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"ledger.icon\"></ion-icon>\n                </div>\n                <h3>{{ ledger.name }}</h3>\n                <p>{{ ledger.description }}</p>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 5: QR Pairing (Mobile P2P - Nostr-first, single QR) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.QrPairing\" class=\"step-content\">\n        <hsuite-qr-pairing-step\n          [offerData]=\"pairingOffer()\"\n          [appName]=\"appName\"\n          [isLoading]=\"isGeneratingOffer()\"\n          [isWaitingForWallet]=\"isWaitingForWallet()\"\n          [isWaitingForApproval]=\"isWaitingForApproval()\"\n          [errorMessage]=\"connectionError()\"\n          (expired)=\"onQrExpired()\"\n          (refreshRequested)=\"onQrRefresh()\"\n          (cancelled)=\"back()\"\n        ></hsuite-qr-pairing-step>\n      </div>\n\n      <!-- Step 6: Connection Progress -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionProgress\" class=\"step-content\">\n        <div class=\"membership-section connection-progress\">\n          <div *ngIf=\"isConnecting()\" class=\"status-info\">\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            <h3>Connecting...</h3>\n            <p *ngIf=\"selectedProtocol() === 'walletconnect'\">\n              Please approve the connection in your wallet app or scan the QR code.\n            </p>\n            <p *ngIf=\"selectedProtocol() === 'hsuite-native'\">Opening HSuite Wallet...</p>\n          </div>\n\n          <div *ngIf=\"connectionError()\" class=\"membership-section\">\n            <div class=\"error-section\">\n              <ion-item lines=\"none\">\n                <ion-icon slot=\"start\" name=\"alert-circle-outline\" color=\"danger\"></ion-icon>\n                <ion-label>\n                  <h3>Connection Failed</h3>\n                  <p>{{ connectionError() }}</p>\n                </ion-label>\n              </ion-item>\n            </div>\n            <ion-button expand=\"block\" fill=\"outline\" (click)=\"back()\" class=\"ion-margin-top\">\n              Try Again\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer removed: All steps now use direct selection (click to proceed) -->\n  </div>\n</ion-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}ion-content{--background: transparent;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;height:100vh;width:100%;display:flex!important;align-items:center!important;justify-content:center!important}ion-content::part(scroll){display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}.modal-inner-content{width:90%;max-width:600px;max-height:80vh;background:var(--glass-background, rgba(var(--ion-color-dark-rgb), .95));border-radius:var(--border-radius-xl, 16px);padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);border:1px solid var(--border-flat, rgba(var(--ion-color-light-rgb), .1));overflow:hidden;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg, 16px) var(--space-xl, 20px);background:transparent;flex-shrink:0}.header .title{display:flex;align-items:center;gap:var(--space-sm, 8px);flex:1}.header .title p{margin:0;font-size:var(--font-size-2xl, 24px);font-weight:var(--font-weight-bold, 700);color:var(--ion-text-color);line-height:1.2}.header .back-btn{--padding-start: 8px;--padding-end: 8px;margin:0}.header .back-btn ion-icon{font-size:22px;color:var(--ion-color-primary)}.header .close-modal{--padding-start: 8px;--padding-end: 8px;margin:0;cursor:pointer}.header .close-modal ion-icon{font-size:24px;color:var(--ion-text-color)}.header .close-modal:hover:not(:disabled){transform:scale(1.05)}.header .close-modal:active:not(:disabled){transform:scale(.95)}.form{flex:1;overflow-y:auto;padding:0 var(--space-xl, 20px) var(--space-xl, 20px) var(--space-xl, 20px);background:transparent}.form::-webkit-scrollbar{width:8px}.form::-webkit-scrollbar-track{background:var(--surface-flat, rgba(var(--ion-color-light-rgb), .05));border-radius:4px}.form::-webkit-scrollbar-thumb{background:rgba(var(--ion-color-light-rgb),.2);border-radius:4px}.form::-webkit-scrollbar-thumb:hover{background:rgba(var(--ion-color-light-rgb),.3)}@media(min-width:768px){.modal-inner-content{width:80%;max-width:700px;border-radius:20px}.header{padding:20px 24px}.dao-header{margin:0 24px 24px}.form{padding:0 24px 24px}}@media(max-width:480px){.modal-inner-content{width:95%;max-height:85vh}.header{padding:14px 16px}.dao-header{margin:0 16px 20px}.form{padding:0 16px 16px}}.dao-header{margin:0 var(--space-xl, 20px) var(--token-space-6, 24px) var(--space-xl, 20px);padding:var(--token-space-4, 16px);background:var(--token-surface-2, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);box-shadow:var(--token-elevation-1, var(--shadow-sm));flex-shrink:0;animation:fadeIn var(--token-transition-slow, .3s) ease}.dao-header .step-progress{display:flex;align-items:center;justify-content:center}.dao-header .step-progress .step-indicator{display:flex;align-items:center}.dao-header .step-progress .step-indicator .step-circle{width:36px;height:36px;border-radius:var(--token-radius-full, 50%);display:flex;align-items:center;justify-content:center;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .1));color:var(--ion-text-color);font-weight:var(--token-font-weight-semibold, 600);font-size:var(--token-font-size-2, 14px);border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));transition:all var(--token-transition-slow, .3s) var(--token-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.dao-header .step-progress .step-indicator .step-circle.active{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-color:var(--ion-color-primary);transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.dao-header .step-progress .step-indicator .step-circle.completed{background:var(--ion-color-success);color:var(--ion-color-success-contrast);border-color:var(--ion-color-success);transform:scale(1.05)}.dao-header .step-progress .step-indicator .step-circle:hover:not(.active):not(.completed){transform:scale(1.05);background:rgba(var(--ion-color-light-rgb),.15)}.dao-header .step-progress .step-indicator .step-circle ion-icon{font-size:20px}.dao-header .step-progress .step-indicator .step-line{width:40px;height:var(--token-border-width-2, 2px);background:var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));margin:0 var(--token-space-2, 8px);transition:all var(--token-transition-slow, .3s) ease}.dao-header .step-progress .step-indicator .step-line.active{background:var(--ion-color-success);box-shadow:0 0 8px rgba(var(--ion-color-success-rgb),.5)}.membership-section{margin-bottom:var(--token-space-6, 24px);animation:fadeIn var(--token-transition-slow, .3s) ease}.membership-section .explanation{margin-bottom:var(--token-space-4, 16px)}.membership-section .explanation h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-text-color);line-height:var(--token-line-height-tight, 1.3);margin:0 0 var(--token-space-2, 8px) 0}.membership-section .explanation p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);line-height:var(--token-line-height-normal, 1.4);margin:0}.membership-section .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--token-space-3, 12px)}.membership-section .options-grid ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-grid ion-card:hover{transform:translateY(-2px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-grid ion-card:active{transform:translateY(0)}.membership-section .options-grid ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-grid ion-card ion-card-content{text-align:center;padding:var(--token-space-5, 20px)}.membership-section .options-grid ion-card ion-card-content .option-icon{margin-bottom:var(--token-space-3, 12px)}.membership-section .options-grid ion-card ion-card-content .option-icon ion-icon{font-size:40px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-grid ion-card ion-card-content h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 6px) 0;color:var(--ion-text-color)}.membership-section .options-grid ion-card ion-card-content p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0 0 var(--token-space-2, 8px) 0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-grid ion-card:hover .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section .options-list{display:flex;flex-direction:column;gap:var(--token-space-3, 12px)}.membership-section .options-list ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-list ion-card:hover{transform:translate(4px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-list ion-card:active{transform:translate(2px)}.membership-section .options-list ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-list ion-card ion-card-content{padding:var(--token-space-4, 16px)}.membership-section .options-list ion-card ion-card-content .protocol-header{display:flex;align-items:center;gap:var(--token-space-3, 12px);margin-bottom:var(--token-space-3, 12px)}.membership-section .options-list ion-card ion-card-content .protocol-header .option-icon ion-icon{font-size:36px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info{flex:1;min-width:0}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-1, 4px) 0;color:var(--ion-text-color)}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-list ion-card ion-card-content .feature-list{list-style:none;padding:0;margin:0}.membership-section .options-list ion-card ion-card-content .feature-list li{display:flex;align-items:center;gap:var(--token-space-2, 8px);padding:var(--token-space-1, 4px) 0;font-size:var(--token-font-size-1, 13px);color:var(--ion-text-color);line-height:var(--token-line-height-normal, 1.4)}.membership-section .options-list ion-card ion-card-content .feature-list li ion-icon{font-size:var(--token-space-4, 16px);flex-shrink:0;color:var(--ion-color-success)}.membership-section .options-list ion-card:hover .protocol-header .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section.connection-progress{display:flex;justify-content:center;align-items:center;min-height:200px}.membership-section.connection-progress .status-info{text-align:center;padding:var(--token-space-6, 24px)}.membership-section.connection-progress .status-info ion-spinner{font-size:48px;margin-bottom:var(--token-space-4, 16px);color:var(--ion-color-primary)}.membership-section.connection-progress .status-info h3{font-size:var(--token-font-size-4, 18px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 8px) 0;color:var(--ion-text-color)}.membership-section.connection-progress .status-info p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);margin:0;max-width:300px;line-height:var(--token-line-height-normal, 1.4)}.membership-section .error-section{padding:var(--token-space-3, 12px);background:rgba(var(--ion-color-danger-rgb),.1);border:1px solid rgba(var(--ion-color-danger-rgb),.2);border-radius:var(--token-radius-2, 8px)}.membership-section .error-section ion-item{--background: transparent;--padding-start: 0;--inner-padding-end: 0}.membership-section .error-section ion-item ion-icon{font-size:var(--token-space-6, 24px)}.membership-section .error-section ion-item ion-label h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-color-danger);margin:0 0 var(--token-space-1, 4px) 0}.membership-section .error-section ion-item ion-label p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.step-content{animation:stepFadeIn var(--token-transition-normal, .25s) var(--token-ease-out, cubic-bezier(0, 0, .2, 1))}.direct-select ion-card{position:relative;overflow:hidden}.direct-select ion-card:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%) translate(0);width:0;height:0;border-left:6px solid var(--ion-color-primary);border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0;transition:all var(--token-transition-fast, .15s) ease}.direct-select ion-card:hover:after{opacity:.6;transform:translateY(-50%) translate(4px)}.direct-select ion-card:hover{border-color:rgba(var(--ion-color-primary-rgb),.4)}.direct-select ion-card:hover .option-icon ion-icon{color:var(--ion-color-primary)}.direct-select ion-card:active{transform:scale(.98);background:rgba(var(--ion-color-primary-rgb),.15)!important}.direct-select.options-grid ion-card:after{right:8px;top:16px;transform:translateY(0) translate(0)}.direct-select.options-grid ion-card:hover:after{transform:translateY(0) translate(4px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),.4)}70%{box-shadow:0 0 0 8px rgba(var(--ion-color-primary-rgb),0)}to{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),0)}}.step-progress .step-indicator .step-circle.active{animation:stepPulse 1.5s ease-out infinite}@media(max-width:768px){.membership-section .options-grid{grid-template-columns:1fr}.dao-header .step-progress .step-indicator .step-circle{width:28px;height:28px;font-size:12px}.dao-header .step-progress .step-indicator .step-line{width:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes fadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%,to{box-shadow:none}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: ConnectionMethodStepComponent, selector: "hsuite-connection-method-step", inputs: ["methods", "isMobile", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: QrPairingStepComponent, selector: "hsuite-qr-pairing-step", inputs: ["offerData", "appName", "isLoading", "isWaitingForWallet", "isWaitingForApproval", "errorMessage", "expirySeconds"], outputs: ["expired", "connected", "cancelled", "refreshRequested"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectionModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hsuite-wallet-connection-modal', standalone: true, imports: [CommonModule, IonicModule, ConnectionMethodStepComponent, QrPairingStepComponent], template: "<ion-content>\n  <div class=\"modal-inner-content wallet-connection-modal\">\n    <div class=\"header\">\n      <div class=\"title\">\n        <ion-button\n          *ngIf=\"currentStep() > 1 && currentStep() !== ConnectionStep.ConnectionProgress\"\n          (click)=\"back()\"\n          fill=\"clear\"\n          class=\"back-btn\"\n        >\n          <ion-icon slot=\"icon-only\" name=\"arrow-back-outline\"></ion-icon>\n        </ion-button>\n        <p>{{ stepTitle() }}</p>\n      </div>\n      <ion-button class=\"close-modal\" (click)=\"dismiss()\" fill=\"clear\" [disabled]=\"isConnecting()\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n    </div>\n\n    <!-- Dynamic Step Progress Indicator -->\n    <div class=\"dao-header\">\n      <div class=\"step-progress\">\n        <!-- Dynamic steps based on selected protocol path -->\n        <ng-container *ngFor=\"let label of stepConfig().labels; let i = index\">\n          <div class=\"step-indicator\">\n            <div\n              class=\"step-circle\"\n              [class.active]=\"displayStep() === i + 1\"\n              [class.completed]=\"displayStep() > i + 1\"\n              [attr.title]=\"label\"\n            >\n              <ion-icon *ngIf=\"displayStep() > i + 1\" name=\"checkmark\"></ion-icon>\n              <span *ngIf=\"displayStep() <= i + 1\">{{ i + 1 }}</span>\n            </div>\n            <!-- Step line between circles (not after the last one) -->\n            <div\n              class=\"step-line\"\n              *ngIf=\"i < stepConfig().labels.length - 1\"\n              [class.active]=\"displayStep() > i + 1\"\n            ></div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"form\">\n      <!-- Step 1: Network Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.NetworkSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Network</h3>\n            <p>Select the network you want to connect to.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let network of networkOptions\"\n              (click)=\"selectNetworkAndProceed(network.id)\"\n              [class.selected]=\"selectedNetwork() === network.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"network.icon\"></ion-icon>\n                </div>\n                <h3>{{ network.name }}</h3>\n                <p>{{ network.description }}</p>\n                <ion-badge *ngIf=\"network.recommended\" color=\"success\">Recommended</ion-badge>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 2: Protocol Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ProtocolSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Connection Protocol</h3>\n            <p>Choose how you want to connect your wallet.</p>\n          </div>\n\n          <div class=\"options-list direct-select\">\n            <ion-card\n              *ngFor=\"let protocol of protocolOptions()\"\n              (click)=\"selectProtocolAndProceed(protocol.id)\"\n              [class.selected]=\"selectedProtocol() === protocol.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"protocol-header\">\n                  <div class=\"option-icon\">\n                    <ion-icon [name]=\"protocol.icon\"></ion-icon>\n                  </div>\n                  <div class=\"protocol-info\">\n                    <h3>{{ protocol.name }}</h3>\n                    <p>{{ protocol.description }}</p>\n                  </div>\n                </div>\n\n                <ul class=\"feature-list\">\n                  <li *ngFor=\"let feature of protocol.features\">\n                    <ion-icon name=\"checkmark-circle\" color=\"success\"></ion-icon>\n                    <span>{{ feature }}</span>\n                  </li>\n                </ul>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 3: Connection Method Selection (HSuite Native only) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionMethodSelection\" class=\"step-content\">\n        <hsuite-connection-method-step\n          [methods]=\"connectionMethodOptions()\"\n          [isMobile]=\"isMobile()\"\n          [selectedMethod]=\"selectedConnectionMethod()\"\n          (methodSelected)=\"onConnectionMethodSelected($event)\"\n        ></hsuite-connection-method-step>\n      </div>\n\n      <!-- Step 3 (WalletConnect path): Ledger Selection (Direct Selection - click initiates connection) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.LedgerSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Blockchain</h3>\n            <p>Select the blockchain ledger to connect with.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let ledger of ledgerOptions\"\n              (click)=\"selectLedgerAndConnect(ledger.id)\"\n              [class.selected]=\"selectedLedger() === ledger.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"ledger.icon\"></ion-icon>\n                </div>\n                <h3>{{ ledger.name }}</h3>\n                <p>{{ ledger.description }}</p>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 5: QR Pairing (Mobile P2P - Nostr-first, single QR) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.QrPairing\" class=\"step-content\">\n        <hsuite-qr-pairing-step\n          [offerData]=\"pairingOffer()\"\n          [appName]=\"appName\"\n          [isLoading]=\"isGeneratingOffer()\"\n          [isWaitingForWallet]=\"isWaitingForWallet()\"\n          [isWaitingForApproval]=\"isWaitingForApproval()\"\n          [errorMessage]=\"connectionError()\"\n          (expired)=\"onQrExpired()\"\n          (refreshRequested)=\"onQrRefresh()\"\n          (cancelled)=\"back()\"\n        ></hsuite-qr-pairing-step>\n      </div>\n\n      <!-- Step 6: Connection Progress -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionProgress\" class=\"step-content\">\n        <div class=\"membership-section connection-progress\">\n          <div *ngIf=\"isConnecting()\" class=\"status-info\">\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            <h3>Connecting...</h3>\n            <p *ngIf=\"selectedProtocol() === 'walletconnect'\">\n              Please approve the connection in your wallet app or scan the QR code.\n            </p>\n            <p *ngIf=\"selectedProtocol() === 'hsuite-native'\">Opening HSuite Wallet...</p>\n          </div>\n\n          <div *ngIf=\"connectionError()\" class=\"membership-section\">\n            <div class=\"error-section\">\n              <ion-item lines=\"none\">\n                <ion-icon slot=\"start\" name=\"alert-circle-outline\" color=\"danger\"></ion-icon>\n                <ion-label>\n                  <h3>Connection Failed</h3>\n                  <p>{{ connectionError() }}</p>\n                </ion-label>\n              </ion-item>\n            </div>\n            <ion-button expand=\"block\" fill=\"outline\" (click)=\"back()\" class=\"ion-margin-top\">\n              Try Again\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer removed: All steps now use direct selection (click to proceed) -->\n  </div>\n</ion-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}ion-content{--background: transparent;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;height:100vh;width:100%;display:flex!important;align-items:center!important;justify-content:center!important}ion-content::part(scroll){display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}.modal-inner-content{width:90%;max-width:600px;max-height:80vh;background:var(--glass-background, rgba(var(--ion-color-dark-rgb), .95));border-radius:var(--border-radius-xl, 16px);padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);border:1px solid var(--border-flat, rgba(var(--ion-color-light-rgb), .1));overflow:hidden;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg, 16px) var(--space-xl, 20px);background:transparent;flex-shrink:0}.header .title{display:flex;align-items:center;gap:var(--space-sm, 8px);flex:1}.header .title p{margin:0;font-size:var(--font-size-2xl, 24px);font-weight:var(--font-weight-bold, 700);color:var(--ion-text-color);line-height:1.2}.header .back-btn{--padding-start: 8px;--padding-end: 8px;margin:0}.header .back-btn ion-icon{font-size:22px;color:var(--ion-color-primary)}.header .close-modal{--padding-start: 8px;--padding-end: 8px;margin:0;cursor:pointer}.header .close-modal ion-icon{font-size:24px;color:var(--ion-text-color)}.header .close-modal:hover:not(:disabled){transform:scale(1.05)}.header .close-modal:active:not(:disabled){transform:scale(.95)}.form{flex:1;overflow-y:auto;padding:0 var(--space-xl, 20px) var(--space-xl, 20px) var(--space-xl, 20px);background:transparent}.form::-webkit-scrollbar{width:8px}.form::-webkit-scrollbar-track{background:var(--surface-flat, rgba(var(--ion-color-light-rgb), .05));border-radius:4px}.form::-webkit-scrollbar-thumb{background:rgba(var(--ion-color-light-rgb),.2);border-radius:4px}.form::-webkit-scrollbar-thumb:hover{background:rgba(var(--ion-color-light-rgb),.3)}@media(min-width:768px){.modal-inner-content{width:80%;max-width:700px;border-radius:20px}.header{padding:20px 24px}.dao-header{margin:0 24px 24px}.form{padding:0 24px 24px}}@media(max-width:480px){.modal-inner-content{width:95%;max-height:85vh}.header{padding:14px 16px}.dao-header{margin:0 16px 20px}.form{padding:0 16px 16px}}.dao-header{margin:0 var(--space-xl, 20px) var(--token-space-6, 24px) var(--space-xl, 20px);padding:var(--token-space-4, 16px);background:var(--token-surface-2, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);box-shadow:var(--token-elevation-1, var(--shadow-sm));flex-shrink:0;animation:fadeIn var(--token-transition-slow, .3s) ease}.dao-header .step-progress{display:flex;align-items:center;justify-content:center}.dao-header .step-progress .step-indicator{display:flex;align-items:center}.dao-header .step-progress .step-indicator .step-circle{width:36px;height:36px;border-radius:var(--token-radius-full, 50%);display:flex;align-items:center;justify-content:center;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .1));color:var(--ion-text-color);font-weight:var(--token-font-weight-semibold, 600);font-size:var(--token-font-size-2, 14px);border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));transition:all var(--token-transition-slow, .3s) var(--token-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.dao-header .step-progress .step-indicator .step-circle.active{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-color:var(--ion-color-primary);transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.dao-header .step-progress .step-indicator .step-circle.completed{background:var(--ion-color-success);color:var(--ion-color-success-contrast);border-color:var(--ion-color-success);transform:scale(1.05)}.dao-header .step-progress .step-indicator .step-circle:hover:not(.active):not(.completed){transform:scale(1.05);background:rgba(var(--ion-color-light-rgb),.15)}.dao-header .step-progress .step-indicator .step-circle ion-icon{font-size:20px}.dao-header .step-progress .step-indicator .step-line{width:40px;height:var(--token-border-width-2, 2px);background:var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));margin:0 var(--token-space-2, 8px);transition:all var(--token-transition-slow, .3s) ease}.dao-header .step-progress .step-indicator .step-line.active{background:var(--ion-color-success);box-shadow:0 0 8px rgba(var(--ion-color-success-rgb),.5)}.membership-section{margin-bottom:var(--token-space-6, 24px);animation:fadeIn var(--token-transition-slow, .3s) ease}.membership-section .explanation{margin-bottom:var(--token-space-4, 16px)}.membership-section .explanation h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-text-color);line-height:var(--token-line-height-tight, 1.3);margin:0 0 var(--token-space-2, 8px) 0}.membership-section .explanation p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);line-height:var(--token-line-height-normal, 1.4);margin:0}.membership-section .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--token-space-3, 12px)}.membership-section .options-grid ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-grid ion-card:hover{transform:translateY(-2px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-grid ion-card:active{transform:translateY(0)}.membership-section .options-grid ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-grid ion-card ion-card-content{text-align:center;padding:var(--token-space-5, 20px)}.membership-section .options-grid ion-card ion-card-content .option-icon{margin-bottom:var(--token-space-3, 12px)}.membership-section .options-grid ion-card ion-card-content .option-icon ion-icon{font-size:40px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-grid ion-card ion-card-content h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 6px) 0;color:var(--ion-text-color)}.membership-section .options-grid ion-card ion-card-content p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0 0 var(--token-space-2, 8px) 0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-grid ion-card:hover .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section .options-list{display:flex;flex-direction:column;gap:var(--token-space-3, 12px)}.membership-section .options-list ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-list ion-card:hover{transform:translate(4px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-list ion-card:active{transform:translate(2px)}.membership-section .options-list ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-list ion-card ion-card-content{padding:var(--token-space-4, 16px)}.membership-section .options-list ion-card ion-card-content .protocol-header{display:flex;align-items:center;gap:var(--token-space-3, 12px);margin-bottom:var(--token-space-3, 12px)}.membership-section .options-list ion-card ion-card-content .protocol-header .option-icon ion-icon{font-size:36px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info{flex:1;min-width:0}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-1, 4px) 0;color:var(--ion-text-color)}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-list ion-card ion-card-content .feature-list{list-style:none;padding:0;margin:0}.membership-section .options-list ion-card ion-card-content .feature-list li{display:flex;align-items:center;gap:var(--token-space-2, 8px);padding:var(--token-space-1, 4px) 0;font-size:var(--token-font-size-1, 13px);color:var(--ion-text-color);line-height:var(--token-line-height-normal, 1.4)}.membership-section .options-list ion-card ion-card-content .feature-list li ion-icon{font-size:var(--token-space-4, 16px);flex-shrink:0;color:var(--ion-color-success)}.membership-section .options-list ion-card:hover .protocol-header .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section.connection-progress{display:flex;justify-content:center;align-items:center;min-height:200px}.membership-section.connection-progress .status-info{text-align:center;padding:var(--token-space-6, 24px)}.membership-section.connection-progress .status-info ion-spinner{font-size:48px;margin-bottom:var(--token-space-4, 16px);color:var(--ion-color-primary)}.membership-section.connection-progress .status-info h3{font-size:var(--token-font-size-4, 18px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 8px) 0;color:var(--ion-text-color)}.membership-section.connection-progress .status-info p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);margin:0;max-width:300px;line-height:var(--token-line-height-normal, 1.4)}.membership-section .error-section{padding:var(--token-space-3, 12px);background:rgba(var(--ion-color-danger-rgb),.1);border:1px solid rgba(var(--ion-color-danger-rgb),.2);border-radius:var(--token-radius-2, 8px)}.membership-section .error-section ion-item{--background: transparent;--padding-start: 0;--inner-padding-end: 0}.membership-section .error-section ion-item ion-icon{font-size:var(--token-space-6, 24px)}.membership-section .error-section ion-item ion-label h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-color-danger);margin:0 0 var(--token-space-1, 4px) 0}.membership-section .error-section ion-item ion-label p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.step-content{animation:stepFadeIn var(--token-transition-normal, .25s) var(--token-ease-out, cubic-bezier(0, 0, .2, 1))}.direct-select ion-card{position:relative;overflow:hidden}.direct-select ion-card:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%) translate(0);width:0;height:0;border-left:6px solid var(--ion-color-primary);border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0;transition:all var(--token-transition-fast, .15s) ease}.direct-select ion-card:hover:after{opacity:.6;transform:translateY(-50%) translate(4px)}.direct-select ion-card:hover{border-color:rgba(var(--ion-color-primary-rgb),.4)}.direct-select ion-card:hover .option-icon ion-icon{color:var(--ion-color-primary)}.direct-select ion-card:active{transform:scale(.98);background:rgba(var(--ion-color-primary-rgb),.15)!important}.direct-select.options-grid ion-card:after{right:8px;top:16px;transform:translateY(0) translate(0)}.direct-select.options-grid ion-card:hover:after{transform:translateY(0) translate(4px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),.4)}70%{box-shadow:0 0 0 8px rgba(var(--ion-color-primary-rgb),0)}to{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),0)}}.step-progress .step-indicator .step-circle.active{animation:stepPulse 1.5s ease-out infinite}@media(max-width:768px){.membership-section .options-grid{grid-template-columns:1fr}.dao-header .step-progress .step-indicator .step-circle{width:28px;height:28px;font-size:12px}.dao-header .step-progress .step-indicator .step-line{width:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes fadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%,to{box-shadow:none}}}\n"] }]
+            args: [{ selector: 'hsuite-wallet-connection-modal', standalone: true, imports: [CommonModule, IonicModule, ConnectionMethodStepComponent, QrPairingStepComponent], template: "<ion-content>\n  <div class=\"modal-inner-content wallet-connection-modal\">\n    <div class=\"header\">\n      <div class=\"title\">\n        <ion-button *ngIf=\"canGoBack()\" (click)=\"back()\" fill=\"clear\" class=\"back-btn\">\n          <ion-icon slot=\"icon-only\" name=\"arrow-back-outline\"></ion-icon>\n        </ion-button>\n        <p>{{ stepTitle() }}</p>\n      </div>\n      <ion-button class=\"close-modal\" (click)=\"dismiss()\" fill=\"clear\" [disabled]=\"isConnecting()\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n    </div>\n\n    <!-- Dynamic Step Progress Indicator -->\n    <div class=\"dao-header\">\n      <div class=\"step-progress\">\n        <!-- Dynamic steps based on selected protocol path -->\n        <ng-container *ngFor=\"let label of stepConfig().labels; let i = index\">\n          <div class=\"step-indicator\">\n            <div\n              class=\"step-circle\"\n              [class.active]=\"displayStep() === i + 1\"\n              [class.completed]=\"displayStep() > i + 1\"\n              [attr.title]=\"label\"\n            >\n              <ion-icon *ngIf=\"displayStep() > i + 1\" name=\"checkmark\"></ion-icon>\n              <span *ngIf=\"displayStep() <= i + 1\">{{ i + 1 }}</span>\n            </div>\n            <!-- Step line between circles (not after the last one) -->\n            <div\n              class=\"step-line\"\n              *ngIf=\"i < stepConfig().labels.length - 1\"\n              [class.active]=\"displayStep() > i + 1\"\n            ></div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"form\">\n      <!-- Step 1: Network Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.NetworkSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Network</h3>\n            <p>Select the network you want to connect to.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let network of networkOptions\"\n              (click)=\"selectNetworkAndProceed(network.id)\"\n              [class.selected]=\"selectedNetwork() === network.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"network.icon\"></ion-icon>\n                </div>\n                <h3>{{ network.name }}</h3>\n                <p>{{ network.description }}</p>\n                <ion-badge *ngIf=\"network.recommended\" color=\"success\">Recommended</ion-badge>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 2: Protocol Selection (Direct Selection - click advances to next step) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ProtocolSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Connection Protocol</h3>\n            <p>Choose how you want to connect your wallet.</p>\n          </div>\n\n          <div class=\"options-list direct-select\">\n            <ion-card\n              *ngFor=\"let protocol of protocolOptions()\"\n              (click)=\"selectProtocolAndProceed(protocol.id)\"\n              [class.selected]=\"selectedProtocol() === protocol.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"protocol-header\">\n                  <div class=\"option-icon\">\n                    <ion-icon [name]=\"protocol.icon\"></ion-icon>\n                  </div>\n                  <div class=\"protocol-info\">\n                    <h3>{{ protocol.name }}</h3>\n                    <p>{{ protocol.description }}</p>\n                  </div>\n                </div>\n\n                <ul class=\"feature-list\">\n                  <li *ngFor=\"let feature of protocol.features\">\n                    <ion-icon name=\"checkmark-circle\" color=\"success\"></ion-icon>\n                    <span>{{ feature }}</span>\n                  </li>\n                </ul>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 3: Connection Method Selection (HSuite Native only) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionMethodSelection\" class=\"step-content\">\n        <hsuite-connection-method-step\n          [methods]=\"connectionMethodOptions()\"\n          [isMobile]=\"isMobile()\"\n          [selectedMethod]=\"selectedConnectionMethod()\"\n          (methodSelected)=\"onConnectionMethodSelected($event)\"\n        ></hsuite-connection-method-step>\n      </div>\n\n      <!-- Step 3 (WalletConnect path): Ledger Selection (Direct Selection - click initiates connection) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.LedgerSelection\" class=\"step-content\">\n        <div class=\"membership-section\">\n          <div class=\"explanation\">\n            <h3>Choose Blockchain</h3>\n            <p>Select the blockchain ledger to connect with.</p>\n          </div>\n\n          <div class=\"options-grid direct-select\">\n            <ion-card\n              *ngFor=\"let ledger of ledgerOptions\"\n              (click)=\"selectLedgerAndConnect(ledger.id)\"\n              [class.selected]=\"selectedLedger() === ledger.id\"\n              button\n            >\n              <ion-card-content>\n                <div class=\"option-icon\">\n                  <ion-icon [name]=\"ledger.icon\"></ion-icon>\n                </div>\n                <h3>{{ ledger.name }}</h3>\n                <p>{{ ledger.description }}</p>\n              </ion-card-content>\n            </ion-card>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 5: QR Pairing (Mobile P2P - Nostr-first, single QR) -->\n      <div *ngIf=\"currentStep() === ConnectionStep.QrPairing\" class=\"step-content\">\n        <hsuite-qr-pairing-step\n          [offerData]=\"pairingOffer()\"\n          [appName]=\"appName\"\n          [isLoading]=\"isGeneratingOffer()\"\n          [isWaitingForWallet]=\"isWaitingForWallet()\"\n          [isWaitingForApproval]=\"isWaitingForApproval()\"\n          [errorMessage]=\"connectionError()\"\n          (expired)=\"onQrExpired()\"\n          (refreshRequested)=\"onQrRefresh()\"\n          (cancelled)=\"back()\"\n        ></hsuite-qr-pairing-step>\n      </div>\n\n      <!-- Step 6: Connection Progress -->\n      <div *ngIf=\"currentStep() === ConnectionStep.ConnectionProgress\" class=\"step-content\">\n        <div class=\"membership-section connection-progress\">\n          <div *ngIf=\"isConnecting()\" class=\"status-info\">\n            <ion-spinner name=\"crescent\"></ion-spinner>\n            <h3>Connecting...</h3>\n            <p *ngIf=\"selectedProtocol() === 'walletconnect'\">\n              Please approve the connection in your wallet app or scan the QR code.\n            </p>\n            <p *ngIf=\"selectedProtocol() === 'hsuite-native'\">Opening HSuite Wallet...</p>\n          </div>\n\n          <div *ngIf=\"connectionError()\" class=\"membership-section\">\n            <div class=\"error-section\">\n              <ion-item lines=\"none\">\n                <ion-icon slot=\"start\" name=\"alert-circle-outline\" color=\"danger\"></ion-icon>\n                <ion-label>\n                  <h3>Connection Failed</h3>\n                  <p>{{ connectionError() }}</p>\n                </ion-label>\n              </ion-item>\n            </div>\n            <ion-button expand=\"block\" fill=\"outline\" (click)=\"back()\" class=\"ion-margin-top\">\n              Try Again\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Footer removed: All steps now use direct selection (click to proceed) -->\n  </div>\n</ion-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;height:100%;width:100%}ion-content{--background: transparent;--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;height:100vh;width:100%;display:flex!important;align-items:center!important;justify-content:center!important}ion-content::part(scroll){display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}.modal-inner-content{width:90%;max-width:600px;max-height:80vh;background:var(--glass-background, rgba(var(--ion-color-dark-rgb), .95));border-radius:var(--border-radius-xl, 16px);padding:0;display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);border:1px solid var(--border-flat, rgba(var(--ion-color-light-rgb), .1));overflow:hidden;animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg, 16px) var(--space-xl, 20px);background:transparent;flex-shrink:0}.header .title{display:flex;align-items:center;gap:var(--space-sm, 8px);flex:1}.header .title p{margin:0;font-size:var(--font-size-2xl, 24px);font-weight:var(--font-weight-bold, 700);color:var(--ion-text-color);line-height:1.2}.header .back-btn{--padding-start: 8px;--padding-end: 8px;margin:0}.header .back-btn ion-icon{font-size:22px;color:var(--ion-color-primary)}.header .close-modal{--padding-start: 8px;--padding-end: 8px;margin:0;cursor:pointer}.header .close-modal ion-icon{font-size:24px;color:var(--ion-text-color)}.header .close-modal:hover:not(:disabled){transform:scale(1.05)}.header .close-modal:active:not(:disabled){transform:scale(.95)}.form{flex:1;overflow-y:auto;padding:0 var(--space-xl, 20px) var(--space-xl, 20px) var(--space-xl, 20px);background:transparent}.form::-webkit-scrollbar{width:8px}.form::-webkit-scrollbar-track{background:var(--surface-flat, rgba(var(--ion-color-light-rgb), .05));border-radius:4px}.form::-webkit-scrollbar-thumb{background:rgba(var(--ion-color-light-rgb),.2);border-radius:4px}.form::-webkit-scrollbar-thumb:hover{background:rgba(var(--ion-color-light-rgb),.3)}@media(min-width:768px){.modal-inner-content{width:80%;max-width:700px;border-radius:20px}.header{padding:20px 24px}.dao-header{margin:0 24px 24px}.form{padding:0 24px 24px}}@media(max-width:480px){.modal-inner-content{width:95%;max-height:85vh}.header{padding:14px 16px}.dao-header{margin:0 16px 20px}.form{padding:0 16px 16px}}.dao-header{margin:0 var(--space-xl, 20px) var(--token-space-6, 24px) var(--space-xl, 20px);padding:var(--token-space-4, 16px);background:var(--token-surface-2, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);box-shadow:var(--token-elevation-1, var(--shadow-sm));flex-shrink:0;animation:fadeIn var(--token-transition-slow, .3s) ease}.dao-header .step-progress{display:flex;align-items:center;justify-content:center}.dao-header .step-progress .step-indicator{display:flex;align-items:center}.dao-header .step-progress .step-indicator .step-circle{width:36px;height:36px;border-radius:var(--token-radius-full, 50%);display:flex;align-items:center;justify-content:center;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .1));color:var(--ion-text-color);font-weight:var(--token-font-weight-semibold, 600);font-size:var(--token-font-size-2, 14px);border:var(--token-border-width-1, 1px) solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));transition:all var(--token-transition-slow, .3s) var(--token-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.dao-header .step-progress .step-indicator .step-circle.active{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast);border-color:var(--ion-color-primary);transform:scale(1.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.2)}.dao-header .step-progress .step-indicator .step-circle.completed{background:var(--ion-color-success);color:var(--ion-color-success-contrast);border-color:var(--ion-color-success);transform:scale(1.05)}.dao-header .step-progress .step-indicator .step-circle:hover:not(.active):not(.completed){transform:scale(1.05);background:rgba(var(--ion-color-light-rgb),.15)}.dao-header .step-progress .step-indicator .step-circle ion-icon{font-size:20px}.dao-header .step-progress .step-indicator .step-line{width:40px;height:var(--token-border-width-2, 2px);background:var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .2)));margin:0 var(--token-space-2, 8px);transition:all var(--token-transition-slow, .3s) ease}.dao-header .step-progress .step-indicator .step-line.active{background:var(--ion-color-success);box-shadow:0 0 8px rgba(var(--ion-color-success-rgb),.5)}.membership-section{margin-bottom:var(--token-space-6, 24px);animation:fadeIn var(--token-transition-slow, .3s) ease}.membership-section .explanation{margin-bottom:var(--token-space-4, 16px)}.membership-section .explanation h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-text-color);line-height:var(--token-line-height-tight, 1.3);margin:0 0 var(--token-space-2, 8px) 0}.membership-section .explanation p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);line-height:var(--token-line-height-normal, 1.4);margin:0}.membership-section .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--token-space-3, 12px)}.membership-section .options-grid ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-grid ion-card:hover{transform:translateY(-2px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-grid ion-card:active{transform:translateY(0)}.membership-section .options-grid ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-grid ion-card ion-card-content{text-align:center;padding:var(--token-space-5, 20px)}.membership-section .options-grid ion-card ion-card-content .option-icon{margin-bottom:var(--token-space-3, 12px)}.membership-section .options-grid ion-card ion-card-content .option-icon ion-icon{font-size:40px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-grid ion-card ion-card-content h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 6px) 0;color:var(--ion-text-color)}.membership-section .options-grid ion-card ion-card-content p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0 0 var(--token-space-2, 8px) 0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-grid ion-card:hover .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section .options-list{display:flex;flex-direction:column;gap:var(--token-space-3, 12px)}.membership-section .options-list ion-card{margin:0;background:var(--token-surface-3, rgba(var(--ion-color-light-rgb), .05));border:1px solid var(--border-flat, var(--token-border-subtle, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--token-radius-3, 12px);transition:all var(--token-transition-normal, .2s) ease;cursor:pointer;box-shadow:var(--token-elevation-1, var(--shadow-sm))}.membership-section .options-list ion-card:hover{transform:translate(4px);background:var(--token-surface-hover, rgba(var(--ion-color-light-rgb), .08));border-color:var(--border-flat, rgba(var(--ion-color-light-rgb), .2));box-shadow:var(--token-elevation-2, var(--shadow-md))}.membership-section .options-list ion-card:active{transform:translate(2px)}.membership-section .options-list ion-card.selected{border:2px solid var(--ion-color-primary);background:rgba(var(--ion-color-primary-rgb),.1);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.1)}.membership-section .options-list ion-card ion-card-content{padding:var(--token-space-4, 16px)}.membership-section .options-list ion-card ion-card-content .protocol-header{display:flex;align-items:center;gap:var(--token-space-3, 12px);margin-bottom:var(--token-space-3, 12px)}.membership-section .options-list ion-card ion-card-content .protocol-header .option-icon ion-icon{font-size:36px;color:var(--ion-color-primary);transition:transform var(--token-transition-fast, .15s) ease}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info{flex:1;min-width:0}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-1, 4px) 0;color:var(--ion-text-color)}.membership-section .options-list ion-card ion-card-content .protocol-header .protocol-info p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.membership-section .options-list ion-card ion-card-content .feature-list{list-style:none;padding:0;margin:0}.membership-section .options-list ion-card ion-card-content .feature-list li{display:flex;align-items:center;gap:var(--token-space-2, 8px);padding:var(--token-space-1, 4px) 0;font-size:var(--token-font-size-1, 13px);color:var(--ion-text-color);line-height:var(--token-line-height-normal, 1.4)}.membership-section .options-list ion-card ion-card-content .feature-list li ion-icon{font-size:var(--token-space-4, 16px);flex-shrink:0;color:var(--ion-color-success)}.membership-section .options-list ion-card:hover .protocol-header .option-icon ion-icon{transform:scale(1.1) rotate(5deg)}.membership-section.connection-progress{display:flex;justify-content:center;align-items:center;min-height:200px}.membership-section.connection-progress .status-info{text-align:center;padding:var(--token-space-6, 24px)}.membership-section.connection-progress .status-info ion-spinner{font-size:48px;margin-bottom:var(--token-space-4, 16px);color:var(--ion-color-primary)}.membership-section.connection-progress .status-info h3{font-size:var(--token-font-size-4, 18px);font-weight:var(--token-font-weight-medium, 500);margin:0 0 var(--token-space-2, 8px) 0;color:var(--ion-text-color)}.membership-section.connection-progress .status-info p{font-size:var(--token-font-size-2, 14px);color:var(--ion-color-medium);margin:0;max-width:300px;line-height:var(--token-line-height-normal, 1.4)}.membership-section .error-section{padding:var(--token-space-3, 12px);background:rgba(var(--ion-color-danger-rgb),.1);border:1px solid rgba(var(--ion-color-danger-rgb),.2);border-radius:var(--token-radius-2, 8px)}.membership-section .error-section ion-item{--background: transparent;--padding-start: 0;--inner-padding-end: 0}.membership-section .error-section ion-item ion-icon{font-size:var(--token-space-6, 24px)}.membership-section .error-section ion-item ion-label h3{font-size:var(--token-font-size-3, 16px);font-weight:var(--token-font-weight-medium, 500);color:var(--ion-color-danger);margin:0 0 var(--token-space-1, 4px) 0}.membership-section .error-section ion-item ion-label p{font-size:var(--token-font-size-1, 13px);color:var(--ion-color-medium);margin:0;line-height:var(--token-line-height-tight, 1.3)}.step-content{animation:stepFadeIn var(--token-transition-normal, .25s) var(--token-ease-out, cubic-bezier(0, 0, .2, 1))}.direct-select ion-card{position:relative;overflow:hidden}.direct-select ion-card:after{content:\"\";position:absolute;right:12px;top:50%;transform:translateY(-50%) translate(0);width:0;height:0;border-left:6px solid var(--ion-color-primary);border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0;transition:all var(--token-transition-fast, .15s) ease}.direct-select ion-card:hover:after{opacity:.6;transform:translateY(-50%) translate(4px)}.direct-select ion-card:hover{border-color:rgba(var(--ion-color-primary-rgb),.4)}.direct-select ion-card:hover .option-icon ion-icon{color:var(--ion-color-primary)}.direct-select ion-card:active{transform:scale(.98);background:rgba(var(--ion-color-primary-rgb),.15)!important}.direct-select.options-grid ion-card:after{right:8px;top:16px;transform:translateY(0) translate(0)}.direct-select.options-grid ion-card:hover:after{transform:translateY(0) translate(4px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),.4)}70%{box-shadow:0 0 0 8px rgba(var(--ion-color-primary-rgb),0)}to{box-shadow:0 0 rgba(var(--ion-color-primary-rgb),0)}}.step-progress .step-indicator .step-circle.active{animation:stepPulse 1.5s ease-out infinite}@media(max-width:768px){.membership-section .options-grid{grid-template-columns:1fr}.dao-header .step-progress .step-indicator .step-circle{width:28px;height:28px;font-size:12px}.dao-header .step-progress .step-indicator .step-line{width:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes fadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepFadeIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes stepPulse{0%,to{box-shadow:none}}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ModalController }, { type: UnifiedWalletService }], propDecorators: { projectId: [{
                 type: Input
+            }], network: [{
+                type: Input
             }], appName: [{
                 type: Input
             }], appDescription: [{
@@ -9932,6 +9988,12 @@ class WalletConnectButtonComponent {
      * Wallet URL for targeting the wallet window
      */
     walletUrl = DEFAULT_WALLET_URL;
+    /**
+     * Pins the connection network and hides the network-selection step in the
+     * modal. When set to `'mainnet'` or `'testnet'`, the dApp decides the network
+     * and the user never sees the picker. When omitted, the user chooses.
+     */
+    network;
     /**
      * Whether to show session information when connected
      * @default true
@@ -10012,6 +10074,7 @@ class WalletConnectButtonComponent {
                 appName: this.appName,
                 appDescription: this.appDescription,
                 walletUrl: this.walletUrl,
+                network: this.network,
             },
         });
         await modal.present();
@@ -10083,7 +10146,7 @@ class WalletConnectButtonComponent {
         return this.wallet.allAccounts();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectButtonComponent, isStandalone: true, selector: "wallet-connect-button", inputs: { walletConnectProjectId: "walletConnectProjectId", appName: "appName", appDescription: "appDescription", walletUrl: "walletUrl", showSessionInfo: "showSessionInfo", buttonColor: "buttonColor", size: "size", connectText: "connectText", connectedText: "connectedText", multiSessionMode: "multiSessionMode" }, outputs: { connected: "connected", disconnected: "disconnected", error: "error" }, providers: [ModalController], ngImport: i0, template: "<div class=\"wallet-connect-container\" [class]=\"'size-' + size\">\n  <!-- Connect Button (Multi-Session Support) -->\n  <ion-button\n    [color]=\"buttonColor\"\n    [size]=\"size\"\n    [disabled]=\"isConnecting\"\n    (click)=\"connect()\"\n    class=\"wallet-button\">\n    <ion-spinner *ngIf=\"isConnecting\" slot=\"start\" name=\"crescent\"></ion-spinner>\n    <ion-icon *ngIf=\"!isConnecting\" [name]=\"getIconName()\" slot=\"start\"></ion-icon>\n    {{ getButtonText() }}\n  </ion-button>\n</div>\n\n", styles: [".wallet-connect-container{display:inline-block;width:100%}.wallet-button{--border-radius: var(--wallet-button-radius, var(--border-radius-lg, 12px));--padding-top: var(--wallet-button-padding-vertical, var(--space-md, 14px));--padding-bottom: var(--wallet-button-padding-vertical, var(--space-md, 14px));--padding-start: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));--padding-end: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));width:100%;font-weight:var(--wallet-button-font-weight, var(--font-weight-semibold, 600));font-size:var(--wallet-button-font-size, var(--font-size-md, 16px));text-transform:none;letter-spacing:var(--letter-spacing-wide, .5px);transition:var(--wallet-transition-normal, var(--transition-all, .2s ease));box-shadow:var(--wallet-button-shadow, var(--shadow-md))}.wallet-button:hover:not([disabled]){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.wallet-button:active:not([disabled]){transform:translateY(0)}.wallet-button ion-icon{font-size:1.25em;transition:transform var(--wallet-transition-fast, var(--transition-fade, .15s)) ease}.wallet-button:hover:not([disabled]) ion-icon{transform:scale(var(--button-hover-scale, 1.1))}.session-display{background:var(--wallet-session-bg, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--wallet-session-radius, var(--border-radius-lg, 12px));padding:var(--wallet-session-padding, var(--space-lg, 16px));display:flex;flex-direction:column;gap:var(--wallet-session-gap, var(--space-md, 12px));box-shadow:var(--wallet-session-shadow, var(--shadow-md));animation:slideIn var(--wallet-transition-slow, var(--duration-slow, .3s)) ease-out}.session-header{display:flex;align-items:center;justify-content:space-between;gap:var(--wallet-spacing-lg, var(--space-lg, 16px))}.session-info{display:flex;align-items:center;gap:var(--wallet-spacing-md, var(--space-md, 8px));flex:1;min-width:0}.session-icon{font-size:var(--wallet-session-icon-size, var(--font-size-2xl, 28px));color:var(--ion-color-primary);flex-shrink:0;transition:transform var(--wallet-transition-fast, var(--duration-fast, .15s)) ease}.session-display:hover .session-icon{transform:scale(1.05)}.session-details{display:flex;flex-direction:column;gap:var(--wallet-spacing-xs, var(--space-xs, 4px));min-width:0;flex:1}.session-details strong{font-size:var(--wallet-font-size-base, var(--font-size-sm, 14px));font-weight:var(--wallet-font-weight-semibold, var(--font-weight-semibold, 600));color:var(--wallet-session-text-primary, var(--ion-text-color));line-height:var(--wallet-line-height-normal, var(--line-height-normal, 1.4));display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-badges{display:flex;gap:var(--wallet-spacing-xs, var(--space-xs, 4px));flex-wrap:wrap}.network-badge{font-size:var(--wallet-badge-font-size, var(--font-size-xs, 10px));font-weight:var(--wallet-badge-font-weight, var(--font-weight-semibold, 600));padding:var(--wallet-badge-padding, var(--space-xs, 3px) var(--space-sm, 8px));border-radius:var(--wallet-badge-radius, var(--border-radius-sm, 6px));line-height:var(--line-height-tight, 1.2);transition:transform var(--wallet-transition-fast, var(--duration-fast, .15s)) ease}.session-display:hover .network-badge{transform:scale(1.05)}.disconnect-button{--border-radius: var(--wallet-spacing-sm, var(--border-radius-md, 8px));--padding-start: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-end: var(--wallet-spacing-sm, var(--space-sm, 8px));flex-shrink:0;transition:all var(--wallet-transition-fast, var(--transition-all, .15s ease))}.disconnect-button:hover:not([disabled]){transform:scale(1.05)}.disconnect-button:active:not([disabled]){transform:scale(var(--button-press-scale, .95))}.account-list{display:flex;flex-direction:column;gap:var(--wallet-spacing-sm, var(--space-sm, 4px));padding-top:var(--wallet-spacing-md, var(--space-md, 8px));border-top:var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), .1)))}.account-item{display:flex;align-items:center;justify-content:space-between;padding:var(--wallet-account-padding, var(--space-sm, 8px) var(--space-md, 12px));background:var(--wallet-account-bg, var(--surface-flat, rgba(var(--ion-color-primary-rgb), .05)));border-radius:var(--wallet-account-radius, var(--border-radius-md, 8px));transition:all var(--wallet-transition-normal, var(--transition-all, .2s ease))}.account-item:hover{background:var(--wallet-account-bg-hover, var(--surface-flat-hover, rgba(var(--ion-color-primary-rgb), .1)));transform:translate(2px)}.account-item .account-address{font-family:var(--wallet-account-font-family, var(--font-family-mono, monospace));font-size:var(--wallet-account-font-size, var(--font-size-sm, 14px));color:var(--wallet-session-text-primary, var(--ion-text-color));line-height:var(--wallet-line-height-normal, var(--line-height-normal, 1.4));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.size-small{--wallet-session-padding: var(--wallet-spacing-md, var(--space-md, 12px))}.size-small .wallet-button{--padding-top: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-bottom: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-start: var(--wallet-spacing-lg, var(--space-lg, 16px));--padding-end: var(--wallet-spacing-lg, var(--space-lg, 16px));font-size:var(--wallet-font-size-sm, var(--font-size-sm, 13px))}.size-small .session-icon{font-size:var(--font-size-xl, 24px)}.size-small .session-details strong{font-size:var(--wallet-font-size-sm, var(--font-size-sm, 13px))}.size-large{--wallet-session-padding: var(--wallet-spacing-xl, var(--space-xl, 20px))}.size-large .wallet-button{--padding-top: var(--wallet-spacing-lg, var(--space-lg, 18px));--padding-bottom: var(--wallet-spacing-lg, var(--space-lg, 18px));--padding-start: var(--wallet-spacing-2xl, var(--space-2xl, 32px));--padding-end: var(--wallet-spacing-2xl, var(--space-2xl, 32px));font-size:var(--wallet-font-size-lg, var(--font-size-lg, 18px))}.size-large .session-icon{font-size:var(--font-size-3xl, 32px)}.size-large .session-details strong{font-size:var(--wallet-font-size-lg, var(--font-size-lg, 18px))}@media(max-width:576px){.session-header{flex-wrap:wrap}.disconnect-button{width:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.wallet-button[disabled]{animation:pulse 1.5s ease-in-out infinite}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes slideIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectButtonComponent, isStandalone: true, selector: "wallet-connect-button", inputs: { walletConnectProjectId: "walletConnectProjectId", appName: "appName", appDescription: "appDescription", walletUrl: "walletUrl", network: "network", showSessionInfo: "showSessionInfo", buttonColor: "buttonColor", size: "size", connectText: "connectText", connectedText: "connectedText", multiSessionMode: "multiSessionMode" }, outputs: { connected: "connected", disconnected: "disconnected", error: "error" }, providers: [ModalController], ngImport: i0, template: "<div class=\"wallet-connect-container\" [class]=\"'size-' + size\">\n  <!-- Connect Button (Multi-Session Support) -->\n  <ion-button\n    [color]=\"buttonColor\"\n    [size]=\"size\"\n    [disabled]=\"isConnecting\"\n    (click)=\"connect()\"\n    class=\"wallet-button\">\n    <ion-spinner *ngIf=\"isConnecting\" slot=\"start\" name=\"crescent\"></ion-spinner>\n    <ion-icon *ngIf=\"!isConnecting\" [name]=\"getIconName()\" slot=\"start\"></ion-icon>\n    {{ getButtonText() }}\n  </ion-button>\n</div>\n\n", styles: [".wallet-connect-container{display:inline-block;width:100%}.wallet-button{--border-radius: var(--wallet-button-radius, var(--border-radius-lg, 12px));--padding-top: var(--wallet-button-padding-vertical, var(--space-md, 14px));--padding-bottom: var(--wallet-button-padding-vertical, var(--space-md, 14px));--padding-start: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));--padding-end: var(--wallet-button-padding-horizontal, var(--space-lg, 24px));width:100%;font-weight:var(--wallet-button-font-weight, var(--font-weight-semibold, 600));font-size:var(--wallet-button-font-size, var(--font-size-md, 16px));text-transform:none;letter-spacing:var(--letter-spacing-wide, .5px);transition:var(--wallet-transition-normal, var(--transition-all, .2s ease));box-shadow:var(--wallet-button-shadow, var(--shadow-md))}.wallet-button:hover:not([disabled]){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.wallet-button:active:not([disabled]){transform:translateY(0)}.wallet-button ion-icon{font-size:1.25em;transition:transform var(--wallet-transition-fast, var(--transition-fade, .15s)) ease}.wallet-button:hover:not([disabled]) ion-icon{transform:scale(var(--button-hover-scale, 1.1))}.session-display{background:var(--wallet-session-bg, var(--surface-flat, rgba(var(--ion-color-light-rgb), .05)));border:var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), .1)));border-radius:var(--wallet-session-radius, var(--border-radius-lg, 12px));padding:var(--wallet-session-padding, var(--space-lg, 16px));display:flex;flex-direction:column;gap:var(--wallet-session-gap, var(--space-md, 12px));box-shadow:var(--wallet-session-shadow, var(--shadow-md));animation:slideIn var(--wallet-transition-slow, var(--duration-slow, .3s)) ease-out}.session-header{display:flex;align-items:center;justify-content:space-between;gap:var(--wallet-spacing-lg, var(--space-lg, 16px))}.session-info{display:flex;align-items:center;gap:var(--wallet-spacing-md, var(--space-md, 8px));flex:1;min-width:0}.session-icon{font-size:var(--wallet-session-icon-size, var(--font-size-2xl, 28px));color:var(--ion-color-primary);flex-shrink:0;transition:transform var(--wallet-transition-fast, var(--duration-fast, .15s)) ease}.session-display:hover .session-icon{transform:scale(1.05)}.session-details{display:flex;flex-direction:column;gap:var(--wallet-spacing-xs, var(--space-xs, 4px));min-width:0;flex:1}.session-details strong{font-size:var(--wallet-font-size-base, var(--font-size-sm, 14px));font-weight:var(--wallet-font-weight-semibold, var(--font-weight-semibold, 600));color:var(--wallet-session-text-primary, var(--ion-text-color));line-height:var(--wallet-line-height-normal, var(--line-height-normal, 1.4));display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-badges{display:flex;gap:var(--wallet-spacing-xs, var(--space-xs, 4px));flex-wrap:wrap}.network-badge{font-size:var(--wallet-badge-font-size, var(--font-size-xs, 10px));font-weight:var(--wallet-badge-font-weight, var(--font-weight-semibold, 600));padding:var(--wallet-badge-padding, var(--space-xs, 3px) var(--space-sm, 8px));border-radius:var(--wallet-badge-radius, var(--border-radius-sm, 6px));line-height:var(--line-height-tight, 1.2);transition:transform var(--wallet-transition-fast, var(--duration-fast, .15s)) ease}.session-display:hover .network-badge{transform:scale(1.05)}.disconnect-button{--border-radius: var(--wallet-spacing-sm, var(--border-radius-md, 8px));--padding-start: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-end: var(--wallet-spacing-sm, var(--space-sm, 8px));flex-shrink:0;transition:all var(--wallet-transition-fast, var(--transition-all, .15s ease))}.disconnect-button:hover:not([disabled]){transform:scale(1.05)}.disconnect-button:active:not([disabled]){transform:scale(var(--button-press-scale, .95))}.account-list{display:flex;flex-direction:column;gap:var(--wallet-spacing-sm, var(--space-sm, 4px));padding-top:var(--wallet-spacing-md, var(--space-md, 8px));border-top:var(--border-width-thin, 1px) solid var(--wallet-session-border, var(--border-flat, rgba(var(--ion-color-light-rgb), .1)))}.account-item{display:flex;align-items:center;justify-content:space-between;padding:var(--wallet-account-padding, var(--space-sm, 8px) var(--space-md, 12px));background:var(--wallet-account-bg, var(--surface-flat, rgba(var(--ion-color-primary-rgb), .05)));border-radius:var(--wallet-account-radius, var(--border-radius-md, 8px));transition:all var(--wallet-transition-normal, var(--transition-all, .2s ease))}.account-item:hover{background:var(--wallet-account-bg-hover, var(--surface-flat-hover, rgba(var(--ion-color-primary-rgb), .1)));transform:translate(2px)}.account-item .account-address{font-family:var(--wallet-account-font-family, var(--font-family-mono, monospace));font-size:var(--wallet-account-font-size, var(--font-size-sm, 14px));color:var(--wallet-session-text-primary, var(--ion-text-color));line-height:var(--wallet-line-height-normal, var(--line-height-normal, 1.4));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.size-small{--wallet-session-padding: var(--wallet-spacing-md, var(--space-md, 12px))}.size-small .wallet-button{--padding-top: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-bottom: var(--wallet-spacing-sm, var(--space-sm, 8px));--padding-start: var(--wallet-spacing-lg, var(--space-lg, 16px));--padding-end: var(--wallet-spacing-lg, var(--space-lg, 16px));font-size:var(--wallet-font-size-sm, var(--font-size-sm, 13px))}.size-small .session-icon{font-size:var(--font-size-xl, 24px)}.size-small .session-details strong{font-size:var(--wallet-font-size-sm, var(--font-size-sm, 13px))}.size-large{--wallet-session-padding: var(--wallet-spacing-xl, var(--space-xl, 20px))}.size-large .wallet-button{--padding-top: var(--wallet-spacing-lg, var(--space-lg, 18px));--padding-bottom: var(--wallet-spacing-lg, var(--space-lg, 18px));--padding-start: var(--wallet-spacing-2xl, var(--space-2xl, 32px));--padding-end: var(--wallet-spacing-2xl, var(--space-2xl, 32px));font-size:var(--wallet-font-size-lg, var(--font-size-lg, 18px))}.size-large .session-icon{font-size:var(--font-size-3xl, 32px)}.size-large .session-details strong{font-size:var(--wallet-font-size-lg, var(--font-size-lg, 18px))}@media(max-width:576px){.session-header{flex-wrap:wrap}.disconnect-button{width:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.wallet-button[disabled]{animation:pulse 1.5s ease-in-out infinite}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}@keyframes slideIn{0%,to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectButtonComponent, decorators: [{
             type: Component,
@@ -10096,6 +10159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], walletUrl: [{
                 type: Input
+            }], network: [{
+                type: Input
             }], showSessionInfo: [{
                 type: Input
             }], buttonColor: [{
@@ -10183,7 +10248,7 @@ class WalletConnectPromptComponent {
         addIcons({ walletOutline });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectPromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectPromptComponent, isStandalone: true, selector: "wallet-connect-prompt", inputs: { title: "title", subtitle: "subtitle", message: "message", showIcon: "showIcon", buttonText: "buttonText", buttonSize: "buttonSize", buttonColor: "buttonColor", cardColor: "cardColor", walletConnectProjectId: "walletConnectProjectId" }, ngImport: i0, template: "<ion-card class=\"wallet-connect-prompt\" [color]=\"cardColor\">\n  <ion-card-header>\n    <div class=\"prompt-header\">\n      <ion-icon *ngIf=\"showIcon\" name=\"wallet-outline\" class=\"prompt-icon\"></ion-icon>\n      <div>\n        <ion-card-title>{{ title }}</ion-card-title>\n        <ion-card-subtitle *ngIf=\"subtitle\">{{ subtitle }}</ion-card-subtitle>\n      </div>\n    </div>\n  </ion-card-header>\n  \n  <ion-card-content>\n    <p class=\"prompt-message\">{{ message }}</p>\n    \n    <wallet-connect-button\n      [walletConnectProjectId]=\"walletConnectProjectId\"\n      [connectText]=\"buttonText\"\n      [size]=\"buttonSize\"\n      [buttonColor]=\"buttonColor\"\n      class=\"prompt-button\"\n    />\n  </ion-card-content>\n</ion-card>\n\n", styles: [".wallet-connect-prompt{max-width:600px;margin:var(--space-lg, 24px) auto;text-align:center}.prompt-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm, 12px)}.prompt-icon{font-size:48px;color:var(--ion-color-primary)}.prompt-message{margin:var(--space-md, 16px) 0;color:var(--ion-color-medium);font-size:14px;line-height:1.6}.prompt-button{margin-top:var(--space-md, 16px)}.prompt-button ::ng-deep ion-button{margin:0 auto;display:block}@media(max-width:576px){.wallet-connect-prompt{margin:var(--space-md, 16px)}.prompt-icon{font-size:36px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: WalletConnectButtonComponent, selector: "wallet-connect-button", inputs: ["walletConnectProjectId", "appName", "appDescription", "walletUrl", "showSessionInfo", "buttonColor", "size", "connectText", "connectedText", "multiSessionMode"], outputs: ["connected", "disconnected", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: WalletConnectPromptComponent, isStandalone: true, selector: "wallet-connect-prompt", inputs: { title: "title", subtitle: "subtitle", message: "message", showIcon: "showIcon", buttonText: "buttonText", buttonSize: "buttonSize", buttonColor: "buttonColor", cardColor: "cardColor", walletConnectProjectId: "walletConnectProjectId" }, ngImport: i0, template: "<ion-card class=\"wallet-connect-prompt\" [color]=\"cardColor\">\n  <ion-card-header>\n    <div class=\"prompt-header\">\n      <ion-icon *ngIf=\"showIcon\" name=\"wallet-outline\" class=\"prompt-icon\"></ion-icon>\n      <div>\n        <ion-card-title>{{ title }}</ion-card-title>\n        <ion-card-subtitle *ngIf=\"subtitle\">{{ subtitle }}</ion-card-subtitle>\n      </div>\n    </div>\n  </ion-card-header>\n  \n  <ion-card-content>\n    <p class=\"prompt-message\">{{ message }}</p>\n    \n    <wallet-connect-button\n      [walletConnectProjectId]=\"walletConnectProjectId\"\n      [connectText]=\"buttonText\"\n      [size]=\"buttonSize\"\n      [buttonColor]=\"buttonColor\"\n      class=\"prompt-button\"\n    />\n  </ion-card-content>\n</ion-card>\n\n", styles: [".wallet-connect-prompt{max-width:600px;margin:var(--space-lg, 24px) auto;text-align:center}.prompt-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm, 12px)}.prompt-icon{font-size:48px;color:var(--ion-color-primary)}.prompt-message{margin:var(--space-md, 16px) 0;color:var(--ion-color-medium);font-size:14px;line-height:1.6}.prompt-button{margin-top:var(--space-md, 16px)}.prompt-button ::ng-deep ion-button{margin:0 auto;display:block}@media(max-width:576px){.wallet-connect-prompt{margin:var(--space-md, 16px)}.prompt-icon{font-size:36px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: WalletConnectButtonComponent, selector: "wallet-connect-button", inputs: ["walletConnectProjectId", "appName", "appDescription", "walletUrl", "network", "showSessionInfo", "buttonColor", "size", "connectText", "connectedText", "multiSessionMode"], outputs: ["connected", "disconnected", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: WalletConnectPromptComponent, decorators: [{
             type: Component,