@ckb-ccc/connector 0.0.5-alpha.1 → 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/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

@@ -3,6 +3,7 @@ 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;
@@ -17,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;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,CAAC;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"}
+{"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

@@ -11,16 +11,21 @@ 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() {
@@ -43,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) => {
@@ -54,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;
@@ -68,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") ?? "{}");
@@ -102,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();
@@ -136,45 +163,72 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             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);
+        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);
         }));
+        // === 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));
+        // ===
     }
-    addSigner(walletName, signerName, icon, type, signer) {
+    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;
@@ -186,7 +240,11 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
             return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
         })();
-        const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(this.scene);
+        const canBack = [
+            Scene.SelectingSigners,
+            Scene.Connecting,
+            Scene.SwitchingNetworks,
+        ].includes(this.scene);
         return html `<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -195,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;
         }
@@ -208,17 +267,30 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         }}
       >
         <div class="main" ${ref(this.mainRef)}>
-          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+          <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) {
-                this.scene = Scene.SelectingSigners;
+                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}
@@ -267,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;
@@ -283,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%;
@@ -305,8 +398,13 @@ WebComponentConnector.styles = css `
       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,
@@ -324,7 +422,7 @@ WebComponentConnector.styles = css `
     }
 
     .body {
-      padding: 1.4rem 1.3rem;
+      padding: 0 1.3rem 1.4rem;
       min-width: 20rem;
       display: flex;
       flex-direction: column;
@@ -341,17 +439,21 @@ WebComponentConnector.styles = css `
       border-radius: 0.4rem;
       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;
@@ -361,12 +463,20 @@ WebComponentConnector.styles = css `
       border-radius: 9999px;
       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;
@@ -380,10 +490,81 @@ 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);
@@ -417,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

package/dist/scenes/connected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAgBnC,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,kBAAkB,EAAE,MAAM,GAAG,SAAS,EACtC,eAAe,EAAE,MAAM,GAAG,SAAS,EACnC,OAAO,EAAE,GAAG,CAAC,GAAG,GAAG,SAAS,EAC5B,UAAU,EAAE,MAAM,IAAI,EACtB,iBAAiB,EAAE,MAAM,IAAI,mDAoD9B"}

package/dist/scenes/connected.js

@@ -0,0 +1,71 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { html } from "lit";
+import { CKB_SVG } from "../assets/chains";
+import { COPY_SVG } from "../assets/copy.svg";
+import { DISCONNECT_SVG } from "../assets/diconnect.svg";
+import { SWAP_SVG } from "../assets/swap.svg";
+import { signerTypeToIcon } from "./signers";
+function copyAddress(address) {
+    if (!address) {
+        return;
+    }
+    return window.navigator.clipboard.writeText(address);
+}
+export function formatString(str, l = 7, r = 5) {
+    if (str && str.length > l + r + 3) {
+        return `${str.slice(0, l)}...${str.slice(-r)}`;
+    }
+    return str;
+}
+export function generateConnectedScene(wallet, signer, recommendedAddress, internalAddress, balance, disconnect, handleSwitchClick) {
+    return [
+        undefined,
+        html `
+      <div class="position-relative">
+        <img
+          class="connecting-wallet-icon"
+          src=${wallet.icon}
+          alt=${wallet.name}
+        />
+        <img
+          class="connected-type-icon"
+          src=${signerTypeToIcon(signer.signer.type)}
+          alt=${signer.signer.type}
+        >
+        </img>
+      </div>
+      
+      <div class="flex align-center mt-2">
+        <span class="text-bold fs-xl">${formatString(internalAddress)}</span>
+        <img class="cursor-pointer copy-btn" src=${COPY_SVG} alt="copy" @click=${() => copyAddress(internalAddress)}/>
+      </div>
+      <div class="text-bold fs-md">${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB</div>
+      <div class="flex align-center">
+        <span class="text-bold text-tip fs-md">${formatString(recommendedAddress, 13, 7)}</span>
+        <img class="cursor-pointer copy-btn-sm" src=${COPY_SVG} alt="copy" @click=${() => copyAddress(recommendedAddress)}/>
+      </div>
+
+      <button
+        class="btn-primary mt-2"
+        @click=${disconnect}
+      >
+        <img
+          src=${DISCONNECT_SVG}
+          alt="disconnect"
+        />
+        Disconnect
+      </button>
+
+      <div class="switch-btn-container align-center flex justify-center mt-1">
+        <div class="switch-line"></div>
+        <div class="switch-content flex align-center cursor-pointer ml-2 mr-2 fs-sm" @click=${handleSwitchClick}>
+          <img class="mr-1 sm-chain-logo" src=${CKB_SVG} alt="Nervos Network">
+          ${signer.signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+          ${["ckb", "ckt"].includes(signer.signer.client.addressPrefix) ? "" : ` ${signer.signer.client.addressPrefix}`}
+          <img class="ml-1" src=${SWAP_SVG} alt="Nervos Network">
+        </div>
+        <div class="switch-line"></div>
+      </div>
+    `,
+    ];
+}

package/dist/scenes/networks.d.ts

@@ -0,0 +1,3 @@
+import { ccc } from "..";
+export declare function generateNetworksScene(client: ccc.Client, handleSwapClick: (client: ccc.Client) => unknown): unknown[];
+//# sourceMappingURL=networks.d.ts.map

package/dist/scenes/networks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"networks.d.ts","sourceRoot":"","sources":["../../src/scenes/networks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,CAAC;AAGzB,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,eAAe,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO,aAuCjD"}