@ckb-ccc/connector 0.0.5-alpha.8 → 0.0.6-alpha.0

package/dist/assets/chains/nostr.svg.d.ts

@@ -0,0 +1,2 @@
+export declare const NOSTR_SVG: string;
+//# sourceMappingURL=nostr.svg.d.ts.map

package/dist/assets/chains/nostr.svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nostr.svg.d.ts","sourceRoot":"","sources":["../../../src/assets/chains/nostr.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAErB,CAAC"}

package/dist/assets/chains/nostr.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "../utils";
+export const NOSTR_SVG = encodeSvgToImgSrc('<svg version="1.1" id="_8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"><style type="text/css">.st0{fill:none;} .st1{fill:#FFFFFF;} .st2{fill:#662482;}</style><g><path class="st0" d="M0,0v256h256V0H0z M231.2,159.2c0,20.7,0,31.1-3.5,42.2c-4.4,12.2-14,21.8-26.2,26.2 c-11.1,3.5-21.5,3.5-42.2,3.5H96.8c-20.7,0-31.1,0-42.2-3.5c-12.2-4.4-21.8-14-26.2-26.2c-3.5-11.1-3.5-21.5-3.5-42.2V96.8 c0-20.7,0-31.1,3.5-42.2c4.4-12.2,14-21.8,26.2-26.2c11.2-3.5,21.5-3.5,42.2-3.5h62.5c20.7,0,31.1,0,42.2,3.5 c12.2,4.4,21.8,14,26.2,26.2c3.5,11.1,3.5,21.5,3.5,42.2V159.2z"/> <circle class="st1" cx="137.9" cy="99" r="12.1"/><path class="st1" d="M210.8,115.9c0-47.3-27.7-68.7-64.4-68.7c-16.4,0-31,4.4-42.4,12.5c-3.8,2.7-9,0.1-9-4.5 c0-3.1-2.5-5.7-5.7-5.7H57.7c-3.1,0-5.7,2.5-5.7,5.7v144c0,3.1,2.5,5.7,5.7,5.7h33.7c3.1,0,5.6-2.5,5.6-5.6v-8.4 c0-62.8-33.2-109.8-0.4-116c30-5.7,64.1-3,64.5,20.1c0,2,0.3,8,8.6,11.2c5,2,12.6,2.6,22.6,2.4c0,0,9.1-0.7,9.1,8.5 c0,11.5-20.4,10.7-20.4,10.7c-6.7,0.3-22.6-1.5-31.7,1.2c-4.8,1.5-9,4.2-11.5,9.1c-4.2,8.3-6.2,26.5-6.5,45.5v15.5 c0,3.1,2.5,5.7,5.7,5.7h68c3.1,0,5.7-2.5,5.7-5.7l0,0V115.9z"/><path class="st2" d="M227.6,54.6c-4.4-12.2-14-21.8-26.2-26.2c-11.1-3.5-21.5-3.5-42.2-3.5H96.8c-20.7,0-31.1,0-42.2,3.5 c-12.2,4.4-21.8,14-26.2,26.2c-3.5,11.2-3.5,21.5-3.5,42.2v62.5c0,20.7,0,31.1,3.5,42.2c4.4,12.2,14,21.8,26.2,26.2 c11.2,3.5,21.5,3.5,42.2,3.5h62.5c20.7,0,31.1,0,42.2-3.5c12.2-4.4,21.8-14,26.2-26.2c3.5-11.1,3.5-21.5,3.5-42.2V96.8 C231.2,76.1,231.2,65.7,227.6,54.6z M205.1,204.8h-68c-3.1,0-5.7-2.5-5.7-5.7v-15.5c0.3-19,2.3-37.2,6.5-45.5 c2.5-5,6.7-7.7,11.5-9.1c9-2.7,24.9-0.9,31.7-1.2c0,0,20.4,0.8,20.4-10.7c0-9.3-9.1-8.5-9.1-8.5c-10,0.3-17.7-0.4-22.6-2.4 c-8.3-3.3-8.6-9.2-8.6-11.2c-0.4-23.1-34.5-25.9-64.5-20.1c-32.8,6.2,0.4,53.3,0.4,116v8.4c-0.1,3.1-2.5,5.6-5.6,5.6H57.7 c-3.1,0-5.7-2.5-5.7-5.7v-144c0-3.1,2.5-5.7,5.7-5.7h31.7c3.1,0,5.7,2.5,5.7,5.7c0,4.7,5.2,7.2,9,4.5c11.4-8.2,26-12.5,42.4-12.5 c36.7,0,64.4,21.4,64.4,68.7v83.2l0,0C210.8,202.3,208.3,204.8,205.1,204.8z M125.7,99c0-6.7,5.4-12.1,12.1-12.1S150,92.3,150,99 s-5.4,12.1-12.1,12.1S125.7,105.8,125.7,99z"/></g></svg>');

