@trustless-work/blocks 1.2.1 → 1.2.2

package/bin/index.js

@@ -157,8 +157,81 @@ function readProjectPackageJson() {
   }
 }
 
+/**
+ * Returns the set of npm package names already present in the user's package.json
+ * (both dependencies and devDependencies). Used to avoid reinstalling what already exists.
+ */
+function getInstalledPackages() {
+  const pkg = readProjectPackageJson();
+  if (!pkg) return new Set();
+  return new Set([
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.devDependencies || {}),
+  ]);
+}
+
+/**
+ * Returns the set of shadcn component names already installed in the user's project
+ * by scanning the UI components directory (derived from .twblocks.json uiBase).
+ */
+function getInstalledShadcnComponents() {
+  const config = loadConfig();
+  const uiBase = config.uiBase || "@/components/ui";
+  const uiRelative = uiBase.replace(/^@\//, "src/");
+  const uiDir = path.join(PROJECT_ROOT, uiRelative);
+  if (!fs.existsSync(uiDir)) return new Set();
+  try {
+    const files = fs.readdirSync(uiDir);
+    return new Set(files.map((f) => f.replace(/\.(tsx?|jsx?)$/, "")));
+  } catch {
+    return new Set();
+  }
+}
+
+/**
+ * Resolves the deps.json for a given block by walking up the template directory tree.
+ * This allows sub-blocks (e.g. escrows/single-release/initialize-escrow) to inherit
+ * from their parent block's deps.json (e.g. escrows/deps.json).
+ *
+ * Falls back to the global templates/deps.json if no block-specific file is found.
+ */
+function resolveBlockDeps(blockName) {
+  const normalizedBase = TEMPLATES_DIR.split(path.sep).join("/");
+  let dir = path.join(TEMPLATES_DIR, blockName);
+
+  while (dir.split(path.sep).join("/").startsWith(normalizedBase)) {
+    const candidate = path.join(dir, "deps.json");
+    if (fs.existsSync(candidate)) {
+      try {
+        return JSON.parse(fs.readFileSync(candidate, "utf8"));
+      } catch {
+        // Malformed JSON — keep walking up
+      }
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break; // filesystem root
+    dir = parent;
+  }
+
+  // Fallback to global deps.json
+  if (fs.existsSync(GLOBAL_DEPS_FILE)) {
+    try {
+      return JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
+    } catch {
+      return { dependencies: {}, devDependencies: {}, shadcnComponents: [] };
+    }
+  }
+
+  return { dependencies: {}, devDependencies: {}, shadcnComponents: [] };
+}
+
+/**
+ * Installs npm dependencies, filtering out packages that are already installed
+ * in the user's project and packages in the BLOCKED set (installed via other means).
+ */
 function installDeps({ dependencies = {}, devDependencies = {} }) {
   const pm = detectPM();
+  const installed = getInstalledPackages();
   const BLOCKED = new Set([
     "tailwindcss",
     "@tailwindcss/cli",
@@ -169,11 +242,12 @@ function installDeps({ dependencies = {}, devDependencies = {} }) {
     "postcss-import",
     "@creit-tech/stellar-wallets-kit",
   ]);
+
   const depList = Object.entries(dependencies)
-    .filter(([k]) => !BLOCKED.has(k))
+    .filter(([k]) => !BLOCKED.has(k) && !installed.has(k))
     .map(([k, v]) => `${k}@${v}`);
   const devList = Object.entries(devDependencies)
-    .filter(([k]) => !BLOCKED.has(k))
+    .filter(([k]) => !BLOCKED.has(k) && !installed.has(k))
     .map(([k, v]) => `${k}@${v}`);
 
   if (depList.length) {
@@ -191,6 +265,75 @@ function installDeps({ dependencies = {}, devDependencies = {} }) {
   }
 }
 
+/**
+ * Installs only the shadcn components that are not yet present in the user's project.
+ */
+async function installShadcnComponents(components = []) {
+  if (!components.length) return;
+  const installed = getInstalledShadcnComponents();
+  const missing = components.filter((c) => !installed.has(c));
+  if (!missing.length) return;
+  // Suppress stdout from shadcn CLI (it prints noisy wrapper instructions).
+  // Errors still go to stderr so failures are visible.
+  return new Promise((resolve, reject) => {
+    const child = spawn("npx", ["shadcn@latest", "add", ...missing], {
+      stdio: ["inherit", "pipe", "pipe"],
+      cwd: PROJECT_ROOT,
+      shell: true,
+    });
+    child.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`shadcn add exited with code ${code}`));
+    });
+  });
+}
+
+/**
+ * Orchestrates the full dependency installation for a given block:
+ * 1. Resolves the block's deps.json
+ * 2. Installs missing npm dependencies
+ * 3. Installs missing shadcn components
+ * 4. Handles JSR-based packages (stellar-wallets-kit)
+ */
+async function installBlockDeps(blockName) {
+  const meta = resolveBlockDeps(blockName);
+  const hasDeps =
+    Object.keys(meta.dependencies || {}).length > 0 ||
+    Object.keys(meta.devDependencies || {}).length > 0;
+  const hasShadcn =
+    Array.isArray(meta.shadcnComponents) && meta.shadcnComponents.length > 0;
+
+  if (!hasDeps && !hasShadcn) return;
+
+  if (hasShadcn) {
+    await withSpinner("Installing required shadcn/ui components", async () => {
+      await installShadcnComponents(meta.shadcnComponents);
+    });
+  }
+
+  if (hasDeps) {
+    await withSpinner("Installing required dependencies", async () => {
+      installDeps(meta);
+    });
+
+    // Handle JSR-based package separately
+    if (
+      meta.dependencies &&
+      meta.dependencies["@creit-tech/stellar-wallets-kit"]
+    ) {
+      const installed = getInstalledPackages();
+      if (!installed.has("@creit-tech/stellar-wallets-kit")) {
+        await withSpinner(
+          "Installing @creit-tech/stellar-wallets-kit from JSR",
+          async () => {
+            run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+          }
+        );
+      }
+    }
+  }
+}
+
 function loadConfig() {
   const cfgPath = path.join(PROJECT_ROOT, ".twblocks.json");
   if (fs.existsSync(cfgPath)) {
@@ -214,11 +357,117 @@ function parseFlags(argv) {
       i++;
     } else if (a === "--install" || a === "-i") {
       flags.install = true;
+    } else if (a === "--no-install") {
+      flags.noInstall = true;
     }
   }
   return flags;
 }
 
