thisyahlen/chore: enforce camelcase (binary-com#10308)

* chore: enforce camelcase * chore: fix circle ci and leftovers
kate-deriv · Sep 27, 2023 · 612a122 · 612a122
1 parent ed4a87f
commit 612a122
Show file tree

Hide file tree

Showing 30 changed files with 208 additions and 210 deletions.
diff --git 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
@@ -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/...s/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx b/...s/src/components/ExternalTradingPlatforms/OtherCFDPlatformsList/OtherCFDPlatformsList.tsx
@@ -6,15 +6,15 @@ 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'>
             <div className='wallets-other-cfd__title'>
                 <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
@@ -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/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>