@ckb-ccc/connector 0.0.5-alpha.0 → 0.0.5-alpha.10

package/src/connector/index.ts

@@ -1,16 +1,21 @@
 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 { METAMASK_SVG } from "../assets/metamask.svg";
 import { OKX_SVG } from "../assets/okx.svg";
 import { UNI_SAT_SVG } from "../assets/uni-sat.svg";
-import { WillUpdateEvent } from "../events";
+import { ClosedEvent, WillUpdateEvent } from "../events";
 import {
   generateConnectingScene,
   generateSignersScene,
   generateWalletsScene,
 } from "../scenes";
+import { generateConnectedScene } from "../scenes/connected";
+import { generateNetworksScene } from "../scenes/networks";
 import { WalletWithSigners } from "../types";
 
 enum Scene {
@@ -18,20 +23,25 @@ enum Scene {
   SelectingSigners = "SelectingSigners",
   Connecting = "Connecting",
   Connected = "Connected",
+  SwitchingNetworks = "SwitchingNetworks",
 }
 
 @customElement("ccc-connector")
 export class WebComponentConnector extends LitElement {
   @state()
   private wallets: WalletWithSigners[] = [];
+  @property()
+  public signerFilter?: (
+    signerInfo: ccc.SignerInfo,
+    wallet: ccc.Wallet,
+  ) => Promise<boolean>;
 
   private resetListeners: (() => void)[] = [];
 
-  @state()
-  public isOpen: boolean = false;
-  public setIsOpen(isOpen: boolean) {
-    this.isOpen = isOpen;
-  }
+  @property()
+  public name?: string;
+  @property()
+  public icon?: string;
 
   @property()
   public client: ccc.Client = new ccc.ClientPublicTestnet();
@@ -45,6 +55,8 @@ export class WebComponentConnector extends LitElement {
   private selectedWallet?: WalletWithSigners;
   @state()
   private selectedSigner?: ccc.SignerInfo;
+  @state()
+  private connectingError?: string;
 
   @state()
   private walletName?: string;
@@ -54,17 +66,34 @@ export class WebComponentConnector extends LitElement {
   public wallet?: ccc.Wallet;
   @state()
   public signer?: ccc.SignerInfo;
-  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;
-    })();
+  @state()
+  private recommendAddress?: string;
+  @state()
+  private internalAddress?: string;
+  @state()
+  private balance?: ccc.Num;
+
+  private async updateSignerInfo() {
+    const signer = this.signer?.signer;
+    if (!signer) {
+      return;
+    }
+    this.recommendAddress = await signer.getRecommendedAddress();
+    this.internalAddress = await signer.getInternalAddress();
+    this.balance = await signer.getBalance();
+  }
+
+  private async prepareSigner() {
+    if (this.signer && (await this.signer.signer.isConnected())) {
+      await this.updateSignerInfo();
+      this.scene = Scene.Connected;
+      return;
+    }
+
+    this.wallet = undefined;
+    this.signer = undefined;
+    this.scene = Scene.SelectingWallets;
   }
 
   public disconnect() {
@@ -72,6 +101,7 @@ export class WebComponentConnector extends LitElement {
     this.walletName = undefined;
     this.signerName = undefined;
     this.saveConnection();
+    this.closedHandler();
   }
 
   private loadConnection() {
@@ -103,23 +133,33 @@ export class WebComponentConnector extends LitElement {
   }
 
   willUpdate(changedProperties: PropertyValues): void {
-    if (changedProperties.has("client")) {
-      this.reloadSigners();
-    }
     if (
-      changedProperties.has("walletName") ||
-      changedProperties.has("wallets")
+      changedProperties.has("client") ||
+      changedProperties.has("signerFilter")
     ) {
-      this.wallet = this.wallets.find(({ name }) => name === this.walletName);
+      this.reloadSigners();
     }
     if (
-      changedProperties.has("signerName") ||
-      changedProperties.has("wallet")
+      (changedProperties.has("scene") && this.scene === Scene.Connected) ||
+      changedProperties.has("wallets") ||
+      changedProperties.has("walletName") ||
+      changedProperties.has("signerName")
     ) {
-      const wallet = this.wallets.find(({ name }) => name === this.walletName);
-      this.signer = wallet?.signers.find(
-        ({ name }) => name === this.signerName,
-      );
+      (async () => {
+        const wallet = this.wallets.find(
+          ({ name }) => name === this.walletName,
+        );
+        const signer = wallet?.signers.find(
+          ({ name }) => name === this.signerName,
+        );
+        if (signer && (await signer.signer.isConnected())) {
+          this.wallet = wallet;
+          this.signer = signer;
+        } else {
+          this.wallet = undefined;
+          this.signer = undefined;
+        }
+      })();
     }
     if (changedProperties.has("signer")) {
       this.prepareSigner();
@@ -132,43 +172,41 @@ export class WebComponentConnector extends LitElement {
     this.wallets = [];
 
     (async () => {
-      if (!this.signer) {
+      const signer = this.signer;
+      if (!signer) {
         return;
       }
 
+      await signer.signer.replaceClient(this.client);
+
       this.signer = {
-        ...this.signer,
-        signer: await this.signer.signer.replaceClient(this.client),
+        ...signer,
       };
     })();
 
     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 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, name }) => {
+        this.addSigner("JoyID", name, JOY_ID_SVG, signer);
+      },
+    );
 
     const uniSatSigner = ccc.UniSat.getUniSatSigner(this.client);
     if (uniSatSigner) {
-      this.addSigner(
-        "UniSat",
-        "BTC",
-        UNI_SAT_SVG,
-        ccc.SignerType.BTC,
-        uniSatSigner,
-      );
+      this.addSigner("UniSat", "BTC", UNI_SAT_SVG, uniSatSigner);
     }
 
     const okxBitcoinSigner = ccc.Okx.getOKXBitcoinSigner(this.client);
     if (okxBitcoinSigner) {
-      this.addSigner(
-        "OKX Wallet",
-        "BTC",
-        OKX_SVG,
-        ccc.SignerType.BTC,
-        okxBitcoinSigner,
-      );
+      this.addSigner("OKX Wallet", "BTC", OKX_SVG, okxBitcoinSigner);
     }
 
     const eip6963Manager = new ccc.Eip6963.SignerFactory(this.client);
@@ -178,20 +216,64 @@ export class WebComponentConnector extends LitElement {
           `${signer.detail.info.name}`,
           "EVM",
           signer.detail.info.icon,
-          ccc.SignerType.EVM,
           signer,
         );
       }),
     );
+
+    // === Dummy signers ===
+    this.addSigner(
+      "MetaMask",
+      "EVM",
+      METAMASK_SVG,
+      new ccc.SignerOpenLink(
+        this.client,
+        ccc.SignerType.EVM,
+        `https://metamask.app.link/dapp/${window.location.href}`,
+      ),
+    );
+    [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
+      this.addSigner(
+        "OKX Wallet",
+        type,
+        OKX_SVG,
+        new ccc.SignerOpenLink(
+          this.client,
+          type,
+          "https://www.okx.com/download?deeplink=" +
+            encodeURIComponent(
+              "okx://wallet/dapp/url?dappUrl=" +
+                encodeURIComponent(window.location.href),
+            ),
+        ),
+      );
+    });
+    this.addSigner(
+      "UniSat",
+      ccc.SignerType.BTC,
+      UNI_SAT_SVG,
+      new ccc.SignerOpenLink(
+        this.client,
+        ccc.SignerType.BTC,
+        "https://unisat.io/download",
+      ),
+    );
+    // ===
   }
 
