@ckb-ccc/connector 0.0.4-alpha.1 → 0.0.4-alpha.11

package/README.md

@@ -1,12 +1,17 @@
-<h1 align="center" style="font-size: 64px;">
-  CCC
+<h1 align="center" style="font-size: 48px;">
+  CCC Connector
 </h1>
 
 <p align="center">
-  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc">
-  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master">
-  <img alt="GitHub deployments" src="https://img.shields.io/github/deployments/ckb-ecofund/ccc/production">
-  <img alt="Demo" src="https://img.shields.io/website?url=https%3A%2F%2Fckbccc-demo.vercel.app%2F&label=Demo">
+  <a href="https://www.npmjs.com/package/@ckb-ccc/connector"><img
+    alt="NPM Version" src="https://img.shields.io/npm/v/%40ckb-ccc%2Fconnector"
+  /></a>
+  <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/ckb-ecofund/ccc" />
+  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/ckb-ecofund/ccc/master" />
+  <img alt="GitHub deployments" src="https://img.shields.io/github/deployments/ckb-ecofund/ccc/production" />
+  <a href="https://ckbccc-demo.vercel.app/"><img
+    alt="Demo" src="https://img.shields.io/website?url=https%3A%2F%2Fckbccc-demo.vercel.app%2F&label=Demo"
+  /></a>
 </p>
 
 <p align="center">
@@ -29,4 +34,4 @@ This project is still under active development, and we are looking forward to yo
 
 <h3 align="center">
   Read more about CCC on its <a href="https://github.com/ckb-ecofund/ccc">GitHub Repo</a>.
-</h3>
+</h3>

package/dist/advancedBarrel.d.ts

@@ -1,3 +1,4 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
 export * from "./scenes";
+export * from "./types";
 //# sourceMappingURL=advancedBarrel.d.ts.map

