@ckb-ccc/connector 0.0.9-alpha.2 → 0.0.10-alpha.1

package/src/scenes/connected.ts

@@ -1,22 +1,14 @@
 import { ccc } from "@ckb-ccc/ccc";
-import { html } from "lit";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { CKB_SVG } from "../assets/chains";
-import { COPY_SVG } from "../assets/copy.svg";
 import { DISCONNECT_SVG } from "../assets/diconnect.svg";
-import { signerTypeToIcon } from "./signers";
-
-function copyAddress(address?: string) {
-  if (!address) {
-    return;
-  }
-
-  return window.navigator.clipboard.writeText(address);
-}
+import { signerTypeToIcon } from "./selecting/signers";
 
 export function formatString(
   str: string | undefined,
-  l = 7,
-  r = 5,
+  l = 9,
+  r = 6,
 ): string | undefined {
   if (str && str.length > l + r + 3) {
     return `${str.slice(0, l)}...${str.slice(-r)}`;
@@ -24,61 +16,198 @@ export function formatString(
   return str;
 }
 
-export function generateConnectedScene(
-  wallet: ccc.Wallet,
-  signer: ccc.SignerInfo,
-  recommendedAddress: string | undefined,
-  internalAddress: string | undefined,
-  balance: ccc.Num | undefined,
-  disconnect: () => 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}
+@customElement("ccc-connected-scene")
+export class ConnectedScene extends LitElement {
+  @property()
+  public wallet?: ccc.Wallet;
+  @property()
+  public signer?: ccc.Signer;
+
+  @state()
+  private recommendedAddress?: string;
+  @state()
+  private internalAddress?: string;
+  @state()
+  private balance?: ccc.Num;
+
+  willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("signer") && this.signer) {
+      this.signer
+        .getRecommendedAddress()
+        .then((v) => (this.recommendedAddress = v));
+      this.signer.getInternalAddress().then((v) => (this.internalAddress = v));
+      this.signer.getBalance().then((v) => (this.balance = v));
+    }
+  }
+
+  render() {
+    const { wallet, signer, internalAddress, balance, recommendedAddress } =
+      this;
+    if (!wallet || !signer) {
+      return html`<div></div>`;
+    }
+
+    return html`
+      <ccc-dialog>
+        <div class="position-relative">
+          <img
+            class="connecting-wallet-icon"
+            src=${wallet.icon}
+            alt=${wallet.name}
+          />
+          <img
+            class="connected-type-icon"
+            src=${signerTypeToIcon(signer.type)}
+            alt=${signer.type}
+          />
+        </div>
+
+        <ccc-copy-button
+          value=${recommendedAddress}
+          class="text-bold fs-xl mt-2"
+        >
+          ${formatString(recommendedAddress)}
+        </ccc-copy-button>
+        <div class="text-bold fs-md">
+          ${ccc.fixedPointToString(balance ?? ccc.Zero)} CKB
+        </div>
+        <ccc-copy-button
+          value=${internalAddress}
+          class="text-bold text-tip fs-md"
+          style="margin-top: 0.5rem"
         >
-        </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 ml-2 mr-2 fs-sm">
-          <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}`}
+          ${formatString(internalAddress, 11, 9)}
+        </ccc-copy-button>
+
+        <ccc-button
+          class="mt-2"
+          @click=${() => this.dispatchEvent(new Event("disconnect"))}
+        >
+          <img src=${DISCONNECT_SVG} alt="disconnect" />
+          Disconnect
+        </ccc-button>
+
+        <div class="switch-btn-container">
+          <div class="switch-line"></div>
+          <div class="switch-content ml-2 mr-2 fs-sm">
+            <img
+              class="mr-1 sm-chain-logo"
+              src=${CKB_SVG}
+              alt="Nervos Network"
+            />
+            ${signer.client.addressPrefix === "ckb" ? "Mainnet" : "Testnet"}
+            ${["ckb", "ckt"].includes(signer.client.addressPrefix)
+              ? ""
+              : ` ${signer.client.addressPrefix}`}
+          </div>
+          <div class="switch-line"></div>
         </div>
-        <div class="switch-line"></div>
-      </div>
-    `,
-  ];
+      </ccc-dialog>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .text-bold {
+      font-weight: bold;
+    }
+
+    .text-tip {
+      color: var(--tip-color);
+    }
+
+    .fs-sm {
+      font-size: 0.8rem;
+    }
+    .fs-md {
+      font-size: 1rem;
+    }
+    .fs-xl {
+      font-size: 1.5rem;
+    }
+
+    .mt-1 {
+      margin-top: 0.7rem;
+    }
+    .mt-2 {
+      margin-top: 1rem;
+    }
+    .ml-2 {
+      margin-left: 1em;
+    }
+    .mr-1 {
+      margin-right: 0.7rem;
+    }
+    .mr-2 {
+      margin-right: 1rem;
+    }
+
+    .connecting-wallet-icon {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1rem;
+    }
+
+    .position-relative {
+      position: relative;
+    }
+
+    .connected-type-icon {
+      position: absolute;
+      width: 1.5rem;
+      height: 1.5rem;
+      right: -0.5rem;
+      bottom: -0.5rem;
+    }
+
+    .switch-btn-container {
+      width: 100%;
+      margin-top: 1.2rem;
+      margin-bottom: 0.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .switch-content {
+      display: flex;
+      align-items: center;
+    }
+
+    .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;
+    }
+  `;
+
+  updated() {
+    this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
+  }
 }

