@ckb-ccc/connector 0.0.3 → 0.0.4-alpha.0

package/src/barrel.ts

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

package/src/connector/index.ts

@@ -0,0 +1,292 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { CLOSE_SVG } from "../assets/close.svg";
+import { OKX_SVG } from "../assets/okx.svg";
+import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
+import { CloseEvent, SignerChangedEvent, StatusChangedEvent } from "../events";
+import {
+  generateConnectingScene,
+  generateSignersScene,
+  generateWalletsScene,
+} from "../scenes";
+import { ConnectorStatus } from "../status";
+
+@customElement("ccc-connector")
+export class WebComponentConnector extends LitElement {
+  @state()
+  private wallets: ccc.Wallet[] = [];
+  private existedEip6963: string[] = [];
+
+  @property()
+  public isOpen: boolean = false;
+
+  @property()
+  public wallet?: ccc.Wallet;
+  @property()
+  public signer?: ccc.SignerInfo;
+  @property()
+  public status: ConnectorStatus = ConnectorStatus.SelectingSigner;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    const client = new ccc.ClientPublicTestnet();
+    const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
+    if (uniSatSigner) {
+      this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+    }
+
+    const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(client);
+    if (okxBitcoinSigner) {
+      this.addSigner(
+        "OKX Wallet",
+        OKX_SVG,
+        ccc.SignerType.BTC,
+        okxBitcoinSigner,
+      );
+    }
+
+    const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
+    eip6963Manager.subscribeSigners((signer) => {
+      if (this.existedEip6963.indexOf(signer.detail.info.uuid) !== -1) {
+        return;
+      }
+      this.existedEip6963.push(signer.detail.info.uuid);
+      this.addSigner(
+        `${signer.detail.info.name}`,
+        signer.detail.info.icon,
+        ccc.SignerType.EVM,
+        signer,
+      );
+    });
+  }
+
+  addSigner(
+    name: string,
+    icon: string,
+    type: ccc.SignerType,
+    signer: ccc.Signer,
+  ) {
+    const wallet = this.wallets.find((wallet) => wallet.name === name);
+    if (wallet) {
+      wallet.signers.push({ type, signer });
+      this.wallets = [...this.wallets];
+    } else {
+      this.wallets = [
+        ...this.wallets,
+        {
+          name,
+          icon,
+          signers: [{ type, signer }],
+        },
+      ];
+    }
+  }
+
+  render() {
+    const [title, body] = (() => {
+      if (!this.wallet) {
+        return generateWalletsScene(
+          this.wallets,
+          this.onWalletSelected,
+          this.onSignerSelected,
+        );
+      }
+      if (!this.signer) {
+        return generateSignersScene(this.wallet, this.onSignerSelected);
+      }
+      return generateConnectingScene(
+        this.wallet,
+        this.signer,
+        this.onSignerSelected,
+      );
+    })();
+
+    return html`<style>
+        :host {
+          ${this.isOpen ? "" : "display: none;"}
+          --background: #fff;
+          --divider: #eee;
+          --btn-primary: #f8f8f8;
+          --btn-primary-hover: #efeeee;
+          --btn-secondary: #ddd;
+          --btn-icon: #e9e4de;
+          color: #1e1e1e;
+          --tip-color: #666;
+        }
+      </style>
+      <div
+        class="background"
+        @click=${(event: Event) => {
+          if (event.target === event.currentTarget) {
+            this.onClose();
+          }
+        }}
+      >
+        <div class="main">
+          <div class="header text-bold fs-big">
+            <div class="back"></div>
+            ${title}
+            <img class="close" src=${CLOSE_SVG} @click=${this.onClose} />
+          </div>
+          <div class="body">${body}</div>
+        </div>
+      </div>`;
+  }
+
+  private onClose = () => {
+    this.dispatchEvent(new SignerChangedEvent());
+    this.dispatchEvent(new CloseEvent());
+  };
+
+  private onWalletSelected = (wallet: ccc.Wallet) => {
+    this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
+  };
+
+  private onSignerSelected = (wallet: ccc.Wallet, signer: ccc.SignerInfo) => {
+    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
+    this.dispatchEvent(new SignerChangedEvent(wallet, signer));
+
+    (async () => {
+      await signer.signer.connect();
+      this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
+      this.dispatchEvent(new CloseEvent());
+    })();
+  };
+
+  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;
+    }
+
+    .text-bold {
+      font-weight: bold;
+    }
+
+    .text-tip {
+      color: var(--tip-color);
+    }
+
+    .fs-big {
+      font-size: 1.2rem;
+    }
+
+    .mb-1 {
+      margin-bottom: 0.7rem;
+    }
+    .mb-2 {
+      margin-bottom: 1rem;
+    }
+    .mt-1 {
+      margin-top: 0.7rem;
+    }
+    .mt-2 {
+      margin-top: 1rem;
+    }
+
+    .background {
+      width: 100%;
+      height: 100%;
+      background: rgba(18, 19, 24, 0.7);
+    }
+
+    .main {
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--background);
+      border-radius: 1.2rem;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 1.3rem;
+      border-bottom: 1px solid var(--divider);
+    }
+
+    .close,
+    .back {
+      width: 0.8rem;
+      height: 0.8rem;
+      cursor: pointer;
+    }
+
+    .body {
+      padding: 1.4rem 1.3rem;
+      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.3s ease-in-out;
+    }
+
+    .btn-primary img {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 1rem;
+      border-radius: 0.4rem;
+      background: var(--btn-icon);
+    }
+
+    .btn-primary:hover {
+      background: var(--btn-primary-hover);
+    }
+
+    .btn-secondary {
+      display: flex;
+      align-items: center;
+      padding: 0.25rem 1rem;
+      background: var(--btn-secondary);
+      border-radius: 9999px;
+      transition: background 0.3s ease-in-out;
+    }
+
+    .btn-secondary img {
+      width: 0.8rem;
+      height: 0.8rem;
+      margin-right: 0.5rem;
+    }
+
+    .wallet-icon {
+      width: 4rem;
+      height: 4rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
+      background: var(--btn-icon);
+    }
+
+    .connecting-wallet-icon {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1rem;
+    }
+  `;
+}

package/src/events/index.ts

@@ -0,0 +1,23 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { ConnectorStatus } from "../status";
+
+export class SignerChangedEvent extends Event {
+  constructor(
+    public readonly wallet?: ccc.Wallet,
+    public readonly signerInfo?: ccc.SignerInfo,
+  ) {
+    super("signerChanged", { composed: true });
+  }
+}
+
+export class StatusChangedEvent extends Event {
+  constructor(public readonly status: ConnectorStatus) {
+    super("statusChanged", { composed: true });
+  }
+}
+
+export class CloseEvent extends Event {
+  constructor() {
+    super("close", { composed: true });
+  }
+}

package/src/scenes/connecting.ts

@@ -0,0 +1,29 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { html } from "lit";
+import { RETRY_SVG } from "../assets/retry.svg";
+
+export function generateConnectingScene(
+  wallet: ccc.Wallet,
+  signer: ccc.SignerInfo,
+  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+) {
+  return [
+    wallet.name,
+    html`
+      <img
+        class="connecting-wallet-icon mb-1"
+        src=${wallet.icon}
+        alt=${wallet.name}
+      />
+      <span class="text-bold">Opening ${wallet.name}...</span>
+      <span class="text-tip">Confirm connection in the wallet</span>
+      <button
+        class="btn-secondary mt-2 mb-2"
+        @click=${() => onSignerSelected(wallet, signer)}
+      >
+        <img src=${RETRY_SVG} alt="retry" />
+        Try again
+      </button>
+    `,
+  ];
+}

package/src/scenes/index.ts

@@ -0,0 +1,3 @@
+export * from "./connecting";
+export * from "./signers";
+export * from "./wallets";

package/src/scenes/signers.ts

@@ -0,0 +1,40 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { BTC_SVG, ETH_SVG } from "../assets/chains";
+
+export function signerTypeToIcon(type: ccc.SignerType): string {
+  return {
+    [ccc.SignerType.BTC]: BTC_SVG,
+    [ccc.SignerType.EVM]: ETH_SVG,
+  }[type];
+}
+
+export function generateSignersScene(
+  wallet: ccc.Wallet,
+  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+) {
+  return [
+    "Select a Chain",
+
+    html`
+      <img class="wallet-icon" src=${wallet.icon} alt=${wallet.name} />
+      <span class="mb-2">${wallet.name}</span>
+      ${repeat(
+        wallet.signers,
+        (signer) => signer.type,
+        (signer) => html`
+          <button
+            class="btn-primary mb-1"
+            @click=${async () => {
+              onSignerSelected(wallet, signer);
+            }}
+          >
+            <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
+            ${signer.type}
+          </button>
+        `,
+      )}
+    `,
+  ];
+}

package/src/scenes/wallets.ts

@@ -0,0 +1,32 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+
+export function generateWalletsScene(
+  wallets: ccc.Wallet[],
+  onWalletSelected: (wallet: ccc.Wallet) => unknown,
+  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+) {
+  return [
+    "Connect Wallet",
+    repeat(
+      wallets,
+      (wallet) => wallet.name,
+      (wallet) => html`
+        <button
+          class="btn-primary mb-1"
+          @click=${async () => {
+            if (wallet.signers.length === 1) {
+              onSignerSelected(wallet, wallet.signers[0]);
+            } else {
+              onWalletSelected(wallet);
+            }
+          }}
+        >
+          <img src=${wallet.icon} alt=${wallet.name} />
+          ${wallet.name}
+        </button>
+      `,
+    ),
+  ];
+}

package/src/status/index.ts

@@ -0,0 +1,5 @@
+export enum ConnectorStatus {
+  SelectingSigner = "SelectingSigner",
+  Connecting = "Connecting",
+  Idle = "Idle",
+}

package/dist/connector.d.ts

@@ -1,9 +0,0 @@
-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

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

package/dist/connector.js

@@ -1,160 +0,0 @@
-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 { ccc } 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 { OKX_SVG } from "./assets/okx.svg";
-import { UNI_SAT_SVG } from "./assets/uni-sat.svg";
-import { CloseEvent, ConnectedEvent } from "./events";
-let WebComponentConnector = class WebComponentConnector extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.signers = [];
-        this.isOpen = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const client = new ccc.ClientPublicTestnet();
-        const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
-        if (uniSatSigner) {
-            this.signers = [
-                ...this.signers,
-                {
-                    id: "uni-sat",
-                    name: "BTC: UniSat",
-                    icon: UNI_SAT_SVG,
-                    type: ccc.SignerType.UniSat,
-                    signer: uniSatSigner,
-                },
-            ];
-        }
-        const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(client);
-        if (okxBitcoinSigner) {
-            this.signers = [
-                ...this.signers,
-                {
-                    id: "okx-bitcoin",
-                    name: "BTC: OKX",
-                    icon: OKX_SVG,
-                    type: ccc.SignerType.OkxBitcoin,
-                    signer: okxBitcoinSigner,
-                },
-            ];
-        }
-        const eip6963Manager = new ccc.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: `ETH: ${signer.detail.info.name}`,
-                    icon: signer.detail.info.icon,
-                    type: ccc.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} />
-                ${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 {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: start;
-      padding: 0.75rem 1.25rem;
-      color: #fff;
-      background: #000;
-      background-image: none;
-      border-radius: 9999px;
-      border: none;
-      margin-bottom: 0.5rem;
-    }
-
-    .wallet-button img {
-      width: 1.5rem;
-      height: 1.5rem;
-      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

@@ -1,9 +0,0 @@
-import { SignerInfo } from "@ckb-ccc/ccc";
-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

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

package/dist/events.js

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