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

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

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

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

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

package/dist/assets/left.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const LEFT_SVG = encodeSvgToImgSrc('<svg width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><path d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z" stroke="#1E1E1E" stroke-width="1"/></svg>');

package/dist/connector/index.d.ts

@@ -1,10 +1,13 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
+import { Ref } from "lit/directives/ref.js";
 export declare class WebComponentConnector extends LitElement {
     private wallets;
     private resetListeners;
     isOpen: boolean;
     setIsOpen(isOpen: boolean): void;
+    name?: string;
+    icon?: string;
     client: ccc.Client;
     setClient(client: ccc.Client): void;
     private scene;
@@ -22,7 +25,11 @@ export declare class WebComponentConnector extends LitElement {
     willUpdate(changedProperties: PropertyValues): void;
     private reloadSigners;
     private addSigner;
+    mainRef: Ref<HTMLDivElement>;
+    headerRef: Ref<HTMLDivElement>;
+    bodyRef: Ref<HTMLDivElement>;
     render(): import("lit").TemplateResult<1>;
+    updated(): void;
     private closedHandler;
     private signerSelectedHandler;
     static styles: import("lit").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAqB5D,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,cAAc,CAAsB;IAGrC,MAAM,EAAE,OAAO,CAAS;IACxB,SAAS,CAAC,MAAM,EAAE,OAAO;IAKzB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAKnC,OAAO,CAAC,KAAK,CAAiC;IAE9C,OAAO,CAAC,cAAc,CAAC,CAAoB;IAE3C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAGxC,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAC/B,OAAO,CAAC,aAAa;IAad,UAAU;IAOjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA0BnD,OAAO,CAAC,aAAa;IAyDrB,OAAO,CAAC,SAAS;IA+BjB,MAAM;IAwDN,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,qBAAqB,CAkB3B;IAEF,MAAM,CAAC,MAAM,0BAiIX;CACH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,GAAG,EAAkB,MAAM,uBAAuB,CAAC;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"}

package/dist/connector/index.js

@@ -7,8 +7,10 @@ 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 { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
@@ -28,6 +30,9 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         this.isOpen = false;
         this.client = new ccc.ClientPublicTestnet();
         this.scene = Scene.SelectingWallets;
+        this.mainRef = createRef();
+        this.headerRef = createRef();
+        this.bodyRef = createRef();
         this.closedHandler = () => {
             if ([
                 Scene.SelectingSigners,
@@ -127,7 +132,11 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         })();
         this.resetListeners.forEach((listener) => listener());
         this.resetListeners = [];
-        ccc.JoyId.getJoyIdSigners(this.client).forEach(({ signer, type, name }) => {
+        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, type, name }) => {
             this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
         });
         const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
@@ -177,6 +186,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
             return generateConnectingScene(this.selectedWallet, this.selectedSigner, this.signerSelectedHandler);
         })();
+        const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(this.scene);
         return html `<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -197,16 +207,38 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
             }
         }}
       >
-        <div class="main">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
+        <div class="main" ${ref(this.mainRef)}>
+          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+            <img
+              class="back ${canBack ? "active" : ""}"
+              src=${LEFT_SVG}
+              @click=${() => {
+            if (this.scene === Scene.Connecting) {
+                this.scene = Scene.SelectingSigners;
+            }
+            else if (this.scene === Scene.SelectingSigners) {
+                this.scene = Scene.SelectingWallets;
+            }
+        }}
+            />
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
+            <img
+              class="close active"
+              src=${CLOSE_SVG}
+              @click=${this.closedHandler}
+            />
           </div>
-          <div class="body">${body}</div>
+          <div class="body" ${ref(this.bodyRef)}>${body}</div>
         </div>
       </div>`;
     }
