@trustless-work/blocks 1.0.1 → 1.0.3

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, chart)?",
     true
   );
   if (addShadcn) {
@@ -1608,6 +1608,8 @@ if (args[0] === "init") {
         "tabs",
         "avatar",
         "tooltip",
+        "progress",
+        "chart",
       ]);
     });
   } else {
@@ -1620,7 +1622,7 @@ if (args[0] === "init") {
   }
   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 & zod) dependencies now?",
+    "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) {
@@ -1699,6 +1701,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 +1807,14 @@ if (args[0] === "init") {
   
   --- Escrows ---
   trustless-work add escrows
+
+  --- Dashboard ---
+  trustless-work add dashboard
+
+  --- 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.3",
   "author": "Trustless Work",
   "keywords": [
     "react",

package/templates/dashboard/Dashboard.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "__UI_BASE__/card";
+import { Separator } from "__UI_BASE__/separator";
+import { useDashboard } from "./useDashboard";
+import { formatCurrency } from "../helpers/format.helper";
+import { Activity, Layers3, PiggyBank } from "lucide-react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  CartesianGrid,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "__UI_BASE__/chart";
+
+const chartConfigBar: ChartConfig = {
+  desktop: {
+    label: "Amount",
+    color: "var(--chart-1)",
+  },
+};
+
+const chartConfigDonut: ChartConfig = {
+  visitors: { label: "Count" },
+  single: { label: "Single", color: "var(--chart-1)" },
+  multi: { label: "Multi", color: "var(--chart-2)" },
+};
+
+const chartConfigArea: ChartConfig = {
+  desktop: {
+    label: "Created",
+    color: "var(--chart-1)",
+  },
+};
+
+export function Dashboard() {
+  const {
+    isLoading,
+    totalEscrows,
+    totalAmount,
+    totalBalance,
+    typeSlices,
+    amountsByDate,
+    createdByDate,
+  } = useDashboard();
+
+  const barData = React.useMemo(
+    () => amountsByDate.map((d) => ({ month: d.date, desktop: d.amount })),
+    [amountsByDate]
+  );
+
+  const donutData = React.useMemo(
+    () =>
+      typeSlices.map((s) => ({
+        browser: s.type === "single" ? "single" : "multi",
+        visitors: s.value,
+        fill:
+          s.type === "single" ? "var(--color-single)" : "var(--color-multi)",
+      })),
+    [typeSlices]
+  );
+
+  const areaData = React.useMemo(
+    () => createdByDate.map((d) => ({ month: d.date, desktop: d.count })),
+    [createdByDate]
+  );
+
+  return (
+    <div className="grid gap-6">
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Escrows</CardTitle>
+            <Layers3 className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : totalEscrows}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Total number of escrows
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Amount</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : formatCurrency(totalAmount, "USDC")}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Sum of amounts (SR + MR)
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Balance</CardTitle>
+            <PiggyBank className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? "-" : formatCurrency(totalBalance, "USDC")}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Total balance across all escrows
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator />
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Bar chart: Amounts by date (shadcn pattern) */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Escrow Amounts</CardTitle>
+            <CardDescription>Amounts by date</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              className="w-full h-56 sm:h-64 lg:h-72"
+              config={chartConfigBar}
+            >
+              <BarChart accessibilityLayer data={barData}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) =>
+                    new Date(String(value)).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        {/* Donut chart: Escrow types (shadcn pattern) */}
+        <Card className="flex flex-col">
+          <CardHeader className="items-center pb-0">
+            <CardTitle>Escrow Types</CardTitle>
+            <CardDescription>Escrow types</CardDescription>
+          </CardHeader>
+          <CardContent className="flex-1 pb-0">
+            <ChartContainer
+              config={chartConfigDonut}
+              className="w-full h-56 sm:h-64 lg:h-72"
+            >
+              <PieChart>
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Pie
+                  data={donutData}
+                  dataKey="visitors"
+                  nameKey="browser"
+                  innerRadius={60}
+                >
+                  {donutData.map((slice, idx) => (
+                    <Cell key={`cell-${idx}`} fill={slice.fill} />
+                  ))}
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+            <div className="mt-4 flex items-center justify-center gap-6">
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ background: "var(--chart-1)" }}
+                />
+                <span className="text-xs text-muted-foreground">Single</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ background: "var(--chart-2)" }}
+                />
+                <span className="text-xs text-muted-foreground">Multi</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Area chart: Created escrows (shadcn pattern) */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Escrow Created</CardTitle>
+            <CardDescription>Created escrows by date</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              className="w-full h-56 sm:h-64 lg:h-72"
+              config={chartConfigArea}
+            >
+              <AreaChart
+                accessibilityLayer
+                data={areaData}
+                margin={{ left: 12, right: 12 }}
+              >
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(value) =>
+                    new Date(String(value)).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  }
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent indicator="line" />}
+                />
+                <Area
+                  dataKey="desktop"
+                  type="natural"
+                  fill="var(--color-desktop)"
+                  fillOpacity={0.4}
+                  stroke="var(--color-desktop)"
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/chart.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React from "react";
+import { Tooltip as RechartsTooltip } from "recharts";
+
+export type ChartConfig = Record<string, { label: string; color?: string }>;
+
+interface ChartContainerProps {
+  config: ChartConfig;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function ChartContainer({
+  config,
+  className,
+  children,
+}: ChartContainerProps) {
+  const style: React.CSSProperties = {};
+  for (const [key, value] of Object.entries(config)) {
+    const varName = `--color-${key}` as const;
+    if (value.color) (style as any)[varName] = value.color;
+  }
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+}
+
+type RechartsPayloadItem = {
+  value?: number | string;
+  dataKey?: string;
+  color?: string;
+  name?: string;
+};
+
+type RechartsTooltipContentProps = {
+  active?: boolean;
+  label?: string | number;
+  payload?: RechartsPayloadItem[];
+};
+
+export type ChartTooltipContentProps = {
+  hideLabel?: boolean;
+  indicator?: "line" | "dot";
+} & RechartsTooltipContentProps;
+
+export function ChartTooltip(
+  props: React.ComponentProps<typeof RechartsTooltip>
+) {
+  return <RechartsTooltip {...props} />;
+}
+
+export function ChartTooltipContent({
+  active,
+  label,
+  payload,
+  hideLabel,
+}: ChartTooltipContentProps) {
+  if (!active || !payload || payload.length === 0) return null;
+  return (
+    <div className="rounded-md border bg-background p-2 text-sm shadow-sm">
+      {!hideLabel ? <div className="mb-1 font-medium">{label}</div> : null}
+      <div className="space-y-1">
+        {payload.map((item, idx) => (
+          <div key={idx} className="flex items-center gap-2">
+            <span
+              className="inline-block h-2 w-2 rounded-full"
+              style={{ backgroundColor: item.color }}
+              aria-hidden
+            />
+            <span className="text-muted-foreground">
+              {item.name ?? String(item.dataKey)}
+            </span>
+            <span className="font-medium ml-auto">
+              {item.value as React.ReactNode}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/dashboard/useDashboard.ts

@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+import { useWalletContext } from "../wallet-kit/WalletProvider";
+import { useEscrowsBySignerQuery } from "../tanstack/useEscrowsBySignerQuery";
+import type { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+type AmountsByDatePoint = { date: string; amount: number };
+type CreatedByDatePoint = { date: string; count: number };
+type DonutSlice = { type: "single" | "multi"; value: number; fill: string };
+
+function getCreatedDateKey(createdAt: Escrow["createdAt"]): string {
+  // createdAt is a Firestore-like timestamp: { _seconds, _nanoseconds }
+  const seconds = (createdAt as unknown as { _seconds?: number })?._seconds;
+  const d = seconds ? new Date(seconds * 1000) : new Date();
+  // YYYY-MM-DD
+  return d.toISOString().slice(0, 10);
+}
+
+function getSingleReleaseAmount(escrow: Escrow): number {
+  // Single release stores total in .amount
+  const raw = (escrow as unknown as { amount?: number | string }).amount;
+  const n = Number(raw ?? 0);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function getMultiReleaseAmount(escrow: Escrow): number {
+  // Multi release accumulates across milestones
+  const milestones = (
+    escrow as unknown as {
+      milestones?: Array<{ amount?: number | string }>;
+    }
+  ).milestones;
+  if (!Array.isArray(milestones)) return 0;
+  return milestones.reduce((acc: number, m) => {
+    const n = Number(m?.amount ?? 0);
+    return acc + (Number.isFinite(n) ? n : 0);
+  }, 0);
+}
+
+function getEscrowAmount(escrow: Escrow): number {
+  if (escrow.type === "single-release") return getSingleReleaseAmount(escrow);
+  if (escrow.type === "multi-release") return getMultiReleaseAmount(escrow);
+  return 0;
+}
+
+export function useDashboard() {
+  const { walletAddress } = useWalletContext();
+
+  const {
+    data = [],
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useEscrowsBySignerQuery({
+    signer: walletAddress ?? "",
+    enabled: !!walletAddress,
+  });
+
+  const totalEscrows = React.useMemo<number>(() => data.length, [data.length]);
+
+  const totalAmount = React.useMemo<number>(() => {
+    return data.reduce((acc: number, e) => acc + getEscrowAmount(e), 0);
+  }, [data]);
+
+  const totalBalance = React.useMemo<number>(() => {
+    return data.reduce((acc: number, e) => acc + Number(e?.balance ?? 0), 0);
+  }, [data]);
+
+  const typeSlices = React.useMemo<DonutSlice[]>(() => {
+    let single = 0;
+    let multi = 0;
+    for (const e of data) {
+      if (e.type === "single-release") single += 1;
+      else if (e.type === "multi-release") multi += 1;
+    }
+    return [
+      { type: "single", value: single, fill: "var(--color-single)" },
+      { type: "multi", value: multi, fill: "var(--color-multi)" },
+    ];
+  }, [data]);
+
+  const amountsByDate = React.useMemo<AmountsByDatePoint[]>(() => {
+    const map = new Map<string, number>();
+    for (const e of data) {
+      const key = getCreatedDateKey(e.createdAt);
+      const current = map.get(key) ?? 0;
+      map.set(key, current + getEscrowAmount(e));
+    }
+    return Array.from(map.entries())
+      .map(([date, amount]) => ({ date, amount }))
+      .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  }, [data]);
+
+  const createdByDate = React.useMemo<CreatedByDatePoint[]>(() => {
+    const map = new Map<string, number>();
+    for (const e of data) {
+      const key = getCreatedDateKey(e.createdAt);
+      map.set(key, (map.get(key) ?? 0) + 1);
+    }
+    return Array.from(map.entries())
+      .map(([date, count]) => ({ date, count }))
+      .sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  }, [data]);
+
+  return {
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+    totalEscrows,
+    totalAmount,
+    totalBalance,
+    typeSlices,
+    amountsByDate,
+    createdByDate,
+  } as const;
+}

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",
@@ -14,7 +14,8 @@
     "@creit.tech/stellar-wallets-kit": "^1.8.0",
     "axios": "^1.7.9",
     "@tanstack/react-table": "^8.21.3",
-    "react-day-picker": "^9.5.0"
+    "react-day-picker": "^9.5.0",
+    "recharts": "^2.13.3"
   },
   "devDependencies": {
     "postcss": "^8",

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
+  });
+};