@ckb-ccc/connector 0.0.4-alpha.8 → 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/advancedBarrel.d.ts

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

package/dist/advancedBarrel.d.ts.map

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

package/dist/advancedBarrel.js

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

package/dist/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/barrel.d.ts

@@ -1,5 +1,4 @@
-export * from "@ckb-ccc/ccc";
+export * from "@ckb-ccc/ccc/barrel";
 export * from "./connector";
 export * from "./events";
-export * from "./status";
 //# sourceMappingURL=barrel.d.ts.map

package/dist/barrel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"barrel.d.ts","sourceRoot":"","sources":["../src/barrel.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"barrel.d.ts","sourceRoot":"","sources":["../src/barrel.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

package/dist/barrel.js

@@ -1,4 +1,3 @@
-export * from "@ckb-ccc/ccc";
+export * from "@ckb-ccc/ccc/barrel";
 export * from "./connector";
 export * from "./events";
-export * from "./status";

package/dist/connector/index.d.ts

@@ -1,19 +1,30 @@
 import { ccc } from "@ckb-ccc/ccc";
-import { LitElement } from "lit";
-import { ConnectorStatus } from "../status";
+import { LitElement, PropertyValues } from "lit";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
-    private existedEip6963;
+    private resetListeners;
     isOpen: boolean;
+    setIsOpen(isOpen: boolean): void;
+    client: ccc.Client;
+    setClient(client: ccc.Client): void;
+    private scene;
+    private selectedWallet?;
+    private selectedSigner?;
+    private walletName?;
+    private signerName?;
     wallet?: ccc.Wallet;
     signer?: ccc.SignerInfo;
-    status: ConnectorStatus;
+    private prepareSigner;
+    disconnect(): void;
+    private loadConnection;
+    private saveConnection;
     connectedCallback(): void;
-    addSigner(name: string, icon: string, type: ccc.SignerType, signer: ccc.Signer): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private reloadSigners;
+    private addSigner;
     render(): import("lit").TemplateResult<1>;
-    private onClose;
-    private onWalletSelected;
-    private onSignerSelected;
+    private closedHandler;
+    private signerSelectedHandler;
     static styles: import("lit").CSSResult;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAW5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,cAAc,CAAgB;IAG/B,MAAM,EAAE,OAAO,CAAS;IAGxB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAExB,MAAM,EAAE,eAAe,CAAmC;IAEjE,iBAAiB,IAAI,IAAI;IAkCzB,SAAS,CACP,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,CAAC,UAAU,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM;IAkBpB,MAAM;IAmDN,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAStB;IAEF,MAAM,CAAC,MAAM,0BAqIX;CACH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;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,81 +8,174 @@ 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 { CloseEvent, SignerChangedEvent, StatusChangedEvent } from "../events";
+import { WillUpdateEvent } from "../events";
 import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
-import { ConnectorStatus } from "../status";
+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);
         this.wallets = [];
-        this.existedEip6963 = [];
+        this.resetListeners = [];
         this.isOpen = false;
