From 1b34634eba40dbee9abe9b4a1fdf030f700edd0a Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Tue, 28 May 2024 16:23:11 +0800 Subject: [PATCH 1/3] fix: connect deal cancellation widget to store --- .../AppV2/Components/BottomNav/bottom-nav.tsx | 2 +- .../deal-cancellation-remaining-time.tsx | 41 +++++++++++++++++++ .../risk-management-item.tsx | 19 ++------- .../ContractDetails/contract-details.tsx | 29 ++++++++----- .../src/AppV2/Hooks/useContractDetails.ts | 17 ++++---- 5 files changed, 74 insertions(+), 34 deletions(-) create mode 100644 packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx index 090595cf6ca1..cc6d4dfe4ee9 100644 --- a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx +++ b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx @@ -54,7 +54,7 @@ const bottomNavItems = [ ]; const BottomNav = ({ className, children }: BottomNavProps) => { - const [selectedIndex, setSelectedIndex] = React.useState(0); + const [selectedIndex, setSelectedIndex] = React.useState(4); return (
diff --git a/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx b/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx new file mode 100644 index 000000000000..e03d890b4854 --- /dev/null +++ b/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx @@ -0,0 +1,41 @@ +import { Tag } from '@deriv-com/quill-ui'; +import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons'; +import { formatDuration, getDiffDuration } from '@deriv/shared'; +import { observer, useStore } from '@deriv/stores'; +import useContractDetails from 'AppV2/Hooks/useContractDetails'; +import React from 'react'; + +type DealCancellationRemainingTimeProps = { + end_time?: number; + format?: string; +}; + +const DealCancellationRemainingTime = observer(({ format = 'mm:ss' }: DealCancellationRemainingTimeProps) => { + const { common } = useStore(); + const { server_time: start_time } = common; + const { contract_info } = useContractDetails(); + + const { date_expiry: end_time } = contract_info.cancellation || {}; + if (!end_time || start_time.unix() > +end_time) { + return {''}; + } + + const { timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format); + + const is_zeroes = /^00:00$/.test(timestamp); + + return ( + + + + ); +}); + +export default DealCancellationRemainingTime; diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx index 96d22c5efb7e..cd75fe5419c9 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { ActionSheet, Tag, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui'; +import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui'; import { localize } from '@deriv/translations'; import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal'; -import { LabelPairedStopwatchCaptionRegularIcon } from '@deriv/quill-icons'; +import DealCancellationRemainingTime from '../DealCancellationRemainingTime/deal-cancellation-remaining-time'; type RiskManagementItemProps = { label: React.ReactNode; @@ -28,18 +28,8 @@ const RiskManagementItem = ({ {label} - {dummy_boolean && !is_deal_cancellation && 5 USD} - {/* {is_deal_cancellation &&
For now
} */} - {is_deal_cancellation && ( - - )} + {dummy_boolean && !is_deal_cancellation && 5 USD} + {is_deal_cancellation && } {!dummy_boolean && !is_deal_cancellation && ( setToggle(!toggle)} /> )} @@ -79,5 +69,4 @@ const RiskManagementItem = ({
); }; - export default RiskManagementItem; diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx index 887ec4498d52..e2058c99d4b7 100644 --- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx +++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx @@ -6,8 +6,15 @@ import ChartPlaceholder from '../Chart'; import { Localize } from '@deriv/translations'; import RiskManagementItem from 'AppV2/Components/RiskManagementItem'; import CardWrapper from 'AppV2/Components/CardWrapper'; +import { observer } from '@deriv/stores'; +import useContractDetails from 'AppV2/Hooks/useContractDetails'; +import { isValidToCancel } from '@deriv/shared'; + +const ContractDetails = observer(() => { + const { contract_info, is_loading } = useContractDetails(); + if (is_loading) return <>; + const is_valid_to_cancel = isValidToCancel(contract_info); -const ContractDetails = () => { return (
@@ -24,14 +31,16 @@ const ContractDetails = () => {
- - } - modal_body_content={} - validation_message='hello' - is_deal_cancellation - /> - + {is_valid_to_cancel && ( + + } + modal_body_content={} + validation_message='hello' + is_deal_cancellation + /> + + )} } @@ -50,6 +59,6 @@ const ContractDetails = () => {
); -}; +}); export default ContractDetails; diff --git a/packages/trader/src/AppV2/Hooks/useContractDetails.ts b/packages/trader/src/AppV2/Hooks/useContractDetails.ts index fadc3cb673f4..9fd8da6b3bb6 100644 --- a/packages/trader/src/AppV2/Hooks/useContractDetails.ts +++ b/packages/trader/src/AppV2/Hooks/useContractDetails.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useRef } from 'react'; import { useLocation } from 'react-router'; import { useStore } from '@deriv/stores'; @@ -10,17 +10,18 @@ const useContractDetails = () => { const { contract_info } = contract_store; useEffect(() => { - const url_array = /[^/]*$/.exec(location.pathname); - const url_contract_id = url_array ? +url_array[0] : undefined; - onMount(url_contract_id); + if (!contract_info.contract_id) { + const url_array = /[^/]*$/.exec(location.pathname); + const url_contract_id = url_array ? +url_array[0] : undefined; + onMount(url_contract_id); + } - return () => { - onUnmount(); - }; - }, [location, onMount, onUnmount]); + // TODO: need to unmount whenever pathname changes + }, [location.pathname, onMount, contract_info.contract_id]); return { contract_info, + is_loading: !contract_info.contract_id, }; }; From bc3025dc0da9e1b4f25624fd2984415301f58468 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Tue, 28 May 2024 16:36:07 +0800 Subject: [PATCH 2/3] fix: remove unused import --- packages/trader/src/AppV2/Hooks/useContractDetails.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/trader/src/AppV2/Hooks/useContractDetails.ts b/packages/trader/src/AppV2/Hooks/useContractDetails.ts index 9fd8da6b3bb6..8e96fca4178e 100644 --- a/packages/trader/src/AppV2/Hooks/useContractDetails.ts +++ b/packages/trader/src/AppV2/Hooks/useContractDetails.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import { useEffect } from 'react'; import { useLocation } from 'react-router'; import { useStore } from '@deriv/stores'; From 60d227a6c511d5ba1dfb3f3af5f97be7d011b43f Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Tue, 28 May 2024 16:45:52 +0800 Subject: [PATCH 3/3] fix: unused prop --- .../deal-cancellation-remaining-time.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx b/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx index e03d890b4854..d5225e39a31b 100644 --- a/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx +++ b/packages/trader/src/AppV2/Components/DealCancellationRemainingTime/deal-cancellation-remaining-time.tsx @@ -6,7 +6,6 @@ import useContractDetails from 'AppV2/Hooks/useContractDetails'; import React from 'react'; type DealCancellationRemainingTimeProps = { - end_time?: number; format?: string; }; @@ -22,8 +21,6 @@ const DealCancellationRemainingTime = observer(({ format = 'mm:ss' }: DealCancel const { timestamp } = formatDuration(getDiffDuration(start_time.unix(), end_time), format); - const is_zeroes = /^00:00$/.test(timestamp); - return (