From b2f596f8c0f802ddd7d5c56c1db9d5301cda5022 Mon Sep 17 00:00:00 2001
From: Ranjeet2063 <ranjeet2063@users.noreply.github.com>
Date: Sun, 4 Oct 2026 16:53:17 +0545
Subject: [PATCH] feat(ux): add visible Coming Soon badges and roadmap tracking
 links for guardians and spend limits

---
 .../guardians/GuardianList.test.tsx           | 35 +++++++++++++++++++
 components/guardians/GuardianList.tsx         | 24 ++++++++++---
 components/policies/SpendLimitForm.tsx        | 32 ++++++++++++-----
 3 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 __tests__/components/guardians/GuardianList.test.tsx

diff --git a/__tests__/components/guardians/GuardianList.test.tsx b/__tests__/components/guardians/GuardianList.test.tsx
new file mode 100644
index 0000000..1483933
--- /dev/null
+++ b/__tests__/components/guardians/GuardianList.test.tsx
@@ -0,0 +1,35 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from "@testing-library/react";
+import { test, expect, vi } from "vitest";
+import { GuardianList } from "@/components/guardians/GuardianList";
+
+vi.mock("@/hooks/useWallet", () => ({
+  useWallet: () => ({
+    data: {
+      exists: true,
+      signers: [
+        { credentialId: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", weight: 1 },
+      ],
+    },
+    isLoading: false,
+  }),
+}));
+
+const WALLET = "C" + "B".repeat(55);
+
+test("renders GuardianList with visible Coming Soon badge and disabled action", () => {
+  render(<GuardianList walletAddress={WALLET} />);
+  expect(screen.getByText("Recovery Guardians")).toBeInTheDocument();
+  expect(screen.getByText("Coming Soon")).toBeInTheDocument();
+
+  const button = screen.getByRole("button", { name: /Add Guardian/i });
+  expect(button).toBeDisabled();
+  expect(button).toHaveAttribute("title", "Guardian management ships with the next PolicyModule release");
+});
+
+test("renders informative alert with link to roadmap and tracking issues", () => {
+  render(<GuardianList walletAddress={WALLET} />);
+  expect(screen.getByText(/Guardian add\/remove and recovery execution go through the PolicyModule/i)).toBeInTheDocument();
+  const link = screen.getByRole("link", { name: /GitHub Tracking Issues/i });
+  expect(link).toHaveAttribute("href", "https://github.com/Rayos-Org/web-dashboard/issues");
+});
diff --git a/components/guardians/GuardianList.tsx b/components/guardians/GuardianList.tsx
index 59a4173..08d8d83 100644
--- a/components/guardians/GuardianList.tsx
+++ b/components/guardians/GuardianList.tsx
@@ -23,7 +23,12 @@ export function GuardianList({ walletAddress }: { walletAddress: string }) {
   return (
     <Card>
       <CardHeader className="border-b pb-6">
-        <CardTitle>Recovery Guardians</CardTitle>
+        <div className="flex items-center gap-2.5">
+          <CardTitle>Recovery Guardians</CardTitle>
+          <Badge variant="outline" className="border-amber-500/40 bg-amber-500/10 text-amber-500 font-medium">
+            Coming Soon
+          </Badge>
+        </div>
         <CardDescription>Trusted signers who can authorize wallet recovery — read live from your wallet contract.</CardDescription>
         <CardAction>
           <Button disabled title="Guardian management ships with the next PolicyModule release">
@@ -43,12 +48,21 @@ export function GuardianList({ walletAddress }: { walletAddress: string }) {
           </Badge>
         </div>
 
-        <Alert>
-          <Info />
+        <Alert className="border-amber-500/30 bg-amber-500/5">
+          <Info className="text-amber-500 shrink-0" />
           <AlertDescription className="text-sm">
-            Guardian add/remove and recovery execution go through the PolicyModule, whose testnet deployment is
+            <span className="font-semibold text-foreground">Coming Soon:</span> Guardian add/remove and recovery execution go through the PolicyModule, whose testnet deployment is
             owner-gated. The recovery <em>proposal</em> flow (Lost device → Recover) and guardian approvals are live
-            on the relay; on-chain execution lands with the next contract release.
+            on the relay; on-chain execution lands with the next contract release. Track status on{" "}
+            <a
+              href="https://github.com/Rayos-Org/web-dashboard/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary underline underline-offset-4 hover:text-primary/80"
+            >
+              GitHub Tracking Issues
+              <ExternalLink className="inline h-3 w-3" />
+            </a>.
           </AlertDescription>
         </Alert>
 
diff --git a/components/policies/SpendLimitForm.tsx b/components/policies/SpendLimitForm.tsx
index d8c539a..43bd2aa 100644
--- a/components/policies/SpendLimitForm.tsx
+++ b/components/policies/SpendLimitForm.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Info } from "lucide-react";
+import { Info, ExternalLink } from "lucide-react";
 
 const WINDOWS = [
   { label: "1 Hour", value: "3600" },
@@ -37,16 +37,21 @@ export function SpendLimitForm({ walletAddress }: { walletAddress: string }) {
             <CardTitle>Spend Limit</CardTitle>
             <CardDescription>A rolling cap enforced by the on-chain policy module.</CardDescription>
           </div>
-          <Badge variant="outline" className="border-warning/40 bg-warning/10 text-warning shrink-0">
-            Preview
-          </Badge>
+          <div className="flex items-center gap-2 shrink-0">
+            <Badge variant="outline" className="border-warning/40 bg-warning/10 text-warning">
+              Preview
+            </Badge>
+            <Badge variant="outline" className="border-amber-500/40 bg-amber-500/10 text-amber-500 font-medium">
+              Coming Soon
+            </Badge>
+          </div>
         </div>
       </CardHeader>
       <CardContent className="space-y-5">
-        <Alert>
-          <Info />
+        <Alert className="border-amber-500/30 bg-amber-500/5">
+          <Info className="text-amber-500 shrink-0" />
           <AlertDescription className="text-sm">
-            The policy contract on testnet (
+            <span className="font-semibold text-foreground">Coming Soon:</span> The policy contract on testnet (
             <a
               href={`https://stellar.expert/explorer/testnet/contract/${POLICY_CONTRACT}`}
               target="_blank"
@@ -57,7 +62,16 @@ export function SpendLimitForm({ walletAddress }: { walletAddress: string }) {
             </a>
             ) is owner-gated in its current release, so per-wallet limits for{" "}
             <code className="font-mono text-xs">{walletAddress.slice(0, 8)}…</code> can&apos;t be written from here yet.
-            Sends are still passkey-verified on-chain by your wallet contract.
+            Sends are still passkey-verified on-chain by your wallet contract. Track status on{" "}
+            <a
+              href="https://github.com/Rayos-Org/web-dashboard/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary underline underline-offset-4 hover:text-primary/80"
+            >
+              GitHub Tracking Issues
+              <ExternalLink className="inline h-3 w-3" />
+            </a>.
           </AlertDescription>
         </Alert>
         <div className="space-y-2">
@@ -100,7 +114,7 @@ export function SpendLimitForm({ walletAddress }: { walletAddress: string }) {
       </CardContent>
       <CardFooter>
         <Button type="button" size="lg" disabled className="w-full" title="Requires the next PolicyModule release">
-          Set Spend Limit — available in the next contract release
+          Set Spend Limit — Coming Soon in next contract release
         </Button>
       </CardFooter>
     </Card>