-        this.status = ConnectorStatus.SelectingSigner;
-        this.onClose = () => {
-            this.dispatchEvent(new SignerChangedEvent());
-            this.dispatchEvent(new CloseEvent());
-        };
-        this.onWalletSelected = (wallet) => {
-            this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
+        this.client = new ccc.ClientPublicTestnet();
+        this.scene = Scene.SelectingWallets;
+        this.closedHandler = () => {
+            if ([
+                Scene.SelectingSigners,
+                Scene.SelectingWallets,
+                Scene.Connecting,
+            ].includes(this.scene)) {
+                this.scene = Scene.SelectingWallets;
+                this.selectedSigner = undefined;
+                this.selectedWallet = undefined;
+            }
+            this.isOpen = false;
         };
-        this.onSignerSelected = (wallet, signer) => {
-            this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
-            this.dispatchEvent(new SignerChangedEvent(wallet, signer));
+        this.signerSelectedHandler = (wallet, signer) => {
+            this.scene = Scene.Connecting;
+            this.selectedWallet = wallet;
+            this.selectedSigner = signer;
             (async () => {
                 await signer.signer.connect();
-                this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
-                this.dispatchEvent(new CloseEvent());
+                if (!(await signer.signer.isConnected())) {
+                    return;
+                }
+                this.scene = Scene.Connected;
+                this.walletName = wallet.name;
+                this.signerName = signer.name;
+                this.saveConnection();
+                this.closedHandler();
             })();
         };
     }
+    setIsOpen(isOpen) {
+        this.isOpen = isOpen;
+    }
+    setClient(client) {
+        this.client = client;
+    }
+    prepareSigner() {
+        (async () => {
+            if (this.signer && (await this.signer.signer.isConnected())) {
+                this.scene = Scene.Connected;
+                return;
+            }
+            this.wallet = undefined;
+            this.signer = undefined;
+            this.scene = Scene.SelectingWallets;
+        })();
+    }
+    disconnect() {
+        this.signer?.signer?.disconnect();
+        this.walletName = undefined;
+        this.signerName = undefined;
+        this.saveConnection();
+    }
+    loadConnection() {
+        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({
+            signerName: this.signerName,
+            walletName: this.walletName,
+        }));
+    }
     connectedCallback() {
         super.connectedCallback();
-        const client = new ccc.ClientPublicTestnet();
-        const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
-        if (uniSatSigner) {
-            this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+        this.loadConnection();
+        this.reloadSigners();
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("client")) {
+            this.reloadSigners();
         }
-        const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(client);
-        if (okxBitcoinSigner) {
-            this.addSigner("OKX Wallet", OKX_SVG, ccc.SignerType.BTC, okxBitcoinSigner);
+        if (changedProperties.has("walletName") ||
+            changedProperties.has("wallets")) {
+            this.wallet = this.wallets.find(({ name }) => name === this.walletName);
+        }
+        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);
         }
