@ckb-ccc/connector 0.0.4-alpha.8 → 0.0.5-alpha.0

package/dist.commonjs/connector/index.js

@@ -0,0 +1,452 @@
+"use strict";
+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;
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebComponentConnector = void 0;
+const ccc_1 = require("@ckb-ccc/ccc");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const close_svg_1 = require("../assets/close.svg");
+const okx_svg_1 = require("../assets/okx.svg");
+const uni_sat_svg_1 = require("../assets/uni-sat.svg");
+const events_1 = require("../events");
+const scenes_1 = require("../scenes");
+let WebComponentConnector = class WebComponentConnector extends lit_1.LitElement {
+  constructor() {
+    super(...arguments);
+    this.wallets = [];
+    this.resetListeners = [];
+    this.isOpen = false;
+    this.client = new ccc_1.ccc.ClientPublicTestnet();
+    this.canConnect = false;
+    this.closedHandler = () => {
+      if (this.signer === undefined) {
+        this.disconnect();
+      }
+      this.isOpen = false;
+    };
+    this.signerSelectedHandler = (wallet, signer) => {
+      this.walletName = wallet?.name;
+      this.signerType = signer?.type;
+      this.canConnect = true;
+    };
+  }
+  setIsOpen(isOpen) {
+    this.isOpen = isOpen;
+  }
+  setClient(client) {
+    this.client = client;
+  }
+  updateWallet() {
+    this.selectedWallet = this.wallets.find(
+      (wallet) => this.walletName === wallet.name,
+    );
+  }
+  updateSigner() {
+    this.selectedSigner = this.selectedWallet?.signers.find(
+      ({ type }) => type === this.signerType,
+    );
+  }
+  prepareSigner() {
+    (async () => {
+      if (!this.selectedSigner) {
+        this.wallet = undefined;
+        this.signer = undefined;
+        return;
+      }
+      if (!(await this.selectedSigner.signer.isConnected())) {
+        if (!this.canConnect) {
+          this.disconnect();
+          return;
+        }
+        await this.selectedSigner.signer.connect();
+      }
+      this.saveConnection();
+      this.wallet = this.selectedWallet;
+      this.signer = this.selectedSigner;
+      this.closedHandler();
+    })();
+  }
+  disconnect() {
+    this.walletName = undefined;
+    this.wallet = undefined;
+    this.signerType = undefined;
+    this.signer = undefined;
+    this.saveConnection();
+  }
+  loadConnection() {
+    const { signerType, walletName } = JSON.parse(
+      window.localStorage.getItem("ccc-connection-info") ?? "{}",
+    );
+    this.signerType = signerType;
+    this.walletName = walletName;
+  }
+  saveConnection() {
+    window.localStorage.setItem(
+      "ccc-connection-info",
+      JSON.stringify({
+        signerType: this.signerType,
+        walletName: this.walletName,
+      }),
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadConnection();
+    this.reloadSigners();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("client")) {
+      this.reloadSigners();
+    }
+    if (
+      changedProperties.has("walletName") ||
+      changedProperties.has("wallets")
+    ) {
+      this.updateWallet();
+    }
+    if (
+      changedProperties.has("signerType") ||
+      changedProperties.has("selectedWallet")
+    ) {
+      this.updateSigner();
+    }
+    if (changedProperties.has("selectedSigner")) {
+      this.prepareSigner();
+    }
+    this.dispatchEvent(new events_1.WillUpdateEvent());
+  }
+  reloadSigners() {
+    this.wallets = [];
+    (async () => {
+      if (!this.selectedSigner) {
+        return;
+      }
+      const newSigner = await this.selectedSigner.signer.replaceClient(
+        this.client,
+      );
+      if (newSigner) {
+        this.selectedSigner = {
+          ...this.selectedSigner,
+          signer: newSigner,
+        };
+      } else {
+        this.disconnect();
+      }
+    })();
+    this.resetListeners.forEach((listener) => listener());
+    this.resetListeners = [];
+    const uniSatSigner = ccc_1.ccc.UniSat.getUniSatSigner(this.client);
+    if (uniSatSigner) {
+      this.addSigner(
+        "UniSat",
+        uni_sat_svg_1.UNI_SAT_SVG,
+        ccc_1.ccc.SignerType.BTC,
+        uniSatSigner,
+      );
+    }
+    const okxBitcoinSigner = ccc_1.ccc.Okx.getOKXBitcoinSigner(this.client);
+    if (okxBitcoinSigner) {
+      this.addSigner(
+        "OKX Wallet",
+        okx_svg_1.OKX_SVG,
+        ccc_1.ccc.SignerType.BTC,
+        okxBitcoinSigner,
+      );
+    }
+    const eip6963Manager = new ccc_1.ccc.Eip6963.SignerFactory(this.client);
+    this.resetListeners.push(
+      eip6963Manager.subscribeSigners((signer) => {
+        this.addSigner(
+          `${signer.detail.info.name}`,
+          signer.detail.info.icon,
+          ccc_1.ccc.SignerType.EVM,
+          signer,
+        );
+      }),
+    );
+  }
+  addSigner(name, icon, type, signer) {
+    let updated = false;
+    const wallets = this.wallets.map((wallet) => {
+      if (wallet.name !== name) {
+        return wallet;
+      }
+      updated = true;
+      return {
+        ...wallet,
+        signers: [...wallet.signers, { type, signer }],
+      };
+    });
+    if (!updated) {
+      wallets.push({
+        name,
+        icon,
+        signers: [{ type, signer }],
+      });
+    }
+    this.wallets = wallets;
+  }
+  render() {
+    const [title, body] = (() => {
+      if (!this.selectedWallet) {
+        return (0, scenes_1.generateWalletsScene)(
+          this.wallets,
+          this.signerSelectedHandler,
+          this.signerSelectedHandler,
+        );
+      }
+      if (!this.selectedSigner) {
+        return (0, scenes_1.generateSignersScene)(
+          this.selectedWallet,
+          this.signerSelectedHandler,
+        );
+      }
+      return (0, scenes_1.generateConnectingScene)(
+        this.selectedWallet,
+        this.selectedSigner,
+        this.signerSelectedHandler,
+      );
+    })();
+    return (0, lit_1.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) => {
+          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_1.CLOSE_SVG} @click=${this.closedHandler} />
+          </div>
+          <div class="body">${body}</div>
+        </div>
+      </div>`;
+  }
+};
+exports.WebComponentConnector = WebComponentConnector;
+WebComponentConnector.styles = (0, lit_1.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;
+    }
+  `;
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "wallets",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "isOpen",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.property)()],
+  WebComponentConnector.prototype,
+  "client",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "walletName",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "signerType",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "selectedWallet",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "selectedSigner",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "wallet",
+  void 0,
+);
+__decorate(
+  [(0, decorators_js_1.state)()],
+  WebComponentConnector.prototype,
+  "signer",
+  void 0,
+);
+exports.WebComponentConnector = WebComponentConnector = __decorate(
+  [(0, decorators_js_1.customElement)("ccc-connector")],
+  WebComponentConnector,
+);

