Revert 11034

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -7,7 +7,7 @@ import { isDesktop, isMobile } from '@deriv/shared';
 import { splitValidationResultTypes } from '../../real-account-signup/helpers/utils';
 import PersonalDetails from '../personal-details';
 import { shouldShowIdentityInformation, isDocumentTypeValid, isAdditionalDocumentValid } from 'Helpers/utils';
-import { StoreProvider, mockStore, ExchangeRatesProvider } from '@deriv/stores';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
 jest.mock('Assets/ic-poi-name-dob-example.svg', () => jest.fn(() => 'PoiNameDobExampleImage'));
 
@@ -289,9 +289,7 @@ describe('<PersonalDetails/>', () => {
         const mock_store = mockStore({});
         render(
             <StoreProvider store={mock_store}>
-                <ExchangeRatesProvider>
-                    <BrowserRouter>{component}</BrowserRouter>
-                </ExchangeRatesProvider>
+                <BrowserRouter>{component}</BrowserRouter>
             </StoreProvider>
         );
     };

packages/appstore/src/components/app.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CashierStoreProvider from '@deriv/cashier/src/cashier-providers';
 import CFDStoreProvider from '@deriv/cfd/src/cfd-providers';
-import { StoreProvider, ExchangeRatesProvider } from '@deriv/stores';
+import { StoreProvider } from '@deriv/stores';
 import AppContent from './app-content';
 import './app.scss';
 
@@ -15,9 +15,7 @@ const App: React.FC<TProps> = ({ passthrough: { root_store } }) => (
     <CashierStoreProvider store={root_store}>
         <CFDStoreProvider store={root_store}>
             <StoreProvider store={root_store}>
-                <ExchangeRatesProvider>
-                    <AppContent />
-                </ExchangeRatesProvider>
+                <AppContent />
             </StoreProvider>
         </CFDStoreProvider>
     </CashierStoreProvider>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { StoreProvider, mockStore, ExchangeRatesProvider } from '@deriv/stores';
+import { StoreProvider, mockStore } from '@deriv/stores';
 import { APIProvider /*useFetch*/ } from '@deriv/api';
 import MainTitleBar from '..';
 
@@ -58,9 +58,7 @@ describe('MainTitleBar', () => {
         const mock_store = mockStore({ feature_flags: { data: { wallet: false } } });
         const wrapper = ({ children }: React.PropsWithChildren) => (
             <APIProvider>
-                <StoreProvider store={mock_store_override ?? mock_store}>
-                    <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
-                </StoreProvider>
+                <StoreProvider store={mock_store_override ?? mock_store}>{children}</StoreProvider>
             </APIProvider>
         );
 

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

@@ -15,13 +15,10 @@ const AssetSummary = observer(() => {
     const { current_language } = common;
     const { real: platform_real_accounts, demo: platform_demo_account } = usePlatformAccounts();
     const { real: cfd_real_accounts, demo: cfd_demo_accounts } = useCFDAccounts();
-
     const platform_real_balance = useTotalAccountBalance(platform_real_accounts);
     const cfd_real_balance = useTotalAccountBalance(cfd_real_accounts);
     const cfd_demo_balance = useTotalAccountBalance(cfd_demo_accounts);
-
     const is_real = selected_account_type === 'real';
-
     const real_total_balance = platform_real_balance.balance + cfd_real_balance.balance;
     const demo_total_balance = (platform_demo_account?.balance || 0) + cfd_demo_balance.balance;
 

packages/appstore/src/modules/traders-hub/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, ButtonToggle, Div100vhContainer, Text } from '@deriv/components';
 import { isDesktop, routes, ContentFlag } from '@deriv/shared';
@@ -62,7 +61,7 @@ const TradersHub = observer(() => {
     };
     if (!is_logged_in) return null;
 
-    const OrderedPlatformSections = ({ is_cfd_visible = true, is_options_and_multipliers_visible = true }) => {
+    const renderOrderedPlatformSections = (is_cfd_visible = true, is_options_and_multipliers_visible = true) => {
         return (
             <div
                 data-testid='dt_traders_hub'
@@ -88,9 +87,7 @@ const TradersHub = observer(() => {
                 {can_show_notify && <Notifications />}
                 <div id='traders-hub' className='traders-hub' ref={traders_hub_ref}>
                     <MainTitleBar />
-                    <DesktopWrapper>
-                        <OrderedPlatformSections />
-                    </DesktopWrapper>
+                    <DesktopWrapper>{renderOrderedPlatformSections()}</DesktopWrapper>
                     <MobileWrapper>
                         {is_landing_company_loaded ? (
                             <ButtonToggle
@@ -105,10 +102,10 @@ const TradersHub = observer(() => {
                         ) : (
                             <ButtonToggleLoader />
                         )}
-                        <OrderedPlatformSections
-                            is_cfd_visible={selected_platform_type === 'cfd'}
-                            is_options_and_multipliers_visible={selected_platform_type === 'options'}
-                        />
+                        {renderOrderedPlatformSections(
+                            selected_platform_type === 'cfd',
+                            selected_platform_type === 'options'
+                        )}
                     </MobileWrapper>
                     <ModalManager />
                     {scrolled && <TourGuide />}

packages/cashier/src/app.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import AppContent from './app-content';
 import CashierProviders from './cashier-providers';
-import { ExchangeRatesProvider } from '@deriv/stores';
 
 type TProps = { passthrough: { root_store: React.ComponentProps<typeof CashierProviders>['store'] } };
 
 const App: React.FC<TProps> = ({ passthrough: { root_store } }) => {
     return (
         <CashierProviders store={root_store}>
-            <ExchangeRatesProvider>
-                <AppContent />
-            </ExchangeRatesProvider>
+            <AppContent />
         </CashierProviders>
     );
 };

packages/cashier/src/components/crypto-fiat-converter/__tests__/crypto-fiat-converter.spec.tsx

@@ -4,7 +4,7 @@ import CryptoFiatConverter from '../crypto-fiat-converter';
 import { Formik } from 'formik';
 import * as formik from 'formik';
 import CashierProviders from '../../../cashier-providers';
-import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 
 describe('<CryptoFiatConverter />', () => {
     let mockRootStore: ReturnType<typeof mockStore>, mockProps: React.ComponentProps<typeof CryptoFiatConverter>;
@@ -16,6 +16,7 @@ describe('<CryptoFiatConverter />', () => {
                     crypto_fiat_converter: {
                         converter_from_amount: '100',
                         converter_to_amount: '200',
+                        is_timer_visible: true,
                     },
                 },
             },
@@ -36,11 +37,9 @@ describe('<CryptoFiatConverter />', () => {
     const renderCryptoFiatConverter = () => {
         return render(
             <CashierProviders store={mockRootStore}>
-                <ExchangeRatesProvider>
-                    <Formik initialValues={{}} onSubmit={() => Promise.resolve()}>
-                        <CryptoFiatConverter {...mockProps} />
-                    </Formik>
-                </ExchangeRatesProvider>
+                <Formik initialValues={{}} onSubmit={() => Promise.resolve()}>
+                    <CryptoFiatConverter {...mockProps} />
+                </Formik>
             </CashierProviders>
         );
     };
@@ -52,6 +51,7 @@ describe('<CryptoFiatConverter />', () => {
         expect(screen.getByText('Amount (USD)')).toBeInTheDocument();
         expect(screen.getByText('Transfer limits')).toBeInTheDocument();
         expect(screen.getByText('Approximate value')).toBeInTheDocument();
+        expect(screen.getByText('60s')).toBeInTheDocument();
     });
 
     it('should change arrow direction when the focus changes between inputs', () => {
@@ -74,13 +74,6 @@ describe('<CryptoFiatConverter />', () => {
     });
 
     it('should trigger onChange callback when the input field changes', () => {
-        const mockJson = {
-            BTC: {
-                USD: 2.2,
-            },
-        };
-        window.localStorage.setItem('exchange_rates', JSON.stringify(mockJson));
-
         const use_formik_context = jest.spyOn(formik, 'useFormikContext') as any;
         use_formik_context.mockReturnValueOnce({ handleChange: jest.fn() });
 

packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx

@@ -82,10 +82,15 @@ const CryptoFiatConverter = observer(
         validateToAmount,
     }: TCryptoFiatConverterProps) => {
         const { crypto_fiat_converter } = useCashierStore();
-        const { exchange_rates } = useExchangeRate();
+        const { getRate } = useExchangeRate();
 
-        const { converter_from_amount, converter_from_error, converter_to_error, converter_to_amount } =
-            crypto_fiat_converter;
+        const {
+            converter_from_amount,
+            converter_from_error,
+            converter_to_error,
+            converter_to_amount,
+            is_timer_visible,
+        } = crypto_fiat_converter;
 
         const { handleChange } = useFormikContext();
         const [arrow_icon_direction, setArrowIconDirection] = React.useState<string>('right');
@@ -110,8 +115,9 @@ const CryptoFiatConverter = observer(
                                 setArrowIconDirection('right');
                             }}
                             onChange={(e: TReactChangeEvent) => {
-                                const rate = exchange_rates?.[from_currency]?.[to_currency] ?? 1;
-                                const converted_amount = Number(e.target.value) * rate;
+                                const from_rate = getRate(from_currency || '');
+                                const to_rate = getRate(to_currency || '');
+                                const converted_amount = (Number(e.target.value) * to_rate) / from_rate;
                                 onChangeConverterFromAmount(e, from_currency, to_currency, converted_amount);
                                 handleChange(e);
                             }}
@@ -148,8 +154,9 @@ const CryptoFiatConverter = observer(
                                     setArrowIconDirection('left');
                                 }}
                                 onChange={(e: TReactChangeEvent) => {
-                                    const rate = exchange_rates?.[to_currency]?.[from_currency] ?? 1;
-                                    const converted_amount = Number(e.target.value) * rate;
+                                    const from_rate = getRate(from_currency || '');
+                                    const to_rate = getRate(to_currency || '');
+                                    const converted_amount = (Number(e.target.value) * from_rate) / to_rate;
                                     onChangeConverterToAmount(e, to_currency, from_currency, converted_amount);
                                     handleChange(e);
                                 }}
@@ -164,6 +171,21 @@ const CryptoFiatConverter = observer(
                                 classNameHint='crypto-fiat-converter__hint'
                                 data-testid='dt_converter_to_amount_input'
                             />
+                            {is_timer_visible && (
+                                <Timer
+                                    onComplete={() => {
+                                        const from_rate = getRate(from_currency || '');
+                                        const to_rate = getRate(to_currency || '');
+                                        const converted_amount = (Number(converter_from_amount) * to_rate) / from_rate;
+                                        onChangeConverterFromAmount(
+                                            { target: { value: converter_from_amount } },
+                                            from_currency,
+                                            to_currency,
+                                            converted_amount
+                                        );
+                                    }}
+                                />
+                            )}
                         </InputGroup>
                     )}
                 </Field>

packages/cashier/src/components/percentage-selector/__tests__/percentage-selector.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import PercentageSelector from '../percentage-selector';
-import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 import CryptoFiatConverter from '../../crypto-fiat-converter';
 
@@ -34,9 +34,7 @@ describe('<PercentageSelector />', () => {
     it('should render the component', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <ExchangeRatesProvider>
-                    <PercentageSelector {...percentage_selector_props} />
-                </ExchangeRatesProvider>
+                <PercentageSelector {...percentage_selector_props} />
             </CashierProviders>
         );
 
@@ -46,9 +44,7 @@ describe('<PercentageSelector />', () => {
     it('should calculate the percentage amount on click of percentage block', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <ExchangeRatesProvider>
-                    <PercentageSelector {...percentage_selector_props} />
-                </ExchangeRatesProvider>
+                <PercentageSelector {...percentage_selector_props} />
             </CashierProviders>
         );
 
@@ -68,9 +64,7 @@ describe('<PercentageSelector />', () => {
     it('should reset the percentage block upon clicking twice', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <ExchangeRatesProvider>
-                    <PercentageSelector {...percentage_selector_props} />
-                </ExchangeRatesProvider>
+                <PercentageSelector {...percentage_selector_props} />
             </CashierProviders>
         );
 
@@ -98,9 +92,7 @@ describe('<PercentageSelector />', () => {
     it('should reset the percentage', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <ExchangeRatesProvider>
-                    <PercentageSelector {...percentage_selector_props} should_percentage_reset />
-                </ExchangeRatesProvider>
+                <PercentageSelector {...percentage_selector_props} should_percentage_reset />
             </CashierProviders>
         );
 

packages/cashier/src/components/percentage-selector/percentage-selector.tsx

@@ -29,7 +29,7 @@ const PercentageSelector = ({
     to_currency,
 }: TPercentageSelectorProps) => {
     const [selected_percentage, setSelectedPercentage] = React.useState<number | string>('0');
-    const { exchange_rates } = useExchangeRate();
+    const { getRate } = useExchangeRate();
     React.useEffect(() => {
         if (should_percentage_reset) {
             for (let i = 1; i <= 4; i++) {
@@ -55,9 +55,9 @@ const PercentageSelector = ({
         if (is_percentage_selected) new_percentage -= 25;
 
         setSelectedPercentage(new_percentage || 0);
-        const rate = exchange_rates?.[from_currency]?.[to_currency] ?? 1;
-        const converted_amount = amount * (new_percentage / 100) * rate;
-
+        const from_rate = getRate(from_currency || '');
+        const to_rate = getRate(to_currency || '');
+        const converted_amount = (amount * (new_percentage / 100) * to_rate) / from_rate;
         getCalculatedAmount(
             (amount * (new_percentage / 100)).toFixed(getDecimalPlaces(from_currency)),
             converted_amount

packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { isMobile } from '@deriv/shared';
 import { fireEvent, render, screen } from '@testing-library/react';
 import CashierProviders from '../../../../cashier-providers';
-import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 import { TError } from '../../../../types';
 import AccountTransferForm from '../account-transfer-form';
 
@@ -123,11 +123,7 @@ describe('<AccountTransferForm />', () => {
 
     const renderAccountTransferForm = () => {
         render(<AccountTransferForm {...props} />, {
-            wrapper: ({ children }) => (
-                <CashierProviders store={mockRootStore}>
-                    <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
-                </CashierProviders>
-            ),
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
         });
     };
 

packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx

@@ -24,7 +24,6 @@ import SideNote from '../../../components/side-note';
 import { useCashierStore } from '../../../stores/useCashierStores';
 import { TAccount, TAccountsList, TError, TReactChangeEvent } from '../../../types';
 import AccountTransferReceipt from '../account-transfer-receipt/account-transfer-receipt';
-import { useExchangeRate } from '@deriv/hooks';
 
 import AccountTransferNote from './account-transfer-form-side-note';
 
@@ -92,7 +91,6 @@ const AccountTransferForm = observer(
         const { is_mobile } = ui;
         const { account_limits, authentication_status, is_dxtrade_allowed, getLimits: onMount } = client;
         const { account_transfer, crypto_fiat_converter, general_store } = useCashierStore();
-        const { handleSubscription } = useExchangeRate();
 
         const {
             account_transfer_amount,
@@ -185,13 +183,6 @@ const AccountTransferForm = observer(
             return [];
         };
 
-        React.useEffect(() => {
-            if (selected_from?.currency && selected_to?.currency) {
-                const base_currency = selected_from.currency;
-                const target_currency = selected_to.currency;
-                handleSubscription(base_currency, target_currency);
-            }
-        }, [selected_from, selected_to]);
         React.useEffect(() => {
             onMount();
         }, [onMount]);