From 72b31e54b6eefbad9af725041b80427b19fa2d7b Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Tue, 20 Feb 2024 15:01:58 +0800
Subject: [PATCH 1/3] chore: replace clsx with tailwind-merge

---
 packages/tradershub/package.json                       |  1 +
 .../src/components/ActionScreen/ActionScreen.tsx       |  6 ++++--
 .../src/components/AppContainer/AppContainer.tsx       |  4 ++--
 .../src/components/ButtonGroup/ButtonGroup.tsx         |  4 ++--
 .../components/CFDSection/CFDHeading/CFDHeading.tsx    |  4 ++--
 .../components/DemoRealSwitcher/DemoRealSwitcher.tsx   | 10 +++++-----
 packages/tradershub/src/components/Dialog/Dialog.tsx   |  4 ++--
 .../tradershub/src/components/Dialog/DialogAction.tsx  |  4 ++--
 .../tradershub/src/components/Dialog/DialogHeader.tsx  |  4 ++--
 packages/tradershub/src/components/Modal/Modal.tsx     |  4 ++--
 .../tradershub/src/components/Modal/ModalContent.tsx   |  4 ++--
 .../tradershub/src/components/Modal/ModalFooter.tsx    |  4 ++--
 .../tradershub/src/components/Modal/ModalHeader.tsx    |  6 +++---
 .../src/components/ProgressBar/StepConnector.tsx       |  4 ++--
 .../tradershub/src/components/ProgressBar/Stepper.tsx  |  4 ++--
 .../src/components/StaticLink/StaticLink.tsx           |  4 ++--
 packages/tradershub/src/components/Tooltip/Tooltip.tsx |  6 +++---
 .../src/components/TotalAssets/TotalAssets.tsx         |  4 ++--
 .../TradingAccountsList/TradingAccountsList.tsx        |  4 ++--
 .../CompareAccountsCarouselButton.tsx                  |  4 ++--
 .../CompareAccountsPlatformLabel.tsx                   |  8 ++++----
 .../CFDCompareAccounts/InstrumentsLabelHighlighted.tsx |  4 ++--
 .../screens/DynamicLeverage/DynamicLeverageScreen.tsx  |  4 ++--
 .../Jurisdiction/JurisdictionCard/JurisdictionCard.tsx |  4 ++--
 .../cfd/screens/Jurisdiction/JurisdictionScreen.tsx    |  4 ++--
 .../screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx  |  4 ++--
 .../TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx  |  4 ++--
 .../AccountOpeningSuccessModal.tsx                     |  6 +++---
 packages/tradershub/src/modals/RegulationModal/Row.tsx |  4 ++--
 .../SignupWizardProvider/SignupWizardContext.tsx       |  2 +-
 .../src/screens/CurrencySelector/Currencies.tsx        |  8 ++------
 .../src/screens/CurrencySelector/CurrencyCard.tsx      |  4 ++--
 .../src/screens/PersonalDetails/Sections/Details.tsx   |  4 +---
 33 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json
index e603af77a5ed..9a1b7f8cf4eb 100644
--- a/packages/tradershub/package.json
+++ b/packages/tradershub/package.json
@@ -38,6 +38,7 @@
         "react-i18next": "^11.11.0",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
+        "tailwind-merge": "^1.14.0",
         "usehooks-ts": "^2.7.0",
         "yup": "^0.32.11"
     },