package/dist/connector/index.d.ts

@@ -5,8 +5,6 @@ export declare class WebComponentConnector extends LitElement {
     private wallets;
     signerFilter?: (signerInfo: ccc.SignerInfo, wallet: ccc.Wallet) => Promise<boolean>;
     private resetListeners;
-    isOpen: boolean;
-    setIsOpen(isOpen: boolean): void;
     name?: string;
     icon?: string;
     client: ccc.Client;

package/dist/connector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,CAAC;AAyB5D,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAEnC,YAAY,CAAC,EAAE,CACpB,UAAU,EAAE,GAAG,CAAC,UAAU,EAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,CAAC;IAEtB,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IACxB,SAAS,CAAC,MAAM,EAAE,OAAO;IAKzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAKnC,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,cAAc,CAAC,CAAoB;IAE3C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAGjC,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAG/B,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAElC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;YAEZ,gBAAgB;YAUhB,aAAa;IAYpB,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoCnD,OAAO,CAAC,aAAa;YA2FP,SAAS;IAyCvB,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC3C,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC7C,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAE3C,MAAM;IA4GN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAqC3B;IAEF,MAAM,CAAC,MAAM,0BAsPX;CACH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,CAAC;AA0B5D,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAEnC,YAAY,CAAC,EAAE,CACpB,UAAU,EAAE,GAAG,CAAC,UAAU,EAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,CAAC;IAEtB,OAAO,CAAC,cAAc,CAAsB;IAGrC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAKnC,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,cAAc,CAAC,CAAoB;IAE3C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAGjC,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAG/B,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAElC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;YAEZ,gBAAgB;YAUhB,aAAa;IAYpB,UAAU;IAOjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoCnD,OAAO,CAAC,aAAa;YAoGP,SAAS;IAyCvB,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC3C,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC7C,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAE3C,MAAM;IA+FN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAqC3B;IAEF,MAAM,CAAC,MAAM,0BAsPX;CACH"}

package/dist/connector/index.js

@@ -8,13 +8,14 @@ import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { NOSTR_SVG } from "../assets/chains/nostr.svg";
 import { CLOSE_SVG } from "../assets/close.svg";
 import { JOY_ID_SVG } from "../assets/joy-id.svg";
 import { LEFT_SVG } from "../assets/left.svg";
 import { METAMASK_SVG } from "../assets/metamask.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
-import { WillUpdateEvent } from "../events";
+import { ClosedEvent, WillUpdateEvent } from "../events";
 import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
 import { generateConnectedScene } from "../scenes/connected";
 import { generateNetworksScene } from "../scenes/networks";
@@ -31,7 +32,6 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         super(...arguments);
         this.wallets = [];
         this.resetListeners = [];
-        this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
         this.scene = Scene.SelectingWallets;
         this.mainRef = createRef();
@@ -50,7 +50,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             else if ([Scene.SwitchingNetworks].includes(this.scene)) {
                 this.scene = Scene.Connected;
             }
-            this.isOpen = false;
+            this.dispatchEvent(new ClosedEvent());
         };
         this.signerSelectedHandler = (wallet, signerInfo) => {
             this.scene = Scene.Connecting;
@@ -89,9 +89,6 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             })();
         };
     }
-    setIsOpen(isOpen) {
-        this.isOpen = isOpen;
-    }
     setClient(client) {
         this.client = client;
     }
