fix: use the data object returned from useExchangeRates instead of su…

…bscribeRates (#74)
deriv-com · May 22, 2024 · 721cd83 · 721cd83
1 parent 6153252
commit 721cd83
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 27 deletions.
diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx
@@ -1,7 +1,7 @@
 import { Fragment, memo, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { useHistory, useLocation } from 'react-router-dom';
-import { TAdvertsTableRowRenderer, TCurrency, TExchangeRate } from 'types';
+import { TAdvertsTableRowRenderer, TCurrency } from 'types';
 import { Badge, BuySellForm, PaymentMethodLabel, StarRating, UserAvatar } from '@/components';
 import { NicknameModal } from '@/components/Modals';
 import { ADVERTISER_URL, BUY_SELL } from '@/constants';
@@ -18,7 +18,7 @@ const BASE_CURRENCY = 'USD';
 
 const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRateData, subscribeRates } = useExchangeRates();
     const { isDesktop, isMobile } = useDevice();
     const history = useHistory();
     const location = useLocation();
@@ -29,7 +29,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
     const { data: poiPoaData } = usePoiPoaStatus();
     const { isPoaVerified, isPoiVerified } = poiPoaData || {};
 
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     const {
         account_currency,
@@ -48,20 +48,27 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
 
     useEffect(() => {
         if (local_currency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: BASE_CURRENCY,
                 target_currencies: [local_currency],
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [local_currency]);
 
+    useEffect(() => {
+        if (exchangeRateData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRateData?.exchange_rates?.rates?.[local_currency];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRateData]);
+
     const Container = isMobile ? 'div' : Fragment;
 
     const { completed_orders_count, id, is_online, name, rating_average, rating_count } = advertiser_details || {};
 
     const { displayEffectiveRate } = generateEffectiveRate({
-        exchangeRate: exchangeRateRef.current?.rates?.[local_currency],
+        exchangeRate: exchangeRateRef.current,
         localCurrency: local_currency as TCurrency,
         marketRate: Number(effective_rate),
         price: Number(price_display),

diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
@@ -2,7 +2,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Control, FieldValues, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
-import { TCurrency, TExchangeRate, THooks, TPaymentMethod } from 'types';
+import { TCurrency, THooks, TPaymentMethod } from 'types';
 import { BUY_SELL, ORDERS_URL, RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
 import { useIsAdvertiser } from '@/hooks/custom-hooks';
@@ -47,7 +47,7 @@ const getAdvertiserMaxLimit = (
 const BASE_CURRENCY = 'USD';
 
 const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProps) => {
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRatesData, subscribeRates } = useExchangeRates();
     const { data: advertInfo } = api.advert.useGet({ id: advertId });
     const { data: orderCreatedInfo, isSuccess, mutate } = api.order.useCreate();
     const { data: paymentMethods } = api.paymentMethods.useGet();
@@ -67,7 +67,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     const [calculatedRate, setCalculatedRate] = useState('0');
     const [initialAmount, setInitialAmount] = useState('0');
 
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     const {
         account_currency,
@@ -96,16 +96,23 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
 
     useEffect(() => {
         if (local_currency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: BASE_CURRENCY,
                 target_currencies: [local_currency],
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [local_currency]);
 
+    useEffect(() => {
+        if (exchangeRatesData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRatesData?.exchange_rates.rates?.[local_currency];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRatesData]);
+
     const { displayEffectiveRate, effectiveRate } = generateEffectiveRate({
-        exchangeRate: exchangeRateRef.current?.rates?.[local_currency],
+        exchangeRate: exchangeRateRef.current,
         localCurrency: local_currency as TCurrency,
         marketRate: Number(effective_rate),
         price: Number(price_display),

diff --git a/src/components/FloatingRate/FloatingRate.tsx b/src/components/FloatingRate/FloatingRate.tsx
@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, useEffect, useRef } from 'react';
-import { TCurrency, TExchangeRate } from 'types';
+import { TCurrency } from 'types';
 import { api } from '@/hooks';
 import { mobileOSDetect, percentOf, removeTrailingZeros, roundOffDecimal, setDecimalPlaces } from '@/utils';
 import { useExchangeRates } from '@deriv-com/api-hooks';
@@ -28,25 +28,31 @@ const FloatingRate = ({
     onChange,
     value,
 }: TFloatingRate) => {
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRateData, subscribeRates } = useExchangeRates();
     const { isMobile } = useDevice();
 
     const { data: p2pSettings } = api.settings.useSettings();
     const overrideExchangeRate = p2pSettings?.override_exchange_rate;
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     useEffect(() => {
         if (localCurrency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: 'USD',
                 target_currencies: [localCurrency],
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localCurrency]);
 
-    const marketRate = overrideExchangeRate
-        ? Number(overrideExchangeRate)
-        : exchangeRateRef.current?.rates?.[localCurrency] ?? 1;
+    useEffect(() => {
+        if (exchangeRateData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRateData?.exchange_rates?.rates?.[localCurrency];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRateData]);
+
+    const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRateRef.current ?? 1;
     const os = mobileOSDetect();
     const marketFeed = value ? percentOf(marketRate, Number(value)) : marketRate;
     const decimalPlace = setDecimalPlaces(marketFeed, 6);

diff --git a/src/pages/my-ads/components/AdSummary/AdSummary.tsx b/src/pages/my-ads/components/AdSummary/AdSummary.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { TCurrency, TExchangeRate } from 'types';
+import { TCurrency } from 'types';
 import { AD_ACTION, RATE_TYPE } from '@/constants';
 import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
@@ -33,7 +33,7 @@ const AdSummary = ({
     const { queryString } = useQueryString();
     const adOption = queryString.formAction;
     const { data: p2pSettings } = api.settings.useSettings();
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRatesData, subscribeRates } = useExchangeRates();
     const overrideExchangeRate = p2pSettings?.override_exchange_rate;
 
     const marketRateType = adOption === AD_ACTION.CREATE ? rateType : adRateType;
@@ -43,19 +43,26 @@ const AdSummary = ({
 
     let displayPriceRate: number | string = '';
     let displayTotal = '';
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     useEffect(() => {
         if (localCurrency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: currency,
                 target_currencies: [localCurrency],
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currency, localCurrency]);
 
-    const exchangeRate = exchangeRateRef?.current?.rates?.[localCurrency];
+    useEffect(() => {
+        if (exchangeRatesData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRatesData.exchange_rates?.rates?.[localCurrency];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRatesData]);
+
+    const exchangeRate = exchangeRateRef?.current;
     const marketRate = overrideExchangeRate ? Number(overrideExchangeRate) : exchangeRate;
     const marketFeed = marketRateType === RATE_TYPE.FLOAT ? marketRate : null;
     const summaryTextSize = isMobile ? 'md' : 'sm';

diff --git a/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx b/src/pages/my-ads/screens/MyAds/MyAdsTableRow/MyAdsTableRow.tsx
@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { TCurrency, TExchangeRate, TLocalize } from 'types';
+import { TCurrency, TLocalize } from 'types';
 import { PaymentMethodLabel, PopoverDropdown } from '@/components';
 import { AD_ACTION, ADVERT_TYPE, RATE_TYPE } from '@/constants';
 import { useFloatingRate } from '@/hooks/custom-hooks';
@@ -39,7 +39,7 @@ type TMyAdsTableProps = Omit<TMyAdsTableRowRendererProps, 'balanceAvailable' | '
 const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps) => {
     const { localize } = useTranslations();
     const { isMobile } = useDevice();
-    const { subscribeRates } = useExchangeRates();
+    const { data: exchangeRatesData, subscribeRates } = useExchangeRates();
 
     const {
         account_currency: accountCurrency = '',
@@ -66,17 +66,25 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps
 
     const isFloatingRate = rateType === RATE_TYPE.FLOAT;
 
-    const exchangeRateRef = useRef<TExchangeRate | null>(null);
+    const exchangeRateRef = useRef<number | undefined>(undefined);
 
     useEffect(() => {
         if (localCurrency) {
-            exchangeRateRef.current = subscribeRates({
+            subscribeRates({
                 base_currency: BASE_CURRENCY,
                 target_currencies: [localCurrency],
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localCurrency]);
 
+    useEffect(() => {
+        if (exchangeRatesData?.exchange_rates?.rates) {
+            exchangeRateRef.current = exchangeRatesData.exchange_rates?.rates?.[localCurrency ?? ''];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exchangeRatesData]);
+
     const [showAlertIcon, setShowAlertIcon] = useState(false);
     const isAdvertListed = isListed && !isBarred;
     const adPauseColor = isAdvertListed ? 'general' : 'less-prominent';
@@ -85,11 +93,12 @@ const MyAdsTableRow = ({ currentRateType, showModal, ...rest }: TMyAdsTableProps
     const isRowDisabled = !isActive || isBarred || !isListed;
     const isAdActive = !!isActive && !isBarred;
 
-    const exchangeRate = exchangeRateRef.current?.rates?.[localCurrency ?? ''];
+    const exchangeRate = exchangeRateRef.current;
     const enableActionPoint = currentRateType !== rateType;
 
     useEffect(() => {
         setShowAlertIcon(enableActionPoint || shouldShowTooltipIcon(visibilityStatus) || !isListed);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [enableActionPoint, isListed, shouldShowTooltipIcon]);
 
     const { displayEffectiveRate } = generateEffectiveRate({