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

package/src/connector/index.ts

@@ -1,105 +1,243 @@
 import { ccc } from "@ckb-ccc/ccc";
-import { LitElement, css, html } from "lit";
+import { LitElement, PropertyValues, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { CLOSE_SVG } from "../assets/close.svg";
+import { JOY_ID_SVG } from "../assets/joy-id.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
-import { CloseEvent, SignerChangedEvent, StatusChangedEvent } from "../events";
+import { WillUpdateEvent } from "../events";
 import {
   generateConnectingScene,
   generateSignersScene,
   generateWalletsScene,
 } from "../scenes";
-import { ConnectorStatus } from "../status";
+import { WalletWithSigners } from "../types";
+
+enum Scene {
+  SelectingWallets = "SelectingWallets",
+  SelectingSigners = "SelectingSigners",
+  Connecting = "Connecting",
+  Connected = "Connected",
+}
 
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
-  private wallets: ccc.Wallet[] = [];
-  private existedEip6963: string[] = [];
+  private wallets: WalletWithSigners[] = [];
 
-  @property()
+  private resetListeners: (() => void)[] = [];
+
+  @state()
   public isOpen: boolean = false;
+  public setIsOpen(isOpen: boolean) {
+    this.isOpen = isOpen;
+  }
 
   @property()
+  public client: ccc.Client = new ccc.ClientPublicTestnet();
+  public setClient(client: ccc.Client) {
+    this.client = client;
+  }
+
+  @state()
+  private scene: Scene = Scene.SelectingWallets;
+  @state()
+  private selectedWallet?: WalletWithSigners;
+  @state()
+  private selectedSigner?: ccc.SignerInfo;
+
+  @state()
+  private walletName?: string;
+  @state()
+  private signerName?: string;
+  @state()
   public wallet?: ccc.Wallet;
-  @property()
+  @state()
   public signer?: ccc.SignerInfo;
-  @property()
-  public status: ConnectorStatus = ConnectorStatus.SelectingSigner;
+  private prepareSigner() {
+    (async () => {
+      if (this.signer && (await this.signer.signer.isConnected())) {
+        this.scene = Scene.Connected;
+        return;
+      }
+
+      this.wallet = undefined;
+      this.signer = undefined;
+      this.scene = Scene.SelectingWallets;
+    })();
+  }
+
+  public disconnect() {
+    this.signer?.signer?.disconnect();
+    this.walletName = undefined;
+    this.signerName = undefined;
+    this.saveConnection();
+  }
+
+  private loadConnection() {
+    const {
+      signerName,
+      walletName,
+    }: { signerName?: string; walletName?: string } = JSON.parse(
+      window.localStorage.getItem("ccc-connection-info") ?? "{}",
+    );
+
+    this.signerName = signerName;
+    this.walletName = walletName;
+  }
+
+  private saveConnection() {
+    window.localStorage.setItem(
+      "ccc-connection-info",
+      JSON.stringify({
+        signerName: this.signerName,
+        walletName: this.walletName,
+      }),
+    );
+  }
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.loadConnection();
+    this.reloadSigners();
+  }
+
+  willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("client")) {
+      this.reloadSigners();
+    }
+    if (
+      changedProperties.has("walletName") ||
+      changedProperties.has("wallets")
+    ) {
+      this.wallet = this.wallets.find(({ name }) => name === this.walletName);
+    }
+    if (
+      changedProperties.has("signerName") ||
+      changedProperties.has("wallet")
+    ) {
+      const wallet = this.wallets.find(({ name }) => name === this.walletName);
+      this.signer = wallet?.signers.find(
+        ({ name }) => name === this.signerName,
+      );
+    }
+    if (changedProperties.has("signer")) {
+      this.prepareSigner();
+    }
+
+    this.dispatchEvent(new WillUpdateEvent());
+  }
+
+  private reloadSigners() {
+    this.wallets = [];
+
+    (async () => {
+      if (!this.signer) {
+        return;
+      }
 
-    const client = new ccc.ClientPublicTestnet();
-    const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
+      this.signer = {
+        ...this.signer,
+        signer: await this.signer.signer.replaceClient(this.client),
+      };
+    })();
+
+    this.resetListeners.forEach((listener) => listener());
+    this.resetListeners = [];
+
+    ccc.JoyId.getJoyIdSigners(this.client).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(client);
+    const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
     if (okxBitcoinSigner) {
       this.addSigner(
         "OKX Wallet",
+        "BTC",
         OKX_SVG,
         ccc.SignerType.BTC,
         okxBitcoinSigner,
       );
     }
 
-    const eip6963Manager = new ccc.Eip6963.SignerFactory(client);
-    eip6963Manager.subscribeSigners((signer) => {
-      if (this.existedEip6963.indexOf(signer.detail.info.uuid) !== -1) {
-        return;
-      }
-      this.existedEip6963.push(signer.detail.info.uuid);
-      this.addSigner(
-        `${signer.detail.info.name}`,
-        signer.detail.info.icon,
-        ccc.SignerType.EVM,
-        signer,
-      );
-    });
+    const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
+    this.resetListeners.push(
+      eip6963Manager.subscribeSigners((signer) => {
+        this.addSigner(
+          `${signer.detail.info.name}`,
+          "EVM",
+          signer.detail.info.icon,
+          ccc.SignerType.EVM,
+          signer,
+        );
+      }),
+    );
   }
 
