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

package/dist/advancedBarrel.d.ts

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

package/dist/advancedBarrel.d.ts.map

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

package/dist/advancedBarrel.js

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "../utils";
+export const CKB_SM_SVG = encodeSvgToImgSrc('<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_221_415)"><path d="M0.666992 9C0.666992 11.3869 1.6152 13.6761 3.30303 15.364C4.99086 17.0518 7.28004 18 9.66699 18C12.0539 18 14.3431 17.0518 16.031 15.364C17.7188 13.6761 18.667 11.3869 18.667 9C18.667 6.61305 17.7188 4.32387 16.031 2.63604C14.3431 0.948212 12.0539 0 9.66699 0C7.28004 0 4.99086 0.948212 3.30303 2.63604C1.6152 4.32387 0.666992 6.61305 0.666992 9Z" fill="#333333"/><path d="M5.51318 4.84619V12.9231H7.60395V8.52235H9.20549L5.51318 4.84619Z" fill="white"/><path d="M11.73 4.84619V9.24696H10.1284L13.8207 12.9231V4.84619H11.73Z" fill="white"/></g><defs><clipPath id="clip0_221_415"><rect width="18" height="18" fill="white" transform="translate(0.666992)"/></clipPath></defs></svg>');

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

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

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

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

package/dist/assets/copy.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const COPY_SVG = encodeSvgToImgSrc('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13.5657V6.10526C19 5.49737 18.5091 5 17.9091 5H10.5454C9.94543 5 9.45452 5.49737 9.45452 6.10526V13.5657C9.45452 14.1736 9.94543 14.671 10.5454 14.671H17.9091C18.5091 14.671 19 14.1736 19 13.5657Z" fill="#999999"/><path d="M14.5455 15.8684H9.18183C8.58183 15.8684 8.09092 15.3711 8.09092 14.7632V9.329H6.09091C5.49091 9.329 5 9.82637 5 10.4343V17.8947C5 18.5026 5.49091 19 6.09091 19H13.4546C14.0546 19 14.5455 18.5026 14.5455 17.8947V15.8684Z" fill="#999999"/></svg>');

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

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

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

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

