@ckb-ccc/connector 0.0.14-alpha.1 → 0.0.14-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @ckb-ccc/connector
 
+## 0.0.14-alpha.2
+
+### Patch Changes
+
+- [#53](https://github.com/ckb-ecofund/ccc/pull/53) [`32bffff`](https://github.com/ckb-ecofund/ccc/commit/32bffff407934ec5d16bf7c5701b128d8b29c452) Thanks [@Hanssen0](https://github.com/Hanssen0)! - feat(connector): select client
+
+- Updated dependencies []:
+  - @ckb-ccc/ccc@0.0.14-alpha.2
+
 ## 0.0.14-alpha.1
 
 ### Patch Changes

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

@@ -1,2 +1,2 @@
-export declare const CLOSE_SVG: string;
+export declare const CLOSE_SVG: import("lit").TemplateResult;
 //# sourceMappingURL=close.svg.d.ts.map

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

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

package/dist/assets/close.svg.js

@@ -1,2 +1,15 @@
-import { encodeSvgToImgSrc } from "./utils.js";
-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>');
+import { html } from "lit/static-html.js";
+export const CLOSE_SVG = html `
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <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"
+      fill="currentColor"
+    />
+  </svg>
+`;

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

@@ -1,2 +1,2 @@
-export declare const DISCONNECT_SVG: string;
+export declare const DISCONNECT_SVG: import("lit").TemplateResult;
 //# sourceMappingURL=diconnect.svg.d.ts.map

package/dist/assets/diconnect.svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diconnect.svg.d.ts","sourceRoot":"","sources":["../../src/assets/diconnect.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAE1B,CAAC"}
+{"version":3,"file":"diconnect.svg.d.ts","sourceRoot":"","sources":["../../src/assets/diconnect.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,8BAc1B,CAAC"}

package/dist/assets/diconnect.svg.js

@@ -1,2 +1,16 @@
-import { encodeSvgToImgSrc } from "./utils.js";
-export const DISCONNECT_SVG = encodeSvgToImgSrc('<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="8" fill="#DDDDDD"/><path d="M20.375 16.875H14.25V15.125H20.375L19.5 13.375H21.25L23 16L21.25 18.625H19.5L20.375 16.875ZM20.9509 11.051L19.7128 12.2886C19.226 11.8 18.6473 11.4125 18.0101 11.1484C17.3729 10.8844 16.6897 10.749 16 10.75C13.1006 10.75 10.75 13.1006 10.75 16C10.75 18.8994 13.1006 21.25 16 21.25C17.4107 21.25 18.7309 20.6923 19.71 19.7147L20.9462 20.9532C20.297 21.6031 19.5259 22.1184 18.6771 22.4696C17.8283 22.8209 16.9186 23.0011 16 23C12.1341 23 9 19.8659 9 16C9 12.1341 12.1341 9 16 9C17.8816 9 19.647 9.74667 20.9509 11.051Z" fill="#666666"/></svg>');
+import { html } from "lit/static-html.js";
+export const DISCONNECT_SVG = html `
+  <svg
+    width="32"
+    height="32"
+    viewBox="3 3 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <path
+      d="M20.375 16.875H14.25V15.125H20.375L19.5 13.375H21.25L23 16L21.25 18.625H19.5L20.375 16.875ZM20.9509 11.051L19.7128 12.2886C19.226 11.8 18.6473 11.4125 18.0101 11.1484C17.3729 10.8844 16.6897 10.749 16 10.75C13.1006 10.75 10.75 13.1006 10.75 16C10.75 18.8994 13.1006 21.25 16 21.25C17.4107 21.25 18.7309 20.6923 19.71 19.7147L20.9462 20.9532C20.297 21.6031 19.5259 22.1184 18.6771 22.4696C17.8283 22.8209 16.9186 23.0011 16 23C12.1341 23 9 19.8659 9 16C9 12.1341 12.1341 9 16 9C17.8816 9 19.647 9.74667 20.9509 11.051Z"
+      fill="currentColor"
+    />
+  </svg>
+`;

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

@@ -1,2 +1,2 @@
-export declare const LEFT_SVG: string;
+export declare const LEFT_SVG: import("lit").TemplateResult;
 //# sourceMappingURL=left.svg.d.ts.map

package/dist/assets/left.svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"left.svg.d.ts","sourceRoot":"","sources":["../../src/assets/left.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,QAEpB,CAAC"}
+{"version":3,"file":"left.svg.d.ts","sourceRoot":"","sources":["../../src/assets/left.svg.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,8BAcpB,CAAC"}

package/dist/assets/left.svg.js

@@ -1,2 +1,16 @@
-import { encodeSvgToImgSrc } from "./utils.js";
-export const LEFT_SVG = encodeSvgToImgSrc('<svg width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><path d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z" stroke="#1E1E1E" stroke-width="1"/></svg>');
+import { html } from "lit/static-html.js";
+export const LEFT_SVG = html `
+  <svg
+    width="8"
+    height="14"
+    viewBox="0 0 8 14"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <path
+      d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+    />
+  </svg>
+`;

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

@@ -1,2 +1,2 @@
-export declare const RETRY_SVG: string;
+export declare const RETRY_SVG: import("lit").TemplateResult;
 //# sourceMappingURL=retry.svg.d.ts.map

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

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

package/dist/assets/retry.svg.js

@@ -1,2 +1,15 @@
-import { encodeSvgToImgSrc } from "./utils.js";
-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>');
+import { html } from "lit/static-html.js";
+export const RETRY_SVG = html `
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    class="primary-icon"
+  >
+    <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"
+    />
+  </svg>
+`;

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

@@ -0,0 +1,2 @@
+export declare const SWAP_SVG: import("lit").TemplateResult;
+//# sourceMappingURL=swap.svg.d.ts.map

package/dist/assets/swap.svg.d.ts.map

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

package/dist/assets/swap.svg.js

@@ -0,0 +1,36 @@
+import { html } from "lit/static-html.js";
+export const SWAP_SVG = html `
+  <svg
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    xmlns="http://www.w3.org/2000/svg"
+    class="secondary-icon"
+    stroke="currentColor"
+  >
+    <path
+      d="M9.30688 5.22537L11.1669 3.36536L9.30688 1.50537"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.16699 3.36523H11.167"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.02698 6.77539L2.16699 8.63541L4.02698 10.4954"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.167 8.63525H2.16699"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;

package/dist/components/button-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-pill.d.ts","sourceRoot":"","sources":["../../src/components/button-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAiCX;IAEF,OAAO;IAIP,MAAM;CAGP"}
+{"version":3,"file":"button-pill.d.ts","sourceRoot":"","sources":["../../src/components/button-pill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAkCX;IAEF,OAAO;IAIP,MAAM;CAGP"}

package/dist/components/button-pill.js

@@ -42,7 +42,8 @@ ButtonPill.styles = css `
       background: var(--btn-secondary);
     }
 
-    button ::slotted(img) {
+    button ::slotted(img),
+    button ::slotted(svg) {
       width: 0.8rem;
       height: 0.8rem;
       margin-right: 0.5rem;

package/dist/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAuCX;IAEF,OAAO;IAIP,MAAM;CAGP"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAwCX;IAEF,OAAO;IAIP,MAAM;CAGP"}

package/dist/components/button.js

@@ -47,7 +47,8 @@ Button.styles = css `
       background: var(--btn-primary);
     }
 
-    button ::slotted(img) {
+    button ::slotted(img),
+    button ::slotted(svg) {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;

package/dist/components/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,qBACa,MAAO,SAAQ,UAAU;IAE7B,OAAO,EAAE,GAAG,GAAG,SAAS,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM;IA6BN,MAAM,CAAC,MAAM,0BAuDX;CACH"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,qBACa,MAAO,SAAQ,UAAU;IAE7B,OAAO,EAAE,GAAG,GAAG,SAAS,CAAC;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM;IA+BN,MAAM,CAAC,MAAM,0BA0DX;CACH"}

package/dist/components/dialog.js

@@ -14,21 +14,23 @@ let Dialog = class Dialog extends LitElement {
       <div
         class="header text-bold fs-lg ${this.header ? "header-divider" : ""}"
       >
-        <img
+        <div
           class="back ${this.canBack !== undefined ? "active" : ""}"
-          src=${LEFT_SVG}
           @click=${() => {
             this.dispatchEvent(new Event("back"));
         }}
-        />
+        >
+          ${LEFT_SVG}
+        </div>
         ${this.header}
-        <img
+        <span
           class="close active"
-          src=${CLOSE_SVG}
           @click=${() => {
             this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
         }}
-        />
+        >
+          ${CLOSE_SVG}
+        </span>
       </div>
       <div class="body">
         <slot></slot>
@@ -37,6 +39,9 @@ let Dialog = class Dialog extends LitElement {
     }
 };
 Dialog.styles = css `
+    .primary-icon {
+      color: var(--icon-primary);
+    }
     .text-bold {
       font-weight: bold;
     }
@@ -68,16 +73,16 @@ Dialog.styles = css `
       border-bottom: 1px solid var(--divider);
     }
 
-    .close,
-    .back {
+    .close svg,
+    .back svg {
       width: 0.8rem;
       height: 0.8rem;
       opacity: 0;
       transition: opacity 0.15s ease-in-out;
     }
 
-    .close.active,
-    .back.active {
+    .close.active svg,
+    .back.active svg {
       opacity: 1;
       cursor: pointer;
     }

package/dist/connector/index.d.ts

@@ -5,6 +5,11 @@ export declare class WebComponentConnector extends LitElement {
     icon?: string;
     preferredNetworks?: ccc.NetworkPreference[];
     signersController?: ccc.SignersController;
+    clientOptions?: {
+        icon?: string;
+        client: ccc.Client;
+        name: string;
+    }[];
     client: ccc.Client;
     setClient(client: ccc.Client): void;
     private signersControllerInner;

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

@@ -1 +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;AAM5D,qBACa,qBAAsB,SAAQ,UAAU;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAE5C,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAG1C,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAInC,OAAO,CAAC,sBAAsB,CAA+B;IAG7D,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAE/B,OAAO,CAAC,wBAAwB,CAAC,CAAa;IAEvC,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoBnD,aAAa;IAQP,YAAY,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,SAAS;IAsBxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CACV;IAEd,MAAM;IAuCN,OAAO;IASP,MAAM,CAAC,MAAM,0BAyBX;CACH"}
+{"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;AAO5D,qBACa,qBAAsB,SAAQ,UAAU;IAE5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAE5C,iBAAiB,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC;IAE1C,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAGtE,MAAM,EAAE,GAAG,CAAC,MAAM,CAAiC;IACnD,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM;IAInC,OAAO,CAAC,sBAAsB,CAA+B;IAG7D,OAAO,CAAC,UAAU,CAAC,CAAS;IAE5B,OAAO,CAAC,UAAU,CAAC,CAAS;IAErB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC;IAE/B,OAAO,CAAC,wBAAwB,CAAC,CAAa;IAEvC,UAAU;IAQjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,cAAc;IAUtB,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAoBnD,aAAa;IAQP,YAAY,CAChB,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,EAC9B,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,SAAS;IAsBxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAoC;IAC5D,OAAO,CAAC,QAAQ,CAAC,OAAO,CACV;IAEd,MAAM;IA0CN,OAAO;IASP,MAAM,CAAC,MAAM,0BAyBX;CACH"}

package/dist/connector/index.js

@@ -97,7 +97,9 @@ let WebComponentConnector = class WebComponentConnector extends LitElement {
               <ccc-connected-scene
                 .wallet=${this.wallet}
                 .signer=${this.signer.signer}
+                .clientOptions=${this.clientOptions}
                 @disconnect=${() => this.disconnect()}
+                @select-client=${(e) => this.setClient(e.client)}
                 ${ref(this.bodyRef)}
               ></ccc-connected-scene>
             `
@@ -161,6 +163,9 @@ __decorate([
 __decorate([
     property()
 ], WebComponentConnector.prototype, "signersController", void 0);
+__decorate([
+    state()
+], WebComponentConnector.prototype, "clientOptions", void 0);
 __decorate([
     state()
 ], WebComponentConnector.prototype, "client", void 0);

package/dist/scenes/connected.d.ts

@@ -1,12 +1,22 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues } from "lit";
+export declare class SelectClientEvent extends Event {
+    client: ccc.Client;
+    constructor(client: ccc.Client);
+}
 export declare function formatString(str: string | undefined, l?: number, r?: number): string | undefined;
 export declare class ConnectedScene extends LitElement {
     wallet?: ccc.Wallet;
     signer?: ccc.Signer;
+    clientOptions?: {
+        icon?: string;
+        client: ccc.Client;
+        name: string;
+    }[];
     private recommendedAddress?;
     private internalAddress?;
     private balance?;
+    private selectingClient;
     willUpdate(changedProperties: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult;

package/dist/scenes/connected.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAG3B,OAAO,CAAC,kBAAkB,CAAC,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;IAE1B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzD,MAAM;IAkEN,MAAM,CAAC,MAAM,0BAmGX;IAEF,OAAO;CAGR"}
+{"version":3,"file":"connected.d.ts","sourceRoot":"","sources":["../../src/scenes/connected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D,qBAAa,iBAAkB,SAAQ,KAAK;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM;gBAAlB,MAAM,EAAE,GAAG,CAAC,MAAM;CAGtC;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,CAAC,SAAI,EACL,CAAC,SAAI,GACJ,MAAM,GAAG,SAAS,CAKpB;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAG7E,OAAO,CAAC,kBAAkB,CAAC,CAAS;IAEpC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAU;IAE1B,OAAO,CAAC,eAAe,CAAS;IAEhC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAgBzD,MAAM;IA8FN,MAAM,CAAC,MAAM,0BAmHX;IAEF,OAAO;CAGR"}

package/dist/scenes/connected.js

@@ -7,9 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { CKB_SVG } from "../assets/chains/index.js";
 import { DISCONNECT_SVG } from "../assets/diconnect.svg.js";
+import { SWAP_SVG } from "../assets/swap.svg.js";
 import { signerTypeToIcon } from "./selecting/signers.js";
+export class SelectClientEvent extends Event {
+    constructor(client) {
+        super("select-client");
+        this.client = client;
+    }
+}
 export function formatString(str, l = 9, r = 6) {
     if (str && str.length > l + r + 3) {
         return `${str.slice(0, l)}...${str.slice(-r)}`;
@@ -17,6 +25,10 @@ export function formatString(str, l = 9, r = 6) {
     return str;
 }
 let ConnectedScene = class ConnectedScene extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectingClient = false;
+    }
     willUpdate(changedProperties) {
         if ((!this.recommendedAddress ||
             !this.internalAddress ||
@@ -35,61 +47,83 @@ let ConnectedScene = class ConnectedScene extends LitElement {
         if (!wallet || !signer) {
             return html `<div></div>`;
         }
-        return html `
-      <ccc-dialog>
-        <div class="position-relative">
-          <img
-            class="connecting-wallet-icon"
-            src=${wallet.icon}
-            alt=${wallet.name}
-          />
-          <img
-            class="connected-type-icon"
-            src=${signerTypeToIcon(signer.type)}
-            alt=${signer.type}
-          />
-        </div>
-
-        <ccc-copy-button
-          value=${recommendedAddress}
-          class="text-bold fs-xl mt-2"
-        >
-          ${formatString(recommendedAddress)}
-        </ccc-copy-button>
-        <div class="text-bold fs-md">
-          ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
-        </div>
-        <ccc-copy-button
-          value=${internalAddress}
-          class="text-bold text-tip fs-md"
-          style="margin-top: 0.5rem"
-        >
-          ${formatString(internalAddress, 11, 9)}
-        </ccc-copy-button>
-
-        <ccc-button
-          class="mt-2"
-          @click=${() => this.dispatchEvent(new Event("disconnect"))}
-        >
-          <img src=${DISCONNECT_SVG} alt="disconnect" />
-          Disconnect
-        </ccc-button>
-
-        <div class="switch-btn-container">
-          <div class="switch-line"></div>
-          <div class="switch-content ml-2 mr-2 fs-sm">
+        const body = (() => {
+            if (!this.selectingClient || !this.clientOptions) {
+                return html `
+          <div class="position-relative">
+            <img
+              class="connecting-wallet-icon"
+              src=${wallet.icon}
+              alt=${wallet.name}
+            />
             <img
-              class="mr-1 sm-chain-logo"
-              src=${CKB_SVG}
-              alt="Nervos Network"
+              class="connected-type-icon"
+              src=${signerTypeToIcon(signer.type)}
+              alt=${signer.type}
             />
-            ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
-            ${["ckb", "ckt"].includes(signer.client.addressPrefix)
-            ? ""
-            : ` ${signer.client.addressPrefix}`}
           </div>
-          <div class="switch-line"></div>
-        </div>
+
+          <ccc-copy-button
+            value=${recommendedAddress}
+            class="text-bold fs-xl mt-2"
+          >
+            ${formatString(recommendedAddress)}
+          </ccc-copy-button>
+          <div class="text-bold fs-md">
+            ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
+          </div>
+          <ccc-copy-button
+            value=${internalAddress}
+            class="text-bold text-tip fs-md"
+            style="margin-top: 0.5rem"
+          >
+            ${formatString(internalAddress, 11, 9)}
+          </ccc-copy-button>
+
+          <ccc-button
+            class="mt-2"
+            @click=${() => this.dispatchEvent(new Event("disconnect"))}
+          >
+            ${DISCONNECT_SVG}
+            Disconnect
+          </ccc-button>
+
+          <div
+            class="switch-btn-container ${this.clientOptions
+                    ? "cursor-pointer"
+                    : ""}"
+            @click=${() => (this.selectingClient = Boolean(this.clientOptions))}
+          >
+            <div class="switch-line"></div>
+            <div class="switch-content ml-2 mr-2 fs-sm">
+              <img class="sm-chain-logo" src=${CKB_SVG} alt="Nervos Network" />
+              ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+              ${["ckb", "ckt"].includes(signer.client.addressPrefix)
+                    ? ""
+                    : ` ${signer.client.addressPrefix}`}
+              ${this.clientOptions ? SWAP_SVG : undefined}
+            </div>
+            <div class="switch-line"></div>
+          </div>
+        `;
+            }
+            return repeat(this.clientOptions, ({ name }) => name, ({ client, name, icon }) => html `
+          <ccc-button
+            class="mt-1"
+            @click=${() => this.dispatchEvent(new SelectClientEvent(client))}
+          >
+            <img src=${icon ?? CKB_SVG} alt=${name} />
+            ${name}
+          </ccc-button>
+        `);
+        })();
+        return html `
+      <ccc-dialog
+        header=${this.selectingClient ? "Select Network" : undefined}
+        ?canBack=${this.selectingClient}
+        @back=${() => (this.selectingClient = false)}
+      >
+        ${body}
       </ccc-dialog>
     `;
     }
@@ -104,6 +138,14 @@ ConnectedScene.styles = css `
       flex-direction: column;
       align-items: center;
     }
+
+    .primary-icon {
+      color: var(--icon-primary);
+    }
+    .secondary-icon {
+      color: var(--icon-secondary);
+    }
+
     .text-bold {
       font-weight: bold;
     }
@@ -128,6 +170,9 @@ ConnectedScene.styles = css `
     .mt-2 {
       margin-top: 1rem;
     }
+    .ml-1 {
+      margin-left: 0.7em;
+    }
     .ml-2 {
       margin-left: 1em;
     }
@@ -165,9 +210,14 @@ ConnectedScene.styles = css `
       align-items: center;
     }
 
+    .cursor-pointer {
+      cursor: pointer;
+    }
+
     .switch-content {
       display: flex;
       align-items: center;
+      gap: 0.7rem;
     }
 
     .switch-line {
@@ -203,6 +253,9 @@ __decorate([
 __decorate([
     property()
 ], ConnectedScene.prototype, "signer", void 0);
+__decorate([
+    property()
+], ConnectedScene.prototype, "clientOptions", void 0);
 __decorate([
     state()
 ], ConnectedScene.prototype, "recommendedAddress", void 0);
@@ -212,6 +265,9 @@ __decorate([
 __decorate([
     state()
 ], ConnectedScene.prototype, "balance", void 0);
+__decorate([
+    state()
+], ConnectedScene.prototype, "selectingClient", void 0);
 ConnectedScene = __decorate([
     customElement("ccc-connected-scene")
 ], ConnectedScene);

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

@@ -1 +1 @@
-{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA2Bb"}
+{"version":3,"file":"connecting.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/connecting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,EACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,gBAAgB,EAAE,CAChB,MAAM,EAAE,GAAG,CAAC,iBAAiB,EAC7B,MAAM,EAAE,GAAG,CAAC,UAAU,KACnB,OAAO,gDA4Bb"}

package/dist/scenes/selecting/connecting.js

@@ -21,7 +21,8 @@ export function generateConnectingScene(wallet, signer, error, onSignerSelected)
         class="mt-2"
         @click=${() => onSignerSelected(wallet, signer)}
       >
-        <img src=${RETRY_SVG} alt="retry" />
+
+        ${RETRY_SVG}
         Try again
       </ccc-button-pill>
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,qBAAa,cAAe,SAAQ,KAAK;aAErB,UAAU,EAAE,MAAM;aAClB,UAAU,EAAE,MAAM;gBADlB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM;CAIrC;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,cAAc,CAAC,CAAwB;IAE/C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,MAAM;IA+CC,OAAO;IAMd,OAAO,CAAC,qBAAqB,CAwC3B;IAEF,MAAM,CAAC,MAAM,0BAsDX;IAEF,OAAO;CAGR"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/scenes/selecting/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5C,qBAAa,cAAe,SAAQ,KAAK;aAErB,UAAU,EAAE,MAAM;aAClB,UAAU,EAAE,MAAM;gBADlB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM;CAIrC;AAED,qBACa,cAAe,SAAQ,UAAU;IAErC,OAAO,CAAC,EAAE,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,cAAc,CAAC,CAAwB;IAE/C,OAAO,CAAC,cAAc,CAAC,CAAiB;IAExC,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC,MAAM;IA+CC,OAAO;IAMd,OAAO,CAAC,qBAAqB,CAwC3B;IAEF,MAAM,CAAC,MAAM,0BA0DX;IAEF,OAAO;CAGR"}

package/dist/scenes/selecting/index.js

@@ -94,6 +94,10 @@ let SelectingScene = class SelectingScene extends LitElement {
     }
 };
 SelectingScene.styles = css `
+    .primary-icon {
+      color: var(--icon-primary);
+    }
+
     :host {
       display: block;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckb-ccc/connector",
-  "version": "0.0.14-alpha.1",
+  "version": "0.0.14-alpha.2",
   "description": "CCC - CKBer's Codebase. Common Chains Connector UI",
   "author": "Hanssen0 <hanssen0@hanssen0.com>",
   "license": "MIT",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "lit": "^3.1.3",
-    "@ckb-ccc/ccc": "0.0.14-alpha.1"
+    "@ckb-ccc/ccc": "0.0.14-alpha.2"
   },
   "scripts": {
     "build": "rimraf ./dist && tsc",

package/src/assets/close.svg.ts

@@ -1,5 +1,16 @@
-import { encodeSvgToImgSrc } from "./utils.js";
+import { html } from "lit/static-html.js";
 
-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>',
-);
+export const CLOSE_SVG = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <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"
+      fill="currentColor"
+    />
+  </svg>
+`;

package/src/assets/diconnect.svg.ts

@@ -1,5 +1,17 @@
-import { encodeSvgToImgSrc } from "./utils.js";
+import { html } from "lit/static-html.js";
 
-export const DISCONNECT_SVG = encodeSvgToImgSrc(
-  '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="8" fill="#DDDDDD"/><path d="M20.375 16.875H14.25V15.125H20.375L19.5 13.375H21.25L23 16L21.25 18.625H19.5L20.375 16.875ZM20.9509 11.051L19.7128 12.2886C19.226 11.8 18.6473 11.4125 18.0101 11.1484C17.3729 10.8844 16.6897 10.749 16 10.75C13.1006 10.75 10.75 13.1006 10.75 16C10.75 18.8994 13.1006 21.25 16 21.25C17.4107 21.25 18.7309 20.6923 19.71 19.7147L20.9462 20.9532C20.297 21.6031 19.5259 22.1184 18.6771 22.4696C17.8283 22.8209 16.9186 23.0011 16 23C12.1341 23 9 19.8659 9 16C9 12.1341 12.1341 9 16 9C17.8816 9 19.647 9.74667 20.9509 11.051Z" fill="#666666"/></svg>',
-);
+export const DISCONNECT_SVG = html`
+  <svg
+    width="32"
+    height="32"
+    viewBox="3 3 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <path
+      d="M20.375 16.875H14.25V15.125H20.375L19.5 13.375H21.25L23 16L21.25 18.625H19.5L20.375 16.875ZM20.9509 11.051L19.7128 12.2886C19.226 11.8 18.6473 11.4125 18.0101 11.1484C17.3729 10.8844 16.6897 10.749 16 10.75C13.1006 10.75 10.75 13.1006 10.75 16C10.75 18.8994 13.1006 21.25 16 21.25C17.4107 21.25 18.7309 20.6923 19.71 19.7147L20.9462 20.9532C20.297 21.6031 19.5259 22.1184 18.6771 22.4696C17.8283 22.8209 16.9186 23.0011 16 23C12.1341 23 9 19.8659 9 16C9 12.1341 12.1341 9 16 9C17.8816 9 19.647 9.74667 20.9509 11.051Z"
+      fill="currentColor"
+    />
+  </svg>
+`;

package/src/assets/left.svg.ts

@@ -1,5 +1,17 @@
-import { encodeSvgToImgSrc } from "./utils.js";
+import { html } from "lit/static-html.js";
 
-export const LEFT_SVG = encodeSvgToImgSrc(
-  '<svg width="8" height="14" viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><path d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z" stroke="#1E1E1E" stroke-width="1"/></svg>',
-);
+export const LEFT_SVG = html`
+  <svg
+    width="8"
+    height="14"
+    viewBox="0 0 8 14"
+    xmlns="http://www.w3.org/2000/svg"
+    class="primary-icon"
+  >
+    <path
+      d="M6.74554 13.5C6.54646 13.5 6.35454 13.4177 6.21275 13.2695L0.720203 7.55253C0.426599 7.24573 0.426599 6.75035 0.720203 6.44355L6.21275 0.725059C6.50779 0.422747 6.98185 0.42574 7.27402 0.729549C7.5662 1.03485 7.56763 1.52723 7.27832 1.83404L2.31999 6.99729L7.27975 12.162C7.49459 12.3865 7.55904 12.7233 7.44303 13.0166C7.32415 13.3084 7.0506 13.5 6.74554 13.5Z"
+      fill="currentColor"
+      stroke="currentColor"
+    />
+  </svg>
+`;

package/src/assets/retry.svg.ts

@@ -1,5 +1,16 @@
-import { encodeSvgToImgSrc } from "./utils.js";
+import { html } from "lit/static-html.js";
 
-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>',
-);
+export const RETRY_SVG = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    class="primary-icon"
+  >
+    <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"
+    />
+  </svg>
+`;

package/src/assets/swap.svg.ts

@@ -0,0 +1,37 @@
+import { html } from "lit/static-html.js";
+
+export const SWAP_SVG = html`
+  <svg
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    xmlns="http://www.w3.org/2000/svg"
+    class="secondary-icon"
+    stroke="currentColor"
+  >
+    <path
+      d="M9.30688 5.22537L11.1669 3.36536L9.30688 1.50537"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2.16699 3.36523H11.167"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.02698 6.77539L2.16699 8.63541L4.02698 10.4954"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.167 8.63525H2.16699"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;

package/src/components/button-pill.ts

@@ -31,7 +31,8 @@ export class ButtonPill extends LitElement {
       background: var(--btn-secondary);
     }
 
-    button ::slotted(img) {
+    button ::slotted(img),
+    button ::slotted(svg) {
       width: 0.8rem;
       height: 0.8rem;
       margin-right: 0.5rem;

package/src/components/button.ts

@@ -36,7 +36,8 @@ export class Button extends LitElement {
       background: var(--btn-primary);
     }
 
-    button ::slotted(img) {
+    button ::slotted(img),
+    button ::slotted(svg) {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;

package/src/components/dialog.ts

@@ -15,23 +15,25 @@ export class Dialog extends LitElement {
       <div
         class="header text-bold fs-lg ${this.header ? "header-divider" : ""}"
       >
-        <img
+        <div
           class="back ${this.canBack !== undefined ? "active" : ""}"
-          src=${LEFT_SVG}
           @click=${() => {
             this.dispatchEvent(new Event("back"));
           }}
-        />
+        >
+          ${LEFT_SVG}
+        </div>
         ${this.header}
-        <img
+        <span
           class="close active"
-          src=${CLOSE_SVG}
           @click=${() => {
             this.dispatchEvent(
               new Event("close", { bubbles: true, composed: true }),
             );
           }}
-        />
+        >
+          ${CLOSE_SVG}
+        </span>
       </div>
       <div class="body">
         <slot></slot>
@@ -40,6 +42,9 @@ export class Dialog extends LitElement {
   }
 
   static styles = css`
+    .primary-icon {
+      color: var(--icon-primary);
+    }
     .text-bold {
       font-weight: bold;
     }
@@ -71,16 +76,16 @@ export class Dialog extends LitElement {
       border-bottom: 1px solid var(--divider);
     }
 
-    .close,
-    .back {
+    .close svg,
+    .back svg {
       width: 0.8rem;
       height: 0.8rem;
       opacity: 0;
       transition: opacity 0.15s ease-in-out;
     }
 
-    .close.active,
-    .back.active {
+    .close.active svg,
+    .back.active svg {
       opacity: 1;
       cursor: pointer;
     }

package/src/connector/index.ts

@@ -2,6 +2,7 @@ import { ccc } from "@ckb-ccc/ccc";
 import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Ref, createRef, ref } from "lit/directives/ref.js";
+import { SelectClientEvent } from "../scenes/connected.js";
 import { ConnectedEvent } from "../scenes/selecting/index.js";
 import { SignersController } from "../signers/index.js";
 
@@ -15,6 +16,8 @@ export class WebComponentConnector extends LitElement {
   public preferredNetworks?: ccc.NetworkPreference[];
   @property()
   public signersController?: ccc.SignersController;
+  @state()
+  public clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
 
   @state()
   public client: ccc.Client = new ccc.ClientPublicTestnet();
@@ -145,7 +148,10 @@ export class WebComponentConnector extends LitElement {
               <ccc-connected-scene
                 .wallet=${this.wallet}
                 .signer=${this.signer.signer}
+                .clientOptions=${this.clientOptions}
                 @disconnect=${() => this.disconnect()}
+                @select-client=${(e: SelectClientEvent) =>
+                  this.setClient(e.client)}
                 ${ref(this.bodyRef)}
               ></ccc-connected-scene>
             `

package/src/scenes/connected.ts

@@ -1,10 +1,18 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { CKB_SVG } from "../assets/chains/index.js";
 import { DISCONNECT_SVG } from "../assets/diconnect.svg.js";
+import { SWAP_SVG } from "../assets/swap.svg.js";
 import { signerTypeToIcon } from "./selecting/signers.js";
 
+export class SelectClientEvent extends Event {
+  constructor(public client: ccc.Client) {
+    super("select-client");
+  }
+}
+
 export function formatString(
   str: string | undefined,
   l = 9,
@@ -22,6 +30,8 @@ export class ConnectedScene extends LitElement {
   public wallet?: ccc.Wallet;
   @property()
   public signer?: ccc.Signer;
+  @property()
+  public clientOptions?: { icon?: string; client: ccc.Client; name: string }[];
 
   @state()
   private recommendedAddress?: string;
@@ -29,6 +39,8 @@ export class ConnectedScene extends LitElement {
   private internalAddress?: string;
   @state()
   private balance?: ccc.Num;
+  @state()
+  private selectingClient = false;
 
   willUpdate(changedProperties: PropertyValues<this>): void {
     if (
@@ -53,61 +65,89 @@ export class ConnectedScene extends LitElement {
       return html`<div></div>`;
     }
 
-    return html`
-      <ccc-dialog>
-        <div class="position-relative">
-          <img
-            class="connecting-wallet-icon"
-            src=${wallet.icon}
-            alt=${wallet.name}
-          />
-          <img
-            class="connected-type-icon"
-            src=${signerTypeToIcon(signer.type)}
-            alt=${signer.type}
-          />
-        </div>
-
-        <ccc-copy-button
-          value=${recommendedAddress}
-          class="text-bold fs-xl mt-2"
-        >
-          ${formatString(recommendedAddress)}
-        </ccc-copy-button>
-        <div class="text-bold fs-md">
-          ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
-        </div>
-        <ccc-copy-button
-          value=${internalAddress}
-          class="text-bold text-tip fs-md"
-          style="margin-top: 0.5rem"
-        >
-          ${formatString(internalAddress, 11, 9)}
-        </ccc-copy-button>
-
-        <ccc-button
-          class="mt-2"
-          @click=${() => this.dispatchEvent(new Event("disconnect"))}
-        >
-          <img src=${DISCONNECT_SVG} alt="disconnect" />
-          Disconnect
-        </ccc-button>
-
-        <div class="switch-btn-container">
-          <div class="switch-line"></div>
-          <div class="switch-content ml-2 mr-2 fs-sm">
+    const body = (() => {
+      if (!this.selectingClient || !this.clientOptions) {
+        return html`
+          <div class="position-relative">
             <img
-              class="mr-1 sm-chain-logo"
-              src=${CKB_SVG}
-              alt="Nervos Network"
+              class="connecting-wallet-icon"
+              src=${wallet.icon}
+              alt=${wallet.name}
             />
-            ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
-            ${["ckb", "ckt"].includes(signer.client.addressPrefix)
-              ? ""
-              : ` ${signer.client.addressPrefix}`}
+            <img
+              class="connected-type-icon"
+              src=${signerTypeToIcon(signer.type)}
+              alt=${signer.type}
+            />
+          </div>
+
+          <ccc-copy-button
+            value=${recommendedAddress}
+            class="text-bold fs-xl mt-2"
+          >
+            ${formatString(recommendedAddress)}
+          </ccc-copy-button>
+          <div class="text-bold fs-md">
+            ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
           </div>
-          <div class="switch-line"></div>
-        </div>
+          <ccc-copy-button
+            value=${internalAddress}
+            class="text-bold text-tip fs-md"
+            style="margin-top: 0.5rem"
+          >
+            ${formatString(internalAddress, 11, 9)}
+          </ccc-copy-button>
+
+          <ccc-button
+            class="mt-2"
+            @click=${() => this.dispatchEvent(new Event("disconnect"))}
+          >
+            ${DISCONNECT_SVG}
+            Disconnect
+          </ccc-button>
+
+          <div
+            class="switch-btn-container ${this.clientOptions
+              ? "cursor-pointer"
+              : ""}"
+            @click=${() => (this.selectingClient = Boolean(this.clientOptions))}
+          >
+            <div class="switch-line"></div>
+            <div class="switch-content ml-2 mr-2 fs-sm">
+              <img class="sm-chain-logo" src=${CKB_SVG} alt="Nervos Network" />
+              ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+              ${["ckb", "ckt"].includes(signer.client.addressPrefix)
+                ? ""
+                : ` ${signer.client.addressPrefix}`}
+              ${this.clientOptions ? SWAP_SVG : undefined}
+            </div>
+            <div class="switch-line"></div>
+          </div>
+        `;
+      }
+
+      return repeat(
+        this.clientOptions,
+        ({ name }) => name,
+        ({ client, name, icon }) => html`
+          <ccc-button
+            class="mt-1"
+            @click=${() => this.dispatchEvent(new SelectClientEvent(client))}
+          >
+            <img src=${icon ?? CKB_SVG} alt=${name} />
+            ${name}
+          </ccc-button>
+        `,
+      );
+    })();
+
+    return html`
+      <ccc-dialog
+        header=${this.selectingClient ? "Select Network" : undefined}
+        ?canBack=${this.selectingClient}
+        @back=${() => (this.selectingClient = false)}
+      >
+        ${body}
       </ccc-dialog>
     `;
   }
@@ -119,6 +159,14 @@ export class ConnectedScene extends LitElement {
       flex-direction: column;
       align-items: center;
     }
+
+    .primary-icon {
+      color: var(--icon-primary);
+    }
+    .secondary-icon {
+      color: var(--icon-secondary);
+    }
+
     .text-bold {
       font-weight: bold;
     }
@@ -143,6 +191,9 @@ export class ConnectedScene extends LitElement {
     .mt-2 {
       margin-top: 1rem;
     }
+    .ml-1 {
+      margin-left: 0.7em;
+    }
     .ml-2 {
       margin-left: 1em;
     }
@@ -180,9 +231,14 @@ export class ConnectedScene extends LitElement {
       align-items: center;
     }
 
+    .cursor-pointer {
+      cursor: pointer;
+    }
+
     .switch-content {
       display: flex;
       align-items: center;
+      gap: 0.7rem;
     }
 
     .switch-line {

package/src/scenes/selecting/connecting.ts

@@ -31,7 +31,8 @@ export function generateConnectingScene(
         class="mt-2"
         @click=${() => onSignerSelected(wallet, signer)}
       >
-        <img src=${RETRY_SVG} alt="retry" />
+
+        ${RETRY_SVG}
         Try again
       </ccc-button-pill>
     `,

package/src/scenes/selecting/index.ts

@@ -122,6 +122,10 @@ export class SelectingScene extends LitElement {
   };
 
   static styles = css`
+    .primary-icon {
+      color: var(--icon-primary);
+    }
+
     :host {
       display: block;
     }