package/dist.commonjs/events/index.d.ts

@@ -0,0 +1,4 @@
+export declare class WillUpdateEvent extends Event {
+  constructor();
+}
+//# sourceMappingURL=index.d.ts.map

package/dist.commonjs/events/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,qBAAa,eAAgB,SAAQ,KAAK;;CAIzC"}

package/dist.commonjs/events/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WillUpdateEvent = void 0;
+class WillUpdateEvent extends Event {
+  constructor() {
+    super("willUpdate", { composed: true });
+  }
+}
+exports.WillUpdateEvent = WillUpdateEvent;

package/dist.commonjs/index.d.ts

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

package/dist.commonjs/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.commonjs/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+      }
+    : function (o, v) {
+        o["default"] = v;
+      });
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m)
+      if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p))
+        __createBinding(exports, m, p);
+  };
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null)
+      for (var k in mod)
+        if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ccc = void 0;
+__exportStar(require("./barrel"), exports);
+exports.ccc = __importStar(require("./barrel"));

package/dist.commonjs/scenes/connecting.d.ts

@@ -0,0 +1,10 @@
+import { ccc } from "@ckb-ccc/ccc";
+export declare function generateConnectingScene(
+  wallet: ccc.Wallet,
+  signer: ccc.SignerInfo,
+  onSignerSelected: (
+    wallet: ccc.Wallet | undefined,
+    signer: ccc.SignerInfo,
+  ) => unknown,
+): (string | import("lit").TemplateResult<1>)[];
+//# sourceMappingURL=connecting.d.ts.map

