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

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,9 +3,8 @@ 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;
@@ -13,10 +12,15 @@ export declare class WebComponentConnector extends LitElement {
     private scene;
     private selectedWallet?;
     private selectedSigner?;
+    private connectingError?;
     private walletName?;
     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;AAyB5D,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,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;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAGjC,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;YAUhB,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;YA6FP,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;IA+FN,OAAO;IAUP,OAAO,CAAC,aAAa,CAgBnB;IAEF,OAAO,CAAC,qBAAqB,CAqC3B;IAEF,MAAM,CAAC,MAAM,0BAsPX;CACH"}

package/dist/connector/index.js

@@ -11,23 +11,26 @@ 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 { ClosedEvent, WillUpdateEvent } from "../events";
 import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
+import { generateConnectedScene } from "../scenes/connected";
+import { generateNetworksScene } from "../scenes/networks";
 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() {
         super(...arguments);
         this.wallets = [];
         this.resetListeners = [];
-        this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
         this.scene = Scene.SelectingWallets;
         this.mainRef = createRef();
@@ -43,47 +46,76 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
                 this.selectedSigner = undefined;
                 this.selectedWallet = undefined;
             }
-            this.isOpen = false;
+            else if ([Scene.SwitchingNetworks].includes(this.scene)) {
+                this.scene = Scene.Connected;
+            }
+            this.dispatchEvent(new ClosedEvent());
         };
-        this.signerSelectedHandler = (wallet, signer) => {
+        this.signerSelectedHandler = (wallet, signerInfo) => {
             this.scene = Scene.Connecting;
+            this.connectingError = undefined;
             this.selectedWallet = wallet;
-            this.selectedSigner = signer;
+            this.selectedSigner = signerInfo;
             (async () => {
-                await signer.signer.connect();
-                if (!(await signer.signer.isConnected())) {
+                const { signer } = signerInfo;
+                try {
+                    await signer.connect();
+                }
+                catch (error) {
+                    if (typeof error === "object") {
+                        const message = error?.message;
+                        if (typeof message === "string") {
+                            this.connectingError = message;
+                        }
+                        else {
+                            this.connectingError = JSON.stringify(message);
+                        }
+                        return;
+                    }
+                    this.connectingError = JSON.stringify(error);
+                }
+                if (!(await signer.isConnected())) {
                     return;
                 }
                 this.scene = Scene.Connected;
                 this.walletName = wallet.name;
-                this.signerName = signer.name;
+                this.signerName = signerInfo.name;
                 this.saveConnection();
                 this.closedHandler();
+                this.internalAddress = await signer.getInternalAddress();
+                this.recommendAddress = await signer.getRecommendedAddress();
+                this.balance = await signer.getBalance();
             })();
         };
     }
-    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;
-        })();
+    async updateSignerInfo() {
+        const signer = this.signer?.signer;
+        if (!signer) {
+            return;
+        }
+        this.recommendAddress = await signer.getRecommendedAddress();
+        this.internalAddress = await signer.getInternalAddress();
+        this.balance = await signer.getBalance();
+    }
+    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 +134,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("wallet")) {
-            const wallet = this.wallets.find(({ name }) => name === this.walletName);
-            this.signer = wallet?.signers.find(({ name }) => name === this.signerName);
+        if ((changedProperties.has("scene") && this.scene === Scene.Connected) ||
+            changedProperties.has("wallets") ||
+            changedProperties.has("walletName") ||
+            changedProperties.has("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();
@@ -122,12 +163,13 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     reloadSigners() {
         this.wallets = [];
         (async () => {
-            if (!this.signer) {
+            const signer = this.signer;
+            if (!signer) {
                 return;
             }
+            await signer.signer.replaceClient(this.client);
             this.signer = {
-                ...this.signer,
-                signer: await this.signer.signer.replaceClient(this.client),
+                ...signer,
             };
         })();
         this.resetListeners.forEach((listener) => listener());
@@ -136,45 +178,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 ccc.SignerOpenLink(this.client, ccc.SignerType.EVM, `https://metamask.app.link/dapp/${window.location.href}`));
+        [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
+            this.addSigner("OKX Wallet", type, OKX_SVG, new ccc.SignerOpenLink(this.client, type, "https://www.okx.com/download?deeplink=" +
+                encodeURIComponent("okx://wallet/dapp/url?dappUrl=" +
+                    encodeURIComponent(window.location.href))));
+        });
+        this.addSigner("UniSat", ccc.SignerType.BTC, UNI_SAT_SVG, new ccc.SignerOpenLink(this.client, ccc.SignerType.BTC, "https://unisat.io/download"));
+        // ===
     }
-    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 ccc.SignerDummy));
             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;
@@ -184,53 +253,58 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
                 return generateSignersScene(this.selectedWallet, this.signerSelectedHandler);
             }
-            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
+            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.connectingError, this.signerSelectedHandler);
         })();
-        const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(this.scene);
-        return html `<style>
-        :host {
-          ${this.isOpen ? "" : "display: none;"}
-          --background: #fff;
-          --divider: #eee;
-          --btn-primary: #f8f8f8;
-          --btn-primary-hover: #efeeee;
-          --btn-secondary: #ddd;
-          color: #1e1e1e;
-          --tip-color: #666;
-        }
-      </style>
-      <div
-        class="background"
-        @click=${(event) => {
+        const canBack = [
+            Scene.SelectingSigners,
+            Scene.Connecting,
+            Scene.SwitchingNetworks,
+        ].includes(this.scene);
+        return html ` <div
+      class="background"
+      @click=${(event) => {
             if (event.target === event.currentTarget) {
                 this.closedHandler();
             }
         }}
-      >
-        <div class="main" ${ref(this.mainRef)}>
-          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
-            <img
-              class="back ${canBack ? "active" : ""}"
-              src=${LEFT_SVG}
-              @click=${() => {
+    >
+      <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) {
-                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}
-            <img
-              class="close active"
-              src=${CLOSE_SVG}
-              @click=${this.closedHandler}
-            />
-          </div>
-          <div class="body" ${ref(this.bodyRef)}>${body}</div>
+          />
+          ${title}
+          <img
+            class="close active"
+            src=${CLOSE_SVG}
+            @click=${this.closedHandler}
+          />
         </div>
-      </div>`;
+        <div class="body" ${ref(this.bodyRef)}>${body}</div>
+      </div>
+    </div>`;
     }
     updated() {
         if (!this.mainRef.value) {
@@ -267,9 +341,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 +366,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 +400,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 +424,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 +441,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 +465,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,13 +492,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([
-    state()
-], WebComponentConnector.prototype, "isOpen", void 0);
+    property()
+], WebComponentConnector.prototype, "signerFilter", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "name", void 0);
@@ -405,6 +585,9 @@ __decorate([
 __decorate([
     state()
 ], WebComponentConnector.prototype, "selectedSigner", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "connectingError", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "walletName", void 0);
@@ -417,6 +600,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/events/index.d.ts

@@ -1,4 +1,7 @@
 export declare class WillUpdateEvent extends Event {
     constructor();
 }
+export declare class ClosedEvent 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,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC;AAED,qBAAa,WAAY,SAAQ,KAAK;;CAIrC"}