npm - @caatinga/cli - Versions diffs - 0.2.3 → 0.2.4 - Mend

@caatinga/cli 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

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

@@ -0,0 +1,24 @@
+[package]
+name = "counter"
+version = "0.1.0"
+rust-version = "1.84.0"
+edition = "2021"
+[lib]
+crate-type = ["cdylib"]
+[dependencies]
+soroban-sdk = "22.0.1"
+[dev-dependencies]
+soroban-sdk = { version = "22.0.1", features = ["testutils"] }
+[profile.release]
+opt-level = "z"
+overflow-checks = true
+debug = 0
+strip = "symbols"
+debug-assertions = false
+panic = "abort"
+codegen-units = 1
+lto = true

package/templates/react-vite-counter/contracts/counter/src/lib.rs ADDED Viewed

@@ -0,0 +1,36 @@
+#![no_std]
+use soroban_sdk::{contract, contractimpl, Env};
+#[contract]
+pub struct CounterContract;
+#[contractimpl]
+impl CounterContract {
+    pub fn get(env: Env) -> u32 {
+        env.storage().instance().get(&"count").unwrap_or(0)
+    }
+    pub fn increment(env: Env) -> u32 {
+        let count = Self::get(env.clone()) + 1;
+        env.storage().instance().set(&"count", &count);
+        count
+    }
+}
+#[cfg(test)]
+mod test {
+    use super::*;
+    use soroban_sdk::Env;
+    #[test]
+    fn increments_counter() {
+        let env = Env::default();
+        let contract_id = env.register(CounterContract, ());
+        let client = CounterContractClient::new(&env, &contract_id);
+        assert_eq!(client.get(), 0);
+        assert_eq!(client.increment(), 1);
+        assert_eq!(client.get(), 1);
+    }
+}

package/templates/react-vite-counter/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,30 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "caatinga:build": "caatinga build counter",
+    "caatinga:deploy": "caatinga deploy counter",
+    "caatinga:generate": "caatinga generate counter"
+  },
+  "dependencies": {
+    "@caatinga/client": "^0.2.4",
+    "@caatinga/core": "^0.2.4",
+    "@creit.tech/xbull-wallet-connect": "github:Creit-Tech/xBull-Wallet-Connect",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stellar-wallets-kit": "github:Creit-Tech/Stellar-Wallets-Kit#v0.0.7",
+    "vite": "^6.0.6"
+  },
+  "devDependencies": {
+    "@caatinga/cli": "^0.2.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "typescript": "^5.7.2"
+  }
+}

package/templates/react-vite-counter/public/.gitkeep ADDED Viewed

	@@ -0,0 +1 @@
1	+

package/templates/react-vite-counter/src/App.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { CounterCard } from "./components/CounterCard";
+import { WalletButton } from "./components/WalletButton";
+export default function App() {
+  return (
+    <main className="app-shell">
+      <header className="topbar">
+        <div>
+          <p className="eyebrow">Caatinga</p>
+          <h1>__PROJECT_NAME__</h1>
+        </div>
+        <WalletButton />
+      </header>
+      <CounterCard />
+    </main>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { createCaatingaClient } from "@caatinga/client";
+import type { CaatingaArtifacts } from "@caatinga/core/browser";
+import artifactsJson from "../caatinga.artifacts.json";
+import * as Counter from "./contracts/generated/counter.js";
+import { stellarWalletAdapter } from "./wallet.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: stellarWalletAdapter,
+  contracts: {
+    counter: { binding: Counter }
+  }
+});

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

