From f885c95e34d781c5f94476f5fc3e08fb8f600032 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:37:15 +0800 Subject: [PATCH] [DTRA]/Ahmad/Accumulator fixes (#16796) * fix: fix * chore: fix * chore: scroll fix * chore: fixing animation * chore: fix text * chore: fixing the purchase button fix * chore: fix * fix: fix --- .../accumulator-stats-modal.tsx | 3 +- .../accumulator-stats-row.tsx | 37 ++++++++++++------- .../AccumulatorStats/accumulator-stats.scss | 23 +++++++++--- .../AccumulatorStats/accumulator-stats.tsx | 6 +-- .../Components/BottomNav/bottom-nav.scss | 1 + .../PurchaseButton/purchase-button.tsx | 3 +- 6 files changed, 49 insertions(+), 24 deletions(-) diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx index 5b8be5f9b7c6..8945b28ca7c9 100644 --- a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx +++ b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-modal.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { ActionSheet } from '@deriv-com/quill-ui'; -import { Text } from '@deriv-com/ui'; +import { ActionSheet, Text } from '@deriv-com/quill-ui'; import StatsRow from './accumulator-stats-row'; import { Localize } from '@deriv/translations'; diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx index 8f76e7ba59d0..ea30b4a7e335 100644 --- a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx +++ b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats-row.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Text } from '@deriv-com/quill-ui'; import clsx from 'clsx'; @@ -13,24 +13,35 @@ const StatsRow = ({ is_moving_transaction: boolean; className: string; }) => { + const [animationKey, setAnimationKey] = useState(0); + + useEffect(() => { + setAnimationKey(prevKey => prevKey + 1); + }, [animation_class]); + return ( <>
- + {rows[0]}
-
- {rows.slice(1)?.map((el: number, i: number) => ( -
- {el} -
- ))} -
+ {rows.slice(1)?.map((el: number, i: number) => ( +
+ {el} +
+ ))} ); }; diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss index a93eb0fc30e7..622bbcbf1ae9 100644 --- a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss +++ b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.scss @@ -13,12 +13,17 @@ @mixin accumulator-underline-animation($color: var(--core-color-solid-green-600)) { animation: underline-animation 640ms ease-in-out forwards; background-color: $color; + @keyframes underline-animation { 0% { transform: scaleX(0); opacity: 0; } - 50% { + 37.5% { + transform: scaleX(1); + opacity: 1; + } + 62.5% { transform: scaleX(1); opacity: 1; } @@ -33,6 +38,8 @@ background: var(--general-main-1); padding: var(--core-spacing-400); margin-top: calc(var(--core-spacing-600) * -1); + border-bottom-left-radius: var(--core-borderWidth-300); + border-bottom-right-radius: var(--core-borderWidth-300); &__container { display: flex; justify-content: space-between; @@ -55,7 +62,6 @@ margin: var(--core-spacing-300) var(--core-spacing-50); display: flex; width: calc(100% - 48px - 9px - 40px); - justify-content: space-between; gap: var(--core-spacing-400); position: relative; overflow-x: auto; @@ -84,7 +90,7 @@ bottom: 0; left: 0; width: 100%; - height: var(--core-spacing-100); + height: var(--core-spacing-75); transform: scaleX(0); transform-origin: left; background-color: var(--core-color-solid-green-600); @@ -111,6 +117,8 @@ .accumulator-stats-sheet-wrapper { .stats-sheet { + max-height: 100dvh; + overflow-y: auto; padding: var(--core-spacing-800); text-align: center; .slide-right { @@ -123,10 +131,15 @@ &__caption { margin-bottom: var(--core-spacing-400); } + &__moving { + display: flex; + align-items: center; + gap: var(--core-spacing-400); + } &__stats { display: flex; padding: var(--core-spacing-600) var(--core-spacing-75); - justify-content: space-around; + justify-content: space-between; border-bottom: var(--core-spacing-75) solid var(--core-color-opacity-black-100); &__moving { display: flex; @@ -146,7 +159,7 @@ bottom: 0; left: 0; width: 100%; - height: var(--core-spacing-100); + height: var(--core-spacing-75); transform: scaleX(0); transform-origin: left; opacity: 0; diff --git a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx index 480ab158de47..b8f3b9f335c4 100644 --- a/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx +++ b/packages/trader/src/AppV2/Components/AccumulatorStats/accumulator-stats.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import { ActionSheet, Text } from '@deriv-com/quill-ui'; -import { LabelPairedChevronDownSmBoldIcon } from '@deriv/quill-icons'; +import { LabelPairedChevronUpSmBoldIcon } from '@deriv/quill-icons'; import { Localize } from '@deriv/translations'; import { observer } from '@deriv/stores'; import { useTraderStore } from 'Stores/useTraderStores'; @@ -65,7 +65,7 @@ const AccumulatorStats = observer(() => { clearTimeout(error_timeout); clearTimeout(transition_timeout); }; - }, [rows[0]?.[0]]); + }, [rows[0]?.[0], ticks_history]); if (rows.length === 0) { return null; @@ -92,7 +92,7 @@ const AccumulatorStats = observer(() => { /> diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss index 95c838e23569..2aaf6b940bbb 100644 --- a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss +++ b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss @@ -9,6 +9,7 @@ $BOTTOM_NAV_HEIGHT: var(--core-spacing-2800); width: 100%; border-top: 1px solid var(--core-color-opacity-black-100); height: $BOTTOM_NAV_HEIGHT; + z-index: 30; } &-selection { flex: 1; diff --git a/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx b/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx index d3a8b4a26c36..49a06bd64e91 100644 --- a/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx +++ b/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx @@ -216,8 +216,9 @@ const PurchaseButton = observer(() => { } fullWidth isOpaque + isLoading={active_accu_contract?.is_sell_requested} className='purchase-button purchase-button--single' - disabled={is_accu_sell_disabled} + disabled={!is_valid_to_sell} onClick={() => onClickSell(active_accu_contract?.contract_info.contract_id)} />