diff --git a/src/api/hooks/useContractFor.ts b/src/api/hooks/useContractFor.ts new file mode 100644 index 0000000000..7d9ab996e9 --- /dev/null +++ b/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; diff --git a/src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationIndex.tsx b/src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationIndex.tsx new file mode 100644 index 0000000000..2bec91fcb7 --- /dev/null +++ b/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 ( + <> + + + + ); +}; + +export default DurationIndex; diff --git a/src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationInputField.tsx b/src/components/trade-dashboard/DurationAndTimeOut/Duration/DurationInputField.tsx new file mode 100644 index 0000000000..71ea0fd4a9 --- /dev/null +++ b/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; + + type ThintValuesAndMessages = Record; + + 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) => { + 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 ( +
+ +
+ ); +}; + +export default DurationInputField; diff --git a/src/components/trade-dashboard/DurationAndTimeOut/Duration/TimeDropDown.tsx b/src/components/trade-dashboard/DurationAndTimeOut/Duration/TimeDropDown.tsx new file mode 100644 index 0000000000..926e4265f2 --- /dev/null +++ b/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>; +}; + +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 ( + + +
+
{dropDownValues.find(item => item.key === selectedTimeFrame)?.value}
+ + arrow +
+ + + {dropDownValues.map(item => ( + handleDurationSelect(item.key)} + > + {item.value} + + ))} + + + ); +}; + +export default TimeDropDown; diff --git a/src/components/trade-dashboard/DurationAndTimeOut/DurationTypeDropDown.tsx b/src/components/trade-dashboard/DurationAndTimeOut/DurationTypeDropDown.tsx new file mode 100644 index 0000000000..9f7d9ad9c3 --- /dev/null +++ b/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 ( +
+ + +
+
{dropDownValues.find(item => item.key === selectedDuration)?.value}
+ + arrow +
+ + + {dropDownValues.map(item => ( + handleDurationSelect(item.key)} + > + {item.value} + + ))} + + + {selectedDuration === 'duration' && } +
+ ); +}; + +export default DurationTypeDropDown; diff --git a/src/components/trade-dashboard/DurationAndTimeOut/TimeOut/TimeOut.tsx b/src/components/trade-dashboard/DurationAndTimeOut/TimeOut/TimeOut.tsx new file mode 100644 index 0000000000..5083a62756 --- /dev/null +++ b/src/components/trade-dashboard/DurationAndTimeOut/TimeOut/TimeOut.tsx @@ -0,0 +1,3 @@ +const TimeOut = () =>
Time out
; + +export default TimeOut; diff --git a/src/components/trade-dashboard/StartTime/StartTime.tsx b/src/components/trade-dashboard/StartTime/StartTime.tsx new file mode 100644 index 0000000000..85cc5675bb --- /dev/null +++ b/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 ( +
+ {t('Start time')} + + +
+
Now
+ arrow +
+ + + + Now + + + Item 2 + + + + Item 3 + + + +
+ ); +}; + +export default StartTime; diff --git a/src/components/trade-dashboard/duration/index.tsx b/src/components/trade-dashboard/duration/index.tsx deleted file mode 100644 index 49c97c319f..0000000000 --- a/src/components/trade-dashboard/duration/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const Duration = () =>
duration
; - -export default Duration; diff --git a/src/components/trade-dashboard/start-time/index.tsx b/src/components/trade-dashboard/start-time/index.tsx deleted file mode 100644 index 12a8d09831..0000000000 --- a/src/components/trade-dashboard/start-time/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -const StartTime = () =>
Start time
; - -export default StartTime; diff --git a/src/main.tsx b/src/main.tsx index fc60dff932..90120593f2 100644 --- a/src/main.tsx +++ b/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( +
+ + +
); diff --git a/src/styles/main.css b/src/styles/main.css index 622d804e5b..43beefeaab 100644 --- a/src/styles/main.css +++ b/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; +}