-        const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
-        eip6963Manager.subscribeSigners((signer) => {
-            if (this.existedEip6963.indexOf(signer.detail.info.uuid) !== -1) {
+        if (changedProperties.has("signer")) {
+            this.prepareSigner();
+        }
+        this.dispatchEvent(new WillUpdateEvent());
+    }
+    reloadSigners() {
+        this.wallets = [];
+        (async () => {
+            if (!this.signer) {
                 return;
             }
-            this.existedEip6963.push(signer.detail.info.uuid);
-            this.addSigner(`${signer.detail.info.name}`, signer.detail.info.icon, ccc.SignerType.EVM, signer);
+            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);
         });
-    }
-    addSigner(name, icon, type, signer) {
-        const wallet = this.wallets.find((wallet) => wallet.name === name);
-        if (wallet) {
-            wallet.signers.push({ type, signer });
-            this.wallets = [...this.wallets];
+        const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
+        if (uniSatSigner) {
+            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
         }
-        else {
-            this.wallets = [
-                ...this.wallets,
-                {
-                    name,
-                    icon,
-                    signers: [{ type, signer }],
-                },
-            ];
+        const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
+        if (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}`, "EVM", signer.detail.info.icon, ccc.SignerType.EVM, signer);
+        }));
+    }
+    addSigner(walletName, signerName, icon, type, signer) {
+        let updated = false;
+        const wallets = this.wallets.map((wallet) => {
+            if (wallet.name !== walletName) {
+                return wallet;
+            }
+            updated = true;
+            return {
+                ...wallet,
+                signers: [...wallet.signers, { type, name: signerName, signer }],
+            };
+        });
+        if (!updated) {
+            wallets.push({
+                name: walletName,
+                icon,
+                signers: [{ type, name: signerName, signer }],
+            });
+        }
+        this.wallets = wallets;
     }
     render() {
         const [title, body] = (() => {
-            if (!this.wallet) {
-                return generateWalletsScene(this.wallets, this.onWalletSelected, this.onSignerSelected);
+            if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
+                return generateWalletsScene(this.wallets, (wallet) => {
+                    this.selectedWallet = wallet;
+                    this.scene = Scene.SelectingSigners;
+                }, this.signerSelectedHandler);
             }
-            if (!this.signer) {
-                return generateSignersScene(this.wallet, this.onSignerSelected);
+            if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
+                return generateSignersScene(this.selectedWallet, this.signerSelectedHandler);
             }
-            return generateConnectingScene(this.wallet, this.signer, this.onSignerSelected);
+            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
         })();
         return html `<style>
         :host {
@@ -92,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;
         }
@@ -101,7 +193,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         class="background"
         @click=${(event) => {
             if (event.target === event.currentTarget) {
-                this.onClose();
+                this.closedHandler();
             }
         }}
       >
@@ -109,7 +201,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
           <div class="header text-bold fs-big">
             <div class="back"></div>
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.onClose} />
+            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
           </div>
           <div class="body">${body}</div>
         </div>
@@ -213,8 +305,6 @@ WebComponentConnector.styles = css `
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
-      border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -240,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 {
@@ -254,17 +342,32 @@ __decorate([
     state()
 ], WebComponentConnector.prototype, "wallets", void 0);
 __decorate([
-    property()
+    state()
 ], WebComponentConnector.prototype, "isOpen", void 0);
 __decorate([
     property()
+], WebComponentConnector.prototype, "client", void 0);
+__decorate([
+    state()
+], 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);
 __decorate([
-    property()
+    state()
 ], WebComponentConnector.prototype, "signer", void 0);
-__decorate([
-    property()
-], WebComponentConnector.prototype, "status", void 0);
 WebComponentConnector = __decorate([
     customElement("ccc-connector")
 ], WebComponentConnector);

package/dist/events/index.d.ts

@@ -1,15 +1,4 @@
-import { ccc } from "@ckb-ccc/ccc";
-import { ConnectorStatus } from "../status";
-export declare class SignerChangedEvent extends Event {
-    readonly wallet?: ccc.Wallet | undefined;
-    readonly signerInfo?: ccc.SignerInfo | undefined;
-    constructor(wallet?: ccc.Wallet | undefined, signerInfo?: ccc.SignerInfo | undefined);
-}
-export declare class StatusChangedEvent extends Event {
-    readonly status: ConnectorStatus;
-    constructor(status: ConnectorStatus);
-}
-export declare class CloseEvent extends Event {
+export declare class WillUpdateEvent 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,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,qBAAa,kBAAmB,SAAQ,KAAK;aAEzB,MAAM,CAAC;aACP,UAAU,CAAC;gBADX,MAAM,CAAC,wBAAY,EACnB,UAAU,CAAC,4BAAgB;CAI9C;AAED,qBAAa,kBAAmB,SAAQ,KAAK;aACf,MAAM,EAAE,eAAe;gBAAvB,MAAM,EAAE,eAAe;CAGpD;AAED,qBAAa,UAAW,SAAQ,KAAK;;CAIpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC"}

package/dist/events/index.js

@@ -1,18 +1,5 @@
-export class SignerChangedEvent extends Event {
-    constructor(wallet, signerInfo) {
-        super("signerChanged", { composed: true });
-        this.wallet = wallet;
-        this.signerInfo = signerInfo;
-    }
-}
-export class StatusChangedEvent extends Event {
-    constructor(status) {
-        super("statusChanged", { composed: true });
-        this.status = status;
-    }
-}
-export class CloseEvent extends Event {
+export class WillUpdateEvent extends Event {
     constructor() {
-        super("close", { composed: true });
+        super("willUpdate", { composed: true });
     }
 }

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, 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,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAqB1E"}
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../src/scenes/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;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,4 +1,5 @@
 import { ccc } from "@ckb-ccc/ccc";
+import { WalletWithSigners } from "../types";
 export declare function signerTypeToIcon(type: ccc.SignerType): string;
-export declare function generateSignersScene(wallet: ccc.Wallet, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): (string | import("lit").TemplateResult<1>)[];
+export declare function generateSignersScene(wallet: WalletWithSigners, onSignerSelected: (wallet: 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;AAKnC,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAK7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAyB1E"}
+{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../../src/scenes/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,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,3 +1,4 @@
 import { ccc } from "@ckb-ccc/ccc";
-export declare function generateWalletsScene(wallets: ccc.Wallet[], onWalletSelected: (wallet: ccc.Wallet) => unknown, onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown): unknown[];
+import { WalletWithSigners } from "../types";
+export declare function generateWalletsScene(wallets: WalletWithSigners[], onWalletSelected: (wallet: 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;AAInC,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,EACrB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO,EACjD,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,aAwB1E"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/scenes/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;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}
+    `,
     ];
 }