From 52ba11e9f3bf265dd83df387b184a0c05c14ae23 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Mon, 20 May 2024 16:12:27 +0800 Subject: [PATCH 01/10] fix: make it single responsibility component --- .../src/AppV2/Components/InfoModal/index.ts | 4 -- .../AppV2/Components/InfoModal/info-modal.tsx | 40 ------------------- .../AppV2/Components/PayoutInfoModal/index.ts | 4 ++ .../payout-info-modal.scss} | 0 .../PayoutInfoModal/payout-info-modal.tsx | 33 +++++++++++++++ .../ContractDetails/contract-details.tsx | 18 +-------- 6 files changed, 39 insertions(+), 60 deletions(-) delete mode 100644 packages/trader/src/AppV2/Components/InfoModal/index.ts delete mode 100644 packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx create mode 100644 packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts rename packages/trader/src/AppV2/Components/{InfoModal/info-modal.scss => PayoutInfoModal/payout-info-modal.scss} (100%) create mode 100644 packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx diff --git a/packages/trader/src/AppV2/Components/InfoModal/index.ts b/packages/trader/src/AppV2/Components/InfoModal/index.ts deleted file mode 100644 index 16636d3b3ba4..000000000000 --- a/packages/trader/src/AppV2/Components/InfoModal/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import InfoModal from './info-modal'; -import './info-modal.scss'; - -export default InfoModal; diff --git a/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx b/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx deleted file mode 100644 index 9efc5c7881a0..000000000000 --- a/packages/trader/src/AppV2/Components/InfoModal/info-modal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { CaptionText, Modal } from '@deriv-com/quill-ui'; -import { localize } from '@deriv/translations'; -import React from 'react'; - -type InfoModalProps = { - icon?: React.ReactNode; - header_content: string; - body_content: string; - className?: string; -}; - -const InfoModal = ({ header_content, body_content, icon }: InfoModalProps) => { - const [isVisible, setIsVisible] = React.useState(false); - return ( - <> - - - - {body_content} - - - ); -}; - -export default InfoModal; diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts b/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts new file mode 100644 index 000000000000..789a9f6da67a --- /dev/null +++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/index.ts @@ -0,0 +1,4 @@ +import PayoutInfoModal from './payout-info-modal'; +import './payout-info-modal.scss'; + +export default PayoutInfoModal; diff --git a/packages/trader/src/AppV2/Components/InfoModal/info-modal.scss b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.scss similarity index 100% rename from packages/trader/src/AppV2/Components/InfoModal/info-modal.scss rename to packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.scss diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx new file mode 100644 index 000000000000..a65fa76278ab --- /dev/null +++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx @@ -0,0 +1,33 @@ +import { CaptionText, Modal } from '@deriv-com/quill-ui'; +import { Localize } from '@deriv/translations'; +import React from 'react'; + +const PayoutInfoModal = () => { + const [isVisible, setIsVisible] = React.useState(false); + return ( + <> + + } + shouldCloseOnPrimaryButtonClick + isMobile + showHandleBar + > + } /> + + { + + } + + + + ); +}; + +export default PayoutInfoModal; diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx index d15394938b6f..c08a37454c17 100644 --- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx +++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx @@ -1,8 +1,6 @@ import React from 'react'; import { Text } from '@deriv-com/quill-ui'; -import InfoSheet from 'AppV2/Components/InfoModal'; -import { localize } from '@deriv/translations'; -import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons'; +import PayoutInfoModal from 'AppV2/Components/PayoutInfoModal'; import ChartPlaceholder from '../Chart'; const ContractDetails = () => { @@ -11,23 +9,11 @@ const ContractDetails = () => {
Contract Details
- +
Contract card
Take Profit - } - header_content={localize('Take profit')} - body_content={localize( - 'When your profit reaches or exceeds the set amount, your trade will be closed automatically.' - )} - />
From b86dc09161277aa7080d20f0639ebee18b3d8cd5 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Mon, 20 May 2024 16:16:18 +0800 Subject: [PATCH 02/10] fix: remove unnecessary brackets --- .../AppV2/Components/PayoutInfoModal/payout-info-modal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx index a65fa76278ab..04fa9c066566 100644 --- a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx +++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx @@ -21,9 +21,7 @@ const PayoutInfoModal = () => { > } /> - { - - } + From 4fcb3b8708dccbac7e17f00f57977f79c8b2531f Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Mon, 20 May 2024 16:37:53 +0800 Subject: [PATCH 03/10] fix: make body content reusable --- .../AppV2/Components/PayoutInfoModal/payout-info-modal.tsx | 6 ++---- .../AppV2/Containers/ContractDetails/contract-details.tsx | 7 ++++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx index 04fa9c066566..f8404e86e336 100644 --- a/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx +++ b/packages/trader/src/AppV2/Components/PayoutInfoModal/payout-info-modal.tsx @@ -2,7 +2,7 @@ import { CaptionText, Modal } from '@deriv-com/quill-ui'; import { Localize } from '@deriv/translations'; import React from 'react'; -const PayoutInfoModal = () => { +const PayoutInfoModal = ({ body_content }: { body_content: React.ReactNode }) => { const [isVisible, setIsVisible] = React.useState(false); return ( <> @@ -20,9 +20,7 @@ const PayoutInfoModal = () => { showHandleBar > } /> - - - + {body_content} ); diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx index c08a37454c17..f6a37b9a39f4 100644 --- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx +++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Text } from '@deriv-com/quill-ui'; import PayoutInfoModal from 'AppV2/Components/PayoutInfoModal'; import ChartPlaceholder from '../Chart'; +import { Localize } from '@deriv/translations'; const ContractDetails = () => { return ( @@ -9,7 +10,11 @@ const ContractDetails = () => {
Contract Details
- + + } + />
Contract card
From d3811f7c52e2b44a45e6cfdb4628d9aa64abc6cf Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 09:09:09 +0800 Subject: [PATCH 04/10] fix: create risk management tool --- .../risk-management-info-modal.tsx | 41 +++++++++++++ .../Components/RiskManagementItem/index.ts | 4 ++ .../risk-management-item.scss | 17 ++++++ .../risk-management-item.tsx | 61 +++++++++++++++++++ .../ContractDetails/contract-details.tsx | 23 ++++--- 5 files changed, 137 insertions(+), 9 deletions(-) create mode 100644 packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx create mode 100644 packages/trader/src/AppV2/Components/RiskManagementItem/index.ts create mode 100644 packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss create mode 100644 packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx diff --git a/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx b/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx new file mode 100644 index 000000000000..65be3df679f5 --- /dev/null +++ b/packages/trader/src/AppV2/Components/RiskManagementInfoModal/risk-management-info-modal.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Modal } from '@deriv-com/quill-ui'; +import { Localize } from '@deriv/translations'; +import { LabelPairedCircleInfoSmRegularIcon } from '@deriv/quill-icons'; + +type RiskManagementInfoModalProps = { + header_content: React.ReactNode; + body_content: React.ReactNode; + is_deal_cancellation_enabled?: boolean; +}; + +const RiskManagementInfoModal = ({ + header_content, + body_content, + is_deal_cancellation_enabled = false, +}: RiskManagementInfoModalProps) => { + const [isVisible, setIsVisible] = React.useState(false); + return ( + <> + + } + shouldCloseOnPrimaryButtonClick + isMobile + showHandleBar + > + + + {body_content} + {is_deal_cancellation_enabled &&
hello
} + + + + ); +}; + +export default RiskManagementInfoModal; diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts b/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts new file mode 100644 index 000000000000..043be75aa91b --- /dev/null +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/index.ts @@ -0,0 +1,4 @@ +import RiskManagementItem from './risk-management-item'; +import './risk-management-item.scss'; + +export default RiskManagementItem; diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss new file mode 100644 index 000000000000..482d430cc15a --- /dev/null +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss @@ -0,0 +1,17 @@ +.risk-management-item { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--semantic-spacing-gap-lg); + + &--container { + display: flex; + flex-direction: column; + gap: var(--semantic-spacing-gap-md); + } + + &--title { + display: flex; + gap: var(--semantic-spacing-gap-md); + } +} diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx new file mode 100644 index 000000000000..f55866f1d5ae --- /dev/null +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui'; +import { localize } from '@deriv/translations'; +import RiskManagementInfoModal from '../RiskManagementInfoModal/risk-management-info-modal'; + +type RiskManagementItemProps = { + label: React.ReactNode; + modal_body_content: React.ReactNode; + validation_message?: React.ReactNode; +}; + +const RiskManagementItem = ({ label, modal_body_content, validation_message }: RiskManagementItemProps) => { + const [toggle, setToggle] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
+
+ + {label} + + + setToggle(!toggle)} /> +
+ {toggle && ( + setIsOpen(true)} + /> + )} + setIsOpen(false)}> + + + + + + { + //do the save + }, + }} + /> + + +
+ ); +}; + +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 fd30f7703e82..78e958254b9b 100644 --- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx +++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx @@ -4,7 +4,8 @@ import EntryExitDetails from 'AppV2/Components/EntryExitDetails'; import PayoutInfoModal from 'AppV2/Components/PayoutInfoModal'; import ChartPlaceholder from '../Chart'; import { Localize } from '@deriv/translations'; -import RiskManagementInfoModal from 'AppV2/Components/RiskManagementInfoModal/risk-management-info-modal'; +import RiskManagementItem from 'AppV2/Components/RiskManagementItem'; +import CardWrapper from 'AppV2/Components/CardWrapper'; const ContractDetails = () => { return ( @@ -20,17 +21,21 @@ const ContractDetails = () => {
Contract card
- Take Profit - } - body_content={} - />
-
- Take profit -
+ + } + modal_body_content={} + validation_message='hello' + /> + } + modal_body_content={} + validation_message='hello' + /> +
Order details
From f44c5a9457e442ca674398c505eac84ba90ba48b Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 09:44:50 +0800 Subject: [PATCH 05/10] fix: clean up contract details page --- .../trader/src/AppV2/Components/CardWrapper/card-wrapper.scss | 3 +++ .../src/AppV2/Containers/ContractDetails/contract-details.scss | 1 - packages/trader/src/AppV2/app.tsx | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss index 0825598b67d4..00b400d2fee2 100644 --- a/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss +++ b/packages/trader/src/AppV2/Components/CardWrapper/card-wrapper.scss @@ -3,6 +3,9 @@ margin-top: 0.5rem; padding: 1rem; border-radius: 0.625rem; + display: flex; + flex-direction: column; + gap: var(--semantic-spacing-gap-lg); .title { margin-bottom: 1rem; diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss index 7ffe41180a11..1e10a14fc135 100644 --- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss +++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss @@ -1,6 +1,5 @@ .contract-details { background-color: rgba(0, 0, 0, 0.48); - height: 88vh; padding: 8px; } .placeholder { diff --git a/packages/trader/src/AppV2/app.tsx b/packages/trader/src/AppV2/app.tsx index 7d32afa8a9c6..f09fe535e07c 100644 --- a/packages/trader/src/AppV2/app.tsx +++ b/packages/trader/src/AppV2/app.tsx @@ -27,7 +27,7 @@ const App = ({ passthrough }: Apptypes) => { return ( - + From b2496c9600dc06eea61af27fbb7796f2bbc9b1f0 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 13:42:03 +0800 Subject: [PATCH 06/10] fix: add contract details footer and add deal cancellation to risk management --- .../src/AppV2/Components/BottomNav/bottom-nav.tsx | 2 ++ .../contract-details-footer.scss | 13 +++++++++++++ .../contract-details-footer.tsx | 13 +++++++++++++ .../Components/ContractDetailsFooter/index.ts | 4 ++++ .../RiskManagementItem/risk-management-item.tsx | 14 ++++++++++++-- .../ContractDetails/contract-details.tsx | 8 ++++++++ 6 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.scss create mode 100644 packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx create mode 100644 packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx index 797df82fe219..090595cf6ca1 100644 --- a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx +++ b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx @@ -9,6 +9,7 @@ import { } from '@deriv/quill-icons'; import BottomNavItem from './bottom-nav-item'; import { Badge } from '@deriv-com/quill-ui'; +import ContractDetailsFooter from '../ContractDetailsFooter'; type BottomNavProps = { className?: string; @@ -58,6 +59,7 @@ const BottomNav = ({ className, children }: BottomNavProps) => { return (
{children[selectedIndex]}
+ {selectedIndex === 4 && }
{bottomNavItems.map((item, index) => ( { + return ( +
+
+ ); +}; + +export default ContractDetailsFooter; diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts b/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts new file mode 100644 index 000000000000..0ceb14289514 --- /dev/null +++ b/packages/trader/src/AppV2/Components/ContractDetailsFooter/index.ts @@ -0,0 +1,4 @@ +import ContractDetailsFooter from './contract-details-footer'; +import './contract-details-footer.scss'; + +export default ContractDetailsFooter; 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 f55866f1d5ae..031af3aab9a0 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -7,9 +7,15 @@ type RiskManagementItemProps = { label: React.ReactNode; modal_body_content: React.ReactNode; validation_message?: React.ReactNode; + is_deal_cancellation?: boolean; }; -const RiskManagementItem = ({ label, modal_body_content, validation_message }: RiskManagementItemProps) => { +const RiskManagementItem = ({ + label, + modal_body_content, + validation_message, + is_deal_cancellation = false, +}: RiskManagementItemProps) => { const [toggle, setToggle] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false); @@ -20,7 +26,11 @@ const RiskManagementItem = ({ label, modal_body_content, validation_message }: R {label} - setToggle(!toggle)} /> + {is_deal_cancellation ? ( +
For now
+ ) : ( + setToggle(!toggle)} /> + )}
{toggle && ( {
+ + } + modal_body_content={} + validation_message='hello' + is_deal_cancellation + /> + } From 0908a380cc9c891f1b1bf5f4bcdf7f010aec42e9 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 14:52:37 +0800 Subject: [PATCH 07/10] fix: add a case for when take profit is disabled for ongoing contract --- .../Components/RiskManagementItem/risk-management-item.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 031af3aab9a0..b44ec3103221 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -18,6 +18,7 @@ const RiskManagementItem = ({ }: RiskManagementItemProps) => { const [toggle, setToggle] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false); + const dummy_boolean = true; // This will be flag from backend return (
@@ -26,9 +27,9 @@ const RiskManagementItem = ({ {label} - {is_deal_cancellation ? ( -
For now
- ) : ( + {dummy_boolean && 5 USD} + {is_deal_cancellation &&
For now
}{' '} + {!dummy_boolean && !is_deal_cancellation && ( setToggle(!toggle)} /> )}
From a560f57afcbb306ba0f9a22bad463dc625748811 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 14:53:35 +0800 Subject: [PATCH 08/10] fix: remove unncessary code --- .../Components/RiskManagementItem/risk-management-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b44ec3103221..fcedad7c91d4 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -28,7 +28,7 @@ const RiskManagementItem = ({ {dummy_boolean && 5 USD} - {is_deal_cancellation &&
For now
}{' '} + {is_deal_cancellation &&
For now
} {!dummy_boolean && !is_deal_cancellation && ( setToggle(!toggle)} /> )} From 82e21c9dfefc49a05a4d07da6d084731bc7de0a1 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 15:25:20 +0800 Subject: [PATCH 09/10] chore: bump quill-ui version --- package-lock.json | 8 ++++---- packages/core/package.json | 2 +- packages/trader/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5c9376412746..91dd59e2ddc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@datadog/browser-rum": "^5.11.0", "@deriv-com/analytics": "1.4.13", "@deriv-com/quill-tokens": "^2.0.2", - "@deriv-com/quill-ui": "^1.10.2", + "@deriv-com/quill-ui": "^1.10.4", "@deriv-com/ui": "^1.14.5", "@deriv-com/utils": "^0.0.20", "@deriv/api-types": "^1.0.172", @@ -2983,9 +2983,9 @@ } }, "node_modules/@deriv-com/quill-ui": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.2.tgz", - "integrity": "sha512-RSdX2bsZlSob3ntvMPj4qsAJurcVBI3mH0NRBIHWM88kDHa0wHAV8vNS4DcARG4LrX24IIL8VXZz4HOUGPlvaQ==", + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.4.tgz", + "integrity": "sha512-PW1qmIadS+u0XUZ3C+B3ILwt//PByLy4lWK6CbW51nfWxuFNoFA2R7Ibvz/zHdeFIH02B4WOAMGYP0loYVgb2Q==", "dependencies": { "@deriv/quill-icons": "^1.19.20", "@headlessui/react": "^1.7.18", diff --git a/packages/core/package.json b/packages/core/package.json index 9e96fafdca15..591188fc45df 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -97,7 +97,7 @@ "@datadog/browser-rum": "^5.11.0", "@deriv-com/analytics": "1.4.13", "@deriv-com/quill-tokens": "^2.0.2", - "@deriv-com/quill-ui": "^1.10.3", + "@deriv-com/quill-ui": "^1.10.4", "@deriv-com/utils": "^0.0.20", "@deriv/account": "^1.0.0", "@deriv/account-v2": "^1.0.0", diff --git a/packages/trader/package.json b/packages/trader/package.json index c1ea6ccca9f1..5a929beb2888 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -90,7 +90,7 @@ "@cloudflare/stream-react": "^1.9.1", "@deriv-com/analytics": "1.4.13", "@deriv-com/quill-tokens": "^2.0.2", - "@deriv-com/quill-ui": "^1.10.3", + "@deriv-com/quill-ui": "^1.10.4", "@deriv-com/utils": "^0.0.20", "@deriv/api-types": "^1.0.172", "@deriv/components": "^1.0.0", From f0eefa5e10533ccddefd1ef6f272ceccbe36dc95 Mon Sep 17 00:00:00 2001 From: Henry Hein Date: Wed, 22 May 2024 16:18:06 +0800 Subject: [PATCH 10/10] fix: add tag component to deal cancellation widget --- .../risk-management-item.scss | 5 +++++ .../RiskManagementItem/risk-management-item.tsx | 17 ++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss index 482d430cc15a..d50c778f3397 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.scss @@ -14,4 +14,9 @@ display: flex; gap: var(--semantic-spacing-gap-md); } + + .deal-cancellation-badge { + background-color: var(--semantic-color-monochrome-surface-normal-lowest); + border-radius: var(--semantic-borderRadius-sm); + } } 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 fcedad7c91d4..96d22c5efb7e 100644 --- a/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx +++ b/packages/trader/src/AppV2/Components/RiskManagementItem/risk-management-item.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { ActionSheet, Text, TextField, ToggleSwitch } from '@deriv-com/quill-ui'; +import { ActionSheet, Tag, 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'; type RiskManagementItemProps = { label: React.ReactNode; @@ -27,8 +28,18 @@ const RiskManagementItem = ({ {label} - {dummy_boolean && 5 USD} - {is_deal_cancellation &&
For now
} + {dummy_boolean && !is_deal_cancellation && 5 USD} + {/* {is_deal_cancellation &&
For now
} */} + {is_deal_cancellation && ( + + )} {!dummy_boolean && !is_deal_cancellation && ( setToggle(!toggle)} /> )}