package/dist/assets/diconnect.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const DISCONNECT_SVG = encodeSvgToImgSrc('<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="8" fill="#DDDDDD"/><path d="M20.375 16.875H14.25V15.125H20.375L19.5 13.375H21.25L23 16L21.25 18.625H19.5L20.375 16.875ZM20.9509 11.051L19.7128 12.2886C19.226 11.8 18.6473 11.4125 18.0101 11.1484C17.3729 10.8844 16.6897 10.749 16 10.75C13.1006 10.75 10.75 13.1006 10.75 16C10.75 18.8994 13.1006 21.25 16 21.25C17.4107 21.25 18.7309 20.6923 19.71 19.7147L20.9462 20.9532C20.297 21.6031 19.5259 22.1184 18.6771 22.4696C17.8283 22.8209 16.9186 23.0011 16 23C12.1341 23 9 19.8659 9 16C9 12.1341 12.1341 9 16 9C17.8816 9 19.647 9.74667 20.9509 11.051Z" fill="#666666"/></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/swap.svg.d.ts

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

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

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

package/dist/assets/swap.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const SWAP_SVG = encodeSvgToImgSrc('<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.30688 5.22537L11.1669 3.36536L9.30688 1.50537" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.16699 3.36523H11.167" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.02698 6.77539L2.16699 8.63541L4.02698 10.4954" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.167 8.63525H2.16699" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');

package/dist/connector/index.d.ts

@@ -1,10 +1,14 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
+import { Ref } from "lit/directives/ref.js";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
+    signerFilter?: (signerInfo: ccc.SignerInfo, wallet: ccc.Wallet) => Promise<boolean>;
     private resetListeners;
     isOpen: boolean;
     setIsOpen(isOpen: boolean): void;
+    name?: string;
+    icon?: string;
     client: ccc.Client;
     setClient(client: ccc.Client): void;
     private scene;
@@ -14,6 +18,10 @@ export declare class WebComponentConnector extends LitElement {
     private signerName?;
     wallet?: ccc.Wallet;
     signer?: ccc.SignerInfo;
+    private recommendAddress?;
+    private internalAddress?;
+    private balance?;
+    private updateSignerInfo;
     private prepareSigner;
     disconnect(): void;
     private loadConnection;
@@ -22,7 +30,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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,CAAC;AA0B5D,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAEnC,YAAY,CAAC,EAAE,CACpB,UAAU,EAAE,GAAG,CAAC,UAAU,EAC1B,MAAM,EAAE,GAAG,CAAC,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,CAAC;IAEtB,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IACxB,SAAS,CAAC,MAAM,EAAE,OAAO;IAKzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAKnC,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,cAAc,CAAC,CAAoB;IAE3C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAGxC,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAG/B,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAElC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;YAEZ,gBAAgB;YAShB,aAAa;IAYpB,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoCnD,OAAO,CAAC,aAAa;YA2FP,SAAS;IAyCvB,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC3C,SAAS,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAC7C,OAAO,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAE3C,MAAM;IA2GN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAoB3B;IAEF,MAAM,CAAC,MAAM,0BAsPX;CACH"}

package/dist/connector/index.js

@@ -7,18 +7,25 @@ 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 { METAMASK_SVG } from "../assets/metamask.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
 import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
+import { generateConnectedScene } from "../scenes/connected";
+import { generateNetworksScene } from "../scenes/networks";
+import { SignerOpenLink } from "../signerOpenLink";
 var Scene;
 (function (Scene) {
     Scene["SelectingWallets"] = "SelectingWallets";
     Scene["SelectingSigners"] = "SelectingSigners";
     Scene["Connecting"] = "Connecting";
     Scene["Connected"] = "Connected";
+    Scene["SwitchingNetworks"] = "SwitchingNetworks";
 })(Scene || (Scene = {}));
 let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
@@ -28,6 +35,9 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
         this.scene = Scene.SelectingWallets;
+        this.mainRef = createRef();
+        this.headerRef = createRef();
+        this.bodyRef = createRef();
         this.closedHandler = () => {
             if ([
                 Scene.SelectingSigners,
@@ -38,6 +48,9 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
                 this.selectedSigner = undefined;
                 this.selectedWallet = undefined;
             }
+            else if ([Scene.SwitchingNetworks].includes(this.scene)) {
+                this.scene = Scene.Connected;
+            }
             this.isOpen = false;
         };
         this.signerSelectedHandler = (wallet, signer) => {
@@ -49,6 +62,8 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
                 if (!(await signer.signer.isConnected())) {
                     return;
                 }
+                this.recommendAddress = await signer.signer.getRecommendedAddress();
+                this.balance = await signer.signer.getBalance();
                 this.scene = Scene.Connected;
                 this.walletName = wallet.name;
                 this.signerName = signer.name;
@@ -63,22 +78,30 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     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;
-        })();
+    async updateSignerInfo() {
+        if (!this.signer) {
+            return;
+        }
+        this.recommendAddress = await this.signer.signer.getRecommendedAddress();
+        this.balance = await this.signer.signer.getBalance();
+        this.internalAddress = await this.signer.signer.getInternalAddress();
+    }
+    async prepareSigner() {
+        if (this.signer && (await this.signer.signer.isConnected())) {
+            await this.updateSignerInfo();
+            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();
+        this.closedHandler();
     }
     loadConnection() {
         const { signerName, walletName, } = JSON.parse(window.localStorage.getItem("ccc-connection-info") ?? "{}");
@@ -97,17 +120,26 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.reloadSigners();
     }
     willUpdate(changedProperties) {
-        if (changedProperties.has("client")) {
+        if (changedProperties.has("client") ||
+            changedProperties.has("signerFilter")) {
             this.reloadSigners();
         }
         if (changedProperties.has("walletName") ||
-            changedProperties.has("wallets")) {
-            this.wallet = this.wallets.find(({ name }) => name === this.walletName);
-        }
-        if (changedProperties.has("signerName") ||
+            changedProperties.has("wallets") ||
+            changedProperties.has("signerName") ||
             changedProperties.has("wallet")) {
-            const wallet = this.wallets.find(({ name }) => name === this.walletName);
-            this.signer = wallet?.signers.find(({ name }) => name === this.signerName);
+            (async () => {
+                const wallet = this.wallets.find(({ name }) => name === this.walletName);
+                const signer = wallet?.signers.find(({ name }) => name === this.signerName);
+                if (signer && (await signer.signer.isConnected())) {
+                    this.wallet = wallet;
+                    this.signer = signer;
+                }
+                else {
+                    this.wallet = undefined;
+                    this.signer = undefined;
+                }
+            })();
         }
         if (changedProperties.has("signer")) {
             this.prepareSigner();
@@ -127,45 +159,76 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         })();
         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 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, name }) => {
+            this.addSigner("JoyID", name, JOY_ID_SVG, signer);
         });
         const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
         if (uniSatSigner) {
-            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, uniSatSigner);
         }
         const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
         if (okxBitcoinSigner) {
-            this.addSigner("OKX Wallet", "BTC", OKX_SVG, ccc.SignerType.BTC, okxBitcoinSigner);
+            this.addSigner("OKX Wallet", "BTC", OKX_SVG, 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);
+            this.addSigner(`${signer.detail.info.name}`, "EVM", signer.detail.info.icon, signer);
         }));
