diff --git a/packages/appstore/src/components/add-options-account/add-options-account.tsx b/packages/appstore/src/components/add-options-account/add-options-account.tsx index 48ca17dec075..73aa7a4c8828 100644 --- a/packages/appstore/src/components/add-options-account/add-options-account.tsx +++ b/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 (
- +
@@ -45,11 +48,10 @@ const AddOptions = observer(() => { }} is_disabled={false} is_loading={false} + text={add_deriv_account_btn} medium primary - > - - + />
); diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx index fafce2ace1b8..67c0b88b9ff1 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx +++ b/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(() => { + /> { - const { localize } = useLocalize(); const { traders_hub } = useStore(); const { available_dxtrade_accounts, @@ -25,7 +24,7 @@ const CFDsListingLoggedOut = observer(() => { } description={}>
- + {localize('Deriv MT5')}
{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 && (
- - {' '} - + {localize('Deriv cTrader')}
)} {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(() => {
- + {localize('Deriv X')}
@@ -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' diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx index b0f9d9e44f09..ef00a646526b 100644 --- a/packages/appstore/src/components/cfds-listing/index.tsx +++ b/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 ? ( - - ) : ( - - ); + !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 && (
- + {localize('CFDs')}
@@ -206,7 +202,7 @@ const CFDsListing = observer(() => {
- + {localize('Deriv MT5')}
{has_svg_accounts_to_migrate && } @@ -319,9 +315,7 @@ const CFDsListing = observer(() => {
- - - + {localize('Deriv cTrader')}
{is_landing_company_loaded ? ( available_ctrader_accounts.map(account => { @@ -417,7 +411,7 @@ const CFDsListing = observer(() => {
- + {localize('Deriv X')}
diff --git a/packages/appstore/src/components/compare-account/compare-account.tsx b/packages/appstore/src/components/compare-account/compare-account.tsx index 412dc2ecdbbf..723b8d14cff7 100644 --- a/packages/appstore/src/components/compare-account/compare-account.tsx +++ b/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} + ); diff --git a/packages/appstore/src/components/containers/trading-app-card-actions.tsx b/packages/appstore/src/components/containers/trading-app-card-actions.tsx index 76d38cbf89a1..7cc15add8967 100644 --- a/packages/appstore/src/components/containers/trading-app-card-actions.tsx +++ b/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 ( ); case 'trade': diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index 250f81c06893..07063958051c 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/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, diff --git a/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx b/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx index 4b7373d06f01..114c4e830157 100644 --- a/packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx +++ b/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('Reset Balance')} ) } diff --git a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx b/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx index 789f7f19cee0..65216e54d386 100644 --- a/packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx +++ b/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(() => { + /> { 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 ? ( - - ) : ( - - ); + 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(() => { {isDesktop ? ( - + {localize('Total assets')} ) : null} - ) + is_eu_user ? eu_mt5_allowed_total_assets : localize('Total assets in all your accounts') } zIndex={9999} is_bubble_hover_enabled diff --git a/packages/appstore/src/components/main-title-bar/index.tsx b/packages/appstore/src/components/main-title-bar/index.tsx index 76be196efef5..5ca964d0c0e8 100644 --- a/packages/appstore/src/components/main-title-bar/index.tsx +++ b/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; diff --git a/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx b/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx index eeb2dd1554fe..33133cb1fb9c 100644 --- a/packages/appstore/src/components/main-title-bar/regulators-switcher.tsx +++ b/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 (
- - - + {localize('Regulation:')}
{ is_selected={region === traders_hub.selected_region} onClick={() => traders_hub.selectRegion(region)} > - + {region} ); })} diff --git a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx b/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx index 99ddc43b9835..d359e637109b 100644 --- a/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx +++ b/packages/appstore/src/components/modals/failed-veriification-modal/failed-verification-modal.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { observer } from 'mobx-react-lite'; import { useStores } from 'Stores'; import { useHistory } from 'react-router-dom'; -import { Localize, useLocalize } from '@deriv/translations'; +import { localize, Localize } from '@deriv/translations'; import { Text, Dialog } from '@deriv/components'; import { isMobile, getAuthenticationStatusInfo, routes, Jurisdiction } from '@deriv/shared'; import './failed-verification-modal.scss'; @@ -64,7 +64,6 @@ const FailedVerificationModalContent = ({ }; const FailedVerificationModal = () => { - const { localize } = useLocalize(); const { traders_hub, ui, diff --git a/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx b/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx index b49e449ce76d..e3affcb41094 100644 --- a/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx +++ b/packages/appstore/src/components/modals/open-positions-svg-modal/open-positions-svg-modal.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Modal, Text } from '@deriv/components'; import { Jurisdiction, MT5_ACCOUNT_STATUS, getMT5AccountTitle } from '@deriv/shared'; import { useStore } from '@deriv/stores'; -import { Localize, useLocalize } from '@deriv/translations'; +import { Localize, localize } from '@deriv/translations'; import { TTradingPlatformAvailableAccount } from '../account-type-modal/types'; import { TMarketType } from '../../../types/common.types'; @@ -14,7 +14,6 @@ type TOpenPositionsSVGModal = { }; const OpenPositionsSVGModal = ({ market_type, status, is_modal_open, setModalOpen }: TOpenPositionsSVGModal) => { - const { localize } = useLocalize(); const { client } = useStore(); const { mt5_login_list } = client; const eligible_accounts = mt5_login_list?.filter( diff --git a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal-content.tsx b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal-content.tsx index 3ffe73916ce7..dc63d16c7f00 100644 --- a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal-content.tsx +++ b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal-content.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Table, Div100vhContainer, Text, ThemedScrollbars } from '@deriv/components'; -import { Localize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; import { isDesktop, isMobile } from '@deriv/shared'; import { getCFDContents, @@ -64,10 +64,10 @@ const RegulatorsCompareModalContent = () => { - + {localize('Non-EU regulation')} - + {localize('EU regulation')} diff --git a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx index 64981a6e311e..bacaa2634476 100644 --- a/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx +++ b/packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useDevice } from '@deriv-com/ui'; import { observer, useStore } from '@deriv/stores'; -import { Localize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; import { Modal, MobileDialog, UILoader } from '@deriv/components'; import RegulatorsCompareModalContent from './regulators-compare-modal-content'; import './regulators-compare-modal.scss'; @@ -22,7 +22,7 @@ const RegulatorsCompareModal = () => { disableApp={disableApp} enableApp={enableApp} is_open={is_regulators_compare_modal_visible} - title={} + title={localize('Non-EU and EU regulation')} toggleModal={closeModal} height='792px' width='792px' @@ -32,7 +32,7 @@ const RegulatorsCompareModal = () => { ) : ( } + title={localize('Non-EU and EU regulation')} visible={is_regulators_compare_modal_visible} onClose={closeModal} > diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx index 3f5ff180a170..ba83db5e96f4 100644 --- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx +++ b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { Stream } from '@cloudflare/stream-react'; import { Button, Text, Modal } from '@deriv/components'; -import { Localize } from '@deriv/translations'; +import { localize, Localize } from '@deriv/translations'; import { observer, useStore } from '@deriv/stores'; import { useWalletMigration } from '@deriv/hooks'; import './wallets-upgrade-modal.scss'; @@ -68,9 +68,7 @@ const WalletsUpgradeModal = observer(() => { 'wallets-upgrade-modal__footer--mobile': is_mobile, })} > - +
diff --git a/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx index 5cb446cea466..abbd206c5e8d 100644 --- a/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx +++ b/packages/appstore/src/components/multi-action-button-group/multi-action-button-group.tsx @@ -1,5 +1,5 @@ import { Button } from '@deriv/components'; -import { Localize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; import { Actions } from 'Components/containers/trading-app-card-actions'; import TradeButton from 'Components/trade-button'; import React from 'react'; @@ -25,7 +25,7 @@ const MultiActionButtonGroup = ({ onClick={onAction} is_disabled={is_buttons_disabled} > - {is_real ? : } + {is_real ? localize('Transfer') : localize('Top up')}
diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 4643419e0c1d..5f724b28a73b 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'; import { Text, StaticUrl } from '@deriv/components'; import { ContentFlag, setPerformanceValue } from '@deriv/shared'; import { useStore } from '@deriv/stores'; -import { Localize, useLocalize } from '@deriv/translations'; +import { Localize, localize } from '@deriv/translations'; import { useDevice } from '@deriv-com/ui'; import ListingContainer from 'Components/containers/listing-container'; import TradingAppCard from 'Components/containers/trading-app-card'; @@ -14,7 +14,6 @@ import PlatformLoader from 'Components/pre-loader/platform-loader'; import OptionsDescription from 'Components/elements/options-description'; const OptionsAndMultipliersListing = observer(() => { - const { localize } = useLocalize(); const { isDesktop } = useDevice(); const { traders_hub, client, ui } = useStore(); const { diff --git a/packages/appstore/src/components/routes/routes.tsx b/packages/appstore/src/components/routes/routes.tsx index 97277223c634..6a699c6a9ca7 100644 --- a/packages/appstore/src/components/routes/routes.tsx +++ b/packages/appstore/src/components/routes/routes.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Loading } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; -import { useLocalize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; import { routes } from '@deriv/shared'; import { Switch } from 'react-router-dom'; import RouteWithSubroutes from './route-with-sub-routes.jsx'; @@ -14,7 +14,6 @@ const TradersHubLoggedOut = React.lazy( const Page404 = React.lazy(() => import(/* */ 'Modules/Page404')); const Routes: React.FC = observer(() => { - const { localize } = useLocalize(); const { client } = useStore(); const { is_logged_in, is_logging_in } = client; diff --git a/packages/appstore/src/components/trade-button/trade-button.tsx b/packages/appstore/src/components/trade-button/trade-button.tsx index e97748d2dbf8..f517ca368921 100644 --- a/packages/appstore/src/components/trade-button/trade-button.tsx +++ b/packages/appstore/src/components/trade-button/trade-button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Button } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; -import { Localize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; import { Actions } from 'Components/containers/trading-app-card-actions'; const TradeButton = observer( @@ -24,31 +24,25 @@ const TradeButton = observer( if (new_tab) { return ( - + ); } return ( - + ); } return ( - + ); } else if (onAction) { return ( ); } @@ -64,7 +58,7 @@ const TradeButton = observer( rel='noopener noreferrer' > ); diff --git a/packages/appstore/src/modules/Page404/Components/Page404.tsx b/packages/appstore/src/modules/Page404/Components/Page404.tsx index 90c839d54768..448e3952ddc7 100644 --- a/packages/appstore/src/modules/Page404/Components/Page404.tsx +++ b/packages/appstore/src/modules/Page404/Components/Page404.tsx @@ -1,24 +1,17 @@ import React from 'react'; import { PageError } from '@deriv/components'; import { routes, getUrlBase } from '@deriv/shared'; -import { Localize } from '@deriv/translations'; +import { localize } from '@deriv/translations'; const Page404 = () => ( } + header={localize('We couldn’t find that page')} messages={[ - , - , + localize('You may have followed a broken link, or the page has moved to a new address.'), + localize('Error code: {{error_code}} page not found', { error_code: 404 }), ]} redirect_urls={[routes.traders_hub]} - redirect_labels={[]} + redirect_labels={[localize("Return to Trader's Hub")]} classNameImage='page-404__image' image_url={getUrlBase('/public/images/common/404.png')} /> diff --git a/packages/appstore/src/modules/traders-hub/index.tsx b/packages/appstore/src/modules/traders-hub/index.tsx index c364a35b23dc..718df1476b81 100644 --- a/packages/appstore/src/modules/traders-hub/index.tsx +++ b/packages/appstore/src/modules/traders-hub/index.tsx @@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react'; import { ButtonToggle, Div100vhContainer, Text } from '@deriv/components'; import { routes, checkServerMaintenance, startPerformanceEventTimer } 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 CFDsListing from 'Components/cfds-listing'; import ModalManager from 'Components/modals/modal-manager'; @@ -41,7 +41,6 @@ const OrderedPlatformSections = observer( ); const TradersHub = observer(() => { - const { localize } = useLocalize(); const { isDesktop } = useDevice(); const { traders_hub, client, ui } = useStore(); const { diff --git a/packages/translations/src/components/localize.jsx b/packages/translations/src/components/localize.jsx index 34de78642935..80496f2d19f9 100644 --- a/packages/translations/src/components/localize.jsx +++ b/packages/translations/src/components/localize.jsx @@ -1,22 +1,17 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Trans, useTranslation } from 'react-i18next'; +import { Trans } from 'react-i18next'; -const Localize = ({ i18n_default_text, values, components, options, i18n, shouldUnescape }) => { - const { t } = useTranslation(); - - return ( - - ); -}; +const Localize = ({ i18n_default_text, values, components, options, i18n, shouldUnescape }) => ( + +); // Trans needs to have the i18n instance in scope // eslint-disable-next-line react/display-name diff --git a/packages/translations/src/i18next/i18next.ts b/packages/translations/src/i18next/i18next.ts index 6019eebed87d..cfbb4555e936 100644 --- a/packages/translations/src/i18next/i18next.ts +++ b/packages/translations/src/i18next/i18next.ts @@ -1,6 +1,6 @@ import { str as crc32 } from 'crc-32'; import i18n from 'i18next'; -import { initReactI18next, useTranslation } from 'react-i18next'; +import { initReactI18next } from 'react-i18next'; import { isProduction } from '../../../shared/src/utils/config/config'; import withI18n from '../components'; @@ -169,12 +169,6 @@ export const localize = (string: string, values?: Record) => { return i18n.t(crc32(string).toString(), { defaultValue: string, ...values }); }; -export const useLocalize = () => { - useTranslation(); - - return { localize }; -}; - const loadIncontextTranslation = () => { const is_ach = getLanguage().toUpperCase() === 'ACH'; if (is_ach) {