self-sign complet. screen2

src/components/accounts/TransactionDataTable.tsx

@@ -48,6 +48,22 @@ const TransactionDataTable = () => {
     }, []);
 
 
+    function formatTimestamp(isoString, options = { timeZone: 'local' }) {
+        // Parse the ISO string to a Date object
+        const date = new Date(isoString);
+
+        if (isNaN(date)) {
+            return 'Invalid date';
+        }
+
+        // Return formatted date string
+        if (options.timeZone === 'UTC') {
+            return date.toUTCString(); // e.g. "Mon, 04 Aug 2025 13:46:46 GMT"
+        } else {
+            return date.toLocaleString(); // e.g. "8/4/2025, 9:46:46 AM" (based on local time zone)
+        }
+    }
+
 
 
     return (
@@ -96,7 +112,7 @@ const TransactionDataTable = () => {
                                         </td>
 
                                         <td className="px-4 py-3 text-center">
-                                            {formatDate(tx.lastModifiedAt)}
+                                            {formatTimestamp(tx.lastModifiedAt)}
                                         </td>
                                         <td className="px-4 py-3 text-center">
                                             {tx.expireAfter ?? "-"}

src/components/client/SignCompletionScreen.tsx

@@ -42,7 +42,7 @@ const SignCompletionScreen: React.FC = () => {
     };
 
     return (
-        <div className="min-h-screen w-screen z-1000 bg-gradient-to-br from-slate-50/50 via-blue-50 to-indigo-200/40 flex items-center justify-center p-4 overflow-hidden absolute top-0 left-0">
+        <div className="min-h-screen w-screen z-1000 bg-gradient-to-br from-slate-100/50 via-blue-100/50 to-slate-300/50 flex items-center justify-center p-4 overflow-hidden absolute top-0 left-0">
             <style jsx>{`
         :root {
           --primary: #3D74B6;
@@ -104,12 +104,12 @@ const SignCompletionScreen: React.FC = () => {
           opacity: 0.6;
         }
 
-        .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
+        .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 1s; }
-        .particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 1s; }
+        .particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 2s; }
-        .particle:nth-child(3) { top: 30%; left: 80%; animation-delay: 2s; }
+        .particle:nth-child(3) { top: 30%; left: 80%; animation-delay: 3s; }
-        .particle:nth-child(4) { top: 80%; left: 70%; animation-delay: 1.5s; }
+        .particle:nth-child(4) { top: 80%; left: 70%; animation-delay: 2.5s; }
-        .particle:nth-child(5) { top: 10%; left: 60%; animation-delay: 0.5s; }
+        .particle:nth-child(5) { top: 10%; left: 60%; animation-delay: 1.5s; }
-        .particle:nth-child(6) { top: 70%; left: 40%; animation-delay: 2.5s; }
+        .particle:nth-child(6) { top: 70%; left: 40%; animation-delay: 3.5s; }
 
         .premium-glow {
           box-shadow: