fix: API hooks

package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@babel/preset-env": "^7.24.5",
-        "@deriv-com/api-hooks": "^0.1.24",
+        "@deriv-com/api-hooks": "^1.0.10",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.27.9",
         "@deriv-com/utils": "latest",

src/components/BuySellForm/BuySellForm.tsx

@@ -213,11 +213,14 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     }, [isSuccess, orderCreatedInfo, history, onRequestClose]);
 
     useEffect(() => {
-        if (isError && error?.error.message) {
-            setErrorMessage(error?.error.message);
+        // @ts-expect-error types are not correct from api-hooks
+        if (isError && error?.message) {
+            // @ts-expect-error types are not correct from api-hooks
+            setErrorMessage(error?.message);
             scrollRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
         }
-    }, [error?.error.message, isError]);
+        // @ts-expect-error types are not correct from api-hooks
+    }, [error?.message, isError]);
 
     return (
         <form onSubmit={handleSubmit(onSubmit)}>

src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -38,7 +38,8 @@ const BlockUnblockUserModal = ({
             onClickBlocked?.();
             onRequestClose();
         } else if (error || unblockError) {
-            setErrorMessage?.(error?.error.message || unblockError?.error.message);
+            // @ts-expect-error types are not correct from api-hooks
+            setErrorMessage?.(error?.message || unblockError?.message);
             onRequestClose();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx

@@ -34,8 +34,8 @@ const InvalidVerificationLinkModal = ({
             onRequestClose={onRequestClose}
         >
             <Modal.Body
-                className={clsx('flex flex-col items-center gap-[2.4rem] p-[2.4rem]', {
-                    'py-0 px-[1.4rem] gap-[1.4rem]': isExcessiveErrorMobile,
+                className={clsx('flex flex-col items-center gap-[2.4rem] p-[2.4rem] lg:pb-[2.4rem] pb-0', {
+                    'px-[1.4rem] gap-[1.4rem]': isExcessiveErrorMobile,
                 })}
             >
                 <DerivLightIcEmailVerificationLinkInvalidIcon height={iconSize} width={iconSize} />

src/components/Modals/NicknameModal/NicknameModal.tsx

@@ -71,7 +71,8 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
                                 data-testid='dt_nickname_modal_input'
                                 error={!!error?.message || isError}
                                 label={localize('Your nickname')}
-                                message={createError?.error?.message || error?.message}
+                                // @ts-expect-error types are not correct from api-hooks
+                                message={createError?.message || error?.message}
                                 onBlur={onBlur}
                                 onChange={onChange}
                                 value={value}

src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx

@@ -44,7 +44,7 @@ const PaymentMethodFormModalRenderer = ({
         <>
             {!!isModalOpenFor('PaymentMethodErrorModal') && (
                 <PaymentMethodErrorModal
-                    errorMessage={String(createError?.error?.message || updateError?.error?.message)}
+                    errorMessage={String(createError?.message || updateError?.message)}
                     isModalOpen={!!isModalOpenFor('PaymentMethodErrorModal')}
                     onConfirm={() => {
                         onResetFormState();

src/components/ProfileContent/ProfileContent.tsx

@@ -1,21 +1,21 @@
 import { Dispatch, SetStateAction, useEffect } from 'react';
+import { TAdvertiserStats } from 'types';
 import { AdvertiserName, AdvertiserNameToggle } from '@/components';
-import { useAdvertiserStats } from '@/hooks/custom-hooks';
 import { getCurrentRoute } from '@/utils';
 import { useDevice } from '@deriv-com/ui';
 import { ProfileBalance } from './ProfileBalance';
 import { ProfileStats } from './ProfileStats';
 import './ProfileContent.scss';
 
 type TProfileContentProps = {
+    data: TAdvertiserStats;
     id?: string;
     setAdvertiserName?: (name: string) => void;
     setShowOverlay?: Dispatch<SetStateAction<boolean>>;
 };
 
-const ProfileContent = ({ id, setAdvertiserName, setShowOverlay }: TProfileContentProps) => {
+const ProfileContent = ({ data, setAdvertiserName, setShowOverlay }: TProfileContentProps) => {
     const { isMobile } = useDevice();
-    const { data } = useAdvertiserStats(id);
     const isMyProfile = getCurrentRoute() === 'my-profile';
 
     useEffect(() => {

src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { DeepPartial } from 'react-hook-form';
 import { useLocalStorage } from 'usehooks-ts';
-import { useP2PAdvertiserInfo } from '@deriv-com/api-hooks';
+import { useP2PAdvertiserInfo, useSubscribe } from '@deriv-com/api-hooks';
 
 type TP2PAdvertiserInfo = ReturnType<typeof useP2PAdvertiserInfo>['data'] & {
     has_basic_verification: boolean;
@@ -16,7 +16,7 @@ type TP2PAdvertiserInfo = ReturnType<typeof useP2PAdvertiserInfo>['data'] & {
 
 /** This custom hook returns information about the given advertiser ID */
 const useAdvertiserInfo = (id?: string) => {
-    const { data, error, subscribe, ...rest } = useP2PAdvertiserInfo() ?? {};
+    const { data, error, subscribe, ...rest } = useSubscribe('p2p_advertiser_info') ?? {};
 
     /**
      * Use different local storage key for each advertiser, one to keep the current user's info, the other to keep the advertiser's info
@@ -33,7 +33,7 @@ const useAdvertiserInfo = (id?: string) => {
     // Add additional information to the p2p_advertiser_info data
     useEffect(() => {
         if (data) {
-            const advertiser_info = data;
+            const advertiser_info = data.p2p_advertiser_info;
 
             if (!advertiser_info) return;
 

src/hooks/api/order/p2p-order/useOrderInfo.ts

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
-import { useP2POrderInfo } from '@deriv-com/api-hooks';
+import { useSubscribe } from '@deriv-com/api-hooks';
 
 // TODO: Convert this to use useSubscribe as it is a subscribable endpoint
 /** This custom hook that returns information about the given order ID */
 const useOrderInfo = () => {
-    const { data, ...rest } = useP2POrderInfo();
+    const { data, ...rest } = useSubscribe('p2p_order_info');
 
     // modify the data to add additional information
     const modified_data = useMemo(() => {
-        if (!data) return undefined;
+        if (!data?.p2p_order_info) return undefined;
 
         const {
             advert_details,
@@ -19,7 +19,7 @@ const useOrderInfo = () => {
             is_seen,
             review_details,
             verification_pending,
-        } = data;
+        } = data.p2p_order_info;
 
         return {
             ...data,

src/hooks/api/settings/p2p-settings/useSettings.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { DeepPartial } from 'react-hook-form';
 import { useLocalStorage } from 'usehooks-ts';
-import { useP2PSettings } from '@deriv-com/api-hooks';
+import { useP2PSettings, useSubscribe } from '@deriv-com/api-hooks';
 
 type TP2PSettings =
     | (ReturnType<typeof useP2PSettings>['data'] & {
@@ -31,12 +31,12 @@ type TCurrencyListItem = {
 };
 
 const useSettings = () => {
-    const { data, ...rest } = useP2PSettings();
+    const { data, ...rest } = useSubscribe('p2p_settings');
     const [p2pSettings, setP2PSettings] = useLocalStorage<DeepPartial<TP2PSettings>>('p2p_settings', {});
 
     useEffect(() => {
         if (data) {
-            const p2p_settings_data = data;
+            const p2p_settings_data = data.p2p_settings;
 
             if (!p2p_settings_data) return undefined;
 

src/hooks/custom-hooks/useAdvertiserStats.ts

@@ -31,7 +31,8 @@ const useAdvertiserStats = (advertiserId?: string) => {
         if (advertiserId) {
             subscribe({ id: advertiserId });
         }
-    }, [advertiserId, subscribe]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [advertiserId]);
 
     useEffect(() => {
         return () => {
@@ -130,6 +131,7 @@ const useAdvertiserStats = (advertiserId?: string) => {
         isIdle,
         isLoading,
         isSubscribed,
+        unsubscribe,
     };
 };