feat: ledger support (#105)

tien · Oct 1, 2024 · 1b24435 · 1b24435
1 parent f65fdfe
commit 1b24435
Show file tree

Hide file tree

Showing 20 changed files with 1,092 additions and 223 deletions.
diff --git a/.changeset/curvy-moles-cheer.md b/.changeset/curvy-moles-cheer.md
@@ -0,0 +1,5 @@
+---
+"dot-connect": minor
+---
+
+Added Ledger wallet support.
diff --git a/apps/docs/components/_WalletConnectionButton.vue b/apps/docs/components/_WalletConnectionButton.vue
@@ -3,11 +3,17 @@ import {
   InjectedWalletAggregator,
   initializeWallets,
 } from "@reactive-dot/core/wallets.js";
+import { LedgerWallet } from "@reactive-dot/wallet-ledger";
 import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
+import { Buffer } from "buffer/";
 import { registerDotConnect } from "dot-connect";
 
+// @ts-expect-error polyfill types mismatch
+globalThis.Buffer = Buffer;
+
 const wallets = [
   new InjectedWalletAggregator(),
+  new LedgerWallet(),
   new WalletConnect({
     projectId: "6089356d0a4448aeda421a025cc286c9",
     providerOptions: {

diff --git a/apps/docs/getting-started.md b/apps/docs/getting-started.md
@@ -35,6 +35,7 @@ Configure your project by adding the following code:
 ```ts
 import type { Config } from "@reactive-dot/core";
 import { InjectedWalletAggregator } from "@reactive-dot/core/wallets.js";
+import { LedgerWallet } from "@reactive-dot/wallet-ledger";
 import { WalletConnect } from "@reactive-dot/wallet-walletconnect";
 import { registerDotConnect } from "dot-connect";
 
@@ -45,6 +46,7 @@ export const config = {
   // ...
   wallets: [
     new InjectedWalletAggregator(),
+    new LedgerWallet(),
     new WalletConnect({
       projectId: "WALLET_CONNECT_PROJECT_ID",
       providerOptions: {

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -8,8 +8,10 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@reactive-dot/core": "^0.15.0",
-    "@reactive-dot/wallet-walletconnect": "^0.15.0",
+    "@reactive-dot/core": "^0.16.0",
+    "@reactive-dot/wallet-ledger": "^0.16.0",
+    "@reactive-dot/wallet-walletconnect": "^0.16.0",
+    "buffer": "^6.0.3",
     "dot-connect": "workspace:^",
     "polkadot-api": "^1.3.3",
     "vue": "^3.5.8"

diff --git a/packages/dot-connect/package.json b/packages/dot-connect/package.json
@@ -37,12 +37,15 @@
   "dependencies": {
     "@lit-labs/preact-signals": "^1.0.2",
     "@lit/react": "^1.0.5",
+    "@lit/task": "^1.0.1",
+    "dot-identicon": "workspace:^",
     "lit": "^3.2.0",
     "qrcode": "^1.5.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@reactive-dot/core": "^0.15.0",
+    "@reactive-dot/core": "^0.16.0",
+    "@reactive-dot/wallet-ledger": "^0.16.0",
     "@tsconfig/recommended": "^1.0.7",
     "@tsconfig/strictest": "^2.0.5",
     "@types/eslint__js": "^8.42.3",

diff --git a/packages/dot-connect/src/const.ts b/packages/dot-connect/src/const.ts
@@ -0,0 +1,6 @@
+export const genericChainSpec = {
+  name: "Polkadot",
+  genesisHash:
+    "0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3",
+  properties: { tokenSymbol: "DOT", tokenDecimals: 10 },
+};
diff --git a/packages/dot-connect/src/elements/components/account-list-item.ts b/packages/dot-connect/src/elements/components/account-list-item.ts
@@ -0,0 +1,59 @@
+import { DotConnectElement } from "./element.js";
+import "./list-item.js";
+import "dot-identicon";
+import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+@customElement("dc-account-list-item")
+export class AccountListItem extends DotConnectElement {
+  @property()
+  address!: string;
+
+  @property()
+  name?: string;
+
+  @property({ type: Boolean })
+  clickable = false;
+
+  @property({ type: Boolean })
+  pending = false;
+
+  @property()
+  type?: "checkbox" | undefined;
+
+  @property({ type: Boolean })
+  checked = false;
+
+  get shortenedAddress() {
+    return this.address.slice(0, 6) + "..." + this.address.slice(-6);
+  }
+
+  protected override render() {
+    return html`<dc-list-item
+      ?clickable=${this.clickable}
+      ?pending=${this.pending}
+      type=${ifDefined(this.type)}
+      ?checked=${this.checked}
+    >
+      <div class="icon" slot="leading">
+        <polkadot-identicon
+          address=${this.address}
+          size="100%"
+          backgroundColor="var(--surface-container-color)"
+        ></polkadot-identicon>
+      </div>
+      <span slot="headline">${this.name ?? this.shortenedAddress}</span>
+      ${this.name === undefined
+        ? nothing
+        : html`<span slot="supporting">${this.shortenedAddress}</span>`}
+      <slot name="trailing" slot="trailing"></slot>
+    </dc-list-item>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dc-account-list-item": AccountListItem;
+  }
+}
diff --git a/packages/dot-connect/src/elements/components/dialog.ts b/packages/dot-connect/src/elements/components/dialog.ts
@@ -26,6 +26,10 @@ export class Dialog extends DotConnectElement {
       return false;
     }
 
+    if (this.#dialogRef.value !== event.target) {
+      return false;
+    }
+
     const boundingClientRect = this.#dialogRef.value.getBoundingClientRect();
 
     return (
@@ -45,14 +49,14 @@ export class Dialog extends DotConnectElement {
 
           @media (min-width: 20rem) {
             width: revert;
-            min-width: 20rem;
+            min-width: min(23rem, 100dvw);
           }
 
           box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.32);
           border: 1px solid rgba(255, 255, 255, 0.08);
           border-radius: min(1.5rem, var(--max-border-radius));
+          padding: 0;
           background-color: var(--surface-color);
-          padding: 1.2rem;
 
           opacity: 0;
           translate: 0 2rem;
@@ -95,13 +99,17 @@ export class Dialog extends DotConnectElement {
         }
 
         header {
+          position: sticky;
+          top: 0;
+
           display: flex;
           align-items: center;
           gap: 1rem;
 
-          margin-bottom: 1rem;
-          padding-bottom: 1rem;
+          margin: 0 1.2rem;
           border-bottom: 1px solid var(--on-surface-color);
+          background-color: var(--surface-color);
+          padding: 1rem 0;
 
           h2 {
             flex: 1;
@@ -114,6 +122,10 @@ export class Dialog extends DotConnectElement {
             cursor: pointer;
           }
         }
+
+        #content {
+          margin: 1.2rem;
+        }
       `,
     ];
   }
@@ -147,7 +159,9 @@ export class Dialog extends DotConnectElement {
           ${closeIcon({ size: "1rem" })}
         </div>
       </header>
-      <slot name="content"></slot>
+      <div id="content">
+        <slot name="content"></slot>
+      </div>
     </dialog>`;
   }
 }

diff --git a/packages/dot-connect/src/elements/components/element.ts b/packages/dot-connect/src/elements/components/element.ts
@@ -16,6 +16,12 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) {
         light-dark(#000000, #ffffff)
       );
 
+      --surface-container-color: color-mix(
+        in srgb,
+        var(--on-surface-color),
+        transparent 95%
+      );
+
       --info-color: var(--dc-info-color, light-dark(#007aff, #0a84ff));
       --success-color: var(--dc-success-color, light-dark(#34c759, #30d158));
       --error-color: var(--dc-error-color, light-dark(#ff3b30, #ff453a));
@@ -60,7 +66,13 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) {
       }
 
       &.xs {
-        font-size: 0.4rem;
+        font-size: 0.5rem;
+      }
+
+      &.text {
+        color: var(--primary-color);
+        padding-inline-start: 0;
+        padding-inline-end: 0;
       }
 
       &.info {
@@ -78,11 +90,11 @@ export abstract class DotConnectElement extends SignalWatcher(LitElement) {
       &.info,
       &.success,
       &.error {
-        background-color: color-mix(
-          in srgb,
-          var(--on-surface-color),
-          transparent 95%
-        );
+        background-color: var(--surface-container-color);
+      }
+
+      &.text {
+        background-color: transparent;
       }
 
       &:hover {