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`
${this.#connectedWallets.value.length === 1
? walletIcon({ size: "1em" })
: walletsIcon({ size: "1em" })}`
+ >
+ ${this.#accounts.value.length}
+ ${usersIcon({ size: "1em" })}`
: html`Connect
${walletsIcon({ size: "1em" })}`}
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``;
+
+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`