@caatinga/cli 0.2.1 → 0.2.2

package/templates/react-vite-counter/contracts/counter/Cargo.toml

@@ -1,6 +1,7 @@
 [package]
 name = "counter"
 version = "0.1.0"
+rust-version = "1.84.0"
 edition = "2021"
 
 [lib]

package/templates/react-vite-counter/package.json

@@ -12,8 +12,8 @@
     "caatinga:generate": "caatinga generate counter"
   },
   "dependencies": {
-    "@caatinga/client": "^0.2.1",
-    "@caatinga/core": "^0.2.1",
+    "@caatinga/client": "^0.2.2",
+    "@caatinga/core": "^0.2.2",
     "@stellar/freighter-api": "^4.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^6.0.6",
@@ -21,7 +21,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@caatinga/cli": "^0.2.1",
+    "@caatinga/cli": "^0.2.2",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "typescript": "^5.7.2"

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

@@ -0,0 +1,20 @@
+import { createCaatingaClient } from "@caatinga/client";
+import { freighterWalletAdapter } from "@caatinga/client/freighter";
+import type { CaatingaArtifacts } from "@caatinga/core/browser";
+import artifactsJson from "../caatinga.artifacts.json";
+import * as Counter from "./contracts/generated/counter.js";
+
+const artifacts = artifactsJson as CaatingaArtifacts;
+
+export const caatingaClient = createCaatingaClient({
+  network: {
+    name: "testnet",
+    rpcUrl: "https://soroban-testnet.stellar.org",
+    networkPassphrase: "Test SDF Network ; September 2015"
+  },
+  artifacts,
+  wallet: freighterWalletAdapter,
+  contracts: {
+    counter: { binding: Counter }
+  }
+});

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

@@ -1,9 +1,40 @@
 import { useMemo, useState } from "react";
+import { caatingaClient } from "../caatinga.js";
+import { CaatingaError } from "@caatinga/core/browser";
+
+function formatCaatingaError(error: unknown): string {
+  if (error instanceof CaatingaError) {
+    return `[${error.code}] ${error.message}\n\n${error.hint}`;
+  }
+
+  return error instanceof Error ? error.message : String(error);
+}
 
 export function CounterCard() {
   const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const formattedCount = useMemo(() => new Intl.NumberFormat().format(count), [count]);
 
+  async function increment() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      await caatingaClient.contract("counter").invoke("increment");
+      setCount((value) => value + 1);
+    } catch (caught) {
+      setError(formatCaatingaError(caught));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function reset() {
+    setCount(0);
+    setError(null);
+  }
+
   return (
     <section className="counter-panel" aria-labelledby="counter-title">
       <div className="counter-panel__header">
@@ -17,13 +48,19 @@ export function CounterCard() {
       <div className="counter-value">{formattedCount}</div>
 
       <div className="counter-actions">
-        <button type="button" onClick={() => setCount((value) => value + 1)}>
-          Increment
+        <button type="button" onClick={increment} disabled={loading}>
+          {loading ? "Incrementing…" : "Increment"}
         </button>
-        <button className="secondary-button" type="button" onClick={() => setCount(0)}>
+        <button className="secondary-button" type="button" onClick={reset} disabled={loading}>
           Reset
         </button>
       </div>
+
+      {error ? (
+        <pre className="counter-error" role="alert">
+          {error}
+        </pre>
+      ) : null}
     </section>
   );
 }

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

@@ -1,12 +1,65 @@
+import { freighterWalletAdapter } from "@caatinga/client/freighter";
 import { useState } from "react";
+import { CaatingaError } from "@caatinga/core/browser";
+
+function formatWalletError(error: unknown): string {
+  if (error instanceof CaatingaError) {
+    return `[${error.code}] ${error.message}`;
+  }
+
+  return error instanceof Error ? error.message : String(error);
+}
+
+function shortenAddress(address: string): string {
+  if (address.length <= 12) {
+    return address;
+  }
+
+  return `${address.slice(0, 4)}…${address.slice(-4)}`;
+}
 
 export function WalletButton() {
-  const [connected, setConnected] = useState(false);
+  const [publicKey, setPublicKey] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function connect() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const key = await freighterWalletAdapter.getPublicKey();
+      setPublicKey(key);
+    } catch (caught) {
+      setPublicKey(null);
+      setError(formatWalletError(caught));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function disconnect() {
+    setPublicKey(null);
+    setError(null);
+  }
 
   return (
-    <button className="wallet-button" type="button" onClick={() => setConnected((value) => !value)}>
-      <span className={connected ? "status-dot status-dot--on" : "status-dot"} />
-      {connected ? "Connected" : "Connect"}
-    </button>
+    <div className="wallet-shell">
+      <button
+        className="wallet-button"
+        type="button"
+        onClick={publicKey ? disconnect : connect}
+        disabled={loading}
+        aria-live="polite"
+      >
+        <span className={publicKey ? "status-dot status-dot--on" : "status-dot"} />
+        {loading ? "Connecting…" : publicKey ? shortenAddress(publicKey) : "Connect"}
+      </button>
+      {error ? (
+        <p className="wallet-error" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
   );
 }

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

@@ -0,0 +1,49 @@
+type TransactionResult = {
+  txHash: string;
+  result?: unknown;
+};
+
+class ExampleTransaction {
+  constructor(
+    private readonly method: string,
+    private readonly result?: unknown
+  ) {}
+
+  toXDR(): string {
+    return `example-${this.method}-xdr`;
+  }
+
+  async prepare(): Promise<ExampleTransaction> {
+    return this;
+  }
+
+  async signAndSend(): Promise<TransactionResult> {
+    return {
+      txHash: "example-transaction-hash",
+      result: this.result
+    };
+  }
+}
+
+export class Client {
+  constructor(
+    private readonly input: {
+      contractId: string;
+      publicKey: string;
+      rpcUrl: string;
+      networkPassphrase: string;
+    }
+  ) {}
+
+  increment(): ExampleTransaction {
+    return new ExampleTransaction("increment");
+  }
+
+  get(): ExampleTransaction {
+    return new ExampleTransaction("get", 1);
+  }
+
+  describe(): string {
+    return `${this.input.contractId}:${this.input.publicKey}`;
+  }
+}

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

@@ -72,6 +72,27 @@ button:hover {
   text-transform: uppercase;
 }
 
+.wallet-shell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.wallet-error,
+.counter-error {
+  margin: 0;
+  max-width: min(360px, 100%);
+  color: #8b1e1e;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+.counter-error {
+  margin-top: 16px;
+}
+
 .wallet-button,
 .network-pill {
   display: inline-flex;

package/templates/react-vite-counter/tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

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

@@ -1 +0,0 @@
-