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

package/dist/connector/index.js

@@ -7,27 +7,35 @@ 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 { 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();
+        this.headerRef = createRef();
+        this.bodyRef = createRef();
         this.closedHandler = () => {
             if ([
                 Scene.SelectingSigners,
@@ -38,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") ?? "{}");
@@ -97,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();
@@ -117,55 +163,87 @@ 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());
         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 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 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;
@@ -175,37 +253,65 @@ 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);
         })();
-        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">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
-            ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
-          </div>
-          <div class="body">${body}</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 active"
+            src=${CLOSE_SVG}
+            @click=${this.closedHandler}
+          />
         </div>
-      </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 `
@@ -235,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;
@@ -251,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%;
@@ -265,25 +392,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 +439,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 +463,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 +492,87 @@ 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);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "icon", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "client", void 0);
@@ -356,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);
@@ -368,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"}

package/dist/events/index.js

@@ -3,3 +3,8 @@ export class WillUpdateEvent extends Event {
         super("willUpdate", { composed: true });
     }
 }
+export class ClosedEvent extends Event {
+    constructor() {
+        super("closed", { composed: true });
+    }
+}

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"}