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

package/src/connector/index.ts

@@ -1,8 +1,11 @@
 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";
@@ -11,6 +14,9 @@ import {
   generateSignersScene,
   generateWalletsScene,
 } from "../scenes";
+import { generateConnectedScene } from "../scenes/connected";
+import { generateNetworksScene } from "../scenes/networks";
+import { SignerOpenLink } from "../signerOpenLink";
 import { WalletWithSigners } from "../types";
 
 enum Scene {
@@ -18,12 +24,18 @@ 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)[] = [];
 
@@ -33,6 +45,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) {
@@ -54,17 +71,33 @@ 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() {
+    if (!this.signer) {
+      return;
+    }
+    this.recommendAddress = await this.signer.signer.getRecommendedAddress();
+    this.balance = await this.signer.signer.getBalance();
+    this.internalAddress = await this.signer.signer.getInternalAddress();
+  }
+
+  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 +105,7 @@ export class WebComponentConnector extends LitElement {
     this.walletName = undefined;
     this.signerName = undefined;
     this.saveConnection();
+    this.closedHandler();
   }
 
   private loadConnection() {
@@ -103,23 +137,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("walletName") ||
+      changedProperties.has("wallets") ||
       changedProperties.has("signerName") ||
       changedProperties.has("wallet")
     ) {
-      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();
@@ -144,31 +188,27 @@ export class WebComponentConnector extends LitElement {
 
     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 +218,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 SignerOpenLink(
+        this.client,
+        `https://metamask.app.link/dapp/${window.location.href}`,
+        ccc.SignerType.EVM,
+      ),
+    );
+    [ccc.SignerType.EVM, ccc.SignerType.BTC].forEach((type) => {
+      this.addSigner(
+        "OKX Wallet",
+        type,
+        OKX_SVG,
+        new SignerOpenLink(
+          this.client,
+          "https://www.okx.com/download?deeplink=" +
+            encodeURIComponent(
+              "okx://wallet/dapp/url?dappUrl=" +
+                encodeURIComponent(window.location.href),
+            ),
+          type,
+        ),
+      );
+    });
+    this.addSigner(
+      "UniSat",
+      ccc.SignerType.BTC,
+      UNI_SAT_SVG,
+      new SignerOpenLink(
+        this.client,
+        "https://unisat.io/download",
+        ccc.SignerType.BTC,
+      ),
+    );
+    // ===
   }
 
-  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 +283,13 @@ export class WebComponentConnector extends LitElement {
       }
 
       updated = true;
+      const allSigners = [...wallet.signers, signerInfo];
+      const signers = allSigners.filter(
+        ({ signer }) => !(signer instanceof SignerOpenLink),
+      );
       return {
         ...wallet,
-        signers: [...wallet.signers, { type, name: signerName, signer }],
+        signers: signers.length !== 0 ? signers : [signerInfo],
       };
     });
 
@@ -209,15 +297,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,
@@ -241,6 +352,12 @@ export class WebComponentConnector extends LitElement {
       );
     })();
 
+    const canBack = [
+      Scene.SelectingSigners,
+      Scene.Connecting,
+      Scene.SwitchingNetworks,
+    ].includes(this.scene);
+
     return html`<style>
         :host {
           ${this.isOpen ? "" : "display: none;"}
@@ -249,6 +366,7 @@ export class WebComponentConnector extends LitElement {
           --btn-primary: #f8f8f8;
           --btn-primary-hover: #efeeee;
           --btn-secondary: #ddd;
+          --btn-secondary-hover: #ccc;
           color: #1e1e1e;
           --tip-color: #666;
         }
@@ -261,17 +379,52 @@ 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-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" 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 (
       [
@@ -283,7 +436,10 @@ 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;
   };
 
@@ -299,6 +455,8 @@ export class WebComponentConnector extends LitElement {
       if (!(await signer.signer.isConnected())) {
         return;
       }
+      this.recommendAddress = await signer.signer.getRecommendedAddress();
+      this.balance = await signer.signer.getBalance();
       this.scene = Scene.Connected;
       this.walletName = wallet.name;
       this.signerName = signer.name;
@@ -334,9 +492,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 +517,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 +543,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 +590,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 +614,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 +643,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;
+    }
   `;
 }

package/src/scenes/connected.ts

@@ -0,0 +1,87 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { html } from "lit";
+import { CKB_SVG } from "../assets/chains";
+import { COPY_SVG } from "../assets/copy.svg";
+import { DISCONNECT_SVG } from "../assets/diconnect.svg";
+import { SWAP_SVG } from "../assets/swap.svg";
+import { signerTypeToIcon } from "./signers";
+
+function copyAddress(address?: string) {
+  if (!address) {
+    return;
+  }
+
+  return window.navigator.clipboard.writeText(address);
+}
+
+export function formatString(
+  str: string | undefined,
+  l = 7,
+  r = 5,
+): string | undefined {
+  if (str && str.length > l + r + 3) {
+    return `${str.slice(0, l)}...${str.slice(-r)}`;
+  }
+  return str;
+}
+
+export function generateConnectedScene(
+  wallet: ccc.Wallet,
+  signer: ccc.SignerInfo,
+  recommendedAddress: string | undefined,
+  internalAddress: string | undefined,
+  balance: ccc.Num | undefined,
+  disconnect: () => void,
+  handleSwitchClick: () => void,
+) {
+  return [
+    undefined,
+    html`
+      <div class="position-relative">
+        <img
+          class="connecting-wallet-icon"
+          src=${wallet.icon}
+          alt=${wallet.name}
+        />
+        <img
+          class="connected-type-icon"
+          src=${signerTypeToIcon(signer.signer.type)}
+          alt=${signer.signer.type}
+        >
+        </img>
+      </div>
+      
+      <div class="flex align-center mt-2">
+        <span class="text-bold fs-xl">${formatString(internalAddress)}</span>
+        <img class="cursor-pointer copy-btn" src=${COPY_SVG} alt="copy" @click=${() => copyAddress(internalAddress)}/>
+      </div>
+      <div class="text-bold fs-md">${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB</div>
+      <div class="flex align-center">
+        <span class="text-bold text-tip fs-md">${formatString(recommendedAddress, 13, 7)}</span>
+        <img class="cursor-pointer copy-btn-sm" src=${COPY_SVG} alt="copy" @click=${() => copyAddress(recommendedAddress)}/>
+      </div>
+
+      <button
+        class="btn-primary mt-2"
+        @click=${disconnect}
+      >
+        <img
+          src=${DISCONNECT_SVG}
+          alt="disconnect"
+        />
+        Disconnect
+      </button>
+
+      <div class="switch-btn-container align-center flex justify-center mt-1">
+        <div class="switch-line"></div>
+        <div class="switch-content flex align-center cursor-pointer ml-2 mr-2 fs-sm" @click=${handleSwitchClick}>
+          <img class="mr-1 sm-chain-logo" src=${CKB_SVG} alt="Nervos Network">
+          ${signer.signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+          ${["ckb", "ckt"].includes(signer.signer.client.addressPrefix) ? "" : ` ${signer.signer.client.addressPrefix}`}
+          <img class="ml-1" src=${SWAP_SVG} alt="Nervos Network">
+        </div>
+        <div class="switch-line"></div>
+      </div>
+    `,
+  ];
+}