Merge pull request #45 from deriv-com/farabi/add-server-time

Farabi/add server time

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>
+  );
+};

src/components/ServerTime/index.ts

@@ -0,0 +1 @@
+export { ServerTime } from "./ServerTime";

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>

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>
 

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', () => {

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

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 }),
+}));