-  private addSigner(
+  private async addSigner(
     walletName: string,
     signerName: string,
     icon: string,
-    type: ccc.SignerType,
     signer: ccc.Signer,
   ) {
+    const signerInfo = { name: signerName, signer };
+    if (
+      this.signerFilter &&
+      !(await this.signerFilter(signerInfo, { name: walletName, icon }))
+    ) {
+      return;
+    }
     let updated = false;
     const wallets = this.wallets.map((wallet) => {
       if (wallet.name !== walletName) {
@@ -199,9 +281,13 @@ export class WebComponentConnector extends LitElement {
       }
 
       updated = true;
+      const allSigners = [...wallet.signers, signerInfo];
+      const signers = allSigners.filter(
+        ({ signer }) => !(signer instanceof ccc.SignerDummy),
+      );
       return {
         ...wallet,
-        signers: [...wallet.signers, { type, name: signerName, signer }],
+        signers: signers.length !== 0 ? signers : [signerInfo],
       };
     });
 
@@ -209,15 +295,38 @@ export class WebComponentConnector extends LitElement {
       wallets.push({
         name: walletName,
         icon,
-        signers: [{ type, name: signerName, signer }],
+        signers: [signerInfo],
       });
     }
 
     this.wallets = wallets;
   }
 
+  mainRef: Ref<HTMLDivElement> = createRef();
+  headerRef: Ref<HTMLDivElement> = createRef();
+  bodyRef: Ref<HTMLDivElement> = createRef();
+
   render() {
     const [title, body] = (() => {
+      if (this.scene === Scene.Connected && this.wallet && this.signer) {
+        return generateConnectedScene(
+          this.wallet,
+          this.signer,
+          this.recommendAddress,
+          this.internalAddress,
+          this.balance,
+          this.disconnect.bind(this),
+          () => {
+            this.scene = Scene.SwitchingNetworks;
+          },
+        );
+      }
+      if (this.scene === Scene.SwitchingNetworks) {
+        return generateNetworksScene(this.client, (client) => {
+          this.setClient(client);
+          this.closedHandler();
+        });
+      }
       if (this.scene === Scene.SelectingWallets || !this.selectedWallet) {
         return generateWalletsScene(
           this.wallets,
@@ -237,39 +346,69 @@ export class WebComponentConnector extends LitElement {
       return generateConnectingScene(
         this.selectedWallet,
         this.selectedSigner,
+        this.connectingError,
         this.signerSelectedHandler,
       );
     })();
 
-    return html`<style>
-        :host {
-          ${this.isOpen ? "" : "display: none;"}
-          --background: #fff;
-          --divider: #eee;
-          --btn-primary: #f8f8f8;
-          --btn-primary-hover: #efeeee;
-          --btn-secondary: #ddd;
-          color: #1e1e1e;
-          --tip-color: #666;
+    const canBack = [
+      Scene.SelectingSigners,
+      Scene.Connecting,
+      Scene.SwitchingNetworks,
+    ].includes(this.scene);
+
+    return html` <div
+      class="background"
+      @click=${(event: Event) => {
+        if (event.target === event.currentTarget) {
+          this.closedHandler();
         }
-      </style>
-      <div
-        class="background"
-        @click=${(event: Event) => {
-          if (event.target === event.currentTarget) {
-            this.closedHandler();
-          }
-        }}
-      >
-        <div class="main">
-          <div class="header text-bold fs-big">
-            <div class="back"></div>
-            ${title}
-            <img class="close" src=${CLOSE_SVG} @click=${this.closedHandler} />
-          </div>
-          <div class="body">${body}</div>
+      }}
+    >
+      <div class="main" ${ref(this.mainRef)}>
+        <div
+          class="header text-bold fs-lg ${title == null
+            ? ""
+            : "header-divider"}"
+          ${ref(this.headerRef)}
+        >
+          <img
+            class="back ${canBack ? "active" : ""}"
+            src=${LEFT_SVG}
+            @click=${() => {
+              if (this.scene === Scene.Connecting) {
+                if ((this.selectedWallet?.signers.length ?? 0) <= 1) {
+                  this.scene = Scene.SelectingWallets;
+                } else {
+                  this.scene = Scene.SelectingSigners;
+                }
+              } else if (this.scene === Scene.SelectingSigners) {
+                this.scene = Scene.SelectingWallets;
+              } else if (this.scene === Scene.SwitchingNetworks) {
+                this.scene = Scene.Connected;
+              }
+            }}
+          />
+          ${title}
+          <img
+            class="close active"
+            src=${CLOSE_SVG}
+            @click=${this.closedHandler}
+          />
         </div>
-      </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 = () => {
@@ -283,27 +422,49 @@ export class WebComponentConnector extends LitElement {
       this.scene = Scene.SelectingWallets;
       this.selectedSigner = undefined;
       this.selectedWallet = undefined;
+    } else if ([Scene.SwitchingNetworks].includes(this.scene)) {
+      this.scene = Scene.Connected;
     }
-    this.isOpen = false;
+
+    this.dispatchEvent(new ClosedEvent());
   };
 
   private signerSelectedHandler = (
     wallet: WalletWithSigners,
-    signer: ccc.SignerInfo,
+    signerInfo: ccc.SignerInfo,
   ) => {
     this.scene = Scene.Connecting;
+    this.connectingError = undefined;
     this.selectedWallet = wallet;
-    this.selectedSigner = signer;
+    this.selectedSigner = signerInfo;
     (async () => {
-      await signer.signer.connect();
-      if (!(await signer.signer.isConnected())) {
+      const { signer } = signerInfo;
+      try {
+        await signer.connect();
+      } catch (error) {
+        if (typeof error === "object") {
+          const message = (error as { message: unknown })?.message;
+          if (typeof message === "string") {
+            this.connectingError = message;
+          } else {
+            this.connectingError = JSON.stringify(message);
+          }
+          return;
+        }
+
+        this.connectingError = JSON.stringify(error);
+      }
+      if (!(await signer.isConnected())) {
         return;
       }
       this.scene = Scene.Connected;
       this.walletName = wallet.name;
-      this.signerName = signer.name;
+      this.signerName = signerInfo.name;
       this.saveConnection();
       this.closedHandler();
+      this.internalAddress = await signer.getInternalAddress();
+      this.recommendAddress = await signer.getRecommendedAddress();
+      this.balance = await signer.getBalance();
     })();
   };
 
@@ -334,9 +495,18 @@ export class WebComponentConnector extends LitElement {
       color: var(--tip-color);
     }
 
-    .fs-big {
+    .fs-sm {
+      font-size: 0.8rem;
+    }
+    .fs-md {
+      font-size: 1rem;
+    }
+    .fs-lg {
       font-size: 1.2rem;
     }
+    .fs-xl {
+      font-size: 1.5rem;
+    }
 
     .mb-1 {
       margin-bottom: 0.7rem;
@@ -350,6 +520,18 @@ export class WebComponentConnector extends LitElement {
     .mt-2 {
       margin-top: 1rem;
     }
+    .ml-1 {
+      margin-left: 0.7rem;
+    }
+    .ml-2 {
+      margin-left: 1em;
+    }
+    .mr-1 {
+      margin-right: 0.7rem;
+    }
+    .mr-2 {
+      margin-right: 1rem;
+    }
 
     .background {
       width: 100%;
@@ -364,25 +546,39 @@ 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 {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 1rem 1.3rem;
+      padding: 1rem 1.3rem 0.5rem;
+    }
+
+    .header-divider {
+      padding-bottom: 1rem;
       border-bottom: 1px solid var(--divider);
+      margin-bottom: 1rem;
     }
 
     .close,
     .back {
       width: 0.8rem;
       height: 0.8rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out;
+    }
+
+    .close.active,
+    .back.active {
+      opacity: 1;
       cursor: pointer;
     }
 
     .body {
-      padding: 1.4rem 1.3rem;
+      padding: 0 1.3rem 1.4rem;
       min-width: 20rem;
       display: flex;
       flex-direction: column;
@@ -397,18 +593,23 @@ 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 {
       width: 2rem;
       height: 2rem;
       margin-right: 1rem;
+      border-radius: 0.4rem;
     }
-
     .btn-primary:hover {
       background: var(--btn-primary-hover);
     }
+    .btn-primary:disabled {
+      cursor: not-allowed;
+    }
+    .btn-primary:disabled:hover {
+      background: var(--btn-primary);
+    }
 
     .btn-secondary {
       display: flex;
@@ -416,19 +617,28 @@ 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 {
       width: 0.8rem;
       height: 0.8rem;
       margin-right: 0.5rem;
     }
+    .btn-secondary:hover {
+      background: var(--btn-secondary-hover);
+    }
+    .btn-secondary:disabled {
+      cursor: not-allowed;
+    }
+    .btn-secondary:disabled:hover {
+      background: var(--btn-secondary);
+    }
 
     .wallet-icon {
       width: 4rem;
       height: 4rem;
       margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
     }
 
     .connecting-wallet-icon {
@@ -436,5 +646,73 @@ export class WebComponentConnector extends LitElement {
       height: 5rem;
       border-radius: 1rem;
     }
+
+    .position-relative {
+      position: relative;
+    }
+    .position-absolute {
+      position: absolute;
+    }
+
+    .connected-type-icon {
+      position: absolute;
+      width: 1.5rem;
+      height: 1.5rem;
+      right: -0.5rem;
+      bottom: -0.5rem;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+
+    .cursor-pointer {
+      cursor: pointer;
+    }
+
+    .flex {
+      display: flex;
+    }
+    .justify-center {
+      justify-content: center;
+    }
+    .justify-between {
+      justify-content: space-between;
+    }
+    .align-center {
+      align-items: center;
+    }
+
+    .switch-btn-container {
+      width: 100%;
+      padding: 1rem;
+    }
+
+    .switch-line {
+      flex: 1;
+      height: 1px;
+      background-color: var(--divider);
+    }
+
+    .switching-status-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      background: #0f0;
+      border-radius: 50%;
+    }
+
+    .copy-btn {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .copy-btn-sm {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .sm-chain-logo {
+      width: 1.125rem;
+    }
   `;
 }