feat: display number of connected accounts

tien · Jul 21, 2024 · 3fdc2bf · 3fdc2bf
1 parent d992d35
commit 3fdc2bf
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/packages/dot-connect/src/elements/dc-connection-button.ts b/packages/dot-connect/src/elements/dc-connection-button.ts
@@ -1,9 +1,10 @@
 import {
   wallets as walletsIcon,
   wallet as walletIcon,
+  users as usersIcon,
 } from "../icons/index.js";
 import { observableSignal } from "../observable-signal.js";
-import { connectedWallets$ } from "../stores.js";
+import { accounts$, connectedWallets$ } from "../stores.js";
 import DotConnectElement from "./components/dc-element.js";
 import "./dc-connection-dialog.js";
 import { signal } from "@lit-labs/preact-signals";
@@ -20,7 +21,10 @@ export default class ConnectionButton extends DotConnectElement {
       }
 
       .icon {
-        vertical-align: middle;
+        display: contents;
+        > * {
+          vertical-align: -0.125em;
+        }
       }
     `,
   ];
@@ -29,6 +33,8 @@ export default class ConnectionButton extends DotConnectElement {
 
   readonly #connectedWallets = observableSignal(this, connectedWallets$, []);
 
+  readonly #accounts = observableSignal(this, accounts$, []);
+
   override render() {
     return html`<div>
       <dc-connection-dialog
@@ -42,7 +48,9 @@ export default class ConnectionButton extends DotConnectElement {
                 >${this.#connectedWallets.value.length === 1
                   ? walletIcon({ size: "1em" })
                   : walletsIcon({ size: "1em" })}</span
-              >`
+              >
+              ${this.#accounts.value.length}
+              <span class="icon">${usersIcon({ size: "1em" })}</span>`
           : html`Connect
               <span class="icon">${walletsIcon({ size: "1em" })}</span>`}
       </button>

diff --git a/packages/dot-connect/src/icons/index.ts b/packages/dot-connect/src/icons/index.ts
@@ -3,5 +3,6 @@ export { default as connected } from "./connected.js";
 export { default as disconnected } from "./disconnected.js";
 export { default as download } from "./download.js";
 export { default as qrCode } from "./qr-code.js";
+export { default as users } from "./users.js";
 export { default as wallet } from "./wallet.js";
 export { default as wallets } from "./wallets.js";
diff --git a/packages/dot-connect/src/icons/users.ts b/packages/dot-connect/src/icons/users.ts
@@ -0,0 +1,23 @@
+import { IconProps } from "./types.js";
+import { html } from "lit";
+
+const users = ({ size = 24 }: IconProps) =>
+  html`<svg
+    width=${size}
+    height=${size}
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke="currentcolor"
+  >
+    <g>
+      <path
+        d="M10.9523 11.4719L9.92866 10.2412C8.18155 8.14076 8.32148 5.05539 10.2515 3.12174C12.318 1.05141 15.6726 1.05141 17.7391 3.12174C19.6691 5.05539 19.8091 8.14076 18.062 10.2412L17.0385 11.4716C16.3847 12.2576 16.7593 13.4563 17.7443 13.7303L19.1309 14.1159C22.9276 15.1717 25.5547 18.6291 25.5547 22.5698V26.371H2.44531V22.5633C2.44531 18.6259 5.06981 15.1713 8.86305 14.1156L10.2468 13.7306C11.2316 13.4565 11.6061 12.2578 10.9523 11.4719Z"
+      ></path>
+    </g>
+  </svg>`;
+
+export default users;
diff --git a/packages/dot-connect/src/icons/wallets.ts b/packages/dot-connect/src/icons/wallets.ts
@@ -5,7 +5,7 @@ const wallets = ({ size = 24 }: IconProps) =>
   html`<svg
     width=${size}
     height=${size}
-    viewBox="0 0 29 29"
+    viewBox="0 0 28 28"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     stroke-width="2"

diff --git a/packages/dot-connect/src/stores.ts b/packages/dot-connect/src/stores.ts
@@ -5,7 +5,11 @@ import type {
 } from "./types.js";
 import { wallets as rawWalletConfigs } from "./wallets/index.js";
 import { computed, signal } from "@lit-labs/preact-signals";
-import { aggregateWallets, getConnectedWallets } from "@reactive-dot/core";
+import {
+  aggregateWallets,
+  getAccounts,
+  getConnectedWallets,
+} from "@reactive-dot/core";
 import { Wallet, WalletAggregator } from "@reactive-dot/core/wallets.js";
 import { Observable, combineLatest } from "rxjs";
 import { map } from "rxjs/operators";
@@ -48,4 +52,6 @@ export const wallets$ = combineLatest([
 
 export const connectedWallets$ = getConnectedWallets(wallets$);
 
+export const accounts$ = getAccounts(wallets$);
+
 export const walletConfigs = signal(rawWalletConfigs);