From 60d5a5f1c4d69afff9d71a3aa2c74af2d23a1026 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Thu, 6 Feb 2025 19:31:02 +0800
Subject: [PATCH 01/12] fix: bottom nav and side nav on logged in and out view

---
 src/components/BottomNav/BottomNav.tsx     | 40 ++++++++++++-----
 src/components/SideNav/SideNav.tsx         | 52 ++++++++++++----------
 src/components/TradeButton/TradeButton.tsx | 25 ++++++-----
 src/layouts/MainLayout/Footer.tsx          | 10 +----
 src/layouts/MainLayout/Header.tsx          | 16 -------
 src/layouts/MainLayout/MainLayout.tsx      |  4 +-
 6 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/src/components/BottomNav/BottomNav.tsx b/src/components/BottomNav/BottomNav.tsx
index b1f3a44..d0a7774 100644
--- a/src/components/BottomNav/BottomNav.tsx
+++ b/src/components/BottomNav/BottomNav.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { BarChart2, Clock } from "lucide-react";
+import { BarChart2, Clock, Menu } from "lucide-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
 
@@ -8,27 +8,45 @@ export const BottomNav: React.FC = () => {
   const location = useLocation();
   const { isLoggedIn } = useClientStore();
 
-  if (!isLoggedIn) return null;
+  const handleMenuClick = () => {
+    navigate(location.pathname === "/menu" ? "/trade" : "/menu");
+  };
 
   return (
-    <nav className="flex items-center justify-around px-4 py-2 border-t bg-white" data-testid="bottom-nav-menu">
-      <button 
-        onClick={() => navigate('/trade')}
+    <nav
+      className="flex items-center justify-around px-4 py-2 border-t bg-white"
+      data-testid="bottom-nav-menu"
+    >
+      <button
+        onClick={() => navigate("/trade")}
         className={`flex flex-col items-center gap-1 ${
-          location.pathname === '/trade' ? 'text-primary' : 'text-gray-500'
+          location.pathname === "/trade" ? "text-primary" : "text-gray-500"
         }`}
       >
         <BarChart2 className="w-5 h-5" />
         <span className="text-xs">Trade</span>
       </button>
-      <button 
-        onClick={() => navigate('/positions')}
+      {isLoggedIn && (
+        <button
+          onClick={() => navigate("/positions")}
+          className={`flex flex-col items-center gap-1 ${
+            location.pathname === "/positions"
+              ? "text-primary"
+              : "text-gray-500"
+          }`}
+        >
+          <Clock className="w-5 h-5" />
+          <span className="text-xs">Positions</span>
+        </button>
+      )}
+      <button
+        onClick={handleMenuClick}
         className={`flex flex-col items-center gap-1 ${
-          location.pathname === '/positions' ? 'text-primary' : 'text-gray-500'
+          location.pathname === "/menu" ? "text-primary" : "text-gray-500"
         }`}
       >
-        <Clock className="w-5 h-5" />
-        <span className="text-xs">Positions</span>
+        <Menu className="w-5 h-5" />
+        <span className="text-xs">Menu</span>
       </button>
     </nav>
   );
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
index c43fab2..5fd923a 100644
--- a/src/components/SideNav/SideNav.tsx
+++ b/src/components/SideNav/SideNav.tsx
@@ -11,38 +11,42 @@ export const SideNav: React.FC = () => {
   const { isLandscape } = useOrientationStore();
 
   const handleMenuClick = () => {
-    navigate(location.pathname === '/menu' ? '/trade' : '/menu');
+    navigate(location.pathname === "/menu" ? "/trade" : "/menu");
   };
 
   return (
-    <nav className={`${isLandscape ? 'flex' : 'hidden'} flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}>
+    <nav
+      className={`${
+        isLandscape ? "flex" : "hidden"
+      } flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}
+    >
       <div className="flex flex-col items-center gap-6 py-6">
+        <button
+          onClick={() => navigate("/trade")}
+          className={`flex flex-col items-center gap-1 ${
+            location.pathname === "/trade" ? "text-primary" : "text-gray-500"
+          }`}
+        >
+          <BarChart2 className="w-5 h-5" />
+          <span className="text-xs">Trade</span>
+        </button>
         {isLoggedIn && (
-          <>
-            <button 
-              onClick={() => navigate('/trade')}
-              className={`flex flex-col items-center gap-1 ${
-                location.pathname === '/trade' ? 'text-primary' : 'text-gray-500'
-              }`}
-            >
-              <BarChart2 className="w-5 h-5" />
-              <span className="text-xs">Trade</span>
-            </button>
-            <button 
-              onClick={() => navigate('/positions')}
-              className={`flex flex-col items-center gap-1 ${
-                location.pathname === '/positions' ? 'text-primary' : 'text-gray-500'
-              }`}
-            >
-              <Clock className="w-5 h-5" />
-              <span className="text-xs">Positions</span>
-            </button>
-          </>
+          <button
+            onClick={() => navigate("/positions")}
+            className={`flex flex-col items-center gap-1 ${
+              location.pathname === "/positions"
+                ? "text-primary"
+                : "text-gray-500"
+            }`}
+          >
+            <Clock className="w-5 h-5" />
+            <span className="text-xs">Positions</span>
+          </button>
         )}
-        <button 
+        <button
           onClick={handleMenuClick}
           className={`flex flex-col items-center gap-1 ${
-            location.pathname === '/menu' ? 'text-primary' : 'text-gray-500'
+            location.pathname === "/menu" ? "text-primary" : "text-gray-500"
           }`}
         >
           <Menu className="w-5 h-5" />
diff --git a/src/components/TradeButton/TradeButton.tsx b/src/components/TradeButton/TradeButton.tsx
index 4e5f4b1..eaf067c 100644
--- a/src/components/TradeButton/TradeButton.tsx
+++ b/src/components/TradeButton/TradeButton.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
 import { useOrientationStore } from "@/stores/orientationStore";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -20,6 +19,8 @@ export const TradeButton: React.FC<TradeButtonProps> = ({
   className,
 }) => {
   const { isLandscape } = useOrientationStore();
+  const isRiseButton = title_position === "left";
+
   return (
     <Button
       className={cn(
@@ -31,18 +32,22 @@ export const TradeButton: React.FC<TradeButtonProps> = ({
     >
       <div className={cn(
         "flex items-center w-full px-3",
-        !isLandscape ? (title_position === "right" && "justify-end") : "justify-start"
+        isLandscape ? "justify-start" : isRiseButton ? "justify-start" : "justify-end"
       )}>
         <span className={cn("font-bold", isLandscape ? "text-base" : "text-lg")}>{title}</span>
       </div>
-      <div className={cn(
-        "flex items-center w-full px-3",
-        !isLandscape ? (
-          title_position === "right" ? "flex-row-reverse" : "justify-between"
-        ) : "justify-between"
-      )}>
-        <span className={cn("opacity-80", isLandscape ? "text-xs" : "text-sm")}>{label}</span>
-        <span className={isLandscape ? "text-xs" : "text-sm"}>{value}</span>
+      <div className="flex items-center justify-between w-full px-3">
+        {isRiseButton && !isLandscape ? (
+          <>
+            <span className="text-xs">{value}</span>
+            <span className="text-xs opacity-80">{label}</span>
+          </>
+        ) : (
+          <>
+            <span className="text-xs opacity-80">{label}</span>
+            <span className="text-xs">{value}</span>
+          </>
+        )}
       </div>
     </Button>
   );
diff --git a/src/layouts/MainLayout/Footer.tsx b/src/layouts/MainLayout/Footer.tsx
index 2c7012b..508a7d9 100644
--- a/src/layouts/MainLayout/Footer.tsx
+++ b/src/layouts/MainLayout/Footer.tsx
@@ -1,16 +1,10 @@
 import React from "react";
 import { BottomNav } from "@/components/BottomNav";
-import { useOrientationStore } from "@/stores/orientationStore";
 
-interface FooterProps {
-  className?: string;
-}
-
-export const Footer: React.FC<FooterProps> = ({ className = '' }) => {
-  const { isLandscape } = useOrientationStore();
+export const Footer: React.FC = () => {
 
   return (
-    <footer className={`border-t ${!isLandscape ? 'block' : 'hidden'} ${className}`}>
+    <footer className="border-t">
       <BottomNav />
     </footer>
   );
diff --git a/src/layouts/MainLayout/Header.tsx b/src/layouts/MainLayout/Header.tsx
index b12bdbf..960e4b6 100644
--- a/src/layouts/MainLayout/Header.tsx
+++ b/src/layouts/MainLayout/Header.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { Menu } from 'lucide-react';
-import { useNavigate, useLocation } from 'react-router-dom';
 import { BalanceDisplay } from '@/components/BalanceDisplay';
 import { useOrientationStore } from '@/stores/orientationStore';
 
@@ -9,24 +7,10 @@ interface HeaderProps {
 }
 
 export const Header: React.FC<HeaderProps> = ({ className = '' }) => {
-  const navigate = useNavigate();
-  const location = useLocation();
   const { isLandscape } = useOrientationStore();
 
-  const handleMenuClick = () => {
-    navigate(location.pathname === '/menu' ? '/trade' : '/menu');
-  };
-
   return (
     <header className={`${!isLandscape ? 'flex' : 'hidden'} flex items-center gap-4 px-4 py-2 border-b border-opacity-10 bg-white ${className}`} id="header">
-      <button 
-        onClick={handleMenuClick}
-        className={`flex flex-col items-center ${
-          location.pathname === '/menu' ? 'text-primary' : 'text-gray-500'
-        }`}
-      >
-        <Menu className="w-5 h-5" />
-      </button>
       <BalanceDisplay className="flex-1" />
     </header>
   );
diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
index 07d1695..f624656 100644
--- a/src/layouts/MainLayout/MainLayout.tsx
+++ b/src/layouts/MainLayout/MainLayout.tsx
@@ -4,7 +4,6 @@ import { useOrientationStore } from "@/stores/orientationStore";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { SideNav } from "@/components/SideNav";
-import { useClientStore } from "@/stores/clientStore";
 
 interface MainLayoutProps {
   children: React.ReactNode;
@@ -13,7 +12,6 @@ interface MainLayoutProps {
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const { isMobile } = useDeviceDetection();
   const { isLandscape, setIsLandscape } = useOrientationStore();
-  const { isLoggedIn } = useClientStore();
 
   useEffect(() => {
     const handleOrientationChange = () => {
@@ -41,7 +39,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
           {children}
         </main>
-        {isLoggedIn && !isLandscape && <Footer className="sticky bottom-0 z-50" />}
+        {!isLandscape && <Footer className="sticky bottom-0 z-50" />}
       </div>
     </div>
   );

From 522494596fcd27f7be1e6c3472adb59ad3b09d79 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Thu, 6 Feb 2025 19:39:06 +0800
Subject: [PATCH 02/12] fix: test case

---
 src/components/BottomNav/__tests__/BottomNav.test.tsx | 6 ------
 src/layouts/MainLayout/Footer.tsx                     | 8 ++++++--
 src/layouts/MainLayout/MainLayout.tsx                 | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/BottomNav/__tests__/BottomNav.test.tsx b/src/components/BottomNav/__tests__/BottomNav.test.tsx
index 5998850..90ace36 100644
--- a/src/components/BottomNav/__tests__/BottomNav.test.tsx
+++ b/src/components/BottomNav/__tests__/BottomNav.test.tsx
@@ -27,12 +27,6 @@ describe('BottomNav', () => {
     useClientStore.getState().isLoggedIn = false;
   });
 
-  it('does not render navigation button when user is logged out', () => {
-    renderWithRouter();
-    // Expect that the navigation button with test ID "bottom-nav-menu" is not present.
-    expect(screen.queryByTestId('bottom-nav-menu')).toBeNull();
-  });
-
   it('renders navigation button when user is logged in', () => {
     useClientStore.getState().isLoggedIn = true;
     renderWithRouter();
diff --git a/src/layouts/MainLayout/Footer.tsx b/src/layouts/MainLayout/Footer.tsx
index 508a7d9..30d9e4c 100644
--- a/src/layouts/MainLayout/Footer.tsx
+++ b/src/layouts/MainLayout/Footer.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 import { BottomNav } from "@/components/BottomNav";
 
-export const Footer: React.FC = () => {
+interface FooterProps {
+  className?: string;
+}
+
+export const Footer: React.FC<FooterProps> = ({ className = '' }) => {
 
   return (
-    <footer className="border-t">
+    <footer className={`border-t ${className}`}>
       <BottomNav />
     </footer>
   );
diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
index f624656..002758b 100644
--- a/src/layouts/MainLayout/MainLayout.tsx
+++ b/src/layouts/MainLayout/MainLayout.tsx
@@ -39,7 +39,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
           {children}
         </main>
-        {!isLandscape && <Footer className="sticky bottom-0 z-50" />}
+        {!isLandscape && <Footer />}
       </div>
     </div>
   );

From aab7b6f452990c2b5cf93d215c344a3e03a8d763 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Thu, 6 Feb 2025 19:40:34 +0800
Subject: [PATCH 03/12] fix: test case

---
 src/layouts/MainLayout/__tests__/Footer.test.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/layouts/MainLayout/__tests__/Footer.test.tsx b/src/layouts/MainLayout/__tests__/Footer.test.tsx
index 3832bfa..c1dcffd 100644
--- a/src/layouts/MainLayout/__tests__/Footer.test.tsx
+++ b/src/layouts/MainLayout/__tests__/Footer.test.tsx
@@ -22,12 +22,6 @@ describe('Footer', () => {
     useClientStore.getState().isLoggedIn = false;
   });
 
-  it('does not render when user is logged out', () => {
-    renderWithRouter();
-    // In logout view, Footer should not render, so "Menu" should not be present.
-    expect(screen.queryByText('Menu')).toBeNull();
-  });
-
   it('renders navigation items when user is logged in', () => {
     useClientStore.getState().isLoggedIn = true;
     renderWithRouter();

From 9033b23ce66b5289ea9343af089d0212b29d1ccc Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Fri, 7 Feb 2025 17:00:36 +0800
Subject: [PATCH 04/12] feat: added guide and update layout

---
 src/components/HowToTrade/HowToTrade.tsx      |  35 +++++
 .../HowToTrade/__tests__/HowToTrade.test.tsx  |  28 ++++
 src/components/HowToTrade/index.ts            |   1 +
 src/components/TradeButton/TradeButton.tsx    |   2 +-
 src/config/bottomSheetConfig.tsx              |  25 ++++
 src/layouts/MainLayout/MainLayout.tsx         |   2 +-
 src/screens/MenuPage/MenuPage.tsx             |  39 ++++--
 src/screens/TradePage/TradePage.tsx           | 131 +++++++++++-------
 8 files changed, 199 insertions(+), 64 deletions(-)
 create mode 100644 src/components/HowToTrade/HowToTrade.tsx
 create mode 100644 src/components/HowToTrade/__tests__/HowToTrade.test.tsx
 create mode 100644 src/components/HowToTrade/index.ts

diff --git a/src/components/HowToTrade/HowToTrade.tsx b/src/components/HowToTrade/HowToTrade.tsx
new file mode 100644
index 0000000..95e11f3
--- /dev/null
+++ b/src/components/HowToTrade/HowToTrade.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useBottomSheetStore } from '@/stores/bottomSheetStore';
+
+export const HowToTrade: React.FC = () => {
+  const { setBottomSheet } = useBottomSheetStore();
+
+  const handleClick = () => {
+    setBottomSheet(true, 'how-to-trade', '470px');
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
+    >
+      How to trade Rise/Fall?
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-4 h-4"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M8.25 4.5l7.5 7.5-7.5 7.5"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default HowToTrade;
diff --git a/src/components/HowToTrade/__tests__/HowToTrade.test.tsx b/src/components/HowToTrade/__tests__/HowToTrade.test.tsx
new file mode 100644
index 0000000..7e0d45b
--- /dev/null
+++ b/src/components/HowToTrade/__tests__/HowToTrade.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import HowToTrade from '../HowToTrade';
+
+const mockSetBottomSheet = jest.fn();
+
+// Mock the bottomSheetStore
+jest.mock('@/stores/bottomSheetStore', () => ({
+  useBottomSheetStore: () => ({
+    setBottomSheet: mockSetBottomSheet
+  })
+}));
+
+describe('HowToTrade', () => {
+  beforeEach(() => {
+    mockSetBottomSheet.mockClear();
+  });
+
+  it('renders correctly', () => {
+    render(<HowToTrade />);
+    expect(screen.getByText('How to trade Rise/Fall?')).toBeInTheDocument();
+  });
+
+  it('opens bottom sheet when clicked', () => {
+    render(<HowToTrade />);
+    fireEvent.click(screen.getByText('How to trade Rise/Fall?'));
+    expect(mockSetBottomSheet).toHaveBeenCalledWith(true, 'how-to-trade', '470px');
+  });
+});
diff --git a/src/components/HowToTrade/index.ts b/src/components/HowToTrade/index.ts
new file mode 100644
index 0000000..b12d982
--- /dev/null
+++ b/src/components/HowToTrade/index.ts
@@ -0,0 +1 @@
+export { default } from './HowToTrade';
diff --git a/src/components/TradeButton/TradeButton.tsx b/src/components/TradeButton/TradeButton.tsx
index eaf067c..fbfbed0 100644
--- a/src/components/TradeButton/TradeButton.tsx
+++ b/src/components/TradeButton/TradeButton.tsx
@@ -37,7 +37,7 @@ export const TradeButton: React.FC<TradeButtonProps> = ({
         <span className={cn("font-bold", isLandscape ? "text-base" : "text-lg")}>{title}</span>
       </div>
       <div className="flex items-center justify-between w-full px-3">
-        {isRiseButton && !isLandscape ? (
+        {(isLandscape || isRiseButton) ? (
           <>
             <span className="text-xs">{value}</span>
             <span className="text-xs opacity-80">{label}</span>
diff --git a/src/config/bottomSheetConfig.tsx b/src/config/bottomSheetConfig.tsx
index 7417ddf..afc43eb 100644
--- a/src/config/bottomSheetConfig.tsx
+++ b/src/config/bottomSheetConfig.tsx
@@ -23,5 +23,30 @@ export const bottomSheetConfig: BottomSheetConfig = {
         <DurationController />
       </div>
     )
+  },
+  'how-to-trade': {
+    body: (
+      <div className="p-4">
+    <h2 className="text-lg font-semibold mb-4">How to trade Rise/Fall</h2>
+    <div className="space-y-4">
+      <div>
+        <h3 className="font-medium mb-2">1. Select Duration</h3>
+        <p className="text-gray-600">Choose how long you want to trade for - from 1 minute up to 15 minutes.</p>
+      </div>
+      <div>
+        <h3 className="font-medium mb-2">2. Set your Stake</h3>
+        <p className="text-gray-600">Enter the amount you want to trade with.</p>
+      </div>
+      <div>
+        <h3 className="font-medium mb-2">3. Make your Prediction</h3>
+        <p className="text-gray-600">Click "Rise" if you think the market will go up, or "Fall" if you think it will go down.</p>
+      </div>
+      <div>
+        <h3 className="font-medium mb-2">4. Track your Trade</h3>
+        <p className="text-gray-600">Watch the chart to see how the market moves during your selected duration.</p>
+      </div>
+    </div>
+  </div>
+    )
   }
 };
diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
index 002758b..f624656 100644
--- a/src/layouts/MainLayout/MainLayout.tsx
+++ b/src/layouts/MainLayout/MainLayout.tsx
@@ -39,7 +39,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         <main className={`flex-1 ${isLandscape ? 'flex flex-row' : 'flex flex-col'}`}>
           {children}
         </main>
-        {!isLandscape && <Footer />}
+        {!isLandscape && <Footer className="sticky bottom-0 z-50" />}
       </div>
     </div>
   );
diff --git a/src/screens/MenuPage/MenuPage.tsx b/src/screens/MenuPage/MenuPage.tsx
index f5876b8..a633c07 100644
--- a/src/screens/MenuPage/MenuPage.tsx
+++ b/src/screens/MenuPage/MenuPage.tsx
@@ -1,37 +1,52 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
+import { useOrientationStore } from "@/stores/orientationStore";
+import ToggleButton from "@/components/TradeFields/ToggleButton";
+import { Home, MoonStar, LogOut, ExternalLink } from "lucide-react";
 
 export const MenuPage: React.FC = () => {
   const navigate = useNavigate();
   const { logout, isLoggedIn } = useClientStore();
+  const { isLandscape } = useOrientationStore();
 
   const handleLogout = () => {
-    localStorage.removeItem('loginToken');
+    localStorage.removeItem("loginToken");
     logout();
-    navigate('/trade');
+    navigate("/trade");
   };
 
   return (
     <div className="flex flex-col flex-1 p-4">
       <h1 className="text-2xl font-bold">Menu</h1>
       <div className="flex flex-col gap-4 mt-4">
-        <button className="text-left p-4 bg-gray-50 rounded-lg hover:bg-gray-100">
-          Settings
-        </button>
-        <button className="text-left p-4 bg-gray-50 rounded-lg hover:bg-gray-100">
-          Help Center
-        </button>
-        <button className="text-left p-4 bg-gray-50 rounded-lg hover:bg-gray-100">
-          About
+        <button
+          onClick={() => navigate("/trade")}
+          className="text-left p-4 rounded-lg hover:bg-gray-100 border-b border-gray-200 flex items-center gap-3"
+        >
+          <Home className="w-5 h-5" />
+          <span className="text-sm">Go to Home</span>
+          <div className="px-3">
+            <ExternalLink className="w-5 h-5" />
+          </div>
         </button>
+        <div className="text-left p-4 rounded-lg hover:bg-gray-100 border-b border-gray-200 flex items-center gap-3">
+          <MoonStar className="w-5 h-5" />
+          <span className="text-sm">Theme</span>
+          <ToggleButton
+            label=""
+            // value={false}
+            // onChange={() => {}}
+          />
+        </div>
         {isLoggedIn && (
           <>
             <div className="flex-1" />
-            <button 
+            <button
               onClick={handleLogout}
-              className="text-left p-4 text-red-600 bg-red-50 rounded-lg hover:bg-red-100"
+              className="text-left p-4 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 flex items-center gap-3"
             >
+              <LogOut className="w-5 h-5" />
               Log out
             </button>
           </>
diff --git a/src/screens/TradePage/TradePage.tsx b/src/screens/TradePage/TradePage.tsx
index 824feff..9e5147f 100644
--- a/src/screens/TradePage/TradePage.tsx
+++ b/src/screens/TradePage/TradePage.tsx
@@ -1,20 +1,19 @@
-import React, { Suspense } from "react"
-import { useOrientationStore } from "@/stores/orientationStore"
-import { TradeButton } from "@/components/TradeButton"
-import { Chart } from "@/components/Chart"
-import { BalanceDisplay } from "@/components/BalanceDisplay"
-import { BottomSheet } from "@/components/BottomSheet"
-import { AddMarketButton } from "@/components/AddMarketButton"
-import { DurationOptions } from "@/components/DurationOptions"
-import { useTradeStore } from "@/stores/tradeStore"
-import { useBottomSheetStore } from "@/stores/bottomSheetStore"
-import { Card, CardContent } from "@/components/ui/card"
-import TradeParam from "@/components/TradeFields/TradeParam"
-import ToggleButton from "@/components/TradeFields/ToggleButton"
+import React, { Suspense } from "react";
+import { useOrientationStore } from "@/stores/orientationStore";
+import { TradeButton } from "@/components/TradeButton";
+import { Chart } from "@/components/Chart";
+import { BalanceDisplay } from "@/components/BalanceDisplay";
+import { BottomSheet } from "@/components/BottomSheet";
+import { DurationOptions } from "@/components/DurationOptions";
+import { useTradeStore } from "@/stores/tradeStore";
+import { useBottomSheetStore } from "@/stores/bottomSheetStore";
+import { Card, CardContent } from "@/components/ui/card";
+import TradeParam from "@/components/TradeFields/TradeParam";
+import HowToTrade from "@/components/HowToTrade";
 
 interface MarketInfoProps {
-  title: string
-  subtitle: string
+  title: string;
+  subtitle: string;
 }
 
 const MarketInfo: React.FC<MarketInfoProps> = ({ title, subtitle }) => (
@@ -26,23 +25,27 @@ const MarketInfo: React.FC<MarketInfoProps> = ({ title, subtitle }) => (
       </div>
     </CardContent>
   </Card>
-)
+);
 
 export const TradePage: React.FC = () => {
-  const { stake, duration, allowEquals, toggleAllowEquals } = useTradeStore()
-  const { setBottomSheet } = useBottomSheetStore()
-  const { isLandscape } = useOrientationStore()
+  const { stake, duration, allowEquals, toggleAllowEquals } = useTradeStore();
+  const { setBottomSheet } = useBottomSheetStore();
+  const { isLandscape } = useOrientationStore();
 
   const handleStakeClick = () => {
-    setBottomSheet(true, 'stake');
+    setBottomSheet(true, "stake");
   };
-  
+
   const handleDurationClick = () => {
-    setBottomSheet(true, 'duration', '470px');
+    setBottomSheet(true, "duration", "470px");
   };
 
   return (
-    <div className={`flex ${isLandscape ? 'flex-row relative' : 'flex-col'} flex-1 h-[100dvh]`}>
+    <div
+      className={`flex ${
+        isLandscape ? "flex-row relative" : "flex-col"
+      } flex-1 h-[100dvh]`}
+    >
       {isLandscape && (
         <div
           className="absolute top-0 left-0 right-0 bg-white z-10 border-b border-opacity-10"
@@ -50,9 +53,9 @@ export const TradePage: React.FC = () => {
         >
           <div className="flex items-center w-full gap-2 px-4 py-2 justify-between">
             <div className="flex items-center gap-2">
-              <Suspense fallback={<div>Loading...</div>}>
+              {/* <Suspense fallback={<div>Loading...</div>}>
                 <AddMarketButton />
-              </Suspense>
+              </Suspense> */}
               <MarketInfo title="Vol. 100 (1s) Index" subtitle="Rise/Fall" />
             </div>
             <BalanceDisplay />
@@ -60,19 +63,29 @@ export const TradePage: React.FC = () => {
         </div>
       )}
 
-      <div className={`flex flex-col flex-1 ${isLandscape ? 'w-[70%] min-w-0' : ''}`}>
+      <div
+        className={`flex flex-col flex-1 ${
+          isLandscape ? "w-[70%] min-w-0" : ""
+        }`}
+      >
         {!isLandscape && (
           <div className="flex items-center w-full gap-2 p-4 justify-between">
             <div className="flex items-center gap-2">
-              <Suspense fallback={<div>Loading...</div>}>
+              {/* <Suspense fallback={<div>Loading...</div>}>
                 <AddMarketButton />
-              </Suspense>
+              </Suspense> */}
               <MarketInfo title="Vol. 100 (1s) Index" subtitle="Rise/Fall" />
             </div>
           </div>
         )}
 
-        <div className={`flex flex-col flex-1 ${isLandscape ? 'mt-[72px] h-[calc(100dvh-72px)]' : 'h-[calc(100dvh-200px)]'}`}>
+        <div
+          className={`flex flex-col flex-1 ${
+            isLandscape
+              ? "mt-[72px] h-[calc(100dvh-72px)]"
+              : "h-[calc(100dvh-200px)]"
+          }`}
+        >
           <Suspense fallback={<div>Loading...</div>}>
             <Chart className="flex-1" />
           </Suspense>
@@ -83,40 +96,58 @@ export const TradePage: React.FC = () => {
         </Suspense>
       </div>
 
-      <div 
-        id="trade-section" 
-        className={`${isLandscape ? 'w-[30%] min-w-[260px] max-w-[360px] flex flex-col justify-center mt-[78px] border-l border-gray-300 border-opacity-20' : ''}`}
+      <div
+        id="trade-section"
+        className={`${
+          isLandscape
+            ? "w-[30%] min-w-[260px] max-w-[360px] flex flex-col mt-[78px] border-l border-gray-300 border-opacity-20"
+            : ""
+        }`}
       >
-        <div className={`flex flex-col gap-4 p-4 ${isLandscape ? 'pt-4 pb-2 px-4' : ''}`} id="trade-fields">
-          <div className={`flex ${isLandscape ? 'flex-col gap-2' : 'gap-4'}`} id="trade-params">
-            <TradeParam 
-              label="Duration" 
-              value={duration} 
-              className={isLandscape ? 'w-full' : ''} 
+        <div
+          className={`flex flex-col gap-4 p-4 ${
+            isLandscape ? "pt-4 pb-2 px-4" : ""
+          }`}
+          id="trade-fields"
+        >
+          <div id="how-to-trade">
+            <HowToTrade />
+          </div>
+          <div
+            className={`flex ${isLandscape ? "flex-col gap-2" : "gap-4"}`}
+            id="trade-params"
+          >
+            <TradeParam
+              label="Duration"
+              value={duration}
+              className={isLandscape ? "w-full" : ""}
               onClick={handleDurationClick}
             />
-            <TradeParam 
-              label="Stake" 
-              value={stake} 
-              className={isLandscape ? 'w-full' : ''} 
-              onClick={handleStakeClick} 
+            <TradeParam
+              label="Stake"
+              value={stake}
+              className={isLandscape ? "w-full" : ""}
+              onClick={handleStakeClick}
             />
           </div>
 
-          <div id="trade-toggles" className={isLandscape ? 'mt-2' : ''}>
+          {/* <div id="trade-toggles">
             <ToggleButton
               label="Allow equals"
               value={allowEquals}
               onChange={toggleAllowEquals}
             />
-          </div>
+          </div> */}
         </div>
 
-        <div className={`flex ${isLandscape ? 'flex-col py-2' : ''} gap-2 p-4`} id="trade-buttons">
+        <div
+          className={`flex ${isLandscape ? "flex-col py-2" : ""} gap-2 p-4`}
+          id="trade-buttons"
+        >
           <Suspense fallback={<div>Loading...</div>}>
             <TradeButton
               className={`bg-emerald-500 hover:bg-emerald-600 rounded-full ${
-                isLandscape ? 'h-[48px] py-3 [&>div]:px-2 [&_span]:text-sm' : ''
+                isLandscape ? "h-[48px] py-3 [&>div]:px-2 [&_span]:text-sm" : ""
               }`}
               title="Rise"
               label="Payout"
@@ -127,7 +158,7 @@ export const TradePage: React.FC = () => {
           <Suspense fallback={<div>Loading...</div>}>
             <TradeButton
               className={`bg-rose-500 hover:bg-rose-600 rounded-full ${
-                isLandscape ? 'h-[48px] py-3 [&>div]:px-2 [&_span]:text-sm' : ''
+                isLandscape ? "h-[48px] py-3 [&>div]:px-2 [&_span]:text-sm" : ""
               }`}
               title="Fall"
               label="Payout"
@@ -140,5 +171,5 @@ export const TradePage: React.FC = () => {
 
       <BottomSheet />
     </div>
-  )
-}
+  );
+};

From cc7b0e0d5692f8cfa4a8d9ca49c34631c98ec432 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Mon, 10 Feb 2025 19:00:02 +0800
Subject: [PATCH 05/12] chore: added logo

---
 public/logo.png                               | Bin 0 -> 569 bytes
 .../BalanceDisplay/BalanceDisplay.tsx         |  51 ++++++++++++------
 src/components/SideNav/SideNav.tsx            |   9 ++++
 src/screens/TradePage/TradePage.tsx           |   2 +-
 4 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 public/logo.png

diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..2241778d8c67149c638adf5f256a91ddbccfbe71
GIT binary patch
literal 569
zcmV-90>=G`P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0nSN8K~#7F#aDq*
z!axw*cPt<s7%L!DAXFe!pjM!E02P20NC#pC#0nBCFeRje^NxQ60rN+=j60K0GP9rG
zzyG`J0~RPKU0*HWa4HH)xV`6|H+;|dO7|EQUnL0dd|#sPYM2QqXuv%l!=Ra>N5%XF
zdTt660l&qh+)nrlcM5jJ5gBqcDwqk_72@y)O+*OKEMjgeU@K&yiiYE;?JS9%06|F-
ziBXhC7;_|+_5vhB910v}#y)Bm(U(1O0ZT~A5grsw5&9|*+X(pZC5_z(FPqRcqNEkK
zgD8)e!VCDM8NWP5=nG^{GrLW_SSgsf3u*Kfr4p`><?*?YJrJ9@An#&uFTkM}Wf4Bm
z5hMbdnqHzKh=4@FtI-i`>p)8Zn%Sl32qHkUzM6f~Qh;WMYci!J{=E?SQe4nHSgj^3
zxfG9~fxZ-1m*HW;Gn7BnRRcL$f4J{*#1Nm12VrXK2LuI;f<=oV=ZFq%>wq^TGX?X<
zH`ogBCL@jVWbm+|?F5u0gKPZYbl22a*>V|t5apWMa#`;S-tFE=#eQg2aKZ;w_tc|V
z7E&yOt~}Rk9|_F=IwQ6@oTiX)JKW;<8L`3%hf^DzaXkM91u>FiH}kV*00000NkvXX
Hu0mjf3>xE-

literal 0
HcmV?d00001

diff --git a/src/components/BalanceDisplay/BalanceDisplay.tsx b/src/components/BalanceDisplay/BalanceDisplay.tsx
index ef89889..a4649e9 100644
--- a/src/components/BalanceDisplay/BalanceDisplay.tsx
+++ b/src/components/BalanceDisplay/BalanceDisplay.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useClientStore } from '@/stores/clientStore';
-import { useOrientationStore } from '@/stores/orientationStore';
+import React from "react";
+import { useClientStore } from "@/stores/clientStore";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 interface BalanceDisplayProps {
   onDeposit?: () => void;
@@ -11,33 +11,52 @@ interface BalanceDisplayProps {
 
 export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
   onDeposit,
-  depositLabel = 'Deposit',
-  className = '',
-  loginUrl = '/login',
+  depositLabel = "Deposit",
+  className = "",
+  loginUrl = "/login",
 }) => {
   const { isLoggedIn, balance, currency } = useClientStore();
   const { isLandscape } = useOrientationStore();
 
   if (!isLoggedIn) {
     return (
-      <div className={`w-full flex items-center justify-end ${className}`}>
-        <a 
-          href={loginUrl}
-          className="px-4 py-2 font-bold text-white bg-color-solid-glacier-700 rounded-3xl hover:bg-color-solid-glacier-600"
+      <>
+        {!isLandscape && (
+          <a href="/">
+            <img
+              src="/favicon.ico"
+              alt="Champion Trader Logo"
+              className="w-8 h-8 rounded-full"
+            />
+          </a>
+        )}
+        <div
+          className={`w-full flex items-center justify-end ${className}`}
         >
-          Log in
-        </a>
-      </div>
+          <a
+            href={loginUrl}
+            className="px-4 py-2 font-bold text-white bg-color-solid-glacier-700 rounded-3xl hover:bg-color-solid-glacier-600"
+          >
+            Log in
+          </a>
+        </div>
+      </>
     );
   }
 
   return (
-    <div className={`flex items-center justify-between ${isLandscape ? 'gap-4' : ''} ${className}`}>
+    <div
+      className={`flex items-center justify-between ${
+        isLandscape ? "gap-4" : ""
+      } ${className}`}
+    >
       <div className="flex flex-col">
         <span className="text-sm text-gray-700">Real</span>
-        <span className="text-sm font-bold text-teal-500">{balance} {currency}</span>
+        <span className="text-sm font-bold text-teal-500">
+          {balance} {currency}
+        </span>
       </div>
-      <button 
+      <button
         className="px-4 py-2 font-bold border border-gray-700 rounded-3xl"
         onClick={onDeposit}
       >
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
index 5fd923a..53188ed 100644
--- a/src/components/SideNav/SideNav.tsx
+++ b/src/components/SideNav/SideNav.tsx
@@ -21,6 +21,15 @@ export const SideNav: React.FC = () => {
       } flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}
     >
       <div className="flex flex-col items-center gap-6 py-6">
+        {!isLoggedIn && (
+          <a href="/" className="pb-4">
+            <img
+              src="/logo.png"
+              alt="Champion Trader Logo"
+              className="w-8 h-8 rounded-full"
+            />
+          </a>
+        )}
         <button
           onClick={() => navigate("/trade")}
           className={`flex flex-col items-center gap-1 ${
diff --git a/src/screens/TradePage/TradePage.tsx b/src/screens/TradePage/TradePage.tsx
index 5efb2af..64bc184 100644
--- a/src/screens/TradePage/TradePage.tsx
+++ b/src/screens/TradePage/TradePage.tsx
@@ -2,7 +2,7 @@ import React, { Suspense, lazy } from "react";
 import { useOrientationStore } from "@/stores/orientationStore";
 import { BalanceDisplay } from "@/components/BalanceDisplay";
 import { BottomSheet } from "@/components/BottomSheet";
-import { AddMarketButton } from "@/components/AddMarketButton";
+// import { AddMarketButton } from "@/components/AddMarketButton";
 import { DurationOptions } from "@/components/DurationOptions";
 import { Card, CardContent } from "@/components/ui/card";
 import { TradeFormController } from "./components/TradeFormController";

From c57f5264e24c3c68d91496305ec3b3bec80aa2af Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Mon, 10 Feb 2025 19:02:43 +0800
Subject: [PATCH 06/12] fix" test cases

---
 src/screens/MenuPage/MenuPage.tsx                  | 2 --
 src/screens/TradePage/__tests__/TradePage.test.tsx | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/screens/MenuPage/MenuPage.tsx b/src/screens/MenuPage/MenuPage.tsx
index e5889d3..f58814b 100644
--- a/src/screens/MenuPage/MenuPage.tsx
+++ b/src/screens/MenuPage/MenuPage.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
-import { useOrientationStore } from "@/stores/orientationStore";
 import ToggleButton from "@/components/TradeFields/ToggleButton";
 import { Home, MoonStar, LogOut, ExternalLink } from "lucide-react";
 
 export const MenuPage: React.FC = () => {
   const navigate = useNavigate();
   const { logout, isLoggedIn } = useClientStore();
-  const { isLandscape } = useOrientationStore();
 
   const handleLogout = () => {
     localStorage.removeItem("loginToken");
diff --git a/src/screens/TradePage/__tests__/TradePage.test.tsx b/src/screens/TradePage/__tests__/TradePage.test.tsx
index b73f4ed..e752330 100644
--- a/src/screens/TradePage/__tests__/TradePage.test.tsx
+++ b/src/screens/TradePage/__tests__/TradePage.test.tsx
@@ -145,7 +145,6 @@ describe('TradePage', () => {
     // Balance display should not be visible in portrait mode
     expect(screen.queryByTestId('balance-display')).not.toBeInTheDocument();
     expect(screen.getByTestId('bottom-sheet')).toBeInTheDocument();
-    expect(screen.getByTestId('add-market-button')).toBeInTheDocument();
     expect(screen.getByTestId('duration-options')).toBeInTheDocument();
 
     // Check layout classes
@@ -163,7 +162,6 @@ describe('TradePage', () => {
     // Balance display should be visible in landscape mode
     expect(screen.getByTestId('balance-display')).toBeInTheDocument();
     expect(screen.getByTestId('bottom-sheet')).toBeInTheDocument();
-    expect(screen.getByTestId('add-market-button')).toBeInTheDocument();
     expect(screen.getByTestId('duration-options')).toBeInTheDocument();
 
     // Check layout classes

From bbdf731f8d0d1fe68d1c34e876b80a3b60432ddf Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Mon, 10 Feb 2025 19:07:02 +0800
Subject: [PATCH 07/12] fix: missing props

---
 src/screens/MenuPage/MenuPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/screens/MenuPage/MenuPage.tsx b/src/screens/MenuPage/MenuPage.tsx
index f58814b..10ff7e4 100644
--- a/src/screens/MenuPage/MenuPage.tsx
+++ b/src/screens/MenuPage/MenuPage.tsx
@@ -33,8 +33,8 @@ export const MenuPage: React.FC = () => {
           <span className="text-sm">Theme</span>
           <ToggleButton
             label=""
-            // value={false}
-            // onChange={() => {}}
+            value={false}
+            onChange={() => {}}
           />
         </div>
         {isLoggedIn && (

From 96b25fe882c03b647a5be81d883b8b2ef4c02628 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Mon, 10 Feb 2025 19:09:03 +0800
Subject: [PATCH 08/12] fix" test cases

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

diff --git a/src/screens/MenuPage/__tests__/MenuPage.test.tsx b/src/screens/MenuPage/__tests__/MenuPage.test.tsx
index 4a04a32..1f8ddba 100644
--- a/src/screens/MenuPage/__tests__/MenuPage.test.tsx
+++ b/src/screens/MenuPage/__tests__/MenuPage.test.tsx
@@ -14,9 +14,8 @@ describe('MenuPage', () => {
   it('renders menu items', () => {
     renderWithRouter();
     
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-    expect(screen.getByText('Help Center')).toBeInTheDocument();
-    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Go to Home')).toBeInTheDocument();
+    expect(screen.getByText('Theme')).toBeInTheDocument();
   });
 
   it('renders page title', () => {

From c969ac32beea196ec221e7ad6371c1326d64dba9 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Tue, 11 Feb 2025 14:37:19 +0800
Subject: [PATCH 09/12] fix: layout, icons, alignments

---
 .../BalanceDisplay/BalanceDisplay.tsx         |  6 +++---
 .../DurationOptions/DurationOptions.tsx       | 21 +++++++------------
 src/components/SideNav/SideNav.tsx            | 16 +++++++-------
 src/screens/MenuPage/MenuPage.tsx             |  4 ++--
 .../components/TradeFormController.tsx        |  2 +-
 5 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/BalanceDisplay/BalanceDisplay.tsx b/src/components/BalanceDisplay/BalanceDisplay.tsx
index a4649e9..413c165 100644
--- a/src/components/BalanceDisplay/BalanceDisplay.tsx
+++ b/src/components/BalanceDisplay/BalanceDisplay.tsx
@@ -51,13 +51,13 @@ export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
       } ${className}`}
     >
       <div className="flex flex-col">
-        <span className="text-sm text-gray-700">Real</span>
-        <span className="text-sm font-bold text-teal-500">
+        <span className="text-sm font-medium text-color-solid-glacier-700">Real</span>
+        <span className="text-sm font-medium ">
           {balance} {currency}
         </span>
       </div>
       <button
-        className="px-4 py-2 font-bold border border-gray-700 rounded-3xl"
+        className="px-5 py-2 font-medium rounded-3xl bg-color-solid-glacier-700 hover:bg-color-solid-glacier-600"
         onClick={onDeposit}
       >
         {depositLabel}
diff --git a/src/components/DurationOptions/DurationOptions.tsx b/src/components/DurationOptions/DurationOptions.tsx
index 7e96e5e..48dfc72 100644
--- a/src/components/DurationOptions/DurationOptions.tsx
+++ b/src/components/DurationOptions/DurationOptions.tsx
@@ -1,4 +1,4 @@
-import { BarChart2, Clock, Expand } from 'lucide-react';
+import { AreaChart } from 'lucide-react';
 
 interface DurationOptionsProps {
   className?: string;
@@ -6,7 +6,13 @@ interface DurationOptionsProps {
 
 export const DurationOptions: React.FC<DurationOptionsProps> = ({ className = '' }) => {
   return (
-    <div className={`flex items-center justify-between p-4 border-t border-b ${className}`}>
+    <div className={`flex items-center p-4 ${className}`}>
+      <div className="flex items-center gap-4 pr-4">
+        <button className="text-gray-600 hover:text-gray-700" aria-label="chart">
+          <AreaChart className="w-5 h-5" />
+        </button>
+        <div className='w-0.5 h-5 bg-gray-100'></div>
+      </div>
       <div className="flex items-center gap-4">
         <button className="text-sm font-medium text-primary">1t</button>
         <button className="text-sm font-medium text-gray-500">1m</button>
@@ -14,17 +20,6 @@ export const DurationOptions: React.FC<DurationOptionsProps> = ({ className = ''
         <button className="text-sm font-medium text-gray-500">3m</button>
         <button className="text-sm font-medium text-gray-500">5m</button>
       </div>
-      <div className="flex items-center gap-4">
-        <button className="text-gray-500 hover:text-gray-700" aria-label="chart">
-          <BarChart2 className="w-5 h-5" />
-        </button>
-        <button className="text-gray-500 hover:text-gray-700" aria-label="clock">
-          <Clock className="w-5 h-5" />
-        </button>
-        <button className="text-gray-500 hover:text-gray-700" aria-label="expand">
-          <Expand className="w-5 h-5" />
-        </button>
-      </div>
     </div>
   );
 };
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
index 53188ed..4955a83 100644
--- a/src/components/SideNav/SideNav.tsx
+++ b/src/components/SideNav/SideNav.tsx
@@ -21,15 +21,13 @@ export const SideNav: React.FC = () => {
       } flex-col h-[100dvh] sticky top-0 w-16 border-r bg-white overflow-y-auto`}
     >
       <div className="flex flex-col items-center gap-6 py-6">
-        {!isLoggedIn && (
-          <a href="/" className="pb-4">
-            <img
-              src="/logo.png"
-              alt="Champion Trader Logo"
-              className="w-8 h-8 rounded-full"
-            />
-          </a>
-        )}
+        <a href="/" className="pb-4">
+          <img
+            src="/logo.png"
+            alt="Champion Trader Logo"
+            className="w-8 h-8 rounded-full"
+          />
+        </a>
         <button
           onClick={() => navigate("/trade")}
           className={`flex flex-col items-center gap-1 ${
diff --git a/src/screens/MenuPage/MenuPage.tsx b/src/screens/MenuPage/MenuPage.tsx
index 10ff7e4..cd602b3 100644
--- a/src/screens/MenuPage/MenuPage.tsx
+++ b/src/screens/MenuPage/MenuPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useClientStore } from "@/stores/clientStore";
 import ToggleButton from "@/components/TradeFields/ToggleButton";
-import { Home, MoonStar, LogOut, ExternalLink } from "lucide-react";
+import { Home, Moon, LogOut, ExternalLink } from "lucide-react";
 
 export const MenuPage: React.FC = () => {
   const navigate = useNavigate();
@@ -29,7 +29,7 @@ export const MenuPage: React.FC = () => {
           </div>
         </button>
         <div className="text-left p-4 rounded-lg hover:bg-gray-100 border-b border-gray-200 flex items-center gap-3">
-          <MoonStar className="w-5 h-5" />
+          <Moon className="w-5 h-5" />
           <span className="text-sm">Theme</span>
           <ToggleButton
             label=""
diff --git a/src/screens/TradePage/components/TradeFormController.tsx b/src/screens/TradePage/components/TradeFormController.tsx
index 4dea04f..6fa8811 100644
--- a/src/screens/TradePage/components/TradeFormController.tsx
+++ b/src/screens/TradePage/components/TradeFormController.tsx
@@ -188,7 +188,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
           : ""
       }`}
     >
-      <div className="pt-2 px-2" id="how-to-trade">
+      <div className={isLandscape ? "pt-4 px-4" : "pt-1 px-4"} id="how-to-trade">
         <HowToTrade />
       </div>
       <div id="trade-fields">

From 9317145676ca12a091d6ba2a014910106dac4300 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Tue, 11 Feb 2025 14:39:21 +0800
Subject: [PATCH 10/12] fix: test case for duration options

---
 .../DurationOptions/__tests__/DurationOptions.test.tsx          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/DurationOptions/__tests__/DurationOptions.test.tsx b/src/components/DurationOptions/__tests__/DurationOptions.test.tsx
index 5deaef3..0eb69b6 100644
--- a/src/components/DurationOptions/__tests__/DurationOptions.test.tsx
+++ b/src/components/DurationOptions/__tests__/DurationOptions.test.tsx
@@ -16,7 +16,5 @@ describe('DurationOptions', () => {
     render(<DurationOptions />);
     
     expect(screen.getByRole('button', { name: /chart/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /clock/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /expand/i })).toBeInTheDocument();
   });
 });

From 0c87a7b63006406b01505d704f6936138e7cca51 Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Tue, 11 Feb 2025 15:18:34 +0800
Subject: [PATCH 11/12] fix: updated guide content

---
 public/fall.png                          | Bin 0 -> 6158 bytes
 public/rise.png                          | Bin 0 -> 6252 bytes
 src/components/HowToTrade/HowToTrade.tsx |   6 +++---
 src/config/bottomSheetConfig.tsx         |  21 ++++++++++-----------
 4 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 public/fall.png
 create mode 100644 public/rise.png

diff --git a/public/fall.png b/public/fall.png
new file mode 100644
index 0000000000000000000000000000000000000000..64b660ed9d95d0bfa17e7708511eeb169c5b4d1d
GIT binary patch
literal 6158
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
J{uyQ(^nci}%hLb=

literal 0
HcmV?d00001

diff --git a/public/rise.png b/public/rise.png
new file mode 100644
index 0000000000000000000000000000000000000000..81dce09fb4867d8ea2e0ff886f589fa69eab554c
GIT binary patch
literal 6252
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

literal 0
HcmV?d00001

diff --git a/src/components/HowToTrade/HowToTrade.tsx b/src/components/HowToTrade/HowToTrade.tsx
index 95e11f3..24689b3 100644
--- a/src/components/HowToTrade/HowToTrade.tsx
+++ b/src/components/HowToTrade/HowToTrade.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { useBottomSheetStore } from '@/stores/bottomSheetStore';
+import React from "react";
+import { useBottomSheetStore } from "@/stores/bottomSheetStore";
 
 export const HowToTrade: React.FC = () => {
   const { setBottomSheet } = useBottomSheetStore();
 
   const handleClick = () => {
-    setBottomSheet(true, 'how-to-trade', '470px');
+    setBottomSheet(true, "how-to-trade", '800px');
   };
 
   return (
diff --git a/src/config/bottomSheetConfig.tsx b/src/config/bottomSheetConfig.tsx
index 97191a7..7c0a766 100644
--- a/src/config/bottomSheetConfig.tsx
+++ b/src/config/bottomSheetConfig.tsx
@@ -18,23 +18,22 @@ export const bottomSheetConfig: BottomSheetConfig = {
   'how-to-trade': {
     body: (
       <div className="p-4">
-    <h2 className="text-lg font-semibold mb-4">How to trade Rise/Fall</h2>
+    <h2 className="text-lg font-bold mb-4">Rise/Fall</h2>
     <div className="space-y-4">
       <div>
-        <h3 className="font-medium mb-2">1. Select Duration</h3>
-        <p className="text-gray-600">Choose how long you want to trade for - from 1 minute up to 15 minutes.</p>
+        <h3 className="font-semibold mb-2">Rise</h3>
+        <p className="text-gray-600 mb-2">If you select Rise, you win the payout if the exit spot is strictly higher than the entry spot.</p>
+        <img src="/rise.png" alt="rise" />
       </div>
       <div>
-        <h3 className="font-medium mb-2">2. Set your Stake</h3>
-        <p className="text-gray-600">Enter the amount you want to trade with.</p>
-      </div>
-      <div>
-        <h3 className="font-medium mb-2">3. Make your Prediction</h3>
-        <p className="text-gray-600">Click "Rise" if you think the market will go up, or "Fall" if you think it will go down.</p>
+        <h3 className="font-semibold mb-2">Fall</h3>
+        <p className="text-gray-600 mb-2">If you select Fall, you win the payout if the exit spot is strictly lower than the entry spot.</p>
+        <img src="/fall.png" alt="fall" />
+
       </div>
       <div>
-        <h3 className="font-medium mb-2">4. Track your Trade</h3>
-        <p className="text-gray-600">Watch the chart to see how the market moves during your selected duration.</p>
+        <h3 className="font-semibold mb-2">Additional Information</h3>
+        <p className="text-gray-600">If you select “Allow equals”, you win the payout if exit spot is higher than or equal to entry spot for Rise. Similarly, you win the payout if exit spot is lower than or equal to entry spot for Fall.</p>
       </div>
     </div>
   </div>

From 8d294eef5c3935ae2dafcf942521accc0f98724d Mon Sep 17 00:00:00 2001
From: Farabi <farabi@deriv.com>
Date: Tue, 11 Feb 2025 16:13:09 +0800
Subject: [PATCH 12/12] fix: added guide config to store all guides

---
 .../HowToTrade/__tests__/HowToTrade.test.tsx  |  2 +-
 src/config/bottomSheetConfig.tsx              | 24 +---------
 src/config/guideConfig.tsx                    | 48 +++++++++++++++++++
 3 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 src/config/guideConfig.tsx

diff --git a/src/components/HowToTrade/__tests__/HowToTrade.test.tsx b/src/components/HowToTrade/__tests__/HowToTrade.test.tsx
index 7e0d45b..3541e82 100644
--- a/src/components/HowToTrade/__tests__/HowToTrade.test.tsx
+++ b/src/components/HowToTrade/__tests__/HowToTrade.test.tsx
@@ -23,6 +23,6 @@ describe('HowToTrade', () => {
   it('opens bottom sheet when clicked', () => {
     render(<HowToTrade />);
     fireEvent.click(screen.getByText('How to trade Rise/Fall?'));
-    expect(mockSetBottomSheet).toHaveBeenCalledWith(true, 'how-to-trade', '470px');
+    expect(mockSetBottomSheet).toHaveBeenCalledWith(true, 'how-to-trade', '800px');
   });
 });
diff --git a/src/config/bottomSheetConfig.tsx b/src/config/bottomSheetConfig.tsx
index 7c0a766..86efb40 100644
--- a/src/config/bottomSheetConfig.tsx
+++ b/src/config/bottomSheetConfig.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DurationController } from '@/components/Duration';
 import { StakeController } from '@/components/Stake';
+import { guideConfig } from './guideConfig';
 
 export interface BottomSheetConfig {
   [key: string]: {
@@ -16,27 +17,6 @@ export const bottomSheetConfig: BottomSheetConfig = {
     body: <DurationController />
   },
   'how-to-trade': {
-    body: (
-      <div className="p-4">
-    <h2 className="text-lg font-bold mb-4">Rise/Fall</h2>
-    <div className="space-y-4">
-      <div>
-        <h3 className="font-semibold mb-2">Rise</h3>
-        <p className="text-gray-600 mb-2">If you select Rise, you win the payout if the exit spot is strictly higher than the entry spot.</p>
-        <img src="/rise.png" alt="rise" />
-      </div>
-      <div>
-        <h3 className="font-semibold mb-2">Fall</h3>
-        <p className="text-gray-600 mb-2">If you select Fall, you win the payout if the exit spot is strictly lower than the entry spot.</p>
-        <img src="/fall.png" alt="fall" />
-
-      </div>
-      <div>
-        <h3 className="font-semibold mb-2">Additional Information</h3>
-        <p className="text-gray-600">If you select “Allow equals”, you win the payout if exit spot is higher than or equal to entry spot for Rise. Similarly, you win the payout if exit spot is lower than or equal to entry spot for Fall.</p>
-      </div>
-    </div>
-  </div>
-    )
+    body: guideConfig["rise-fall"].body
   }
 };
diff --git a/src/config/guideConfig.tsx b/src/config/guideConfig.tsx
new file mode 100644
index 0000000..abee662
--- /dev/null
+++ b/src/config/guideConfig.tsx
@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+
+export interface GuideConfig {
+  [key: string]: {
+    body: ReactNode;
+  };
+}
+
+export const guideConfig: GuideConfig = {
+  "rise-fall": {
+    body: (
+      <div className="p-4">
+        <h2 className="text-lg font-bold mb-4">Rise/Fall</h2>
+        <div className="space-y-4">
+          <div>
+            <h3 className="font-semibold mb-2">Rise</h3>
+            <p className="text-gray-600 mb-2">
+              If you select Rise, you win the payout if the exit spot is
+              strictly higher than the entry spot.
+            </p>
+            <div className="flex justify-center">
+              <img src="/rise.png" alt="rise" />
+            </div>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-2">Fall</h3>
+            <p className="text-gray-600 mb-2">
+              If you select Fall, you win the payout if the exit spot is
+              strictly lower than the entry spot.
+            </p>
+            <div className="flex justify-center">
+              <img src="/fall.png" alt="fall" />
+            </div>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-2">Additional Information</h3>
+            <p className="text-gray-600">
+              If you select "Allow equals", you win the payout if exit spot is
+              higher than or equal to entry spot for Rise. Similarly, you win
+              the payout if exit spot is lower than or equal to entry spot for
+              Fall.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};