From a885928f9bdcfd9e38cb3249aa23575287454745 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Thu, 20 Feb 2025 16:26:45 +0800
Subject: [PATCH 1/2] fix: added server time and fixed minor ui

---
 src/components/ServerTime/ServerTime.tsx      | 31 +++++++++++++++++++
 src/components/ServerTime/index.ts            |  1 +
 .../ContractDetailsPage.tsx                   |  4 +--
 src/screens/TradePage/TradePage.tsx           | 10 +++---
 .../components/TradeFormController.tsx        |  6 +++-
 src/stores/serverTimeStore.ts                 | 11 +++++++
 6 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ServerTime/ServerTime.tsx
 create mode 100644 src/components/ServerTime/index.ts
 create mode 100644 src/stores/serverTimeStore.ts

diff --git a/src/components/ServerTime/ServerTime.tsx b/src/components/ServerTime/ServerTime.tsx
new file mode 100644
index 0000000..660cf28
--- /dev/null
+++ b/src/components/ServerTime/ServerTime.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { useServerTimeStore } from "@/stores/serverTimeStore";
+
+export const ServerTime: React.FC = () => {
+  const { serverTime, setServerTime } = useServerTimeStore();
+
+  useEffect(() => {
+    const updateTime = () => {
+      setServerTime(new Date());
+    };
+
+    // Update immediately and then every second
+    updateTime();
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [setServerTime]);
+
+  return (
+    <div className="text-xs text-gray-700 flex justify-between items-center py-2 px-2">
+      <div>
+        {serverTime.getDate().toString().padStart(2, '0')} {' '}
+        {serverTime.toLocaleString('default', { month: 'short' })} {' '}
+        {serverTime.getFullYear()}
+      </div>
+      <div>
+        {serverTime.toTimeString().split(' ')[0]} GMT
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ServerTime/index.ts b/src/components/ServerTime/index.ts
new file mode 100644
index 0000000..b7e9c6b
--- /dev/null
+++ b/src/components/ServerTime/index.ts
@@ -0,0 +1 @@
+export { ServerTime } from "./ServerTime";
diff --git a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
index 6f6936d..396bd60 100644
--- a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
+++ b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
@@ -43,10 +43,10 @@ const MobileContractDetailsPage: React.FC = () => {
 
         {/* Close Button */}
         <div className="fixed bottom-0 left-0 right-0 z-[60]">
-          <div className="mx-2 text-center">
+          <div className="mx-2 mb-2 text-center">
             <button
               onClick={() => navigate(-1)}
-              className="text-white bg-black max-w-[500px] mx-auto  w-full p-3 px-8 text-center rounded-xl shadow-md"
+              className="text-white bg-black max-w-[500px] mx-auto w-full p-3 px-8 text-center rounded-xl shadow-md"
             >
               Close
             </button>
diff --git a/src/screens/TradePage/TradePage.tsx b/src/screens/TradePage/TradePage.tsx
index 2daf378..a01d13a 100644
--- a/src/screens/TradePage/TradePage.tsx
+++ b/src/screens/TradePage/TradePage.tsx
@@ -35,7 +35,7 @@ export const TradePage: React.FC = () => {
     <div
       className={`flex ${
         isLandscape ? "flex-row relative" : "flex-col"
-      } flex-1 h-[100dvh]`}
+      } flex-1 h-[100%]`}
       data-testid="trade-page"
     >
       <div
@@ -68,9 +68,11 @@ export const TradePage: React.FC = () => {
             </Suspense>
           </div>
 
-          <Suspense fallback={<div>Loading...</div>}>
-            <DurationOptions />
-          </Suspense>
+          {!isLandscape && (
+            <Suspense fallback={<div>Loading...</div>}>
+              <DurationOptions />
+            </Suspense>
+          )}
         </div>
       </div>
 
diff --git a/src/screens/TradePage/components/TradeFormController.tsx b/src/screens/TradePage/components/TradeFormController.tsx
index c012c48..1fdf73f 100644
--- a/src/screens/TradePage/components/TradeFormController.tsx
+++ b/src/screens/TradePage/components/TradeFormController.tsx
@@ -1,4 +1,5 @@
 import React, { Suspense, lazy, useEffect, useState } from "react"
+import { ServerTime } from "@/components/ServerTime"
 import { TradeButton } from "@/components/TradeButton"
 import { ResponsiveTradeParamLayout } from "@/components/ui/responsive-trade-param-layout"
 import { MobileTradeFieldCard } from "@/components/ui/mobile-trade-field-card"
@@ -199,7 +200,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
       </div>
       {isLandscape ? (
         // Desktop layout
-        <div className="flex-1">
+        <div className="flex-1 flex flex-col">
           <div
             className="flex flex-col gap-0"
             onMouseDown={() => {
@@ -299,6 +300,9 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
               </Suspense>
             ))}
           </div>
+          <div className="mt-auto">
+            <ServerTime />
+          </div>
         </div>
       ) : (
         // Mobile layout
diff --git a/src/stores/serverTimeStore.ts b/src/stores/serverTimeStore.ts
new file mode 100644
index 0000000..b0c2f86
--- /dev/null
+++ b/src/stores/serverTimeStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ServerTimeStore {
+  serverTime: Date;
+  setServerTime: (time: Date) => void;
+}
+
+export const useServerTimeStore = create<ServerTimeStore>((set) => ({
+  serverTime: new Date(),
+  setServerTime: (time: Date) => set({ serverTime: time }),
+}));

From 3c4d5b62b1601b34098813596af6385c9d3d3989 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Thu, 20 Feb 2025 16:31:24 +0800
Subject: [PATCH 2/2] fix: trade page test case

---
 src/screens/TradePage/__tests__/TradePage.test.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/screens/TradePage/__tests__/TradePage.test.tsx b/src/screens/TradePage/__tests__/TradePage.test.tsx
index c7d8a8f..29c2add 100644
--- a/src/screens/TradePage/__tests__/TradePage.test.tsx
+++ b/src/screens/TradePage/__tests__/TradePage.test.tsx
@@ -168,7 +168,7 @@ describe('TradePage', () => {
     expect(tradePage.className).toContain('flex');
     expect(tradePage.className).toContain('flex-col');
     expect(tradePage.className).toContain('flex-1');
-    expect(tradePage.className).toContain('h-[100dvh]');
+    expect(tradePage.className).toContain('h-[100%]');
   });
 
   it('renders in landscape mode', async () => {
@@ -185,7 +185,6 @@ describe('TradePage', () => {
 
     // Balance display should be visible in landscape mode
     expect(screen.getByTestId('bottom-sheet')).toBeInTheDocument();
-    expect(screen.getByTestId('duration-options')).toBeInTheDocument();
     expect(screen.getByTestId('market-selector')).toBeInTheDocument();
 
     // // Check for MarketInfo with selected market
@@ -197,7 +196,7 @@ describe('TradePage', () => {
     expect(tradePage.className).toContain('flex-row');
     expect(tradePage.className).toContain('relative');
     expect(tradePage.className).toContain('flex-1');
-    expect(tradePage.className).toContain('h-[100dvh]');
+    expect(tradePage.className).toContain('h-[100%]');
   });
 
   it('shows "Select Market" when no market is selected', () => {