Merge pull request #70 from rupato-deriv/Rupato/Fix-run-panel-ui

Rupato/BOT-2200/fix: run panel ui
deriv-com · Oct 3, 2024 · 36cf2ac · 36cf2ac
2 parents 3818039 + 2e8afc2
commit 36cf2ac
Show file tree

Hide file tree

Showing 67 changed files with 251 additions and 165 deletions.
diff --git a/src/components/bot-stopped.tsx b/src/components/bot-stopped.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
-import { LegacyClose1pxIcon } from '@deriv/quill-icons';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons/Legacy';
 import { Localize, localize } from '@deriv-com/translations';
 import Dialog from './shared_ui/dialog';
 

diff --git a/src/components/contract-card-loading/contract-card-running-bot.tsx b/src/components/contract-card-loading/contract-card-running-bot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Text from '@/components/shared_ui/text';
-import { LabelPairedLoaderMdBoldIcon } from '@deriv/quill-icons';
+import { LabelPairedLoaderMdBoldIcon } from '@deriv/quill-icons/LabelPaired';
 import { localize } from '@deriv-com/translations';
 
 export const message_running_bot = localize('Your bot is running and waiting for a signal to buy a contract.');

diff --git a/src/components/contract-result-overlay/contract-result-overlay.tsx b/src/components/contract-result-overlay/contract-result-overlay.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import Text from '@/components/shared_ui/text';
-import { LabelPairedCircleCheckMdRegularIcon, LabelPairedCircleXmarkMdRegularIcon } from '@deriv/quill-icons';
+import {
+    LabelPairedCircleCheckMdRegularIcon,
+    LabelPairedCircleXmarkMdRegularIcon,
+} from '@deriv/quill-icons/LabelPaired';
 import { Localize } from '@deriv-com/translations';
 
 type TContractResultOverlayProps = {

diff --git a/src/components/currency/currency-icon.tsx b/src/components/currency/currency-icon.tsx
@@ -1,60 +1,69 @@
 import { lazy, Suspense } from 'react';
 
 const CURRENCY_ICONS = {
-    aud: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyAudIcon }))),
-    bch: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyBchIcon }))),
-    btc: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyBtcIcon }))),
-    busd: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyBusdIcon }))),
-    dai: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyDaiIcon }))),
-    eth: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEthIcon }))),
-    eur: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEurIcon }))),
-    'eur-check': lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEurIcon }))),
-    eurs: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEursIcon }))),
-    eusdt: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdtIcon }))),
-    gbp: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyGbpIcon }))),
-    idk: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyIdkIcon }))),
-    ltc: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyLtcIcon }))),
-    pax: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyPaxIcon }))),
-    tusd: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyTusdIcon }))),
-    tusdt: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdtIcon }))),
-    unknown: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyPlaceholderIcon }))),
-    usd: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdIcon }))),
-    usdc: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdcIcon }))),
-    usdk: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdkIcon }))),
-    ust: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUsdtIcon }))),
-    virtual: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyDemoIcon }))),
-    xrp: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyXrpIcon }))),
-    algo: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyAlgoIcon }))),
-    avax: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyAvaxIcon }))),
-    bat: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyBatIcon }))),
-    bnb: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyBnbIcon }))),
-    dash: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyDashIcon }))),
-    doge: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyDogeIcon }))),
-    dot: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyDotIcon }))),
-    eos: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEosIcon }))),
-    etc: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyEtcIcon }))),
-    fil: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyFilIcon }))),
-    iota: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyIotaIcon }))),
-    link: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyLinkIcon }))),
-    matic: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyMaticIcon }))),
-    mkr: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyMkrIcon }))),
-    mcd: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyMultiCollateralDaiIcon }))),
-    neo: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyNeoIcon }))),
-    none: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyNoneIcon }))),
-    omg: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyOmgIcon }))),
-    p2p: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyP2PIcon }))),
-    scd: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencySingleCollateralDaiIcon }))),
-    sol: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencySolIcon }))),
-    terra: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyTerraIcon }))),
-    trx: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyTrxIcon }))),
-    uni: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyUniIcon }))),
-    xlm: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyXlmIcon }))),
-    xmr: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyXmrIcon }))),
-    xtz: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyXtzIcon }))),
-    zec: lazy(() => import('@deriv/quill-icons').then(module => ({ default: module.CurrencyZecIcon }))),
+    aud: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyAudIcon }))),
+    bch: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyBchIcon }))),
+    btc: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyBtcIcon }))),
+    busd: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyBusdIcon }))),
+    dai: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyDaiIcon }))),
+    eth: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEthIcon }))),
+    eur: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEurIcon }))),
+    'eur-check': lazy(() =>
+        import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEurIcon }))
+    ),
+    eurs: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEursIcon }))),
+    eusdt: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdtIcon }))),
+    gbp: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyGbpIcon }))),
+    idk: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyIdkIcon }))),
+    ltc: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyLtcIcon }))),
+    pax: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyPaxIcon }))),
+    tusd: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyTusdIcon }))),
+    tusdt: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdtIcon }))),
+    unknown: lazy(() =>
+        import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyPlaceholderIcon }))
+    ),
+    usd: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdIcon }))),
+    usdc: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdcIcon }))),
+    usdk: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdkIcon }))),
+    ust: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUsdtIcon }))),
+    virtual: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyDemoIcon }))),
+    xrp: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyXrpIcon }))),
+    algo: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyAlgoIcon }))),
+    avax: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyAvaxIcon }))),
+    bat: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyBatIcon }))),
+    bnb: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyBnbIcon }))),
+    dash: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyDashIcon }))),
+    doge: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyDogeIcon }))),
+    dot: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyDotIcon }))),
+    eos: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEosIcon }))),
+    etc: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyEtcIcon }))),
+    fil: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyFilIcon }))),
+    iota: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyIotaIcon }))),
+    link: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyLinkIcon }))),
+    matic: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyMaticIcon }))),
+    mkr: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyMkrIcon }))),
+    mcd: lazy(() =>
+        import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyMultiCollateralDaiIcon }))
+    ),
+    neo: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyNeoIcon }))),
+    none: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyNoneIcon }))),
+    omg: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyOmgIcon }))),
+    p2p: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyP2PIcon }))),
+    scd: lazy(() =>
+        import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencySingleCollateralDaiIcon }))
+    ),
+    sol: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencySolIcon }))),
+    terra: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyTerraIcon }))),
+    trx: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyTrxIcon }))),
+    uni: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyUniIcon }))),
+    xlm: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyXlmIcon }))),
+    xmr: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyXmrIcon }))),
+    xtz: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyXtzIcon }))),
+    zec: lazy(() => import('@deriv/quill-icons/Currencies').then(module => ({ default: module.CurrencyZecIcon }))),
 };
 
 export const CurrencyIcon = ({ currency, isVirtual }: { currency?: string; isVirtual?: boolean }) => {
+    console.log('test CurrencyIcon', currency, isVirtual);
     const Icon = isVirtual
         ? CURRENCY_ICONS.virtual
         : CURRENCY_ICONS[currency?.toLowerCase() as keyof typeof CURRENCY_ICONS] || CURRENCY_ICONS.unknown;

diff --git a/src/components/draggable/draggable.tsx b/src/components/draggable/draggable.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { LegacyClose1pxIcon } from '@deriv/quill-icons';
+import { LegacyClose1pxIcon } from '@deriv/quill-icons/Legacy';
 import {
     calculateHeight,
     calculateWidth,

diff --git a/src/components/flyout/flyout-block-group.tsx b/src/components/flyout/flyout-block-group.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { LabelPairedPlusLgFillIcon } from '@deriv/quill-icons';
+import { LabelPairedPlusLgFillIcon } from '@deriv/quill-icons/LabelPaired';
 import { Localize } from '@deriv-com/translations';
 import Button from '../shared_ui/button';
 import Text from '../shared_ui/text';

diff --git a/src/components/flyout/help-contents/flyout-help-base.tsx b/src/components/flyout/help-contents/flyout-help-base.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
 import { help_content_config, help_content_types } from '@/utils/help-content/help-content.config';
-import { LabelPairedArrowLeftCaptionRegularIcon } from '@deriv/quill-icons';
+import { LabelPairedArrowLeftCaptionRegularIcon } from '@deriv/quill-icons/LabelPaired';
 import { localize } from '@deriv-com/translations';
 import Button from '../../shared_ui/button';
 import Text from '../../shared_ui/text';

diff --git a/src/components/journal/journal-components/journal-item.tsx b/src/components/journal/journal-components/journal-item.tsx
@@ -1,8 +1,6 @@
 import classnames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
 import { MessageTypes } from '@/external/bot-skeleton';
 import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
-import { useNewRowTransition } from '@/hooks/useNewRowTransition';
 import { TJournalItemExtra, TJournalItemProps } from '../journal.types';
 import DateItem from './date-item';
 import FormatMessage from './format-message';
@@ -32,20 +30,21 @@ const getJournalItemContent = (
     }
 };
 
-const JournalItem = ({ row, is_new_row, measure }: TJournalItemProps) => {
-    const { in_prop } = useNewRowTransition(is_new_row);
+const JournalItem = ({ row, measure }: TJournalItemProps) => {
     const { date, time, message, message_type, className, extra } = row;
     const date_el = DateItem({ date, time });
 
     return (
-        <CSSTransition in={in_prop} timeout={500} classNames='list__animation' data-testid='mock-css-transition'>
-            <div className='journal__item' dir={isDbotRTL() ? 'rtl' : 'ltr'}>
-                <div className='journal__item-content'>
-                    {getJournalItemContent(message, message_type, className, extra as TJournalItemExtra, measure)}
+        <div>
+            <div className='list__animation' data-testid='mock-css-transition'>
+                <div className='journal__item' dir={isDbotRTL() ? 'rtl' : 'ltr'}>
+                    <div className='journal__item-content'>
+                        {getJournalItemContent(message, message_type, className, extra as TJournalItemExtra, measure)}
+                    </div>
+                    <div className='journal__text-datetime'>{date_el}</div>
                 </div>
-                <div className='journal__text-datetime'>{date_el}</div>
             </div>
-        </CSSTransition>
+        </div>
     );
 };
 

diff --git a/src/components/journal/journal-components/journal-tools.tsx b/src/components/journal/journal-components/journal-tools.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Download from '@/components/download';
 import Text from '@/components/shared_ui/text';
-import { LabelPairedBarsFilterCaptionFillIcon } from '@deriv/quill-icons';
+import { LabelPairedBarsFilterCaptionFillIcon } from '@deriv/quill-icons/LabelPaired';
 import { Localize } from '@deriv-com/translations';
 import { TJournalToolsProps } from '../journal.types';
 import FilterDialog from './filter-dialog';

diff --git a/src/components/journal/journal.scss b/src/components/journal/journal.scss
@@ -4,7 +4,29 @@
 /**
  * @define journal
  */
-.journal {
+@keyframes move-in {
+    0% {
+        transform: translateX(300px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.journal,
+.transactions {
+    .ReactVirtualized__Grid__innerScrollContainer {
+        & > :first-child,
+        :before,
+        :after {
+            box-sizing: border-box;
+            animation: move-in 0.4s ease-in forwards;
+        }
+    }
+
     &-empty {
         height: 100%;
         display: flex;

diff --git a/src/components/journal/journal.tsx b/src/components/journal/journal.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import Text from '@/components/shared_ui/text';
 import { contract_stages } from '@/constants/contract-stage';
 import { useStore } from '@/hooks/useStore';
-import { DerivLightEmptyCardboardBoxIcon } from '@deriv/quill-icons';
+import { DerivLightEmptyCardboardBoxIcon } from '@deriv/quill-icons/Illustration';
 import { Localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import DataList from '../data-list';

diff --git a/src/components/layout/footer/AccountLimits.tsx b/src/components/layout/footer/AccountLimits.tsx
@@ -1,5 +1,5 @@
 import { ACCOUNT_LIMITS } from '@/utils/constants';
-import { LegacyAccountLimitsIcon } from '@deriv/quill-icons';
+import { LegacyAccountLimitsIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/ChangeTheme.tsx b/src/components/layout/footer/ChangeTheme.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import useThemeSwitcher from '@/hooks/useThemeSwitcher';
-import { LegacyThemeDarkIcon, LegacyThemeLightIcon } from '@deriv/quill-icons';
+import { LegacyThemeDarkIcon, LegacyThemeLightIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/Deriv.tsx b/src/components/layout/footer/Deriv.tsx
@@ -1,5 +1,5 @@
 import { DERIV_COM } from '@/utils/constants';
-import { LegacyDerivIcon } from '@deriv/quill-icons';
+import { LegacyDerivIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/FullScreen.tsx b/src/components/layout/footer/FullScreen.tsx
@@ -1,5 +1,5 @@
 import useFullScreen from '@/hooks/useFullScreen';
-import { LegacyFullscreen1pxIcon } from '@deriv/quill-icons';
+import { LegacyFullscreen1pxIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/HelpCentre.tsx b/src/components/layout/footer/HelpCentre.tsx
@@ -1,5 +1,5 @@
 import { HELP_CENTRE } from '@/utils/constants';
-import { LegacyHelpCentreIcon } from '@deriv/quill-icons';
+import { LegacyHelpCentreIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/Livechat.tsx b/src/components/layout/footer/Livechat.tsx
@@ -1,4 +1,4 @@
-import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons';
+import { LegacyLiveChatOutlineIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/ResponsibleTrading.tsx b/src/components/layout/footer/ResponsibleTrading.tsx
@@ -1,5 +1,5 @@
 import { RESPONSIBLE } from '@/utils/constants';
-import { LegacyResponsibleTradingIcon } from '@deriv/quill-icons';
+import { LegacyResponsibleTradingIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 

diff --git a/src/components/layout/footer/WhatsApp.tsx b/src/components/layout/footer/WhatsApp.tsx
@@ -1,4 +1,4 @@
-import { LegacyWhatsappIcon } from '@deriv/quill-icons';
+import { LegacyWhatsappIcon } from '@deriv/quill-icons/Legacy';
 import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 import { URLConstants } from '@deriv-com/utils';