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

package/dist/advancedBarrel.d.ts

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

package/dist/advancedBarrel.d.ts.map

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

package/dist/advancedBarrel.js

@@ -1 +1,2 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
+export * from "./scenes";

package/dist/assets/chains/btc.svg.d.ts

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

package/dist/assets/chains/btc.svg.d.ts.map

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

package/dist/assets/chains/btc.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "../utils";
+export const BTC_SVG = encodeSvgToImgSrc('<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" height="64" width="64" version="1.1"><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/><style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-sheet"/><script xmlns=""/><g transform="translate(0.00630876,-0.00301984)"><path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/><path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/></g><script xmlns=""/></svg>');

package/dist/assets/chains/eth.svg.d.ts

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

package/dist/assets/chains/eth.svg.d.ts.map

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

package/dist/assets/chains/eth.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "../utils";
+export const ETH_SVG = encodeSvgToImgSrc('<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_46_558)"><circle cx="16" cy="16" r="16" fill="#627EEA"/><path d="M15.9957 20.4203L9.14282 16.3876L15.9957 5.14258V20.4203Z" fill="white"/><path d="M15.9957 26.8573L9.30029 17.396L15.9957 21.3511V26.8573Z" fill="white"/><path d="M16.2319 20.4203L23.0849 16.3876L16.2319 5.14258V20.4203Z" fill="#C1CCF7"/><path d="M16.3107 26.8573L23.0848 17.396L16.3107 21.3511V26.8573Z" fill="#C1CCF7"/></g><defs><clipPath id="clip0_46_558"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>');

package/dist/assets/chains/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./btc.svg";
+export * from "./eth.svg";
+//# sourceMappingURL=index.d.ts.map

package/dist/assets/chains/index.d.ts.map

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

package/dist/assets/chains/index.js

@@ -0,0 +1,2 @@
+export * from "./btc.svg";
+export * from "./eth.svg";

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

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

package/dist/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/assets/close.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const CLOSE_SVG = 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/assets/retry.svg.d.ts

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

package/dist/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/assets/retry.svg.js

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const RETRY_SVG = 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/barrel.d.ts

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

package/dist/barrel.d.ts.map

@@ -1 +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"}
+{"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,UAAU,CAAC"}

package/dist/barrel.js

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

package/dist/connector/index.d.ts

