Shayan/P2PS-1753/refactor exchange rates hook

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 } from '@deriv/stores';
+import { StoreProvider, mockStore, ExchangeRatesProvider } from '@deriv/stores';
 
 jest.mock('Assets/ic-poi-name-dob-example.svg', () => jest.fn(() => 'PoiNameDobExampleImage'));
 
@@ -289,7 +289,9 @@ describe('<PersonalDetails/>', () => {
         const mock_store = mockStore({});
         render(
             <StoreProvider store={mock_store}>
-                <BrowserRouter>{component}</BrowserRouter>
+                <ExchangeRatesProvider>
+                    <BrowserRouter>{component}</BrowserRouter>
+                </ExchangeRatesProvider>
             </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 } from '@deriv/stores';
+import { StoreProvider, ExchangeRatesProvider } from '@deriv/stores';
 import AppContent from './app-content';
 import './app.scss';
 
@@ -15,7 +15,9 @@ const App: React.FC<TProps> = ({ passthrough: { root_store } }) => (
     <CashierStoreProvider store={root_store}>
         <CFDStoreProvider store={root_store}>
             <StoreProvider store={root_store}>
-                <AppContent />
+                <ExchangeRatesProvider>
+                    <AppContent />
+                </ExchangeRatesProvider>
             </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 } from '@deriv/stores';
+import { StoreProvider, mockStore, ExchangeRatesProvider } from '@deriv/stores';
 import { APIProvider /*useFetch*/ } from '@deriv/api';
 import MainTitleBar from '..';
 
@@ -58,7 +58,9 @@ describe('MainTitleBar', () => {
         const mock_store = mockStore({ feature_flags: { data: { wallet: false } } });
         const wrapper = ({ children }: React.PropsWithChildren) => (
             <APIProvider>
-                <StoreProvider store={mock_store_override ?? mock_store}>{children}</StoreProvider>
+                <StoreProvider store={mock_store_override ?? mock_store}>
+                    <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
+                </StoreProvider>
             </APIProvider>
         );
 

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

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

packages/cashier/src/app.tsx

@@ -1,13 +1,16 @@
 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}>
-            <AppContent />
+            <ExchangeRatesProvider>
+                <AppContent />
+            </ExchangeRatesProvider>
         </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 } from '@deriv/stores';
+import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
 
 describe('<CryptoFiatConverter />', () => {
     let mockRootStore: ReturnType<typeof mockStore>, mockProps: React.ComponentProps<typeof CryptoFiatConverter>;
@@ -16,7 +16,6 @@ describe('<CryptoFiatConverter />', () => {
                     crypto_fiat_converter: {
                         converter_from_amount: '100',
                         converter_to_amount: '200',
-                        is_timer_visible: true,
                     },
                 },
             },
@@ -37,9 +36,11 @@ describe('<CryptoFiatConverter />', () => {
     const renderCryptoFiatConverter = () => {
         return render(
             <CashierProviders store={mockRootStore}>
-                <Formik initialValues={{}} onSubmit={() => Promise.resolve()}>
-                    <CryptoFiatConverter {...mockProps} />
-                </Formik>
+                <ExchangeRatesProvider>
+                    <Formik initialValues={{}} onSubmit={() => Promise.resolve()}>
+                        <CryptoFiatConverter {...mockProps} />
+                    </Formik>
+                </ExchangeRatesProvider>
             </CashierProviders>
         );
     };
@@ -51,7 +52,6 @@ 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,6 +74,13 @@ 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,15 +82,10 @@ const CryptoFiatConverter = observer(
         validateToAmount,
     }: TCryptoFiatConverterProps) => {
         const { crypto_fiat_converter } = useCashierStore();
-        const { getRate } = useExchangeRate();
+        const { exchange_rates } = useExchangeRate();
 
-        const {
-            converter_from_amount,
-            converter_from_error,
-            converter_to_error,
-            converter_to_amount,
-            is_timer_visible,
-        } = crypto_fiat_converter;
+        const { converter_from_amount, converter_from_error, converter_to_error, converter_to_amount } =
+            crypto_fiat_converter;
 
         const { handleChange } = useFormikContext();
         const [arrow_icon_direction, setArrowIconDirection] = React.useState<string>('right');
@@ -115,9 +110,8 @@ const CryptoFiatConverter = observer(
                                 setArrowIconDirection('right');
                             }}
                             onChange={(e: TReactChangeEvent) => {
-                                const from_rate = getRate(from_currency || '');
-                                const to_rate = getRate(to_currency || '');
-                                const converted_amount = (Number(e.target.value) * to_rate) / from_rate;
+                                const rate = exchange_rates?.[from_currency]?.[to_currency] ?? 1;
+                                const converted_amount = Number(e.target.value) * rate;
                                 onChangeConverterFromAmount(e, from_currency, to_currency, converted_amount);
                                 handleChange(e);
                             }}
@@ -154,9 +148,8 @@ const CryptoFiatConverter = observer(
                                     setArrowIconDirection('left');
                                 }}
                                 onChange={(e: TReactChangeEvent) => {
-                                    const from_rate = getRate(from_currency || '');
-                                    const to_rate = getRate(to_currency || '');
-                                    const converted_amount = (Number(e.target.value) * from_rate) / to_rate;
+                                    const rate = exchange_rates?.[to_currency]?.[from_currency] ?? 1;
+                                    const converted_amount = Number(e.target.value) * rate;
                                     onChangeConverterToAmount(e, to_currency, from_currency, converted_amount);
                                     handleChange(e);
                                 }}
@@ -171,21 +164,6 @@ 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 } from '@deriv/stores';
+import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
 import CashierProviders from '../../../cashier-providers';
 import CryptoFiatConverter from '../../crypto-fiat-converter';
 
@@ -34,7 +34,9 @@ describe('<PercentageSelector />', () => {
     it('should render the component', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <PercentageSelector {...percentage_selector_props} />
+                <ExchangeRatesProvider>
+                    <PercentageSelector {...percentage_selector_props} />
+                </ExchangeRatesProvider>
             </CashierProviders>
         );
 
@@ -44,7 +46,9 @@ describe('<PercentageSelector />', () => {
     it('should calculate the percentage amount on click of percentage block', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <PercentageSelector {...percentage_selector_props} />
+                <ExchangeRatesProvider>
+                    <PercentageSelector {...percentage_selector_props} />
+                </ExchangeRatesProvider>
             </CashierProviders>
         );
 
@@ -64,7 +68,9 @@ describe('<PercentageSelector />', () => {
     it('should reset the percentage block upon clicking twice', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <PercentageSelector {...percentage_selector_props} />
+                <ExchangeRatesProvider>
+                    <PercentageSelector {...percentage_selector_props} />
+                </ExchangeRatesProvider>
             </CashierProviders>
         );
 
@@ -92,7 +98,9 @@ describe('<PercentageSelector />', () => {
     it('should reset the percentage', () => {
         render(
             <CashierProviders store={mockRootStore}>
-                <PercentageSelector {...percentage_selector_props} should_percentage_reset />
+                <ExchangeRatesProvider>
+                    <PercentageSelector {...percentage_selector_props} should_percentage_reset />
+                </ExchangeRatesProvider>
             </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 { getRate } = useExchangeRate();
+    const { exchange_rates } = 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 from_rate = getRate(from_currency || '');
-        const to_rate = getRate(to_currency || '');
-        const converted_amount = (amount * (new_percentage / 100) * to_rate) / from_rate;
+        const rate = exchange_rates?.[from_currency]?.[to_currency] ?? 1;
+        const converted_amount = amount * (new_percentage / 100) * 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 { fireEvent, render, screen } from '@testing-library/react';
 import { isMobile } from '@deriv/shared';
 import AccountTransferForm from '../account-transfer-form';
 import CashierProviders from '../../../../cashier-providers';
-import { mockStore } from '@deriv/stores';
+import { mockStore, ExchangeRatesProvider } from '@deriv/stores';
 import { TError } from '../../../../types';
 
 jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
@@ -122,7 +122,11 @@ describe('<AccountTransferForm />', () => {
 
     const renderAccountTransferForm = () => {
         render(<AccountTransferForm {...props} />, {
-            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
+            wrapper: ({ children }) => (
+                <CashierProviders store={mockRootStore}>
+                    <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
+                </CashierProviders>
+            ),
         });
     };
 

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

@@ -24,6 +24,7 @@ import AccountPlatformIcon from '../../../components/account-platform-icon';
 import { useCashierStore } from '../../../stores/useCashierStores';
 import './account-transfer-form.scss';
 import AccountTransferReceipt from '../account-transfer-receipt/account-transfer-receipt';
+import { useExchangeRate } from '@deriv/hooks';
 
 type TAccountTransferFormProps = {
     error?: TError;
@@ -91,6 +92,7 @@ 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,
@@ -187,6 +189,13 @@ 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]);