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

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

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

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

@@ -0,0 +1,2 @@
+import { encodeSvgToImgSrc } from "./utils";
+export const OKX_SVG = 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/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/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/assets/uni-sat.svg.js

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

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

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

@@ -0,0 +1,3 @@
+export function encodeSvgToImgSrc(svg) {
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}

package/dist/barrel.d.ts

@@ -1,5 +1,4 @@
 export * from "@ckb-ccc/ccc";
 export * from "./connector";
 export * from "./events";
-export * from "./signers";
 //# 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;AACzB,cAAc,WAAW,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"}

package/dist/barrel.js

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

package/dist/connector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connector.d.ts","sourceRoot":"","sources":["../src/connector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,qBACa,qBAAsB,SAAQ,UAAU;IAEnD,OAAO,CAAC,OAAO,CAAoB;IAG5B,MAAM,EAAE,OAAO,CAAS;IAE/B,iBAAiB,IAAI,IAAI;IAsBzB,MAAM,CAAC,MAAM,0BA+CX;IAEF,MAAM;CAoCP"}
+{"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

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { ClientPublicMainnet, Eip6963 } from "@ckb-ccc/ccc";
+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";
-import { SignerType } from "./signers";
 let WebComponentConnector = class WebComponentConnector extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,8 +19,34 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        const client = new ClientPublicMainnet();
-        const eip6963Manager = new Eip6963.SignerFactory(client);
+        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;
@@ -28,9 +55,9 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
                 ...this.signers,
                 {
                     id: signer.detail.info.uuid,
-                    name: signer.detail.info.name,
+                    name: `ETH: ${signer.detail.info.name}`,
                     icon: signer.detail.info.icon,
-                    type: SignerType.Eip6963,
+                    type: ccc.SignerType.Eip6963,
                     signer,
                 },
             ];
@@ -62,7 +89,7 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
         }}
               >
                 <img src=${signer.icon} alt=${signer.name} />
-                Connect ${signer.name}
+                ${signer.name}
               </button>
             `)}
         </div>
@@ -102,18 +129,22 @@ WebComponentConnector.styles = css `
     }
 
     .wallet-button {
+      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: 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;
     }
   `;

package/dist/events.d.ts

@@ -1,4 +1,4 @@
-import { SignerInfo } from "./signers";
+import { SignerInfo } from "@ckb-ccc/ccc";
 export declare class ConnectedEvent extends Event {
     readonly signerInfo: SignerInfo;
     constructor(signerInfo: SignerInfo);

package/dist/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../src/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,qBAAa,cAAe,SAAQ,KAAK;aACX,UAAU,EAAE,UAAU;gBAAtB,UAAU,EAAE,UAAU;CAGnD;AAED,qBAAa,UAAW,SAAQ,KAAK;;CAIpC"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.3-alpha.0",
+  "version": "0.0.3",
   "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-alpha.0",
+    "@ckb-ccc/ccc": "0.0.3",
     "lit": "^3.1.3"
   },
-  "gitHead": "4a995208e5135d11e9f72b9a9fd73174a3056fc7"
+  "gitHead": "9df1bbe0007136568914d8a73fe39f898d636a12"
 }

package/src/assets/okx.svg.ts

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

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

@@ -0,0 +1,3 @@
+export function encodeSvgToImgSrc(svg: string) {
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}

package/src/barrel.ts

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

package/src/connector.ts

@@ -1,14 +1,15 @@
-import { ClientPublicMainnet, Eip6963 } from "@ckb-ccc/ccc";
+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";
-import { SignerInfo, SignerType } from "./signers";
 
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
-  private signers: SignerInfo[] = [];
+  private signers: ccc.SignerInfo[] = [];
 
   @property()
   public isOpen: boolean = false;
@@ -16,8 +17,36 @@ export class WebComponentConnector extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
 
-    const client = new ClientPublicMainnet();
-    const eip6963Manager = new Eip6963.SignerFactory(client);
+    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;
@@ -26,9 +55,9 @@ export class WebComponentConnector extends LitElement {
         ...this.signers,
         {
           id: signer.detail.info.uuid,
-          name: signer.detail.info.name,
+          name: `ETH: ${signer.detail.info.name}`,
           icon: signer.detail.info.icon,
-          type: SignerType.Eip6963,
+          type: ccc.SignerType.Eip6963,
           signer,
         },
       ];
@@ -68,18 +97,22 @@ export class WebComponentConnector extends LitElement {
     }
 
     .wallet-button {
+      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: 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;
     }
   `;
@@ -113,7 +146,7 @@ export class WebComponentConnector extends LitElement {
                 }}
               >
                 <img src=${signer.icon} alt=${signer.name} />
-                Connect ${signer.name}
+                ${signer.name}
               </button>
             `,
           )}

package/src/events.ts

@@ -1,4 +1,4 @@
-import { SignerInfo } from "./signers";
+import { SignerInfo } from "@ckb-ccc/ccc";
 
 export class ConnectedEvent extends Event {
   constructor(public readonly signerInfo: SignerInfo) {

package/dist/signers.d.ts

@@ -1,13 +0,0 @@
-import { Signer } from "@ckb-ccc/ccc";
-export declare enum SignerType {
-    Eip6963 = "Eip6963"
-}
-export declare class SignerInfo {
-    type: SignerType;
-    id: string;
-    name: string;
-    icon: string;
-    signer: Signer;
-    constructor(type: SignerType, id: string, name: string, icon: string, signer: Signer);
-}
-//# sourceMappingURL=signers.d.ts.map

package/dist/signers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"signers.d.ts","sourceRoot":"","sources":["../src/signers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,oBAAY,UAAU;IACpB,OAAO,YAAY;CACpB;AAED,qBAAa,UAAU;IAEZ,IAAI,EAAE,UAAU;IAChB,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,MAAM;gBAJd,IAAI,EAAE,UAAU,EAChB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM;CAExB"}

package/dist/signers.js

@@ -1,13 +0,0 @@
-export var SignerType;
-(function (SignerType) {
-    SignerType["Eip6963"] = "Eip6963";
-})(SignerType || (SignerType = {}));
-export class SignerInfo {
-    constructor(type, id, name, icon, signer) {
-        this.type = type;
-        this.id = id;
-        this.name = name;
-        this.icon = icon;
-        this.signer = signer;
-    }
-}

package/src/signers.ts

@@ -1,15 +0,0 @@
-import { Signer } from "@ckb-ccc/ccc";
-
-export enum SignerType {
-  Eip6963 = "Eip6963",
-}
-
-export class SignerInfo {
-  constructor(
-    public type: SignerType,
-    public id: string,
-    public name: string,
-    public icon: string,
-    public signer: Signer,
-  ) {}
-}