@ckb-ccc/connector 0.0.4 → 0.0.5-alpha.1

package/dist/types/index.d.ts

@@ -2,4 +2,9 @@ import { ccc } from "@ckb-ccc/ccc";
 export type WalletWithSigners = ccc.Wallet & {
     signers: ccc.SignerInfo[];
 };
+export interface WalletInfo {
+    name: string;
+    icon: string;
+    downloadLink: string;
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,MAAM,GAAG;IAC3C,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,MAAM,GAAG;IAC3C,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB"}

package/package.json

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

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

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "../utils";
+
+export const CKB_SVG = encodeSvgToImgSrc(
+  '<svg width="668" height="666.66669" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon points="170.265,206.318 223.416,206.318 223.416,93.897 264.161,93.897 170.265,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /><polygon points="324.79,112.422 284.046,112.422 377.941,206.318 377.941,0 324.79,0 " transform="matrix(1.8256046,0,0,1.8256046,-166.4037,144.47964)" /></svg>',
+);

package/src/assets/chains/index.ts

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

package/src/assets/joy-id.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const JOY_ID_SVG = encodeSvgToImgSrc(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewBox="0 0 420 420" fill="none"><circle cx="210" cy="210" r="210" fill="#333333"/><path d="M271.127 204.419C279.096 204.419 285.555 197.959 285.555 189.991C285.555 182.022 279.096 175.562 271.127 175.562C263.159 175.562 256.699 182.022 256.699 189.991C256.699 197.959 263.159 204.419 271.127 204.419Z" fill="#8CDD00"/><path d="M173.995 175.562C166.773 175.562 160.91 181.425 160.91 188.648C160.91 195.87 166.773 201.733 173.995 201.733C181.218 201.733 187.081 195.87 187.081 188.648C187.064 181.425 181.218 175.562 173.995 175.562Z" fill="#8CDD00"/><path d="M213.43 164.836L198.969 233.586C197.626 240.006 191.878 244.657 185.327 244.657C181.086 244.657 177.139 242.757 174.47 239.465C172.39 236.894 171.342 233.734 171.391 230.491L145.27 237.238C146.383 244.084 149.2 250.618 153.687 256.203C161.434 265.816 172.963 271.335 185.311 271.335C204.407 271.335 221.111 257.775 225.041 239.089L240.665 164.852H213.43V164.836Z" fill="#C1C1C1"/><path d="M335.83 115.983C327.068 105.19 314.065 99 300.161 99H267.981L262.363 125.662H300.161C305.991 125.662 311.445 128.249 315.113 132.786C318.782 137.306 320.207 143.185 319.011 148.884L313.394 175.562H340.645L345.116 154.387C347.965 140.778 344.592 126.775 335.83 115.983Z" fill="#8CDD00"/><path d="M295.216 261.999C291.285 280.669 274.597 294.212 255.518 294.212H226.875L221.258 320.874H255.518C287.126 320.874 314.803 298.421 321.304 267.485L326.021 245.049H298.77L295.216 261.999Z" fill="#8CDD00"/><path d="M98.8061 152.39L93.9258 175.58H121.177L124.894 157.892C128.825 139.223 145.513 125.679 164.592 125.679H192.04L197.657 99.0176H164.592C132.985 99.0012 105.308 121.454 98.8061 152.39Z" fill="#8CDD00"/><path d="M104.998 287.072C101.33 282.552 99.9049 276.673 101.1 270.974L106.079 247.342L77.2555 254.777L74.9956 265.487C72.1296 279.097 75.5196 293.099 84.2813 303.891C93.0429 314.684 106.046 320.874 119.95 320.874H150.935L156.553 294.212H119.95C114.12 294.196 108.666 291.608 104.998 287.072Z" fill="#8CDD00"/></svg>',
+);

package/src/assets/left.svg.ts

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

package/src/assets/metamask.svg.ts

@@ -0,0 +1,5 @@
+import { encodeSvgToImgSrc } from "./utils";
+
+export const METAMASK_SVG = encodeSvgToImgSrc(
+  `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 318.6 318.6"><style>.st1,.st6{fill:#e4761b;stroke:#e4761b;stroke-linecap:round;stroke-linejoin:round}.st6{fill:#f6851b;stroke:#f6851b}</style><path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round" d="m274.1 35.5-99.5 73.9L193 65.8z"/><path d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z" class="st1"/><path d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z" class="st1"/><path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round" d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z"/><path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round" d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z"/><path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round" d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z"/><path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round" d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z"/><path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z" class="st6"/><path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round" d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z"/><path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round" d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z"/><path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round" d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z"/><path d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z" class="st6"/><script xmlns=""/></svg>`,
+);

package/src/connector/index.ts

@@ -1,7 +1,10 @@
 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 { CLOSE_SVG } from "../assets/close.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
+import { LEFT_SVG } from "../assets/left.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
 import { WillUpdateEvent } from "../events";
@@ -12,6 +15,13 @@ import {
 } from "../scenes";
 import { WalletWithSigners } from "../types";
 
+enum Scene {
+  SelectingWallets = "SelectingWallets",
+  SelectingSigners = "SelectingSigners",
+  Connecting = "Connecting",
+  Connected = "Connected",
+}
+
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
@@ -25,6 +35,11 @@ export class WebComponentConnector extends LitElement {
     this.isOpen = isOpen;
   }
 
+  @property()
+  public name?: string;
+  @property()
+  public icon?: string;
+
   @property()
   public client: ccc.Client = new ccc.ClientPublicTestnet();
   public setClient(client: ccc.Client) {
@@ -32,68 +47,49 @@ export class WebComponentConnector extends LitElement {
   }
 
   @state()
-  private walletName?: string;
-  @state()
-  private signerType?: ccc.SignerType;
+  private scene: Scene = Scene.SelectingWallets;
   @state()
   private selectedWallet?: WalletWithSigners;
-  private updateWallet() {
-    this.selectedWallet = this.wallets.find(
-      (wallet) => this.walletName === wallet.name,
-    );
-  }
   @state()
   private selectedSigner?: ccc.SignerInfo;
-  private updateSigner() {
-    this.selectedSigner = this.selectedWallet?.signers.find(
-      ({ type }) => type === this.signerType,
-    );
-  }
+
   @state()
-  public wallet?: WalletWithSigners;
+  private walletName?: string;
+  @state()
+  private signerName?: string;
+  @state()
+  public wallet?: ccc.Wallet;
   @state()
   public signer?: ccc.SignerInfo;
-  private canConnect = false;
   private prepareSigner() {
     (async () => {
-      if (!this.selectedSigner) {
-        this.wallet = undefined;
-        this.signer = undefined;
+      if (this.signer && (await this.signer.signer.isConnected())) {
+        this.scene = Scene.Connected;
         return;
       }
 
-      if (!(await this.selectedSigner.signer.isConnected())) {
-        if (!this.canConnect) {
-          this.disconnect();
-          return;
-        }
-        await this.selectedSigner.signer.connect();
-      }
-
-      this.saveConnection();
-      this.wallet = this.selectedWallet;
-      this.signer = this.selectedSigner;
-      this.closedHandler();
+      this.wallet = undefined;
+      this.signer = undefined;
+      this.scene = Scene.SelectingWallets;
     })();
   }
 
   public disconnect() {
+    this.signer?.signer?.disconnect();
     this.walletName = undefined;
-    this.wallet = undefined;
-    this.signerType = undefined;
-    this.signer = undefined;
+    this.signerName = undefined;
     this.saveConnection();
   }
 
   private loadConnection() {
     const {
-      signerType,
+      signerName,
       walletName,
-    }: { signerType?: ccc.SignerType; walletName?: string } = JSON.parse(
+    }: { signerName?: string; walletName?: string } = JSON.parse(
       window.localStorage.getItem("ccc-connection-info") ?? "{}",
     );
 
-    this.signerType = signerType;
+    this.signerName = signerName;
     this.walletName = walletName;
   }
 
@@ -101,7 +97,7 @@ export class WebComponentConnector extends LitElement {
     window.localStorage.setItem(
       "ccc-connection-info",
       JSON.stringify({
-        signerType: this.signerType,
+        signerName: this.signerName,
         walletName: this.walletName,
       }),
     );
@@ -121,15 +117,18 @@ export class WebComponentConnector extends LitElement {
       changedProperties.has("walletName") ||
       changedProperties.has("wallets")
     ) {
-      this.updateWallet();
+      this.wallet = this.wallets.find(({ name }) => name === this.walletName);
     }
     if (
-      changedProperties.has("signerType") ||
-      changedProperties.has("selectedWallet")
+      changedProperties.has("signerName") ||
+      changedProperties.has("wallet")
     ) {
-      this.updateSigner();
+      const wallet = this.wallets.find(({ name }) => name === this.walletName);
+      this.signer = wallet?.signers.find(
+        ({ name }) => name === this.signerName,
+      );
     }
-    if (changedProperties.has("selectedSigner")) {
+    if (changedProperties.has("signer")) {
       this.prepareSigner();
     }
 
@@ -140,35 +139,47 @@ export class WebComponentConnector extends LitElement {
     this.wallets = [];
 
     (async () => {
-      if (!this.selectedSigner) {
+      if (!this.signer) {
         return;
       }
 
-      const newSigner = await this.selectedSigner.signer.replaceClient(
-        this.client,
-      );
-      if (newSigner) {
-        this.selectedSigner = {
-          ...this.selectedSigner,
-          signer: newSigner,
-        };
-      } else {
-        this.disconnect();
-      }
+      this.signer = {
+        ...this.signer,
+        signer: await this.signer.signer.replaceClient(this.client),
+      };
     })();
 
     this.resetListeners.forEach((listener) => listener());
     this.resetListeners = [];
+    const name =
+      this.name ??
+      (document.querySelector("head title") as HTMLTitleElement).text;
+    const icon =
+      this.icon ??
+      (document.querySelector('link[rel="icon"]') as HTMLLinkElement).href;
+
+    ccc.JoyId.getJoyIdSigners(this.client, name, icon).forEach(
+      ({ signer, type, name }) => {
+        this.addSigner("JoyID", name, JOY_ID_SVG, type, signer);
+      },
+    );
 
     const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
-      this.addSigner("UniSat", UNI_SAT_SVG, ccc.SignerType.BTC, uniSatSigner);
+      this.addSigner(
+        "UniSat",
+        "BTC",
+        UNI_SAT_SVG,
+        ccc.SignerType.BTC,
+        uniSatSigner,
+      );
     }
 
     const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
     if (okxBitcoinSigner) {
       this.addSigner(
         "OKX Wallet",
+        "BTC",
         OKX_SVG,
         ccc.SignerType.BTC,
         okxBitcoinSigner,
@@ -180,6 +191,7 @@ export class WebComponentConnector extends LitElement {
       eip6963Manager.subscribeSigners((signer) => {
         this.addSigner(
           `${signer.detail.info.name}`,
+          "EVM",
           signer.detail.info.icon,
           ccc.SignerType.EVM,
           signer,
@@ -189,45 +201,53 @@ export class WebComponentConnector extends LitElement {
   }
 
   private addSigner(
-    name: string,
+    walletName: string,
+    signerName: string,
     icon: string,
     type: ccc.SignerType,
     signer: ccc.Signer,
   ) {
     let updated = false;
     const wallets = this.wallets.map((wallet) => {
-      if (wallet.name !== name) {
+      if (wallet.name !== walletName) {
         return wallet;
       }
 
       updated = true;
       return {
         ...wallet,
-        signers: [...wallet.signers, { type, signer }],
+        signers: [...wallet.signers, { type, name: signerName, signer }],
       };
     });
 
     if (!updated) {
       wallets.push({
-        name,
+        name: walletName,
         icon,
-        signers: [{ type, signer }],
+        signers: [{ type, name: signerName, signer }],
       });
     }
 
     this.wallets = wallets;
   }
 
+  mainRef: Ref<HTMLDivElement> = createRef();
+  headerRef: Ref<HTMLDivElement> = createRef();
+  bodyRef: Ref<HTMLDivElement> = createRef();
+
   render() {
     const [title, body] = (() => {
-      if (!this.selectedWallet) {
+      if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
         return generateWalletsScene(
           this.wallets,
-          this.signerSelectedHandler,
+          (wallet) => {
+            this.selectedWallet = wallet;
+            this.scene = Scene.SelectingSigners;
+          },
           this.signerSelectedHandler,
         );
       }
-      if (!this.selectedSigner) {
+      if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
         return generateSignersScene(
           this.selectedWallet,
           this.signerSelectedHandler,
@@ -240,6 +260,10 @@ export class WebComponentConnector extends LitElement {
       );
     })();
 
+    const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(
+      this.scene,
+    );
+
     return html`<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -248,7 +272,6 @@ export class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
-          --btn-icon: #e9e4de;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -261,31 +284,74 @@ export class WebComponentConnector extends LitElement {
           }
         }}
       >
-        <div class="main">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
+        <div class="main" ${ref(this.mainRef)}>
+          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+            <img
+              class="back ${canBack ? "active" : ""}"
+              src=${LEFT_SVG}
+              @click=${() => {
+                if (this.scene === Scene.Connecting) {
+                  this.scene = Scene.SelectingSigners;
+                } else if (this.scene === Scene.SelectingSigners) {
+                  this.scene = Scene.SelectingWallets;
+                }
+              }}
+            />
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
+            <img
+              class="close active"
+              src=${CLOSE_SVG}
+              @click=${this.closedHandler}
+            />
           </div>
-          <div class="body">${body}</div>
+          <div class="body" ${ref(this.bodyRef)}>${body}</div>
         </div>
       </div>`;
   }
 
+  updated() {
+    if (!this.mainRef.value) {
+      return;
+    }
+    this.mainRef.value.style.height = `${
+      (this.bodyRef.value?.clientHeight ?? 0) +
+      (this.headerRef.value?.clientHeight ?? 0)
+    }px`;
+  }
+
   private closedHandler = () => {
-    if (this.signer === undefined) {
-      this.disconnect();
+    if (
+      [
+        Scene.SelectingSigners,
+        Scene.SelectingWallets,
+        Scene.Connecting,
+      ].includes(this.scene)
+    ) {
+      this.scene = Scene.SelectingWallets;
+      this.selectedSigner = undefined;
+      this.selectedWallet = undefined;
     }
     this.isOpen = false;
   };
 
   private signerSelectedHandler = (
-    wallet?: ccc.Wallet,
-    signer?: ccc.SignerInfo,
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
   ) => {
-    this.walletName = wallet?.name;
-    this.signerType = signer?.type;
-    this.canConnect = true;
+    this.scene = Scene.Connecting;
+    this.selectedWallet = wallet;
+    this.selectedSigner = signer;
+    (async () => {
+      await signer.signer.connect();
+      if (!(await signer.signer.isConnected())) {
+        return;
+      }
+      this.scene = Scene.Connected;
+      this.walletName = wallet.name;
+      this.signerName = signer.name;
+      this.saveConnection();
+      this.closedHandler();
+    })();
   };
 
   static styles = css`
@@ -345,6 +411,8 @@ export class WebComponentConnector extends LitElement {
       transform: translate(-50%, -50%);
       background: var(--background);
       border-radius: 1.2rem;
+      overflow: hidden;
+      transition: height 0.15s ease-out;
     }
 
     .header {
@@ -359,6 +427,13 @@ export class WebComponentConnector extends LitElement {
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
@@ -378,7 +453,7 @@ export class WebComponentConnector extends LitElement {
       padding: 0.75rem 1rem;
       background: var(--btn-primary);
       border-radius: 0.4rem;
-      transition: background 0.3s ease-in-out;
+      transition: background 0.15s ease-in-out;
     }
 
     .btn-primary img {
@@ -386,7 +461,6 @@ export class WebComponentConnector extends LitElement {
       height: 2rem;
       margin-right: 1rem;
       border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -399,7 +473,7 @@ export class WebComponentConnector extends LitElement {
       padding: 0.25rem 1rem;
       background: var(--btn-secondary);
       border-radius: 9999px;
-      transition: background 0.3s ease-in-out;
+      transition: background 0.15s ease-in-out;
     }
 
     .btn-secondary img {
@@ -413,7 +487,6 @@ export class WebComponentConnector extends LitElement {
       height: 4rem;
       margin-bottom: 0.5rem;
       border-radius: 0.8rem;
-      background: var(--btn-icon);
     }
 
     .connecting-wallet-icon {

package/src/scenes/connecting.ts

@@ -1,12 +1,13 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { RETRY_SVG } from "../assets/retry.svg";
+import { WalletWithSigners } from "../types";
 
 export function generateConnectingScene(
-  wallet: ccc.Wallet,
+  wallet: WalletWithSigners,
   signer: ccc.SignerInfo,
   onSignerSelected: (
-    wallet: ccc.Wallet | undefined,
+    wallet: WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
 ) {

package/src/scenes/signers.ts

@@ -1,20 +1,21 @@
 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";
+import { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
 import { WalletWithSigners } from "../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
     [ccc.SignerType.BTC]: BTC_SVG,
     [ccc.SignerType.EVM]: ETH_SVG,
+    [ccc.SignerType.CKB]: CKB_SVG,
   }[type];
 }
 
 export function generateSignersScene(
   wallet: WalletWithSigners,
   onSignerSelected: (
-    wallet: ccc.Wallet | undefined,
+    wallet: WalletWithSigners,
     signer: ccc.SignerInfo,
   ) => unknown,
 ) {
@@ -35,7 +36,7 @@ export function generateSignersScene(
             }}
           >
             <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
-            ${signer.type}
+            ${signer.name}
           </button>
         `,
       )}

package/src/scenes/wallets.ts

@@ -1,33 +1,79 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { WalletWithSigners } from "../types";
+import { METAMASK_SVG } from "../assets/metamask.svg";
+import { OKX_SVG } from "../assets/okx.svg";
+import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
+import { WalletInfo, WalletWithSigners } from "../types";
 
 export function generateWalletsScene(
   wallets: WalletWithSigners[],
-  onWalletSelected: (wallet: ccc.Wallet) => unknown,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  onWalletSelected: (wallet: WalletWithSigners) => unknown,
+  onSignerSelected: (
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
+  const recommendedWallets = [
+    {
+      name: "MetaMask",
+      icon: METAMASK_SVG,
+      downloadLink: `https://metamask.app.link/dapp/${window.location.href}`,
+    },
+    {
+      name: "OKX Wallet",
+      icon: OKX_SVG,
+      downloadLink: "https://www.okx.com/zh-hans/download",
+    },
+    {
+      name: "UniSat",
+      icon: UNI_SAT_SVG,
+      downloadLink: "https://unisat.io/",
+    },
+  ];
+
+  const missingWallets = recommendedWallets.filter(
+    (recommendedWallet) =>
+      !wallets.some((wallet) => wallet.name === recommendedWallet.name),
+  );
+
+  const additionalButtons = missingWallets.map(
+    (wallet: WalletInfo) => html`
+      <button
+        class="btn-primary mb-1"
+        @click=${() => {
+          window.open(wallet.downloadLink, "_blank");
+        }}
+      >
+        <img src=${wallet.icon} alt=${wallet.name} />
+        ${wallet.name}
+      </button>
+    `,
+  );
+
   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>
-      `,
-    ),
+    html`
+      ${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>
+        `,
+      )}
+      ${additionalButtons}
+    `,
   ];
 }