@caatinga/cli 0.2.3 → 2.0.0

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

@@ -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

@@ -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", 1);
+  }
+
+  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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,29 @@
+// Keep in sync with examples/counter-web/src/wallet.ts (WalletConnect defaults differ per project).
+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

@@ -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": []
+}

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

@@ -0,0 +1,18 @@
+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")
+);
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@creit-tech/xbull-wallet-connect": join(xbullWalletConnectRoot, "src/index.ts")
+    }
+  }
+});