+/**
+ * Declarative map of peer dependencies per block prefix.
+ * When a block is added, ALL matching prefixes are merged so sub-blocks
+ * inherit from their parent prefix.
+ *
+ * - blocks:    other template directories to auto-copy (wallet-kit, tanstack, etc.)
+ * - providers: individual provider files to auto-copy (EscrowProvider, etc.)
+ */
+const PEER_DEPS = {
+  // Root escrows bundle — copies ALL sub-blocks, so needs ALL providers
+  escrows: {
+    blocks: ["helpers", "handle-errors", "wallet-kit", "tanstack"],
+    providers: [
+      "EscrowProvider",
+      "EscrowDialogsProvider",
+      "EscrowAmountProvider",
+      "WalletProvider",
+      "ReactQueryClientProvider",
+      "TrustlessWork",
+    ],
+  },
+  // Bundle: single-release includes release-escrow which needs Dialogs + Amount
+  "escrows/single-release": {
+    providers: ["EscrowDialogsProvider", "EscrowAmountProvider"],
+  },
+  // Bundle: multi-release includes release-milestone which needs Dialogs + Amount
+  "escrows/multi-release": {
+    providers: ["EscrowDialogsProvider", "EscrowAmountProvider"],
+  },
+  // Individual sub-blocks
+  "escrows/escrows-by-role": {
+    providers: ["EscrowDialogsProvider"],
+  },
+  "escrows/escrows-by-signer": {
+    providers: ["EscrowDialogsProvider"],
+  },
+  "escrows/details": {
+    providers: ["EscrowDialogsProvider", "EscrowAmountProvider"],
+  },
+  "escrows/single-release/release-escrow": {
+    providers: ["EscrowDialogsProvider", "EscrowAmountProvider"],
+  },
+  "escrows/multi-release/release-milestone": {
+    providers: ["EscrowDialogsProvider", "EscrowAmountProvider"],
+  },
+  // Dashboard
+  dashboard: {
+    blocks: ["helpers", "wallet-kit", "tanstack"],
+    providers: ["WalletProvider", "ReactQueryClientProvider", "TrustlessWork"],
+  },
+  // Tanstack needs wallet-kit
+  tanstack: {
+    blocks: ["wallet-kit"],
+  },
+  // Wallet-kit needs WalletProvider
+  "wallet-kit": {
+    providers: ["WalletProvider"],
+  },
+};
+
+/**
+ * Resolves all peer dependencies for a given block name by matching
+ * every applicable prefix in PEER_DEPS and merging the results.
+ *
+ * Example: "escrows/escrows-by-role/table" matches both "escrows"
+ * and "escrows/escrows-by-role", returning their merged blocks + providers.
+ */
+function resolvePeerDeps(blockName) {
+  const blocks = new Set();
+  const providers = new Set();
+  for (const [prefix, deps] of Object.entries(PEER_DEPS)) {
+    if (blockName === prefix || blockName.startsWith(prefix + "/")) {
+      (deps.blocks || []).forEach((b) => blocks.add(b));
+      (deps.providers || []).forEach((p) => providers.add(p));
+    }
+  }
+  return { blocks: [...blocks], providers: [...providers] };
+}
+
+/**
+ * Copies a single provider file from templates/providers/ to the user's
+ * tw-blocks/providers/ directory. Skips if the file already exists.
+ */
+function copyProviderFile(providerName, { uiBase } = {}) {
+  const srcFile = path.join(TEMPLATES_DIR, "providers", providerName + ".tsx");
+  if (!fs.existsSync(srcFile)) return;
+
+  const componentsSrcDir = path.join(PROJECT_ROOT, "src", "components");
+  const outRoot = fs.existsSync(componentsSrcDir)
+    ? path.join(componentsSrcDir, "tw-blocks")
+    : path.join(PROJECT_ROOT, "components", "tw-blocks");
+
+  const destFile = path.join(outRoot, "providers", providerName + ".tsx");
+  if (fs.existsSync(destFile)) return; // already present, skip
+
+  fs.mkdirSync(path.dirname(destFile), { recursive: true });
+  const config = loadConfig();
+  const effectiveUiBase = uiBase || config.uiBase || "@/components/ui";
+  const raw = fs.readFileSync(srcFile, "utf8");
+  const transformed = raw.replaceAll("__UI_BASE__", effectiveUiBase);
+  fs.writeFileSync(destFile, transformed, "utf8");
+  console.log(`✅ ${path.relative(PROJECT_ROOT, destFile)} created`);
+}
+
 function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
   const srcFile = path.join(TEMPLATES_DIR, `${name}.tsx`);
   const requestedDir = path.join(TEMPLATES_DIR, name);
