Fix feature/wallets with traders hub

packages/appstore/src/components/containers/wallet.tsx

@@ -12,13 +12,14 @@ type TWallet = {
 
 const Wallet = ({ wallet_account }: TWallet) => {
     const headerRef = React.useRef<HTMLDivElement>(null);
+    const { is_selected, is_demo, is_malta_wallet } = wallet_account;
 
     return (
-        <div ref={headerRef} className={classNames('wallet', { wallet__demo: wallet_account.is_demo })}>
+        <div ref={headerRef} className={classNames('wallet', { wallet__demo: is_demo })}>
             <WalletHeader wallet_account={wallet_account} />
             <CSSTransition
                 appear
-                in={wallet_account.is_selected}
+                in={is_selected}
                 timeout={240}
                 onEntered={() => {
                     if (headerRef?.current) {
@@ -29,7 +30,7 @@ const Wallet = ({ wallet_account }: TWallet) => {
                 classNames='wallet__content-transition'
                 unmountOnExit
             >
-                <WalletContent is_demo={wallet_account.is_demo} is_malta_wallet={wallet_account.is_malta_wallet} />
+                <WalletContent is_demo={is_demo} is_malta_wallet={is_malta_wallet} />
             </CSSTransition>
         </div>
     );

packages/appstore/src/components/demo-reset-balance/__tests__/demo-reset-balance.spec.tsx

@@ -30,7 +30,7 @@ describe('<DemoResetBalance />', () => {
         expect(
             screen.getByText('Reset your virtual balance if it falls below 10,000.00 USD or exceeds 10,000.00 USD.')
         ).toBeInTheDocument();
-        expect(screen.getByText('Reset balance')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Reset balance' })).toBeInTheDocument();
     });
 
     it('should disable reset balance button if the balance is equal to 10000 usd', () => {
@@ -129,6 +129,6 @@ describe('<DemoResetBalance />', () => {
         });
 
         expect(screen.getByText('Your balance has been reset to 10,000.00 USD.')).toBeInTheDocument();
-        expect(screen.getByText('Transfer funds')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Transfer funds/i })).toBeInTheDocument();
     });
 });

packages/appstore/src/components/eu-disclaimer/__tests__/eu-disclaimer.spec.tsx

@@ -22,7 +22,7 @@ describe('<EUDisclaimer />', () => {
     it('Check disclaimer for wallets exists', () => {
         render(
             <StoreProvider store={mockedRootStore}>
-                <EUDisclaimer is_wallet={true} />
+                <EUDisclaimer is_wallet />
             </StoreProvider>
         );
 

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

@@ -3,13 +3,13 @@ import { Text, DesktopWrapper, MobileWrapper, Tabs, Icon } from '@deriv/componen
 import { useFeatureFlags } from '@deriv/hooks';
 import { ContentFlag } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
+import { Localize, localize } from '@deriv/translations';
+import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
+import WalletsBanner from 'Components/wallets-banner';
 import AccountTypeDropdown from './account-type-dropdown';
 import AssetSummary from './asset-summary';
 import RegulatorSwitcher from './regulators-switcher';
-import { localize } from '@deriv/translations';
 import './main-title-bar.scss';
-import RegulationsSwitcherLoader from 'Components/pre-loader/regulations-switcher-loader';
-import WalletsBanner from 'Components/wallets-banner';
 
 const MainTitleBar = () => {
     const { traders_hub, client, notifications } = useStore();
@@ -36,12 +36,12 @@ const MainTitleBar = () => {
 
     return (
         <React.Fragment>
+            {is_wallet_enabled && <WalletsBanner />}
             <DesktopWrapper>
-                {is_wallet_enabled && <WalletsBanner />}
                 <div className='main-title-bar'>
                     <div className='main-title-bar__right'>
                         <Text size='m' weight='bold' color='prominent'>
-                            {localize("Trader's Hub")}
+                            <Localize i18n_default_text="Trader's Hub" />
                         </Text>
                         <AccountTypeDropdown />
                     </div>
@@ -50,9 +50,8 @@ const MainTitleBar = () => {
                 </div>
             </DesktopWrapper>
             <MobileWrapper>
-                {is_wallet_enabled && <WalletsBanner />}
                 <Text weight='bold' className='main-title-bar__text' color='prominent'>
-                    {localize("Trader's Hub")}
+                    <Localize i18n_default_text="Trader's Hub" />
                 </Text>
                 <div className='main-title-bar-mobile'>
                     <div className='main-title-bar-mobile--account-type-dropdown'>

packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-link/wallet-link-wrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Icon, Text, WalletCard } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import WalletAccount from '../wallet-account/wallet-account';
 import { observer, useStore } from '@deriv/stores';
 import './wallet-link-wrapper.scss';
@@ -29,7 +29,7 @@ const WalletLinkWrapper = observer(({ wallet_details, account_list }: TWalletLin
                         color='prominent'
                         size='xxxs'
                     >
-                        {localize('Your current trading account(s)')}
+                        <Localize i18n_default_text='Your current trading account(s)' />
                     </Text>
                 )}
                 {account_list.map(account => {
@@ -62,7 +62,7 @@ const WalletLinkWrapper = observer(({ wallet_details, account_list }: TWalletLin
                         color='prominent'
                         size='xxxs'
                     >
-                        {localize('Your new Wallet')}
+                        <Localize i18n_default_text='Your new Wallet' />
                     </Text>
                 )}
             </div>

packages/appstore/src/components/modals/real-wallets-upgrade/components/wallet-linking-step/wallet-linking-step.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, ThemedScrollbars } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import WalletLinkWrapper, { TWalletLinkWrapper } from '../wallet-link/wallet-link-wrapper';
 import './wallet-linking-step.scss';
@@ -18,17 +18,15 @@ const WalletLinkingStep = observer(({ data }: TWalletLinkingStep) => {
                 {data.title}
             </Text>
             <Text as='div' className='wallet-linking-step__description' color='prominent' size={is_mobile ? 'xs' : 's'}>
-                {localize('This is how we link your accounts with your new Wallet.')}
+                <Localize i18n_default_text='This is how we link your accounts with your new Wallet.' />
             </Text>
             <Text
                 as='span'
                 className='wallet-linking-step__note wallet-linking-step__title-text'
                 color='prominent'
                 size='xxs'
             >
-                {localize(
-                    'Your existing funds will remain in your trading account(s) and can be transferred to your Wallet after the upgrade.'
-                )}
+                <Localize i18n_default_text='Your existing funds will remain in your trading account(s) and can be transferred to your Wallet after the upgrade.' />
             </Text>
             {!is_mobile && (
                 <div className='wallet-linking-step__title-small'>
@@ -37,14 +35,14 @@ const WalletLinkingStep = observer(({ data }: TWalletLinkingStep) => {
                         color='prominent'
                         size='xxxs'
                     >
-                        {localize('Your current trading account(s)')}
+                        <Localize i18n_default_text='Your current trading account(s)' />
                     </Text>
                     <Text
                         className='wallet-linking-step__title-text wallet-linking-step__title-small-text'
                         color='prominent'
                         size='xxxs'
                     >
-                        {localize('Your new Wallet(s)')}
+                        <Localize i18n_default_text='Your new Wallet(s)' />
                     </Text>
                 </div>
             )}

packages/appstore/src/components/modals/real-wallets-upgrade/real-wallets-upgrade.tsx

@@ -36,28 +36,22 @@ const RealWalletsUpgrade = observer(() => {
         setIsDisabled(prevDisabled => !prevDisabled);
     };
 
+    const wallet_upgrade_props = {
+        current_step,
+        handleBack,
+        handleClose,
+        handleNext,
+        is_disabled,
+        toggleCheckbox,
+        upgradeToWallets,
+    };
+
     return (
         <React.Fragment>
             {is_mobile ? (
-                <MobileRealWalletsUpgrade
-                    current_step={current_step}
-                    handleBack={handleBack}
-                    handleClose={handleClose}
-                    handleNext={handleNext}
-                    is_disabled={is_disabled}
-                    toggleCheckbox={toggleCheckbox}
-                    upgradeToWallets={upgradeToWallets}
-                />
+                <MobileRealWalletsUpgrade {...wallet_upgrade_props} />
             ) : (
-                <DesktopRealWalletsUpgrade
-                    current_step={current_step}
-                    handleBack={handleBack}
-                    handleClose={handleClose}
-                    handleNext={handleNext}
-                    is_disabled={is_disabled}
-                    toggleCheckbox={toggleCheckbox}
-                    upgradeToWallets={upgradeToWallets}
-                />
+                <DesktopRealWalletsUpgrade {...wallet_upgrade_props} />
             )}
         </React.Fragment>
     );

packages/appstore/src/components/modals/wallets-migration-failed/wallets-migration-failed.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, useOnClickOutside, Modal, Button } from '@deriv/components';
-import { localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
 import './wallets-migration-failed.scss';
 
 const WalletsMigrationFailed = observer(() => {
@@ -43,20 +43,18 @@ const WalletsMigrationFailed = observer(() => {
                         weight='bold'
                         className='wallets-migration-failed__title'
                     >
-                        {localize('Sorry for the interruption')}
+                        <Localize i18n_default_text='Sorry for the interruption' />
                     </Text>
                     <Text size={is_mobile ? 'xxs' : 'xs'}>
-                        {localize(
-                            "We're unable to complete with the Wallet upgrade. Please try again later or contact us via live chat."
-                        )}
+                        <Localize i18n_default_text='We’re unable to complete with the Wallet upgrade. Please try again later or contact us via live chat.' />
                     </Text>
                 </Modal.Body>
                 <Modal.Footer className='wallets-migration-failed__footer'>
                     <Button secondary large onClick={handLiveChatButtonClick}>
-                        {localize('Go to live chat')}
+                        <Localize i18n_default_text='Go to live chat' />
                     </Button>
                     <Button primary large onClick={handleClose} classNameSpan='wallets-migration-failed__text'>
-                        {localize('Back to Trader’s Hub')}
+                        <Localize i18n_default_text='Back to Trader’s Hub' />
                     </Button>
                 </Modal.Footer>
             </div>

packages/appstore/src/components/options-multipliers-listing/index.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Text, StaticUrl } from '@deriv/components';
+import { ContentFlag } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import ListingContainer from 'Components/containers/listing-container';
-import { BrandConfig } from 'Constants/platform-config';
-import TradingAppCard from 'Components/containers/trading-app-card';
-import { useStores } from 'Stores/index';
-import { isMobile, ContentFlag } from '@deriv/shared';
 import PlatformLoader from 'Components/pre-loader/platform-loader';
+import TradingAppCard from 'Components/containers/trading-app-card';
+import { BrandConfig } from 'Constants/platform-config';
 import { getHasDivider } from 'Constants/utils';
 
-const OptionsAndMultipliersListing = () => {
-    const { traders_hub, client, ui } = useStores();
+const OptionsAndMultipliersListing = observer(() => {
+    const { traders_hub, client, ui } = useStore();
     const { available_platforms, is_eu_user, is_real, no_MF_account, no_CR_account, is_demo, content_flag } =
         traders_hub;
     const { is_landing_company_loaded, is_eu, has_maltainvest_account, real_account_creation_unlock_date } = client;
 
-    const { setShouldShowCooldownModal, openRealAccountSignup } = ui;
+    const { setShouldShowCooldownModal, openRealAccountSignup, is_mobile } = ui;
 
     const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU;
 
@@ -27,13 +27,14 @@ const OptionsAndMultipliersListing = () => {
     const cr_demo = content_flag === ContentFlag.CR_DEMO;
 
     const OptionsTitle = () => {
-        if ((low_risk_cr_non_eu || high_risk_cr || cr_demo) && !isMobile()) {
+        if (is_mobile) return null;
+        if (low_risk_cr_non_eu || high_risk_cr || cr_demo) {
             return (
                 <Text size='sm' weight='bold'>
                     <Localize i18n_default_text='Options & Multipliers' />
                 </Text>
             );
-        } else if ((low_risk_cr_eu || is_eu) && !isMobile()) {
+        } else if (low_risk_cr_eu || is_eu) {
             return (
                 <Text size='sm' weight='bold' color='prominent'>
                     <Localize i18n_default_text='Multipliers' />
@@ -113,6 +114,6 @@ const OptionsAndMultipliersListing = () => {
             )}
         </ListingContainer>
     );
-};
+});
 
-export default observer(OptionsAndMultipliersListing);
+export default OptionsAndMultipliersListing;

packages/appstore/src/components/transaction-list/non-pending-transaction.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { AppLinkedWithWalletIcon, Text, WalletIcon } from '@deriv/components';
 import { useWalletTransactions } from '@deriv/hooks';
 import { useStore } from '@deriv/stores';
+import { Localize } from '@deriv/translations';
 
 type TNonPendingTransaction = {
     transaction: ReturnType<typeof useWalletTransactions>['transactions'][number];
@@ -99,7 +100,13 @@ const NonPendingTransaction = ({ transaction }: TNonPendingTransaction) => {
                     weight='lighter'
                     line_height={is_mobile ? 'm' : 's'}
                 >
-                    Balance: {formatAmount(balance_after)} {account_currency}
+                    <Localize
+                        i18n_default_text='Balance: {{balance}} {{currency}}'
+                        values={{
+                            balance: formatAmount(balance_after),
+                            currency: account_currency,
+                        }}
+                    />
                 </Text>
             </div>
         </div>

packages/appstore/src/components/wallet-button/__tests__/wallet-button.spec.tsx

@@ -22,15 +22,14 @@ describe('<WalletButton />', () => {
                 <WalletButton button={button} />
             </StoreProvider>
         );
-        const button_text = screen.queryByText('Transfer');
 
-        expect(button_text).toBeInTheDocument();
+        expect(screen.getByText('Transfer')).toBeInTheDocument();
     });
 
     it('Should render desktop class', () => {
         const { container } = render(
             <StoreProvider store={mockedRootStore}>
-                <WalletButton button={button} is_desktop_wallet={true} />
+                <WalletButton button={button} is_desktop_wallet />
             </StoreProvider>
         );
 
@@ -52,7 +51,7 @@ describe('<WalletButton />', () => {
     it('Should add disabled class', () => {
         const { container } = render(
             <StoreProvider store={mockedRootStore}>
-                <WalletButton button={button} is_desktop_wallet={true} is_disabled={true} />
+                <WalletButton button={button} is_desktop_wallet is_disabled />
             </StoreProvider>
         );