-  addSigner(
-    name: string,
+  private addSigner(
+    walletName: string,
+    signerName: string,
     icon: string,
     type: ccc.SignerType,
     signer: ccc.Signer,
   ) {
-    const wallet = this.wallets.find((wallet) => wallet.name === name);
-    if (wallet) {
-      wallet.signers.push({ type, signer });
-      this.wallets = [...this.wallets];
-    } else {
-      this.wallets = [
-        ...this.wallets,
-        {
-          name,
-          icon,
-          signers: [{ type, signer }],
-        },
-      ];
+    let updated = false;
+    const wallets = this.wallets.map((wallet) => {
+      if (wallet.name !== walletName) {
+        return wallet;
+      }
+
+      updated = true;
+      return {
+        ...wallet,
+        signers: [...wallet.signers, { type, name: signerName, signer }],
+      };
+    });
+
+    if (!updated) {
+      wallets.push({
+        name: walletName,
+        icon,
+        signers: [{ type, name: signerName, signer }],
+      });
     }
+
+    this.wallets = wallets;
   }
 
   render() {
     const [title, body] = (() => {
-      if (!this.wallet) {
+      if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
         return generateWalletsScene(
           this.wallets,
-          this.onWalletSelected,
-          this.onSignerSelected,
+          (wallet) => {
+            this.selectedWallet = wallet;
+            this.scene = Scene.SelectingSigners;
+          },
+          this.signerSelectedHandler,
         );
       }
-      if (!this.signer) {
-        return generateSignersScene(this.wallet, this.onSignerSelected);
+      if (this.scene === Scene.SelectingSigners || !this.selectedSigner) {
+        return generateSignersScene(
+          this.selectedWallet,
+          this.signerSelectedHandler,
+        );
       }
       return generateConnectingScene(
-        this.wallet,
-        this.signer,
-        this.onSignerSelected,
+        this.selectedWallet,
+        this.selectedSigner,
+        this.signerSelectedHandler,
       );
     })();
 
@@ -111,7 +249,6 @@ export class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
-          --btn-icon: #e9e4de;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -120,7 +257,7 @@ export class WebComponentConnector extends LitElement {
         class="background"
         @click=${(event: Event) => {
           if (event.target === event.currentTarget) {
-            this.onClose();
+            this.closedHandler();
           }
         }}
       >
@@ -128,30 +265,45 @@ export class WebComponentConnector extends LitElement {
           <div class="header text-bold fs-big">
             <div class="back"></div>
             ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.onClose} />
+            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
           </div>
           <div class="body">${body}</div>
         </div>
       </div>`;
   }
 
-  private onClose = () => {
-    this.dispatchEvent(new SignerChangedEvent());
-    this.dispatchEvent(new CloseEvent());
-  };
-
-  private onWalletSelected = (wallet: ccc.Wallet) => {
-    this.dispatchEvent(new SignerChangedEvent(wallet, this.signer));
+  private closedHandler = () => {
+    if (
+      [
+        Scene.SelectingSigners,
+        Scene.SelectingWallets,
+        Scene.Connecting,
+      ].includes(this.scene)
+    ) {
+      this.scene = Scene.SelectingWallets;
+      this.selectedSigner = undefined;
+      this.selectedWallet = undefined;
+    }
+    this.isOpen = false;
   };
 
-  private onSignerSelected = (wallet: ccc.Wallet, signer: ccc.SignerInfo) => {
-    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
-    this.dispatchEvent(new SignerChangedEvent(wallet, signer));
-
+  private signerSelectedHandler = (
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
+  ) => {
+    this.scene = Scene.Connecting;
+    this.selectedWallet = wallet;
+    this.selectedSigner = signer;
     (async () => {
       await signer.signer.connect();
-      this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
-      this.dispatchEvent(new CloseEvent());
+      if (!(await signer.signer.isConnected())) {
+        return;
+      }
+      this.scene = Scene.Connected;
+      this.walletName = wallet.name;
+      this.signerName = signer.name;
+      this.saveConnection();
+      this.closedHandler();
     })();
   };
 
@@ -252,8 +404,6 @@ export class WebComponentConnector extends LitElement {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
-      border-radius: 0.4rem;
-      background: var(--btn-icon);
     }
 
     .btn-primary:hover {
@@ -279,8 +429,6 @@ export class WebComponentConnector extends LitElement {
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
-      border-radius: 0.8rem;
-      background: var(--btn-icon);
     }
 
     .connecting-wallet-icon {

package/src/events/index.ts

@@ -1,23 +1,5 @@
-import { ccc } from "@ckb-ccc/ccc";
-import { ConnectorStatus } from "../status";
-
-export class SignerChangedEvent extends Event {
-  constructor(
-    public readonly wallet?: ccc.Wallet,
-    public readonly signerInfo?: ccc.SignerInfo,
-  ) {
-    super("signerChanged", { composed: true });
-  }
-}
-
-export class StatusChangedEvent extends Event {
-  constructor(public readonly status: ConnectorStatus) {
-    super("statusChanged", { composed: true });
-  }
-}
-
-export class CloseEvent extends Event {
+export class WillUpdateEvent extends Event {
   constructor() {
-    super("close", { composed: true });
+    super("willUpdate", { composed: true });
   }
 }

package/src/scenes/connecting.ts

@@ -1,11 +1,15 @@
 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, signer: ccc.SignerInfo) => unknown,
+  onSignerSelected: (
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
   return [
     wallet.name,

package/src/scenes/signers.ts

@@ -1,18 +1,23 @@
 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: ccc.Wallet,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  wallet: WalletWithSigners,
+  onSignerSelected: (
+    wallet: WalletWithSigners,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
   return [
     "Select a Chain",
@@ -31,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,32 +1,79 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
+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: ccc.Wallet[],
-  onWalletSelected: (wallet: ccc.Wallet) => unknown,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  wallets: WalletWithSigners[],
+  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}
+    `,
   ];
 }

package/src/types/index.ts

@@ -0,0 +1,11 @@
+import { ccc } from "@ckb-ccc/ccc";
+
+export type WalletWithSigners = ccc.Wallet & {
+  signers: ccc.SignerInfo[];
+};
+
+export interface WalletInfo {
+  name: string;
+  icon: string;
+  downloadLink: string;
+}

package/dist/status/index.d.ts

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

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

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

package/dist/status/index.js

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

package/src/status/index.ts

@@ -1,5 +0,0 @@
-export enum ConnectorStatus {
-  SelectingSigner = "SelectingSigner",
-  Connecting = "Connecting",
-  Idle = "Idle",
-}