fix: ledger logic triggered before dialog opened (#195)

tien · Nov 13, 2024 · 6cb5afb · 6cb5afb
1 parent 6bc88da
commit 6cb5afb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/.changeset/brown-pens-deliver.md b/.changeset/brown-pens-deliver.md
@@ -0,0 +1,5 @@
+---
+"dot-connect": patch
+---
+
+Fixed an issue where Ledger logic was being triggered before the dialog opened.
diff --git a/packages/dot-connect/src/elements/connection-dialog.ts b/packages/dot-connect/src/elements/connection-dialog.ts
@@ -406,16 +406,24 @@ export class HardwareWalletConnection extends BaseWalletConnection<LedgerWallet>
   protected override render() {
     return html`<div style="display: contents">
       ${super.render()}
-      <dc-ledger-dialog
-        ?open=${this.open === "manage"}
-        @close=${() => (this.open = false)}
-        .wallet=${this.wallet}
-      ></dc-ledger-dialog>
-      <dc-connected-ledger-accounts-dialog
-        ?open=${this.open === "connect"}
-        @close=${() => (this.open = false)}
-        .wallet=${this.wallet}
-      ></dc-connected-ledger-accounts-dialog>
+      ${when(
+        this.open === "manage",
+        () =>
+          html`<dc-ledger-dialog
+            open
+            @close=${() => (this.open = false)}
+            .wallet=${this.wallet}
+          ></dc-ledger-dialog>`,
+      )}
+      ${when(
+        this.open === "connect",
+        () =>
+          html`<dc-connected-ledger-accounts-dialog
+            open
+            @close=${() => (this.open = false)}
+            .wallet=${this.wallet}
+          ></dc-connected-ledger-accounts-dialog>`,
+      )}
     </div>`;
   }
 }

diff --git a/packages/dot-connect/src/elements/ledger/ledger-dialog.ts b/packages/dot-connect/src/elements/ledger/ledger-dialog.ts
@@ -14,6 +14,7 @@ import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
 
 @customElement("dc-ledger-dialog")
 export class LedgerDialog extends DotConnectElement {
@@ -100,11 +101,15 @@ export class LedgerDialog extends DotConnectElement {
               )}
         </section>
       </dc-dialog>
-      <dc-connected-ledger-accounts-dialog
-        ?open=${this.addDialogOpen}
-        @close=${() => (this.addDialogOpen = false)}
-        .wallet=${this.wallet}
-      ></dc-connected-ledger-accounts-dialog>`;
+      ${when(
+        this.addDialogOpen,
+        () =>
+          html`<dc-connected-ledger-accounts-dialog
+            open
+            @close=${() => (this.addDialogOpen = false)}
+            .wallet=${this.wallet}
+          ></dc-connected-ledger-accounts-dialog>`,
+      )}`;
   }
 }