@ckb-ccc/connector 0.0.9-alpha.2 → 0.0.10-alpha.0

package/dist/connector/index.js

@@ -8,109 +8,23 @@ 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 { NOSTR_SVG } from "../assets/chains/nostr.svg";
-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 { ClosedEvent, WillUpdateEvent } from "../events";
-import { generateConnectingScene, generateSignersScene, generateWalletsScene, } from "../scenes";
-import { generateConnectedScene } from "../scenes/connected";
-var Scene;
-(function (Scene) {
-    Scene["SelectingWallets"] = "SelectingWallets";
-    Scene["SelectingSigners"] = "SelectingSigners";
-    Scene["Connecting"] = "Connecting";
-    Scene["Connected"] = "Connected";
-})(Scene || (Scene = {}));
+import { SignersController } from "../signers";
 let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
         super(...arguments);
-        this.wallets = [];
-        this.resetListeners = [];
         this.client = new ccc.ClientPublicTestnet();
-        this.scene = Scene.SelectingWallets;
+        this.signersController = new SignersController(this);
         this.mainRef = createRef();
-        this.headerRef = createRef();
         this.bodyRef = createRef();
-        this.closedHandler = () => {
-            if ([
-                Scene.SelectingSigners,
-                Scene.SelectingWallets,
-                Scene.Connecting,
-            ].includes(this.scene)) {
-                this.scene = Scene.SelectingWallets;
-                this.selectedSigner = undefined;
-                this.selectedWallet = undefined;
-            }
-            this.dispatchEvent(new ClosedEvent());
-        };
-        this.signerSelectedHandler = (wallet, signerInfo) => {
-            this.scene = Scene.Connecting;
-            this.connectingError = undefined;
-            this.selectedWallet = wallet;
-            this.selectedSigner = signerInfo;
-            (async () => {
-                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 = signerInfo.name;
-                this.saveConnection();
-                this.closedHandler();
-                this.internalAddress = await signer.getInternalAddress();
-                this.recommendAddress = await signer.getRecommendedAddress();
-                this.balance = await signer.getBalance();
-            })();
-        };
     }
     setClient(client) {
         this.client = client;
     }
-    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.walletName = undefined;
         this.signerName = undefined;
         this.saveConnection();
-        this.closedHandler();
+        this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
         this.signer?.signer.disconnect();
     }
     loadConnection() {
@@ -127,186 +41,78 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.loadConnection();
-        this.reloadSigners();
-        // Delay for extensions to load
-        setTimeout(() => this.reloadSigners(), 100);
     }
     willUpdate(changedProperties) {
-        if (changedProperties.has("client") ||
+        if (changedProperties.has("name") ||
+            changedProperties.has("icon") ||
+            changedProperties.has("client") ||
             changedProperties.has("signerFilter") ||
             changedProperties.has("preferredNetworks")) {
-            this.reloadSigners();
+            this.signersController.refresh();
         }
-        if ((changedProperties.has("scene") && this.scene === Scene.Connected) ||
-            changedProperties.has("wallets") ||
-            changedProperties.has("walletName") ||
+        if (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;
-                }
-            })();
+            this.refreshSigner();
         }
-        if (changedProperties.has("signer")) {
-            this.prepareSigner();
-        }
-        this.dispatchEvent(new WillUpdateEvent());
+        this.dispatchEvent(new Event("willUpdate"));
     }
-    reloadSigners() {
-        this.wallets = [];
-        (async () => {
-            const signer = this.signer;
-            if (!signer) {
-                return;
-            }
-            if (await signer.signer.replaceClient(this.client)) {
-                this.signer = {
-                    ...signer,
-                };
-            }
-            else {
-                this.signer = undefined;
-            }
-        })();
-        this.resetListeners.forEach((listener) => listener());
-        this.resetListeners = [];
-        const name = this.name ??
-            document.querySelector("head title").text;
-        const icon = this.icon ??
-            document.querySelector('link[rel="icon"]').href;
-        const preferredNetworks = [
-            ...(this.preferredNetworks ?? []),
-            {
-                addressPrefix: "ckb",
-                signerType: ccc.SignerType.BTC,
-                network: "btc",
-            },
-            {
-                addressPrefix: "ckt",
-                signerType: ccc.SignerType.BTC,
-                network: "btcTestnet",
-            },
-        ];
-        ccc.JoyId.getJoyIdSigners(this.client, name, icon, preferredNetworks).forEach(({ signer, name }) => {
-            this.addSigner("JoyID", name, JOY_ID_SVG, signer);
-        });
-        const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client, preferredNetworks);
-        if (uniSatSigner) {
-            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, uniSatSigner);
-        }
-        ccc.Okx.getOKXBitcoinSigner(this.client, preferredNetworks).forEach((signer) => {
-            this.addSigner("OKX Wallet", signer.type, OKX_SVG, signer);
-        });
-        const nip07Signer = ccc.Nip07.getNip07Signer(this.client);
-        if (nip07Signer) {
-            this.addSigner("Nostr", "Nostr", NOSTR_SVG, nip07Signer);
-        }
-        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, 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"));
-        // ===
+    async refreshSigner() {
+        const wallet = this.signersController.wallets.find(({ name }) => name === this.walletName);
+        const signer = wallet?.signers.find(({ name }) => name === this.signerName);
+        this.updateSigner(wallet, signer);
     }
