@ckb-ccc/connector 0.0.2

package/.prettierignore

@@ -0,0 +1,12 @@
+node_modules/
+
+dist/
+
+.npmignore
+.prettierrc
+tsconfig.json
+eslint.config.mjs
+.prettierrc
+
+tsconfig.tsbuildinfo
+.github/

package/dist/advanced.d.ts

@@ -0,0 +1,3 @@
+export * from "./advancedBarrel";
+export * as cccA from "./advancedBarrel";
+//# sourceMappingURL=advanced.d.ts.map

package/dist/advanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced.d.ts","sourceRoot":"","sources":["../src/advanced.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/dist/advanced.js

@@ -0,0 +1,2 @@
+export * from "./advancedBarrel";
+export * as cccA from "./advancedBarrel";

package/dist/advancedBarrel.d.ts

@@ -0,0 +1,2 @@
+export * from "@ckb-ccc/ccc/advancedBarrel";
+//# sourceMappingURL=advancedBarrel.d.ts.map

package/dist/advancedBarrel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advancedBarrel.d.ts","sourceRoot":"","sources":["../src/advancedBarrel.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/dist/advancedBarrel.js

@@ -0,0 +1 @@
+export * from "@ckb-ccc/ccc/advancedBarrel";

package/dist/barrel.d.ts

@@ -0,0 +1,5 @@
+export * from "@ckb-ccc/ccc";
+export * from "./connector";
+export * from "./events";
+export * from "./signers";
+//# sourceMappingURL=barrel.d.ts.map

package/dist/barrel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"barrel.d.ts","sourceRoot":"","sources":["../src/barrel.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/barrel.js

@@ -0,0 +1,4 @@
+export * from "@ckb-ccc/ccc";
+export * from "./connector";
+export * from "./events";
+export * from "./signers";

package/dist/connector.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from "lit";
+export declare class WebComponentConnector extends LitElement {
+    private signers;
+    isOpen: boolean;
+    connectedCallback(): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=connector.d.ts.map

package/dist/connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connector.d.ts","sourceRoot":"","sources":["../src/connector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAAoB;IAG5B,MAAM,EAAE,OAAO,CAAS;IAE/B,iBAAiB,IAAI,IAAI;IAsBzB,MAAM,CAAC,MAAM,0BA+CX;IAEF,MAAM;CAoCP"}

package/dist/connector.js

@@ -0,0 +1,129 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ClientPublicMainnet, Eip6963 } from "@ckb-ccc/ccc";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { CloseEvent, ConnectedEvent } from "./events";
+import { SignerType } from "./signers";
+let WebComponentConnector = class WebComponentConnector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.signers = [];
+        this.isOpen = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const client = new ClientPublicMainnet();
+        const eip6963Manager = new Eip6963.SignerFactory(client);
+        eip6963Manager.subscribeSigners((signer) => {
+            if (this.signers.some((s) => s.id === signer.detail.info.uuid)) {
+                return;
+            }
+            this.signers = [
+                ...this.signers,
+                {
+                    id: signer.detail.info.uuid,
+                    name: signer.detail.info.name,
+                    icon: signer.detail.info.icon,
+                    type: SignerType.Eip6963,
+                    signer,
+                },
+            ];
+        });
+    }
+    render() {
+        return html `<style>
+        :host {
+          ${this.isOpen ? "" : "display: none;"}
+          --background: rgba(0, 0, 0, 0.2);
+        }
+      </style>
+      <div
+        class="background"
+        @click=${(event) => {
+            if (event.target === event.currentTarget) {
+                this.dispatchEvent(new CloseEvent());
+            }
+        }}
+      >
+        <div class="main">
+          ${repeat(this.signers, (signer) => signer.id, (signer) => html `
+              <button
+                class="wallet-button"
+                @click=${async () => {
+            await signer.signer.connect();
+            this.dispatchEvent(new ConnectedEvent(signer));
+            this.dispatchEvent(new CloseEvent());
+        }}
+              >
+                <img src=${signer.icon} alt=${signer.name} />
+                Connect ${signer.name}
+              </button>
+            `)}
+        </div>
+      </div>`;
+    }
+};
+WebComponentConnector.styles = css `
+    :host {
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+    }
+
+    .background {
+      width: 100%;
+      height: 100%;
+      background: var(--background);
+    }
+
+    .main {
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .wallet-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.75rem 1.25rem;
+      color: #fff;
+      background: #000;
+      background-image: none;
+      border-radius: 9999px;
+      border: none;
+    }
+
+    .wallet-button img {
+      padding-right: 0.5rem;
+    }
+  `;
+__decorate([
+    state()
+], WebComponentConnector.prototype, "signers", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "isOpen", void 0);
+WebComponentConnector = __decorate([
+    customElement("ccc-connector")
+], WebComponentConnector);
+export { WebComponentConnector };

