From 612a122aa87d69fda70255369a3a999739b045ec Mon Sep 17 00:00:00 2001
From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
Date: Wed, 27 Sep 2023 09:46:12 +0800
Subject: [PATCH] thisyahlen/chore: enforce camelcase (#10308)

* chore: enforce camelcase

* chore: fix circle ci and leftovers
---
 packages/wallets/.eslintrc.js                 |  2 +-
 .../CTraderList/CTraderList.tsx               |  6 +--
 .../OtherCFDPlatformsList.tsx                 |  4 +-
 .../InlineMessage/InlineMessage.tsx           | 35 +++++++-------
 .../OptionsAndMultipliersListing.tsx          | 18 +++----
 .../components/ProgressBar/ProgressBar.tsx    | 16 +++----
 .../wallets/src/components/Tabs/TabList.tsx   |  4 +-
 .../wallets/src/components/Tabs/TabPanels.tsx |  4 +-
 packages/wallets/src/components/Tabs/Tabs.tsx |  6 +--
 .../WalletAddMoreCurrencyIcon.tsx             |  4 +-
 .../src/components/WalletCard/WalletCard.tsx  | 24 +++++-----
 .../WalletCashierHeader.tsx                   | 13 +++--
 .../WalletClipboard/WalletClipboard.tsx       | 16 +++----
 .../WalletCurrencyCard/WalletCurrencyCard.tsx |  2 +-
 .../WalletDepositCryptoAddress.tsx            | 16 +++----
 .../WalletDepositCryptoCurrencyDetails.tsx    |  4 +-
 .../WalletDepositCryptoDisclaimers.tsx        | 25 +++++-----
 .../WalletDepositFiat/WalletDepositFiat.tsx   | 10 ++--
 .../WalletGradientBackground.tsx              | 12 ++---
 .../WalletListCardActions.tsx                 |  7 +--
 .../WalletListCardBadge.tsx                   |  8 ++--
 .../WalletTransferFormAccountCard.tsx         |  2 +-
 .../WalletTransferFormDropdown.tsx            |  2 +-
 .../WalletTransferFormInputField.tsx          |  2 +-
 .../WalletsAddMoreCard/WalletsAddMoreCard.tsx | 12 +++--
 .../WalletsAddMoreCardBanner.tsx              | 14 ++++--
 .../WalletsAddMoreCardContent.tsx             | 14 +++---
 .../WalletsCarouselContent.tsx                | 42 ++++++++--------
 .../wallets/src/hooks/useInputATMFormatter.ts | 48 +++++++++----------
 .../src/hooks/useInputDecimalFormatter.ts     | 46 +++++++++---------
 30 files changed, 208 insertions(+), 210 deletions(-)

diff --git a/packages/wallets/.eslintrc.js b/packages/wallets/.eslintrc.js
index 7e4d101720e5..5b49571e9965 100644
--- a/packages/wallets/.eslintrc.js
+++ b/packages/wallets/.eslintrc.js
@@ -52,7 +52,7 @@ module.exports = {
         'sort-keys': 'warn',
         'typescript-sort-keys/interface': 'warn',
         'typescript-sort-keys/string-enum': 'warn',
-        camelcase: 'warn',
+        camelcase: 'error',
     },
     overrides: [
         {
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.tsx b/packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.tsx
index 84a79ea13190..117354e2a800 100644
--- a/packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.tsx
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.tsx
@@ -4,11 +4,11 @@ import { SecondaryActionButton } from '../../SecondaryActionButton';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './CTraderList.scss';
 
-const ctrader_mapper = [
+const ctraderMapper = [
     {
-        title: 'Deriv cTrader',
         description: 'This account offers CFDs on a feature-rich trading platform.',
         icon: <CTrader />,
+        title: 'Deriv cTrader',
     },
 ];
 
@@ -19,7 +19,7 @@ const CTraderList: React.FC = () => {
                 <h1>Deriv cTrader</h1>
             </div>
             <div className='wallets-ctrader__content'>
-                {ctrader_mapper.map(account => (
+                {ctraderMapper.map(account => (
                     <TradingAccountCard
                         {...account}
                         key={`ctrader--${account.title}`}
diff --git a/packages/wallets/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx b/packages/wallets/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
index b942e49e6b78..83a5dc2c4437 100644
--- a/packages/wallets/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
+++ b/packages/wallets/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
@@ -6,7 +6,7 @@ import './OtherCFDPlatformsList.scss';
 
 const OtherCFDPlatformsList: React.FC = () => {
     const { data } = useDxtradeAccountsList();
-    const has_dxtrade_account = !!data?.length;
+    const hasDxtradeAccount = !!data?.length;
 
     return (
         <div className='wallets-other-cfd'>
@@ -14,7 +14,7 @@ const OtherCFDPlatformsList: React.FC = () => {
                 <h1>Other CFD Platforms</h1>
             </div>
             <div className='wallets-other-cfd__content'>
-                {has_dxtrade_account ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />}
+                {hasDxtradeAccount ? <AddedDxtradeAccountsList /> : <AvailableDxtradeAccountsList />}
             </div>
         </div>
     );
diff --git a/packages/wallets/src/components/InlineMessage/InlineMessage.tsx b/packages/wallets/src/components/InlineMessage/InlineMessage.tsx
index 82ebe0761f18..ee09201a06a6 100644
--- a/packages/wallets/src/components/InlineMessage/InlineMessage.tsx
+++ b/packages/wallets/src/components/InlineMessage/InlineMessage.tsx
@@ -6,42 +6,39 @@ import AlertInfo from '../../public/images/alert-info.svg';
 import Warning from '../../public/images/warning.svg';
 import './InlineMessage.scss';
 
-const type_icon_mapper = {
-    warning: Warning,
-    information: AlertInfo,
+const typeIconMapper = {
     announcement: AlertAnnounce,
     error: AlertDanger,
+    information: AlertInfo,
+    warning: Warning,
 };
 
 type TProps = RequireAtLeastOne<{ children: React.ReactNode; message: React.ReactNode; title: React.ReactNode }> & {
     size?: 'lg' | 'md' | 'sm' | 'xs';
-    type?: keyof typeof type_icon_mapper;
+    type?: keyof typeof typeIconMapper;
 };
 
 const InlineMessage: React.FC<TProps> = ({ children, message, size = 'xs', title, type = 'warning' }) => {
-    const { is_mobile } = useDevice();
-    const Icon = type_icon_mapper[type];
-    const icon_size = size === 'lg' && !is_mobile ? 24 : 16;
+    const { isMobile } = useDevice();
+    const Icon = typeIconMapper[type];
+    const iconSize = size === 'lg' && !isMobile ? 24 : 16;
 
-    const size_to_font_size_mapper: Record<string, string> = useMemo(
+    const sizeToFontSizeMapper: Record<string, string> = useMemo(
         () => ({
-            xs: is_mobile ? '8px' : '10px',
-            sm: is_mobile ? '10px' : '12px',
-            md: is_mobile ? '12px' : '14px',
-            lg: is_mobile ? '14px' : '16px',
+            lg: isMobile ? '14px' : '16px',
+            md: isMobile ? '12px' : '14px',
+            sm: isMobile ? '10px' : '12px',
+            xs: isMobile ? '8px' : '10px',
         }),
-        [is_mobile]
+        [isMobile]
     );
 
-    const font_size = size_to_font_size_mapper[size];
+    const fontSize = sizeToFontSizeMapper[size];
 
     return (
         <div className={`wallets-inline-message wallets-inline-message__${type} wallets-inline-message__${size} `}>
-            <Icon className={`wallets-inline-message__icon__${size}`} height={icon_size} width={icon_size} />
-            <span
-                className={`wallets-inline-message__messages inline-message__messages__${size}`}
-                style={{ fontSize: font_size }}
-            >
+            <Icon className={`wallets-inline-message__icon__${size}`} height={iconSize} width={iconSize} />
+            <span className={`wallets-inline-message__messages inline-message__messages__${size}`} style={{ fontSize }}>
                 {title && <strong>{title}</strong>}
                 {message && <span>{message}</span>}
                 {children}
diff --git a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
index f64350769916..841c816822c7 100644
--- a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
+++ b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -9,41 +9,41 @@ import { PrimaryActionButton } from '../PrimaryActionButton';
 import { TradingAccountCard } from '../TradingAccountCard';
 import './OptionsAndMultipliersListing.scss';
 
-const options_and_multipliers = [
+const optionsAndMultipliers = [
     {
-        title: 'Deriv Trader',
         description: 'Options and multipliers trading platform.',
         icon: <IcAppstoreDerivTrader />,
+        title: 'Deriv Trader',
     },
     {
-        title: 'Deriv Bot',
         description: 'Automate your trading, no coding needed.',
         icon: <IcAppstoreDerivBot />,
+        title: 'Deriv Bot',
     },
     {
-        title: 'SmartTrader',
         description: 'Our legacy options trading platform.',
         icon: <IcAppstoreSmartTrader />,
+        title: 'SmartTrader',
     },
     {
-        title: 'Binary Bot',
         description: 'Our legacy automated trading platform.',
         icon: <IcAppstoreBinaryBot />,
+        title: 'Binary Bot',
     },
     {
-        title: 'Deriv GO',
         description: 'Trade on the go with our mobile app.',
         icon: <IcAppstoreDerivGo />,
+        title: 'Deriv GO',
     },
 ];
 
 const OptionsAndMultipliersListing = () => {
-    const { is_mobile } = useDevice();
+    const { isMobile } = useDevice();
 
     return (
         <div className='wallets-options-and-multipliers-listing'>
             <section className='wallets-options-and-multipliers-listing__header'>
-                {!is_mobile && (
+                {!isMobile && (
                     <div className='wallets-options-and-multipliers-listing__header-title'>
                         {/* TODO: Localization needed*/}
                         <h1>Options & Multipliers</h1>
@@ -64,7 +64,7 @@ const OptionsAndMultipliersListing = () => {
                 </div>
             </section>
             <div className='wallets-options-and-multipliers-listing__content'>
-                {options_and_multipliers.map(account => (
+                {optionsAndMultipliers.map(account => (
                     <TradingAccountCard
                         {...account}
                         key={`trading-account-card-${account.title}`}
diff --git a/packages/wallets/src/components/ProgressBar/ProgressBar.tsx b/packages/wallets/src/components/ProgressBar/ProgressBar.tsx
index e2c978756b38..0d74edec8768 100644
--- a/packages/wallets/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/wallets/src/components/ProgressBar/ProgressBar.tsx
@@ -2,25 +2,25 @@ import React from 'react';
 import './ProgressBar.scss';
 
 type TProps = {
-    active_index: number;
+    activeIndex: number;
     indexes: string[];
-    is_transition?: boolean;
+    isTransition?: boolean;
     setActiveIndex: (index: string) => void;
 };
 
-const ProgressBar: React.FC<TProps> = ({ active_index, indexes, is_transition = true, setActiveIndex }) => {
+const ProgressBar: React.FC<TProps> = ({ activeIndex, indexes, isTransition = true, setActiveIndex }) => {
     return (
         <div className='wallets-progress-bar'>
             {indexes.map((value, idx) => {
-                const current_index = idx + 1;
-                const is_active = current_index === active_index;
+                const currentIndex = idx + 1;
+                const isActive = currentIndex === activeIndex;
 
-                const bar_classname = is_active ? 'wallets-progress-bar-active' : 'wallets-progress-bar-inactive';
+                const barClassname = isActive ? 'wallets-progress-bar-active' : 'wallets-progress-bar-inactive';
 
                 return (
                     <div
-                        className={`${bar_classname} ${is_transition ? 'wallets-progress-bar-transition' : ''}`}
-                        key={`progress-bar-${current_index}`}
+                        className={`${barClassname} ${isTransition ? 'wallets-progress-bar-transition' : ''}`}
+                        key={`progress-bar-${currentIndex}`}
                         onClick={() => setActiveIndex(value)}
                     />
                 );
diff --git a/packages/wallets/src/components/Tabs/TabList.tsx b/packages/wallets/src/components/Tabs/TabList.tsx
index 364768736e43..d9b2c67c2a04 100644
--- a/packages/wallets/src/components/Tabs/TabList.tsx
+++ b/packages/wallets/src/components/Tabs/TabList.tsx
@@ -7,14 +7,14 @@ type TTabListProps = {
 };
 
 export const TabList = ({ list }: TTabListProps) => {
-    const { active_tab_index, setActiveTabIndex } = useTabs();
+    const { activeTabIndex, setActiveTabIndex } = useTabs();
 
     return (
         <div className='wallets-tabs-list' data-list-count={list.length}>
             {list.map((tab, i) => (
                 <div
                     className={`wallets-tabs-list-item wallets-tabs-list-item--${
-                        i === active_tab_index ? 'active' : 'disabled'
+                        i === activeTabIndex ? 'active' : 'disabled'
                     }`}
                     key={i}
                     onClick={() => setActiveTabIndex(i)}
diff --git a/packages/wallets/src/components/Tabs/TabPanels.tsx b/packages/wallets/src/components/Tabs/TabPanels.tsx
index d2f0bf51ed63..3921d940b52d 100644
--- a/packages/wallets/src/components/Tabs/TabPanels.tsx
+++ b/packages/wallets/src/components/Tabs/TabPanels.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { useTabs } from './Tabs';
 
 const TabPanels = ({ children }: React.PropsWithChildren<unknown>) => {
-    const { active_tab_index } = useTabs();
+    const { activeTabIndex } = useTabs();
 
     return (
         <div>
             {React.Children.map(children, (child, index) => {
-                if (index !== active_tab_index) return undefined;
+                if (index !== activeTabIndex) return undefined;
 
                 return child;
             })}
diff --git a/packages/wallets/src/components/Tabs/Tabs.tsx b/packages/wallets/src/components/Tabs/Tabs.tsx
index 62d0b1b331f2..af88c2b58fc1 100644
--- a/packages/wallets/src/components/Tabs/Tabs.tsx
+++ b/packages/wallets/src/components/Tabs/Tabs.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 type TTabContext = {
-    active_tab_index: number;
+    activeTabIndex: number;
     setActiveTabIndex: React.Dispatch<React.SetStateAction<number>>;
 };
 
@@ -22,10 +22,10 @@ type TTabsProps = {
 };
 
 export const Tabs = ({ children, className }: React.PropsWithChildren<TTabsProps>) => {
-    const [active_tab_index, setActiveTabIndex] = React.useState(0);
+    const [activeTabIndex, setActiveTabIndex] = React.useState(0);
 
     return (
-        <TabsContext.Provider value={{ active_tab_index, setActiveTabIndex }}>
+        <TabsContext.Provider value={{ activeTabIndex, setActiveTabIndex }}>
             <div className={className}>{children}</div>
         </TabsContext.Provider>
     );
diff --git a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx
index 8ed6549b2d17..f5312dad6e43 100644
--- a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx
+++ b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx
@@ -15,11 +15,11 @@ const currencies = {
     eth: ETHIcon,
     eur: EURIcon,
     eusdt: TetherIcon,
+    gbp: GBPIcon,
     ltc: LTCIcon,
+    tusdt: TetherIcon,
     usd: USDIcon,
-    gbp: GBPIcon,
     usdc: USDCIcon,
-    tusdt: TetherIcon,
     ust: TetherIcon,
 };
 
diff --git a/packages/wallets/src/components/WalletCard/WalletCard.tsx b/packages/wallets/src/components/WalletCard/WalletCard.tsx
index 407779ab4ff9..971cd68ab9e5 100644
--- a/packages/wallets/src/components/WalletCard/WalletCard.tsx
+++ b/packages/wallets/src/components/WalletCard/WalletCard.tsx
@@ -10,31 +10,31 @@ type TProps = {
 };
 
 const WalletCard: React.FC<TProps> = ({ account }) => {
-    const { currency, currency_config, display_balance, is_virtual, landing_company_name, wallet_currency_type } =
-        account || {};
-
     return (
         <div className='wallets-card'>
             <WalletGradientBackground
-                currency={currency_config?.display_code || 'USD'}
+                currency={account?.currency_config?.display_code || 'USD'}
                 device='mobile'
-                has_shine
-                is_demo={is_virtual}
+                hasShine
+                isDemo={account?.is_virtual}
                 type='card'
             >
                 <div className='wallets-card__details'>
                     <div className='wallets-card__details__top'>
-                        <WalletCardIcon type={wallet_currency_type} />
+                        <WalletCardIcon type={account?.wallet_currency_type} />
                         <div className='wallets-card__details-landing_company'>
-                            {landing_company_name && (
-                                <WalletListCardBadge is_demo={account?.is_virtual} label={landing_company_name} />
+                            {account?.landing_company_name && (
+                                <WalletListCardBadge
+                                    isDemo={account?.is_virtual}
+                                    label={account?.landing_company_name}
+                                />
                             )}
                         </div>
                     </div>
-                    <div className={`wallets-card__details__bottom${is_virtual ? '--virtual' : ''}`}>
-                        <p className='wallets-card__details__bottom__currency'>{currency} Wallet</p>
+                    <div className={`wallets-card__details__bottom${account?.is_virtual ? '--virtual' : ''}`}>
+                        <p className='wallets-card__details__bottom__currency'>{account?.currency} Wallet</p>
                         <p className='wallets-card__details__bottom__balance'>
-                            {display_balance} {currency}
+                            {account?.display_balance} {account?.currency}
                         </p>
                     </div>
                 </div>
diff --git a/packages/wallets/src/components/WalletCashierHeader/WalletCashierHeader.tsx b/packages/wallets/src/components/WalletCashierHeader/WalletCashierHeader.tsx
index 6ed44e1e0aeb..35fc37d1aea5 100644
--- a/packages/wallets/src/components/WalletCashierHeader/WalletCashierHeader.tsx
+++ b/packages/wallets/src/components/WalletCashierHeader/WalletCashierHeader.tsx
@@ -14,12 +14,11 @@ const WalletCashierHeader = () => {
     const { data } = useActiveWalletAccount();
     const { isMobile } = useDevice();
     const history = useHistory();
-    const { currency, currency_config, display_balance, landing_company_name, wallet_currency_type } = data || {};
     const location = useLocation();
 
     return (
         <WalletGradientBackground
-            currency={currency_config?.display_code || 'USD'}
+            currency={data?.currency_config?.display_code || 'USD'}
             device={isMobile ? 'mobile' : 'desktop'}
             theme='light'
             type='header'
@@ -29,16 +28,16 @@ const WalletCashierHeader = () => {
                     <div className='wallets-cashier-header__info__top-left'>
                         <div className='wallets-cashier-header__info__top-left__details'>
                             <h1 className='wallets-cashier-header__info__top-left__details__title'>
-                                {currency} Wallet
+                                {data?.currency} Wallet
                             </h1>
-                            {landing_company_name && (
-                                <WalletListCardBadge is_demo={data?.is_virtual} label={landing_company_name} />
+                            {data?.landing_company_name && (
+                                <WalletListCardBadge isDemo={data?.is_virtual} label={data?.landing_company_name} />
                             )}
                         </div>
-                        <p className='wallets-cashier-header__info__top-left__balance'>{display_balance}</p>
+                        <p className='wallets-cashier-header__info__top-left__balance'>{data?.display_balance}</p>
                     </div>
                     <div className='wallets-cashier-header__info__top-right'>
-                        {wallet_currency_type && <WalletCardIcon size='xl' type={wallet_currency_type} />}
+                        {data?.wallet_currency_type && <WalletCardIcon size='xl' type={data?.wallet_currency_type} />}
                         <button
                             className='wallets-cashier-header__close-button'
                             onClick={() => history.push('/appstore/traders-hub')}
diff --git a/packages/wallets/src/components/WalletClipboard/WalletClipboard.tsx b/packages/wallets/src/components/WalletClipboard/WalletClipboard.tsx
index 2eab77f2b333..786d47363806 100644
--- a/packages/wallets/src/components/WalletClipboard/WalletClipboard.tsx
+++ b/packages/wallets/src/components/WalletClipboard/WalletClipboard.tsx
@@ -5,31 +5,31 @@ import Clipboard from '../../public/images/clipboard.svg';
 import './WalletClipboard.scss';
 
 type TProps = {
-    info_message?: string;
+    infoMessage?: string;
     popoverAlignment: 'bottom' | 'left' | 'right' | 'top';
-    success_message: string;
-    text_copy: string;
+    successMessage: string;
+    textCopy: string;
 };
 
 const WalletClipboard = ({
     //  info_message, popoverAlignment, success_message,
-    text_copy,
+    textCopy,
 }: TProps) => {
     const [, copy] = useCopyToClipboard();
     const [isCopied, setIsCopied] = useState(false);
-    let timeout_clipboard: ReturnType<typeof setTimeout>;
+    let timeoutClipboard: ReturnType<typeof setTimeout>;
 
     const onClick = (event: { stopPropagation: () => void }) => {
         setIsCopied(true);
-        copy(text_copy);
-        timeout_clipboard = setTimeout(() => {
+        copy(textCopy);
+        timeoutClipboard = setTimeout(() => {
             setIsCopied(false);
         }, 2000);
         event.stopPropagation();
     };
 
     useEffect(() => {
-        return () => clearTimeout(timeout_clipboard);
+        return () => clearTimeout(timeoutClipboard);
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
diff --git a/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx b/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx
index 00acad50e549..57cb8f3540c5 100644
--- a/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx
+++ b/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx
@@ -11,7 +11,7 @@ type TProps = {
 
 const WalletCurrencyCard: React.FC<TProps> = ({ currency, isDemo, size = 'lg' }: TProps) => {
     return (
-        <WalletGradientBackground currency={currency} is_demo={isDemo} type='card'>
+        <WalletGradientBackground currency={currency} isDemo={isDemo} type='card'>
             <div className={`wallets-currency-card wallets-currency-card-${size}`}>
                 <WalletCardIcon size={size} type={currency} />
             </div>
diff --git a/packages/wallets/src/components/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx b/packages/wallets/src/components/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx
index bcb53f9298f9..a16dfdadc449 100644
--- a/packages/wallets/src/components/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx
+++ b/packages/wallets/src/components/WalletDepositCryptoAddress/WalletDepositCryptoAddress.tsx
@@ -7,9 +7,9 @@ import WalletClipboard from '../WalletClipboard/WalletClipboard';
 import './WalletDepositCryptoAddress.scss';
 
 const WalletDepositCryptoAddress = () => {
-    const { data: deposit_crypto_address, isLoading, mutate } = useDepositCryptoAddress();
+    const { data: depositCryptoAddress, isLoading, mutate } = useDepositCryptoAddress();
     const { isSuccess: isAuthorizeSuccess } = useAuthorize();
-    const { is_mobile } = useDevice();
+    const { isMobile } = useDevice();
 
     useEffect(() => {
         if (isAuthorizeSuccess) {
@@ -26,14 +26,14 @@ const WalletDepositCryptoAddress = () => {
 
     return (
         <div className='wallets-deposit-crypto-address'>
-            <QRCode size={is_mobile ? 128 : 160} value={deposit_crypto_address || ''} />
+            <QRCode size={isMobile ? 128 : 160} value={depositCryptoAddress || ''} />
             <div className='wallets-deposit-crypto-address__hash-container'>
-                <p className='wallets-deposit-crypto-address__hash'>{deposit_crypto_address}</p>
+                <p className='wallets-deposit-crypto-address__hash'>{depositCryptoAddress}</p>
                 <WalletClipboard
-                    info_message={is_mobile ? undefined : 'copy'}
-                    popoverAlignment={is_mobile ? 'left' : 'bottom'}
-                    success_message='copied'
-                    text_copy={deposit_crypto_address || ''}
+                    infoMessage={isMobile ? undefined : 'copy'}
+                    popoverAlignment={isMobile ? 'left' : 'bottom'}
+                    successMessage='copied'
+                    textCopy={depositCryptoAddress || ''}
                 />
             </div>
         </div>
diff --git a/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/WalletDepositCryptoCurrencyDetails.tsx b/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/WalletDepositCryptoCurrencyDetails.tsx
index 9b166ab050d3..20c3f2075daf 100644
--- a/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/WalletDepositCryptoCurrencyDetails.tsx
+++ b/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/WalletDepositCryptoCurrencyDetails.tsx
@@ -4,10 +4,10 @@ import './WalletDepositCryptoCurrencyDetails.scss';
 
 const WalletDepositCryptoCurrencyDetails = () => {
     const { data } = useActiveWalletAccount();
-    const { currency_config } = data || {};
+
     return (
         <p className='wallets-deposit-crypto-currency-details'>
-            Send only {currency_config?.name} ({currency_config?.display_code}) to this address.
+            Send only {data?.currency_config?.name} ({data?.currency_config?.display_code}) to this address.
         </p>
     );
 };
diff --git a/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx
index dbe3a8746c34..a1b433dd4688 100644
--- a/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx
+++ b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx
@@ -5,20 +5,20 @@ import { InlineMessage } from '../InlineMessage';
 import './WalletDepositCryptoDisclaimers.scss';
 
 // Check with BE to see if we can get the network name from the API.
-const crypto_currency_to_network_mapper: Record<string, string> = {
+const cryptoCurrencyToNetworkMapper: Record<string, string> = {
     BTC: 'Bitcoin (BTC)',
     ETH: 'Ethereum (ETH)',
-    LTC: 'Litecoin (LTC)',
-    UST: 'Omnicore',
-    USDC: 'Ethereum (ERC20)',
     eUSDT: 'Ethereum (ERC20) ',
+    LTC: 'Litecoin (LTC)',
     tUSDT: 'Tron (TRC20) ',
+    USDC: 'Ethereum (ERC20)',
+    UST: 'Omnicore',
 };
 
 const WalletDepositCryptoDisclaimers = () => {
     const { data } = useActiveWalletAccount();
-    const { is_mobile } = useDevice();
-    const { currency, currency_config } = data || {};
+    const { isMobile } = useDevice();
+    const { currency } = data || {};
 
     return (
         <div className='wallets-deposit-crypto-disclaimers'>
@@ -26,9 +26,9 @@ const WalletDepositCryptoDisclaimers = () => {
                 <div className='wallets-deposit-crypto-disclaimers__content'>
                     <p>To avoid loss of funds:</p>
                     <br />
-                    {currency_config?.minimum_deposit && (
+                    {data?.currency_config?.minimum_deposit && (
                         <li>
-                            A minimum deposit value of {currency_config?.minimum_deposit} {currency} is required.
+                            A minimum deposit value of {data?.currency_config?.minimum_deposit} {currency} is required.
                             Otherwise, the funds will be lost and cannot be recovered.
                         </li>
                     )}
@@ -36,15 +36,12 @@ const WalletDepositCryptoDisclaimers = () => {
                     <li>Make sure to copy your Deriv account address correctly into your crypto wallet.</li>
                     <li>
                         In your cryptocurrency wallet, make sure to select{' '}
-                        <strong>{currency && crypto_currency_to_network_mapper[currency]} network</strong> when you
-                        transfer funds to Deriv.
+                        <strong>{currency && cryptoCurrencyToNetworkMapper[currency]} network</strong> when you transfer
+                        funds to Deriv.
                     </li>
                 </div>
             </InlineMessage>
-            <p
-                className='wallets-deposit-crypto-disclaimers__note'
-                style={{ fontSize: is_mobile ? ' 1rem' : '1.2rem' }}
-            >
+            <p className='wallets-deposit-crypto-disclaimers__note' style={{ fontSize: isMobile ? ' 1rem' : '1.2rem' }}>
                 <strong>Note:</strong> You’ll receive an email when your deposit start being processed.
             </p>
         </div>
diff --git a/packages/wallets/src/components/WalletDepositFiat/WalletDepositFiat.tsx b/packages/wallets/src/components/WalletDepositFiat/WalletDepositFiat.tsx
index 2f109d39ce75..3e7957b7c738 100644
--- a/packages/wallets/src/components/WalletDepositFiat/WalletDepositFiat.tsx
+++ b/packages/wallets/src/components/WalletDepositFiat/WalletDepositFiat.tsx
@@ -4,12 +4,12 @@ import './WalletDepositFiat.scss';
 
 const WalletDepositFiat = () => {
     const { isSuccess: isAuthorizeSuccess } = useAuthorize();
-    const { data: iframe_url, isError, mutate } = useDepositFiatAddress();
+    const { data: iframeUrl, isError, mutate } = useDepositFiatAddress();
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         setIsLoading(true);
-    }, [iframe_url]);
+    }, [iframeUrl]);
 
     useEffect(() => {
         if (isAuthorizeSuccess) {
@@ -22,12 +22,12 @@ const WalletDepositFiat = () => {
     return (
         <React.Fragment>
             {isLoading && <p>Loading...</p>}
-            {iframe_url && (
+            {iframeUrl && (
                 <iframe
                     className='wallets-deposit-fiat__iframe'
-                    key={iframe_url}
+                    key={iframeUrl}
                     onLoad={() => setIsLoading(false)}
-                    src={iframe_url}
+                    src={iframeUrl}
                     style={{ display: isLoading ? 'none' : 'block' }}
                 />
             )}
diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx
index 0124a76223df..ba8b2d6f78a6 100644
--- a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx
+++ b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx
@@ -5,8 +5,8 @@ type TProps = {
     children: React.ReactNode;
     currency: string;
     device?: 'desktop' | 'mobile';
-    has_shine?: boolean;
-    is_demo?: boolean;
+    hasShine?: boolean;
+    isDemo?: boolean;
     theme?: 'dark' | 'light';
     type?: 'card' | 'header';
 };
@@ -15,18 +15,18 @@ const WalletGradientBackground: React.FC<TProps> = ({
     children,
     currency,
     device = 'desktop',
-    has_shine = false,
-    is_demo = false,
+    hasShine = false,
+    isDemo = false,
     theme = 'light',
     type = 'card',
 }) => {
-    const className = is_demo
+    const className = isDemo
         ? `wallets-gradient--demo-${device}-${type}-${theme}`
         : `wallets-gradient--${currency}-${device}-${type}-${theme}`;
 
     return (
         <div className={`wallets-gradient ${className}`}>
-            {has_shine && !is_demo && <span className='wallets-gradient__shine' />}
+            {hasShine && !isDemo && <span className='wallets-gradient__shine' />}
             {children}
         </div>
     );
diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
index a5539ba1fb38..fea6365fbfe5 100644
--- a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
+++ b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useActiveWalletAccount, useAuthorize } from '@deriv/api';
+import { useAuthorize } from '@deriv/api';
 import useDevice from '../../hooks/useDevice';
 import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg';
 import IcCashierStatement from '../../public/images/ic-cashier-statement.svg';
@@ -48,18 +48,15 @@ type TProps = {
 };
 
 const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid }) => {
-    const { data: activeWallet } = useActiveWalletAccount();
     const { switchAccount } = useAuthorize();
     const { isMobile } = useDevice();
     const history = useHistory();
 
-    const is_demo = !!activeWallet?.is_virtual;
-
     if (isMobile)
         return (
             <div className='wallets-mobile-actions__container'>
                 <div className='wallets-mobile-actions'>
-                    {getWalletHeaderButtons(is_demo).map(button => (
+                    {getWalletHeaderButtons(isDemo).map(button => (
                         <div className='wallets-mobile-actions-content' key={button.name}>
                             <button
                                 className='wallets-mobile-actions-content-icon'
diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
index eadc2ed01e9b..8801e5f8b777 100644
--- a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
+++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import './WalletListCardBadge.scss';
 
 type TProps = {
-    is_demo?: boolean;
+    isDemo?: boolean;
     label?: string;
 };
 
-const WalletListCardBadge: React.FC<TProps> = ({ is_demo, label }) => {
-    const className = is_demo ? 'wallets-list-card__badge--demo' : 'wallets-list-card__badge';
+const WalletListCardBadge: React.FC<TProps> = ({ isDemo, label }) => {
+    const className = isDemo ? 'wallets-list-card__badge--demo' : 'wallets-list-card__badge';
 
     const labelStyle: React.CSSProperties = {
-        color: is_demo ? 'white' : 'black',
+        color: isDemo ? 'white' : 'black',
     };
 
     const formattedLabel = label === 'virtual' ? 'Demo' : label?.toUpperCase() || 'SVG';
diff --git a/packages/wallets/src/components/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx b/packages/wallets/src/components/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx
index 9ac6d2bf48da..1d4bc2dd33f1 100644
--- a/packages/wallets/src/components/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx
+++ b/packages/wallets/src/components/WalletTransferFormAccountCard/WalletTransferFormAccountCard.tsx
@@ -44,7 +44,7 @@ const WalletTransferFromAccountCard: React.FC<TProps> = ({ account, type = 'moda
                 </div>
             </div>
             {type === 'modal' && (
-                <WalletListCardBadge is_demo={account?.is_virtual} label={account?.landing_company_name} />
+                <WalletListCardBadge isDemo={account?.is_virtual} label={account?.landing_company_name} />
             )}
         </div>
     );
diff --git a/packages/wallets/src/components/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx b/packages/wallets/src/components/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx
index ae1efb89fb43..a7bb15323c1e 100644
--- a/packages/wallets/src/components/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx
+++ b/packages/wallets/src/components/WalletTransferFormDropdown/WalletTransferFormDropdown.tsx
@@ -37,7 +37,7 @@ const WalletTransferFormDropdown: React.FC<TProps> = ({ fieldName, initialAccoun
             <div className='wallets-transfer-form-dropdown__icons'>
                 {selectedAccount && (
                     <WalletListCardBadge
-                        is_demo={selectedAccount?.is_virtual}
+                        isDemo={selectedAccount?.is_virtual}
                         label={selectedAccount?.landing_company_name}
                     />
                 )}
diff --git a/packages/wallets/src/components/WalletTransferFormInputField/WalletTransferFormInputField.tsx b/packages/wallets/src/components/WalletTransferFormInputField/WalletTransferFormInputField.tsx
index 71c5e6ea563e..84e73a6d6cb7 100644
--- a/packages/wallets/src/components/WalletTransferFormInputField/WalletTransferFormInputField.tsx
+++ b/packages/wallets/src/components/WalletTransferFormInputField/WalletTransferFormInputField.tsx
@@ -13,7 +13,7 @@ type TProps = {
 const WalletTransferFormInputField: React.FC<TProps> = ({ defaultValue, fieldName, fractionDigits = 2, label }) => {
     const { setFieldValue } = useFormikContext();
     const { onChange, value } = useInputATMFormatter(defaultValue, {
-        fraction_digits: fractionDigits,
+        fractionDigits,
     });
 
     useEffect(() => {
diff --git a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx
index e93110a26ed8..957828f38e14 100644
--- a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx
@@ -6,14 +6,18 @@ import WalletsAddMoreCardContent from '../WalletsAddMoreCardContent';
 
 type TWalletsAddMoreCard = NonNullable<ReturnType<typeof useAvailableWallets>['data']>[0];
 
-const WalletsAddMoreCard = ({ currency, is_added, landing_company_name }: TWalletsAddMoreCard) => {
+const WalletsAddMoreCard = ({
+    currency,
+    is_added: isAdded,
+    landing_company_name: landingCompanyName,
+}: TWalletsAddMoreCard) => {
     return (
         <div className='wallets-add-more__card'>
-            <WalletGradientBackground currency={currency || 'USD'} device='mobile' has_shine type='card'>
+            <WalletGradientBackground currency={currency || 'USD'} device='mobile' hasShine type='card'>
                 <WalletsAddMoreCardBanner
                     currency={currency || 'USD'}
-                    is_added={is_added}
-                    landing_company_name={landing_company_name ?? ''}
+                    is_added={isAdded}
+                    landing_company_name={landingCompanyName ?? ''}
                 />
             </WalletGradientBackground>
             <WalletsAddMoreCardContent currency={currency ?? ''} />
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
index befa56d1d45f..8390a5cf7de3 100644
--- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx
@@ -6,7 +6,11 @@ import WalletAddMoreCurrencyIcon from '../WalletAddMoreCurrencyIcon';
 
 type TWalletsAddMoreCardBannerProps = NonNullable<ReturnType<typeof useAvailableWallets>['data']>[0];
 
-const WalletsAddMoreCardBanner = ({ currency, is_added, landing_company_name }: TWalletsAddMoreCardBannerProps) => {
+const WalletsAddMoreCardBanner = ({
+    currency,
+    is_added: isAdded,
+    landing_company_name: landingCompanyName,
+}: TWalletsAddMoreCardBannerProps) => {
     return (
         <div className='wallets-add-more__banner'>
             <div className='wallets-add-more__banner-header'>
@@ -14,20 +18,20 @@ const WalletsAddMoreCardBanner = ({ currency, is_added, landing_company_name }:
                     <WalletAddMoreCurrencyIcon currency={currency ? currency.toLowerCase() : ''} />
                 </span>
                 <span className='wallets-add-more__banner-landing-company'>
-                    {landing_company_name ? landing_company_name.toUpperCase() : ''}
+                    {landingCompanyName ? landingCompanyName.toUpperCase() : ''}
                 </span>
             </div>
             <button
                 className={`wallets-add-more__banner-button ${
-                    is_added ? 'wallets-add-more__banner-button--is-added' : ''
+                    isAdded ? 'wallets-add-more__banner-button--is-added' : ''
                 }`}
             >
-                {is_added ? (
+                {isAdded ? (
                     <CheckIcon className='wallets-add-more__banner-button-icon' />
                 ) : (
                     <PlusIcon className='wallets-add-more__banner-button-icon' />
                 )}
-                {is_added ? 'Added' : 'Add'}
+                {isAdded ? 'Added' : 'Add'}
             </button>
         </div>
     );
diff --git a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx
index 668880c80472..0a776c272209 100644
--- a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx
+++ b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx
@@ -4,25 +4,25 @@ type TWalletDescriptionMapper = {
     [key: string]: string;
 };
 
-const wallet_description_mapper: TWalletDescriptionMapper = {
+const walletDescriptionMapper: TWalletDescriptionMapper = {
     AUD: 'Deposit and withdraw Australian dollars using credit or debit cards, e-wallets, or bank wires.',
-    EUR: 'Deposit and withdraw euros into your accounts regulated by MFSA using credit or debit cards and e-wallets.',
-    USD: 'Deposit and withdraw US dollars using credit or debit cards, e-wallets, or bank wires.',
     BTC: "Deposit and withdraw Bitcoin, the world's most popular cryptocurrency, hosted on the Bitcoin blockchain.",
     ETH: 'Deposit and withdraw Ether, the fastest growing cryptocurrency, hosted on the Ethereum blockchain.',
-    LTC: 'Deposit and withdraw Litecoin, the cryptocurrency with low transaction fees, hosted on the Litecoin blockchain.',
-    USDC: 'Deposit and withdraw USD Coin, hosted on the Ethereum blockchain.',
+    EUR: 'Deposit and withdraw euros into your accounts regulated by MFSA using credit or debit cards and e-wallets.',
     eUSDT: 'Deposit and withdraw Tether ERC20, a version of Tether hosted on the Ethereum blockchain.',
+    LTC: 'Deposit and withdraw Litecoin, the cryptocurrency with low transaction fees, hosted on the Litecoin blockchain.',
+    PaymentAgent: 'Deposit and withdraw funds via authorised, independent payment agents.',
     tUSDT: 'Deposit and withdraw Tether TRC20, a version of Tether hosted on the TRON blockchain.',
+    USD: 'Deposit and withdraw US dollars using credit or debit cards, e-wallets, or bank wires.',
+    USDC: 'Deposit and withdraw USD Coin, hosted on the Ethereum blockchain.',
     UST: 'Deposit and withdraw Tether Omni, hosted on the Bitcoin blockchain.',
-    PaymentAgent: 'Deposit and withdraw funds via authorised, independent payment agents.',
 };
 
 const WalletsAddMoreCardContent = ({ currency }: { currency: string }) => {
     return (
         <div className='wallets-add-more__content'>
             <h3 className='wallets-add-more__content-header'>{currency} Wallet</h3>
-            <div className='wallets-add-more__content-body'>{wallet_description_mapper[currency]}</div>
+            <div className='wallets-add-more__content-body'>{walletDescriptionMapper[currency]}</div>
         </div>
     );
 };
diff --git a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
index 0ce53a00ad4a..dae1d795826f 100644
--- a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
+++ b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
@@ -8,51 +8,51 @@ import './WalletsCarouselContent.scss';
 
 const WalletsCarouselContent: React.FC = () => {
     const { switchAccount } = useAuthorize();
-    const [wallets_carousel_embla_ref, wallets_carousel_embla_api] = useEmblaCarousel({
-        skipSnaps: true,
+    const [walletsCarouselEmblaRef, walletsCarouselEmblaApi] = useEmblaCarousel({
         containScroll: false,
+        skipSnaps: true,
     });
-    const { data: wallet_accounts_list } = useWalletAccountsList();
-    const active_wallet_index = useMemo(
+    const { data: walletAccountsList } = useWalletAccountsList();
+    const activeWalletIndex = useMemo(
         () =>
-            wallet_accounts_list?.findIndex(item => item?.is_active) ||
-            wallets_carousel_embla_api?.selectedScrollSnap() ||
+            walletAccountsList?.findIndex(item => item?.is_active) ||
+            walletsCarouselEmblaApi?.selectedScrollSnap() ||
             0,
-        [wallet_accounts_list, wallets_carousel_embla_api]
+        [walletAccountsList, walletsCarouselEmblaApi]
     );
-    const [progress_bar_active_index, setProgressBarActiveIndex] = React.useState(active_wallet_index + 1);
+    const [progressBarActiveIndex, setProgressBarActiveIndex] = React.useState(activeWalletIndex + 1);
 
     useEffect(() => {
-        wallets_carousel_embla_api?.scrollTo(active_wallet_index);
-    }, [active_wallet_index, wallets_carousel_embla_api]);
+        walletsCarouselEmblaApi?.scrollTo(activeWalletIndex);
+    }, [activeWalletIndex, walletsCarouselEmblaApi]);
 
     useEffect(() => {
-        wallets_carousel_embla_api?.on('settle', () => {
+        walletsCarouselEmblaApi?.on('settle', () => {
             // const scroll_snap_index = walletsCarouselEmblaApi?.selectedScrollSnap();
             // const loginid = wallet_accounts_list[scroll_snap_index]?.loginid;
             // switchAccount(loginid);
         });
 
-        wallets_carousel_embla_api?.on('select', () => {
-            const scroll_snap_index = wallets_carousel_embla_api?.selectedScrollSnap();
-            setProgressBarActiveIndex(scroll_snap_index + 1);
+        walletsCarouselEmblaApi?.on('select', () => {
+            const scrollSnapIndex = walletsCarouselEmblaApi?.selectedScrollSnap();
+            setProgressBarActiveIndex(scrollSnapIndex + 1);
         });
-    }, [wallets_carousel_embla_api, switchAccount, wallet_accounts_list]);
+    }, [walletsCarouselEmblaApi, switchAccount, walletAccountsList]);
 
-    const amount_of_steps = useMemo(() => wallet_accounts_list?.map(wallet => wallet.loginid), [wallet_accounts_list]);
+    const amountOfSteps = useMemo(() => walletAccountsList?.map(wallet => wallet.loginid), [walletAccountsList]);
 
     return (
-        <div className='wallets-carousel-content' ref={wallets_carousel_embla_ref}>
+        <div className='wallets-carousel-content' ref={walletsCarouselEmblaRef}>
             <div className='wallets-carousel-content__container'>
-                {wallet_accounts_list?.map(account => (
+                {walletAccountsList?.map(account => (
                     <WalletCard account={account} key={`wallet-card-${account.loginid}`} />
                 ))}
             </div>
             <div className='wallets-carousel-content__progress-bar'>
                 <ProgressBar
-                    active_index={progress_bar_active_index}
-                    indexes={amount_of_steps || []}
-                    is_transition
+                    activeIndex={progressBarActiveIndex}
+                    indexes={amountOfSteps || []}
+                    isTransition
                     setActiveIndex={switchAccount}
                 />
             </div>
diff --git a/packages/wallets/src/hooks/useInputATMFormatter.ts b/packages/wallets/src/hooks/useInputATMFormatter.ts
index 6cde62d18485..dc61e2d71850 100644
--- a/packages/wallets/src/hooks/useInputATMFormatter.ts
+++ b/packages/wallets/src/hooks/useInputATMFormatter.ts
@@ -3,89 +3,89 @@ import { unFormatLocaleString } from '@deriv/utils';
 import useInputDecimalFormatter from './useInputDecimalFormatter';
 
 type TOptions = {
-    fraction_digits?: number;
+    fractionDigits?: number;
     locale?: Intl.LocalesArgument;
 };
 
 const useInputATMFormatter = (initial?: number, options?: TOptions) => {
-    const is_pasting = useRef(false);
+    const isPasting = useRef(false);
     const { onChange: onChangeDecimal, value } = useInputDecimalFormatter(undefined, options);
-    const { fraction_digits = 2, locale } = options || {};
+    const { fractionDigits = 2, locale } = options || {};
 
-    const formatted_value = useMemo(
-        () => `${Number(value).toLocaleString(locale, { minimumFractionDigits: fraction_digits })}`,
-        [fraction_digits, locale, value]
+    const formattedValue = useMemo(
+        () => `${Number(value).toLocaleString(locale, { minimumFractionDigits: fractionDigits })}`,
+        [fractionDigits, locale, value]
     );
 
     const onChange = useCallback(
         (e: DeepPartial<React.ChangeEvent<HTMLInputElement>> | React.ChangeEvent<HTMLInputElement>) => {
-            const new_value = e?.target?.value || '';
-            const unformatted = unFormatLocaleString(new_value, locale);
+            const newValue = e?.target?.value || '';
+            const unformatted = unFormatLocaleString(newValue, locale);
             // @ts-expect-error shouldn't cast to number because we will lose the trailing zeros.
             const shifted = Math.fround(unformatted * 10).toFixed(fraction_digits);
             // @ts-expect-error shouldn't cast to number because we will lose the trailing zeros.
-            const un_shifted = Math.fround(unformatted / 10).toFixed(fraction_digits);
-            const unformatted_fraction = unformatted.split('.')?.[1]?.length || fraction_digits;
+            const unShifted = Math.fround(unformatted / 10).toFixed(fraction_digits);
+            const unformattedFraction = unformatted.split('.')?.[1]?.length || fractionDigits;
 
             // If the user is pasting, we don't need to shift the decimal point,
             // We just need to format the value.
-            if (is_pasting.current) {
-                is_pasting.current = false;
+            if (isPasting.current) {
+                isPasting.current = false;
                 return onChangeDecimal({ target: { value: unformatted } });
             }
 
             // The new value has one more decimal places than the fraction_digits,
             // so we need to shift the decimal point to the left.
-            if (unformatted_fraction - 1 === fraction_digits) {
+            if (unformattedFraction - 1 === fractionDigits) {
                 return onChangeDecimal({ target: { value: shifted } });
             }
 
             // The new value has one less decimal places than the fraction_digits,
             // so we need to shift the decimal point to the right.
-            if (unformatted_fraction + 1 === fraction_digits) {
-                return onChangeDecimal({ target: { value: un_shifted } });
+            if (unformattedFraction + 1 === fractionDigits) {
+                return onChangeDecimal({ target: { value: unShifted } });
             }
 
             // The new value has the same number of decimal places as the fraction_digits,
             // so we don't need to shift the decimal point.
-            if (unformatted_fraction === fraction_digits) {
+            if (unformattedFraction === fractionDigits) {
                 return onChangeDecimal({ target: { value: unformatted } });
             }
 
             // The new value has more decimal places than the fraction_digits,
             // so we chop the extra decimal points.
-            if (unformatted_fraction - 1 > fraction_digits) {
+            if (unformattedFraction - 1 > fractionDigits) {
                 return onChangeDecimal({ target: { value: unformatted } });
             }
 
             // The new value has less decimal places than the fraction_digits,
             // so we add the missing extra decimal point.
-            if (unformatted_fraction + 1 < fraction_digits) {
+            if (unformattedFraction + 1 < fractionDigits) {
                 return onChangeDecimal({ target: { value: unformatted } });
             }
 
             return onChangeDecimal({ target: { value: unformatted } });
         },
-        [locale, fraction_digits, onChangeDecimal]
+        [locale, fractionDigits, onChangeDecimal]
     );
 
     const onPaste: React.ClipboardEventHandler<HTMLInputElement> = useCallback(
-        e => (is_pasting.current = e.type === 'paste'),
+        e => (isPasting.current = e.type === 'paste'),
         []
     );
 
     useEffect(() => {
         if (initial) {
-            is_pasting.current = true;
+            isPasting.current = true;
             onChange({
                 target: {
-                    value: `${Number(initial).toLocaleString(locale, { minimumFractionDigits: fraction_digits })}`,
+                    value: `${Number(initial).toLocaleString(locale, { minimumFractionDigits: fractionDigits })}`,
                 },
             });
         }
-    }, [fraction_digits, initial, locale, onChange]);
+    }, [fractionDigits, initial, locale, onChange]);
 
-    return { value: formatted_value, onChange, onPaste };
+    return { onChange, onPaste, value: formattedValue };
 };
 
 export default useInputATMFormatter;
diff --git a/packages/wallets/src/hooks/useInputDecimalFormatter.ts b/packages/wallets/src/hooks/useInputDecimalFormatter.ts
index ea229c620870..87b5195c2f71 100644
--- a/packages/wallets/src/hooks/useInputDecimalFormatter.ts
+++ b/packages/wallets/src/hooks/useInputDecimalFormatter.ts
@@ -1,72 +1,72 @@
 import { useCallback, useEffect, useState } from 'react';
 
 type TOptions = {
-    fraction_digits?: number;
-    with_sign?: boolean;
+    fractionDigits?: number;
+    withSign?: boolean;
 };
 
 const useInputDecimalFormatter = (initial?: number, options?: TOptions) => {
     const [value, setValue] = useState('');
-    const { fraction_digits = 2, with_sign = false } = options || {};
+    const { fractionDigits = 2, withSign = false } = options || {};
 
     const onChange = useCallback(
         (e: DeepPartial<React.ChangeEvent<HTMLInputElement>> | React.ChangeEvent<HTMLInputElement>) => {
-            setValue(old_value => {
-                const new_value = e?.target?.value || '';
-                const isEmpty = new_value === '';
+            setValue(oldValue => {
+                const newValue = e?.target?.value || '';
+                const isEmpty = newValue === '';
 
                 // The field has been cleared, So we return the new value.
-                if (isEmpty) return new_value;
+                if (isEmpty) return newValue;
 
-                const text = with_sign ? new_value : new_value.replaceAll(/[+-]/g, '');
+                const text = withSign ? newValue : newValue.replaceAll(/[+-]/g, '');
                 const inputs = text.split('.');
 
                 // The field contains more than one dot, So we return the old value as only one dot
                 // is allowed.
-                if (inputs.length > 2) return old_value;
+                if (inputs.length > 2) return oldValue;
 
                 const left = inputs[0];
                 const right = inputs.length > 1 ? inputs[1] : null;
-                const has_right = right !== null && right !== '';
+                const hasRight = right !== null && right !== '';
 
                 // The field value is positive or negative sign, So we return the new value without
                 // any calculations.
-                if ((left === '-' || left === '+') && !has_right) return new_value;
+                if ((left === '-' || left === '+') && !hasRight) return newValue;
 
                 // The field value is 0, So we return the new value without any calculations.
-                if (left === '0' && !has_right) return new_value;
+                if (left === '0' && !hasRight) return newValue;
 
-                const is_number = !isNaN(Number(new_value));
+                const isNumber = !isNaN(Number(newValue));
 
                 // The input value is not a valid number, So we return the old value.
-                if (!is_number) return old_value;
+                if (!isNumber) return oldValue;
 
-                const new_left = left.replaceAll(/[+-]/g, '');
-                const has_decimal = new_value.includes('.');
+                const newLeft = left.replaceAll(/[+-]/g, '');
+                const hasDecimal = newValue.includes('.');
 
                 // The field starts with 0 but doesn't have decimal point, So we return the old value
                 // as the only valid input at this step is decimal point.
-                if (new_left.startsWith('0') && new_left.length !== 1 && !has_decimal) return old_value;
+                if (newLeft.startsWith('0') && newLeft.length !== 1 && !hasDecimal) return oldValue;
 
                 // The field have a decimal point and decimal places are already as allowed fraction
                 // digits, So we remove the extra decimal digits from the right and return the new value.
-                if (has_right && right.length > fraction_digits) {
-                    const new_right = right.substring(0, fraction_digits);
+                if (hasRight && right.length > fractionDigits) {
+                    const newRight = right.substring(0, fractionDigits);
 
-                    return `${left}.${new_right}`;
+                    return `${left}.${newRight}`;
                 }
 
-                return new_value;
+                return newValue;
             });
         },
-        [fraction_digits, with_sign]
+        [fractionDigits, withSign]
     );
 
     useEffect(() => {
         if (initial) onChange({ target: { value: `${initial}` } });
     }, [initial, onChange]);
 
-    return { value, onChange };
+    return { onChange, value };
 };
 
 export default useInputDecimalFormatter;