fix: initial contract form

src/api/hooks/useContractFor.ts

@@ -0,0 +1,20 @@
+import useQuery from './useQuery';
+
+const useContractFor = (symbol: string) => {
+    const { data, ...rest } = useQuery('contracts_for', {
+        payload: {
+            contracts_for: symbol,
+            currency: 'USD',
+            landing_company: 'svg',
+            product_type: 'basic',
+        },
+    });
+
+    return {
+        /** The authorize response. */
+        data,
+        ...rest,
+    };
+};
+
+export default useContractFor;

src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationIndex.tsx

@@ -0,0 +1,15 @@
+import TimeDropDown from './TimeDropDown';
+import DurationInputField from './DurationInputField';
+import { useState } from 'react';
+
+const DurationIndex = () => {
+    const [selectedTimeFrame, setSelectedTimeFrame] = useState('minutes');
+    return (
+        <>
+            <DurationInputField selectedTimeFrame={selectedTimeFrame} />
+            <TimeDropDown selectedTimeFrame={selectedTimeFrame} setSelectedTimeFrame={setSelectedTimeFrame} />
+        </>
+    );
+};
+
+export default DurationIndex;

src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationInputField.tsx

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next';
+import { ChangeEvent, useEffect, useState } from 'react';
+import Input from 'Components/ui/input';
+import useContractFor from 'Api/hooks/useContractFor';
+
+type DurationInputFieldProps = {
+    selectedTimeFrame: string;
+};
+
+const DurationInputField = ({ selectedTimeFrame }: DurationInputFieldProps) => {
+    const { t } = useTranslation();
+
+    const { data, ...rest } = useContractFor('frxAUDJPY');
+
+    type TTimeFrameConfig = Record<string, number>;
+
+    type ThintValuesAndMessages = Record<string, TTimeFrameConfig>;
+
+    const hintValuesAndMessages: ThintValuesAndMessages = {
+        minutes: {
+            min: 15,
+            max: 1440,
+        },
+        hours: {
+            min: 1,
+            max: 24,
+        },
+        days: {
+            min: 1,
+            max: 365,
+        },
+    };
+
+    const [inputValue, setInputValue] = useState({
+        value: '',
+        hasError: false,
+        hintMessage: t('Minimum 15'),
+    });
+    // console.log(data, rest, 'www');
+    useEffect(() => {
+        const timeFrameConfig: TTimeFrameConfig = hintValuesAndMessages?.[selectedTimeFrame] || { min: 0, max: 0 };
+        setInputValue({ value: '', hasError: false, hintMessage: t(`Minimum ${timeFrameConfig.min}`) });
+    }, [selectedTimeFrame]);
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        const isValidInput = /^$|^[0-9]{1,4}$/.test(inputValue);
+
+        if (isValidInput) {
+            const timeFrameConfig: TTimeFrameConfig = hintValuesAndMessages?.[selectedTimeFrame] || { min: 0, max: 0 };
+            const value = parseInt(inputValue);
+            let hasError = false;
+            let hintMessage = t(`Minimum ${timeFrameConfig.min}`);
+
+            if (value < timeFrameConfig.min) {
+                hasError = true;
+                hintMessage = t(`Minimum ${timeFrameConfig.min}`);
+            } else if (value > timeFrameConfig.max) {
+                hasError = true;
+                hintMessage = t(`Maximum ${timeFrameConfig.max}`);
+            }
+
+            setInputValue({ value: inputValue, hasError, hintMessage });
+        }
+    };
+    return (
+        <div className='w-40'>
+            <Input
+                type='text'
+                id='exampleInput'
+                value={inputValue.value}
+                onChange={handleChange}
+                labelAlignment='left'
+                hint={inputValue.hintMessage}
+                error={inputValue.hasError}
+            />
+        </div>
+    );
+};
+
+export default DurationInputField;