-    async addSigner(walletName, signerName, icon, signer) {
-        const signerInfo = { name: signerName, signer };
-        if (this.signerFilter &&
-            !(await this.signerFilter(signerInfo, { name: walletName, icon }))) {
+    async updateSigner(wallet, signerInfo) {
+        if (signerInfo?.signer === this.signer?.signer) {
             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: signers.length !== 0 ? signers : [signerInfo],
-            };
-        });
-        if (!updated) {
-            wallets.push({
-                name: walletName,
-                icon,
-                signers: [signerInfo],
+        this.unregisterSignerReplacer?.();
+        this.unregisterSignerReplacer = undefined;
+        if (signerInfo && (await signerInfo.signer.isConnected())) {
+            this.wallet = wallet;
+            this.signer = signerInfo;
+            this.unregisterSignerReplacer?.();
+            this.unregisterSignerReplacer = signerInfo.signer.onReplaced(() => {
+                this.signersController.refresh();
             });
         }
-        this.wallets = wallets;
+        else {
+            this.wallet = undefined;
+            this.signer = undefined;
+        }
     }
     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));
-            }
-            if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
-                return generateWalletsScene(this.wallets, (wallet) => {
-                    this.selectedWallet = wallet;
-                    this.scene = Scene.SelectingSigners;
-                }, this.signerSelectedHandler);
-            }
-            if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
-                return generateSignersScene(this.selectedWallet, this.signerSelectedHandler);
-            }
-            return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.connectingError, this.signerSelectedHandler);
-        })();
-        const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(this.scene);
-        return html ` <div
+        return html `<div
       class="background"
       @click=${(event) => {
             if (event.target === event.currentTarget) {
-                this.closedHandler();
+                this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+                this.bodyRef.value?.onClose?.();
             }
         }}
+      @updated=${() => this.updated()}
     >
       <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;
-            }
-        }}
-          />
-          ${title}
-          <img
-            class="close active"
-            src=${CLOSE_SVG}
-            @click=${this.closedHandler}
-          />
-        </div>
-        <div class="body" ${ref(this.bodyRef)}>${body}</div>
+        ${this.wallet && this.signer
+            ? html `
+              <ccc-connected-scene
+                .wallet=${this.wallet}
+                .signer=${this.signer.signer}
+                @disconnect=${() => this.disconnect()}
+                ${ref(this.bodyRef)}
+              ></ccc-connected-scene>
+            `
+            : html `
+              <ccc-selecting-scene
+                .wallets=${this.signersController.wallets}
+                @connected=${({ walletName, signerName }) => {
+                this.walletName = walletName;
+                this.signerName = signerName;
+                this.refreshSigner();
+                this.saveConnection();
+            }}
+                ${ref(this.bodyRef)}
+              ></ccc-selecting-scene>
+            `}
       </div>
     </div>`;
     }
@@ -314,8 +120,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         if (!this.mainRef.value) {
             return;
         }
-        this.mainRef.value.style.height = `${(this.bodyRef.value?.clientHeight ?? 0) +
-            (this.headerRef.value?.clientHeight ?? 0)}px`;
+        this.mainRef.value.style.height = `${this.bodyRef.value?.clientHeight ?? 0}px`;
     }
 };
 WebComponentConnector.styles = css `
@@ -327,62 +132,6 @@ WebComponentConnector.styles = css `
       top: 0;
     }
 
-    button {
-      background: none;
-      color: inherit;
-      border: none;
-      padding: 0;
-      font: inherit;
-      cursor: pointer;
-      outline: inherit;
-    }
-
-    .text-bold {
-      font-weight: bold;
-    }
-
-    .text-tip {
-      color: var(--tip-color);
-    }
-
-    .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;
-    }
-    .mb-2 {
-      margin-bottom: 1rem;
-    }
-    .mt-1 {
-      margin-top: 0.7rem;
-    }
-    .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%;
       height: 100%;
@@ -399,202 +148,22 @@ WebComponentConnector.styles = css `
       overflow: hidden;
       transition: height 0.15s ease-out;
     }
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      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: 0 1.3rem 1.4rem;
-      min-width: 20rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .btn-primary {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: start;
-      padding: 0.75rem 1rem;
-      background: var(--btn-primary);
-      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;
-      align-items: center;
-      padding: 0.25rem 1rem;
-      background: var(--btn-secondary);
-      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;
-      height: 4rem;
-      margin-bottom: 0.5rem;
-      border-radius: 0.8rem;
-    }
-
-    .connecting-wallet-icon {
-      width: 5rem;
-      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);
+], WebComponentConnector.prototype, "name", void 0);
 __decorate([
     property()
-], WebComponentConnector.prototype, "preferredNetworks", void 0);
+], WebComponentConnector.prototype, "icon", void 0);
 __decorate([
     property()
-], WebComponentConnector.prototype, "name", void 0);
+], WebComponentConnector.prototype, "preferredNetworks", void 0);
 __decorate([
     property()
-], WebComponentConnector.prototype, "icon", void 0);
+], WebComponentConnector.prototype, "signerFilter", void 0);
 __decorate([
     state()
 ], 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, "connectingError", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "walletName", void 0);
@@ -609,13 +178,7 @@ __decorate([
 ], 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.prototype, "unregisterSignerReplacer", void 0);
 WebComponentConnector = __decorate([
     customElement("ccc-connector")
 ], WebComponentConnector);

package/dist/scenes/connected.d.ts

@@ -1,4 +1,15 @@
 import { ccc } from "@ckb-ccc/ccc";
+import { LitElement, PropertyValues } from "lit";
 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): (import("lit").TemplateResult<1> | undefined)[];
+export declare class ConnectedScene extends LitElement {
+    wallet?: ccc.Wallet;
+    signer?: ccc.Signer;
+    private recommendedAddress?;
+    private internalAddress?;
+    private balance?;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+    updated(): void;
+}
 //# sourceMappingURL=connected.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAenC,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,mDAmDvB"}
+{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAG3B,OAAO,CAAC,kBAAkB,CAAC,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;IAE1B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAUzD,MAAM;IAkEN,MAAM,CAAC,MAAM,0BAmGX;IAEF,OAAO;CAGR"}