@caatinga/cli 0.2.4 → 2.0.1

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

@@ -1,6 +1,8 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { caatingaClient } from "../caatinga.js";
 import { CaatingaError } from "@caatinga/core/browser";
+import { useWallet } from "../context/WalletContext.js";
+import { LoadingModal } from "./LoadingModal.js";
 
 function formatCaatingaError(error: unknown): string {
   if (error instanceof CaatingaError) {
@@ -11,13 +13,22 @@ function formatCaatingaError(error: unknown): string {
 }
 
 export function CounterCard() {
+  const { publicKey } = useWallet();
   const [count, setCount] = useState<number | null>(null);
-  const [loading, setLoading] = useState(false);
+  // Start in the loading state: the component only mounts once a wallet is
+  // connected, and it fetches immediately — so the first paint should read as
+  // "Loading…" instead of flashing "Not loaded" while the read resolves.
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const formattedCount = useMemo(
-    () => (count === null ? "Unknown" : new Intl.NumberFormat().format(count)),
-    [count]
-  );
+  const formattedCount = useMemo(() => {
+    if (count !== null) {
+      return new Intl.NumberFormat().format(count);
+    }
+
+    // While loading, the LoadingModal overlay covers this; show a neutral
+    // placeholder (not "Not loaded") so nothing flashes behind it.
+    return loading ? "—" : "Not loaded";
+  }, [count, loading]);
 
   const refresh = useCallback(async () => {
     setLoading(true);
@@ -33,6 +44,18 @@ export function CounterCard() {
     }
   }, []);
 
+  useEffect(() => {
+    // Reads route through the wallet for the source account, so only fetch once
+    // a wallet is connected. Avoids the "Not loaded" state firing before connect.
+    if (!publicKey) {
+      setCount(null);
+      setLoading(false);
+      return;
+    }
+
+    void refresh();
+  }, [publicKey, refresh]);
+
   async function increment() {
     setLoading(true);
     setError(null);
@@ -53,6 +76,8 @@ export function CounterCard() {
 
   return (
     <section className="counter-panel" aria-labelledby="counter-title">
+      {loading ? <LoadingModal label={count === null ? "Loading…" : "Updating…"} /> : null}
+
       <div className="counter-panel__header">
         <div>
           <p className="eyebrow">Counter Contract</p>

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

@@ -0,0 +1,14 @@
+interface LoadingModalProps {
+  label?: string;
+}
+
+export function LoadingModal({ label = "Loading…" }: LoadingModalProps) {
+  return (
+    <div className="loading-modal" role="status" aria-live="polite" aria-label={label}>
+      <div className="loading-modal__card">
+        <span className="loading-modal__spinner" aria-hidden="true" />
+        <span className="loading-modal__label">{label}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,4 @@
-import { WalletNetwork, WalletType } from "../wallet.js";
-import { useStellarWallet } from "../hooks/useStellarWallet.js";
+import { useWallet } from "../context/WalletContext.js";
 
 function shortenAddress(address: string): string {
   if (address.length <= 12) {
@@ -10,49 +9,14 @@ function shortenAddress(address: string): string {
 }
 
 export function WalletButton() {
-  const {
-    publicKey,
-    selectedWallet,
-    network,
-    loading,
-    error,
-    selectWallet,
-    selectNetwork,
-    connect,
-    disconnect
-  } = useStellarWallet();
+  const { publicKey, loading, error, connect, disconnect } = useWallet();
 
   return (
     <div className="wallet-shell">
-      <div className="wallet-controls">
-        <label>
-          <span>Wallet</span>
-          <select
-            value={selectedWallet}
-            onChange={(event) => void selectWallet(event.target.value as WalletType)}
-          >
-            <option value={WalletType.XBULL}>xBull</option>
-            <option value={WalletType.FREIGHTER}>Freighter</option>
-            <option value={WalletType.ALBEDO}>Albedo</option>
-            <option value={WalletType.RABET}>Rabet</option>
-            <option value={WalletType.WALLET_CONNECT}>WalletConnect</option>
-          </select>
-        </label>
-        <label>
-          <span>Network</span>
-          <select
-            value={network}
-            onChange={(event) => void selectNetwork(event.target.value as WalletNetwork)}
-          >
-            <option value={WalletNetwork.TESTNET}>Testnet</option>
-            <option value={WalletNetwork.PUBLIC}>Public</option>
-          </select>
-        </label>
-      </div>
       <button
         className="wallet-button"
         type="button"
-        onClick={publicKey ? disconnect : () => void connect()}
+        onClick={publicKey ? () => void disconnect() : () => void connect()}
         disabled={loading}
         aria-live="polite"
       >

package/templates/react-vite-counter/src/context/WalletContext.tsx

@@ -0,0 +1,64 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode
+} from "react";
+import { stellarWalletAdapter } from "../wallet.js";
+
+interface WalletContextValue {
+  publicKey: string | null;
+  loading: boolean;
+  error: string | null;
+  connect: () => Promise<void>;
+  disconnect: () => Promise<void>;
+}
+
+const WalletContext = createContext<WalletContextValue | null>(null);
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+  const [publicKey, setPublicKey] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const connect = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      // openModal lists only installed/available wallets and resolves with the
+      // chosen account address (rejects if the user dismisses the modal).
+      const address = await stellarWalletAdapter.openModal();
+      setPublicKey(address);
+    } catch (caught) {
+      const message = caught instanceof Error ? caught.message : String(caught);
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const disconnect = useCallback(async () => {
+    await stellarWalletAdapter.disconnect();
+    setPublicKey(null);
+    setError(null);
+  }, []);
+
+  const value = useMemo<WalletContextValue>(
+    () => ({ publicKey, loading, error, connect, disconnect }),
+    [publicKey, loading, error, connect, disconnect]
+  );
+
+  return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>;
+}
+
+export function useWallet(): WalletContextValue {
+  const context = useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within a WalletProvider");
+  }
+
+  return context;
+}

package/templates/react-vite-counter/src/contracts/generated/counter.ts

@@ -45,7 +45,7 @@ export class Client {
   ) {}
 
   increment(): ExampleTransaction {
-    return new ExampleTransaction("increment");
+    return new ExampleTransaction("increment", 1);
   }
 
   get(): ExampleTransaction {

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

@@ -0,0 +1,14 @@
+// Stub for @hot-wallet/sdk. Stellar Wallets Kit pulls this NEAR-ecosystem SDK
+// (via its HOT Wallet module) into every import, dragging @near-js/crypto and
+// randombytes — Node-only code that references `global` and crashes in the
+// browser. The Caatinga adapter filters HOT Wallet out of the wallet list, so
+// this SDK is never actually used; aliasing it here (see vite.config.ts) keeps
+// the NEAR chain out of the bundle entirely.
+//
+// `HOT` is only referenced inside HotWalletModule methods, which are never
+// reached, so a throwing stub is safe.
+export const HOT = {
+  request(): Promise<never> {
+    return Promise.reject(new Error("HOT Wallet is not supported in this build."));
+  }
+};

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

@@ -140,6 +140,7 @@ button:hover {
 }
 
 .counter-panel {
+  position: relative;
   border: 1px solid #d9d5ca;
   border-radius: 8px;
   padding: clamp(20px, 5vw, 40px);
@@ -147,6 +148,56 @@ button:hover {
   box-shadow: 0 18px 60px rgba(32, 35, 42, 0.08);
 }
 
+.loading-modal {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(255, 253, 247, 0.72);
+  backdrop-filter: blur(2px);
+}
+
+.loading-modal__card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border: 1px solid #d9d5ca;
+  border-radius: 10px;
+  background: #fffdf7;
+  box-shadow: 0 12px 40px rgba(32, 35, 42, 0.14);
+  color: #20232a;
+  font-weight: 700;
+}
+
+.loading-modal__spinner {
+  width: 18px;
+  height: 18px;
+  border: 3px solid #d9d5ca;
+  border-top-color: #1d6154;
+  border-radius: 50%;
+  animation: loading-spin 0.7s linear infinite;
+}
+
+.loading-modal__label {
+  font-size: 0.95rem;
+}
+
+@keyframes loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-modal__spinner {
+    animation-duration: 1.6s;
+  }
+}
+
 .counter-panel__header {
   display: flex;
   align-items: flex-start;

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

@@ -1,16 +1,16 @@
+// Keep in sync with examples/counter-web/src/wallet.ts (WalletConnect defaults differ per project).
 import {
   createStellarWalletsKitAdapter,
+  WalletNetwork,
   type StellarWalletsKitMetadata
 } from "@caatinga/client/stellar-wallets-kit";
-import { WalletNetwork, WalletType } from "stellar-wallets-kit";
 
 export const stellarWalletAdapter = createStellarWalletsKitAdapter({
   network: WalletNetwork.TESTNET,
-  selectedWallet: WalletType.XBULL,
   walletConnectMetadata: getWalletConnectMetadata()
 });
 
-export { WalletNetwork, WalletType };
+export { WalletNetwork };
 
 function getWalletConnectMetadata(): StellarWalletsKitMetadata | undefined {
   const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID as string | undefined;

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

@@ -1,16 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { createRequire } from "node:module";
-import { dirname, join } from "node:path";
-
-const require = createRequire(import.meta.url);
-const xbullWalletConnectRoot = dirname(require.resolve("@creit.tech/xbull-wallet-connect/package.json"));
+import { fileURLToPath } from "node:url";
 
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      "@creit-tech/xbull-wallet-connect": join(xbullWalletConnectRoot, "src/index.ts")
+      // 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))
     }
   }
 });

package/templates/react-vite-counter/src/hooks/useStellarWallet.ts

@@ -1,70 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { stellarWalletAdapter, WalletNetwork, WalletType } from "../wallet.js";
-
-export function useStellarWallet() {
-  const [publicKey, setPublicKey] = useState<string | null>(null);
-  const [selectedWallet, setSelectedWallet] = useState<WalletType>(WalletType.XBULL);
-  const [network, setNetwork] = useState<WalletNetwork>(WalletNetwork.TESTNET);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const selectWallet = useCallback(async (wallet: WalletType) => {
-    setError(null);
-    await stellarWalletAdapter.setWallet(wallet);
-    setSelectedWallet(wallet);
-    setPublicKey(null);
-  }, []);
-
-  const selectNetwork = useCallback(async (nextNetwork: WalletNetwork) => {
-    setError(null);
-    await stellarWalletAdapter.setNetwork(nextNetwork);
-    setNetwork(nextNetwork);
-    setPublicKey(null);
-  }, []);
-
-  const connect = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      if (selectedWallet === WalletType.WALLET_CONNECT) {
-        await stellarWalletAdapter.startWalletConnect();
-        await stellarWalletAdapter.connectWalletConnect();
-      }
-
-      const key = await stellarWalletAdapter.getPublicKey();
-      setPublicKey(key);
-      return key;
-    } catch (caught) {
-      const message = caught instanceof Error ? caught.message : String(caught);
-      setPublicKey(null);
-      setError(message);
-      throw caught;
-    } finally {
-      setLoading(false);
-    }
-  }, [selectedWallet]);
-
-  const disconnect = useCallback(() => {
-    setPublicKey(null);
-    setError(null);
-  }, []);
-
-  useEffect(() => {
-    stellarWalletAdapter.onWalletConnectSessionDeleted(() => {
-      setPublicKey(null);
-    });
-  }, []);
-
-  return {
-    publicKey,
-    selectedWallet,
-    network,
-    loading,
-    error,
-    selectWallet,
-    selectNetwork,
-    connect,
-    disconnect
-  };
-}