package/dist.commonjs/scenes/connecting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../src/scenes/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,2FAqBb"}

package/dist.commonjs/scenes/connecting.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateConnectingScene = void 0;
+const lit_1 = require("lit");
+const retry_svg_1 = require("../assets/retry.svg");
+function generateConnectingScene(wallet, signer, onSignerSelected) {
+  return [
+    wallet.name,
+    (0, lit_1.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_1.RETRY_SVG} alt="retry" />
+        Try again
+      </button>
+    `,
+  ];
+}
+exports.generateConnectingScene = generateConnectingScene;

package/dist.commonjs/scenes/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./connecting";
+export * from "./signers";
+export * from "./wallets";
+//# sourceMappingURL=index.d.ts.map

package/dist.commonjs/scenes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scenes/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}

package/dist.commonjs/scenes/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (
+          !desc ||
+          ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k];
+            },
+          };
+        }
+        Object.defineProperty(o, k2, desc);
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k;
+        o[k2] = m[k];
+      });
+var __exportStar =
+  (this && this.__exportStar) ||
+  function (m, exports) {
+    for (var p in m)
+      if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p))
+        __createBinding(exports, m, p);
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./connecting"), exports);
+__exportStar(require("./signers"), exports);
+__exportStar(require("./wallets"), exports);

package/dist.commonjs/scenes/signers.d.ts

@@ -0,0 +1,11 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { WalletWithSigners } from "../types";
+export declare function signerTypeToIcon(type: ccc.SignerType): string;
+export declare function generateSignersScene(
+  wallet: WalletWithSigners,
+  onSignerSelected: (
+    wallet: ccc.Wallet | undefined,
+    signer: ccc.SignerInfo,
+  ) => unknown,
+): (string | import("lit").TemplateResult<1>)[];
+//# sourceMappingURL=signers.d.ts.map

package/dist.commonjs/scenes/signers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../../src/scenes/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAK7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,2FAyBb"}

package/dist.commonjs/scenes/signers.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSignersScene = exports.signerTypeToIcon = void 0;
+const ccc_1 = require("@ckb-ccc/ccc");
+const lit_1 = require("lit");
+const repeat_js_1 = require("lit/directives/repeat.js");
+const chains_1 = require("../assets/chains");
+function signerTypeToIcon(type) {
+  return {
+    [ccc_1.ccc.SignerType.BTC]: chains_1.BTC_SVG,
+    [ccc_1.ccc.SignerType.EVM]: chains_1.ETH_SVG,
+  }[type];
+}
+exports.signerTypeToIcon = signerTypeToIcon;
+function generateSignersScene(wallet, onSignerSelected) {
+  return [
+    "Select a Chain",
+    (0, lit_1.html)`
+      <img class="wallet-icon" src=${wallet.icon} alt=${wallet.name} />
+      <span class="mb-2">${wallet.name}</span>
+      ${(0, repeat_js_1.repeat)(
+        wallet.signers,
+        (signer) => signer.type,
+        (signer) => (0, lit_1.html)`
+          <button
+            class="btn-primary mb-1"
+            @click=${async () => {
+              onSignerSelected(wallet, signer);
+            }}
+          >
+            <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
+            ${signer.type}
+          </button>
+        `,
+      )}
+    `,
+  ];
+}
+exports.generateSignersScene = generateSignersScene;

package/dist.commonjs/scenes/wallets.d.ts

@@ -0,0 +1,8 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { WalletWithSigners } from "../types";
+export declare function generateWalletsScene(
+  wallets: WalletWithSigners[],
+  onWalletSelected: (wallet: ccc.Wallet) => unknown,
+  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+): unknown[];
+//# sourceMappingURL=wallets.d.ts.map

package/dist.commonjs/scenes/wallets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/scenes/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,iBAAiB,EAAE,EAC5B,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,KAAK,OAAO,EACjD,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,aAwB1E"}