@@ -0,0 +1,82 @@
+import { useCallback, 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<number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const formattedCount = useMemo(
+    () => (count === null ? "Unknown" : new Intl.NumberFormat().format(count)),
+    [count]
+  );
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const nextCount = await caatingaClient.contract("counter").read<number>("get");
+      setCount(nextCount);
+    } catch (caught) {
+      setError(formatCaatingaError(caught));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  async function increment() {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await caatingaClient.contract("counter").invoke<number>("increment");
+      if (typeof result.result === "number") {
+        setCount(result.result);
+      } else {
+        await refresh();
+      }
+    } catch (caught) {
+      setError(formatCaatingaError(caught));
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <section className="counter-panel" aria-labelledby="counter-title">
+      <div className="counter-panel__header">
+        <div>
+          <p className="eyebrow">Counter Contract</p>
+          <h2 id="counter-title">Counter</h2>
+        </div>
+        <span className="network-pill">testnet</span>
+      </div>
+      <div className="counter-value">{formattedCount}</div>
+      <div className="counter-actions">
+        <button type="button" onClick={increment} disabled={loading}>
+          {loading ? "Incrementing…" : "Increment"}
+        </button>
+        <button className="secondary-button" type="button" onClick={refresh} disabled={loading}>
+          Refresh
+        </button>
+      </div>
+      {error ? (
+        <pre className="counter-error" role="alert">
+          {error}
+        </pre>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { WalletNetwork, WalletType } from "../wallet.js";
+import { useStellarWallet } from "../hooks/useStellarWallet.js";
+function shortenAddress(address: string): string {
+  if (address.length <= 12) {
+    return address;
+  }
+  return `${address.slice(0, 4)}…${address.slice(-4)}`;
+}
+export function WalletButton() {
+  const {
+    publicKey,
+    selectedWallet,
+    network,
+    loading,
+    error,
+    selectWallet,
+    selectNetwork,
+    connect,
+    disconnect
+  } = useStellarWallet();
+  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()}
+        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 ADDED Viewed

@@ -0,0 +1,58 @@
+type TransactionResult = {
+  txHash: string;
+  result?: unknown;
+};
+type SignTransaction = (
+  xdr: string,
+  opts?: { networkPassphrase?: string; address?: string }
+) => Promise<{ signedTxXdr: string }> | { signedTxXdr: string };
+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(input?: { signTransaction?: SignTransaction }): Promise<TransactionResult> {
+    const signed = input?.signTransaction
+      ? await input.signTransaction(this.toXDR())
+      : { signedTxXdr: this.toXDR() };
+    return {
+      txHash: `example-transaction-hash:${signed.signedTxXdr}`,
+      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/hooks/useStellarWallet.ts ADDED Viewed

@@ -0,0 +1,70 @@
+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
+  };
+}

package/templates/react-vite-counter/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles.css";
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

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

@@ -0,0 +1,206 @@
+:root {
+  color: #20232a;
+  background: #f4f2ec;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+button {
+  min-height: 44px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 16px;
+  background: #1d6154;
+  color: #ffffff;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+button:hover {
+  background: #174d44;
+}
+.app-shell {
+  width: min(960px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 24px 0;
+}
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+.topbar h1,
+.counter-panel h2 {
+  margin: 0;
+  color: #16181d;
+  letter-spacing: 0;
+}
+.topbar h1 {
+  font-size: clamp(2rem, 8vw, 4rem);
+  line-height: 1;
+}
+.counter-panel h2 {
+  font-size: 1.35rem;
+}
+.eyebrow {
+  margin: 0 0 8px;
+  color: #697076;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.wallet-shell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+.wallet-controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.wallet-controls label {
+  display: grid;
+  gap: 4px;
+  color: #45515a;
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+.wallet-controls select {
+  min-height: 36px;
+  border: 1px solid #d9d5ca;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #20232a;
+  font: inherit;
+  font-size: 0.86rem;
+  text-transform: none;
+}
+.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;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #a9afb4;
+}
+.status-dot--on {
+  background: #66c887;
+}
+.counter-panel {
+  border: 1px solid #d9d5ca;
+  border-radius: 8px;
+  padding: clamp(20px, 5vw, 40px);
+  background: #fffdf7;
+  box-shadow: 0 18px 60px rgba(32, 35, 42, 0.08);
+}
+.counter-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.network-pill {
+  min-height: 32px;
+  border: 1px solid #d9d5ca;
+  border-radius: 999px;
+  padding: 0 12px;
+  color: #45515a;
+  font-weight: 700;
+}
+.counter-value {
+  margin: 48px 0;
+  color: #111318;
+  font-size: clamp(5rem, 24vw, 12rem);
+  font-weight: 900;
+  line-height: 0.9;
+  letter-spacing: 0;
+}
+.counter-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.secondary-button {
+  border: 1px solid #d9d5ca;
+  background: #ffffff;
+  color: #20232a;
+}
+.secondary-button:hover {
+  background: #f4f2ec;
+}
+@media (max-width: 560px) {
+  .topbar,
+  .counter-panel__header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .wallet-button,
+  .wallet-controls,
+  .wallet-controls label,
+  .wallet-controls select,
+  .counter-actions button {
+    width: 100%;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,28 @@
+import {
+  createStellarWalletsKitAdapter,
+  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 };
+function getWalletConnectMetadata(): StellarWalletsKitMetadata | undefined {
+  const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID as string | undefined;
+  if (!projectId) {
+    return undefined;
+  }
+  return {
+    projectId,
+    name: import.meta.env.VITE_APP_NAME ?? "__PROJECT_NAME__",
+    description: import.meta.env.VITE_APP_DESCRIPTION ?? "Caatinga counter dApp",
+    url: import.meta.env.VITE_APP_URL ?? window.location.origin,
+    icons: [import.meta.env.VITE_APP_ICON_URL ?? `${window.location.origin}/icon.png`]
+  };
+}

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

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": []
+}