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

package/src/connector/index.ts

@@ -5,6 +5,7 @@ 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";
@@ -13,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 {
@@ -20,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)[] = [];
 
@@ -61,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() {
@@ -79,6 +105,7 @@ export class WebComponentConnector extends LitElement {
     this.walletName = undefined;
     this.signerName = undefined;
     this.saveConnection();
+    this.closedHandler();
   }
 
   private loadConnection() {
@@ -110,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();
@@ -159,31 +196,19 @@ export class WebComponentConnector extends LitElement {
       (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);
+      ({ 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);
@@ -193,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) {
@@ -214,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],
       };
     });
 
@@ -224,7 +297,7 @@ export class WebComponentConnector extends LitElement {
       wallets.push({
         name: walletName,
         icon,
-        signers: [{ type, name: signerName, signer }],
+        signers: [signerInfo],
       });
     }
 
@@ -237,6 +310,25 @@ export class WebComponentConnector extends LitElement {
 
   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,
@@ -260,9 +352,11 @@ export class WebComponentConnector extends LitElement {
       );
     })();
 
-    const canBack = [Scene.SelectingSigners, Scene.Connecting].includes(
-      this.scene,
-    );
+    const canBack = [
+      Scene.SelectingSigners,
+      Scene.Connecting,
+      Scene.SwitchingNetworks,
+    ].includes(this.scene);
 
     return html`<style>
         :host {
@@ -272,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;
         }
@@ -285,15 +380,26 @@ export class WebComponentConnector extends LitElement {
         }}
       >
         <div class="main" ${ref(this.mainRef)}>
-          <div class="header text-bold fs-big" ${ref(this.headerRef)}>
+          <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) {
-                  this.scene = Scene.SelectingSigners;
+                  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;
                 }
               }}
             />
@@ -330,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;
   };
 
@@ -346,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;
@@ -381,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;
@@ -397,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%;
@@ -419,8 +551,13 @@ export class WebComponentConnector extends LitElement {
       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,
@@ -438,7 +575,7 @@ export class WebComponentConnector extends LitElement {
     }
 
     .body {
-      padding: 1.4rem 1.3rem;
+      padding: 0 1.3rem 1.4rem;
       min-width: 20rem;
       display: flex;
       flex-direction: column;
@@ -455,17 +592,21 @@ export class WebComponentConnector extends LitElement {
       border-radius: 0.4rem;
       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;
@@ -475,12 +616,20 @@ export class WebComponentConnector extends LitElement {
       border-radius: 9999px;
       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;
@@ -494,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>
+    `,
+  ];
+}

package/src/scenes/networks.ts

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { ccc } from "..";
+import { CKB_SVG } from "../assets/chains";
+
+export function generateNetworksScene(
+  client: ccc.Client,
+  handleSwapClick: (client: ccc.Client) => unknown,
+) {
+  const isMainnet = client.addressPrefix === "ckb";
+
+  return [
+    "Switch Network",
+    repeat(
+      [
+        {
+          activated: isMainnet,
+          name: "Mainnet",
+          onClick: () => handleSwapClick(new ccc.ClientPublicMainnet()),
+        },
+        {
+          activated: !isMainnet,
+          name: "Testnet",
+          onClick: () => handleSwapClick(new ccc.ClientPublicTestnet()),
+        },
+      ],
+      ({ name }) => name,
+      ({ activated, name, onClick }) => html`
+        <button
+          class="btn-primary flex justify-between mb-1 ${activated
+            ? "switching-active"
+            : ""}"
+          ?disabled=${activated}
+          @click=${onClick}
+        >
+          <div class="flex align-center">
+            <img src=${CKB_SVG} alt="Nervos Network" />
+            <span>${name}</span>
+          </div>
+          <div class="flex align-center">
+            ${activated ? html`<div class="switching-status-dot"></div>` : ""}
+          </div>
+        </button>
+      `,
+    ),
+  ];
+}

package/src/scenes/signers.ts

@@ -27,7 +27,7 @@ export function generateSignersScene(
       <span class="mb-2">${wallet.name}</span>
       ${repeat(
         wallet.signers,
-        (signer) => signer.type,
+        (signer) => signer.name,
         (signer) => html`
           <button
             class="btn-primary mb-1"
@@ -35,7 +35,10 @@ export function generateSignersScene(
               onSignerSelected(wallet, signer);
             }}
           >
-            <img src=${signerTypeToIcon(signer.type)} alt=${signer.type} />
+            <img
+              src=${signerTypeToIcon(signer.signer.type)}
+              alt=${signer.signer.type}
+            />
             ${signer.name}
           </button>
         `,