Aum / GRWT-5056 /product-types-list

rsbuild.config.ts

@@ -7,71 +7,73 @@ import path from "path";
 dotenv.config();
 
 export default defineConfig({
-  plugins: [pluginReact(), pluginBasicSsl()],
-  html: {
-    template: "./index.html",
-    title: "Champion Trader",
-    favicon: "public/favicon.ico",
-  },
-  source: {
-    define: {
-      "process.env.RSBUILD_WS_URL": JSON.stringify(process.env.RSBUILD_WS_URL),
-      "process.env.RSBUILD_WS_PUBLIC_PATH": JSON.stringify(
-        process.env.RSBUILD_WS_PUBLIC_PATH
-      ),
-      "process.env.RSBUILD_WS_PROTECTED_PATH": JSON.stringify(
-        process.env.RSBUILD_WS_PROTECTED_PATH
-      ),
-      "process.env.RSBUILD_REST_URL": JSON.stringify(
-        process.env.RSBUILD_REST_URL
-      ),
-      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
-      "process.env.RSBUILD_SSE_PUBLIC_PATH": JSON.stringify(
-        process.env.RSBUILD_SSE_PUBLIC_PATH
-      ),
-      "process.env.RSBUILD_SSE_PROTECTED_PATH": JSON.stringify(
-        process.env.RSBUILD_SSE_PROTECTED_PATH
-      ),
+    plugins: [pluginReact(), pluginBasicSsl()],
+    html: {
+        template: "./index.html",
+        title: "Champion Trader",
+        favicon: "public/favicon.ico",
     },
-    alias: {
-      "@": "./src",
+    source: {
+        define: {
+            "process.env.RSBUILD_WS_URL": JSON.stringify(
+                process.env.RSBUILD_WS_URL
+            ),
+            "process.env.RSBUILD_WS_PUBLIC_PATH": JSON.stringify(
+                process.env.RSBUILD_WS_PUBLIC_PATH
+            ),
+            "process.env.RSBUILD_WS_PROTECTED_PATH": JSON.stringify(
+                process.env.RSBUILD_WS_PROTECTED_PATH
+            ),
+            "process.env.RSBUILD_REST_URL": JSON.stringify(
+                process.env.RSBUILD_REST_URL
+            ),
+            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+            "process.env.RSBUILD_SSE_PUBLIC_PATH": JSON.stringify(
+                process.env.RSBUILD_SSE_PUBLIC_PATH
+            ),
+            "process.env.RSBUILD_SSE_PROTECTED_PATH": JSON.stringify(
+                process.env.RSBUILD_SSE_PROTECTED_PATH
+            ),
+        },
+        alias: {
+            "@": "./src",
+        },
     },
-  },
-  server: {
-    port: 4113,
-    host: "localhost",
-    strictPort: true,
-  },
-  output: {
-    copy: [
-      {
-        from: path.resolve(
-          __dirname,
-          "node_modules/@deriv-com/smartcharts-champion/dist"
-        ),
-        to: "js/smartcharts/",
-        globOptions: {
-          ignore: ["**/*.LICENSE.txt"]
-        }
-      },
-      {
-        from: path.resolve(
-          __dirname,
-          "node_modules/@deriv-com/smartcharts-champion/dist/chart/assets"
-        ),
-        to: "assets",
-      },
-    ],
-    filename: {
-      js: "[name].[hash:8].js",
-      css: "[name].[hash:8].css",
-      assets: "assets/[name].[hash:8][ext]"
+    server: {
+        port: 4113,
+        host: "localhost",
+        strictPort: true,
     },
-    distPath: {
-      js: "js",
-      css: "css",
-      html: ""
+    output: {
+        copy: [
+            {
+                from: path.resolve(
+                    __dirname,
+                    "node_modules/@deriv-com/smartcharts-champion/dist"
+                ),
+                to: "js/smartcharts/",
+                globOptions: {
+                    ignore: ["**/*.LICENSE.txt"],
+                },
+            },
+            {
+                from: path.resolve(
+                    __dirname,
+                    "node_modules/@deriv-com/smartcharts-champion/dist/chart/assets"
+                ),
+                to: "assets",
+            },
+        ],
+        filename: {
+            js: "[name].[hash:8].js",
+            css: "[name].[hash:8].css",
+            assets: "assets/[name].[hash:8][ext]",
+        },
+        distPath: {
+            js: "js",
+            css: "css",
+            html: "",
+        },
+        cleanDistPath: true,
     },
-    cleanDistPath: true
-  },
 });

src/components/AccountSwitcher/AccountSwitcher.tsx

@@ -21,9 +21,7 @@ export const AccountSwitcher: React.FC = () => {
             <AccountPopoverTrigger asChild>
                 <button
                     data-testid="balance-display"
-                    className={`flex flex-col relative ${
-                        isLandscape ? "items-end" : "items-start"
-                    }`}
+                    className="flex flex-col relative"
                 >
                     <div className="flex items-center gap-1">
                         <span
@@ -53,7 +51,7 @@ export const AccountSwitcher: React.FC = () => {
                             />
                         )}
                     </div>
-                    <span className="text-sm font-semibold align-start">
+                    <span className="text-base font-semibold align-start">
                         {selectedAccount?.isDemo ? "10,000" : balance}{" "}
                         {selectedAccount?.currency || "USD"}
                     </span>

src/components/Duration/DurationController.tsx

@@ -26,7 +26,9 @@ interface DurationControllerProps {
     onClose?: () => void;
 }
 
-export const DurationController: React.FC<DurationControllerProps> = ({ onClose }) => {
+export const DurationController: React.FC<DurationControllerProps> = ({
+    onClose,
+}) => {
     const { duration, setDuration } = useTradeStore();
     const { isLandscape } = useOrientationStore();
     const { setBottomSheet } = useBottomSheetStore();
@@ -43,7 +45,8 @@ export const DurationController: React.FC<DurationControllerProps> = ({ onClose
     const [localDuration, setLocalDuration] = React.useState(duration);
     const [value, type] = localDuration.split(" ");
     const selectedType = type as DurationType;
-    const selectedValue: string | number = type === "hour" ? value : parseInt(value, 10);
+    const selectedValue: string | number =
+        type === "hour" ? value : parseInt(value, 10);
 
     // Use debounced updates for desktop scroll
     useDebounce(
@@ -57,7 +60,10 @@ export const DurationController: React.FC<DurationControllerProps> = ({ onClose
     );
 
     const handleTypeSelect = (type: DurationType) => {
-        const newDuration = type === "hour" ? "1:0 hour" : `${getDurationValues(type)[0]} ${type}`;
+        const newDuration =
+            type === "hour"
+                ? "1:0 hour"
+                : `${getDurationValues(type)[0]} ${type}`;
         setLocalDuration(newDuration);
     };
 
@@ -88,13 +94,19 @@ export const DurationController: React.FC<DurationControllerProps> = ({ onClose
         <>
             <div className={isLandscape ? "flex" : ""}>
                 {!isLandscape && <BottomSheetHeader title="Duration" />}
-                <TabList
-                    tabs={DURATION_TYPES}
-                    selectedValue={selectedType}
-                    onSelect={handleTypeSelect as (value: string) => void}
-                    variant={isLandscape ? "vertical" : "chip"}
-                />
-                <div className={`flex-1 relative bg-white ${isLandscape ? "px-2" : "px-8"}`}>
+                <div className="mx-4">
+                    <TabList
+                        tabs={DURATION_TYPES}
+                        selectedValue={selectedType}
+                        onSelect={handleTypeSelect as (value: string) => void}
+                        variant={isLandscape ? "vertical" : "chip"}
+                    />
+                </div>
+                <div
+                    className={`flex-1 relative bg-white ${
+                        isLandscape ? "px-2" : "px-8"
+                    }`}
+                >
                     {selectedType === "hour" ? (
                         <HoursDurationValue
                             selectedValue={selectedValue.toString()}

src/components/HowToTrade/GuideModal.tsx

@@ -1,16 +1,21 @@
 import { Modal } from "@/components/ui/modal";
 import { guideConfig } from "@/config/guideConfig";
 import { TabList } from "../ui/tab-list";
+import { TradeType } from "@/config/tradeTypes";
 
 interface GuideProps {
     isOpen: boolean;
     onClose: () => void;
-    type?: string;
+    type?: TradeType;
 }
 
-const Guides = [{ label: "Rise/Fall", value: "rise-fall" }];
+const Guides = [{ label: "Rise/Fall", value: "rise_fall" }];
 
-export const GuideModal = ({ isOpen, onClose, type = "rise-fall" }: GuideProps) => {
+export const GuideModal = ({
+    isOpen,
+    onClose,
+    type = "rise_fall",
+}: GuideProps) => {
     const content = guideConfig[type]?.body;
 
     if (!content) {
@@ -26,7 +31,7 @@ export const GuideModal = ({ isOpen, onClose, type = "rise-fall" }: GuideProps)
                 <TabList
                     variant={"chip"}
                     tabs={Guides}
-                    selectedValue={"rise-fall"}
+                    selectedValue={"rise_fall"}
                     onSelect={(value) => value}
                 />
             }

src/components/HowToTrade/HowToTrade.tsx

@@ -3,11 +3,13 @@ import { useBottomSheetStore } from "@/stores/bottomSheetStore";
 import { useDeviceDetection } from "@/hooks/useDeviceDetection";
 import { GuideModal } from "./GuideModal";
 import { ChevronRight } from "lucide-react";
+import { useTradeStore } from "@/stores/tradeStore";
 
 export const HowToTrade: React.FC = () => {
     const { setBottomSheet } = useBottomSheetStore();
     const { isDesktop } = useDeviceDetection();
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const { tradeTypeDisplayName } = useTradeStore();
 
     const handleClick = () => {
         if (isDesktop) {
@@ -27,15 +29,16 @@ export const HowToTrade: React.FC = () => {
                 onClick={handleClick}
                 className="text-gray-500 hover:text-gray-600 text-sm flex items-center gap-1"
             >
-                How to trade Rise/Fall?
+                How to trade {tradeTypeDisplayName}
+                ?
                 <ChevronRight className="w-4 h-4" />
             </button>
 
             {isDesktop && (
                 <GuideModal
                     isOpen={isModalOpen}
                     onClose={() => setIsModalOpen(false)}
-                    type="rise-fall"
+                    type="rise_fall"
                 />
             )}
         </>

src/components/HowToTrade/__tests__/HowToTrade.test.tsx

@@ -10,6 +10,10 @@ jest.mock("@/stores/bottomSheetStore", () => ({
     }),
 }));
 
+jest.mock("@/stores/tradeStore", () => ({
+    useTradeStore: jest.fn(() => ({ tradeTypeDisplayName: "Rise/Fall" })),
+}));
+
 describe("HowToTrade", () => {
     beforeEach(() => {
         mockSetBottomSheet.mockClear();

src/components/MarketInfo/MarketInfo.tsx

@@ -21,11 +21,13 @@ export const MarketInfo: React.FC<MarketInfoProps> = ({
     if (isMobile) {
         return (
             <div
-                className="inline-flex cursor-pointer mx-4 mt-3"
+                className="inline-flex cursor-pointer mx-4 lg:mt-3"
                 data-id="market-info"
-                onClick={onClick}
             >
-                <div className="flex items-center gap-4 px-4 py-3 bg-black/[0.04] rounded-lg">
+                <div
+                    className="flex items-center gap-4 px-4 py-3 bg-black/[0.04] rounded-lg"
+                    onClick={onClick}
+                >
                     {selectedMarket && (
                         <div className="w-8 h-8 flex items-center justify-center">
                             <MarketIcon