@ckb-ccc/connector 0.0.4 → 0.0.5-alpha.0

package/README.md

@@ -1,3 +1,9 @@
+<p align="center">
+  <a href="https://ckbccc-demo.vercel.app/">
+    <img alt="Logo" src="https://raw.githubusercontent.com/ckb-ecofund/ccc/master/assets/logo.svg" width="20%" />
+  </a>
+</p>
+
 <h1 align="center" style="font-size: 48px;">
   CCC Connector
 </h1>

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "../utils";
+export const CKB_SVG = encodeSvgToImgSrc('<svg width="668" height="666.66669" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon points="170.265,206.318 223.416,206.318 223.416,93.897 264.161,93.897 170.265,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /><polygon points="324.79,112.422 284.046,112.422 377.941,206.318 377.941,0 324.79,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /></svg>');

package/dist/assets/chains/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./btc.svg";
+export * from "./ckb.svg";
 export * from "./eth.svg";
 //# sourceMappingURL=index.d.ts.map

package/dist/assets/chains/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/chains/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/chains/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}

package/dist/assets/chains/index.js

@@ -1,2 +1,3 @@
 export * from "./btc.svg";
+export * from "./ckb.svg";
 export * from "./eth.svg";

package/dist/assets/joy-id.svg.d.ts

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

package/dist/assets/joy-id.svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"joy-id.svg.d.ts","sourceRoot":"","sources":["../../src/assets/joy-id.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,QAEtB,CAAC"}

package/dist/assets/joy-id.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const JOY_ID_SVG = encodeSvgToImgSrc('<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420" fill="none"><circle cx="210" cy="210" r="210" fill="#333333"/><path d="M271.127 204.419C279.096 204.419 285.555 197.959 285.555 189.991C285.555 182.022 279.096 175.562 271.127 175.562C263.159 175.562 256.699 182.022 256.699 189.991C256.699 197.959 263.159 204.419 271.127 204.419Z" fill="#8CDD00"/><path d="M173.995 175.562C166.773 175.562 160.91 181.425 160.91 188.648C160.91 195.87 166.773 201.733 173.995 201.733C181.218 201.733 187.081 195.87 187.081 188.648C187.064 181.425 181.218 175.562 173.995 175.562Z" fill="#8CDD00"/><path d="M213.43 164.836L198.969 233.586C197.626 240.006 191.878 244.657 185.327 244.657C181.086 244.657 177.139 242.757 174.47 239.465C172.39 236.894 171.342 233.734 171.391 230.491L145.27 237.238C146.383 244.084 149.2 250.618 153.687 256.203C161.434 265.816 172.963 271.335 185.311 271.335C204.407 271.335 221.111 257.775 225.041 239.089L240.665 164.852H213.43V164.836Z" fill="#C1C1C1"/><path d="M335.83 115.983C327.068 105.19 314.065 99 300.161 99H267.981L262.363 125.662H300.161C305.991 125.662 311.445 128.249 315.113 132.786C318.782 137.306 320.207 143.185 319.011 148.884L313.394 175.562H340.645L345.116 154.387C347.965 140.778 344.592 126.775 335.83 115.983Z" fill="#8CDD00"/><path d="M295.216 261.999C291.285 280.669 274.597 294.212 255.518 294.212H226.875L221.258 320.874H255.518C287.126 320.874 314.803 298.421 321.304 267.485L326.021 245.049H298.77L295.216 261.999Z" fill="#8CDD00"/><path d="M98.8061 152.39L93.9258 175.58H121.177L124.894 157.892C128.825 139.223 145.513 125.679 164.592 125.679H192.04L197.657 99.0176H164.592C132.985 99.0012 105.308 121.454 98.8061 152.39Z" fill="#8CDD00"/><path d="M104.998 287.072C101.33 282.552 99.9049 276.673 101.1 270.974L106.079 247.342L77.2555 254.777L74.9956 265.487C72.1296 279.097 75.5196 293.099 84.2813 303.891C93.0429 314.684 106.046 320.874 119.95 320.874H150.935L156.553 294.212H119.95C114.12 294.196 108.666 291.608 104.998 287.072Z" fill="#8CDD00"/></svg>');

package/dist/assets/metamask.svg.d.ts

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

package/dist/assets/metamask.svg.d.ts.map

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

package/dist/assets/metamask.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const METAMASK_SVG = encodeSvgToImgSrc(`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6"><style>.st1,.st6{fill:#e4761b;stroke:#e4761b;stroke-linecap:round;stroke-linejoin:round}.st6{fill:#f6851b;stroke:#f6851b}</style><path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z"/><path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1"/><path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1"/><path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z"/><path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z"/><path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"/><path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z"/><path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6"/><path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"/><path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"/><path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"/><path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6"/><script xmlns=""/></svg>`);