package/src/scenes/index.ts

@@ -1,3 +1,2 @@
-export * from "./connecting";
-export * from "./signers";
-export * from "./wallets";
+import "./connected";
+import "./selecting";

package/src/scenes/{connecting.ts → selecting/connecting.ts}

@@ -1,7 +1,7 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
-import { RETRY_SVG } from "../assets/retry.svg";
-import { WalletWithSigners } from "../types";
+import { RETRY_SVG } from "../../assets/retry.svg";
+import { WalletWithSigners } from "../../types";
 
 export function generateConnectingScene(
   wallet: WalletWithSigners,
@@ -16,7 +16,7 @@ export function generateConnectingScene(
     wallet.name,
     html`
       <img
-        class="connecting-wallet-icon mb-1"
+        class="connecting-wallet-icon mb-1 mt-1"
         src=${wallet.icon}
         alt=${wallet.name}
       />
@@ -28,13 +28,13 @@ export function generateConnectingScene(
       <span class="text-tip text-center"
         >${error ?? "Confirm connection in the wallet"}</span
       >
-      <button
-        class="btn-secondary mt-2 mb-2"
+      <ccc-button-pill
+        class="mt-2"
         @click=${() => onSignerSelected(wallet, signer)}
       >
         <img src=${RETRY_SVG} alt="retry" />
         Try again
-      </button>
+      </ccc-button-pill>
     `,
   ];
 }

package/src/scenes/selecting/index.ts

