@caatinga/cli 2.1.0 → 2.2.1

package/templates/react-vite-counter/src/components/WalletModal.tsx

@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { formatCaatingaError } from "@caatinga/core/browser";
+import type { ISupportedWallet } from "@creit.tech/stellar-wallets-kit/types";
+import { stellarWalletAdapter } from "../wallet.js";
+import {
+  cancelWalletSelection,
+  getWalletModalState,
+  resolveWalletSelection,
+  subscribeWalletModal
+} from "../wallet-modal-controller.js";
+
+const LEARN_MORE_URL = "https://developers.stellar.org/docs/build/apps/wallet/overview";
+
+// SWK wallet modules reject with plain `{ code, message }` objects, not Errors.
+function describeWalletError(caught: unknown): string {
+  if (caught && typeof caught === "object" && "message" in caught) {
+    const message = (caught as { message?: unknown }).message;
+    if (typeof message === "string" && message) {
+      return message;
+    }
+  }
+  return formatCaatingaError(caught);
+}
+
+function walletBadge(wallet: ISupportedWallet): string | null {
+  if (!wallet.isAvailable) {
+    return "Install ↗";
+  }
+  // Bridge wallets (WalletConnect) hand off to a QR code instead of an extension.
+  return wallet.type === "BRIDGE_WALLET" ? "QR code" : null;
+}
+
+interface WalletOptionProps {
+  wallet: ISupportedWallet;
+  connectingId: string | null;
+  onSelect(wallet: ISupportedWallet): void;
+}
+
+function WalletOption({ wallet, connectingId, onSelect }: WalletOptionProps) {
+  const connecting = connectingId === wallet.id;
+  const badge = walletBadge(wallet);
+
+  return (
+    <li>
+      <button
+        type="button"
+        className={connecting ? "wallet-option wallet-option--connecting" : "wallet-option"}
+        onClick={() => onSelect(wallet)}
+        disabled={connectingId !== null && !connecting}
+      >
+        <img className="wallet-option__icon" src={wallet.icon} alt="" />
+        <span className="wallet-option__name">
+          {connecting ? `Connecting to ${wallet.name}…` : wallet.name}
+        </span>
+        {connecting ? (
+          <span className="wallet-option__spinner" aria-hidden="true" />
+        ) : badge ? (
+          <span className="wallet-option__badge">{badge}</span>
+        ) : (
+          <span className="status-dot status-dot--on" aria-hidden="true" />
+        )}
+      </button>
+    </li>
+  );
+}
+
+export function WalletModal() {
+  const { open } = useSyncExternalStore(
+    subscribeWalletModal,
+    getWalletModalState,
+    getWalletModalState
+  );
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [wallets, setWallets] = useState<ISupportedWallet[] | null>(null);
+  const [connectingId, setConnectingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    setWallets(null);
+    setConnectingId(null);
+    setError(null);
+
+    // Availability probes can take a moment; ignore the result if the modal
+    // closed (or reopened) before they resolve.
+    let cancelled = false;
+    stellarWalletAdapter
+      .getSupportedWallets()
+      .then((list) => {
+        if (!cancelled) {
+          setWallets(list);
+        }
+      })
+      .catch((caught: unknown) => {
+        if (!cancelled) {
+          setWallets([]);
+          setError(describeWalletError(caught));
+        }
+      });
+
+    panelRef.current?.focus();
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        cancelWalletSelection();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      cancelled = true;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  if (!open) {
+    return null;
+  }
+
+  async function selectWallet(wallet: ISupportedWallet) {
+    if (connectingId) {
+      return;
+    }
+
+    if (!wallet.isAvailable) {
+      window.open(wallet.url, "_blank", "noopener");
+      return;
+    }
+
+    setError(null);
+    setConnectingId(wallet.id);
+    try {
+      stellarWalletAdapter.setWallet(wallet.id);
+      const address = await stellarWalletAdapter.getPublicKey();
+      resolveWalletSelection(address);
+    } catch (caught) {
+      setError(describeWalletError(caught));
+    } finally {
+      setConnectingId(null);
+    }
+  }
+
+  const detected = wallets?.filter((wallet) => wallet.isAvailable) ?? [];
+  const others = wallets?.filter((wallet) => !wallet.isAvailable) ?? [];
+
+  return (
+    <div
+      className="wallet-modal"
+      role="presentation"
+      onClick={(event) => {
+        if (event.target === event.currentTarget) {
+          cancelWalletSelection();
+        }
+      }}
+    >
+      <div
+        ref={panelRef}
+        className="wallet-modal__panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="wallet-modal-title"
+        tabIndex={-1}
+      >
+        <header className="wallet-modal__header">
+          <h2 id="wallet-modal-title">Connect a wallet</h2>
+          <button
+            type="button"
+            className="wallet-modal__close"
+            onClick={() => cancelWalletSelection()}
+            aria-label="Close"
+          >
+            ✕
+          </button>
+        </header>
+
+        {error ? (
+          <p className="wallet-modal__error" role="alert">
+            {error}
+          </p>
+        ) : null}
+
+        <div className="wallet-modal__body">
+          {wallets === null ? (
+            <ul className="wallet-modal__list" aria-label="Loading wallets">
+              {[0, 1, 2].map((row) => (
+                <li key={row} className="wallet-option wallet-option--skeleton" aria-hidden="true">
+                  <span className="wallet-skeleton__icon" />
+                  <span className="wallet-skeleton__line" />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <>
+              {detected.length > 0 ? (
+                <>
+                  <p className="eyebrow wallet-modal__section">Detected</p>
+                  <ul className="wallet-modal__list">
+                    {detected.map((wallet) => (
+                      <WalletOption
+                        key={wallet.id}
+                        wallet={wallet}
+                        connectingId={connectingId}
+                        onSelect={(selected) => void selectWallet(selected)}
+                      />
+                    ))}
+                  </ul>
+                </>
+              ) : null}
+
+              {others.length > 0 ? (
+                <>
+                  <p className="eyebrow wallet-modal__section">More wallets</p>
+                  <ul className="wallet-modal__list">
+                    {others.map((wallet) => (
+                      <WalletOption
+                        key={wallet.id}
+                        wallet={wallet}
+                        connectingId={connectingId}
+                        onSelect={(selected) => void selectWallet(selected)}
+                      />
+                    ))}
+                  </ul>
+                </>
+              ) : null}
+
+              {detected.length === 0 && others.length === 0 && !error ? (
+                <p className="wallet-modal__empty">
+                  No wallets available. Install a Stellar wallet to continue.
+                </p>
+              ) : null}
+            </>
+          )}
+
+        </div>
+
+        <footer className="wallet-modal__footer">
+          <span>New to Stellar wallets?</span>
+          <a href={LEARN_MORE_URL} target="_blank" rel="noreferrer">
+            Learn more ↗
+          </a>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/templates/react-vite-counter/src/stubs/empty-wallet-dep/index.cjs

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = {};

package/templates/react-vite-counter/src/stubs/empty-wallet-dep/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "empty-wallet-dep",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./index.cjs"
+}

package/templates/react-vite-counter/src/stubs/hot-wallet-sdk/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.HOT = {
+  request() {
+    return Promise.reject(new Error("HOT Wallet is not supported in this build."));
+  }
+};

package/templates/react-vite-counter/src/stubs/hot-wallet-sdk/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@hot-wallet/sdk",
+  "version": "1.0.11",
+  "private": true,
+  "main": "./index.cjs"
+}

package/templates/react-vite-counter/src/styles.css

@@ -239,6 +239,232 @@ button:hover {
   background: #f4f2ec;
 }
 
+.wallet-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(32, 35, 42, 0.45);
+  backdrop-filter: blur(3px);
+}
+
+.wallet-modal__panel {
+  display: flex;
+  flex-direction: column;
+  width: min(400px, 100%);
+  max-height: min(600px, calc(100vh - 32px));
+  border: 1px solid #d9d5ca;
+  border-radius: 12px;
+  background: #fffdf7;
+  box-shadow: 0 18px 60px rgba(32, 35, 42, 0.22);
+  outline: none;
+  animation: wallet-modal-pop 0.18s ease;
+}
+
+@keyframes wallet-modal-pop {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+.wallet-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 20px 8px;
+}
+
+.wallet-modal__header h2 {
+  margin: 0;
+  color: #16181d;
+  font-size: 1.2rem;
+}
+
+.wallet-modal__close {
+  width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #697076;
+  font-size: 0.95rem;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.wallet-modal__close:hover {
+  background: #f4f2ec;
+  color: #20232a;
+}
+
+.wallet-modal__body {
+  overflow-y: auto;
+  padding: 0 12px 16px;
+}
+
+.wallet-modal__section {
+  margin: 14px 10px 6px;
+}
+
+.wallet-modal__list {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wallet-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 56px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: #20232a;
+  font-weight: 700;
+  text-align: left;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.wallet-option:hover {
+  background: #f4f2ec;
+  border-color: #d9d5ca;
+}
+
+.wallet-option:disabled {
+  background: transparent;
+  border-color: transparent;
+  opacity: 0.5;
+  cursor: default;
+}
+
+.wallet-option--connecting,
+.wallet-option--connecting:hover {
+  background: #f4f2ec;
+  border-color: #d9d5ca;
+}
+
+.wallet-option__icon {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #eee9dd;
+  border-radius: 8px;
+  background: #ffffff;
+  object-fit: contain;
+}
+
+.wallet-option__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-option__badge {
+  border: 1px solid #d9d5ca;
+  border-radius: 999px;
+  padding: 3px 10px;
+  background: #ffffff;
+  color: #45515a;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.wallet-option__spinner {
+  width: 16px;
+  height: 16px;
+  border: 3px solid #d9d5ca;
+  border-top-color: #1d6154;
+  border-radius: 50%;
+  animation: loading-spin 0.7s linear infinite;
+}
+
+.wallet-option--skeleton {
+  pointer-events: none;
+}
+
+.wallet-skeleton__icon,
+.wallet-skeleton__line {
+  border-radius: 8px;
+  background: #ece8dc;
+  animation: wallet-skeleton-pulse 1.2s ease-in-out infinite;
+}
+
+.wallet-skeleton__icon {
+  flex: none;
+  width: 36px;
+  height: 36px;
+}
+
+.wallet-skeleton__line {
+  width: 45%;
+  height: 14px;
+}
+
+@keyframes wallet-skeleton-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.wallet-modal__empty {
+  margin: 14px 10px;
+  color: #45515a;
+  font-size: 0.88rem;
+  line-height: 1.4;
+}
+
+.wallet-modal__error {
+  margin: 0 20px 4px;
+  max-height: 72px;
+  overflow-y: auto;
+  border: 1px solid #e7c8c8;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: #fbf1f1;
+  color: #8b1e1e;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+.wallet-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid #eee9dd;
+  color: #697076;
+  font-size: 0.82rem;
+}
+
+.wallet-modal__footer a {
+  color: #1d6154;
+  font-weight: 700;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.wallet-modal__footer a:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 560px) {
   .topbar,
   .counter-panel__header {
@@ -254,4 +480,39 @@ button:hover {
     width: 100%;
     justify-content: center;
   }
+
+  .wallet-modal {
+    align-items: flex-end;
+    padding: 0;
+  }
+
+  .wallet-modal__panel {
+    width: 100%;
+    max-height: 80vh;
+    border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+    animation: wallet-modal-rise 0.2s ease;
+  }
+}
+
+@keyframes wallet-modal-rise {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wallet-modal__panel {
+    animation: none;
+  }
+
+  .wallet-option__spinner {
+    animation-duration: 1.6s;
+  }
+
+  .wallet-skeleton__icon,
+  .wallet-skeleton__line {
+    animation: none;
+  }
 }

package/templates/react-vite-counter/src/wallet-modal-controller.ts

@@ -0,0 +1,73 @@
+// Promise bridge between the wallet adapter's `openModal()` capability and the
+// <WalletModal> component. The adapter resolves the same promise the wallet
+// session awaits, so connect/persist/restore flows stay untouched.
+
+export interface WalletModalState {
+  open: boolean;
+}
+
+/**
+ * `error.name` used when the user closes the modal without picking a wallet.
+ * Closing on purpose is not a failure, so the UI can suppress this one.
+ */
+export const WALLET_SELECTION_CLOSED_ERROR = "WalletSelectionClosedError";
+
+interface PendingSelection {
+  resolve(address: string): void;
+  reject(error: Error): void;
+}
+
+let state: WalletModalState = { open: false };
+let pending: PendingSelection | null = null;
+const listeners = new Set<() => void>();
+
+function setState(next: WalletModalState): void {
+  state = next;
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+export function getWalletModalState(): WalletModalState {
+  return state;
+}
+
+export function subscribeWalletModal(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** Opens the modal. Resolves with the connected address, rejects when closed. */
+export function requestWalletSelection(): Promise<string> {
+  // A connect while the modal is already open supersedes the previous request.
+  cancelWalletSelection();
+
+  return new Promise<string>((resolve, reject) => {
+    pending = { resolve, reject };
+    setState({ open: true });
+  });
+}
+
+export function resolveWalletSelection(address: string): void {
+  const current = pending;
+  pending = null;
+  if (state.open) {
+    setState({ open: false });
+  }
+  current?.resolve(address);
+}
+
+export function cancelWalletSelection(): void {
+  const current = pending;
+  pending = null;
+  if (state.open) {
+    setState({ open: false });
+  }
+  if (current) {
+    const error = new Error("Wallet selection closed.");
+    error.name = WALLET_SELECTION_CLOSED_ERROR;
+    current.reject(error);
+  }
+}

package/templates/react-vite-counter/src/wallet.ts

@@ -4,12 +4,20 @@ import {
   WalletNetwork,
   type StellarWalletsKitMetadata
 } from "@caatinga/client/stellar-wallets-kit";
+import { requestWalletSelection } from "./wallet-modal-controller.js";
 
-export const stellarWalletAdapter = createStellarWalletsKitAdapter({
+const baseWalletAdapter = createStellarWalletsKitAdapter({
   network: WalletNetwork.TESTNET,
   walletConnectMetadata: getWalletConnectMetadata()
 });
 
+// Route connect() through the custom <WalletModal> instead of SWK's built-in
+// authModal. Everything else (persistence, restore, signing) is untouched.
+export const stellarWalletAdapter = {
+  ...baseWalletAdapter,
+  openModal: () => requestWalletSelection()
+};
+
 export { WalletNetwork };
 
 function getWalletConnectMetadata(): StellarWalletsKitMetadata | undefined {

package/templates/react-vite-counter/vite.config.ts

@@ -2,6 +2,15 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath } from "node:url";
 
+// Empty CJS module. Aliasing browser-hostile wallet sub-deps here keeps them out
+// of the bundle on yarn/bun (and as a safety net on npm/pnpm). Install-time
+// overrides in package.json / pnpm-workspace.yaml block the same deps from
+// being installed. CJS interop lets any named import resolve to `undefined`
+// without an esbuild "not exported" error.
+const emptyStub = fileURLToPath(
+  new URL("./src/stubs/empty-wallet-dep/index.cjs", import.meta.url)
+);
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
@@ -9,7 +18,14 @@ export default defineConfig({
       // Stellar Wallets Kit drags NEAR's @hot-wallet/sdk (Node-only crypto) into
       // the browser bundle. The adapter filters HOT Wallet out, so stub the SDK
       // to keep the NEAR chain out of the build. See src/stubs/hot-wallet.ts.
-      "@hot-wallet/sdk": fileURLToPath(new URL("./src/stubs/hot-wallet.ts", import.meta.url))
+      "@hot-wallet/sdk": fileURLToPath(new URL("./src/stubs/hot-wallet.ts", import.meta.url)),
+      // SWK + Reown/WalletConnect pull Trezor Connect (Node-only) and Safe Global
+      // SDKs that none of the wallets Caatinga ships actually use.
+      "@trezor/connect-web": emptyStub,
+      "@trezor/connect-plugin-stellar": emptyStub,
+      "@safe-global/safe-apps-sdk": emptyStub,
+      "@safe-global/safe-apps-provider": emptyStub,
+      "@safe-global/safe-gateway-typescript-sdk": emptyStub
     }
   }
 });