@@ -0,0 +1,19 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { LitElement } from "lit";
+import { ConnectorStatus } from "../status";
+export declare class WebComponentConnector extends LitElement {
+    private wallets;
+    private existedEip6963;
+    isOpen: boolean;
+    wallet?: ccc.Wallet;
+    signer?: ccc.SignerInfo;
+    status: ConnectorStatus;
+    connectedCallback(): void;
+    addSigner(name: string, icon: string, type: ccc.SignerType, signer: ccc.Signer): void;
+    render(): import("lit").TemplateResult<1>;
+    private onClose;
+    private onWalletSelected;
+    private onSignerSelected;
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/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,EAAa,MAAM,KAAK,CAAC;AAW5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,cAAc,CAAgB;IAG/B,MAAM,EAAE,OAAO,CAAS;IAGxB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAExB,MAAM,EAAE,eAAe,CAAmC;IAEjE,iBAAiB,IAAI,IAAI;IAkCzB,SAAS,CACP,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,CAAC,UAAU,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM;IAkBpB,MAAM;IAmDN,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAStB;IAEF,MAAM,CAAC,MAAM,0BAqIX;CACH"}

package/dist/connector/index.js

@@ -0,0 +1,271 @@
+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 { 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";
+let WebComponentConnector = class WebComponentConnector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.wallets = [];
+        this.existedEip6963 = [];
+        this.isOpen = false;
+        this.status = ConnectorStatus.SelectingSigner;
+        this.onClose = () => {
+            this.dispatchEvent(new SignerChangedEvent());
+            this.dispatchEvent(new CloseEvent());
+        };
+        this.onWalletSelected = (wallet) => {
+            this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
+        };
+        this.onSignerSelected = (wallet, signer) => {
+            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());
+            })();
+        };
+    }
+    connectedCallback() {
+        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, icon, type, 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) => {
+            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>`;
+    }
+};
+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;
+    }
+
+    .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([
+    state()
+], WebComponentConnector.prototype, "wallets", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "isOpen", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "wallet", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "signer", void 0);
+__decorate([
+    property()
+], WebComponentConnector.prototype, "status", void 0);
+WebComponentConnector = __decorate([
+    customElement("ccc-connector")
+], WebComponentConnector);
+export { WebComponentConnector };

package/dist/events/index.d.ts

@@ -0,0 +1,15 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { ConnectorStatus } from "../status";
+export declare class SignerChangedEvent extends Event {
+    readonly wallet?: ccc.Wallet | undefined;
+    readonly signerInfo?: ccc.SignerInfo | undefined;
+    constructor(wallet?: ccc.Wallet | undefined, signerInfo?: ccc.SignerInfo | undefined);
+}
+export declare class StatusChangedEvent extends Event {
+    readonly status: ConnectorStatus;
+    constructor(status: ConnectorStatus);
+}
+export declare class CloseEvent extends Event {
+    constructor();
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/events/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,qBAAa,kBAAmB,SAAQ,KAAK;aAEzB,MAAM,CAAC;aACP,UAAU,CAAC;gBADX,MAAM,CAAC,wBAAY,EACnB,UAAU,CAAC,4BAAgB;CAI9C;AAED,qBAAa,kBAAmB,SAAQ,KAAK;aACf,MAAM,EAAE,eAAe;gBAAvB,MAAM,EAAE,eAAe;CAGpD;AAED,qBAAa,UAAW,SAAQ,KAAK;;CAIpC"}

package/dist/events/index.js

@@ -0,0 +1,18 @@
+export class SignerChangedEvent extends Event {
+    constructor(wallet, signerInfo) {
+        super("signerChanged", { composed: true });
+        this.wallet = wallet;
+        this.signerInfo = signerInfo;
+    }
+}
+export class StatusChangedEvent extends Event {
+    constructor(status) {
+        super("statusChanged", { composed: true });
+        this.status = status;
+    }
+}
+export class CloseEvent extends Event {
+    constructor() {
+        super("close", { composed: true });
+    }
+}

package/dist/scenes/connecting.d.ts

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

package/dist/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,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAqB1E"}

package/dist/scenes/connecting.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+import { RETRY_SVG } from "../assets/retry.svg";
+export function generateConnectingScene(wallet, signer, onSignerSelected) {
+    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/dist/scenes/index.d.ts

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

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

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

package/dist/scenes/signers.d.ts

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

package/dist/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;AAKnC,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,CAK7D;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,KAAK,OAAO,gDAyB1E"}

package/dist/scenes/signers.js

@@ -0,0 +1,30 @@
+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) {
+    return {
+        [ccc.SignerType.BTC]: BTC_SVG,
+        [ccc.SignerType.EVM]: ETH_SVG,
+    }[type];
+}
+export function generateSignersScene(wallet, onSignerSelected) {
+    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/dist/scenes/wallets.d.ts

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

package/dist/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;AAInC,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,EACrB,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"}

package/dist/scenes/wallets.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+export function generateWalletsScene(wallets, onWalletSelected, onSignerSelected) {
+    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/dist/status/index.d.ts

@@ -0,0 +1,6 @@
+export declare enum ConnectorStatus {
+    SelectingSigner = "SelectingSigner",
+    Connecting = "Connecting",
+    Idle = "Idle"
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/status/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/status/index.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,eAAe,oBAAoB;IACnC,UAAU,eAAe;IACzB,IAAI,SAAS;CACd"}

package/dist/status/index.js

@@ -0,0 +1,6 @@
+export var ConnectorStatus;
+(function (ConnectorStatus) {
+    ConnectorStatus["SelectingSigner"] = "SelectingSigner";
+    ConnectorStatus["Connecting"] = "Connecting";
+    ConnectorStatus["Idle"] = "Idle";
+})(ConnectorStatus || (ConnectorStatus = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.3",
+  "version": "0.0.4-alpha.0",
   "description": "Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ckb-ccc/ccc": "0.0.3",
+    "@ckb-ccc/ccc": "0.0.4-alpha.0",
     "lit": "^3.1.3"
   },
-  "gitHead": "9df1bbe0007136568914d8a73fe39f898d636a12"
+  "gitHead": "e49045ed4b2778c92d6f49b79c17125245141a21"
 }

package/src/advancedBarrel.ts

@@ -1 +1,2 @@
 export * from "@ckb-ccc/ccc/advancedBarrel";
+export * from "./scenes";

package/src/assets/chains/btc.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "../utils";
+
+export const BTC_SVG = encodeSvgToImgSrc(
+  '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" height="64" width="64" version="1.1"><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-custom-link"/><link xmlns="" type="text/css" rel="stylesheet" id="dark-mode-general-link"/><style xmlns="" lang="en" type="text/css" id="dark-mode-custom-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-style"/><style xmlns="" lang="en" type="text/css" id="dark-mode-native-sheet"/><script xmlns=""/><g transform="translate(0.00630876,-0.00301984)"><path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/><path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/></g><script xmlns=""/></svg>',
+);

package/src/assets/chains/eth.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "../utils";
+
+export const ETH_SVG = encodeSvgToImgSrc(
+  '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_46_558)"><circle cx="16" cy="16" r="16" fill="#627EEA"/><path d="M15.9957 20.4203L9.14282 16.3876L15.9957 5.14258V20.4203Z" fill="white"/><path d="M15.9957 26.8573L9.30029 17.396L15.9957 21.3511V26.8573Z" fill="white"/><path d="M16.2319 20.4203L23.0849 16.3876L16.2319 5.14258V20.4203Z" fill="#C1CCF7"/><path d="M16.3107 26.8573L23.0848 17.396L16.3107 21.3511V26.8573Z" fill="#C1CCF7"/></g><defs><clipPath id="clip0_46_558"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>',
+);

package/src/assets/chains/index.ts

@@ -0,0 +1,2 @@
+export * from "./btc.svg";
+export * from "./eth.svg";

package/src/assets/close.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const CLOSE_SVG = 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/src/assets/retry.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const RETRY_SVG = 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>',
+);