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

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/left.svg.d.ts

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

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

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

package/dist/assets/left.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const LEFT_SVG = encodeSvgToImgSrc('<svg width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><path d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z" stroke="#1E1E1E" stroke-width="1"/></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,22 +1,22 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
-import { WalletWithSigners } from "../types";
+import { Ref } from "lit/directives/ref.js";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
     private resetListeners;
     isOpen: boolean;
     setIsOpen(isOpen: boolean): void;
+    name?: string;
+    icon?: string;
     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;
@@ -25,7 +25,11 @@ export declare class WebComponentConnector extends LitElement {
     willUpdate(changedProperties: PropertyValues): void;
     private reloadSigners;
     private addSigner;
+    mainRef: Ref<HTMLDivElement>;
+    headerRef: Ref<HTMLDivElement>;
+    bodyRef: Ref<HTMLDivElement>;
     render(): import("lit").TemplateResult<1>;
+    updated(): void;
     private closedHandler;
     private signerSelectedHandler;
     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;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;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,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,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;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;IAiErB,OAAO,CAAC,SAAS;IA+BjB,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;IA0EN,OAAO;IAUP,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAkB3B;IAEF,MAAM,CAAC,MAAM,0BA4IX;CACH"}

package/dist/connector/index.js

@@ -7,11 +7,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { CLOSE_SVG } from "../assets/close.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
+import { LEFT_SVG } from "../assets/left.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 +29,37 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.resetListeners = [];
         this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
-        this.canConnect = false;
+        this.scene = Scene.SelectingWallets;
+        this.mainRef = createRef();
+        this.headerRef = createRef();
+        this.bodyRef = createRef();
         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 +68,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 +107,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,66 +122,71 @@ 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 = [];
+        const name = this.name ??
+            document.querySelector("head title").text;
+        const icon = this.icon ??
+            document.querySelector('link[rel="icon"]').href;
+        ccc.JoyId.getJoyIdSigners(this.client, name, icon).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);
         })();
+        const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(this.scene);
         return html `<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -175,7 +195,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;
         }
@@ -188,16 +207,38 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
         }}
       >
-        <div class="main">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
+        <div class="main" ${ref(this.mainRef)}>
+          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+            <img
+              class="back ${canBack ? "active" : ""}"
+              src=${LEFT_SVG}
+              @click=${() => {
+            if (this.scene === Scene.Connecting) {
+                this.scene = Scene.SelectingSigners;
+            }
+            else if (this.scene === Scene.SelectingSigners) {
+                this.scene = Scene.SelectingWallets;
+            }
+        }}
+            />
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
+            <img
+              class="close active"
+              src=${CLOSE_SVG}
+              @click=${this.closedHandler}
+            />
           </div>
-          <div class="body">${body}</div>
+          <div class="body" ${ref(this.bodyRef)}>${body}</div>
         </div>
       </div>`;
     }
+    updated() {
+        if (!this.mainRef.value) {
+            return;
+        }
+        this.mainRef.value.style.height = `${(this.bodyRef.value?.clientHeight ?? 0) +
+            (this.headerRef.value?.clientHeight ?? 0)}px`;
+    }
 };
 WebComponentConnector.styles = css `
     :host {
@@ -256,6 +297,8 @@ WebComponentConnector.styles = css `
       transform: translate(-50%, -50%);
       background: var(--background);
       border-radius: 1.2rem;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
     }
 
     .header {
@@ -270,6 +313,13 @@ WebComponentConnector.styles = css `
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
@@ -289,7 +339,7 @@ WebComponentConnector.styles = css `
       padding: 0.75rem 1rem;
       background: var(--btn-primary);
       border-radius: 0.4rem;
-      transition: background 0.3s ease-in-out;
+      transition: background 0.15s ease-in-out;
     }
 
     .btn-primary img {
@@ -297,7 +347,6 @@ WebComponentConnector.styles = css `
       height: 2rem;
       margin-right: 1rem;
       border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -310,7 +359,7 @@ WebComponentConnector.styles = css `
       padding: 0.25rem 1rem;
       background: var(--btn-secondary);
       border-radius: 9999px;
-      transition: background 0.3s ease-in-out;
+      transition: background 0.15s ease-in-out;
     }
 
     .btn-secondary img {
@@ -324,7 +373,6 @@ WebComponentConnector.styles = css `
       height: 4rem;
       margin-bottom: 0.5rem;
       border-radius: 0.8rem;
-      background: var(--btn-icon);
     }
 
     .connecting-wallet-icon {
@@ -341,19 +389,28 @@ __decorate([
 ], WebComponentConnector.prototype, "isOpen", void 0);
 __decorate([
     property()
-], WebComponentConnector.prototype, "client", void 0);
+], WebComponentConnector.prototype, "name", void 0);
 __decorate([
-    state()
-], WebComponentConnector.prototype, "walletName", void 0);
+    property()
+], WebComponentConnector.prototype, "icon", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "client", 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}
+    `,
     ];
 }