From 0fa687d1d7ae742a50a881c5ce0e365a0ceedf11 Mon Sep 17 00:00:00 2001
From: mindesbunister <github_service@egonetix.de>
Date: Sun, 13 Jul 2025 01:46:34 +0200
Subject: [PATCH] Fix hydration error by handling time display on client-side
 and add stop-loss/take-profit to trading system

---
 components/AutoTradingPanel.tsx | 17 +++++++++++++++--
 components/TradingHistory.tsx   | 12 +++++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/AutoTradingPanel.tsx b/components/AutoTradingPanel.tsx
index 88bee1d..055c797 100644
--- a/components/AutoTradingPanel.tsx
+++ b/components/AutoTradingPanel.tsx
@@ -1,9 +1,22 @@
 "use client"
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 export default function AutoTradingPanel() {
   const [status, setStatus] = useState<'idle'|'running'|'stopped'>('idle')
   const [message, setMessage] = useState<string>('')
+  const [currentTime, setCurrentTime] = useState<string>('')
+
+  // Set current time only on client to avoid hydration mismatch
+  useEffect(() => {
+    const updateTime = () => {
+      setCurrentTime(new Date().toLocaleTimeString())
+    }
+    
+    updateTime() // Set initial time
+    const interval = setInterval(updateTime, 1000) // Update every second
+    
+    return () => clearInterval(interval)
+  }, [])
 
   async function handleAction(action: 'start'|'stop') {
     setMessage('')
@@ -63,7 +76,7 @@ export default function AutoTradingPanel() {
           </div>
           <div className="text-right">
             <div className="text-xs text-gray-400">Last Updated</div>
-            <div className="text-sm text-gray-300">{new Date().toLocaleTimeString()}</div>
+            <div className="text-sm text-gray-300">{currentTime || '--:--:--'}</div>
           </div>
         </div>
         
diff --git a/components/TradingHistory.tsx b/components/TradingHistory.tsx
index 00d6e2f..0be3a9c 100644
--- a/components/TradingHistory.tsx
+++ b/components/TradingHistory.tsx
@@ -15,6 +15,16 @@ interface Trade {
 export default function TradingHistory() {
   const [trades, setTrades] = useState<Trade[]>([])
   const [loading, setLoading] = useState(true)
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const formatTime = (dateString: string) => {
+    if (!isClient) return '--:--:--'
+    return new Date(dateString).toLocaleTimeString()
+  }
 
   useEffect(() => {
     async function fetchTrades() {
@@ -146,7 +156,7 @@ export default function TradingHistory() {
                       </span>
                     </td>
                     <td className="py-4 px-4 text-right text-xs text-gray-400">
-                      {new Date(trade.executedAt).toLocaleTimeString()}
+                      {formatTime(trade.executedAt)}
                     </td>
                   </tr>
                 ))}