@ckb-ccc/connector 0.0.5-alpha.7 → 0.0.5-alpha.9

package/dist/advancedBarrel.d.ts

@@ -1,5 +1,4 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
 export * from "./scenes";
-export * from "./signerOpenLink";
 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;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,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,4 +1,3 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
 export * from "./scenes";
-export * from "./signerOpenLink";
 export * from "./types";

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;
@@ -14,6 +12,7 @@ export declare class WebComponentConnector extends LitElement {
     private scene;
     private selectedWallet?;
     private selectedSigner?;
+    private connectingError?;
     private walletName?;
     private signerName?;
     wallet?: ccc.Wallet;

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;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,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;IAGxC,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;IA2GN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAsB3B;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;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,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;IA+FN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAqC3B;IAEF,MAAM,CAAC,MAAM,0BAsPX;CACH"}

package/dist/connector/index.js

@@ -14,11 +14,10 @@ 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";
-import { SignerOpenLink } from "../signerOpenLink";
 var Scene;
 (function (Scene) {
     Scene["SelectingWallets"] = "SelectingWallets";
@@ -32,7 +31,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();
@@ -51,15 +49,31 @@ 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;
+            this.connectingError = undefined;
             this.selectedWallet = wallet;
             this.selectedSigner = signerInfo;
             (async () => {
                 const { signer } = signerInfo;
-                await signer.connect();
+                try {
+                    await signer.connect();
+                }
+                catch (error) {
+                    if (typeof error === "object") {
+                        const message = error?.message;
+                        if (typeof message === "string") {
+                            this.connectingError = message;
+                        }
+                        else {
+                            this.connectingError = JSON.stringify(message);
+                        }
+                        return;
+                    }
+                    this.connectingError = JSON.stringify(error);
+                }
                 if (!(await signer.isConnected())) {
                     return;
                 }
@@ -74,9 +88,6 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             })();
         };
     }
-    setIsOpen(isOpen) {
-        this.isOpen = isOpen;
-    }
     setClient(client) {
         this.client = client;
     }
@@ -182,13 +193,13 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             this.addSigner(`${signer.detail.info.name}`, "EVM", signer.detail.info.icon, signer);
         }));
         // === Dummy signers ===
-        this.addSigner("MetaMask", "EVM", METAMASK_SVG, new SignerOpenLink(this.client, `https://metamask.app.link/dapp/${window.location.href}`, ccc.SignerType.EVM));
+        this.addSigner("MetaMask", "EVM", METAMASK_SVG, new ccc.SignerOpenLink(this.client, ccc.SignerType.EVM, `https://metamask.app.link/dapp/${window.location.href}`));
         [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
-            this.addSigner("OKX Wallet", type, OKX_SVG, new SignerOpenLink(this.client, "https://www.okx.com/download?deeplink=" +
+            this.addSigner("OKX Wallet", type, OKX_SVG, new ccc.SignerOpenLink(this.client, type, "https://www.okx.com/download?deeplink=" +
                 encodeURIComponent("okx://wallet/dapp/url?dappUrl=" +
-                    encodeURIComponent(window.location.href)), type));
+                    encodeURIComponent(window.location.href))));
         });
-        this.addSigner("UniSat", ccc.SignerType.BTC, UNI_SAT_SVG, new SignerOpenLink(this.client, "https://unisat.io/download", ccc.SignerType.BTC));
+        this.addSigner("UniSat", ccc.SignerType.BTC, UNI_SAT_SVG, new ccc.SignerOpenLink(this.client, ccc.SignerType.BTC, "https://unisat.io/download"));
         // ===
     }
     async addSigner(walletName, signerName, icon, signer) {
@@ -204,7 +215,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
             updated = true;
             const allSigners = [...wallet.signers, signerInfo];
-            const signers = allSigners.filter(({ signer }) => !(signer instanceof SignerOpenLink));
+            const signers = allSigners.filter(({ signer }) => !(signer instanceof ccc.SignerDummy));
             return {
                 ...wallet,
                 signers: signers.length !== 0 ? signers : [signerInfo],
@@ -241,45 +252,32 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
                 return generateSignersScene(this.selectedWallet, this.signerSelectedHandler);
             }
-            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
+            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.connectingError, this.signerSelectedHandler);
         })();
         const canBack = [
             Scene.SelectingSigners,
             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;
@@ -295,17 +293,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) {
@@ -568,9 +566,6 @@ __decorate([
 __decorate([
     property()
 ], WebComponentConnector.prototype, "signerFilter", void 0);
-__decorate([
-    state()
-], WebComponentConnector.prototype, "isOpen", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "name", void 0);
@@ -589,6 +584,9 @@ __decorate([
 __decorate([
     state()
 ], WebComponentConnector.prototype, "selectedSigner", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "connectingError", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "walletName", 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/connecting.d.ts

@@ -1,4 +1,4 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { WalletWithSigners } from "../types";
-export declare function generateConnectingScene(wallet: WalletWithSigners, signer: ccc.SignerInfo, onSignerSelected: (wallet: WalletWithSigners, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+export declare function generateConnectingScene(wallet: WalletWithSigners, signer: ccc.SignerInfo, error: string | undefined, onSignerSelected: (wallet: WalletWithSigners, 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;AAGnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDAqBb"}
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../src/scenes/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA2Bb"}

package/dist/scenes/connecting.js

@@ -1,6 +1,6 @@
 import { html } from "lit";
 import { RETRY_SVG } from "../assets/retry.svg";
-export function generateConnectingScene(wallet, signer, onSignerSelected) {
+export function generateConnectingScene(wallet, signer, error, onSignerSelected) {
     return [
         wallet.name,
         html `
@@ -9,8 +9,14 @@ export function generateConnectingScene(wallet, signer, onSignerSelected) {
         src=${wallet.icon}
         alt=${wallet.name}
       />
-      <span class="text-bold">Opening ${wallet.name}...</span>
-      <span class="text-tip">Confirm connection in the wallet</span>
+      <span class="text-bold"
+        >${error
+            ? `Failed to open ${wallet.name}`
+            : `Opening ${wallet.name}...`}</span
+      >
+      <span class="text-tip text-center"
+        >${error ?? "Confirm connection in the wallet"}</span
+      >
       <button
         class="btn-secondary mt-2 mb-2"
         @click=${() => onSignerSelected(wallet, signer)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.5-alpha.7",
+  "version": "0.0.5-alpha.9",
   "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.7",
+    "@ckb-ccc/ccc": "0.0.5-alpha.8",
     "lit": "^3.1.3"
   },
-  "gitHead": "efbdcebedb8375237b3dd98be358ca7df9765cfd"
+  "gitHead": "086c38557153da6819615bdc08f80f56b00d79ca"
 }

package/src/advancedBarrel.ts

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

package/src/connector/index.ts

@@ -8,7 +8,7 @@ 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,
@@ -16,7 +16,6 @@ import {
 } from "../scenes";
 import { generateConnectedScene } from "../scenes/connected";
 import { generateNetworksScene } from "../scenes/networks";
-import { SignerOpenLink } from "../signerOpenLink";
 import { WalletWithSigners } from "../types";
 
 enum Scene {
@@ -39,12 +38,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()
@@ -62,6 +55,8 @@ export class WebComponentConnector extends LitElement {
   private selectedWallet?: WalletWithSigners;
   @state()
   private selectedSigner?: ccc.SignerInfo;
+  @state()
+  private connectingError?: string;
 
   @state()
   private walletName?: string;
@@ -229,10 +224,10 @@ export class WebComponentConnector extends LitElement {
       "MetaMask",
       "EVM",
       METAMASK_SVG,
-      new SignerOpenLink(
+      new ccc.SignerOpenLink(
         this.client,
-        `https://metamask.app.link/dapp/${window.location.href}`,
         ccc.SignerType.EVM,
+        `https://metamask.app.link/dapp/${window.location.href}`,
       ),
     );
     [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
@@ -240,14 +235,14 @@ export class WebComponentConnector extends LitElement {
         "OKX Wallet",
         type,
         OKX_SVG,
-        new SignerOpenLink(
+        new ccc.SignerOpenLink(
           this.client,
+          type,
           "https://www.okx.com/download?deeplink=" +
             encodeURIComponent(
               "okx://wallet/dapp/url?dappUrl=" +
                 encodeURIComponent(window.location.href),
             ),
-          type,
         ),
       );
     });
@@ -255,10 +250,10 @@ export class WebComponentConnector extends LitElement {
       "UniSat",
       ccc.SignerType.BTC,
       UNI_SAT_SVG,
-      new SignerOpenLink(
+      new ccc.SignerOpenLink(
         this.client,
-        "https://unisat.io/download",
         ccc.SignerType.BTC,
+        "https://unisat.io/download",
       ),
     );
     // ===
@@ -286,7 +281,7 @@ export class WebComponentConnector extends LitElement {
       updated = true;
       const allSigners = [...wallet.signers, signerInfo];
       const signers = allSigners.filter(
-        ({ signer }) => !(signer instanceof SignerOpenLink),
+        ({ signer }) => !(signer instanceof ccc.SignerDummy),
       );
       return {
         ...wallet,
@@ -349,6 +344,7 @@ export class WebComponentConnector extends LitElement {
       return generateConnectingScene(
         this.selectedWallet,
         this.selectedSigner,
+        this.connectingError,
         this.signerSelectedHandler,
       );
     })();
@@ -359,61 +355,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() {
@@ -441,7 +424,7 @@ export class WebComponentConnector extends LitElement {
       this.scene = Scene.Connected;
     }
 
-    this.isOpen = false;
+    this.dispatchEvent(new ClosedEvent());
   };
 
   private signerSelectedHandler = (
@@ -449,11 +432,26 @@ export class WebComponentConnector extends LitElement {
     signerInfo: ccc.SignerInfo,
   ) => {
     this.scene = Scene.Connecting;
+    this.connectingError = undefined;
     this.selectedWallet = wallet;
     this.selectedSigner = signerInfo;
     (async () => {
       const { signer } = signerInfo;
-      await signer.connect();
+      try {
+        await signer.connect();
+      } catch (error) {
+        if (typeof error === "object") {
+          const message = (error as { message: unknown })?.message;
+          if (typeof message === "string") {
+            this.connectingError = message;
+          } else {
+            this.connectingError = JSON.stringify(message);
+          }
+          return;
+        }
+
+        this.connectingError = JSON.stringify(error);
+      }
       if (!(await signer.isConnected())) {
         return;
       }

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/connecting.ts

@@ -6,6 +6,7 @@ import { WalletWithSigners } from "../types";
 export function generateConnectingScene(
   wallet: WalletWithSigners,
   signer: ccc.SignerInfo,
+  error: string | undefined,
   onSignerSelected: (
     wallet: WalletWithSigners,
     signer: ccc.SignerInfo,
@@ -19,8 +20,14 @@ export function generateConnectingScene(
         src=${wallet.icon}
         alt=${wallet.name}
       />
-      <span class="text-bold">Opening ${wallet.name}...</span>
-      <span class="text-tip">Confirm connection in the wallet</span>
+      <span class="text-bold"
+        >${error
+          ? `Failed to open ${wallet.name}`
+          : `Opening ${wallet.name}...`}</span
+      >
+      <span class="text-tip text-center"
+        >${error ?? "Confirm connection in the wallet"}</span
+      >
       <button
         class="btn-secondary mt-2 mb-2"
         @click=${() => onSignerSelected(wallet, signer)}

package/dist/signerOpenLink/index.d.ts

@@ -1,13 +0,0 @@
-import { ccc } from "@ckb-ccc/ccc";
-export declare class SignerOpenLink extends ccc.Signer {
-    private readonly link;
-    readonly type: ccc.SignerType;
-    get signType(): ccc.SignerSignType;
-    constructor(client: ccc.Client, link: string, type: ccc.SignerType);
-    replaceClient(client: ccc.Client): Promise<SignerOpenLink>;
-    isConnected(): Promise<boolean>;
-    connect(): Promise<void>;
-    getInternalAddress(): Promise<string>;
-    getAddressObjs(): Promise<ccc.Address[]>;
-}
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/signerOpenLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,qBAAa,cAAe,SAAQ,GAAG,CAAC,MAAM;IAO1C,OAAO,CAAC,QAAQ,CAAC,IAAI;aACL,IAAI,EAAE,GAAG,CAAC,UAAU;IAPtC,IAAI,QAAQ,IAAI,GAAG,CAAC,cAAc,CAEjC;gBAGC,MAAM,EAAE,GAAG,CAAC,MAAM,EACD,IAAI,EAAE,MAAM,EACb,IAAI,EAAE,GAAG,CAAC,UAAU;IAKhC,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,OAAO,CAAC,cAAc,CAAC;IAI1D,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/B,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIxB,kBAAkB,IAAI,OAAO,CAAC,MAAM,CAAC;IAIrC,cAAc,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CAG/C"}

package/dist/signerOpenLink/index.js

@@ -1,26 +0,0 @@
-import { ccc } from "@ckb-ccc/ccc";
-export class SignerOpenLink extends ccc.Signer {
-    get signType() {
-        return ccc.SignerSignType.Unknown;
-    }
-    constructor(client, link, type) {
-        super(client);
-        this.link = link;
-        this.type = type;
-    }
-    async replaceClient(client) {
-        return new SignerOpenLink(client, this.link, this.type);
-    }
-    async isConnected() {
-        return false;
-    }
-    async connect() {
-        window.open(this.link, "_blank")?.focus();
-    }
-    async getInternalAddress() {
-        throw new Error("Can't get address from SignerOpenLink");
-    }
-    async getAddressObjs() {
-        throw new Error("Can't get addresses from SignerOpenLink");
-    }
-}

package/src/signerOpenLink/index.ts

@@ -1,35 +0,0 @@
-import { ccc } from "@ckb-ccc/ccc";
-
-export class SignerOpenLink extends ccc.Signer {
-  get signType(): ccc.SignerSignType {
-    return ccc.SignerSignType.Unknown;
-  }
-
-  constructor(
-    client: ccc.Client,
-    private readonly link: string,
-    public readonly type: ccc.SignerType,
-  ) {
-    super(client);
-  }
-
-  async replaceClient(client: ccc.Client): Promise<SignerOpenLink> {
-    return new SignerOpenLink(client, this.link, this.type);
-  }
-
-  async isConnected(): Promise<boolean> {
-    return false;
-  }
-
-  async connect(): Promise<void> {
-    window.open(this.link, "_blank")?.focus();
-  }
-
-  async getInternalAddress(): Promise<string> {
-    throw new Error("Can't get address from SignerOpenLink");
-  }
-
-  async getAddressObjs(): Promise<ccc.Address[]> {
-    throw new Error("Can't get addresses from SignerOpenLink");
-  }
-}