-    }
-    addSigner(walletName, signerName, icon, type, signer) {
+        // === Dummy signers ===
+        this.addSigner("MetaMask", "EVM", METAMASK_SVG, new SignerOpenLink(this.client, `https://metamask.app.link/dapp/${window.location.href}`, ccc.SignerType.EVM));
+        [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
+            this.addSigner("OKX Wallet", type, OKX_SVG, new SignerOpenLink(this.client, "https://www.okx.com/download?deeplink=" +
+                encodeURIComponent("okx://wallet/dapp/url?dappUrl=" +
+                    encodeURIComponent(window.location.href)), type));
+        });
+        this.addSigner("UniSat", ccc.SignerType.BTC, UNI_SAT_SVG, new SignerOpenLink(this.client, "https://unisat.io/download", ccc.SignerType.BTC));
+        // ===
+    }
+    async addSigner(walletName, signerName, icon, signer) {
+        const signerInfo = { name: signerName, signer };
+        if (this.signerFilter &&
+            !(await this.signerFilter(signerInfo, { name: walletName, icon }))) {
+            return;
+        }
         let updated = false;
         const wallets = this.wallets.map((wallet) => {
             if (wallet.name !== walletName) {
                 return wallet;
             }
             updated = true;
+            const allSigners = [...wallet.signers, signerInfo];
+            const signers = allSigners.filter(({ signer }) => !(signer instanceof SignerOpenLink));
             return {
                 ...wallet,
-                signers: [...wallet.signers, { type, name: signerName, signer }],
+                signers: signers.length !== 0 ? signers : [signerInfo],
             };
         });
         if (!updated) {
             wallets.push({
                 name: walletName,
                 icon,
-                signers: [{ type, name: signerName, signer }],
+                signers: [signerInfo],
             });
         }
         this.wallets = wallets;
     }
     render() {
         const [title, body] = (() => {
+            if (this.scene === Scene.Connected && this.wallet && this.signer) {
+                return generateConnectedScene(this.wallet, this.signer, this.recommendAddress, this.internalAddress, this.balance, this.disconnect.bind(this), () => {
+                    this.scene = Scene.SwitchingNetworks;
+                });
+            }
+            if (this.scene === Scene.SwitchingNetworks) {
+                return generateNetworksScene(this.client, (client) => {
+                    this.setClient(client);
+                    this.closedHandler();
+                });
+            }
             if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
                 return generateWalletsScene(this.wallets, (wallet) => {
                     this.selectedWallet = wallet;
@@ -177,6 +240,11 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
             return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
         })();
+        const canBack = [
+            Scene.SelectingSigners,
+            Scene.Connecting,
+            Scene.SwitchingNetworks,
+        ].includes(this.scene);
         return html `<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -185,6 +253,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
+          --btn-secondary-hover: #ccc;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -197,16 +266,51 @@ 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-lg ${title == null
+            ? ""
+            : "header-divider"}"
+            ${ref(this.headerRef)}
+          >
+            <img
+              class="back ${canBack ? "active" : ""}"
+              src=${LEFT_SVG}
+              @click=${() => {
+            if (this.scene === Scene.Connecting) {
+                if ((this.selectedWallet?.signers.length ?? 0) <= 1) {
+                    this.scene = Scene.SelectingWallets;
+                }
+                else {
+                    this.scene = Scene.SelectingSigners;
+                }
+            }
+            else if (this.scene === Scene.SelectingSigners) {
+                this.scene = Scene.SelectingWallets;
+            }
+            else if (this.scene === Scene.SwitchingNetworks) {
+                this.scene = Scene.Connected;
+            }
+        }}
+            />
             ${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 {
@@ -235,9 +339,18 @@ WebComponentConnector.styles = css `
       color: var(--tip-color);
     }
 
-    .fs-big {
+    .fs-sm {
+      font-size: 0.8rem;
+    }
+    .fs-md {
+      font-size: 1rem;
+    }
+    .fs-lg {
       font-size: 1.2rem;
     }
+    .fs-xl {
+      font-size: 1.5rem;
+    }
 
     .mb-1 {
       margin-bottom: 0.7rem;
@@ -251,6 +364,18 @@ WebComponentConnector.styles = css `
     .mt-2 {
       margin-top: 1rem;
     }
+    .ml-1 {
+      margin-left: 0.7rem;
+    }
+    .ml-2 {
+      margin-left: 1em;
+    }
+    .mr-1 {
+      margin-right: 0.7rem;
+    }
+    .mr-2 {
+      margin-right: 1rem;
+    }
 
     .background {
       width: 100%;
@@ -265,25 +390,39 @@ WebComponentConnector.styles = css `
       transform: translate(-50%, -50%);
       background: var(--background);
       border-radius: 1.2rem;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
     }
 
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 1rem 1.3rem;
+      padding: 1rem 1.3rem 0.5rem;
+    }
+
+    .header-divider {
+      padding-bottom: 1rem;
       border-bottom: 1px solid var(--divider);
+      margin-bottom: 1rem;
     }
 
     .close,
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
     .body {
-      padding: 1.4rem 1.3rem;
+      padding: 0 1.3rem 1.4rem;
       min-width: 20rem;
       display: flex;
       flex-direction: column;
@@ -298,18 +437,23 @@ 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 {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
+      border-radius: 0.4rem;
     }
-
     .btn-primary:hover {
       background: var(--btn-primary-hover);
     }
+    .btn-primary:disabled {
+      cursor: not-allowed;
+    }
+    .btn-primary:disabled:hover {
+      background: var(--btn-primary);
+    }
 
     .btn-secondary {
       display: flex;
@@ -317,19 +461,28 @@ 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 {
       width: 0.8rem;
       height: 0.8rem;
       margin-right: 0.5rem;
     }
+    .btn-secondary:hover {
+      background: var(--btn-secondary-hover);
+    }
+    .btn-secondary:disabled {
+      cursor: not-allowed;
+    }
+    .btn-secondary:disabled:hover {
+      background: var(--btn-secondary);
+    }
 
     .wallet-icon {
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
     }
 
     .connecting-wallet-icon {
@@ -337,13 +490,90 @@ WebComponentConnector.styles = css `
       height: 5rem;
       border-radius: 1rem;
     }
+
+    .position-relative {
+      position: relative;
+    }
+    .position-absolute {
+      position: absolute;
+    }
+
+    .connected-type-icon {
+      position: absolute;
+      width: 1.5rem;
+      height: 1.5rem;
+      right: -0.5rem;
+      bottom: -0.5rem;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+
+    .cursor-pointer {
+      cursor: pointer;
+    }
+
+    .flex {
+      display: flex;
+    }
+    .justify-center {
+      justify-content: center;
+    }
+    .justify-between {
+      justify-content: space-between;
+    }
+    .align-center {
+      align-items: center;
+    }
+
+    .switch-btn-container {
+      width: 100%;
+      padding: 1rem;
+    }
+
+    .switch-line {
+      flex: 1;
+      height: 1px;
+      background-color: var(--divider);
+    }
+
+    .switching-status-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      background: #0f0;
+      border-radius: 50%;
+    }
+
+    .copy-btn {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .copy-btn-sm {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .sm-chain-logo {
+      width: 1.125rem;
+    }
   `;
 __decorate([
     state()
 ], WebComponentConnector.prototype, "wallets", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "signerFilter", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "isOpen", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "name", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "icon", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "client", void 0);
@@ -368,6 +598,15 @@ __decorate([
 __decorate([
     state()
 ], WebComponentConnector.prototype, "signer", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "recommendAddress", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "internalAddress", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "balance", void 0);
 WebComponentConnector = __decorate([
     customElement("ccc-connector")
 ], WebComponentConnector);

package/dist/scenes/connected.d.ts

@@ -0,0 +1,4 @@
+import { ccc } from "@ckb-ccc/ccc";
+export declare function formatString(str: string | undefined, l?: number, r?: number): string | undefined;
+export declare function generateConnectedScene(wallet: ccc.Wallet, signer: ccc.SignerInfo, recommendedAddress: string | undefined, internalAddress: string | undefined, balance: ccc.Num | undefined, disconnect: () => void, handleSwitchClick: () => void): (import("lit").TemplateResult<1> | undefined)[];
+//# sourceMappingURL=connected.d.ts.map