[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
binary-com · Sep 19, 2024 · f885c95 · f885c95
1 parent 64e1bef
commit f885c95
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 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
@@ -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
@@ -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<number>(0);
+
+    useEffect(() => {
+        setAnimationKey(prevKey => prevKey + 1);
+    }, [animation_class]);
+
     return (
         <>
             <div className={`${className}__stat`}>
-                <Text size='sm' bold className={animation_class} data-testid='accumulator-first-stat'>
+                <Text
+                    size='sm'
+                    bold
+                    className={animation_class}
+                    key={animationKey}
+                    data-testid='accumulator-first-stat'
+                >
                     {rows[0]}
                 </Text>
             </div>
-            <div
-                className={clsx(`${className}__moving`, {
-                    'slide-right': is_moving_transaction,
-                })}
-            >
-                {rows.slice(1)?.map((el: number, i: number) => (
-                    <div key={i + 1} className={`${className}__stat`}>
-                        <Text size='sm'>{el}</Text>
-                    </div>
-                ))}
-            </div>
+            {rows.slice(1)?.map((el: number, i: number) => (
+                <div
+                    key={i + 1}
+                    className={clsx(`${className}__stat`, {
+                        'slide-right': is_moving_transaction && i == 0,
+                    })}
+                >
+                    <Text size='sm'>{el}</Text>
+                </div>
+            ))}
         </>
     );
 };

diff --git 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
@@ -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(() => {
                         />
                     </div>
                     <button className='accumulators-stats__container__expand' onClick={() => setIsOpen(true)}>
-                        <LabelPairedChevronDownSmBoldIcon data-testid='expand-stats-icon' />
+                        <LabelPairedChevronUpSmBoldIcon data-testid='expand-stats-icon' />
                     </button>
                 </div>
             </div>

diff --git 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
@@ -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)}
                     />
                 </div>