Merge pull request #18 from nada-deriv/fix-types

fix: type issues in build

package.json

@@ -14,7 +14,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@deriv-com/api-hooks": "^0.1.8",
+    "@deriv-com/api-hooks": "^0.1.13",
     "@deriv-com/ui": "latest",
     "@deriv-com/utils": "latest",
     "@deriv/deriv-api": "^1.0.15",

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -4,7 +4,7 @@ import { OnlineStatusIcon, OnlineStatusLabel, StarRating } from '@/components';
 import { getCurrentRoute } from '@/utils';
 import { Text, useDevice } from '@deriv-com/ui';
 import ThumbUpIcon from '../../public/ic-thumb-up.svg';
-import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg';
+import BlockedUserOutlineIcon from '../../public/ic-user-blocked-outline.svg?react';
 import './AdvertiserNameStats.scss';
 
 /**

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -1,21 +1,22 @@
-import { Fragment, memo, useState } from 'react';
+import { Fragment, memo, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
-import { TAdvertsTableRowRenderer } from 'types';
+import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types';
 import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
 import { ADVERTISER_URL, BUY_SELL } from '@/constants';
 import { api } from '@/hooks';
 import { useIsAdvertiser } from '@/hooks/custom-hooks';
 import { generateEffectiveRate, getCurrentRoute } from '@/utils';
 import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
+import { useExchangeRates } from '@deriv-com/api-hooks';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './AdvertsTableRow.scss';
 
 const BASE_CURRENCY = 'USD';
 
 const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { subscribeRates } = api.account.useExchangeRateSubscription();
+    const { subscribeRates } = useExchangeRates();
     const { isDesktop, isMobile } = useDevice();
     const history = useHistory();
     const isBuySellPage = getCurrentRoute() === 'buy-sell';
@@ -26,12 +27,14 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const { data } = api.advertiser.useGetInfo() || {};
     const { daily_buy = 0, daily_buy_limit = 0, daily_sell = 0, daily_sell_limit = 0 } = data || {};
 
+    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+
     const {
         account_currency,
         advertiser_details,
         counterparty_type,
         effective_rate,
-        local_currency,
+        local_currency = '',
         max_order_amount_limit_display,
         min_order_amount_limit_display,
         payment_method_names,
@@ -40,15 +43,22 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
         rate_type,
     } = props;
 
-    const exchangeRate = subscribeRates({ base_currency: BASE_CURRENCY, target_currencies: [local_currency] });
+    useEffect(() => {
+        if (local_currency) {
+            exchangeRateRef.current = subscribeRates({
+                base_currency: BASE_CURRENCY,
+                target_currencies: [local_currency],
+            });
+        }
+    }, [local_currency]);
 
     const Container = isMobile ? 'div' : Fragment;
 
     const { completed_orders_count, id, is_online, name, rating_average, rating_count } = advertiser_details || {};
 
     const { displayEffectiveRate, effectiveRate } = generateEffectiveRate({
-        exchangeRate: exchangeRate?.rates?.[local_currency],
-        localCurrency: local_currency,
+        exchangeRate: exchangeRateRef.current?.rates?.[local_currency],
+        localCurrency: local_currency as TCurrency,
         marketRate: Number(effective_rate),
         price: Number(price_display),
         rate,

src/components/BuySellForm/__tests__/BuySellForm.spec.tsx

@@ -26,7 +26,17 @@ const mockOnChange = jest.fn();
 const mockHandleSubmit = jest.fn();
 jest.mock('react-hook-form', () => ({
     ...jest.requireActual('react-hook-form'),
-    Controller: ({ control, defaultValue, name, render }) =>
+    Controller: ({
+        control,
+        defaultValue,
+        name,
+        render,
+    }: {
+        control: string;
+        defaultValue: object;
+        name: string;
+        render: (param: object) => void;
+    }) =>
         render({
             field: { control, name, onBlur: jest.fn(), onChange: mockOnChange, value: defaultValue },
             fieldState: { error: null },

src/components/FloatingRate/FloatingRate.tsx

@@ -1,6 +1,8 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, useEffect, useRef } from 'react';
+import { TCurrency, TExchangeRate } from 'types';
 import { api } from '@/hooks';
 import { mobileOSDetect, percentOf, removeTrailingZeros, roundOffDecimal, setDecimalPlaces } from '@/utils';
+import { useExchangeRates } from '@deriv-com/api-hooks';
 import { Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 import InputField from '../InputField';
@@ -10,7 +12,7 @@ type TFloatingRate = {
     changeHandler?: (event: ChangeEvent<HTMLInputElement>) => void;
     errorMessages: string;
     fiatCurrency: string;
-    localCurrency: string;
+    localCurrency: TCurrency;
     name?: string;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     value?: string;
@@ -25,16 +27,25 @@ const FloatingRate = ({
     onChange,
     value,
 }: TFloatingRate) => {
-    const { subscribeRates } = api.account.useExchangeRateSubscription();
+    const { subscribeRates } = useExchangeRates();
     const { isMobile } = useDevice();
 
-    const exchangeRateValue = subscribeRates({ base_currency: 'USD', target_currencies: [localCurrency] });
-
     const { data: p2pSettings } = api.settings.useSettings();
     const overrideExchangeRate = p2pSettings?.override_exchange_rate;
+    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+
+    useEffect(() => {
+        if (localCurrency) {
+            exchangeRateRef.current = subscribeRates({
+                base_currency: 'USD',
+                target_currencies: [localCurrency],
+            });
+        }
+    }, [localCurrency]);
+
     const marketRate = overrideExchangeRate
         ? Number(overrideExchangeRate)
-        : exchangeRateValue?.rates?.[localCurrency] ?? 1;
+        : exchangeRateRef.current?.rates?.[localCurrency] ?? 1;
     const os = mobileOSDetect();
     const marketFeed = value ? percentOf(marketRate, Number(value)) : marketRate;
     const decimalPlace = setDecimalPlaces(marketFeed, 6);

src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Modal from 'react-modal';
 import { Button, Text } from '@deriv-com/ui';
 import { customStyles } from '../helpers';
@@ -10,10 +9,6 @@ type TAvailableP2PBalanceModalProps = {
 };
 
 const AvailableP2PBalanceModal = ({ isModalOpen, onRequestClose }: TAvailableP2PBalanceModalProps) => {
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
-
     return (
         <Modal
             className='available-balance-modal'

src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Modal from 'react-modal';
 import { api } from '@/hooks';
 import { Button, Text } from '@deriv-com/ui';
@@ -23,10 +22,6 @@ const BlockUnblockUserModal = ({
     const { mutate: blockAdvertiser } = api.counterparty.useBlock();
     const { mutate: unblockAdvertiser } = api.counterparty.useUnblock();
 
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
-
     const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
 
     const getModalContent = () =>

src/components/Modals/DailyLimitModal/DailyLimitModal.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Modal from 'react-modal';
 import { api } from '@/hooks';
 import { useDevice } from '@/hooks/custom-hooks';
@@ -16,9 +15,6 @@ const DailyLimitModal = ({ currency, isModalOpen, onRequestClose }: TDailyLimitM
     const { data, error, isLoading, isSuccess, mutate } = api.advertiser.useUpdate();
     const { daily_buy_limit, daily_sell_limit } = data ?? {};
     const { isMobile } = useDevice();
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
 
     const getModalContent = () => {
         //TODO: modal header title to be moved out if needed according to implementation, can be moved to a separate getheader, getcontent, getfooter functions

src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 import { debounce } from 'lodash';
 import { Controller, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
@@ -11,10 +11,10 @@ import './NicknameModal.scss';
 
 type TNicknameModalProps = {
     isModalOpen: boolean | undefined;
-    setIsModalOpen: Dispatch<SetStateAction<boolean | undefined>>;
+    onRequestClose: () => void;
 };
 
-const NicknameModal = ({ isModalOpen, setIsModalOpen }: TNicknameModalProps) => {
+const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) => {
     const {
         control,
         formState: { isDirty, isValid },
@@ -40,7 +40,7 @@ const NicknameModal = ({ isModalOpen, setIsModalOpen }: TNicknameModalProps) =>
 
     useEffect(() => {
         if (isSuccess) {
-            setIsModalOpen(false);
+            onRequestClose;
             setHasCreatedAdvertiser(true);
         } else if (isError) {
             debouncedReset();
@@ -90,7 +90,7 @@ const NicknameModal = ({ isModalOpen, setIsModalOpen }: TNicknameModalProps) =>
                         color='black'
                         onClick={() => {
                             history.push(BUY_SELL_URL);
-                            setIsModalOpen(false);
+                            onRequestClose;
                         }}
                         size='lg'
                         textSize={textSize}

src/components/PaymentMethodField/__tests__/PaymentMethodField.spec.tsx

@@ -4,7 +4,17 @@ import PaymentMethodField from '../PaymentMethodField';
 
 jest.mock('react-hook-form', () => ({
     ...jest.requireActual('react-hook-form'),
-    Controller: ({ control, defaultValue, name, render }) =>
+    Controller: ({
+        control,
+        defaultValue,
+        name,
+        render,
+    }: {
+        control: string;
+        defaultValue: object;
+        name: string;
+        render: (param: object) => void;
+    }) =>
         render({
             field: { control, name, onBlur: jest.fn(), onChange: jest.fn(), value: defaultValue },
             fieldState: { error: null },

src/constants/ad-constants.ts

@@ -1,12 +1,12 @@
-export const COUNTERPARTIES_DROPDOWN_LIST = Object.freeze([
+export const COUNTERPARTIES_DROPDOWN_LIST = [
     { text: 'All', value: 'all' },
     { text: 'Blocked', value: 'blocked' },
-]);
+] as const;
 
-export const RATE_TYPE = Object.freeze({
+export const RATE_TYPE = {
     FIXED: 'fixed',
     FLOAT: 'float',
-});
+} as const;
 
 export const AD_ACTION = {
     ACTIVATE: 'activate',

src/hooks/api/account/index.ts

@@ -1,5 +1,4 @@
 export { default as useActiveAccount } from './useActiveAccount';
 export { default as useAuthentication } from './useAuthentication';
 export { default as useServerTime } from './useServerTime';
-export { default as useExchangeRateSubscription } from './useExchangeRateSubscription';
 export { default as useSendbirdServiceToken } from './useSendbirdServiceToken';