+    updated() {
+        if (!this.mainRef.value) {
+            return;
+        }
+        this.mainRef.value.style.height = `${(this.bodyRef.value?.clientHeight ?? 0) +
+            (this.headerRef.value?.clientHeight ?? 0)}px`;
+    }
 };
 WebComponentConnector.styles = css `
     :host {
@@ -265,6 +297,8 @@ WebComponentConnector.styles = css `
       transform: translate(-50%, -50%);
       background: var(--background);
       border-radius: 1.2rem;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
     }
 
     .header {
@@ -279,6 +313,13 @@ WebComponentConnector.styles = css `
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
@@ -298,13 +339,14 @@ 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 {
@@ -317,7 +359,7 @@ 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 {
@@ -330,6 +372,7 @@ WebComponentConnector.styles = css `
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
     }
 
     .connecting-wallet-icon {
@@ -344,6 +387,12 @@ __decorate([
 __decorate([
     state()
 ], WebComponentConnector.prototype, "isOpen", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "name", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "icon", void 0);
 __decorate([
     property()
 ], WebComponentConnector.prototype, "client", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.5-alpha.0",
+  "version": "0.0.5-alpha.1",
   "description": "Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/ccc": "0.0.5-alpha.0",
+    "@ckb-ccc/ccc": "0.0.5-alpha.1",
     "lit": "^3.1.3"
   },
-  "gitHead": "8a927f901a8f2fe7dfe2f6bf78a44689d6503949"
+  "gitHead": "98d6d902fff0cc3d65f536cb85b32c867045d15d"
 }

package/src/assets/left.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const LEFT_SVG = encodeSvgToImgSrc(
+  '<svg width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><path d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z" stroke="#1E1E1E" stroke-width="1"/></svg>',
+);

package/src/connector/index.ts

@@ -1,8 +1,10 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { Ref, 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 { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
@@ -33,6 +35,11 @@ export class WebComponentConnector extends LitElement {
     this.isOpen = isOpen;
   }
 
+  @property()
+  public name?: string;
+  @property()
+  public icon?: string;
+
   @property()
   public client: ccc.Client = new ccc.ClientPublicTestnet();
   public setClient(client: ccc.Client) {
@@ -144,10 +151,18 @@ export class WebComponentConnector extends LitElement {
 
     this.resetListeners.forEach((listener) => listener());
     this.resetListeners = [];
-
-    ccc.JoyId.getJoyIdSigners(this.client).forEach(({ signer, type, name }) => {
-      this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
-    });
+    const name =
+      this.name ??
+      (document.querySelector("head title") as HTMLTitleElement).text;
+    const icon =
+      this.icon ??
+      (document.querySelector('link[rel="icon"]') as HTMLLinkElement).href;
+
+    ccc.JoyId.getJoyIdSigners(this.client, name, icon).forEach(
+      ({ signer, type, name }) => {
+        this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
+      },
+    );
 
     const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
@@ -216,6 +231,10 @@ export class WebComponentConnector extends LitElement {
     this.wallets = wallets;
   }
 
+  mainRef: Ref<HTMLDivElement> = createRef();
+  headerRef: Ref<HTMLDivElement> = createRef();
+  bodyRef: Ref<HTMLDivElement> = createRef();
+
   render() {
     const [title, body] = (() => {
       if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
@@ -241,6 +260,10 @@ export class WebComponentConnector extends LitElement {
       );
     })();
 
+    const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(
+      this.scene,
+    );
+
     return html`<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -261,17 +284,41 @@ export class WebComponentConnector extends LitElement {
           }
         }}
       >
-        <div class="main">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
+        <div class="main" ${ref(this.mainRef)}>
+          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+            <img
+              class="back ${canBack ? "active" : ""}"
+              src=${LEFT_SVG}
+              @click=${() => {
+                if (this.scene === Scene.Connecting) {
+                  this.scene = Scene.SelectingSigners;
+                } else if (this.scene === Scene.SelectingSigners) {
+                  this.scene = Scene.SelectingWallets;
+                }
+              }}
+            />
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
+            <img
+              class="close active"
+              src=${CLOSE_SVG}
+              @click=${this.closedHandler}
+            />
           </div>
-          <div class="body">${body}</div>
+          <div class="body" ${ref(this.bodyRef)}>${body}</div>
         </div>
       </div>`;
   }
 
+  updated() {
+    if (!this.mainRef.value) {
+      return;
+    }
+    this.mainRef.value.style.height = `${
+      (this.bodyRef.value?.clientHeight ?? 0) +
+      (this.headerRef.value?.clientHeight ?? 0)
+    }px`;
+  }
+
   private closedHandler = () => {
     if (
       [
@@ -364,6 +411,8 @@ export class WebComponentConnector extends LitElement {
       transform: translate(-50%, -50%);
       background: var(--background);
       border-radius: 1.2rem;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
     }
 
     .header {
@@ -378,6 +427,13 @@ export class WebComponentConnector extends LitElement {
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
@@ -397,13 +453,14 @@ export class WebComponentConnector extends LitElement {
       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 {
@@ -416,7 +473,7 @@ export class WebComponentConnector extends LitElement {
       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 {
@@ -429,6 +486,7 @@ export class WebComponentConnector extends LitElement {
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
     }
 
     .connecting-wallet-icon {