Fix: derived and forex account limits structure (binary-com#6856)

adrienne-deriv · Nov 17, 2022 · 72a3b6f · 72a3b6f
1 parent c4c066f
commit 72a3b6f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 12 deletions.
diff --git a/packages/account/src/Components/account-limits/account-limits-table-cell.jsx b/packages/account/src/Components/account-limits/account-limits-table-cell.jsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
 
-const AccountLimitsTableCell = ({ align, children, is_hint, renderExtraInfo }) => {
+const AccountLimitsTableCell = ({ align, children, is_hint, level, renderExtraInfo }) => {
     const text_size = is_hint ? 'xxxs' : 'xxs';
 
     return (
@@ -12,6 +12,7 @@ const AccountLimitsTableCell = ({ align, children, is_hint, renderExtraInfo }) =
                 className={classNames('da-account-limits__table-cell', {
                     'da-account-limits__table-cell--left': align !== 'right',
                     'da-account-limits__table-cell--right': align === 'right',
+                    'da-account-limits__table-cell--submarket': level === 'submarket',
                 })}
                 data-testid='account_limit_table_cell'
             >

diff --git a/packages/account/src/Components/account-limits/account-limits-turnover-limit-row.jsx b/packages/account/src/Components/account-limits/account-limits-turnover-limit-row.jsx
@@ -13,7 +13,7 @@ const AccountLimitsTurnoverLimitRow = ({ collection, title }) => {
 
     return collection.map(item => (
         <tr key={item.name} data-testid='account-limits-turnover-limit-row'>
-            <AccountLimitsTableCell>
+            <AccountLimitsTableCell level={item.level}>
                 {title && `${title} - `}
                 {item.name}
             </AccountLimitsTableCell>

diff --git a/packages/account/src/Components/account-limits/account-limits.jsx b/packages/account/src/Components/account-limits/account-limits.jsx
@@ -96,11 +96,8 @@ const AccountLimits = ({
     }
 
     const { commodities, forex, indices, synthetic_index } = { ...market_specific };
-    const forex_ordered = forex?.slice().sort((a, b) => (a.name < b.name ? 1 : -1));
-
-    if (forex_ordered && forex_ordered.push) {
-        forex_ordered.push(forex_ordered.shift());
-    }
+    const forex_ordered = forex?.slice().sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0));
+    const derived_ordered = synthetic_index?.slice().sort((b, a) => (a.level < b.level ? 1 : -1));
 
     const context_value = {
         currency,
@@ -207,12 +204,9 @@ const AccountLimits = ({
                                 </thead>
                                 <tbody>
                                     <AccountLimitsTurnoverLimitRow collection={commodities} />
-                                    <AccountLimitsTurnoverLimitRow
-                                        collection={forex_ordered}
-                                        title={localize('Forex')}
-                                    />
+                                    <AccountLimitsTurnoverLimitRow collection={forex_ordered} />
                                     <AccountLimitsTurnoverLimitRow collection={indices} />
-                                    <AccountLimitsTurnoverLimitRow collection={synthetic_index} />
+                                    <AccountLimitsTurnoverLimitRow collection={derived_ordered} />
                                 </tbody>
                             </table>
                             {/* We only show "Withdrawal Limits" on account-wide settings pages. */}

diff --git a/packages/account/src/Components/account-limits/account-limits.scss b/packages/account/src/Components/account-limits/account-limits.scss
@@ -52,6 +52,9 @@
             &--right {
                 text-align: right;
             }
+            &--submarket {
+                padding-left: 1rem;
+            }
         }
 
         &-wrapper {