package/dist/connector/index.d.ts

@@ -1,6 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
-import { WalletWithSigners } from "../types";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
     private resetListeners;
@@ -8,15 +7,13 @@ export declare class WebComponentConnector extends LitElement {
     setIsOpen(isOpen: boolean): void;
     client: ccc.Client;
     setClient(client: ccc.Client): void;
-    private walletName?;
-    private signerType?;
+    private scene;
     private selectedWallet?;
-    private updateWallet;
     private selectedSigner?;
-    private updateSigner;
-    wallet?: WalletWithSigners;
+    private walletName?;
+    private signerName?;
+    wallet?: ccc.Wallet;
     signer?: ccc.SignerInfo;
-    private canConnect;
     private prepareSigner;
     disconnect(): void;
     private loadConnection;

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;AAW5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IACxB,SAAS,CAAC,MAAM,EAAE,OAAO;IAKzB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAKnC,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEpC,OAAO,CAAC,cAAc,CAAC,CAAoB;IAC3C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,YAAY;IAMb,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAC/B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa;IAuBd,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAuBnD,OAAO,CAAC,aAAa;IAoDrB,OAAO,CAAC,SAAS;IA8BjB,MAAM;IAsDN,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,qBAAqB,CAO3B;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;AAqB5D,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IACxB,SAAS,CAAC,MAAM,EAAE,OAAO;IAKzB,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;IAC/B,OAAO,CAAC,aAAa;IAad,UAAU;IAOjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA0BnD,OAAO,CAAC,aAAa;IAyDrB,OAAO,CAAC,SAAS;IA+BjB,MAAM;IAwDN,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAkB3B;IAEF,MAAM,CAAC,MAAM,0BAiIX;CACH"}

package/dist/connector/index.js

@@ -8,10 +8,18 @@ import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
 import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
+var Scene;
+(function (Scene) {
+    Scene["SelectingWallets"] = "SelectingWallets";
+    Scene["SelectingSigners"] = "SelectingSigners";
+    Scene["Connecting"] = "Connecting";
+    Scene["Connected"] = "Connected";
+})(Scene || (Scene = {}));
 let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
         super(...arguments);
@@ -19,17 +27,34 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.resetListeners = [];
         this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
-        this.canConnect = false;
+        this.scene = Scene.SelectingWallets;
         this.closedHandler = () => {
-            if (this.signer === undefined) {
-                this.disconnect();
+            if ([
+                Scene.SelectingSigners,
+                Scene.SelectingWallets,
+                Scene.Connecting,
+            ].includes(this.scene)) {
+                this.scene = Scene.SelectingWallets;
+                this.selectedSigner = undefined;
+                this.selectedWallet = undefined;
             }
             this.isOpen = false;
         };
         this.signerSelectedHandler = (wallet, signer) => {
-            this.walletName = wallet?.name;
-            this.signerType = signer?.type;
-            this.canConnect = true;
+            this.scene = Scene.Connecting;
+            this.selectedWallet = wallet;
+            this.selectedSigner = signer;
+            (async () => {
+                await signer.signer.connect();
+                if (!(await signer.signer.isConnected())) {
+                    return;
+                }
+                this.scene = Scene.Connected;
+                this.walletName = wallet.name;
+                this.signerName = signer.name;
+                this.saveConnection();
+                this.closedHandler();
+            })();
         };
     }
     setIsOpen(isOpen) {
@@ -38,47 +63,31 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     setClient(client) {
         this.client = client;
     }
-    updateWallet() {
-        this.selectedWallet = this.wallets.find((wallet) => this.walletName === wallet.name);
-    }
-    updateSigner() {
-        this.selectedSigner = this.selectedWallet?.signers.find(({ type }) => type === this.signerType);
-    }
     prepareSigner() {
         (async () => {
-            if (!this.selectedSigner) {
-                this.wallet = undefined;
-                this.signer = undefined;
+            if (this.signer && (await this.signer.signer.isConnected())) {
+                this.scene = Scene.Connected;
                 return;
             }
-            if (!(await this.selectedSigner.signer.isConnected())) {
-                if (!this.canConnect) {
-                    this.disconnect();
-                    return;
-                }
-                await this.selectedSigner.signer.connect();
-            }
-            this.saveConnection();
-            this.wallet = this.selectedWallet;
-            this.signer = this.selectedSigner;
-            this.closedHandler();
+            this.wallet = undefined;
+            this.signer = undefined;
+            this.scene = Scene.SelectingWallets;
         })();
     }
     disconnect() {
+        this.signer?.signer?.disconnect();
         this.walletName = undefined;
-        this.wallet = undefined;
-        this.signerType = undefined;
-        this.signer = undefined;
+        this.signerName = undefined;
         this.saveConnection();
     }
     loadConnection() {
-        const { signerType, walletName, } = JSON.parse(window.localStorage.getItem("ccc-connection-info") ?? "{}");
-        this.signerType = signerType;
+        const { signerName, walletName, } = JSON.parse(window.localStorage.getItem("ccc-connection-info") ?? "{}");
+        this.signerName = signerName;
         this.walletName = walletName;
     }
     saveConnection() {
         window.localStorage.setItem("ccc-connection-info", JSON.stringify({
-            signerType: this.signerType,
+            signerName: this.signerName,
             walletName: this.walletName,
         }));
     }
@@ -93,13 +102,14 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         }
         if (changedProperties.has("walletName") ||
             changedProperties.has("wallets")) {
-            this.updateWallet();
+            this.wallet = this.wallets.find(({ name }) => name === this.walletName);
         }
-        if (changedProperties.has("signerType") ||
-            changedProperties.has("selectedWallet")) {
-            this.updateSigner();
+        if (changedProperties.has("signerName") ||
+            changedProperties.has("wallet")) {
+            const wallet = this.wallets.find(({ name }) => name === this.walletName);
+            this.signer = wallet?.signers.find(({ name }) => name === this.signerName);
         }
-        if (changedProperties.has("selectedSigner")) {
+        if (changedProperties.has("signer")) {
             this.prepareSigner();
         }
         this.dispatchEvent(new WillUpdateEvent());
@@ -107,62 +117,62 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     reloadSigners() {
         this.wallets = [];
         (async () => {
-            if (!this.selectedSigner) {
+            if (!this.signer) {
                 return;
             }
-            const newSigner = await this.selectedSigner.signer.replaceClient(this.client);
-            if (newSigner) {
-                this.selectedSigner = {
-                    ...this.selectedSigner,
-                    signer: newSigner,
-                };
-            }
-            else {
-                this.disconnect();
-            }
+            this.signer = {
+                ...this.signer,
+                signer: await this.signer.signer.replaceClient(this.client),
+            };
         })();
         this.resetListeners.forEach((listener) => listener());
         this.resetListeners = [];
+        ccc.JoyId.getJoyIdSigners(this.client).forEach(({ signer, type, name }) => {
+            this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
+        });
         const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
         if (uniSatSigner) {
-            this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
         }
         const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
         if (okxBitcoinSigner) {
-            this.addSigner("OKX Wallet", OKX_SVG, ccc.SignerType.BTC, okxBitcoinSigner);
+            this.addSigner("OKX Wallet", "BTC", OKX_SVG, ccc.SignerType.BTC, okxBitcoinSigner);
         }
         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);
+            this.addSigner(`${signer.detail.info.name}`, "EVM", signer.detail.info.icon, ccc.SignerType.EVM, signer);
         }));
     }
-    addSigner(name, icon, type, signer) {
+    addSigner(walletName, signerName, icon, type, signer) {
         let updated = false;
         const wallets = this.wallets.map((wallet) => {
-            if (wallet.name !== name) {
+            if (wallet.name !== walletName) {
                 return wallet;
             }
             updated = true;
             return {
                 ...wallet,
-                signers: [...wallet.signers, { type, signer }],
+                signers: [...wallet.signers, { type, name: signerName, signer }],
             };
         });
         if (!updated) {
             wallets.push({
-                name,
+                name: walletName,
                 icon,
-                signers: [{ type, signer }],
+                signers: [{ type, name: signerName, signer }],
             });
         }
         this.wallets = wallets;
     }
     render() {
         const [title, body] = (() => {
-            if (!this.selectedWallet) {
-                return generateWalletsScene(this.wallets, this.signerSelectedHandler, this.signerSelectedHandler);
+            if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
+                return generateWalletsScene(this.wallets, (wallet) => {
+                    this.selectedWallet = wallet;
+                    this.scene = Scene.SelectingSigners;
+                }, this.signerSelectedHandler);
             }
-            if (!this.selectedSigner) {
+            if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
                 return generateSignersScene(this.selectedWallet, this.signerSelectedHandler);
             }
             return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
@@ -175,7 +185,6 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
-          --btn-icon: #e9e4de;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -296,8 +305,6 @@ WebComponentConnector.styles = css `
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
-      border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -323,8 +330,6 @@ WebComponentConnector.styles = css `
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
-      border-radius: 0.8rem;
-      background: var(--btn-icon);
     }
 
     .connecting-wallet-icon {
@@ -344,16 +349,19 @@ __decorate([
 ], WebComponentConnector.prototype, "client", void 0);
 __decorate([
     state()
-], WebComponentConnector.prototype, "walletName", void 0);
-__decorate([
-    state()
-], WebComponentConnector.prototype, "signerType", void 0);
+], WebComponentConnector.prototype, "scene", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "selectedWallet", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "selectedSigner", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "walletName", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "signerName", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "wallet", void 0);

package/dist/scenes/connecting.d.ts

@@ -1,3 +1,4 @@
 import { ccc } from "@ckb-ccc/ccc";
-export declare function generateConnectingScene(wallet: ccc.Wallet, signer: ccc.SignerInfo, onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+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>)[];
 //# 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,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,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,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDAqBb"}

package/dist/scenes/signers.d.ts

@@ -1,5 +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: WalletWithSigners, onSignerSelected: (wallet: ccc.Wallet | undefined, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+export declare function generateSignersScene(wallet: WalletWithSigners, onSignerSelected: (wallet: WalletWithSigners, 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;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,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDAyBb"}
+{"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,gDAyBb"}

package/dist/scenes/signers.js

@@ -1,11 +1,12 @@
 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 { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
 export function signerTypeToIcon(type) {
     return {
         [ccc.SignerType.BTC]: BTC_SVG,
         [ccc.SignerType.EVM]: ETH_SVG,
+        [ccc.SignerType.CKB]: CKB_SVG,
     }[type];
 }
 export function generateSignersScene(wallet, onSignerSelected) {
@@ -22,7 +23,7 @@ export function generateSignersScene(wallet, onSignerSelected) {
         }}
           >
             <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
-            ${signer.type}
+            ${signer.name}
           </button>
         `)}
     `,

package/dist/scenes/wallets.d.ts

@@ -1,4 +1,4 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { WalletWithSigners } from "../types";
-export declare function generateWalletsScene(wallets: WalletWithSigners[], onWalletSelected: (wallet: ccc.Wallet) => unknown, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): unknown[];
+export declare function generateWalletsScene(wallets: WalletWithSigners[], onWalletSelected: (wallet: WalletWithSigners) => unknown, onSignerSelected: (wallet: WalletWithSigners, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
 //# 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;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,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;AAMnC,OAAO,EAAc,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEzD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,iBAAiB,EAAE,EAC5B,gBAAgB,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,EACxD,gBAAgB,EAAE,CAChB,MAAM,EAAE,iBAAiB,EACzB,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDAgEb"}

package/dist/scenes/wallets.js

@@ -1,12 +1,45 @@
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
+import { METAMASK_SVG } from "../assets/metamask.svg";
+import { OKX_SVG } from "../assets/okx.svg";
+import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 export function generateWalletsScene(wallets, onWalletSelected, onSignerSelected) {
+    const recommendedWallets = [
+        {
+            name: "MetaMask",
+            icon: METAMASK_SVG,
+            downloadLink: `https://metamask.app.link/dapp/${window.location.href}`,
+        },
+        {
+            name: "OKX Wallet",
+            icon: OKX_SVG,
+            downloadLink: "https://www.okx.com/zh-hans/download",
+        },
+        {
+            name: "UniSat",
+            icon: UNI_SAT_SVG,
+            downloadLink: "https://unisat.io/",
+        },
+    ];
+    const missingWallets = recommendedWallets.filter((recommendedWallet) => !wallets.some((wallet) => wallet.name === recommendedWallet.name));
+    const additionalButtons = missingWallets.map((wallet) => html `
+      <button
+        class="btn-primary mb-1"
+        @click=${() => {
+        window.open(wallet.downloadLink, "_blank");
+    }}
+      >
+        <img src=${wallet.icon} alt=${wallet.name} />
+        ${wallet.name}
+      </button>
+    `);
     return [
         "Connect Wallet",
-        repeat(wallets, (wallet) => wallet.name, (wallet) => html `
-        <button
-          class="btn-primary mb-1"
-          @click=${async () => {
+        html `
+      ${repeat(wallets, (wallet) => wallet.name, (wallet) => html `
+          <button
+            class="btn-primary mb-1"
+            @click=${async () => {
             if (wallet.signers.length === 1) {
                 onSignerSelected(wallet, wallet.signers[0]);
             }
@@ -14,10 +47,12 @@ export function generateWalletsScene(wallets, onWalletSelected, onSignerSelected
                 onWalletSelected(wallet);
             }
         }}
-        >
-          <img src=${wallet.icon} alt=${wallet.name} />
-          ${wallet.name}
-        </button>
-      `),
+          >
+            <img src=${wallet.icon} alt=${wallet.name} />
+            ${wallet.name}
+          </button>
+        `)}
+      ${additionalButtons}
+    `,
     ];
 }

package/dist/types/index.d.ts

@@ -2,4 +2,9 @@ import { ccc } from "@ckb-ccc/ccc";
 export type WalletWithSigners = ccc.Wallet & {
     signers: ccc.SignerInfo[];
 };
+export interface WalletInfo {
+    name: string;
+    icon: string;
+    downloadLink: string;
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;AAEF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.4",
+  "version": "0.0.5-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.4",
+    "@ckb-ccc/ccc": "0.0.5-alpha.0",
     "lit": "^3.1.3"
   },
-  "gitHead": "76485b6b76ce3c97d5acebd42decbafd546aa433"
+  "gitHead": "8a927f901a8f2fe7dfe2f6bf78a44689d6503949"
 }

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

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "../utils";
+
+export const CKB_SVG = encodeSvgToImgSrc(
+  '<svg width="668" height="666.66669" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon points="170.265,206.318 223.416,206.318 223.416,93.897 264.161,93.897 170.265,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /><polygon points="324.79,112.422 284.046,112.422 377.941,206.318 377.941,0 324.79,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /></svg>',
+);

package/src/assets/chains/index.ts

@@ -1,2 +1,3 @@
 export * from "./btc.svg";
+export * from "./ckb.svg";
 export * from "./eth.svg";

package/src/assets/joy-id.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const JOY_ID_SVG = encodeSvgToImgSrc(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420" fill="none"><circle cx="210" cy="210" r="210" fill="#333333"/><path d="M271.127 204.419C279.096 204.419 285.555 197.959 285.555 189.991C285.555 182.022 279.096 175.562 271.127 175.562C263.159 175.562 256.699 182.022 256.699 189.991C256.699 197.959 263.159 204.419 271.127 204.419Z" fill="#8CDD00"/><path d="M173.995 175.562C166.773 175.562 160.91 181.425 160.91 188.648C160.91 195.87 166.773 201.733 173.995 201.733C181.218 201.733 187.081 195.87 187.081 188.648C187.064 181.425 181.218 175.562 173.995 175.562Z" fill="#8CDD00"/><path d="M213.43 164.836L198.969 233.586C197.626 240.006 191.878 244.657 185.327 244.657C181.086 244.657 177.139 242.757 174.47 239.465C172.39 236.894 171.342 233.734 171.391 230.491L145.27 237.238C146.383 244.084 149.2 250.618 153.687 256.203C161.434 265.816 172.963 271.335 185.311 271.335C204.407 271.335 221.111 257.775 225.041 239.089L240.665 164.852H213.43V164.836Z" fill="#C1C1C1"/><path d="M335.83 115.983C327.068 105.19 314.065 99 300.161 99H267.981L262.363 125.662H300.161C305.991 125.662 311.445 128.249 315.113 132.786C318.782 137.306 320.207 143.185 319.011 148.884L313.394 175.562H340.645L345.116 154.387C347.965 140.778 344.592 126.775 335.83 115.983Z" fill="#8CDD00"/><path d="M295.216 261.999C291.285 280.669 274.597 294.212 255.518 294.212H226.875L221.258 320.874H255.518C287.126 320.874 314.803 298.421 321.304 267.485L326.021 245.049H298.77L295.216 261.999Z" fill="#8CDD00"/><path d="M98.8061 152.39L93.9258 175.58H121.177L124.894 157.892C128.825 139.223 145.513 125.679 164.592 125.679H192.04L197.657 99.0176H164.592C132.985 99.0012 105.308 121.454 98.8061 152.39Z" fill="#8CDD00"/><path d="M104.998 287.072C101.33 282.552 99.9049 276.673 101.1 270.974L106.079 247.342L77.2555 254.777L74.9956 265.487C72.1296 279.097 75.5196 293.099 84.2813 303.891C93.0429 314.684 106.046 320.874 119.95 320.874H150.935L156.553 294.212H119.95C114.12 294.196 108.666 291.608 104.998 287.072Z" fill="#8CDD00"/></svg>',
+);

package/src/assets/metamask.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const METAMASK_SVG = encodeSvgToImgSrc(
+  `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6"><style>.st1,.st6{fill:#e4761b;stroke:#e4761b;stroke-linecap:round;stroke-linejoin:round}.st6{fill:#f6851b;stroke:#f6851b}</style><path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z"/><path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1"/><path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1"/><path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z"/><path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z"/><path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"/><path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z"/><path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6"/><path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"/><path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"/><path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"/><path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6"/><script xmlns=""/></svg>`,
+);

package/src/connector/index.ts

@@ -2,6 +2,7 @@ import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
@@ -12,6 +13,13 @@ import {
 } from "../scenes";
 import { WalletWithSigners } from "../types";
 
+enum Scene {
+  SelectingWallets = "SelectingWallets",
+  SelectingSigners = "SelectingSigners",
+  Connecting = "Connecting",
+  Connected = "Connected",
+}
+
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
@@ -32,68 +40,49 @@ export class WebComponentConnector extends LitElement {
   }
 
   @state()
-  private walletName?: string;
-  @state()
-  private signerType?: ccc.SignerType;
+  private scene: Scene = Scene.SelectingWallets;
   @state()
   private selectedWallet?: WalletWithSigners;
-  private updateWallet() {
-    this.selectedWallet = this.wallets.find(
-      (wallet) => this.walletName === wallet.name,
-    );
-  }
   @state()
   private selectedSigner?: ccc.SignerInfo;
-  private updateSigner() {
-    this.selectedSigner = this.selectedWallet?.signers.find(
-      ({ type }) => type === this.signerType,
-    );
-  }
+
   @state()
-  public wallet?: WalletWithSigners;
+  private walletName?: string;
+  @state()
+  private signerName?: string;
+  @state()
+  public wallet?: ccc.Wallet;
   @state()
   public signer?: ccc.SignerInfo;
-  private canConnect = false;
   private prepareSigner() {
     (async () => {
-      if (!this.selectedSigner) {
-        this.wallet = undefined;
-        this.signer = undefined;
+      if (this.signer && (await this.signer.signer.isConnected())) {
+        this.scene = Scene.Connected;
         return;
       }
 
-      if (!(await this.selectedSigner.signer.isConnected())) {
-        if (!this.canConnect) {
-          this.disconnect();
-          return;
-        }
-        await this.selectedSigner.signer.connect();
-      }
-
-      this.saveConnection();
-      this.wallet = this.selectedWallet;
-      this.signer = this.selectedSigner;
-      this.closedHandler();
+      this.wallet = undefined;
+      this.signer = undefined;
+      this.scene = Scene.SelectingWallets;
     })();
   }
 
   public disconnect() {
+    this.signer?.signer?.disconnect();
     this.walletName = undefined;
-    this.wallet = undefined;
-    this.signerType = undefined;
-    this.signer = undefined;
+    this.signerName = undefined;
     this.saveConnection();
   }
 
   private loadConnection() {
     const {
-      signerType,
+      signerName,
       walletName,
-    }: { signerType?: ccc.SignerType; walletName?: string } = JSON.parse(
+    }: { signerName?: string; walletName?: string } = JSON.parse(
       window.localStorage.getItem("ccc-connection-info") ?? "{}",
     );
 
-    this.signerType = signerType;
+    this.signerName = signerName;
     this.walletName = walletName;
   }
 
@@ -101,7 +90,7 @@ export class WebComponentConnector extends LitElement {
     window.localStorage.setItem(
       "ccc-connection-info",
       JSON.stringify({
-        signerType: this.signerType,
+        signerName: this.signerName,
         walletName: this.walletName,
       }),
     );
@@ -121,15 +110,18 @@ export class WebComponentConnector extends LitElement {
       changedProperties.has("walletName") ||
       changedProperties.has("wallets")
     ) {
-      this.updateWallet();
+      this.wallet = this.wallets.find(({ name }) => name === this.walletName);
     }
     if (
-      changedProperties.has("signerType") ||
-      changedProperties.has("selectedWallet")
+      changedProperties.has("signerName") ||
+      changedProperties.has("wallet")
     ) {
-      this.updateSigner();
+      const wallet = this.wallets.find(({ name }) => name === this.walletName);
+      this.signer = wallet?.signers.find(
+        ({ name }) => name === this.signerName,
+      );
     }
-    if (changedProperties.has("selectedSigner")) {
+    if (changedProperties.has("signer")) {
       this.prepareSigner();
     }
 
@@ -140,35 +132,39 @@ export class WebComponentConnector extends LitElement {
     this.wallets = [];
 
     (async () => {
-      if (!this.selectedSigner) {
+      if (!this.signer) {
         return;
       }
 
-      const newSigner = await this.selectedSigner.signer.replaceClient(
-        this.client,
-      );
-      if (newSigner) {
-        this.selectedSigner = {
-          ...this.selectedSigner,
-          signer: newSigner,
-        };
-      } else {
-        this.disconnect();
-      }
+      this.signer = {
+        ...this.signer,
+        signer: await this.signer.signer.replaceClient(this.client),
+      };
     })();
 
     this.resetListeners.forEach((listener) => listener());
     this.resetListeners = [];
 
+    ccc.JoyId.getJoyIdSigners(this.client).forEach(({ signer, type, name }) => {
+      this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
+    });
+
     const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
-      this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+      this.addSigner(
+        "UniSat",
+        "BTC",
+        UNI_SAT_SVG,
+        ccc.SignerType.BTC,
+        uniSatSigner,
+      );
     }
 
     const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
     if (okxBitcoinSigner) {
       this.addSigner(
         "OKX Wallet",
+        "BTC",
         OKX_SVG,
         ccc.SignerType.BTC,
         okxBitcoinSigner,
@@ -180,6 +176,7 @@ export class WebComponentConnector extends LitElement {
       eip6963Manager.subscribeSigners((signer) => {
         this.addSigner(
           `${signer.detail.info.name}`,
+          "EVM",
           signer.detail.info.icon,
           ccc.SignerType.EVM,
           signer,
@@ -189,29 +186,30 @@ export class WebComponentConnector extends LitElement {
   }
 
   private addSigner(
-    name: string,
+    walletName: string,
+    signerName: string,
     icon: string,
     type: ccc.SignerType,
     signer: ccc.Signer,
   ) {
     let updated = false;
     const wallets = this.wallets.map((wallet) => {
-      if (wallet.name !== name) {
+      if (wallet.name !== walletName) {
         return wallet;
       }
 
       updated = true;
       return {
         ...wallet,
-        signers: [...wallet.signers, { type, signer }],
+        signers: [...wallet.signers, { type, name: signerName, signer }],
       };
     });
 
     if (!updated) {
       wallets.push({
-        name,
+        name: walletName,
         icon,
-        signers: [{ type, signer }],
+        signers: [{ type, name: signerName, signer }],
       });
     }
 
@@ -220,14 +218,17 @@ export class WebComponentConnector extends LitElement {
 
   render() {
     const [title, body] = (() => {
-      if (!this.selectedWallet) {
+      if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
         return generateWalletsScene(
           this.wallets,
-          this.signerSelectedHandler,
+          (wallet) => {
+            this.selectedWallet = wallet;
+            this.scene = Scene.SelectingSigners;
+          },
           this.signerSelectedHandler,
         );
       }
-      if (!this.selectedSigner) {
+      if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
         return generateSignersScene(
           this.selectedWallet,
           this.signerSelectedHandler,
@@ -248,7 +249,6 @@ export class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
-          --btn-icon: #e9e4de;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -273,19 +273,38 @@ export class WebComponentConnector extends LitElement {
   }
 
   private closedHandler = () => {
-    if (this.signer === undefined) {
-      this.disconnect();
+    if (
+      [
+        Scene.SelectingSigners,
+        Scene.SelectingWallets,
+        Scene.Connecting,
+      ].includes(this.scene)
+    ) {
+      this.scene = Scene.SelectingWallets;
+      this.selectedSigner = undefined;
+      this.selectedWallet = undefined;
     }
     this.isOpen = false;
   };
 
   private signerSelectedHandler = (
-    wallet?: ccc.Wallet,
-    signer?: ccc.SignerInfo,
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
   ) => {
-    this.walletName = wallet?.name;
-    this.signerType = signer?.type;
-    this.canConnect = true;
+    this.scene = Scene.Connecting;
+    this.selectedWallet = wallet;
+    this.selectedSigner = signer;
+    (async () => {
+      await signer.signer.connect();
+      if (!(await signer.signer.isConnected())) {
+        return;
+      }
+      this.scene = Scene.Connected;
+      this.walletName = wallet.name;
+      this.signerName = signer.name;
+      this.saveConnection();
+      this.closedHandler();
+    })();
   };
 
   static styles = css`
@@ -385,8 +404,6 @@ export class WebComponentConnector extends LitElement {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
-      border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -412,8 +429,6 @@ export class WebComponentConnector extends LitElement {
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
-      border-radius: 0.8rem;
-      background: var(--btn-icon);
     }
 
     .connecting-wallet-icon {

package/src/scenes/connecting.ts

@@ -1,12 +1,13 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { RETRY_SVG } from "../assets/retry.svg";
+import { WalletWithSigners } from "../types";
 
 export function generateConnectingScene(
-  wallet: ccc.Wallet,
+  wallet: WalletWithSigners,
   signer: ccc.SignerInfo,
   onSignerSelected: (
-    wallet: ccc.Wallet | undefined,
+    wallet: WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
 ) {

package/src/scenes/signers.ts

@@ -1,20 +1,21 @@
 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 { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
 import { WalletWithSigners } from "../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
     [ccc.SignerType.BTC]: BTC_SVG,
     [ccc.SignerType.EVM]: ETH_SVG,
+    [ccc.SignerType.CKB]: CKB_SVG,
   }[type];
 }
 
 export function generateSignersScene(
   wallet: WalletWithSigners,
   onSignerSelected: (
-    wallet: ccc.Wallet | undefined,
+    wallet: WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
 ) {
@@ -35,7 +36,7 @@ export function generateSignersScene(
             }}
           >
             <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
-            ${signer.type}
+            ${signer.name}
           </button>
         `,
       )}

package/src/scenes/wallets.ts

@@ -1,33 +1,79 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { WalletWithSigners } from "../types";
+import { METAMASK_SVG } from "../assets/metamask.svg";
+import { OKX_SVG } from "../assets/okx.svg";
+import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
+import { WalletInfo, WalletWithSigners } from "../types";
 
 export function generateWalletsScene(
   wallets: WalletWithSigners[],
-  onWalletSelected: (wallet: ccc.Wallet) => unknown,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  onWalletSelected: (wallet: WalletWithSigners) => unknown,
+  onSignerSelected: (
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
+  const recommendedWallets = [
+    {
+      name: "MetaMask",
+      icon: METAMASK_SVG,
+      downloadLink: `https://metamask.app.link/dapp/${window.location.href}`,
+    },
+    {
+      name: "OKX Wallet",
+      icon: OKX_SVG,
+      downloadLink: "https://www.okx.com/zh-hans/download",
+    },
+    {
+      name: "UniSat",
+      icon: UNI_SAT_SVG,
+      downloadLink: "https://unisat.io/",
+    },
+  ];
+
+  const missingWallets = recommendedWallets.filter(
+    (recommendedWallet) =>
+      !wallets.some((wallet) => wallet.name === recommendedWallet.name),
+  );
+
+  const additionalButtons = missingWallets.map(
+    (wallet: WalletInfo) => html`
+      <button
+        class="btn-primary mb-1"
+        @click=${() => {
+          window.open(wallet.downloadLink, "_blank");
+        }}
+      >
+        <img src=${wallet.icon} alt=${wallet.name} />
+        ${wallet.name}
+      </button>
+    `,
+  );
+
   return [
     "Connect Wallet",
-    repeat(
-      wallets,
-      (wallet) => wallet.name,
-      (wallet) => html`
-        <button
-          class="btn-primary mb-1"
-          @click=${async () => {
-            if (wallet.signers.length === 1) {
-              onSignerSelected(wallet, wallet.signers[0]);
-            } else {
-              onWalletSelected(wallet);
-            }
-          }}
-        >
-          <img src=${wallet.icon} alt=${wallet.name} />
-          ${wallet.name}
-        </button>
-      `,
-    ),
+    html`
+      ${repeat(
+        wallets,
+        (wallet) => wallet.name,
+        (wallet) => html`
+          <button
+            class="btn-primary mb-1"
+            @click=${async () => {
+              if (wallet.signers.length === 1) {
+                onSignerSelected(wallet, wallet.signers[0]);
+              } else {
+                onWalletSelected(wallet);
+              }
+            }}
+          >
+            <img src=${wallet.icon} alt=${wallet.name} />
+            ${wallet.name}
+          </button>
+        `,
+      )}
+      ${additionalButtons}
+    `,
   ];
 }

package/src/types/index.ts

@@ -3,3 +3,9 @@ import { ccc } from "@ckb-ccc/ccc";
 export type WalletWithSigners = ccc.Wallet & {
   signers: ccc.SignerInfo[];
 };
+
+export interface WalletInfo {
+  name: string;
+  icon: string;
+  downloadLink: string;
+}

package/tsconfig.base.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2020",
-    "incremental": true,
-    "allowJs": true,
-    "importHelpers": false,
-    "declaration": true,
-    "declarationMap": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "esModuleInterop": true,
-    "strict": true,
-    "noImplicitAny": true,
-    "strictBindCallApply": true,
-    "strictNullChecks": true,
-    "alwaysStrict": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"]
-}

package/tsconfig.commonjs.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "outDir": "./dist.commonjs"
-  }
-}