cruzo-web3 0.1.0

package/lib/components/web3-signing/web3-signing.component.module.css

@@ -0,0 +1,36 @@
+.signing {
+  display: grid;
+  gap: var(--m);
+}
+
+.payloadLimit {
+  color: var(--text-muted-mid);
+  font-weight: 400;
+}
+
+.stateOverview {
+  margin: 0;
+  color: var(--text-muted-mid);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.signers {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--m);
+}
+
+@media (max-width: 860px) {
+  .signers {
+    grid-template-columns: 1fr;
+  }
+}
+
+.hint {
+  margin: 0;
+  color: var(--text-muted-mid);
+}

package/lib/components/web3-signing/web3-signing.component.ts

@@ -0,0 +1,239 @@
+import styles from "./web3-signing.component.module.css";
+
+import { AbstractComponent, componentsRegistryService, routerService, RxBucket } from "cruzo";
+import { UI_KIT } from "cruzo/ui-components/const";
+
+import "../web3-signer/web3-signer.component";
+import { detectInjectedWallets, getInjectedWalletLabel } from "../../providers/injected";
+import {
+  buildSearchWithSigning,
+  clampSigningPayload,
+  MAX_SIGNING_PAYLOAD_LENGTH,
+  readPayloadFromUrl,
+  readSigningUrl,
+} from "../../signing-url";
+import type { SignerState } from "../../types/signer-state";
+import { pubKeyToText } from "../../utils/format-pub-key";
+import { web3Service } from "../../web3.service";
+
+const DEFAULT_PAYLOAD = JSON.stringify({ message: "Hello from cruzo-web3" });
+const SIGNER_IDS = ["signer1", "signer2"] as const;
+const PAYLOAD_INPUT_ID = "payload";
+
+export class Web3SigningComponent extends AbstractComponent {
+  static selector = "web3-signing-component";
+
+  dependencies = new Set(["web3-signer-component"]);
+
+  walletHint$ = this.newRx("");
+  stateOverview$ = this.newRx("");
+
+  innerBucket = new RxBucket({
+    [PAYLOAD_INPUT_ID]: {},
+    signer1: {
+      config: { payload: DEFAULT_PAYLOAD, title: "Signer 1" },
+    },
+    signer2: {
+      config: { payload: DEFAULT_PAYLOAD, title: "Signer 2" },
+    },
+  });
+
+  payload$ = this.newRxValueFromBucket(this.innerBucket, PAYLOAD_INPUT_ID);
+
+  private syncingFromUrl = false;
+
+  getHTML() {
+    const k = UI_KIT;
+
+    return `<div>
+        <p class="description-note mb_m ${styles.hint}"
+          attached="{{ root.walletHint$::rx }}">{{ root.walletHint$::rx }}</p>
+
+        <div class="${styles.signing} block">
+          <div class="mb_s">
+            <div class="description-paragraph mb_xs">
+              Payload (signed as JSON string)
+              <span class="${styles.payloadLimit}">— max ${MAX_SIGNING_PAYLOAD_LENGTH} chars, synced to URL</span>
+            </div>
+            <textarea
+              class="${k}_textarea"
+              maxlength="${MAX_SIGNING_PAYLOAD_LENGTH}"
+              rows="4"
+              placeholder='{"message": "..."}'
+              oninput="{{ root.onPayloadInput(event.currentTarget) }}">{{ root.payload$::rx }}</textarea>
+          </div>
+
+          <div class="mb_m">
+            <div class="description-paragraph mb_xs">Signing state (synced to URL):</div>
+            <pre class="${styles.stateOverview}">{{ root.stateOverview$::rx }}</pre>
+          </div>
+
+          <div class="${styles.signers}">
+            <web3-signer-component
+              component-id="signer1"
+              bucket-id="${this.innerBucket.id}">
+            </web3-signer-component>
+            <web3-signer-component
+              component-id="signer2"
+              bucket-id="${this.innerBucket.id}">
+            </web3-signer-component>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  connectedCallback() {
+    componentsRegistryService.connectBucket(this.innerBucket);
+    super.connectedCallback();
+    this.ensureTonManifest();
+    this.updateWalletHint();
+    this.setupUrlSync();
+  }
+
+  onPayloadInput(el: HTMLTextAreaElement) {
+    const value = clampSigningPayload(el?.value ?? "");
+
+    if ((this.innerBucket.getValue(PAYLOAD_INPUT_ID) ?? "") !== value) {
+      this.innerBucket.setValue(PAYLOAD_INPUT_ID, value, "0", true);
+    }
+  }
+
+  private setupUrlSync() {
+    this.rxList ??= [];
+
+    this.applyPayload(DEFAULT_PAYLOAD);
+    this.applyUrlState(routerService.search$.actual);
+
+    this.newRxFunc((search: string) => {
+      this.applyUrlState(search);
+    }, routerService.search$);
+
+    this.innerBucket.newRxValue(
+      PAYLOAD_INPUT_ID,
+      (value) => {
+        if (this.syncingFromUrl) return;
+
+        const payload = clampSigningPayload(value ?? "");
+        this.updateSignerPayloadConfigs(payload);
+        this.syncToUrl();
+      },
+      this.rxList,
+      DEFAULT_PAYLOAD,
+    );
+
+    for (const id of SIGNER_IDS) {
+      this.innerBucket.newRxState(
+        id,
+        () => {
+          this.syncToUrl();
+          this.updateStateOverview();
+        },
+        this.rxList,
+        this.innerBucket.getState(id),
+      );
+    }
+
+    this.updateStateOverview();
+  }
+
+  private applyUrlState(search: string) {
+    const snapshot = readSigningUrl(search);
+    const payloadFromUrl = readPayloadFromUrl(search);
+
+    if (!snapshot && payloadFromUrl == null) return;
+
+    this.syncingFromUrl = true;
+
+    try {
+      this.applyPayload(payloadFromUrl ?? DEFAULT_PAYLOAD);
+
+      if (snapshot) {
+        for (const id of SIGNER_IDS) {
+          const state = snapshot[id];
+
+          if (state) {
+            this.innerBucket.setState(id, state);
+          }
+        }
+      }
+    } finally {
+      this.syncingFromUrl = false;
+      this.updateStateOverview();
+    }
+  }
+
+  private syncToUrl() {
+    if (this.syncingFromUrl) return;
+
+    const snapshot: Record<string, SignerState> = {};
+
+    for (const id of SIGNER_IDS) {
+      snapshot[id] = this.innerBucket.getState(id) ?? { pubKey: null, signed: false, wallet: null };
+    }
+
+    const payload = this.getPayload();
+    const nextSearch = buildSearchWithSigning(routerService.search$.actual, snapshot, payload);
+
+    if (nextSearch === routerService.search$.actual) return;
+
+    routerService.pushHistory(routerService.pathname$.actual + nextSearch);
+  }
+
+  private getPayload(): string {
+    return clampSigningPayload(this.innerBucket.getValue(PAYLOAD_INPUT_ID) ?? DEFAULT_PAYLOAD);
+  }
+
+  private applyPayload(payload: string) {
+    const clamped = clampSigningPayload(payload);
+
+    this.innerBucket.setValue(PAYLOAD_INPUT_ID, clamped);
+    this.updateSignerPayloadConfigs(clamped);
+  }
+
+  private updateSignerPayloadConfigs(payload: string) {
+    for (const id of SIGNER_IDS) {
+      const config = this.innerBucket.descriptors[id]?.config ?? {};
+
+      this.innerBucket.setConfig(id, { ...config, payload });
+    }
+  }
+
+  private updateStateOverview() {
+    const lines = SIGNER_IDS.map((id, index) => {
+      const state = this.innerBucket.getState(id) ?? this.emptySignerState();
+      const title = `Signer ${index + 1}`;
+      const status = state.signed ? "Signed" : state.pubKey ? "Connected" : "Idle";
+      const wallet = state.wallet
+        ? web3Service.getWalletLabel(state.wallet)
+        : "No wallet";
+      const pubKey = pubKeyToText(state.pubKey);
+
+      return `${title}: ${status} · ${wallet} · ${pubKey}`;
+    });
+
+    this.stateOverview$.update(lines.join("\n"));
+  }
+
+  private emptySignerState(): SignerState {
+    return { pubKey: null, signed: false, wallet: null };
+  }
+
+  private ensureTonManifest() {
+    if (web3Service.getTonManifestUrl()) return;
+
+    web3Service.setTonManifestUrl(new URL("/tonconnect-manifest.json", window.location.href).href);
+  }
+
+  private updateWalletHint() {
+    const extensions = detectInjectedWallets();
+    const hints = ["Click Connect wallet to choose a provider (extension or mobile app)."];
+
+    if (extensions.length) {
+      hints.push(`Extensions detected: ${extensions.map(getInjectedWalletLabel).join(" · ")}`);
+    }
+
+    this.walletHint$.update(hints.join(" "));
+  }
+}
+
+componentsRegistryService.define(Web3SigningComponent);

package/lib/components/web3-wallet-picker/web3-wallet-picker.bucket.ts

@@ -0,0 +1,22 @@
+import { componentsRegistryService, RxBucket } from "cruzo";
+import { ModalConfig } from "cruzo/ui-components/modal";
+
+export const WALLET_MODAL_ID = "web3-wallet-modal";
+export const WALLET_PICKER_ID = "web3-wallet-picker";
+export const WALLET_ACTIVE_SIGNER_ID = "active-signer";
+
+export const web3WalletPickerBucket = new RxBucket({
+  [WALLET_MODAL_ID]: {},
+  [WALLET_PICKER_ID]: {},
+  [WALLET_ACTIVE_SIGNER_ID]: {},
+});
+
+web3WalletPickerBucket.setConfig(
+  WALLET_MODAL_ID,
+  ModalConfig({
+    bodyContent: `<web3-wallet-picker-component component-id="${WALLET_PICKER_ID}" bucket-id="${web3WalletPickerBucket.id}"></web3-wallet-picker-component>`,
+    dependencies: new Set(["web3-wallet-picker-component"]),
+  }),
+);
+
+componentsRegistryService.connectBucket(web3WalletPickerBucket);

package/lib/components/web3-wallet-picker/web3-wallet-picker.component.module.css

@@ -0,0 +1,62 @@
+.picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--m);
+  min-width: 280px;
+  max-width: 360px;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--xs);
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: var(--s) var(--m);
+  border: 1px solid var(--border-dark);
+  border-radius: var(--s);
+  background: var(--surface);
+  text-align: left;
+  cursor: pointer;
+}
+
+.option:hover:not(:disabled) {
+  border-color: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.option:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.optionLabel {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.optionHint {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.55);
+}

package/lib/components/web3-wallet-picker/web3-wallet-picker.component.ts

@@ -0,0 +1,171 @@
+import styles from "./web3-wallet-picker.component.module.css";
+
+import { AbstractComponent, componentsRegistryService } from "cruzo";
+
+import { hasInjectedWallet } from "../../providers/injected";
+import type { WalletKind } from "../../providers/wallet";
+import type { WalletTransport } from "../../providers/wallet-transport";
+import { web3Service } from "../../web3.service";
+import type { Web3WalletTarget } from "../../web3-wallet";
+import { WALLET_MODAL_ID, WALLET_PICKER_ID } from "./web3-wallet-picker.bucket";
+
+declare global {
+  interface BucketEventMap {
+    web3WalletSelected: Web3WalletTarget;
+  }
+}
+
+export class Web3WalletPickerComponent extends AbstractComponent {
+  static selector = "web3-wallet-picker-component";
+  hasOuterBucket = true;
+
+  ethSectionVisible$ = this.newRx(false);
+  ethExtVisible$ = this.newRx(false);
+  ethExtAvailable$ = this.newRx(false);
+  ethAppVisible$ = this.newRx(false);
+  ethAppAvailable$ = this.newRx(false);
+
+  tonSectionVisible$ = this.newRx(false);
+  tonExtVisible$ = this.newRx(false);
+  tonExtAvailable$ = this.newRx(false);
+  tonAppVisible$ = this.newRx(false);
+  tonAppAvailable$ = this.newRx(false);
+
+  solSectionVisible$ = this.newRx(false);
+  solExtVisible$ = this.newRx(false);
+  solExtAvailable$ = this.newRx(false);
+
+  tronSectionVisible$ = this.newRx(false);
+  tronExtVisible$ = this.newRx(false);
+  tronExtAvailable$ = this.newRx(false);
+
+  customOptions$ = this.newRx<{ id: string; label: string; hint: string }[]>([]);
+
+  getHTML() {
+    return `<div class="${styles.picker}">
+        <h3 class="${styles.title}">Connect wallet</h3>
+
+        <div class="${styles.section}" attached="{{ root.ethSectionVisible$::rx }}">
+          <h4 class="${styles.sectionTitle}">Ethereum</h4>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.ethExtVisible$::rx }}"
+            disabled="{{ !root.ethExtAvailable$::rx }}"
+            onclick="{{ root.pick('ethereum', 'extension') }}">
+            <span class="${styles.optionLabel}">Browser extension</span>
+            <span class="${styles.optionHint}">MetaMask, Rabby and other EIP-1193 wallets</span>
+          </button>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.ethAppVisible$::rx }}"
+            disabled="{{ !root.ethAppAvailable$::rx }}"
+            onclick="{{ root.pick('ethereum', 'app') }}">
+            <span class="${styles.optionLabel}">Mobile wallet</span>
+            <span class="${styles.optionHint}">WalletConnect</span>
+          </button>
+        </div>
+
+        <div class="${styles.section}" attached="{{ root.tonSectionVisible$::rx }}">
+          <h4 class="${styles.sectionTitle}">TON</h4>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.tonExtVisible$::rx }}"
+            disabled="{{ !root.tonExtAvailable$::rx }}"
+            onclick="{{ root.pick('ton', 'extension') }}">
+            <span class="${styles.optionLabel}">Browser extension</span>
+            <span class="${styles.optionHint}">Tonkeeper and other TON wallets</span>
+          </button>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.tonAppVisible$::rx }}"
+            disabled="{{ !root.tonAppAvailable$::rx }}"
+            onclick="{{ root.pick('ton', 'app') }}">
+            <span class="${styles.optionLabel}">Mobile wallet</span>
+            <span class="${styles.optionHint}">Tonkeeper app via Ton Connect</span>
+          </button>
+        </div>
+
+        <div class="${styles.section}" attached="{{ root.solSectionVisible$::rx }}">
+          <h4 class="${styles.sectionTitle}">Solana</h4>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.solExtVisible$::rx }}"
+            disabled="{{ !root.solExtAvailable$::rx }}"
+            onclick="{{ root.pick('solana', 'extension') }}">
+            <span class="${styles.optionLabel}">Browser extension</span>
+            <span class="${styles.optionHint}">Phantom and other Solana wallets</span>
+          </button>
+        </div>
+
+        <div class="${styles.section}" attached="{{ root.tronSectionVisible$::rx }}">
+          <h4 class="${styles.sectionTitle}">Tron</h4>
+          <button type="button" class="${styles.option}"
+            attached="{{ root.tronExtVisible$::rx }}"
+            disabled="{{ !root.tronExtAvailable$::rx }}"
+            onclick="{{ root.pick('tron', 'extension') }}">
+            <span class="${styles.optionLabel}">Browser extension</span>
+            <span class="${styles.optionHint}">TronLink</span>
+          </button>
+        </div>
+
+        <div class="${styles.section}" attached="{{ root.customOptions$::rx?.length }}">
+          <h4 class="${styles.sectionTitle}">Custom</h4>
+          <button type="button" class="${styles.option}"
+            repeat="{{ root.customOptions$::rx }}"
+            onclick="{{ root.pickCustom(repeat.id) }}">
+            <span class="${styles.optionLabel}">{{ repeat.label }}</span>
+            <span class="${styles.optionHint}" attached="{{ repeat.hint }}">{{ repeat.hint }}</span>
+          </button>
+        </div>
+      </div>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateFromConfig();
+    this.newRxFunc(() => this.updateFromConfig(), web3Service.setup$);
+  }
+
+  pick(kind: WalletKind, transport: WalletTransport) {
+    this.outerBucket.emitEvent(WALLET_PICKER_ID, "web3WalletSelected", { data: { kind, transport } });
+    this.outerBucket.emitEvent(WALLET_MODAL_ID, "closeModal", { data: { isOK: true } });
+  }
+
+  pickCustom(providerId: string) {
+    this.outerBucket.emitEvent(WALLET_PICKER_ID, "web3WalletSelected", {
+      data: { type: "custom", providerId },
+    });
+    this.outerBucket.emitEvent(WALLET_MODAL_ID, "closeModal", { data: { isOK: true } });
+  }
+
+  private updateFromConfig() {
+    const config = web3Service;
+
+    const ethExtVisible = config.isBuiltinEnabled("ethereum", "extension");
+    const ethAppVisible = config.isBuiltinEnabled("ethereum", "app");
+    const tonExtVisible = config.isBuiltinEnabled("ton", "extension");
+    const tonAppVisible = config.isBuiltinEnabled("ton", "app");
+    const solExtVisible = config.isBuiltinEnabled("solana", "extension");
+    const tronExtVisible = config.isBuiltinEnabled("tron", "extension");
+
+    this.ethExtVisible$.update(ethExtVisible);
+    this.ethAppVisible$.update(ethAppVisible);
+    this.ethSectionVisible$.update(ethExtVisible || ethAppVisible);
+
+    this.tonExtVisible$.update(tonExtVisible);
+    this.tonAppVisible$.update(tonAppVisible);
+    this.tonSectionVisible$.update(tonExtVisible || tonAppVisible);
+
+    this.solExtVisible$.update(solExtVisible);
+    this.solSectionVisible$.update(solExtVisible);
+
+    this.tronExtVisible$.update(tronExtVisible);
+    this.tronSectionVisible$.update(tronExtVisible);
+
+    this.ethExtAvailable$.update(hasInjectedWallet("ethereum"));
+    this.ethAppAvailable$.update(!!web3Service.getWalletConnectProjectId());
+    this.tonExtAvailable$.update(hasInjectedWallet("ton"));
+    this.tonAppAvailable$.update(!!web3Service.getTonManifestUrl());
+    this.solExtAvailable$.update(hasInjectedWallet("solana"));
+    this.tronExtAvailable$.update(hasInjectedWallet("tron"));
+
+    this.customOptions$.update(config.listCustomProviderOptions());
+  }
+}
+
+componentsRegistryService.define(Web3WalletPickerComponent);