src/components/trade-dashboard/DurationAndTimeOut/Duration/TimeDropDown.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from 'react-i18next';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'Components/ui/dropdown-menu';
+import { useState } from 'react';
+
+type TimeDropDownProps = {
+    selectedTimeFrame: string;
+    setSelectedTimeFrame: React.Dispatch<React.SetStateAction<string>>;
+};
+
+const TimeDropDown = ({ selectedTimeFrame, setSelectedTimeFrame }: TimeDropDownProps) => {
+    const { t } = useTranslation();
+    const [isDropDownOpen, setDropDownOpen] = useState(false);
+
+    const handleTimeToggle = () => setDropDownOpen(prev => !prev);
+
+    const handleDurationSelect = (value: string) => setSelectedTimeFrame(value);
+
+    const dropDownValues = [
+        { key: 'minutes', value: t('minutes') },
+        { key: 'hours', value: t('hours') },
+        { key: 'days', value: t('days') },
+    ];
+
+    return (
+        <DropdownMenu onOpenChange={handleTimeToggle}>
+            <DropdownMenuTrigger className='drop-down-trigger w-40'>
+                <div className='flex items-center justify-around'>
+                    <div> {dropDownValues.find(item => item.key === selectedTimeFrame)?.value}</div>
+
+                    <img
+                        src='/images/pages/header/ic-chevron-down.svg'
+                        alt='arrow'
+                        className={`ml-2 transition-transform ${isDropDownOpen ? 'rotate-180' : ''}`}
+                    />
+                </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className='drop-down-content w-40'>
+                {dropDownValues.map(item => (
+                    <DropdownMenuItem
+                        key={item.key}
+                        className={item.key === selectedTimeFrame ? 'drowdown-item-selected' : 'drowdown-item'}
+                        onClick={() => handleDurationSelect(item.key)}
+                    >
+                        <span>{item.value}</span>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+
+export default TimeDropDown;

src/components/trade-dashboard/DurationAndTimeOut/DurationTypeDropDown.tsx

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'Components/ui/dropdown-menu';
+import { useState } from 'react';
+import DurationIndex from './Duration/DurationIndex';
+
+const DurationTypeDropDown = () => {
+    const { t } = useTranslation();
+    const dropDownValues = [
+        { key: 'duration', value: t('Duration') },
+        { key: 'end_time', value: t('End time') },
+    ];
+
+    const [isDurationOpen, setDurationOpen] = useState(false);
+    const [selectedDuration, setSelectedDuration] = useState(dropDownValues[0].key);
+
+    const handleDurationToggle = () => setDurationOpen(prev => !prev);
+
+    const handleDurationSelect = (value: string) => setSelectedDuration(value);
+
+    return (
+        <div className='flex items-center justify-start'>
+            <DropdownMenu onOpenChange={handleDurationToggle}>
+                <DropdownMenuTrigger className='drop-down-trigger w-40'>
+                    <div className='flex items-center justify-around'>
+                        <div>{dropDownValues.find(item => item.key === selectedDuration)?.value}</div>
+
+                        <img
+                            src='/images/pages/header/ic-chevron-down.svg'
+                            alt='arrow'
+                            className={`ml-2 transition-transform ${isDurationOpen ? 'rotate-180' : ''}`}
+                        />
+                    </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className='drop-down-content w-40'>
+                    {dropDownValues.map(item => (
+                        <DropdownMenuItem
+                            key={item.key}
+                            className={item.key === selectedDuration ? 'drowdown-item-selected' : 'drowdown-item'}
+                            onClick={() => handleDurationSelect(item.key)}
+                        >
+                            <span>{item.value}</span>
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            {selectedDuration === 'duration' && <DurationIndex />}
+        </div>
+    );
+};
+
+export default DurationTypeDropDown;

src/components/trade-dashboard/DurationAndTimeOut/TimeOut/TimeOut.tsx

@@ -0,0 +1,3 @@
+const TimeOut = () => <div>Time out</div>;
+
+export default TimeOut;

src/components/trade-dashboard/StartTime/StartTime.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next';
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+} from 'Components/ui/dropdown-menu';
+import { useState } from 'react';
+
+const StartTime = () => {
+    const { t } = useTranslation();
+    const [isDropDownOpen, setDropdownOpen] = useState(false);
+
+    const handleDropdownToggle = () => {
+        setDropdownOpen(prev => !prev);
+    };
+
+    return (
+        <div className='flex items-center justify-start'>
+            <span className='text-m mr-3 font-light'> {t('Start time')}</span>
+            <DropdownMenu onOpenChange={handleDropdownToggle}>
+                <DropdownMenuTrigger className='drop-down-trigger w-40'>
+                    <div className='flex items-center justify-around'>
+                        <div>Now</div>
+                        <img
+                            src='/images/pages/header/ic-chevron-down.svg'
+                            alt='arrow'
+                            className={`ml-2 transition-transform ${isDropDownOpen ? 'rotate-180' : ''}`}
+                        />
+                    </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className='drop-down-content w-40'>
+                    <DropdownMenuItem className='drowdown-item-selected'>
+                        <span>Now</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className='drowdown-item'>
+                        <span>Item 2</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className='drowdown-item'>
+                        <span>Item 3</span>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+};
+
+export default StartTime;

src/main.tsx

@@ -4,11 +4,17 @@ import App from './App';
 import APIProvider from 'Utils/websocket/APIProvider';
 import 'Styles/main.css';
 import 'Translations/i18n.ts';
+import StartTime from 'Components/trade-dashboard/StartTime/StartTime';
+import DurationTypeDropDown from 'Components/trade-dashboard/DurationAndTimeOut/DurationTypeDropDown';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <APIProvider>
             <App />
+            <div className='ml-10 w-4/12 rounded-md border border-slate-200 p-5 shadow'>
+                <StartTime />
+                <DurationTypeDropDown />
+            </div>
         </APIProvider>
     </React.StrictMode>
 );

src/styles/main.css

@@ -19,3 +19,15 @@
         @apply text-[1.375rem];
     }
 }
+.drowdown-item {
+    @apply bg-white p-2 hover:bg-slate-50 focus-visible:outline-transparent;
+}
+.drowdown-item-selected {
+    @apply bg-slate-100 p-2 focus-visible:outline-transparent;
+}
+.drop-down-trigger {
+    @apply border border-gray-200 p-1 focus-visible:outline-gray-100;
+}
+.drop-down-content {
+    @apply rounded shadow-md;
+}