@@ -115,7 +112,6 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.scene = Scene.SelectingWallets;
     }
     disconnect() {
-        this.signer?.signer?.disconnect();
         this.walletName = undefined;
         this.signerName = undefined;
         this.saveConnection();
@@ -167,13 +163,18 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     reloadSigners() {
         this.wallets = [];
         (async () => {
-            if (!this.signer) {
+            const signer = this.signer;
+            if (!signer) {
                 return;
             }
-            this.signer = {
-                ...this.signer,
-                signer: await this.signer.signer.replaceClient(this.client),
-            };
+            if (await signer.signer.replaceClient(this.client)) {
+                this.signer = {
+                    ...signer,
+                };
+            }
+            else {
+                this.signer = undefined;
+            }
         })();
         this.resetListeners.forEach((listener) => listener());
         this.resetListeners = [];
@@ -192,6 +193,10 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         if (okxBitcoinSigner) {
             this.addSigner("OKX Wallet", "BTC", OKX_SVG, okxBitcoinSigner);
         }
+        const nip07Signer = ccc.Nip07.getNip07Signer(this.client);
+        if (nip07Signer) {
+            this.addSigner("Nostr", "Nostr", NOSTR_SVG, nip07Signer);
+        }
         const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
         this.resetListeners.push(eip6963Manager.subscribeSigners((signer) => {
             this.addSigner(`${signer.detail.info.name}`, "EVM", signer.detail.info.icon, signer);
@@ -263,38 +268,25 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             Scene.Connecting,
             Scene.SwitchingNetworks,
         ].includes(this.scene);
-        return html `<style>
-        :host {
-          ${this.isOpen ? "" : "display: none;"}
-          --background: #fff;
-          --divider: #eee;
-          --btn-primary: #f8f8f8;
-          --btn-primary-hover: #efeeee;
-          --btn-secondary: #ddd;
-          --btn-secondary-hover: #ccc;
-          color: #1e1e1e;
-          --tip-color: #666;
-        }
-      </style>
-      <div
-        class="background"
-        @click=${(event) => {
+        return html ` <div
+      class="background"
+      @click=${(event) => {
             if (event.target === event.currentTarget) {
                 this.closedHandler();
             }
         }}
-      >
-        <div class="main" ${ref(this.mainRef)}>
-          <div
-            class="header text-bold fs-lg ${title == null
+    >
+      <div class="main" ${ref(this.mainRef)}>
+        <div
+          class="header text-bold fs-lg ${title == null
             ? ""
             : "header-divider"}"
-            ${ref(this.headerRef)}
-          >
-            <img
-              class="back ${canBack ? "active" : ""}"
-              src=${LEFT_SVG}
-              @click=${() => {
+          ${ref(this.headerRef)}
+        >
+          <img
+            class="back ${canBack ? "active" : ""}"
+            src=${LEFT_SVG}
+            @click=${() => {
             if (this.scene === Scene.Connecting) {
                 if ((this.selectedWallet?.signers.length ?? 0) <= 1) {
                     this.scene = Scene.SelectingWallets;
@@ -310,17 +302,17 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
                 this.scene = Scene.Connected;
             }
         }}
-            />
-            ${title}
-            <img
-              class="close active"
-              src=${CLOSE_SVG}
-              @click=${this.closedHandler}
-            />
-          </div>
-          <div class="body" ${ref(this.bodyRef)}>${body}</div>
+          />
+          ${title}
+          <img
+            class="close active"
+            src=${CLOSE_SVG}
+            @click=${this.closedHandler}
+          />
         </div>
-      </div>`;
+        <div class="body" ${ref(this.bodyRef)}>${body}</div>
+      </div>
+    </div>`;
     }
     updated() {
         if (!this.mainRef.value) {
@@ -583,9 +575,6 @@ __decorate([
 __decorate([
     property()
 ], WebComponentConnector.prototype, "signerFilter", void 0);
-__decorate([
-    state()
-], WebComponentConnector.prototype, "isOpen", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "name", void 0);

package/dist/events/index.d.ts

@@ -1,4 +1,7 @@
 export declare class WillUpdateEvent extends Event {
     constructor();
 }
+export declare class ClosedEvent extends Event {
+    constructor();
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/events/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC;AAED,qBAAa,WAAY,SAAQ,KAAK;;CAIrC"}

package/dist/events/index.js

@@ -3,3 +3,8 @@ export class WillUpdateEvent extends Event {
         super("willUpdate", { composed: true });
     }
 }
+export class ClosedEvent extends Event {
+    constructor() {
+        super("closed", { composed: true });
+    }
+}

package/dist/scenes/signers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../../src/scenes/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAM7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA4Bb"}
+{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../../src/scenes/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAO7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA4Bb"}

package/dist/scenes/signers.js

@@ -2,11 +2,13 @@ import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
+import { NOSTR_SVG } from "../assets/chains/nostr.svg";
 export function signerTypeToIcon(type) {
     return {
         [ccc.SignerType.BTC]: BTC_SVG,
         [ccc.SignerType.EVM]: ETH_SVG,
         [ccc.SignerType.CKB]: CKB_SVG,
+        [ccc.SignerType.Nostr]: NOSTR_SVG,
     }[type];
 }
 export function generateSignersScene(wallet, onSignerSelected) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.5-alpha.8",
+  "version": "0.0.6-alpha.0",
   "description": "Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/ccc": "0.0.5-alpha.8",
+    "@ckb-ccc/ccc": "0.0.6-alpha.0",
     "lit": "^3.1.3"
   },
-  "gitHead": "f12b8758d8581bfae0c9a00abbb5f7d2c6d03147"
+  "gitHead": "2cbb4f450ed88e773a353a13ad006dbe6208f67f"
 }

package/src/assets/chains/nostr.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "../utils";
+
+export const NOSTR_SVG = encodeSvgToImgSrc(
+  '<svg version="1.1" id="_8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"><style type="text/css">.st0{fill:none;} .st1{fill:#FFFFFF;} .st2{fill:#662482;}</style><g><path class="st0" d="M0,0v256h256V0H0z M231.2,159.2c0,20.7,0,31.1-3.5,42.2c-4.4,12.2-14,21.8-26.2,26.2 c-11.1,3.5-21.5,3.5-42.2,3.5H96.8c-20.7,0-31.1,0-42.2-3.5c-12.2-4.4-21.8-14-26.2-26.2c-3.5-11.1-3.5-21.5-3.5-42.2V96.8 c0-20.7,0-31.1,3.5-42.2c4.4-12.2,14-21.8,26.2-26.2c11.2-3.5,21.5-3.5,42.2-3.5h62.5c20.7,0,31.1,0,42.2,3.5 c12.2,4.4,21.8,14,26.2,26.2c3.5,11.1,3.5,21.5,3.5,42.2V159.2z"/> <circle class="st1" cx="137.9" cy="99" r="12.1"/><path class="st1" d="M210.8,115.9c0-47.3-27.7-68.7-64.4-68.7c-16.4,0-31,4.4-42.4,12.5c-3.8,2.7-9,0.1-9-4.5 c0-3.1-2.5-5.7-5.7-5.7H57.7c-3.1,0-5.7,2.5-5.7,5.7v144c0,3.1,2.5,5.7,5.7,5.7h33.7c3.1,0,5.6-2.5,5.6-5.6v-8.4 c0-62.8-33.2-109.8-0.4-116c30-5.7,64.1-3,64.5,20.1c0,2,0.3,8,8.6,11.2c5,2,12.6,2.6,22.6,2.4c0,0,9.1-0.7,9.1,8.5 c0,11.5-20.4,10.7-20.4,10.7c-6.7,0.3-22.6-1.5-31.7,1.2c-4.8,1.5-9,4.2-11.5,9.1c-4.2,8.3-6.2,26.5-6.5,45.5v15.5 c0,3.1,2.5,5.7,5.7,5.7h68c3.1,0,5.7-2.5,5.7-5.7l0,0V115.9z"/><path class="st2" d="M227.6,54.6c-4.4-12.2-14-21.8-26.2-26.2c-11.1-3.5-21.5-3.5-42.2-3.5H96.8c-20.7,0-31.1,0-42.2,3.5 c-12.2,4.4-21.8,14-26.2,26.2c-3.5,11.2-3.5,21.5-3.5,42.2v62.5c0,20.7,0,31.1,3.5,42.2c4.4,12.2,14,21.8,26.2,26.2 c11.2,3.5,21.5,3.5,42.2,3.5h62.5c20.7,0,31.1,0,42.2-3.5c12.2-4.4,21.8-14,26.2-26.2c3.5-11.1,3.5-21.5,3.5-42.2V96.8 C231.2,76.1,231.2,65.7,227.6,54.6z M205.1,204.8h-68c-3.1,0-5.7-2.5-5.7-5.7v-15.5c0.3-19,2.3-37.2,6.5-45.5 c2.5-5,6.7-7.7,11.5-9.1c9-2.7,24.9-0.9,31.7-1.2c0,0,20.4,0.8,20.4-10.7c0-9.3-9.1-8.5-9.1-8.5c-10,0.3-17.7-0.4-22.6-2.4 c-8.3-3.3-8.6-9.2-8.6-11.2c-0.4-23.1-34.5-25.9-64.5-20.1c-32.8,6.2,0.4,53.3,0.4,116v8.4c-0.1,3.1-2.5,5.6-5.6,5.6H57.7 c-3.1,0-5.7-2.5-5.7-5.7v-144c0-3.1,2.5-5.7,5.7-5.7h31.7c3.1,0,5.7,2.5,5.7,5.7c0,4.7,5.2,7.2,9,4.5c11.4-8.2,26-12.5,42.4-12.5 c36.7,0,64.4,21.4,64.4,68.7v83.2l0,0C210.8,202.3,208.3,204.8,205.1,204.8z M125.7,99c0-6.7,5.4-12.1,12.1-12.1S150,92.3,150,99 s-5.4,12.1-12.1,12.1S125.7,105.8,125.7,99z"/></g></svg>',
+);

package/src/connector/index.ts

@@ -2,13 +2,14 @@ import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Ref, createRef, ref } from "lit/directives/ref.js";
+import { NOSTR_SVG } from "../assets/chains/nostr.svg";
 import { CLOSE_SVG } from "../assets/close.svg";
 import { JOY_ID_SVG } from "../assets/joy-id.svg";
 import { LEFT_SVG } from "../assets/left.svg";
 import { METAMASK_SVG } from "../assets/metamask.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
-import { WillUpdateEvent } from "../events";
+import { ClosedEvent, WillUpdateEvent } from "../events";
 import {
   generateConnectingScene,
   generateSignersScene,
@@ -38,12 +39,6 @@ export class WebComponentConnector extends LitElement {
 
   private resetListeners: (() => void)[] = [];
 
-  @state()
-  public isOpen: boolean = false;
-  public setIsOpen(isOpen: boolean) {
-    this.isOpen = isOpen;
-  }
-
   @property()
   public name?: string;
   @property()
@@ -103,7 +98,6 @@ export class WebComponentConnector extends LitElement {
   }
 
   public disconnect() {
-    this.signer?.signer?.disconnect();
     this.walletName = undefined;
     this.signerName = undefined;
     this.saveConnection();
@@ -178,14 +172,18 @@ export class WebComponentConnector extends LitElement {
     this.wallets = [];
 
     (async () => {
-      if (!this.signer) {
+      const signer = this.signer;
+      if (!signer) {
         return;
       }
 
-      this.signer = {
-        ...this.signer,
-        signer: await this.signer.signer.replaceClient(this.client),
-      };
+      if (await signer.signer.replaceClient(this.client)) {
+        this.signer = {
+          ...signer,
+        };
+      } else {
+        this.signer = undefined;
+      }
     })();
 
     this.resetListeners.forEach((listener) => listener());
@@ -213,6 +211,11 @@ export class WebComponentConnector extends LitElement {
       this.addSigner("OKX Wallet", "BTC", OKX_SVG, okxBitcoinSigner);
     }
 
+    const nip07Signer = ccc.Nip07.getNip07Signer(this.client);
+    if (nip07Signer) {
+      this.addSigner("Nostr", "Nostr", NOSTR_SVG, nip07Signer);
+    }
+
     const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
     this.resetListeners.push(
       eip6963Manager.subscribeSigners((signer) => {
@@ -361,61 +364,48 @@ export class WebComponentConnector extends LitElement {
       Scene.SwitchingNetworks,
     ].includes(this.scene);
 
-    return html`<style>
-        :host {
-          ${this.isOpen ? "" : "display: none;"}
-          --background: #fff;
-          --divider: #eee;
-          --btn-primary: #f8f8f8;
-          --btn-primary-hover: #efeeee;
-          --btn-secondary: #ddd;
-          --btn-secondary-hover: #ccc;
-          color: #1e1e1e;
-          --tip-color: #666;
+    return html` <div
+      class="background"
+      @click=${(event: Event) => {
+        if (event.target === event.currentTarget) {
+          this.closedHandler();
         }
-      </style>
-      <div
-        class="background"
-        @click=${(event: Event) => {
-          if (event.target === event.currentTarget) {
-            this.closedHandler();
-          }
-        }}
-      >
-        <div class="main" ${ref(this.mainRef)}>
-          <div
-            class="header text-bold fs-lg ${title == null
-              ? ""
-              : "header-divider"}"
-            ${ref(this.headerRef)}
-          >
-            <img
-              class="back ${canBack ? "active" : ""}"
-              src=${LEFT_SVG}
-              @click=${() => {
-                if (this.scene === Scene.Connecting) {
-                  if ((this.selectedWallet?.signers.length ?? 0) <= 1) {
-                    this.scene = Scene.SelectingWallets;
-                  } else {
-                    this.scene = Scene.SelectingSigners;
-                  }
-                } else if (this.scene === Scene.SelectingSigners) {
+      }}
+    >
+      <div class="main" ${ref(this.mainRef)}>
+        <div
+          class="header text-bold fs-lg ${title == null
+            ? ""
+            : "header-divider"}"
+          ${ref(this.headerRef)}
+        >
+          <img
+            class="back ${canBack ? "active" : ""}"
+            src=${LEFT_SVG}
+            @click=${() => {
+              if (this.scene === Scene.Connecting) {
+                if ((this.selectedWallet?.signers.length ?? 0) <= 1) {
                   this.scene = Scene.SelectingWallets;
-                } else if (this.scene === Scene.SwitchingNetworks) {
-                  this.scene = Scene.Connected;
+                } else {
+                  this.scene = Scene.SelectingSigners;
                 }
-              }}
-            />
-            ${title}
-            <img
-              class="close active"
-              src=${CLOSE_SVG}
-              @click=${this.closedHandler}
-            />
-          </div>
-          <div class="body" ${ref(this.bodyRef)}>${body}</div>
+              } else if (this.scene === Scene.SelectingSigners) {
+                this.scene = Scene.SelectingWallets;
+              } else if (this.scene === Scene.SwitchingNetworks) {
+                this.scene = Scene.Connected;
+              }
+            }}
+          />
+          ${title}
+          <img
+            class="close active"
+            src=${CLOSE_SVG}
+            @click=${this.closedHandler}
+          />
         </div>
-      </div>`;
+        <div class="body" ${ref(this.bodyRef)}>${body}</div>
+      </div>
+    </div>`;
   }
 
   updated() {
@@ -443,7 +433,7 @@ export class WebComponentConnector extends LitElement {
       this.scene = Scene.Connected;
     }
 
-    this.isOpen = false;
+    this.dispatchEvent(new ClosedEvent());
   };
 
   private signerSelectedHandler = (

package/src/events/index.ts

@@ -3,3 +3,9 @@ export class WillUpdateEvent extends Event {
     super("willUpdate", { composed: true });
   }
 }
+
+export class ClosedEvent extends Event {
+  constructor() {
+    super("closed", { composed: true });
+  }
+}

package/src/scenes/signers.ts

@@ -2,6 +2,7 @@ import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
+import { NOSTR_SVG } from "../assets/chains/nostr.svg";
 import { WalletWithSigners } from "../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
@@ -9,6 +10,7 @@ export function signerTypeToIcon(type: ccc.SignerType): string {
     [ccc.SignerType.BTC]: BTC_SVG,
     [ccc.SignerType.EVM]: ETH_SVG,
     [ccc.SignerType.CKB]: CKB_SVG,
+    [ccc.SignerType.Nostr]: NOSTR_SVG,
   }[type];
 }