fix: policy detail page bug fixes and improvements

src/app/policies/[id]/policy-detail-client.tsx

@@ -111,8 +111,8 @@ export default function PolicyDetailClient({
   return (
     <main className="mx-auto max-w-3xl px-6 py-12">
       {refetching && (
-        <div className="fixed inset-x-0 top-0 z-50 flex justify-center">
-          <div className="mt-4 flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-xs text-gray-400 backdrop-blur">
+        <div className="sticky top-0 z-50 flex justify-center py-2">
+          <div className="flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-xs text-gray-400 backdrop-blur">
             <span className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-teal-300 border-t-teal-100" />
             Refreshing…
           </div>
@@ -135,7 +135,7 @@ export default function PolicyDetailClient({
             <span className="font-mono text-sm text-white">
               {shortenAddress(policy.policyholder)}
             </span>
-            <CopyButton text={policy.policyholder} label="Copy address" />
+            <CopyButton text={policy.policyholder} label={`Copy address ${shortenAddress(policy.policyholder)}`} />
           </div>
         </div>
 
@@ -170,7 +170,7 @@ export default function PolicyDetailClient({
             <span className="font-mono text-sm text-white break-all">
               {policy.oracleKey}
             </span>
-            <CopyButton text={policy.oracleKey} label="Copy key" />
+            <CopyButton text={policy.oracleKey} label={`Copy key ${shortenAddress(policy.oracleKey)}`} />
           </div>
         </div>
 

src/hooks/usePolicies.ts

@@ -87,19 +87,34 @@ export function usePolicies(walletAddress: string | null) {
   return { policies, loading, error, pollingError, refetch };
 }
 
+const POLICY_CACHE_TTL_MS = 30_000;
+const policyCache = new Map<string, { data: Policy; ts: number }>();
+
 export function usePolicy(id: string | null) {
-  const [policy, setPolicy] = useState<Policy | null>(null);
+  const [policy, setPolicy] = useState<Policy | null>(() => {
+    if (!id) return null;
+    const cached = policyCache.get(id);
+    if (cached && Date.now() - cached.ts < POLICY_CACHE_TTL_MS) return cached.data;
+    return null;
+  });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!id) return;
+    const cached = policyCache.get(id);
+    if (cached && Date.now() - cached.ts < POLICY_CACHE_TTL_MS) {
+      setPolicy(cached.data);
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
     setError(null);
     fetchPolicy(id)
       .then((p) => {
         if (!cancelled) {
+          policyCache.set(id, { data: p, ts: Date.now() });
           setPolicy(p);
         }
       })
@@ -134,6 +149,7 @@ export function usePolicy(id: string | null) {
     setError(null);
     try {
       const p = await fetchPolicy(id);
+      policyCache.set(id, { data: p, ts: Date.now() });
       setPolicy(p);
     } catch (err) {
       // 404 means the policy doesn't exist — show "not found" instead of error

src/lib/errors.ts

@@ -79,7 +79,7 @@ export function toUserMessage(err: unknown): string {
   // situation in user terms and needs no "Contract call failed" prefix.
   if (err instanceof StateArchivedError) return err.message;
   if (err instanceof ContractError) {
-    if (err.details !== undefined) console.error('ContractError details:', err.details);
+    if (err.details !== undefined && import.meta.env.DEV) console.error('ContractError details:', err.details);
     return `Contract call failed: ${err.message}`;
   }
   if (err instanceof Error) return err.message;