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

package/dist.commonjs/assets/close.svg.d.ts

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

package/dist.commonjs/assets/close.svg.d.ts.map

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

package/dist.commonjs/assets/close.svg.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLOSE_SVG = void 0;
+const utils_1 = require("./utils");
+exports.CLOSE_SVG = (0, utils_1.encodeSvgToImgSrc)(
+  '<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M10.8989 1.0512C10.5085 0.660741 9.87543 0.660703 9.48493 1.05111L5.94897 4.58624L2.41397 1.05124C2.0235 0.660772 1.39043 0.660773 0.999968 1.05124C0.609503 1.4417 0.609503 2.07477 0.999969 2.46524L4.53497 6.00024L0.999968 9.53524C0.609503 9.9257 0.609503 10.5588 0.999968 10.9492C1.39043 11.3397 2.0235 11.3397 2.41397 10.9492L5.94897 7.41424L9.48493 10.9494C9.87543 11.3398 10.5085 11.3397 10.8989 10.9493C11.2894 10.5588 11.2894 9.92568 10.8989 9.5352L7.36397 6.00024L10.8989 2.46528C11.2894 2.07479 11.2894 1.44168 10.8989 1.0512Z"/></svg>',
+);

package/dist.commonjs/assets/okx.svg.d.ts

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

package/dist.commonjs/assets/okx.svg.d.ts.map

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

package/dist.commonjs/assets/okx.svg.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OKX_SVG = void 0;
+const utils_1 = require("./utils");
+exports.OKX_SVG = (0, utils_1.encodeSvgToImgSrc)(
+  '<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1000" height="1000" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M393.949 218.518H231.049C224.129 218.518 218.519 224.128 218.519 231.048V393.948C218.519 400.869 224.129 406.479 231.049 406.479H393.949C400.87 406.479 406.48 400.869 406.48 393.948V231.048C406.48 224.128 400.87 218.518 393.949 218.518ZM581.992 406.479H419.092C412.172 406.479 406.561 412.09 406.561 419.01V581.91C406.561 588.831 412.172 594.441 419.092 594.441H581.992C588.913 594.441 594.523 588.831 594.523 581.91V419.01C594.523 412.09 588.913 406.479 581.992 406.479ZM606.974 218.518H769.874C776.794 218.518 782.405 224.128 782.405 231.048V393.948C782.405 400.869 776.794 406.479 769.874 406.479H606.974C600.053 406.479 594.443 400.869 594.443 393.948V231.048C594.443 224.128 600.053 218.518 606.974 218.518ZM393.95 594.442H231.049C224.129 594.442 218.519 600.052 218.519 606.973V769.873C218.519 776.793 224.129 782.404 231.049 782.404H393.95C400.87 782.404 406.48 776.793 406.48 769.873V606.973C406.48 600.052 400.87 594.442 393.95 594.442ZM606.974 594.442H769.874C776.794 594.442 782.405 600.052 782.405 606.973V769.873C782.405 776.793 776.794 782.404 769.874 782.404H606.974C600.053 782.404 594.443 776.793 594.443 769.873V606.973C594.443 600.052 600.053 594.442 606.974 594.442Z" fill="white"/></svg>',
+);

package/dist.commonjs/assets/retry.svg.d.ts

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

package/dist.commonjs/assets/retry.svg.d.ts.map

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

package/dist.commonjs/assets/retry.svg.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RETRY_SVG = void 0;
+const utils_1 = require("./utils");
+exports.RETRY_SVG = (0, utils_1.encodeSvgToImgSrc)(
+  '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.398 1.16864C11.0369 1.16864 10.7961 1.41021 10.7961 1.77256V2.37648C10.1941 1.531 9.35141 0.866684 8.38828 0.504333C5.37851 -0.82429 1.82699 0.564725 0.502691 3.58432C-0.821607 6.60392 0.562886 10.167 3.57265 11.4957C6.58242 12.8243 10.1339 11.4353 11.4582 8.41568H11.398C11.398 8.05333 11.1573 7.81176 10.7961 7.81176C10.4349 7.81176 10.1941 8.05333 10.1941 8.41568H10.1339C9.59219 9.32156 8.80965 10.0463 7.78633 10.469C5.31832 11.4957 2.54933 10.2878 1.52601 7.81176C0.502691 5.33569 1.7066 2.49727 4.17461 1.531C6.40183 0.564725 8.93004 1.531 10.1339 3.58432H8.99023C8.62906 3.58432 8.38828 3.82589 8.38828 4.18824C8.38828 4.55059 8.62906 4.79216 8.99023 4.79216H11.398C11.7592 4.79216 12 4.55059 12 4.18824V1.77256C12 1.41021 11.7592 1.16864 11.398 1.16864Z" fill="#1E1E1E"/></svg>',
+);

package/dist.commonjs/assets/uni-sat.svg.d.ts

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

package/dist.commonjs/assets/uni-sat.svg.d.ts.map

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

