@ckb-ccc/connector 0.0.4-alpha.7 → 0.0.4

package/src/connector/index.ts

@@ -1,43 +1,171 @@
 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 { 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";
 
 @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 wallet?: ccc.Wallet;
-  @property()
+  public client: ccc.Client = new ccc.ClientPublicTestnet();
+  public setClient(client: ccc.Client) {
+    this.client = client;
+  }
+
+  @state()
+  private walletName?: string;
+  @state()
+  private signerType?: ccc.SignerType;
+  @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;
+  @state()
   public signer?: ccc.SignerInfo;
-  @property()
-  public status: ConnectorStatus = ConnectorStatus.SelectingSigner;
+  private canConnect = false;
+  private prepareSigner() {
+    (async () => {
+      if (!this.selectedSigner) {
+        this.wallet = undefined;
+        this.signer = undefined;
+        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();
+    })();
+  }
+
+  public disconnect() {
+    this.walletName = undefined;
+    this.wallet = undefined;
+    this.signerType = undefined;
+    this.signer = undefined;
+    this.saveConnection();
+  }
+
+  private loadConnection() {
+    const {
+      signerType,
+      walletName,
+    }: { signerType?: ccc.SignerType; walletName?: string } = JSON.parse(
+      window.localStorage.getItem("ccc-connection-info") ?? "{}",
+    );
+
+    this.signerType = signerType;
+    this.walletName = walletName;
+  }
+
+  private saveConnection() {
+    window.localStorage.setItem(
+      "ccc-connection-info",
+      JSON.stringify({
+        signerType: this.signerType,
+        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.updateWallet();
+    }
+    if (
+      changedProperties.has("signerType") ||
+      changedProperties.has("selectedWallet")
+    ) {
+      this.updateSigner();
+    }
+    if (changedProperties.has("selectedSigner")) {
+      this.prepareSigner();
+    }
 
-    const client = new ccc.ClientPublicTestnet();
-    const uniSatSigner = ccc.UniSat.getUniSatSigner(client);
+    this.dispatchEvent(new WillUpdateEvent());
+  }
+
+  private reloadSigners() {
+    this.wallets = [];
+
+    (async () => {
+      if (!this.selectedSigner) {
+        return;
+      }
+
+      const newSigner = await this.selectedSigner.signer.replaceClient(
+        this.client,
+      );
+      if (newSigner) {
+        this.selectedSigner = {
+          ...this.selectedSigner,
+          signer: newSigner,
+        };
+      } else {
+        this.disconnect();
+      }
+    })();
+
+    this.resetListeners.forEach((listener) => listener());
+    this.resetListeners = [];
+
+    const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
       this.addSigner("UniSat", 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",
@@ -47,59 +175,68 @@ export class WebComponentConnector extends LitElement {
       );
     }
 
-    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}`,
+          signer.detail.info.icon,
+          ccc.SignerType.EVM,
+          signer,
+        );
+      }),
+    );
   }
 
-  addSigner(
+  private addSigner(
     name: 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 !== name) {
+        return wallet;
+      }
+
+      updated = true;
+      return {
+        ...wallet,
+        signers: [...wallet.signers, { type, signer }],
+      };
+    });
+
+    if (!updated) {
+      wallets.push({
+        name,
+        icon,
+        signers: [{ type, signer }],
+      });
     }
+
+    this.wallets = wallets;
   }
 
   render() {
     const [title, body] = (() => {
-      if (!this.wallet) {
+      if (!this.selectedWallet) {
         return generateWalletsScene(
           this.wallets,
-          this.onWalletSelected,
-          this.onSignerSelected,
+          this.signerSelectedHandler,
+          this.signerSelectedHandler,
         );
       }
-      if (!this.signer) {
-        return generateSignersScene(this.wallet, this.onSignerSelected);
+      if (!this.selectedSigner) {
+        return generateSignersScene(
+          this.selectedWallet,
+          this.signerSelectedHandler,
+        );
       }
       return generateConnectingScene(
-        this.wallet,
-        this.signer,
-        this.onSignerSelected,
+        this.selectedWallet,
+        this.selectedSigner,
+        this.signerSelectedHandler,
       );
     })();
 
@@ -120,7 +257,7 @@ export class WebComponentConnector extends LitElement {
         class="background"
         @click=${(event: Event) => {
           if (event.target === event.currentTarget) {
-            this.onClose();
+            this.closedHandler();
           }
         }}
       >
@@ -128,31 +265,27 @@ 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 (this.signer === undefined) {
+      this.disconnect();
+    }
+    this.isOpen = false;
   };
 
-  private onSignerSelected = (wallet: ccc.Wallet, signer: ccc.SignerInfo) => {
-    this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Connecting));
-    this.dispatchEvent(new SignerChangedEvent(wallet, signer));
-
-    (async () => {
-      await signer.signer.connect();
-      this.dispatchEvent(new StatusChangedEvent(ConnectorStatus.Idle));
-      this.dispatchEvent(new CloseEvent());
-    })();
+  private signerSelectedHandler = (
+    wallet?: ccc.Wallet,
+    signer?: ccc.SignerInfo,
+  ) => {
+    this.walletName = wallet?.name;
+    this.signerType = signer?.type;
+    this.canConnect = true;
   };
 
   static styles = css`

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

@@ -5,7 +5,10 @@ import { RETRY_SVG } from "../assets/retry.svg";
 export function generateConnectingScene(
   wallet: ccc.Wallet,
   signer: ccc.SignerInfo,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  onSignerSelected: (
+    wallet: ccc.Wallet | undefined,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
   return [
     wallet.name,

package/src/scenes/signers.ts

@@ -2,6 +2,7 @@ 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 { WalletWithSigners } from "../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
@@ -11,8 +12,11 @@ export function signerTypeToIcon(type: ccc.SignerType): string {
 }
 
 export function generateSignersScene(
-  wallet: ccc.Wallet,
-  onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
+  wallet: WalletWithSigners,
+  onSignerSelected: (
+    wallet: ccc.Wallet | undefined,
+    signer: ccc.SignerInfo,
+  ) => unknown,
 ) {
   return [
     "Select a Chain",

package/src/scenes/wallets.ts

@@ -1,9 +1,10 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
+import { WalletWithSigners } from "../types";
 
 export function generateWalletsScene(
-  wallets: ccc.Wallet[],
+  wallets: WalletWithSigners[],
   onWalletSelected: (wallet: ccc.Wallet) => unknown,
   onSignerSelected: (wallet: ccc.Wallet, signer: ccc.SignerInfo) => unknown,
 ) {

package/src/types/index.ts

@@ -0,0 +1,5 @@
+import { ccc } from "@ckb-ccc/ccc";
+
+export type WalletWithSigners = ccc.Wallet & {
+  signers: ccc.SignerInfo[];
+};

package/tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "incremental": true,
+    "allowJs": true,
+    "importHelpers": false,
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+    "alwaysStrict": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.commonjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist.commonjs"
+  }
+}

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",
-}