diff --git a/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx b/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx
index fae375e7275f..2b063771162f 100644
--- a/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx
+++ b/packages/tradershub/src/components/ActionScreen/ActionScreen.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps, isValidElement, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 
 type TActionScreenProps = {
@@ -29,7 +29,9 @@ const ActionScreen = ({
     titleSize = 'md',
 }: TActionScreenProps) => {
     return (
-        <div className={clsx('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}>
+        <div
+            className={twMerge('flex flex-col items-center justify-center gap-24 w-auto h-auto rounded-xs', className)}
+        >
             {icon}
             <div className='flex flex-col items-center justify-center gap-8'>
                 {title && (
diff --git a/packages/tradershub/src/components/AppContainer/AppContainer.tsx b/packages/tradershub/src/components/AppContainer/AppContainer.tsx
index 147bcff25bec..e4c3c5539476 100644
--- a/packages/tradershub/src/components/AppContainer/AppContainer.tsx
+++ b/packages/tradershub/src/components/AppContainer/AppContainer.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 type TAppContainerProps = {
     children: ReactNode;
@@ -13,7 +13,7 @@ type TAppContainerProps = {
  */
 
 const AppContainer = ({ children, className }: TAppContainerProps) => (
-    <div className={clsx('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
+    <div className={twMerge('font-sans max-w-[600px] lg:max-w-[1440px] mx-auto lg:py-50 lg:px-0 ', className)}>
         {children}
     </div>
 );
diff --git a/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx b/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx
index 799b669c3f34..289679ed65c7 100644
--- a/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/tradershub/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 type TButtonGroupProps = { className?: string };
 
@@ -13,7 +13,7 @@ type TButtonGroupProps = { className?: string };
  */
 
 const ButtonGroup: FC<PropsWithChildren<TButtonGroupProps>> = ({ children, className }) => (
-    <div className={clsx('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
+    <div className={twMerge('flex flex-col align-center gap-8 lg:flex-row ', className)}> {children}</div>
 );
 
 export default ButtonGroup;
diff --git a/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx b/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx
index 4907175219d5..d2b27bd2b147 100644
--- a/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx
+++ b/packages/tradershub/src/components/CFDSection/CFDHeading/CFDHeading.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { clsx } from 'clsx';
 import { useHistory } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 import { StaticLink, TitleDescriptionLoader } from '@/components';
 import { useRegulationFlags } from '@/hooks';
 import { useIsEuRegion } from '@deriv/api';
@@ -15,7 +15,7 @@ const CompareAccountsButton = ({ className }: { className?: string }) => {
 
     return (
         <Button
-            className={clsx('no-underline', className)}
+            className={twMerge('no-underline', className)}
             color='primary'
             onClick={() => history.push('/traders-hub/compare-accounts')}
             size='sm'
diff --git a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
index 72a4226332b8..acc5d91a5ebd 100644
--- a/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
+++ b/packages/tradershub/src/components/DemoRealSwitcher/DemoRealSwitcher.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useOnClickOutside } from 'usehooks-ts';
 import { useUIContext } from '@/components';
 import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -66,7 +66,7 @@ const DemoRealSwitcher = () => {
     return (
         <div className='relative inline-block w-auto ' ref={ref}>
             <Button
-                className={clsx(
+                className={twMerge(
                     'cursor-pointer w-full py-2 px-6 border-1 border-solid rounded-xs',
                     value === 'demo' ? 'border-status-light-information' : 'border-status-light-success '
                 )}
@@ -76,7 +76,7 @@ const DemoRealSwitcher = () => {
             >
                 <div className='flex items-center'>
                     <Text
-                        className={clsx(
+                        className={twMerge(
                             value === 'demo' ? 'text-status-light-information' : 'text-status-light-success'
                         )}
                         size='xs'
@@ -85,7 +85,7 @@ const DemoRealSwitcher = () => {
                         {label}
                     </Text>
                     <LabelPairedChevronDownSmRegularIcon
-                        className={clsx(
+                        className={twMerge(
                             'transform transition duration-200 ease-in-out ml-8',
                             value === 'demo' ? 'fill-status-light-information' : 'fill-status-light-success',
                             isDropdownOpen && '-rotate-180'
@@ -97,7 +97,7 @@ const DemoRealSwitcher = () => {
                 <div className='absolute z-10 items-center w-full top-28 rounded-xs bg-system-light-primary-background shadow-10'>
                     {accountTypes.map(account => (
                         <div
-                            className={clsx(
+                            className={twMerge(
                                 'cursor-pointer hover:bg-system-light-hover-background rounded-xs',
                                 account.value === value && 'bg-system-light-active-background'
                             )}
diff --git a/packages/tradershub/src/components/Dialog/Dialog.tsx b/packages/tradershub/src/components/Dialog/Dialog.tsx
index 94f5796c01c3..f9fa789d6520 100644
--- a/packages/tradershub/src/components/Dialog/Dialog.tsx
+++ b/packages/tradershub/src/components/Dialog/Dialog.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useEventListener } from 'usehooks-ts';
 import { Provider } from '@deriv/library';
 import DialogAction from './DialogAction';
@@ -55,7 +55,7 @@ const Dialog = ({ children, className, shouldPreventCloseOnEscape = false }: TDi
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col gap-24 mx-auto w-[auto] p-24 bg-system-light-primary-background rounded-default',
                 className
             )}
diff --git a/packages/tradershub/src/components/Dialog/DialogAction.tsx b/packages/tradershub/src/components/Dialog/DialogAction.tsx
index 297b47bb1c5c..2ba1d881a3aa 100644
--- a/packages/tradershub/src/components/Dialog/DialogAction.tsx
+++ b/packages/tradershub/src/components/Dialog/DialogAction.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { DialogActionClass, DialogActionProps } from './Dialog.classnames';
 
 /**
@@ -18,7 +18,7 @@ export interface TDialogActions extends DialogActionProps {
  * @returns {JSX.Element} The DialogAction component.
  */
 const DialogAction = ({ align, children, className }: TDialogActions) => (
-    <div className={clsx(DialogActionClass({ align }), className)}>{children}</div>
+    <div className={twMerge(DialogActionClass({ align }), className)}>{children}</div>
 );
 
 export default DialogAction;
diff --git a/packages/tradershub/src/components/Dialog/DialogHeader.tsx b/packages/tradershub/src/components/Dialog/DialogHeader.tsx
index f07a904ef116..6bb22fed48ad 100644
--- a/packages/tradershub/src/components/Dialog/DialogHeader.tsx
+++ b/packages/tradershub/src/components/Dialog/DialogHeader.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
 import { Provider } from '@deriv/library';
 import { Text } from '@deriv-com/ui';
@@ -27,7 +27,7 @@ const DialogHeader = ({ className, titleSize, hideCloseButton = false, title }:
     const { hide } = Provider.useModal();
 
     return (
-        <div className={clsx('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
+        <div className={twMerge('flex items-start', title ? 'justify-between' : 'justify-end', className)}>
             {title && (
                 <Text className='flex-1' size={titleSize} weight='bold'>
                     {title}
diff --git a/packages/tradershub/src/components/Modal/Modal.tsx b/packages/tradershub/src/components/Modal/Modal.tsx
index a309dba3e21f..4130b0d24baa 100644
--- a/packages/tradershub/src/components/Modal/Modal.tsx
+++ b/packages/tradershub/src/components/Modal/Modal.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import ModalContent from './ModalContent';
 import ModalFooter from './ModalFooter';
 import ModalHeader from './ModalHeader';
@@ -46,7 +46,7 @@ export type TModalComponents = PropsWithChildren<{
 const Modal = ({ children, className }: TModal) => {
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col h-[calc(100vh-40px)] w-screen bg-system-light-primary-background lg:mx-auto lg:h-full lg:w-full lg:rounded-default',
                 className
             )}
diff --git a/packages/tradershub/src/components/Modal/ModalContent.tsx b/packages/tradershub/src/components/Modal/ModalContent.tsx
index b92f508bd1f8..f9fe36f0e064 100644
--- a/packages/tradershub/src/components/Modal/ModalContent.tsx
+++ b/packages/tradershub/src/components/Modal/ModalContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TModalComponents } from './Modal';
 
 /**
@@ -10,7 +10,7 @@ import { TModalComponents } from './Modal';
  * @returns {JSX.Element} The ModalContent component.
  */
 const ModalContent = ({ children, className }: TModalComponents) => (
-    <div className={clsx('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
+    <div className={twMerge('flex-grow overflow-y-auto p-0 sm:p-8 lg:flex-none', className)}>{children}</div>
 );
 
 export default ModalContent;
diff --git a/packages/tradershub/src/components/Modal/ModalFooter.tsx b/packages/tradershub/src/components/Modal/ModalFooter.tsx
index 13e19e5cf929..e746f10be921 100644
--- a/packages/tradershub/src/components/Modal/ModalFooter.tsx
+++ b/packages/tradershub/src/components/Modal/ModalFooter.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TModalComponents } from './Modal';
 import { ModalFooterClass, TModalFooterClass } from './Modal.classnames';
 
@@ -20,7 +20,7 @@ type TModalFooter = TModalComponents & TModalFooterClass;
  * @returns {JSX.Element} The ModalFooter component.
  */
 const ModalFooter = ({ align = 'right', children, className }: TModalFooter) => (
-    <div className={clsx(ModalFooterClass({ align }), className)}>{children}</div>
+    <div className={twMerge(ModalFooterClass({ align }), className)}>{children}</div>
 );
 
 export default ModalFooter;
diff --git a/packages/tradershub/src/components/Modal/ModalHeader.tsx b/packages/tradershub/src/components/Modal/ModalHeader.tsx
index c4e6262a8b6d..6042c8e24852 100644
--- a/packages/tradershub/src/components/Modal/ModalHeader.tsx
+++ b/packages/tradershub/src/components/Modal/ModalHeader.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import CloseIcon from '@/assets/svgs/ic-close-dark.svg';
 import { Provider } from '@deriv/library';
 import { Text } from '@deriv-com/ui';
@@ -30,14 +30,14 @@ const ModalHeader = ({ className, hideCloseButton = false, title, titleClassName
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex items-center pl-16 pr-24 py-16 lg:px-24 border border-solid border-b-2 border-system-light-secondary-background w-full rounded-t-default',
                 title ? 'justify-between' : 'justify-end',
                 className
             )}
         >
             {title && (
-                <Text className={clsx('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
+                <Text className={twMerge('flex-1 font-sans', titleClassName)} size={titleSize} weight='bold'>
                     {title}
                 </Text>
             )}
diff --git a/packages/tradershub/src/components/ProgressBar/StepConnector.tsx b/packages/tradershub/src/components/ProgressBar/StepConnector.tsx
index 1fd03279aad1..8515faceb67b 100644
--- a/packages/tradershub/src/components/ProgressBar/StepConnector.tsx
+++ b/packages/tradershub/src/components/ProgressBar/StepConnector.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { desktopStyle, mobileStyle } from './ProgressBar.classnames';
 
 const StepConnector = ({ isActive }: { isActive?: boolean }) => (
     <div
         aria-current={isActive}
-        className={clsx(
+        className={twMerge(
             'via-solid-grey-default to-solid-grey-default from-solid-coral-700 from-50% via-50% transition-all duration-700 ease-out',
             mobileStyle.connector,
             desktopStyle.connector
diff --git a/packages/tradershub/src/components/ProgressBar/Stepper.tsx b/packages/tradershub/src/components/ProgressBar/Stepper.tsx
index d620bb543bbe..203957abe73b 100644
--- a/packages/tradershub/src/components/ProgressBar/Stepper.tsx
+++ b/packages/tradershub/src/components/ProgressBar/Stepper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { StandaloneCheckBoldIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { desktopStyle, stepperVariants } from './ProgressBar.classnames';
@@ -15,7 +15,7 @@ type TStepperProps = {
 };
 
 const Stepper = ({ isActive, isFilled = false, step, stepCount }: TStepperProps) => (
-    <div aria-current={isActive} className={clsx('relative items-center', desktopStyle.stepper)}>
+    <div aria-current={isActive} className={twMerge('relative items-center', desktopStyle.stepper)}>
         <div className='flex flex-col items-center self-center'>
             {stepCount !== 0 && <StepConnector isActive={isActive} />}
             <span className={stepperVariants({ isActive, isFilled })}>
diff --git a/packages/tradershub/src/components/StaticLink/StaticLink.tsx b/packages/tradershub/src/components/StaticLink/StaticLink.tsx
index b8c1587a6fc8..c96ea062445e 100644
--- a/packages/tradershub/src/components/StaticLink/StaticLink.tsx
+++ b/packages/tradershub/src/components/StaticLink/StaticLink.tsx
@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { getStaticUrl } from '../../helpers/urls';
 
 type StaticLinkProps = {
@@ -23,7 +23,7 @@ type StaticLinkProps = {
 const StaticLink = ({ children, className, href, staticUrl, onClick }: StaticLinkProps) => {
     return (
         <a
-            className={clsx('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
+            className={twMerge('underline text-brand-coral py-0 px-4 underline-offset-2', className)}
             href={href ?? (staticUrl ? getStaticUrl(staticUrl) : '#')}
             onClick={onClick}
             rel='noopener noreferrer'
diff --git a/packages/tradershub/src/components/Tooltip/Tooltip.tsx b/packages/tradershub/src/components/Tooltip/Tooltip.tsx
index 75f1cba39a3e..a35d30a1ec39 100644
--- a/packages/tradershub/src/components/Tooltip/Tooltip.tsx
+++ b/packages/tradershub/src/components/Tooltip/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 import { TooltipClass, TooltipPointerClass } from './Tooltip.classnames';
 
@@ -36,8 +36,8 @@ const Tooltip = ({ alignment = 'bottom', children, className, message }: TToolti
         <div className='relative w-max h-max group z-1'>
             <div className='border rounded-md border-neutral-12'>{children}</div>
 
-            <div className={clsx(TooltipClass({ alignment }), className)}>
-                <div className={clsx(TooltipPointerClass({ alignment }), className)} />
+            <div className={twMerge(TooltipClass({ alignment }), className)}>
+                <div className={twMerge(TooltipPointerClass({ alignment }), className)} />
 
                 <span className='p-4 rounded-md bg-system-light-active-background '>
                     <Text size='sm'>{message}</Text>
diff --git a/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx b/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx
index aa6f60b5166c..f7f0de93cb7c 100644
--- a/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx
+++ b/packages/tradershub/src/components/TotalAssets/TotalAssets.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { TotalAssetsLoader } from '@/components';
 import { useTotalAssets } from '@/hooks';
 import { useActiveTradingAccount } from '@deriv/api';
@@ -18,7 +18,7 @@ const TotalAssets = () => {
             {isDesktop && <Text size='sm'>Total assets</Text>}
             <Text
                 as='p'
-                className={clsx(
+                className={twMerge(
                     'underline text-status-light-information decoration-dotted decoration-system-light-less-prominent-text underline-offset-8 flex flex-col items-end text-4xl',
                     !activeTrading?.is_virtual && 'text-status-light-success'
                 )}
diff --git a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx b/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx
index b0a6cd0f6460..6badd1620226 100644
--- a/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx
+++ b/packages/tradershub/src/components/TradingAccountsList/TradingAccountsList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { IconToCurrencyMapper } from '@/constants';
 import { useRegulationFlags } from '@/hooks';
 import { useActiveTradingAccount, useAuthorize, useTradingAccountsList } from '@deriv/api';
@@ -22,7 +22,7 @@ const TradingAccountsList = () => {
                         const iconCurrency = account.currency ?? 'USD';
                         return (
                             <button
-                                className={clsx(
+                                className={twMerge(
                                     'flex items-center self-stretch py-8 px-16 gap-16 rounded-xs cursor-pointer hover:bg-system-light-active-background',
                                     activeAccount?.loginid === account.loginid && 'bg-system-light-active-background'
                                 )}
diff --git a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
index 8597b130b46b..73ffe8667cec 100644
--- a/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
+++ b/packages/tradershub/src/features/cfd/components/CompareAccountsCarousel/CompareAccountsCarouselButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { LabelPairedChevronLeftMdRegularIcon, LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
 import { Button } from '@deriv-com/ui';
 
@@ -11,7 +11,7 @@ type TPrevNextButtonProps = {
 
 const CFDCompareAccountsCarouselButton = ({ enabled, isNext = false, onClick }: TPrevNextButtonProps) => (
     <Button
-        className={clsx(
+        className={twMerge(
             'bg-system-light-primary-background z-10 absolute lg:flex items-center justify-center top-1/2 cursor-pointer w-40 h-40 rounded-[50%] border-solid-coral-100 border-solid border-1 disabled:opacity-8 disabled:hidden',
             isNext && 'right-16',
             !isNext && 'left-16'
diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx
index 59ff3ce1349e..59dfc81e417b 100644
--- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx
+++ b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/CompareAccountsPlatformLabel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { TPlatforms } from '@/types';
 import { Text } from '@deriv-com/ui';
-import { TPlatforms } from '../../../../types';
 import {
     CompareAccountsPlatformLabelClass,
     CompareAccountsPlatformLabelTextColorClass,
@@ -20,14 +20,14 @@ const CompareAccountsPlatformLabel = ({ platform }: TCompareAccountsPlatformLabe
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 CompareAccountsPlatformLabelClass({
                     background: platformType,
                 } as unknown as TCompareAccountsPlatformLabelClassProps)
             )}
         >
             <Text
-                className={clsx(
+                className={twMerge(
                     CompareAccountsPlatformLabelTextColorClass({
                         label: platformType,
                     } as unknown as TCompareAccountsPlatformLabelTextClassProps)
diff --git a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx
index fef98ebe6880..1b8715676672 100644
--- a/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx
+++ b/packages/tradershub/src/features/cfd/screens/CFDCompareAccounts/InstrumentsLabelHighlighted.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { THooks, TPlatforms } from '../../../../types';
 import { getHighlightedIconLabel } from './CompareAccountsConfig';
 import InstrumentsIconWithLabel from './InstrumentsIconWithLabel';
@@ -23,7 +23,7 @@ const InstrumentsLabelHighlighted = ({
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col rounded-24 pt-[70px] px-[15px] pb-0 lg:pt-40 lg:px-18 lg:pb-0',
                 isDemo && 'pt-16'
             )}
diff --git a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx
index 5e76f89feb3d..ba7d64b05df7 100644
--- a/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx
+++ b/packages/tradershub/src/features/cfd/screens/DynamicLeverage/DynamicLeverageScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useDynamicLeverageModalState } from '@cfd/components';
 import { PlatformDetails } from '@cfd/constants';
 import { useDynamicLeverage } from '@deriv/api';
@@ -14,7 +14,7 @@ const DynamicLeverageScreen = () => {
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col gap-24 mt-16 mx-24 mb-24 sm:mx-[128px] sm:mb-0 absolute top-0 [transform:rotateY(180deg)] transition-transform ease-in duration-[0.6s] backface-hidden bg-system-light-primary-background',
                 isDynamicLeverageVisible && '[transform:rotateY(0deg)]'
             )}
diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx
index 6e1eaa96df6e..8b3c68e9f1d7 100644
--- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx
+++ b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionCard/JurisdictionCard.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, useMemo, useState } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import DocumentsIcon from '@/assets/svgs/ic-documents.svg';
 import IdCardIcon from '@/assets/svgs/ic-id-card.svg';
 import SelfieIcon from '@/assets/svgs/ic-selfie.svg';
@@ -122,7 +122,7 @@ const JurisdictionCard = ({ isAdded = false, isSelected = false, jurisdiction, o
 
     return (
         <div
-            className={clsx(JurisdictionCardClass({ isAdded, isFlipped, isSelected }))}
+            className={twMerge(JurisdictionCardClass({ isAdded, isFlipped, isSelected }))}
             onClick={() => {
                 !isAdded && onSelect(jurisdiction);
             }}
diff --git a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
index 0b36edbee404..146561b1876b 100644
--- a/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
+++ b/packages/tradershub/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useEffect, useMemo } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useDynamicLeverageModalState } from '@cfd/components';
 import { Jurisdiction } from '@cfd/constants';
 import { useAvailableMT5Accounts, useMT5AccountsList } from '@deriv/api';
@@ -47,7 +47,7 @@ const JurisdictionScreen = ({
 
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex flex-col h-auto w-[85vw] items-center justify-center my-auto mx-30 sm:h-[75vh] transition-all ease-in duration-[0.6s]',
                 isDynamicLeverageVisible &&
                     '[transform:rotateY(-180deg)] h-[700px] opacity-50 bg-system-light-primary-background'
diff --git a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx b/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx
index bcb5ea11176c..02b8c2a5f0e7 100644
--- a/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx
+++ b/packages/tradershub/src/features/cfd/screens/MT5AccountTypeCard/MT5AccountTypeCard.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 
 type TMT5AccountTypeCardProps = {
@@ -13,7 +13,7 @@ type TMT5AccountTypeCardProps = {
 const MT5AccountTypeCard = ({ description, icon, isSelected, onClick, title }: TMT5AccountTypeCardProps) => {
     return (
         <button
-            className={clsx(
+            className={twMerge(
                 'cursor-pointer',
                 isSelected &&
                     'rounded-16 border-brand-blue bg-system-light-primary-background border-solid border-1 rounded-lg'
diff --git a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
index fe0c79eb4e51..380c7e874df9 100644
--- a/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
+++ b/packages/tradershub/src/features/cfd/screens/TradeScreen/TradeDetailsItem/TradeDetailsItem.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { useHover } from 'usehooks-ts';
 import EditIcon from '@/assets/svgs/ic-edit.svg';
 import { Clipboard, Tooltip } from '@/components';
@@ -21,7 +21,7 @@ const TradeDetailsItem = ({ className, label, value, variant = 'clipboard' }: TT
     const { show } = Provider.useModal();
     return (
         <div
-            className={clsx(
+            className={twMerge(
                 'flex items-center h-32 justify-between bg-system-light-secondary-background p-5 pl-8',
                 className
             )}
diff --git a/packages/tradershub/src/flows/RealAccountSIgnup/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx b/packages/tradershub/src/flows/RealAccountSIgnup/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx
index 952ef26daf33..c8605e9c41d9 100644
--- a/packages/tradershub/src/flows/RealAccountSIgnup/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx
+++ b/packages/tradershub/src/flows/RealAccountSIgnup/AccountOpeningSuccessModal/AccountOpeningSuccessModal.tsx
@@ -65,9 +65,9 @@ const AccountOpeningSuccessModal = () => {
                 }
                 icon={<SelectedCurrencyIcon />}
                 renderButtons={() => (
-                    <ButtonGroup className='flex-col lg:flex-row sm:w-full'>
+                    <ButtonGroup className='flex-row sm:w-full'>
                         <Button
-                            className='py-18'
+                            // className='py-18'
                             color='black'
                             isFullWidth={!isDesktop}
                             onClick={handleClose}
@@ -76,7 +76,7 @@ const AccountOpeningSuccessModal = () => {
                         >
                             Maybe later
                         </Button>
-                        <Button className='py-18' isFullWidth={!isDesktop} onClick={handleNavigateToDeposit} size='md'>
+                        <Button isFullWidth={!isDesktop} onClick={handleNavigateToDeposit} size='md'>
                             Deposit
                         </Button>
                     </ButtonGroup>
diff --git a/packages/tradershub/src/modals/RegulationModal/Row.tsx b/packages/tradershub/src/modals/RegulationModal/Row.tsx
index ccfbd7a12524..157b8884e7a9 100644
--- a/packages/tradershub/src/modals/RegulationModal/Row.tsx
+++ b/packages/tradershub/src/modals/RegulationModal/Row.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { Text } from '@deriv-com/ui';
 import { TRegulatorsContentProps, TRowItem } from '../../constants/regulators-modal-content';
 
@@ -8,7 +8,7 @@ type TRowProps = TRegulatorsContentProps & {
 };
 
 const Row = ({ attribute, content, id, idx }: TRowProps) => (
-    <tr className={clsx('min-h-40', idx === 0 && 'bg-brand-pink-light')} key={id}>
+    <tr className={twMerge('min-h-40', idx === 0 && 'bg-brand-pink-light')} key={id}>
         <td
             className={`sticky z-10 align-middle border-solid start-0 py-10 px-8 border-system-light-active-background border-x-1 border-b-1 ${
                 idx === 0 ? 'bg-brand-pink-light' : 'bg-system-light-primary-background'
diff --git a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx b/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
index 8995192f7e8f..67170035c68b 100644
--- a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
+++ b/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
@@ -60,7 +60,7 @@ export const useSignupWizardContext = () => {
  * @param {React.ReactNode} children - The content to be wrapped.
  */
 export const SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
-    const [isWizardOpen, setIsWizardOpen] = useState(false);
+    const [isWizardOpen, setIsWizardOpen] = useState(true);
     const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
     const [currentStep, helpers] = useStep(4);
     const [state, dispatch] = useReducer(valuesReducer, {
diff --git a/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx b/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx
index 734d46897fcc..25b8e4b2bab5 100644
--- a/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx
+++ b/packages/tradershub/src/screens/CurrencySelector/Currencies.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { InlineMessage, Text } from '@deriv-com/ui';
 import { CURRENCY_TYPES, getCurrencyConfig } from '../../helpers/currencyConfig';
 import CurrencyCard from './CurrencyCard';
@@ -29,11 +29,7 @@ const Currencies = ({ type }: TCurrencies) => {
                     Please note that you can only have 1 fiat account.
                 </InlineMessage>
             )}
-            <div
-                className={clsx('flex flex-wrap justify-start', {
-                    'lg:justify-center': currencies.length < 4,
-                })}
-            >
+            <div className={twMerge('flex flex-wrap justify-start', currencies.length < 4 ? 'lg:justify-center' : '')}>
                 {currencies.map(currency => (
                     <CurrencyCard {...currency} key={currency.id} />
                 ))}
diff --git a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx b/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
index 0d5aac2c0347..b62f64102752 100644
--- a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
+++ b/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { clsx } from 'clsx';
 import { useFormikContext } from 'formik';
+import { twMerge } from 'tailwind-merge';
 import { StandaloneCircleInfoRegularIcon as CircleInfoIcon } from '@deriv/quill-icons';
 import { Text } from '@deriv-com/ui';
 import { getCurrencyConfig } from '../../helpers/currencyConfig';
@@ -24,7 +24,7 @@ const CurrencyCard = ({ icon: Icon, id, info, title }: TCurrencyCard) => {
     return (
         <div className='relative flex justify-center w-1/2 my-8 lg:w-1/4'>
             <button
-                className={clsx(
+                className={twMerge(
                     `w-10/12 rounded-default items-center py-22 hover:cursor-pointer ${
                         isSelected
                             ? 'outline outline-2 outline-status-light-success'
diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
index 018bfdc8ea5d..a2d0a7d67838 100644
--- a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
+++ b/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
@@ -91,9 +91,7 @@ const Details = () => {
                         </Suspense>
                     </div>
                 </div>
-                <div className='mt-16'>
-                    <DetailsConfirmation />
-                </div>
+                <div className='mt-16'>{/* <DetailsConfirmation /> */}</div>
             </div>
         </Fragment>
     );

From f45dc5c590085bcff7fcf9ec3a8305eec8e8ce07 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Tue, 20 Feb 2024 15:15:30 +0800
Subject: [PATCH 2/3] chore: unkomen

---
 .../src/screens/PersonalDetails/Sections/Details.tsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx b/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
index a2d0a7d67838..018bfdc8ea5d 100644
--- a/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
+++ b/packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx
@@ -91,7 +91,9 @@ const Details = () => {
                         </Suspense>
                     </div>
                 </div>
-                <div className='mt-16'>{/* <DetailsConfirmation /> */}</div>
+                <div className='mt-16'>
+                    <DetailsConfirmation />
+                </div>
             </div>
         </Fragment>
     );

From 849431acf375cbfa6367398e08e0e2ff459af6a6 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Tue, 20 Feb 2024 15:21:33 +0800
Subject: [PATCH 3/3] chore: untrue

---
 .../src/providers/SignupWizardProvider/SignupWizardContext.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx b/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
index 67170035c68b..8995192f7e8f 100644
--- a/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
+++ b/packages/tradershub/src/providers/SignupWizardProvider/SignupWizardContext.tsx
@@ -60,7 +60,7 @@ export const useSignupWizardContext = () => {
  * @param {React.ReactNode} children - The content to be wrapped.
  */
 export const SignupWizardProvider = ({ children }: TSignupWizardProvider) => {
-    const [isWizardOpen, setIsWizardOpen] = useState(true);
+    const [isWizardOpen, setIsWizardOpen] = useState(false);
     const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
     const [currentStep, helpers] = useStep(4);
     const [state, dispatch] = useReducer(valuesReducer, {