@@ -419,12 +668,17 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
           for (const v of variants) copyVariant(v);
         }
 
-        if (shouldInstall && fs.existsSync(GLOBAL_DEPS_FILE)) {
-          const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
+        if (shouldInstall) {
+          const meta = resolveBlockDeps(name);
           installDeps(meta);
-          // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
-          if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
-            run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+          if (
+            meta.dependencies &&
+            meta.dependencies["@creit-tech/stellar-wallets-kit"]
+          ) {
+            const installed = getInstalledPackages();
+            if (!installed.has("@creit-tech/stellar-wallets-kit")) {
+              run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+            }
           }
         }
         currentEscrowType = null;
@@ -1463,12 +1717,17 @@ function copyTemplate(name, { uiBase, shouldInstall = false } = {}) {
     process.exit(1);
   }
 
-  if (shouldInstall && fs.existsSync(GLOBAL_DEPS_FILE)) {
-    const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
+  if (shouldInstall) {
+    const meta = resolveBlockDeps(name);
     installDeps(meta);
-    // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
-    if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
-      run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+    if (
+      meta.dependencies &&
+      meta.dependencies["@creit-tech/stellar-wallets-kit"]
+    ) {
+      const installed = getInstalledPackages();
+      if (!installed.has("@creit-tech/stellar-wallets-kit")) {
+        run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
+      }
     }
   }
 }
@@ -1770,7 +2029,7 @@ function cleanJsrDeps() {
 
 if (args[0] === "init") {
   cleanJsrDeps();
-  console.log("\n▶ Setting up shadcn/ui components...");
+  console.log("\n▶ Setting up shadcn/ui base configuration...");
   const doInit = await promptYesNo("Run shadcn init now?", true);
   if (doInit) {
     run("npx", ["shadcn@latest", "init"]);
@@ -1778,66 +2037,11 @@ if (args[0] === "init") {
     console.log("\x1b[90m– Skipped shadcn init\x1b[0m");
   }
 
-  const addShadcn = await promptYesNo(
-    "Add shadcn components (button, input, form, card, sonner, checkbox, dialog, textarea, sonner, select, table, calendar, popover, separator, calendar-05, badge, sheet, tabs, avatar, tooltip, progress, chart, empty)?",
-    true
-  );
-  if (addShadcn) {
-    await withSpinner("Installing shadcn/ui components", async () => {
-      await runAsync("npx", [
-        "shadcn@latest",
-        "add",
-        "button",
-        "input",
-        "form",
-        "card",
-        "sonner",
-        "checkbox",
-        "dialog",
-        "textarea",
-        "sonner",
-        "select",
-        "table",
-        "calendar",
-        "popover",
-        "separator",
-        "calendar-05",
-        "badge",
-        "sheet",
-        "tabs",
-        "avatar",
-        "tooltip",
-        "progress",
-        "chart",
-        "empty",
-      ]);
-    });
-  } else {
-    console.log("\x1b[90m– Skipped adding shadcn components\x1b[0m");
-  }
+  // Install sonner (toast notifications) — used across many blocks as a peer utility
+  await withSpinner("Installing sonner (toast notifications)", async () => {
+    await installShadcnComponents(["sonner"]);
+  });
 
-  if (!fs.existsSync(GLOBAL_DEPS_FILE)) {
-    console.error("❌ deps.json not found in templates/");
-    process.exit(1);
-  }
-  const meta = JSON.parse(fs.readFileSync(GLOBAL_DEPS_FILE, "utf8"));
-  const installLibs = await promptYesNo(
-    "Install (react-hook-form, @tanstack/react-query, @tanstack/react-query-devtools, @trustless-work/escrow, @hookform/resolvers, axios, @creit-tech/stellar-wallets-kit, react-day-picker, recharts & zod) dependencies now?",
-    true
-  );
-  if (installLibs) {
-    await withSpinner("Installing required dependencies", async () => {
-      installDeps(meta);
-    });
-    // Install @creit-tech/stellar-wallets-kit using jsr after all other deps are installed
-    if (meta.dependencies && meta.dependencies["@creit-tech/stellar-wallets-kit"]) {
-      await withSpinner("Installing @creit-tech/stellar-wallets-kit from JSR", async () => {
-        run("npx", ["jsr", "add", "@creit-tech/stellar-wallets-kit"]);
-      });
-    }
-  } else {
-    console.log("\x1b[90m– Skipped installing required dependencies\x1b[0m");
-  }
   const cfgPath = path.join(PROJECT_ROOT, ".twblocks.json");
   if (!fs.existsSync(cfgPath)) {
     fs.writeFileSync(
@@ -1851,32 +2055,16 @@ if (args[0] === "init") {
       )} with default uiBase`
     );
   }
-  console.log("\x1b[32m✔\x1b[0m shadcn/ui components step completed");
+  // Always copy helpers — they are a base utility used by escrows, dashboard, and others
+  await withSpinner("Copying helpers", async () => {
+    copyTemplate("helpers");
+  });
 
-  const wantProviders = await promptYesNo(
-    "Install TanStack Query and Trustless Work providers and wrap app/layout with them?",
-    true
+  logCheck("Base setup completed");
+
+  console.log(
+    `\n${COLORS.gray}Note: Dependencies and shadcn/ui components will be installed automatically when you add blocks via 'trustless-work add <block>'.${COLORS.reset}\n`
   );
-  if (wantProviders) {
-    await withSpinner("Installing providers", async () => {
-      copyTemplate("providers");
-    });
-    const layoutPath = findLayoutFile();
-    if (layoutPath) {
-      await withSpinner("Updating app/layout with providers", async () => {
-        injectProvidersIntoLayout(layoutPath, {
-          reactQuery: true,
-          trustless: true,
-        });
-      });
-    } else {
-      console.warn(
-        "⚠️  Could not find app/layout file. Skipped automatic wiring."
-      );
-    }
-  } else {
-    console.log("\x1b[90m– Skipped installing providers\x1b[0m");
-  }
 
   printBannerTRUSTLESSWORK();
   console.log("\n\nResources");
@@ -1924,7 +2112,7 @@ if (args[0] === "init") {
   const cfgPath = path.join(PROJECT_ROOT, ".twblocks.json");
   if (!fs.existsSync(cfgPath)) {
     console.error(
-      "❌ Missing initial setup. Run 'trustless-work init' first to install dependencies and create .twblocks.json (uiBase)."
+      "❌ Missing initial setup. Run 'trustless-work init' first to create .twblocks.json (uiBase)."
     );
     console.error(
       "   After init, re-run: trustless-work add " +
@@ -1933,16 +2121,42 @@ if (args[0] === "init") {
     );
     process.exit(1);
   }
+
+  // Auto-install block-specific dependencies and shadcn components (unless --no-install)
+  if (!flags.noInstall) {
+    await installBlockDeps(args[1]);
+  }
+
   copyTemplate(args[1], {
     uiBase: flags.uiBase,
-    shouldInstall: !!flags.install,
+    shouldInstall: false, // deps already handled above by installBlockDeps
   });
 
-  // Post-add wiring for specific templates
-  const layoutPath = findLayoutFile();
-  if (layoutPath) {
-    if (args[1] === "wallet-kit" || args[1].startsWith("wallet-kit/")) {
-      injectProvidersIntoLayout(layoutPath, { wallet: true });
+  // Auto-resolve and copy peer block dependencies + individual provider files
+  const componentsSrcDir = path.join(PROJECT_ROOT, "src", "components");
+  const peerOutRoot = fs.existsSync(componentsSrcDir)
+    ? path.join(componentsSrcDir, "tw-blocks")
+    : path.join(PROJECT_ROOT, "components", "tw-blocks");
+
+  const { blocks: peerBlocks, providers: peerProviders } = resolvePeerDeps(
+    args[1]
+  );
+
+  for (const peer of peerBlocks) {
+    const peerDir = path.join(peerOutRoot, peer);
+    if (fs.existsSync(peerDir)) continue;
+    if (!flags.noInstall) {
+      await installBlockDeps(peer);
+    }
+    copyTemplate(peer, { uiBase: flags.uiBase, shouldInstall: false });
+  }
+
+  if (peerProviders.length) {
+    if (!flags.noInstall) {
+      await installBlockDeps("providers");
+    }
+    for (const provider of peerProviders) {
+      copyProviderFile(provider, { uiBase: flags.uiBase });
     }
   }
 
@@ -1984,12 +2198,19 @@ if (args[0] === "init") {
   Usage:
   
   trustless-work init
-  trustless-work add <template> [--install]
+  trustless-work add <template> [--no-install]
   
   Options:
   
   --ui-base <path>      Base import path to your shadcn/ui components (default: "@/components/ui")
-  --install, -i         Also install dependencies (normally use 'init' once instead)
+  --no-install          Skip automatic dependency and shadcn component installation
+  --install, -i         (Legacy) Explicitly install deps when using copyTemplate directly
+  
+  Notes:
+  
+  - 'init' sets up shadcn base config and .twblocks.json. It does NOT install all deps upfront.
+  - 'add' automatically installs only the npm deps and shadcn components required by the block.
+  - Already-installed packages and components are detected and skipped.
   
   Examples:
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustless-work/blocks",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/dashboard/dashboard-01/useDashboard.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { useWalletContext } from "../../wallet-kit/WalletProvider";
+import { useWalletContext } from "../../providers/WalletProvider";
 import { useEscrowsBySignerQuery } from "../../tanstack/useEscrowsBySignerQuery";
 import type { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 

package/templates/dashboard/deps.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "recharts": "latest",
+    "@trustless-work/escrow": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": ["card", "separator", "chart", "empty"]
+}

package/templates/deps.json

@@ -1,30 +1,16 @@
 {
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.53.0",
-    "zod": "^3.23.8",
-    "@trustless-work/escrow": "^3.0.4",
-    "@tanstack/react-query": "^5.75.0",
-    "@tanstack/react-query-devtools": "^5.75.0",
-    "tailwindcss": "^3.3.3",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "@hookform/resolvers": "^3.10.0",
-    "@creit-tech/stellar-wallets-kit": "^1.8.0",
-    "axios": "^1.7.9",
-    "@tanstack/react-table": "^8.21.3",
-    "react-day-picker": "^9.5.0",
-    "recharts": "^2.13.3"
+    "react-hook-form": "latest",
+    "zod": "latest",
+    "@trustless-work/escrow": "latest",
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-query-devtools": "latest",
+    "@hookform/resolvers": "latest",
+    "@creit-tech/stellar-wallets-kit": "latest",
+    "axios": "latest",
+    "@tanstack/react-table": "latest",
+    "react-day-picker": "latest",
+    "recharts": "latest"
   },
-  "devDependencies": {
-    "postcss": "^8",
-    "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5",
-    "@types/next": "^8.0.7",
-    "@types/node": "^20",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18"
-  }
+  "devDependencies": {}
 }

package/templates/escrows/deps.json

@@ -0,0 +1,30 @@
+{
+  "dependencies": {
+    "react-hook-form": "latest",
+    "@hookform/resolvers": "latest",
+    "zod": "latest",
+    "@trustless-work/escrow": "latest",
+    "@tanstack/react-table": "latest",
+    "react-day-picker": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": [
+    "button",
+    "input",
+    "form",
+    "card",
+    "select",
+    "textarea",
+    "dialog",
+    "table",
+    "calendar",
+    "popover",
+    "separator",
+    "badge",
+    "tabs",
+    "avatar",
+    "tooltip",
+    "checkbox",
+    "progress"
+  ]
+}

package/templates/escrows/details/Actions.tsx

@@ -14,7 +14,7 @@ import {
   GetEscrowsFromIndexerResponse as Escrow,
   Role,
 } from "@trustless-work/escrow/types";
-import { FundEscrowDialog } from "../../single-multi-release/fund-escrow/dialog/FundEscrow";
+// import { FundEscrowDialog } from "../../single-multi-release/fund-escrow/dialog/FundEscrow";
 
 interface ActionsProps {
   selectedEscrow: Escrow;
@@ -28,49 +28,49 @@ export const roleActions: {
   icon: React.ReactNode;
   color: string;
 }[] = [
-  {
-    role: "signer",
-    actions: ["fundEscrow"],
-    icon: <Wallet className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-  {
-    role: "approver",
-    actions: ["fundEscrow", "approveMilestone", "startDispute"],
-    icon: <CheckCircle className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "serviceProvider",
-    actions: ["fundEscrow", "completeMilestone", "startDispute"],
-    icon: <Briefcase className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "disputeResolver",
-    actions: ["fundEscrow", "resolveDispute"],
-    icon: <Scale className="h-6 w-6 text-primary" />,
-    color: "00",
-  },
-  {
-    role: "releaseSigner",
-    actions: ["fundEscrow", "releasePayment"],
-    icon: <Unlock className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-  {
-    role: "platformAddress",
-    actions: ["fundEscrow", "editEscrow"],
-    icon: <Settings className="h-6 w-6 text-primary" />,
-    color: "0",
-  },
-  {
-    role: "receiver",
-    actions: ["fundEscrow"],
-    icon: <DollarSign className="h-6 w-6 text-primary" />,
-    color: "",
-  },
-];
+    {
+      role: "signer",
+      actions: ["fundEscrow"],
+      icon: <Wallet className="h-6 w-6 text-primary" />,
+      color: "",
+    },
+    {
+      role: "approver",
+      actions: ["fundEscrow", "approveMilestone", "startDispute"],
+      icon: <CheckCircle className="h-6 w-6 text-primary" />,
+      color: "0",
+    },
+    {
+      role: "serviceProvider",
+      actions: ["fundEscrow", "completeMilestone", "startDispute"],
+      icon: <Briefcase className="h-6 w-6 text-primary" />,
+      color: "0",
+    },
+    {
+      role: "disputeResolver",
+      actions: ["fundEscrow", "resolveDispute"],
+      icon: <Scale className="h-6 w-6 text-primary" />,
+      color: "00",
+    },
+    {
+      role: "releaseSigner",
+      actions: ["fundEscrow", "releasePayment"],
+      icon: <Unlock className="h-6 w-6 text-primary" />,
+      color: "",
+    },
+    {
+      role: "platformAddress",
+      actions: ["fundEscrow", "editEscrow"],
+      icon: <Settings className="h-6 w-6 text-primary" />,
+      color: "0",
+    },
+    {
+      role: "receiver",
+      actions: ["fundEscrow"],
+      icon: <DollarSign className="h-6 w-6 text-primary" />,
+      color: "",
+    },
+  ];
 
 export const actionIcons: Record<string, React.ReactNode> = {
   fundEscrow: <DollarSign className="h-6 w-6 text-primary/60" />,
@@ -160,7 +160,8 @@ export const Actions = ({
         </div>
       )}
 
-      <FundEscrowDialog />
+      {/* FundEscrow */}
+      {/* <FundEscrowDialog /> */}
     </div>
   );
 };

package/templates/escrows/details/MilestoneCard.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { Button } from "__UI_BASE__/button";
 import { Card, CardContent, CardHeader, CardTitle } from "__UI_BASE__/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "__UI_BASE__/tooltip";
 import {
   FileCheck2,
   Eye,
@@ -17,8 +18,8 @@ import {
   SingleReleaseMilestone,
 } from "@trustless-work/escrow";
 import { Badge } from "__UI_BASE__/badge";
-import { ChangeMilestoneStatusDialog } from "../../single-multi-release/change-milestone-status/dialog/ChangeMilestoneStatus";
-import { ApproveMilestoneButton } from "../../single-multi-release/approve-milestone/button/ApproveMilestone";
+// import { ChangeMilestoneStatusDialog } from "../../single-multi-release/change-milestone-status/dialog/ChangeMilestoneStatus";
+// import { ApproveMilestoneButton } from "../../single-multi-release/approve-milestone/button/ApproveMilestone";
 import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
 
 interface MilestoneCardProps {
@@ -107,10 +108,10 @@ const MilestoneCardComponent = ({
       !("flags" in milestone && milestone.flags?.approved)
     ) {
       buttons.push(
-        <ChangeMilestoneStatusDialog
-          key={`change-status-${milestoneIndex}`}
-          milestoneIndex={milestoneIndex}
-        />
+        // <ChangeMilestoneStatusDialog
+        //   key={`change-status-${milestoneIndex}`}
+        //   milestoneIndex={milestoneIndex}
+        // />
       );
     }
 
@@ -124,10 +125,10 @@ const MilestoneCardComponent = ({
           !milestone.flags?.resolved))
     ) {
       buttons.push(
-        <ApproveMilestoneButton
-          key={`approve-${milestoneIndex}`}
-          milestoneIndex={milestoneIndex}
-        />
+        // <ApproveMilestoneButton
+        //   key={`approve-${milestoneIndex}`}
+        //   milestoneIndex={milestoneIndex}
+        // />
       );
     }
 
@@ -190,11 +191,22 @@ const MilestoneCardComponent = ({
       className="hover:shadow-lg transition-all duration-200"
     >
       <CardHeader className="pb-4">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-base font-semibold text-foreground truncate">
-            {milestone.description}
-          </CardTitle>
-          {getMilestoneStatusBadge(milestone)}
+        <div className="flex items-center justify-between gap-2 min-w-0">
+          <div className="min-w-0 flex-1 overflow-hidden">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <CardTitle className="text-base font-semibold text-foreground truncate block">
+                  {milestone.description}
+                </CardTitle>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="max-w-[min(20rem,90vw)]">
+                {milestone.description}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <div className="flex-shrink-0">
+            {getMilestoneStatusBadge(milestone)}
+          </div>
         </div>
       </CardHeader>
 

package/templates/escrows/details/MilestoneDetailDialog.tsx

@@ -178,7 +178,7 @@ export const MilestoneDetailDialog = ({
               <span className="font-bold text-foreground">
                 {formatCurrency(
                   selectedMilestone.milestone.amount,
-                  selectedEscrow?.trustline?.name ?? "USDC"
+                  selectedEscrow?.trustline?.symbol ?? "USDC"
                 )}
               </span>
             </div>
@@ -268,7 +268,7 @@ export const MilestoneDetailDialog = ({
                     <p className="text-sm font-medium text-red-700 dark:text-red-300">
                       <span className="font-bold">Disputed by:</span>{" "}
                       {selectedMilestone.milestone.disputeStartedBy ===
-                      "serviceProvider"
+                        "serviceProvider"
                         ? "Service Provider"
                         : "Approver"}
                     </p>

package/templates/escrows/details/SuccessReleaseDialog.tsx

@@ -35,7 +35,7 @@ export const SuccessReleaseDialog = ({
   const trustlessPercentage = 0.3;
   const receiverPercentage = 100 - (platformFee + trustlessPercentage);
 
-  const currency = selectedEscrow?.trustline?.name ?? "";
+  const currency = selectedEscrow?.trustline?.symbol ?? "";
 
   const cards = useMemo<
     Array<{

package/templates/escrows/details/useDetailsEscrow.ts

@@ -3,7 +3,7 @@ import {
   GetEscrowsFromIndexerResponse as Escrow,
   MultiReleaseMilestone,
 } from "@trustless-work/escrow/types";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 

package/templates/escrows/escrows-by-role/useEscrowsByRole.shared.ts

@@ -5,7 +5,7 @@ import { startOfDay, endOfDay, format } from "date-fns";
 import type { DateRange as DayPickerDateRange } from "react-day-picker";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { SortingState } from "@tanstack/react-table";
-import { useWalletContext } from "../../wallet-kit/WalletProvider";
+import { useWalletContext } from "../../providers/WalletProvider";
 import { useEscrowsByRoleQuery } from "../../tanstack/useEscrowsByRoleQuery";
 import type { GetEscrowsFromIndexerByRoleParams } from "@trustless-work/escrow";
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";

package/templates/escrows/escrows-by-signer/useEscrowsBySigner.shared.ts

@@ -5,7 +5,7 @@ import { startOfDay, endOfDay, format } from "date-fns";
 import type { DateRange as DayPickerDateRange } from "react-day-picker";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { SortingState } from "@tanstack/react-table";
-import { useWalletContext } from "../../wallet-kit/WalletProvider";
+import { useWalletContext } from "../../providers/WalletProvider";
 import { useEscrowsBySignerQuery } from "../../tanstack/useEscrowsBySignerQuery";
 import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
 

package/templates/escrows/multi-release/dispute-milestone/button/DisputeMilestone.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import {
   MultiReleaseStartDisputePayload,
   MultiReleaseMilestone,

package/templates/escrows/multi-release/dispute-milestone/shared/useDisputeMilestone.ts

@@ -16,7 +16,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 export function useDisputeMilestone({
   onSuccess,

package/templates/escrows/multi-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -8,7 +8,7 @@ import {
   InitializeMultiReleaseEscrowResponse,
 } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
   ErrorResponse,

package/templates/escrows/multi-release/release-milestone/button/ReleaseMilestone.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import {
   MultiReleaseReleaseFundsPayload,
   MultiReleaseMilestone,

package/templates/escrows/multi-release/release-milestone/shared/useReleaseMilestone.ts

@@ -16,7 +16,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowDialogs } from "@/components/tw-blocks/providers/EscrowDialogsProvider";
 import { useEscrowAmountContext } from "@/components/tw-blocks/providers/EscrowAmountProvider";
 

package/templates/escrows/multi-release/resolve-dispute/button/ResolveDispute.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import {
   MultiReleaseResolveDisputePayload,
   MultiReleaseMilestone,

package/templates/escrows/multi-release/resolve-dispute/shared/useResolveDispute.ts

@@ -13,7 +13,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 type DistributionInput = { address: string; amount: string | number };
 

package/templates/escrows/multi-release/update-escrow/shared/useUpdateEscrow.ts

@@ -10,7 +10,7 @@ import {
 } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
   ErrorResponse,

package/templates/escrows/multi-release/withdraw-remaining-funds/button/WithdrawRemainingFunds.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { WithdrawRemainingFundsPayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/multi-release/withdraw-remaining-funds/shared/useWithdrawRemainingFunds.ts

@@ -13,7 +13,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 type DistributionInput = { address: string; amount: string | number };
 

package/templates/escrows/single-multi-release/approve-milestone/button/ApproveMilestone.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import {
   ApproveMilestonePayload,
   MultiReleaseMilestone,

package/templates/escrows/single-multi-release/approve-milestone/shared/useApproveMilestone.ts

@@ -13,7 +13,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 export function useApproveMilestone({
   onSuccess,

package/templates/escrows/single-multi-release/change-milestone-status/button/ChangeMilestoneStatus.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { ChangeMilestoneStatusPayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/single-multi-release/change-milestone-status/shared/useChangeMilestoneStatus.ts

@@ -13,7 +13,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 export function useChangeMilestoneStatus({
   onSuccess,

package/templates/escrows/single-multi-release/fund-escrow/button/FundEscrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { FundEscrowPayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/single-multi-release/fund-escrow/shared/useFundEscrow.ts

@@ -10,7 +10,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 export function useFundEscrow({ onSuccess }: { onSuccess?: () => void } = {}) {
   const { fundEscrow } = useEscrowsMutations();

package/templates/escrows/single-release/dispute-escrow/button/DisputeEscrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { SingleReleaseStartDisputePayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/single-release/initialize-escrow/shared/useInitializeEscrow.ts

@@ -8,7 +8,7 @@ import {
   InitializeSingleReleaseEscrowResponse,
 } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
   ErrorResponse,

package/templates/escrows/single-release/release-escrow/button/ReleaseEscrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { SingleReleaseReleaseFundsPayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/single-release/resolve-dispute/button/ResolveDispute.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Button } from "__UI_BASE__/button";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { SingleReleaseResolveDisputePayload } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import {

package/templates/escrows/single-release/resolve-dispute/shared/useResolveDispute.ts

@@ -10,7 +10,7 @@ import {
   ErrorResponse,
   handleError,
 } from "@/components/tw-blocks/handle-errors/handle";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 type DistributionInput = { address: string; amount: string | number };
 

package/templates/escrows/single-release/update-escrow/shared/useUpdateEscrow.ts

@@ -13,7 +13,7 @@ import {
 } from "@trustless-work/escrow/types";
 import { toast } from "sonner";
 import { useEscrowContext } from "@/components/tw-blocks/providers/EscrowProvider";
-import { useWalletContext } from "@/components/tw-blocks/wallet-kit/WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { useEscrowsMutations } from "@/components/tw-blocks/tanstack/useEscrowsMutations";
 import {
   ErrorResponse,

package/templates/handle-errors/deps.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "axios": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": []
+}

package/templates/helpers/deps.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {},
+  "devDependencies": {},
+  "shadcnComponents": []
+}

package/templates/providers/deps.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "latest",
+    "@tanstack/react-query-devtools": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": []
+}

package/templates/tanstack/deps.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "latest",
+    "@trustless-work/escrow": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": []
+}

package/templates/wallet-kit/WalletButtons.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { useWallet } from "./useWallet";
-import { useWalletContext } from "./WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 import { Button } from "__UI_BASE__/button";
 import { Popover, PopoverContent, PopoverTrigger } from "__UI_BASE__/popover";
 import { Check, Copy, LogOut, ChevronDown, Wallet } from "lucide-react";

package/templates/wallet-kit/deps.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@creit-tech/stellar-wallets-kit": "latest"
+  },
+  "devDependencies": {},
+  "shadcnComponents": ["button", "popover"]
+}

package/templates/wallet-kit/useWallet.ts

@@ -3,7 +3,7 @@ import {
   disconnectWalletKit,
   getSelectedWallet,
 } from "./wallet-kit";
-import { useWalletContext } from "./WalletProvider";
+import { useWalletContext } from "@/components/tw-blocks/providers/WalletProvider";
 
 /**
  * Custom hook that provides wallet connection and disconnection functionality