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

package/dist/signers/index.js

@@ -0,0 +1,104 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { NOSTR_SVG } from "../assets/chains/nostr.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
+import { METAMASK_SVG } from "../assets/metamask.svg";
+import { OKX_SVG } from "../assets/okx.svg";
+import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
+export class SignersController {
+    constructor(host) {
+        this.host = host;
+        this.wallets = [];
+        this.resetListeners = [];
+        host.addController(this);
+    }
+    getConfig() {
+        const name = this.host.name ??
+            document.querySelector("head title").text;
+        const icon = this.host.icon ??
+            document.querySelector('link[rel="icon"]').href;
+        const preferredNetworks = [
+            ...(this.host.preferredNetworks ?? []),
+            {
+                addressPrefix: "ckb",
+                signerType: ccc.SignerType.BTC,
+                network: "btc",
+            },
+            {
+                addressPrefix: "ckt",
+                signerType: ccc.SignerType.BTC,
+                network: "btcTestnet",
+            },
+        ];
+        return {
+            client: this.host.client,
+            name,
+            icon,
+            preferredNetworks,
+        };
+    }
+    update() {
+        this.host.refreshSigner();
+        this.host.requestUpdate();
+    }
+    refresh() {
+        this.resetListeners.forEach((listener) => listener());
+        this.resetListeners = [];
+        this.wallets = [];
+        const { client, name, icon, preferredNetworks } = this.getConfig();
+        ccc.JoyId.getJoyIdSigners(client, name, icon, preferredNetworks).forEach(({ signer, name }) => {
+            this.addSigner("JoyID", name, JOY_ID_SVG, signer);
+        });
+        const uniSatSigner = ccc.UniSat.getUniSatSigner(client, preferredNetworks);
+        if (uniSatSigner) {
+            this.addSigner("UniSat", "BTC", UNI_SAT_SVG, uniSatSigner);
+        }
+        ccc.Okx.getOKXBitcoinSigner(client, preferredNetworks).forEach((signer) => {
+            this.addSigner("OKX Wallet", signer.type, OKX_SVG, signer);
+        });
+        const nip07Signer = ccc.Nip07.getNip07Signer(client);
+        if (nip07Signer) {
+            this.addSigner("Nostr", "Nostr", NOSTR_SVG, nip07Signer);
+        }
+        const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
+        this.resetListeners.push(eip6963Manager.subscribeSigners((signer) => {
+            this.addSigner(`${signer.detail.info.name}`, "EVM", signer.detail.info.icon, signer);
+            this.update();
+        }));
+        // === Dummy signers ===
+        this.addSigner("MetaMask", "EVM", METAMASK_SVG, new ccc.SignerOpenLink(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(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(client, ccc.SignerType.BTC, "https://unisat.io/download"));
+        // ===
+    }
+    async addSigner(walletName, signerName, icon, signer) {
+        const signerInfo = { name: signerName, signer };
+        const signerFilter = this.host.signerFilter;
+        if (signerFilter &&
+            !(await signerFilter(signerInfo, { name: walletName, icon }))) {
+            return;
+        }
+        const wallet = this.wallets.find((w) => w.name === walletName);
+        if (!wallet) {
+            this.wallets.push({
+                name: walletName,
+                icon,
+                signers: [signerInfo],
+            });
+        }
+        else {
+            const signers = [...wallet.signers, signerInfo].filter(({ signer }) => !(signer instanceof ccc.SignerDummy));
+            wallet.signers = signers.length !== 0 ? signers : [signerInfo];
+        }
+        this.update();
+    }
+    hostConnected() {
+        this.refresh();
+        // Wait for plugins to be loaded
+        setTimeout(() => this.refresh(), 100);
+    }
+    hostDisconnected() { }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.9-alpha.2",
+  "version": "0.0.10-alpha.0",
   "description": "CCC - CKBer's Codebase. Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/ccc": "0.0.9-alpha.2",
+    "@ckb-ccc/ccc": "0.0.10-alpha.0",
     "lit": "^3.1.3"
   },
-  "gitHead": "82537aa73662759387f4b127220a02ce48717270"
+  "gitHead": "8a4c789419f5e12e1f230cead213c59373834a1a"
 }

package/src/assets/chains/index.ts

@@ -1,3 +1,4 @@
 export * from "./btc.svg";
 export * from "./ckb.svg";
 export * from "./eth.svg";
+export * from "./nostr.svg";

package/src/barrel.ts

@@ -1,3 +1,5 @@
 export * from "@ckb-ccc/ccc/barrel";
 export * from "./connector";
-export * from "./events";
+
+import "./components";
+import "./scenes";

package/src/components/button-pill.ts

@@ -0,0 +1,48 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("ccc-button-pill")
+export class ButtonPill extends LitElement {
+  static styles = css`
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0.25rem 1rem;
+      background: var(--btn-secondary);
+      border-radius: 9999px;
+      transition: background 0.15s ease-in-out;
+    }
+    button:hover {
+      background: var(--btn-secondary-hover);
+    }
+    button:disabled {
+      cursor: not-allowed;
+    }
+    button:disabled:hover {
+      background: var(--btn-secondary);
+    }
+
+    button ::slotted(img) {
+      width: 0.8rem;
+      height: 0.8rem;
+      margin-right: 0.5rem;
+    }
+  `;
+
+  updated() {
+    this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`<button><slot></slot></button>`;
+  }
+}

package/src/components/button.ts

@@ -0,0 +1,54 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("ccc-button")
+export class Button extends LitElement {
+  static styles = css`
+    :host {
+      width: 100%;
+    }
+
+    button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+
+      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;
+    }
+    button:hover {
+      background: var(--btn-primary-hover);
+    }
+    button:disabled {
+      cursor: not-allowed;
+    }
+    button:disabled:hover {
+      background: var(--btn-primary);
+    }
+
+    button ::slotted(img) {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 1rem;
+      border-radius: 0.4rem;
+    }
+  `;
+
+  updated() {
+    this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
+  }
+
+  render() {
+    return html`<button><slot></slot></button>`;
+  }
+}

package/src/components/copy-button.ts

@@ -0,0 +1,69 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("ccc-copy-button")
+export class CopyButton extends LitElement {
+  @property()
+  public value?: string;
+
+  @state()
+  private isCopied = false;
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+    .copy {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+    .check {
+      width: 0.7em;
+      height: 0.7em;
+      margin-left: 0.15em;
+      fill: currentColor;
+    }
+  `;
+
+  updated() {
+    this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
+  }
+
+  onclick = () => {
+    if (!this.value) {
+      return;
+    }
+
+    this.isCopied = true;
+    setTimeout(() => (this.isCopied = false), 3000);
+
+    return window.navigator.clipboard.writeText(this.value);
+  };
+
+  render() {
+    return html`
+      <slot></slot>
+      ${this.isCopied
+        ? html`
+            <svg class="check" viewBox="0 0 17.837 17.837" alt="copied">
+              <path
+                d="M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z"
+              />
+            </svg>
+          `
+        : html`
+            <svg class="copy" viewBox="0 0 24 24" alt="copy">
+              <path
+                d="M19 13.5657V6.10526C19 5.49737 18.5091 5 17.9091 5H10.5454C9.94543 5 9.45452 5.49737 9.45452 6.10526V13.5657C9.45452 14.1736 9.94543 14.671 10.5454 14.671H17.9091C18.5091 14.671 19 14.1736 19 13.5657Z"
+              />
+              <path
+                d="M14.5455 15.8684H9.18183C8.58183 15.8684 8.09092 15.3711 8.09092 14.7632V9.329H6.09091C5.49091 9.329 5 9.82637 5 10.4343V17.8947C5 18.5026 5.49091 19 6.09091 19H13.4546C14.0546 19 14.5455 18.5026 14.5455 17.8947V15.8684Z"
+              />
+            </svg>
+          `}
+    `;
+  }
+}

package/src/components/dialog.ts

@@ -0,0 +1,97 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { CLOSE_SVG } from "../assets/close.svg";
+import { LEFT_SVG } from "../assets/left.svg";
+
+@customElement("ccc-dialog")
+export class Dialog extends LitElement {
+  @property()
+  public canBack: any | undefined;
+  @property()
+  public header?: string;
+
+  render() {
+    return html`
+      <div
+        class="header text-bold fs-lg ${this.header ? "header-divider" : ""}"
+      >
+        <img
+          class="back ${this.canBack !== undefined ? "active" : ""}"
+          src=${LEFT_SVG}
+          @click=${() => {
+            this.dispatchEvent(new Event("back"));
+          }}
+        />
+        ${this.header}
+        <img
+          class="close active"
+          src=${CLOSE_SVG}
+          @click=${() => {
+            this.dispatchEvent(
+              new Event("close", { bubbles: true, composed: true }),
+            );
+          }}
+        />
+      </div>
+      <div class="body">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    .text-bold {
+      font-weight: bold;
+    }
+
+    .fs-lg {
+      font-size: 1.2rem;
+    }
+
+    .main {
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      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 0.5rem;
+    }
+
+    .header-divider {
+      padding-bottom: 1rem;
+      border-bottom: 1px solid var(--divider);
+      margin-bottom: 0.3rem;
+    }
+
+    .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 1rem;
+      min-width: 20rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  `;
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+import "./button";
+import "./button-pill";
+import "./copy-button";
+import "./dialog";