Revert "Sergei / Fix Localize issue (deriv-com#15430)" (deriv-com#16025)

This reverts commit 8a5f2d4.

packages/appstore/src/components/add-options-account/add-options-account.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, Button, Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { Localize, localize } from '@deriv/translations';
 import './add-options-account.scss';
 import { useStore, observer } from '@deriv/stores';
 import { isMobile, ContentFlag } from '@deriv/shared';
@@ -12,13 +12,16 @@ const AddOptions = observer(() => {
     const { setShouldShowCooldownModal, openRealAccountSignup } = ui;
     const { real_account_creation_unlock_date } = client;
 
+    const add_deriv_account_text = localize('To trade CFDs, get a Deriv Apps account first.');
+    const add_deriv_account_btn = localize('Get a Deriv account');
+
     const eu_user = content_flag === ContentFlag.LOW_RISK_CR_EU || content_flag === ContentFlag.EU_REAL;
 
     return (
         <React.Fragment>
             <div className='add-options-account__title'>
                 <Text size={isMobile() ? 'xxs' : 's'} weight='bold'>
-                    <Localize i18n_default_text='To trade CFDs, get a Deriv Apps account first.' />
+                    <Localize i18n_default_text={add_deriv_account_text} />
                 </Text>
             </div>
             <div className='add-options-account__button'>
@@ -45,11 +48,10 @@ const AddOptions = observer(() => {
                     }}
                     is_disabled={false}
                     is_loading={false}
+                    text={add_deriv_account_btn}
                     medium
                     primary
-                >
-                    <Localize i18n_default_text='Get a Deriv account' />
-                </Button>
+                />
             </div>
         </React.Fragment>
     );

packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
-import { Localize } from '@deriv/translations';
+import { Localize, localize } from '@deriv/translations';
 
 const WalletsBannerUpgrade = observer(() => {
     const { traders_hub, ui } = useStore();
@@ -22,12 +22,11 @@ const WalletsBannerUpgrade = observer(() => {
                 </div>
                 <Button
                     className='wallets-banner-upgrade__button'
+                    text={localize("Let's go")}
                     primary
                     large
                     onClick={() => toggleWalletsUpgrade(true)}
-                >
-                    <Localize i18n_default_text="Let's go" />
-                </Button>
+                />
             </div>
             <Icon
                 icon={`IcAppstoreWalletsUpgradeCoins${is_mobile ? '' : 'Horizontal'}`}

packages/appstore/src/components/cfds-listing-logged-out/cfds-listing-logged-out.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer, useStore } from '@deriv/stores';
 import { Text } from '@deriv/components';
 import { redirectToLogin } from '@deriv/shared';
-import { getLanguage, Localize, useLocalize } from '@deriv/translations';
+import { getLanguage, localize } from '@deriv/translations';
 import { getHasDivider } from 'Constants/utils';
 import ListingContainer from 'Components/containers/listing-container';
 import TradingAppCard from 'Components/containers/trading-app-card';
@@ -11,7 +11,6 @@ import CFDsTitle from 'Components/elements/cfds-title';
 import './cfds-listing-logged-out.scss';
 
 const CFDsListingLoggedOut = observer(() => {
-    const { localize } = useLocalize();
     const { traders_hub } = useStore();
     const {
         available_dxtrade_accounts,
@@ -25,7 +24,7 @@ const CFDsListingLoggedOut = observer(() => {
         <ListingContainer title={<CFDsTitle />} description={<CFDsDescription />}>
             <div className='cfds-listing-logged-out__cfd-full-row'>
                 <Text line_height='m' weight='bold' color='prominent'>
-                    <Localize i18n_default_text='Deriv MT5' />
+                    {localize('Deriv MT5')}
                 </Text>
             </div>
             {combined_cfd_mt5_accounts.map((existing_account, index: number) => {
@@ -37,10 +36,10 @@ const CFDsListingLoggedOut = observer(() => {
                         clickable_icon
                         icon={existing_account.icon}
                         sub_title={existing_account?.sub_title}
-                        name={localize(existing_account?.name) ?? ''}
+                        name={existing_account?.name ?? ''}
                         short_code_and_region={existing_account?.short_code_and_region}
                         platform={existing_account.platform}
-                        description={localize(existing_account.description)}
+                        description={existing_account.description}
                         key={existing_account.key}
                         has_divider={!is_eu_user && getHasDivider(index, list_size, 3)}
                         onAction={() => redirectToLogin(false, getLanguage())}
@@ -56,9 +55,7 @@ const CFDsListingLoggedOut = observer(() => {
             )}
             {!is_eu_user && (
                 <div className='cfds-listing-logged-out__cfd-full-row'>
-                    <Text weight='bold'>
-                        <Localize i18n_default_text='Deriv cTrader' />{' '}
-                    </Text>
+                    <Text weight='bold'>{localize('Deriv cTrader')}</Text>
                 </div>
             )}
             {available_ctrader_accounts.map(account => (
@@ -69,7 +66,7 @@ const CFDsListingLoggedOut = observer(() => {
                     icon={account.icon}
                     name={account.name}
                     platform={account.platform}
-                    description={localize(account.description)}
+                    description={account.description}
                     onAction={() => redirectToLogin(false, getLanguage())}
                     key={`trading_app_card_${account.name}`}
                     market_type='all'
@@ -83,7 +80,7 @@ const CFDsListingLoggedOut = observer(() => {
 
                     <div className='cfds-listing-logged-out__cfd-full-row'>
                         <Text line_height='m' weight='bold' color='prominent'>
-                            <Localize i18n_default_text='Deriv X' />
+                            {localize('Deriv X')}
                         </Text>
                     </div>
                 </React.Fragment>
@@ -96,7 +93,7 @@ const CFDsListingLoggedOut = observer(() => {
                     icon={account.icon}
                     name={account.name}
                     platform={account.platform}
-                    description={localize(account.description)}
+                    description={account.description}
                     onAction={() => redirectToLogin(false, getLanguage())}
                     key={`trading_app_card_${account.name}`}
                     market_type='all'

packages/appstore/src/components/cfds-listing/index.tsx

@@ -11,7 +11,7 @@ import {
     setPerformanceValue,
 } from '@deriv/shared';
 import { useDevice } from '@deriv-com/ui';
-import { Localize } from '@deriv/translations';
+import { localize, Localize } from '@deriv/translations';
 import { Analytics } from '@deriv-com/analytics';
 import ListingContainer from 'Components/containers/listing-container';
 import AddOptionsAccount from 'Components/add-options-account';
@@ -79,11 +79,7 @@ const CFDsListing = observer(() => {
     const { openDerivRealAccountNeededModal, setShouldShowCooldownModal, setIsMT5VerificationFailedModal } = ui;
     const has_no_real_account = !has_any_real_account;
     const accounts_sub_text =
-        !is_eu_user || is_demo_low_risk ? (
-            <Localize i18n_default_text='Compare accounts' />
-        ) : (
-            <Localize i18n_default_text='Account Information' />
-        );
+        !is_eu_user || is_demo_low_risk ? localize('Compare accounts') : localize('Account Information');
 
     const {
         poi_pending_for_bvi_labuan_vanuatu,
@@ -194,7 +190,7 @@ const CFDsListing = observer(() => {
                 isDesktop && (
                     <div className='cfd-accounts__title'>
                         <Text size='sm' weight='bold' color='prominent'>
-                            <Localize i18n_default_text='CFDs' />
+                            {localize('CFDs')}
                         </Text>
                         <CompareAccount accounts_sub_text={accounts_sub_text} is_desktop />
                     </div>
@@ -206,7 +202,7 @@ const CFDsListing = observer(() => {
             <AddDerivAccount />
             <div className='cfd-full-row' style={{ paddingTop: '2rem' }}>
                 <Text line_height='m' weight='bold' color='prominent'>
-                    <Localize i18n_default_text='Deriv MT5' />
+                    {localize('Deriv MT5')}
                 </Text>
             </div>
             {has_svg_accounts_to_migrate && <MigrationBanner />}
@@ -319,9 +315,7 @@ const CFDsListing = observer(() => {
                         <hr className='divider' />
                     </div>
                     <div className='cfd-full-row' style={{ paddingTop: '2rem' }}>
-                        <Text weight='bold'>
-                            <Localize i18n_default_text='Deriv cTrader' />
-                        </Text>
+                        <Text weight='bold'>{localize('Deriv cTrader')}</Text>
                     </div>
                     {is_landing_company_loaded ? (
                         available_ctrader_accounts.map(account => {
@@ -417,7 +411,7 @@ const CFDsListing = observer(() => {
 
                         <div className='cfd-full-row'>
                             <Text line_height='m' weight='bold' color='prominent'>
-                                <Localize i18n_default_text='Deriv X' />
+                                {localize('Deriv X')}
                             </Text>
                         </div>
                     </React.Fragment>

packages/appstore/src/components/compare-account/compare-account.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
 import { Analytics } from '@deriv-com/analytics';
 import { useHistory } from 'react-router-dom';
 import { routes } from '@deriv/shared';
 import { useStore, observer } from '@deriv/stores';
 
 type TCompareAccount = {
-    accounts_sub_text: React.ReactNode;
+    accounts_sub_text: string;
     is_desktop?: boolean;
 };
 
@@ -33,7 +34,7 @@ const CompareAccount = observer(({ accounts_sub_text, is_desktop }: TCompareAcco
                 line_height='s'
                 styles={is_desktop ? { marginInlineStart: '1rem' } : ''}
             >
-                {accounts_sub_text}
+                <Localize i18n_default_text={accounts_sub_text} />
             </Text>
         </div>
     );

packages/appstore/src/components/containers/trading-app-card-actions.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { localize } from '@deriv/translations';
 import TradeButton from 'Components/trade-button/trade-button';
 import React from 'react';
 import { observer } from 'mobx-react-lite';
@@ -33,7 +33,7 @@ const TradingAppCardActions = ({
         case 'get':
             return (
                 <Button disabled={is_account_being_created} primary_light onClick={() => onAction?.()}>
-                    <Localize i18n_default_text='Get' />
+                    {localize('Get')}
                 </Button>
             );
         case 'trade':

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import getStatusBadgeConfig from '@deriv/account/src/Configs/get-status-badge-config';
 import { Text, StatusBadge } from '@deriv/components';
-import { Localize, useLocalize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import { Analytics } from '@deriv-com/analytics';
 import TradingPlatformIconProps from 'Assets/svgs/trading-platform';
 import {
@@ -45,7 +45,6 @@ const TradingAppCard = ({
     market_type,
     is_new = false,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
-    const { localize } = useLocalize();
     const {
         common,
         traders_hub,

packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx

@@ -3,12 +3,11 @@ import { Button, Text } from '@deriv/components';
 import CurrencySwitcherContainer from 'Components/containers/currency-switcher-container';
 import BalanceText from 'Components/elements/text/balance-text';
 import './demo-account-card.scss';
-import { Localize, useLocalize } from '@deriv/translations';
+import { localize } from '@deriv/translations';
 import { usePlatformAccounts } from '@deriv/hooks';
 import { useStore, observer } from '@deriv/stores';
 
 const DemoAccountCard = observer(() => {
-    const { localize } = useLocalize();
     const { client, traders_hub, common } = useStore();
     const { accounts, loginid, resetVirtualBalance, default_currency } = client;
     const { selected_account_type } = traders_hub;
@@ -39,7 +38,7 @@ const DemoAccountCard = observer(() => {
                         onClick={resetVirtualBalance}
                         className='currency-switcher__button'
                     >
-                        <Localize i18n_default_text='Reset Balance' />
+                        {localize('Reset Balance')}
                     </Button>
                 )
             }

packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDevice } from '@deriv-com/ui';
-import { getLanguage, Localize } from '@deriv/translations';
+import { getLanguage, Localize, localize } from '@deriv/translations';
 import { Button, Text, Icon } from '@deriv/components';
 import { useStore, observer } from '@deriv/stores';
 import { redirectToLogin } from '@deriv/shared';
@@ -26,12 +26,11 @@ const GetStartedTradingBanner = observer(() => {
                     </Text>
                     <Button
                         className='get-started-trading-banner__button'
+                        text={localize('Get Started')}
                         black
                         large
                         onClick={() => redirectToLogin(false, getLanguage())}
-                    >
-                        <Localize i18n_default_text='Get Started' />
-                    </Button>
+                    />
                 </div>
                 <Icon
                     icon={`IcAppstoreLoggedOut${is_eu_user ? 'Eu' : 'NonEu'}Coins${

packages/appstore/src/components/main-title-bar/asset-summary.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Popover } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { localize } from '@deriv/translations';
 import { useDevice } from '@deriv-com/ui';
 import BalanceText from 'Components/elements/text/balance-text';
 import { observer, useStore } from '@deriv/stores';
@@ -58,11 +58,9 @@ const AssetSummary = observer(() => {
     const eu_account = is_eu_user && !no_MF_account;
     const cr_account = !is_eu_user && !no_CR_account;
 
-    const eu_mt5_allowed_total_assets = is_mt5_allowed ? (
-        <Localize i18n_default_text='Total assets in your Deriv Apps and Deriv MT5 CFDs demo account.' />
-    ) : (
-        <Localize i18n_default_text='Total assets in your account.' />
-    );
+    const eu_mt5_allowed_total_assets = is_mt5_allowed
+        ? localize('Total assets in your Deriv Apps and Deriv MT5 CFDs demo account.')
+        : localize('Total assets in your account.');
 
     const should_show_loader =
         ((is_switching || is_logging_in) && (eu_account || cr_account)) ||
@@ -88,17 +86,13 @@ const AssetSummary = observer(() => {
                 <React.Fragment>
                     {isDesktop ? (
                         <Text align='right' key={`asset-summary--key-${current_language}`} size='xs' line_height='s'>
-                            <Localize i18n_default_text='Total assets' />
+                            {localize('Total assets')}
                         </Text>
                     ) : null}
                     <Popover
                         alignment={isDesktop ? 'left' : 'top'}
                         message={
-                            is_eu_user ? (
-                                eu_mt5_allowed_total_assets
-                            ) : (
-                                <Localize i18n_default_text='Total assets in all your accounts' />
-                            )
+                            is_eu_user ? eu_mt5_allowed_total_assets : localize('Total assets in all your accounts')
                         }
                         zIndex={9999}
                         is_bubble_hover_enabled

packages/appstore/src/components/main-title-bar/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Text, Tabs, Icon, Loading } from '@deriv/components';
 import { ContentFlag, makeLazyLoader, moduleLoader } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
-import { Localize, useLocalize } from '@deriv/translations';
+import { Localize, localize } from '@deriv/translations';
 import { useDevice } from '@deriv-com/ui';
 import { useWalletMigration } from '@deriv/hooks';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
@@ -26,7 +26,6 @@ const MainTitleBar = () => {
     const { is_landing_company_loaded, is_switching, has_maltainvest_account } = client;
     const { state: wallet_migration_state } = useWalletMigration();
     const { selected_region, handleTabItemClick, toggleRegulatorsCompareModal, content_flag } = traders_hub;
-    const { localize } = useLocalize();
 
     const is_low_risk_cr_real_account =
         content_flag === ContentFlag.LOW_RISK_CR_NON_EU || content_flag === ContentFlag.LOW_RISK_CR_EU;

packages/appstore/src/components/main-title-bar/regulators-switcher.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
-import { Localize } from '@deriv/translations';
+import { localize } from '@deriv/translations';
 import { region_availability } from 'Constants/platform-config';
 import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
 import { useStore, observer } from '@deriv/stores';
@@ -30,9 +30,7 @@ const RegulatorSwitcher = observer(() => {
     return (
         <div className='regulators-switcher__container'>
             <div className='regulators-switcher--text'>
-                <Text>
-                    <Localize i18n_default_text='Regulation:' />
-                </Text>
+                <Text>{localize('Regulation:')}</Text>
                 <div
                     data-testid='dt_regulators-switcher-icon'
                     className='regulators-switcher--icon'
@@ -50,7 +48,7 @@ const RegulatorSwitcher = observer(() => {
                                 is_selected={region === traders_hub.selected_region}
                                 onClick={() => traders_hub.selectRegion(region)}
                             >
-                                <Localize i18n_default_text={region} />
+                                {region}
                             </SwitcherItem>
                         );
                     })}