@ckb-ccc/connector 0.0.14 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ckb-ccc/connector
 
+## 0.0.15
+
+### Patch Changes
+
+- [`2483637`](https://github.com/ckb-ecofund/ccc/commit/2483637c89a2e012ed6408d8cabc123b8a45faa9) Thanks [@Hanssen0](https://github.com/Hanssen0)! - fix(connector): animation
+
 ## 0.0.14
 
 ### Patch Changes

package/dist/components/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,qBACa,MAAO,SAAQ,UAAU;IAE7B,OAAO,EAAE,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IAEhC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM;IA+BN,MAAM,CAAC,MAAM,0BA0DX;CACH"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,qBACa,MAAO,SAAQ,UAAU;IAE7B,OAAO,EAAE,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IAEhC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM;IA6BN,MAAM,CAAC,MAAM,0BA0DX;CACH"}

package/dist/components/dialog.js

@@ -8,6 +8,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg.js";
 import { LEFT_SVG } from "../assets/left.svg.js";
+import { CloseEvent } from "../events/index.js";
 let Dialog = class Dialog extends LitElement {
     render() {
         return html `
@@ -26,7 +27,7 @@ let Dialog = class Dialog extends LitElement {
         <span
           class="close active"
           @click=${() => {
-            this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+            this.dispatchEvent(new CloseEvent());
         }}
         >
           ${CLOSE_SVG}

package/dist/connector/index.d.ts

@@ -28,6 +28,7 @@ export declare class WebComponentConnector extends LitElement {
     private readonly mainRef;
     private readonly bodyRef;
     render(): import("lit").TemplateResult<1>;
+    onClose(onClosed?: () => void): void;
     updated(): void;
     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,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAO5D,qBACa,qBAAsB,SAAQ,UAAU;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAE5C,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAE1C,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAGtE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAInC,OAAO,CAAC,sBAAsB,CAA+B;IAG7D,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;IAE/B,OAAO,CAAC,wBAAwB,CAAC,CAAa;IAEvC,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoBnD,aAAa;IAQP,YAAY,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,SAAS;IAsBxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CACV;IAEd,MAAM;IA0CN,OAAO;IASP,MAAM,CAAC,MAAM,0BAyBX;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;AAU5D,qBACa,qBAAsB,SAAQ,UAAU;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAE5C,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAE1C,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAGtE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAInC,OAAO,CAAC,sBAAsB,CAA+B;IAG7D,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;IAE/B,OAAO,CAAC,wBAAwB,CAAC,CAAa;IAEvC,UAAU;IASjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoBnD,aAAa;IAQP,YAAY,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,SAAS;IAsBxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CACV;IAEd,MAAM;IA2CN,OAAO,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI;IAY7B,OAAO;IASP,MAAM,CAAC,MAAM,0BAyBX;CACH"}

package/dist/connector/index.js

@@ -8,6 +8,7 @@ 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 { CloseEvent, } from "../events/index.js";
 import { SignersController } from "../signers/index.js";
 let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
@@ -21,11 +22,12 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.client = client;
     }
     disconnect() {
-        this.walletName = undefined;
-        this.signerName = undefined;
-        this.saveConnection();
-        this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
-        this.signer?.signer.disconnect();
+        this.onClose(() => {
+            this.walletName = undefined;
+            this.signerName = undefined;
+            this.saveConnection();
+            this.signer?.signer.disconnect();
+        });
     }
     loadConnection() {
         const { signerName, walletName, } = JSON.parse(window.localStorage.getItem("ccc-connection-info") ?? "{}");
@@ -85,10 +87,13 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
       class="background"
       @click=${(event) => {
             if (event.target === event.currentTarget) {
-                this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
-                this.bodyRef.value?.onClose?.();
+                this.onClose();
             }
         }}
+      @close=${(event) => {
+            event.stopPropagation();
+            this.onClose(event.callback);
+        }}
       @updated=${() => this.updated()}
     >
       <div class="main" ${ref(this.mainRef)}>
@@ -118,6 +123,16 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
       </div>
     </div>`;
     }
+    onClose(onClosed) {
+        if (this.mainRef.value) {
+            this.mainRef.value.style.height = "0";
+        }
+        setTimeout(() => {
+            this.dispatchEvent(new CloseEvent());
+            this.bodyRef.value?.onClose?.();
+            onClosed?.();
+        }, 150);
+    }
     updated() {
         if (!this.mainRef.value) {
             return;

package/dist/events/index.d.ts

@@ -0,0 +1,15 @@
+import { ccc } from "@ckb-ccc/ccc";
+export declare class SelectClientEvent extends Event {
+    client: ccc.Client;
+    constructor(client: ccc.Client);
+}
+export declare class ConnectedEvent extends Event {
+    readonly walletName: string;
+    readonly signerName: string;
+    constructor(walletName: string, signerName: string);
+}
+export declare class CloseEvent extends Event {
+    callback?: (() => void) | undefined;
+    constructor(callback?: (() => void) | undefined);
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,qBAAa,iBAAkB,SAAQ,KAAK;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM;gBAAlB,MAAM,EAAE,GAAG,CAAC,MAAM;CAGtC;AAED,qBAAa,cAAe,SAAQ,KAAK;aAErB,UAAU,EAAE,MAAM;aAClB,UAAU,EAAE,MAAM;gBADlB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM;CAIrC;AAED,qBAAa,UAAW,SAAQ,KAAK;IAChB,QAAQ,CAAC,SAAQ,IAAI;gBAArB,QAAQ,CAAC,SAAQ,IAAI,aAAA;CAGzC"}

package/dist/events/index.js

@@ -0,0 +1,19 @@
+export class SelectClientEvent extends Event {
+    constructor(client) {
+        super("select-client");
+        this.client = client;
+    }
+}
+export class ConnectedEvent extends Event {
+    constructor(walletName, signerName) {
+        super("connected");
+        this.walletName = walletName;
+        this.signerName = signerName;
+    }
+}
+export class CloseEvent extends Event {
+    constructor(callback) {
+        super("close", { bubbles: true, composed: true });
+        this.callback = callback;
+    }
+}

package/dist/scenes/connected.d.ts

@@ -1,9 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
-export declare class SelectClientEvent extends Event {
-    client: ccc.Client;
-    constructor(client: ccc.Client);
-}
 export declare function formatString(str: string | undefined, l?: number, r?: number): string | undefined;
 export declare class ConnectedScene extends LitElement {
     wallet?: ccc.Wallet;

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

@@ -1 +1 @@
-{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS5D,qBAAa,iBAAkB,SAAQ,KAAK;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM;gBAAlB,MAAM,EAAE,GAAG,CAAC,MAAM;CAGtC;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAG7E,OAAO,CAAC,kBAAkB,CAAC,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;IAE1B,OAAO,CAAC,eAAe,CAAS;IAEhC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzD,MAAM;IAoGN,MAAM,CAAC,MAAM,0BAmHX;IAEF,OAAO;CAGR"}
+{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU5D,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAG7E,OAAO,CAAC,kBAAkB,CAAC,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;IAE1B,OAAO,CAAC,eAAe,CAAS;IAEhC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzD,MAAM;IAoGN,MAAM,CAAC,MAAM,0BAmHX;IAEF,OAAO;CAGR"}

package/dist/scenes/connected.js

@@ -12,13 +12,8 @@ import { CKB_SVG } from "../assets/chains/index.js";
 import { DISCONNECT_SVG } from "../assets/diconnect.svg.js";
 import { SWAP_SVG } from "../assets/swap.svg.js";
 import { USER_SVG } from "../assets/user.svg.js";
+import { SelectClientEvent } from "../events/index.js";
 import { signerTypeToIcon } from "./selecting/signers.js";
-export class SelectClientEvent extends Event {
-    constructor(client) {
-        super("select-client");
-        this.client = client;
-    }
-}
 export function formatString(str, l = 9, r = 6) {
     if (str && str.length > l + r + 3) {
         return `${str.slice(0, l)}...${str.slice(-r)}`;

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

@@ -1 +1 @@
-{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA4Bb"}
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA0Bb"}

package/dist/scenes/selecting/connecting.js

@@ -21,9 +21,7 @@ export function generateConnectingScene(wallet, signer, error, onSignerSelected)
         class="mt-2"
         @click=${() => onSignerSelected(wallet, signer)}
       >
-
-        ${RETRY_SVG}
-        Try again
+        ${RETRY_SVG} Try again
       </ccc-button-pill>
     `,
     ];

package/dist/scenes/selecting/index.d.ts

@@ -1,10 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement } from "lit";
-export declare class ConnectedEvent extends Event {
-    readonly walletName: string;
-    readonly signerName: string;
-    constructor(walletName: string, signerName: string);
-}
 export declare class SelectingScene extends LitElement {
     wallets?: ccc.WalletWithSigners[];
     private selectedWallet?;

package/dist/scenes/selecting/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,qBAAa,cAAe,SAAQ,KAAK;aAErB,UAAU,EAAE,MAAM;aAClB,UAAU,EAAE,MAAM;gBADlB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM;CAIrC;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,cAAc,CAAC,CAAwB;IAE/C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,MAAM;IA+CC,OAAO;IAMd,OAAO,CAAC,qBAAqB,CAwC3B;IAEF,MAAM,CAAC,MAAM,0BA0DX;IAEF,OAAO;CAGR"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,qBACa,cAAe,SAAQ,UAAU;IAErC,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,cAAc,CAAC,CAAwB;IAE/C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,MAAM;IA4CC,OAAO;IAMd,OAAO,CAAC,qBAAqB,CA2C3B;IAEF,MAAM,CAAC,MAAM,0BA0DX;IAEF,OAAO;CAGR"}

package/dist/scenes/selecting/index.js

@@ -6,16 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { CloseEvent, ConnectedEvent } from "../../events/index.js";
 import { generateConnectingScene } from "./connecting.js";
 import { generateSignersScene } from "./signers.js";
 import { generateWalletsScene } from "./wallets.js";
-export class ConnectedEvent extends Event {
-    constructor(walletName, signerName) {
-        super("connected");
-        this.walletName = walletName;
-        this.signerName = signerName;
-    }
-}
 let SelectingScene = class SelectingScene extends LitElement {
     constructor() {
         super(...arguments);
@@ -49,8 +43,9 @@ let SelectingScene = class SelectingScene extends LitElement {
                     this.connectingError = JSON.stringify(message);
                     return;
                 }
-                this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
-                this.dispatchEvent(new ConnectedEvent(wallet.name, signerInfo.name));
+                this.dispatchEvent(new CloseEvent(() => {
+                    this.dispatchEvent(new ConnectedEvent(wallet.name, signerInfo.name));
+                }));
             })();
         };
     }
@@ -69,9 +64,6 @@ let SelectingScene = class SelectingScene extends LitElement {
         return html `<ccc-dialog
       header=${title}
       ?canBack=${this.selectedSigner || this.selectedWallet}
-      @close=${() => {
-            this.onClose();
-        }}
       @back=${() => {
             if (!this.selectedSigner ||
                 (this.selectedWallet && this.selectedWallet.signers.length <= 1)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "CCC - CKBer's Codebase. Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",

package/src/components/dialog.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg.js";
 import { LEFT_SVG } from "../assets/left.svg.js";
+import { CloseEvent } from "../events/index.js";
 
 @customElement("ccc-dialog")
 export class Dialog extends LitElement {
@@ -27,9 +28,7 @@ export class Dialog extends LitElement {
         <span
           class="close active"
           @click=${() => {
-            this.dispatchEvent(
-              new Event("close", { bubbles: true, composed: true }),
-            );
+            this.dispatchEvent(new CloseEvent());
           }}
         >
           ${CLOSE_SVG}

package/src/connector/index.ts

@@ -2,8 +2,11 @@ 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 { SelectClientEvent } from "../scenes/connected.js";
-import { ConnectedEvent } from "../scenes/selecting/index.js";
+import {
+  CloseEvent,
+  ConnectedEvent,
+  SelectClientEvent,
+} from "../events/index.js";
 import { SignersController } from "../signers/index.js";
 
 @customElement("ccc-connector")
@@ -39,11 +42,12 @@ export class WebComponentConnector extends LitElement {
   private unregisterSignerReplacer?: () => void;
 
   public disconnect() {
-    this.walletName = undefined;
-    this.signerName = undefined;
-    this.saveConnection();
-    this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
-    this.signer?.signer.disconnect();
+    this.onClose(() => {
+      this.walletName = undefined;
+      this.signerName = undefined;
+      this.saveConnection();
+      this.signer?.signer.disconnect();
+    });
   }
 
   private loadConnection() {
@@ -134,12 +138,13 @@ export class WebComponentConnector extends LitElement {
       class="background"
       @click=${(event: Event) => {
         if (event.target === event.currentTarget) {
-          this.dispatchEvent(
-            new Event("close", { bubbles: true, composed: true }),
-          );
-          this.bodyRef.value?.onClose?.();
+          this.onClose();
         }
       }}
+      @close=${(event: CloseEvent) => {
+        event.stopPropagation();
+        this.onClose(event.callback);
+      }}
       @updated=${() => this.updated()}
     >
       <div class="main" ${ref(this.mainRef)}>
@@ -171,6 +176,18 @@ export class WebComponentConnector extends LitElement {
     </div>`;
   }
 
+  onClose(onClosed?: () => void) {
+    if (this.mainRef.value) {
+      this.mainRef.value.style.height = "0";
+    }
+
+    setTimeout(() => {
+      this.dispatchEvent(new CloseEvent());
+      this.bodyRef.value?.onClose?.();
+      onClosed?.();
+    }, 150);
+  }
+
   updated() {
     if (!this.mainRef.value) {
       return;

package/src/events/index.ts

@@ -0,0 +1,22 @@
+import { ccc } from "@ckb-ccc/ccc";
+
+export class SelectClientEvent extends Event {
+  constructor(public client: ccc.Client) {
+    super("select-client");
+  }
+}
+
+export class ConnectedEvent extends Event {
+  constructor(
+    public readonly walletName: string,
+    public readonly signerName: string,
+  ) {
+    super("connected");
+  }
+}
+
+export class CloseEvent extends Event {
+  constructor(public callback?: () => void) {
+    super("close", { bubbles: true, composed: true });
+  }
+}

package/src/scenes/connected.ts

@@ -6,14 +6,9 @@ import { CKB_SVG } from "../assets/chains/index.js";
 import { DISCONNECT_SVG } from "../assets/diconnect.svg.js";
 import { SWAP_SVG } from "../assets/swap.svg.js";
 import { USER_SVG } from "../assets/user.svg.js";
+import { SelectClientEvent } from "../events/index.js";
 import { signerTypeToIcon } from "./selecting/signers.js";
 
-export class SelectClientEvent extends Event {
-  constructor(public client: ccc.Client) {
-    super("select-client");
-  }
-}
-
 export function formatString(
   str: string | undefined,
   l = 9,

package/src/scenes/selecting/connecting.ts

@@ -31,9 +31,7 @@ export function generateConnectingScene(
         class="mt-2"
         @click=${() => onSignerSelected(wallet, signer)}
       >
-
-        ${RETRY_SVG}
-        Try again
+        ${RETRY_SVG} Try again
       </ccc-button-pill>
     `,
   ];

package/src/scenes/selecting/index.ts

@@ -1,19 +1,11 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { CloseEvent, ConnectedEvent } from "../../events/index.js";
 import { generateConnectingScene } from "./connecting.js";
 import { generateSignersScene } from "./signers.js";
 import { generateWalletsScene } from "./wallets.js";
 
-export class ConnectedEvent extends Event {
-  constructor(
-    public readonly walletName: string,
-    public readonly signerName: string,
-  ) {
-    super("connected");
-  }
-}
-
 @customElement("ccc-selecting-scene")
 export class SelectingScene extends LitElement {
   @property()
@@ -55,9 +47,6 @@ export class SelectingScene extends LitElement {
     return html`<ccc-dialog
       header=${title}
       ?canBack=${this.selectedSigner || this.selectedWallet}
-      @close=${() => {
-        this.onClose();
-      }}
       @back=${() => {
         if (
           !this.selectedSigner ||
@@ -116,8 +105,11 @@ export class SelectingScene extends LitElement {
         return;
       }
 
-      this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
-      this.dispatchEvent(new ConnectedEvent(wallet.name, signerInfo.name));
+      this.dispatchEvent(
+        new CloseEvent(() => {
+          this.dispatchEvent(new ConnectedEvent(wallet.name, signerInfo.name));
+        }),
+      );
     })();
   };