package/dist.commonjs/assets/uni-sat.svg.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNI_SAT_SVG = void 0;
+const utils_1 = require("./utils");
+exports.UNI_SAT_SVG = (0, utils_1.encodeSvgToImgSrc)(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.77 147.7" xmlns:v="https://vecta.io/nano"><defs><linearGradient id="A" x1="106.985" y1="30.78" x2="13.053" y2="72.524" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#201c1b"/><stop offset=".36" stop-color="#77390d"/><stop offset=".67" stop-color="#ea8101"/><stop offset="1" stop-color="#f4b852"/></linearGradient><linearGradient id="B" x1="11.381" y1="118.167" x2="120.232" y2="85.771" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1f1d1c"/><stop offset=".37" stop-color="#77390d"/><stop offset=".67" stop-color="#ea8101"/><stop offset="1" stop-color="#f4fb52"/></linearGradient><radialGradient id="C" cx="53.01" cy="45.84" fx="53.01" fy="45.84" r="11.13" gradientTransform="translate(0 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f4b852"/><stop offset=".33" stop-color="#ea8101"/><stop offset=".64" stop-color="#77390d"/><stop offset="1" stop-color="#211c1d"/></radialGradient></defs><path d="M81.66 13.29l30.31 30.02c2.58 2.55 3.85 5.13 3.81 7.73s-1.15 4.97-3.32 7.12c-2.27 2.25-4.72 3.39-7.34 3.44-2.62.04-5.22-1.22-7.8-3.77l-31-30.7c-3.52-3.49-6.92-5.96-10.19-7.41s-6.71-1.68-10.31-.68c-3.61.99-7.48 3.54-11.63 7.64-5.72 5.67-8.45 10.99-8.17 15.96s3.12 10.13 8.51 15.46l31.25 30.96c2.61 2.58 3.89 5.16 3.85 7.72-.04 2.57-1.16 4.94-3.37 7.13-2.2 2.18-4.63 3.32-7.27 3.41s-5.27-1.16-7.87-3.74L20.81 73.56c-4.93-4.88-8.49-9.5-10.68-13.86s-3.01-9.29-2.44-14.79c.51-4.71 2.02-9.27 4.54-13.69 2.51-4.42 6.11-8.94 10.78-13.57 5.56-5.51 10.87-9.73 15.93-12.67C43.99 2.04 48.88.41 53.6.07c4.73-.34 9.39.6 14 2.82s9.29 5.68 14.05 10.4z" fill="url(#A)"/><path d="M34.11 134.42L3.81 104.4C1.23 101.84-.04 99.27 0 96.67s1.15-4.97 3.32-7.12c2.27-2.25 4.72-3.39 7.34-3.44 2.62-.04 5.22 1.21 7.8 3.77l30.99 30.7c3.53 3.49 6.92 5.96 10.19 7.41s6.71 1.67 10.32.68 7.48-3.54 11.63-7.65c5.72-5.67 8.45-10.99 8.17-15.96s-3.12-10.13-8.51-15.47L64.6 73.24c-2.61-2.58-3.89-5.16-3.85-7.72.04-2.57 1.16-4.94 3.37-7.13 2.2-2.18 4.63-3.32 7.27-3.41s5.27 1.16 7.87 3.74l15.7 15.41c4.93 4.88 8.49 9.5 10.68 13.86s3.01 9.29 2.44 14.79c-.51 4.71-2.02 9.27-4.54 13.69-2.51 4.42-6.11 8.94-10.78 13.57-5.56 5.51-10.87 9.73-15.93 12.67s-9.95 4.58-14.68 4.92-9.39-.6-14-2.82-9.29-5.68-14.05-10.4z" fill="url(#B)"/><circle cx="53.01" cy="45.83" r="11.13" fill="url(#C)"/></svg>',
+);

package/dist.commonjs/assets/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function encodeSvgToImgSrc(svg: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist.commonjs/assets/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/assets/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,UAE5C"}

package/dist.commonjs/assets/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.encodeSvgToImgSrc = void 0;
+function encodeSvgToImgSrc(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+exports.encodeSvgToImgSrc = encodeSvgToImgSrc;

package/dist.commonjs/barrel.d.ts

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

package/dist.commonjs/barrel.d.ts.map

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

package/dist.commonjs/barrel.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("@ckb-ccc/ccc/barrel"), exports);
+__exportStar(require("./connector"), exports);
+__exportStar(require("./events"), exports);

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

@@ -0,0 +1,33 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { LitElement, PropertyValues } from "lit";
+import { WalletWithSigners } from "../types";
+export declare class WebComponentConnector extends LitElement {
+  private wallets;
+  private resetListeners;
+  isOpen: boolean;
+  setIsOpen(isOpen: boolean): void;
+  client: ccc.Client;
+  setClient(client: ccc.Client): void;
+  private walletName?;
+  private signerType?;
+  private selectedWallet?;
+  private updateWallet;
+  private selectedSigner?;
+  private updateSigner;
+  wallet?: WalletWithSigners;
+  signer?: ccc.SignerInfo;
+  private canConnect;
+  private prepareSigner;
+  disconnect(): void;
+  private loadConnection;
+  private saveConnection;
+  connectedCallback(): void;
+  willUpdate(changedProperties: PropertyValues): void;
+  private reloadSigners;
+  private addSigner;
+  render(): import("lit").TemplateResult<1>;
+  private closedHandler;
+  private signerSelectedHandler;
+  static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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;AAW5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,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,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEpC,OAAO,CAAC,cAAc,CAAC,CAAoB;IAC3C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,YAAY;IAMb,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAE3B,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAC/B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,aAAa;IAuBd,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAMzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAuBnD,OAAO,CAAC,aAAa;IAoDrB,OAAO,CAAC,SAAS;IA8BjB,MAAM;IAsDN,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,qBAAqB,CAO3B;IAEF,MAAM,CAAC,MAAM,qEAqIX;CACH"}

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"}