@trustless-work/blocks 1.0.1 → 1.0.2

package/bin/index.js

@@ -1580,7 +1580,7 @@ if (args[0] === "init") {
   }
 
   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)?",
+    "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)?",
     true
   );
   if (addShadcn) {
@@ -1608,6 +1608,7 @@ if (args[0] === "init") {
         "tabs",
         "avatar",
         "tooltip",
+        "progress",
       ]);
     });
   } else {
@@ -1699,6 +1700,20 @@ if (args[0] === "init") {
   console.log("- " + oscHyperlink("X", "https://x.com/TrustlessWork"));
 } else if (args[0] === "add" && args[1]) {
   const flags = parseFlags(args.slice(2));
+  // Normalize common aliases (singular/plural, shorthand)
+  const normalizeTemplateName = (name) => {
+    let n = String(name).trim();
+    // singular to plural base
+    n = n.replace(/^escrow\b/, "escrows");
+    n = n.replace(/^indicator\b/, "indicators");
+    // allow nested segments singulars
+    n = n.replace(/(^|\/)escrow(\/|$)/g, "$1escrows$2");
+    n = n.replace(/(^|\/)indicator(\/|$)/g, "$1indicators$2");
+    // friendly shape variants
+    n = n.replace(/(^|\/)circle(\/|$)/g, "$1circular$2");
+    return n;
+  };
+  args[1] = normalizeTemplateName(args[1]);
   const cfgPath = path.join(PROJECT_ROOT, ".twblocks.json");
   if (!fs.existsSync(cfgPath)) {
     console.error(
@@ -1791,6 +1806,11 @@ if (args[0] === "init") {
   
   --- Escrows ---
   trustless-work add escrows
+
+  --- Indicators ---
+  trustless-work add escrows/indicators/balance-progress
+  trustless-work add escrows/indicators/balance-progress/bar
+  trustless-work add escrows/indicators/balance-progress/donut
   
   --- Escrows by role ---
   trustless-work add escrows/escrows-by-role

package/package.json

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

package/templates/deps.json

@@ -4,7 +4,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.53.0",
     "zod": "^3.23.8",
-    "@trustless-work/escrow": "^2.0.9",
+    "@trustless-work/escrow": "^3.0.0",
     "@tanstack/react-query": "^5.75.0",
     "@tanstack/react-query-devtools": "^5.75.0",
     "tailwindcss": "^3.3.3",

package/templates/escrows/indicators/balance-progress/bar/BalanceProgress.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Progress } from "__UI_BASE__/progress";
+import { useGetMultipleEscrowBalancesQuery } from "@/components/tw-blocks/tanstack/useGetMultipleEscrowBalances";
+import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
+
+type BalanceProgressBarProps = {
+  contractId: string;
+  target: number;
+  currency: string;
+};
+
+export const BalanceProgressBar = ({
+  contractId,
+  target,
+  currency,
+}: BalanceProgressBarProps) => {
+  const isContractProvided = Boolean(
+    contractId && contractId.trim().length > 0
+  );
+
+  const { data, isLoading, isError } = useGetMultipleEscrowBalancesQuery({
+    addresses: isContractProvided ? [contractId] : [],
+    enabled: isContractProvided,
+  });
+
+  const currentBalanceRaw = Number(data?.[0]?.balance ?? 0);
+  const safeTarget = Number.isFinite(target) && target > 0 ? target : 0;
+  const progressValue =
+    safeTarget > 0
+      ? Math.min(100, Math.max(0, (currentBalanceRaw / safeTarget) * 100))
+      : 0;
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+        <p>
+          <span className="font-bold mr-1">Balance:</span>
+          {isLoading
+            ? "Loading…"
+            : isError
+            ? "-"
+            : formatCurrency(currentBalanceRaw, currency)}
+        </p>
+        <p>
+          <span className="font-bold mr-1">Target:</span>{" "}
+          {formatCurrency(safeTarget, currency)}
+        </p>
+      </div>
+      <Progress
+        value={isLoading || isError ? 0 : progressValue}
+        className="w-full"
+      />
+    </div>
+  );
+};

package/templates/escrows/indicators/balance-progress/donut/BalanceProgress.tsx

@@ -0,0 +1,99 @@
+// @ts-nocheck
+import * as React from "react";
+import { useGetMultipleEscrowBalancesQuery } from "@/components/tw-blocks/tanstack/useGetMultipleEscrowBalances";
+import { formatCurrency } from "@/components/tw-blocks/helpers/format.helper";
+
+type BalanceProgressDonutProps = {
+  contractId: string;
+  target: number;
+  currency: string;
+};
+
+export const BalanceProgressDonut = ({
+  contractId,
+  target,
+  currency,
+}: BalanceProgressDonutProps) => {
+  const isContractProvided = Boolean(
+    contractId && contractId.trim().length > 0
+  );
+
+  const { data, isLoading, isError } = useGetMultipleEscrowBalancesQuery({
+    addresses: isContractProvided ? [contractId] : [],
+    enabled: isContractProvided,
+  });
+
+  const currentBalanceRaw = Number(data?.[0]?.balance ?? 0);
+  const safeTarget = Number.isFinite(target) && target > 0 ? target : 0;
+  const progressValue =
+    safeTarget > 0
+      ? Math.min(100, Math.max(0, (currentBalanceRaw / safeTarget) * 100))
+      : 0;
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+        <p>
+          <span className="font-bold mr-1">Balance:</span>
+          {isLoading
+            ? "Loading…"
+            : isError
+            ? "-"
+            : formatCurrency(currentBalanceRaw, currency)}
+        </p>
+        <p>
+          <span className="font-bold mr-1">Target:</span>{" "}
+          {formatCurrency(safeTarget, currency)}
+        </p>
+      </div>
+      {(() => {
+        const size = 160; // px
+        const stroke = 12; // px
+        const radius = (size - stroke) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const pct = isLoading || isError ? 0 : progressValue;
+        const dashOffset = circumference * (1 - pct / 100);
+
+        return (
+          <div className="flex justify-center">
+            <div className="relative" style={{ width: size, height: size }}>
+              <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+                {/* Track */}
+                <circle
+                  cx={size / 2}
+                  cy={size / 2}
+                  r={radius}
+                  strokeWidth={stroke}
+                  stroke="currentColor"
+                  className="text-muted-foreground/20"
+                  fill="none"
+                  strokeLinecap="round"
+                />
+                {/* Progress */}
+                <g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
+                  <circle
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    strokeWidth={stroke}
+                    stroke="currentColor"
+                    className="text-primary"
+                    fill="none"
+                    strokeDasharray={`${circumference} ${circumference}`}
+                    strokeDashoffset={dashOffset}
+                    strokeLinecap="round"
+                  />
+                </g>
+              </svg>
+
+              <div className="absolute inset-0 flex flex-col items-center justify-center">
+                <span className="text-2xl font-bold">{Math.round(pct)}%</span>
+                <span className="text-muted-foreground text-sm">Progress</span>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+    </div>
+  );
+};

package/templates/tanstack/useGetMultipleEscrowBalances.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  GetEscrowBalancesResponse,
+  GetBalanceParams,
+} from "@trustless-work/escrow/types";
+import { useGetMultipleEscrowBalances } from "@trustless-work/escrow/hooks";
+
+/**
+ * Use the query to get the escrows balances
+ *
+ * @param params - The parameters for the query
+ * @returns The query result
+ */
+export const useGetMultipleEscrowBalancesQuery = ({
+  addresses,
+  enabled = true,
+}: GetBalanceParams & { enabled?: boolean }) => {
+  const { getMultipleBalances } = useGetMultipleEscrowBalances();
+
+  // Get the escrows by signer
+  return useQuery({
+    queryKey: ["escrows", addresses],
+    queryFn: async (): Promise<GetEscrowBalancesResponse[]> => {
+      /**
+       * Call the query to get the escrows from the Trustless Work Indexer
+       *
+       * @param params - The parameters for the query
+       * @returns The query result
+       */
+      const balances = await getMultipleBalances({ addresses });
+
+      if (!balances) {
+        throw new Error("Escrows not found");
+      }
+
+      return balances;
+    },
+    enabled: enabled,
+    staleTime: 1000 * 60 * 5, // 5 min
+  });
+};