From 3fdc2bf8ec628d04c1e7c4709e1c08bc83083264 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?=
 <tien.nguyenkhac@icloud.com>
Date: Sun, 21 Jul 2024 22:45:37 +1200
Subject: [PATCH] feat: display number of connected accounts

---
 .../src/elements/dc-connection-button.ts      | 14 ++++++++---
 packages/dot-connect/src/icons/index.ts       |  1 +
 packages/dot-connect/src/icons/users.ts       | 23 +++++++++++++++++++
 packages/dot-connect/src/icons/wallets.ts     |  2 +-
 packages/dot-connect/src/stores.ts            |  8 ++++++-
 5 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 packages/dot-connect/src/icons/users.ts

diff --git a/packages/dot-connect/src/elements/dc-connection-button.ts b/packages/dot-connect/src/elements/dc-connection-button.ts
index 79bbb57..a6dde2f 100644
--- 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
index 799b0fe..5d7d389 100644
--- 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
new file mode 100644
index 0000000..297264f
--- /dev/null
+++ 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
index 9c1eec2..532c1b8 100644
--- 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
index 8922c37..8fc996b 100644
--- 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);