@@ -0,0 +1,181 @@
+import { ccc } from "@ckb-ccc/ccc";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { WalletWithSigners } from "../../types";
+import { generateConnectingScene } from "./connecting";
+import { generateSignersScene } from "./signers";
+import { generateWalletsScene } from "./wallets";
+
+export class ConnectedEvent extends Event {
+  constructor(
+    public readonly walletName: string,
+    public readonly signerName: string,
+  ) {
+    super("connected");
+  }
+}
+
+@customElement("ccc-selecting-scene")
+export class SelectingScene extends LitElement {
+  @property()
+  public wallets?: WalletWithSigners[];
+
+  @state()
+  private selectedWallet?: WalletWithSigners;
+  @state()
+  private selectedSigner?: ccc.SignerInfo;
+  @state()
+  private connectingError?: string;
+
+  render() {
+    const [title, body] = (() => {
+      if (!this.selectedWallet) {
+        return generateWalletsScene(
+          this.wallets ?? [],
+          (wallet) => {
+            this.selectedWallet = wallet;
+          },
+          this.signerSelectedHandler,
+        );
+      }
+      if (!this.selectedSigner) {
+        return generateSignersScene(
+          this.selectedWallet,
+          this.signerSelectedHandler,
+        );
+      }
+
+      return generateConnectingScene(
+        this.selectedWallet,
+        this.selectedSigner,
+        this.connectingError,
+        this.signerSelectedHandler,
+      );
+    })();
+
+    return html`<ccc-dialog
+      header=${title}
+      ?canBack=${this.selectedSigner || this.selectedWallet}
+      @close=${() => {
+        this.onClose();
+      }}
+      @back=${() => {
+        if (
+          !this.selectedSigner ||
+          (this.selectedWallet && this.selectedWallet.signers.length <= 1)
+        ) {
+          this.selectedWallet = undefined;
+        }
+        this.selectedSigner = undefined;
+        this.connectingError = undefined;
+      }}
+    >
+      ${body}
+    </ccc-dialog>`;
+  }
+
+  public onClose() {
+    this.selectedWallet = undefined;
+    this.selectedSigner = undefined;
+    this.connectingError = undefined;
+  }
+
+  private signerSelectedHandler = (
+    wallet: WalletWithSigners,
+    signerInfo: ccc.SignerInfo,
+  ) => {
+    this.connectingError = undefined;
+    this.selectedWallet = wallet;
+    this.selectedSigner = signerInfo;
+    (async () => {
+      const { signer } = signerInfo;
+      try {
+        await signer.connect();
+      } catch (error) {
+        if (typeof error !== "object" || error === null) {
+          this.connectingError = JSON.stringify(error);
+          return;
+        }
+
+        if (!("message" in error)) {
+          this.connectingError = "Unknown error";
+          return;
+        }
+
+        const message = error.message;
+        if (typeof message === "string") {
+          this.connectingError = message;
+          return;
+        }
+
+        this.connectingError = JSON.stringify(message);
+      }
+      if (!(await signer.isConnected())) {
+        return;
+      }
+
+      this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+      this.dispatchEvent(new ConnectedEvent(wallet.name, signerInfo.name));
+    })();
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .text-bold {
+      font-weight: bold;
+    }
+
+    .text-tip {
+      color: var(--tip-color);
+    }
+
+    .mb-1 {
+      margin-bottom: 0.7rem;
+    }
+    .mb-2 {
+      margin-bottom: 1rem;
+    }
+    .mt-1 {
+      margin-top: 0.7rem;
+    }
+    .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;
+    }
+
+    .wallet-icon {
+      width: 4rem;
+      height: 4rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.8rem;
+    }
+
+    .connecting-wallet-icon {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1rem;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+  `;
+
+  updated() {
+    this.dispatchEvent(new Event("updated", { bubbles: true, composed: true }));
+  }
+}

package/src/scenes/{signers.ts → selecting/signers.ts}

@@ -1,9 +1,8 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { BTC_SVG, CKB_SVG, ETH_SVG } from "../assets/chains";
-import { NOSTR_SVG } from "../assets/chains/nostr.svg";
-import { WalletWithSigners } from "../types";
+import { BTC_SVG, CKB_SVG, ETH_SVG, NOSTR_SVG } from "../../assets/chains";
+import { WalletWithSigners } from "../../types";
 
 export function signerTypeToIcon(type: ccc.SignerType): string {
   return {
@@ -25,14 +24,14 @@ export function generateSignersScene(
     "Select a Chain",
 
     html`
-      <img class="wallet-icon" src=${wallet.icon} alt=${wallet.name} />
-      <span class="mb-2">${wallet.name}</span>
+      <img class="wallet-icon mt-1" src=${wallet.icon} alt=${wallet.name} />
+      <span class="mb-1">${wallet.name}</span>
       ${repeat(
         wallet.signers,
         (signer) => signer.name,
         (signer) => html`
-          <button
-            class="btn-primary mb-1"
+          <ccc-button
+            class="mt-1"
             @click=${async () => {
               onSignerSelected(wallet, signer);
             }}
@@ -42,7 +41,7 @@ export function generateSignersScene(
               alt=${signer.signer.type}
             />
             ${signer.name}
-          </button>
+          </ccc-button>
         `,
       )}
     `,

package/src/scenes/{wallets.ts → selecting/wallets.ts}

@@ -1,7 +1,7 @@
 import { ccc } from "@ckb-ccc/ccc";
 import { html } from "lit";
 import { repeat } from "lit/directives/repeat.js";
-import { WalletWithSigners } from "../types";
+import { WalletWithSigners } from "../../types";
 
 export function generateWalletsScene(
   wallets: WalletWithSigners[],
@@ -17,8 +17,8 @@ export function generateWalletsScene(
       wallets,
       (wallet) => wallet.name,
       (wallet) => html`
-        <button
-          class="btn-primary mb-1"
+        <ccc-button
+          class="mt-1"
           @click=${async () => {
             if (wallet.signers.length === 1) {
               onSignerSelected(wallet, wallet.signers[0]);
@@ -29,7 +29,7 @@ export function generateWalletsScene(
         >
           <img src=${wallet.icon} alt=${wallet.name} />
           ${wallet.name}
-        </button>
+        </ccc-button>
       `,
     ),
   ];