package/dist/events.d.ts

@@ -0,0 +1,9 @@
+import { SignerInfo } from "./signers";
+export declare class ConnectedEvent extends Event {
+    readonly signerInfo: SignerInfo;
+    constructor(signerInfo: SignerInfo);
+}
+export declare class CloseEvent extends Event {
+    constructor();
+}
+//# sourceMappingURL=events.d.ts.map

package/dist/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,qBAAa,cAAe,SAAQ,KAAK;aACX,UAAU,EAAE,UAAU;gBAAtB,UAAU,EAAE,UAAU;CAGnD;AAED,qBAAa,UAAW,SAAQ,KAAK;;CAIpC"}

package/dist/events.js

@@ -0,0 +1,11 @@
+export class ConnectedEvent extends Event {
+    constructor(signerInfo) {
+        super("connected", { composed: true });
+        this.signerInfo = signerInfo;
+    }
+}
+export class CloseEvent extends Event {
+    constructor() {
+        super("close", { composed: true });
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./barrel";
+export * as ccc from "./barrel";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./barrel";
+export * as ccc from "./barrel";

package/dist/signers.d.ts

@@ -0,0 +1,13 @@
+import { Signer } from "@ckb-ccc/ccc";
+export declare enum SignerType {
+    Eip6963 = "Eip6963"
+}
+export declare class SignerInfo {
+    type: SignerType;
+    id: string;
+    name: string;
+    icon: string;
+    signer: Signer;
+    constructor(type: SignerType, id: string, name: string, icon: string, signer: Signer);
+}
+//# sourceMappingURL=signers.d.ts.map

package/dist/signers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../src/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,oBAAY,UAAU;IACpB,OAAO,YAAY;CACpB;AAED,qBAAa,UAAU;IAEZ,IAAI,EAAE,UAAU;IAChB,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,MAAM;gBAJd,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM;CAExB"}

package/dist/signers.js

@@ -0,0 +1,13 @@
+export var SignerType;
+(function (SignerType) {
+    SignerType["Eip6963"] = "Eip6963";
+})(SignerType || (SignerType = {}));
+export class SignerInfo {
+    constructor(type, id, name, icon, signer) {
+        this.type = type;
+        this.id = id;
+        this.name = name;
+        this.icon = icon;
+        this.signer = signer;
+    }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ckb-ccc/connector",
+  "version": "0.0.2",
+  "description": "Common Chains Connector UI",
+  "author": "Hanssen0 <hanssen0@hanssen0.com>",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./barrel": "./dist/barrel.js",
+    "./advancedBarrel": "./dist/advancedBarrel.js",
+    "./advanced": "./dist/advanced.js"
+  },
+  "scripts": {
+    "build": "rimraf ./dist && tsc",
+    "lint": "eslint",
+    "format": "prettier --write . && eslint --fix"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.1.1",
+    "eslint": "^9.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ckb-ccc/ccc": "0.0.2",
+    "lit": "^3.1.3"
+  },
+  "gitHead": "34b7f8d8443258188d47aad71246e787b544300b"
+}

package/src/advanced.ts

@@ -0,0 +1,2 @@
+export * from "./advancedBarrel";
+export * as cccA from "./advancedBarrel";

package/src/advancedBarrel.ts

@@ -0,0 +1 @@
+export * from "@ckb-ccc/ccc/advancedBarrel";

package/src/barrel.ts

@@ -0,0 +1,4 @@
+export * from "@ckb-ccc/ccc";
+export * from "./connector";
+export * from "./events";
+export * from "./signers";

package/src/connector.ts

@@ -0,0 +1,123 @@
+import { ClientPublicMainnet, Eip6963 } from "@ckb-ccc/ccc";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { CloseEvent, ConnectedEvent } from "./events";
+import { SignerInfo, SignerType } from "./signers";
+
+@customElement("ccc-connector")
+export class WebComponentConnector extends LitElement {
+  @state()
+  private signers: SignerInfo[] = [];
+
+  @property()
+  public isOpen: boolean = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    const client = new ClientPublicMainnet();
+    const eip6963Manager = new Eip6963.SignerFactory(client);
+    eip6963Manager.subscribeSigners((signer) => {
+      if (this.signers.some((s) => s.id === signer.detail.info.uuid)) {
+        return;
+      }
+      this.signers = [
+        ...this.signers,
+        {
+          id: signer.detail.info.uuid,
+          name: signer.detail.info.name,
+          icon: signer.detail.info.icon,
+          type: SignerType.Eip6963,
+          signer,
+        },
+      ];
+    });
+  }
+
+  static styles = css`
+    :host {
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+    }
+
+    .background {
+      width: 100%;
+      height: 100%;
+      background: var(--background);
+    }
+
+    .main {
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .wallet-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.75rem 1.25rem;
+      color: #fff;
+      background: #000;
+      background-image: none;
+      border-radius: 9999px;
+      border: none;
+    }
+
+    .wallet-button img {
+      padding-right: 0.5rem;
+    }
+  `;
+
+  render() {
+    return html`<style>
+        :host {
+          ${this.isOpen ? "" : "display: none;"}
+          --background: rgba(0, 0, 0, 0.2);
+        }
+      </style>
+      <div
+        class="background"
+        @click=${(event: Event) => {
+          if (event.target === event.currentTarget) {
+            this.dispatchEvent(new CloseEvent());
+          }
+        }}
+      >
+        <div class="main">
+          ${repeat(
+            this.signers,
+            (signer) => signer.id,
+            (signer) => html`
+              <button
+                class="wallet-button"
+                @click=${async () => {
+                  await signer.signer.connect();
+                  this.dispatchEvent(new ConnectedEvent(signer));
+                  this.dispatchEvent(new CloseEvent());
+                }}
+              >
+                <img src=${signer.icon} alt=${signer.name} />
+                Connect ${signer.name}
+              </button>
+            `,
+          )}
+        </div>
+      </div>`;
+  }
+}

package/src/events.ts

@@ -0,0 +1,13 @@
+import { SignerInfo } from "./signers";
+
+export class ConnectedEvent extends Event {
+  constructor(public readonly signerInfo: SignerInfo) {
+    super("connected", { composed: true });
+  }
+}
+
+export class CloseEvent extends Event {
+  constructor() {
+    super("close", { composed: true });
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./barrel";
+export * as ccc from "./barrel";

package/src/signers.ts

@@ -0,0 +1,15 @@
+import { Signer } from "@ckb-ccc/ccc";
+
+export enum SignerType {
+  Eip6963 = "Eip6963",
+}
+
+export class SignerInfo {
+  constructor(
+    public type: SignerType,
+    public id: string,
+    public name: string,
+    public icon: string,
+    public signer: Signer,
+  ) {}
+}