package/dist/advancedBarrel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"advancedBarrel.d.ts","sourceRoot":"","sources":["../src/advancedBarrel.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,UAAU,CAAC"}
+{"version":3,"file":"advancedBarrel.d.ts","sourceRoot":"","sources":["../src/advancedBarrel.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/advancedBarrel.js

@@ -1,2 +1,3 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
 export * from "./scenes";
+export * from "./types";

package/dist/connector/index.d.ts

@@ -1,17 +1,22 @@
 import { ccc } from "@ckb-ccc/ccc";
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 import { ConnectorStatus } from "../status";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
-    private existedEip6963;
+    private resetListeners;
     isOpen: boolean;
+    client: ccc.Client;
     wallet?: ccc.Wallet;
     signer?: ccc.SignerInfo;
     status: ConnectorStatus;
     connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    refreshSigners(): void;
+    reset(): void;
     addSigner(name: string, icon: string, type: ccc.SignerType, signer: ccc.Signer): void;
     render(): import("lit").TemplateResult<1>;
     private onClose;
+    private onReset;
     private onWalletSelected;
     private onSignerSelected;
     static styles: import("lit").CSSResult;

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,EAAa,MAAM,KAAK,CAAC;AAW5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,cAAc,CAAgB;IAG/B,MAAM,EAAE,OAAO,CAAS;IAGxB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAExB,MAAM,EAAE,eAAe,CAAmC;IAEjE,iBAAiB,IAAI,IAAI;IAkCzB,SAAS,CACP,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,CAAC,UAAU,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM;IAkBpB,MAAM;IAmDN,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAStB;IAEF,MAAM,CAAC,MAAM,0BAqIX;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;AAW5D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAG5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IAGxB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IAEnD,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAExB,MAAM,EAAE,eAAe,CAAmC;IAEjE,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzD,cAAc;IA6Bd,KAAK;IAwBL,SAAS,CACP,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,CAAC,UAAU,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM;IAkBpB,MAAM;IAyDN,OAAO,CAAC,OAAO,CAKb;IAEF,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAetB;IAEF,MAAM,CAAC,MAAM,0BAqIX;CACH"}

package/dist/connector/index.js

@@ -17,21 +17,30 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
         super(...arguments);
         this.wallets = [];
-        this.existedEip6963 = [];
+        this.resetListeners = [];
         this.isOpen = false;
+        this.client = new ccc.ClientPublicTestnet();
         this.status = ConnectorStatus.SelectingSigner;
         this.onClose = () => {
-            this.dispatchEvent(new SignerChangedEvent());
+            if (this.status === ConnectorStatus.SelectingSigner) {
+                this.onReset();
+            }
             this.dispatchEvent(new CloseEvent());
         };
+        this.onReset = () => {
+            this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.SelectingSigner));
+            this.dispatchEvent(new SignerChangedEvent());
+        };
         this.onWalletSelected = (wallet) => {
             this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
         };
         this.onSignerSelected = (wallet, signer) => {
-            this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
-            this.dispatchEvent(new SignerChangedEvent(wallet, signer));
             (async () => {
-                await signer.signer.connect();
+                this.dispatchEvent(new SignerChangedEvent(wallet, signer));
+                if (!(await signer.signer.isConnected())) {
+                    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
+                    await signer.signer.connect();
+                }
                 this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
                 this.dispatchEvent(new CloseEvent());
             })();
@@ -39,23 +48,48 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        const client = new ccc.ClientPublicTestnet();
-        const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
+        this.refreshSigners();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.get("client")) {
+            this.reset();
+            this.refreshSigners();
+        }
+    }
+    refreshSigners() {
+        const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
         if (uniSatSigner) {
             this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
         }
-        const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(client);
+        const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
         if (okxBitcoinSigner) {
             this.addSigner("OKX Wallet", OKX_SVG, ccc.SignerType.BTC, okxBitcoinSigner);
         }
-        const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
-        eip6963Manager.subscribeSigners((signer) => {
-            if (this.existedEip6963.indexOf(signer.detail.info.uuid) !== -1) {
+        const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
+        this.resetListeners.push(eip6963Manager.subscribeSigners((signer) => {
+            this.addSigner(`${signer.detail.info.name}`, signer.detail.info.icon, ccc.SignerType.EVM, signer);
+        }));
+    }
+    reset() {
+        this.wallets = [];
+        (async () => {
+            if (!this.signer) {
                 return;
             }
-            this.existedEip6963.push(signer.detail.info.uuid);
-            this.addSigner(`${signer.detail.info.name}`, signer.detail.info.icon, ccc.SignerType.EVM, signer);
-        });
+            const newSigner = await this.signer.signer.replaceClient(this.client);
+            if (newSigner) {
+                this.onSignerSelected(this.wallet, {
+                    ...this.signer,
+                    signer: newSigner,
+                });
+            }
+            else {
+                this.onReset();
+            }
+        })();
+        const resetListeners = this.resetListeners;
+        this.resetListeners = [];
+        resetListeners.forEach((listener) => listener());
     }
     addSigner(name, icon, type, signer) {
         const wallet = this.wallets.find((wallet) => wallet.name === name);
@@ -76,13 +110,14 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     }
     render() {
         const [title, body] = (() => {
-            if (!this.wallet) {
+            const wallet = ccc.apply((wallet) => this.wallets.find((w) => w.name === wallet.name), this.wallet);
+            if (!wallet) {
                 return generateWalletsScene(this.wallets, this.onWalletSelected, this.onSignerSelected);
             }
             if (!this.signer) {
-                return generateSignersScene(this.wallet, this.onSignerSelected);
+                return generateSignersScene(wallet, this.onSignerSelected);
             }
-            return generateConnectingScene(this.wallet, this.signer, this.onSignerSelected);
+            return generateConnectingScene(wallet, this.signer, this.onSignerSelected);
         })();
         return html `<style>
         :host {
@@ -256,6 +291,9 @@ __decorate([
 __decorate([
     property()
 ], WebComponentConnector.prototype, "isOpen", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "client", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "wallet", void 0);

package/dist/scenes/connecting.d.ts

@@ -1,3 +1,3 @@
 import { ccc } from "@ckb-ccc/ccc";
-export declare function generateConnectingScene(wallet: ccc.Wallet, signer: ccc.SignerInfo, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+export declare function generateConnectingScene(wallet: ccc.Wallet, signer: ccc.SignerInfo, onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
 //# sourceMappingURL=connecting.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../src/scenes/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAqB1E"}
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../src/scenes/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAqBtF"}

package/dist/scenes/signers.d.ts

@@ -1,4 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
+import { WalletWithSigners } from "../types";
 export declare function signerTypeToIcon(type: ccc.SignerType): string;
-export declare function generateSignersScene(wallet: ccc.Wallet, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+export declare function generateSignersScene(wallet: WalletWithSigners, onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
 //# sourceMappingURL=signers.d.ts.map

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;AAKnC,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAK7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAyB1E"}
+{"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,CAK7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,EACzB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAyBtF"}

package/dist/scenes/wallets.d.ts

@@ -1,3 +1,4 @@
 import { ccc } from "@ckb-ccc/ccc";
-export declare function generateWalletsScene(wallets: ccc.Wallet[], onWalletSelected: (wallet: ccc.Wallet) => unknown, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): unknown[];
+import { WalletWithSigners } from "../types";
+export declare function generateWalletsScene(wallets: WalletWithSigners[], onWalletSelected: (wallet: ccc.Wallet) => unknown, onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown): unknown[];
 //# sourceMappingURL=wallets.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/scenes/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,EACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO,EACjD,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,aAwB1E"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/scenes/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,iBAAiB,EAAE,EAC5B,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO,EACjD,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,aAwBtF"}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+import { ccc } from "@ckb-ccc/ccc";
+export type WalletWithSigners = ccc.Wallet & {
+    signers: ccc.SignerInfo[];
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,MAAM,GAAG;IAC3C,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;CAC3B,CAAC"}

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.4-alpha.1",
+  "version": "0.0.4-alpha.11",
   "description": "Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/ccc": "0.0.4-alpha.1",
+    "@ckb-ccc/ccc": "0.0.4-alpha.11",
     "lit": "^3.1.3"
   },
-  "gitHead": "7dab1a1d6e3e380b26f43d0d0308bd4da1617029"
+  "gitHead": "db0297c0753349e2650d2845f42f546316078d5d"
 }

package/src/advancedBarrel.ts

@@ -1,2 +1,3 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
 export * from "./scenes";
+export * from "./types";

package/src/connector/index.ts

@@ -1,5 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
-import { LitElement, css, html } from "lit";
+import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg";
 import { OKX_SVG } from "../assets/okx.svg";
@@ -11,16 +11,20 @@ import {
   generateWalletsScene,
 } from "../scenes";
 import { ConnectorStatus } from "../status";
+import { WalletWithSigners } from "../types";
 
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
-  private wallets: ccc.Wallet[] = [];
-  private existedEip6963: string[] = [];
+  private wallets: WalletWithSigners[] = [];
+
+  private resetListeners: (() => void)[] = [];
 
   @property()
   public isOpen: boolean = false;
 
+  @property()
+  public client: ccc.Client = new ccc.ClientPublicTestnet();
   @property()
   public wallet?: ccc.Wallet;
   @property()
@@ -30,14 +34,23 @@ export class WebComponentConnector extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.refreshSigners();
+  }
+
+  willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.get("client")) {
+      this.reset();
+      this.refreshSigners();
+    }
+  }
 
-    const client = new ccc.ClientPublicTestnet();
-    const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
+  refreshSigners() {
+    const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
       this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
     }
 
-    const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(client);
+    const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
     if (okxBitcoinSigner) {
       this.addSigner(
         "OKX Wallet",
@@ -47,19 +60,41 @@ export class WebComponentConnector extends LitElement {
       );
     }
 
-    const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
-    eip6963Manager.subscribeSigners((signer) => {
-      if (this.existedEip6963.indexOf(signer.detail.info.uuid) !== -1) {
+    const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
+    this.resetListeners.push(
+      eip6963Manager.subscribeSigners((signer) => {
+        this.addSigner(
+          `${signer.detail.info.name}`,
+          signer.detail.info.icon,
+          ccc.SignerType.EVM,
+          signer,
+        );
+      }),
+    );
+  }
+
+  reset() {
+    this.wallets = [];
+
+    (async () => {
+      if (!this.signer) {
         return;
       }
-      this.existedEip6963.push(signer.detail.info.uuid);
-      this.addSigner(
-        `${signer.detail.info.name}`,
-        signer.detail.info.icon,
-        ccc.SignerType.EVM,
-        signer,
-      );
-    });
+
+      const newSigner = await this.signer.signer.replaceClient(this.client);
+      if (newSigner) {
+        this.onSignerSelected(this.wallet, {
+          ...this.signer,
+          signer: newSigner,
+        });
+      } else {
+        this.onReset();
+      }
+    })();
+
+    const resetListeners = this.resetListeners;
+    this.resetListeners = [];
+    resetListeners.forEach((listener) => listener());
   }
 
   addSigner(
@@ -86,7 +121,13 @@ export class WebComponentConnector extends LitElement {
 
   render() {
     const [title, body] = (() => {
-      if (!this.wallet) {
+      const wallet = ccc.apply(
+        (wallet: ccc.Wallet) =>
+          this.wallets.find((w) => w.name === wallet.name),
+        this.wallet,
+      );
+
+      if (!wallet) {
         return generateWalletsScene(
           this.wallets,
           this.onWalletSelected,
@@ -94,10 +135,10 @@ export class WebComponentConnector extends LitElement {
         );
       }
       if (!this.signer) {
-        return generateSignersScene(this.wallet, this.onSignerSelected);
+        return generateSignersScene(wallet, this.onSignerSelected);
       }
       return generateConnectingScene(
-        this.wallet,
+        wallet,
         this.signer,
         this.onSignerSelected,
       );
@@ -136,20 +177,33 @@ export class WebComponentConnector extends LitElement {
   }
 
   private onClose = () => {
-    this.dispatchEvent(new SignerChangedEvent());
+    if (this.status === ConnectorStatus.SelectingSigner) {
+      this.onReset();
+    }
     this.dispatchEvent(new CloseEvent());
   };
 
+  private onReset = () => {
+    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.SelectingSigner));
+    this.dispatchEvent(new SignerChangedEvent());
+  };
+
   private onWalletSelected = (wallet: ccc.Wallet) => {
     this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
   };
 
-  private onSignerSelected = (wallet: ccc.Wallet, signer: ccc.SignerInfo) => {
-    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
-    this.dispatchEvent(new SignerChangedEvent(wallet, signer));
-
+  private onSignerSelected = (
+    wallet: ccc.Wallet | undefined,
+    signer: ccc.SignerInfo,
+  ) => {
     (async () => {
-      await signer.signer.connect();
+      this.dispatchEvent(new SignerChangedEvent(wallet, signer));
+
+      if (!(await signer.signer.isConnected())) {
+        this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
+        await signer.signer.connect();
+      }
+
       this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
       this.dispatchEvent(new CloseEvent());
     })();

package/src/scenes/connecting.ts

@@ -5,7 +5,7 @@ import { RETRY_SVG } from "../assets/retry.svg";
 export function generateConnectingScene(
   wallet: ccc.Wallet,
   signer: ccc.SignerInfo,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown,
 ) {
   return [
     wallet.name,

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, ETH_SVG } from "../assets/chains";
+import { WalletWithSigners } from "../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
@@ -11,8 +12,8 @@ export function signerTypeToIcon(type: ccc.SignerType): string {
 }
 
 export function generateSignersScene(
-  wallet: ccc.Wallet,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  wallet: WalletWithSigners,
+  onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown,
 ) {
   return [
     "Select a Chain",

package/src/scenes/wallets.ts

@@ -1,11 +1,12 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
+import { WalletWithSigners } from "../types";
 
 export function generateWalletsScene(
-  wallets: ccc.Wallet[],
+  wallets: WalletWithSigners[],
   onWalletSelected: (wallet: ccc.Wallet) => unknown,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown,
 ) {
   return [
     "Connect Wallet",

package/src/types/index.ts

@@ -0,0 +1,5 @@
+import { ccc } from "@ckb-ccc/ccc";
+
+export type WalletWithSigners = ccc.Wallet & {
+  signers: ccc.SignerInfo[];
+};