Nijil / Replace useDtraderQuery with useQuery in AppV2

packages/api-v2/src/APIProvider.tsx

@@ -38,8 +38,7 @@ type APIContextData = {
  * @returns {string} The WebSocket URL.
  */
 const getWebSocketURL = (endpoint: string) => {
-    // TODO remove hardcoded app_id in future
-    return `wss://${endpoint}/websockets/v3?app_id=16929&brand=${getBrandName().toLowerCase()}`;
+    return `wss://${endpoint}/websockets/v3?brand=${getBrandName().toLowerCase()}`;
 };
 
 const APIContext = createContext<APIContextData | null>(null);
@@ -97,6 +96,11 @@ const APIProvider = ({ children }: PropsWithChildren) => {
                     refetchOnReconnect: false,
                 },
             },
+            logger: {
+                log: () => {},
+                warn: () => {},
+                error: () => {},
+            },
         });
     }
 

packages/api-v2/src/AuthProvider.tsx

@@ -201,7 +201,7 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
                         setLoginid(res?.authorize?.loginid ?? '');
                     })
                     .catch(async (e: TAuthorizeError) => {
-                        if (e?.error.code === API_ERROR_CODES.DISABLED_ACCOUNT) {
+                        if (e?.code === API_ERROR_CODES.DISABLED_ACCOUNT) {
                             await logout?.();
                         }
                         setIsLoading(false);
@@ -248,7 +248,7 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
                 setLoginid(newLoginId);
                 processAuthorizeResponse(authorizeResponse);
             } catch (e: unknown) {
-                if (typeof e === 'object' && (e as TAuthorizeError)?.error.code === API_ERROR_CODES.DISABLED_ACCOUNT) {
+                if (typeof e === 'object' && (e as TAuthorizeError)?.code === API_ERROR_CODES.DISABLED_ACCOUNT) {
                     await logout?.();
                 }
             } finally {

packages/api-v2/src/index.ts

@@ -11,12 +11,4 @@ export { default as useRemoteConfig } from './hooks/useRemoteConfig';
 export { default as useTrackJS } from './hooks/useTrackJS';
 export * from './hooks';
 
-export {
-    useInfiniteQuery,
-    useMutation,
-    useQuery,
-    /** @deprecated use `useQuery` instead */
-    useQuery as useFetch,
-    /** @deprecated use `useMutation` instead */
-    useMutation as useRequest,
-};
+export { useInfiniteQuery, useMutation, useQuery };

packages/api-v2/src/useAuthorizedQuery.ts

@@ -43,7 +43,7 @@ const useAuthorizedQuery = <T extends TSocketEndpointNames>(
 
     const isEnabled = typeof options?.enabled === 'boolean' ? options.enabled : true;
 
-    return _useQuery<TSocketResponseData<T>, TSocketError<T>>(keys, () => send(name, payload), {
+    return _useQuery<TSocketResponseData<T>, TSocketError<T>['error']>(keys, () => send(name, payload), {
         ...options,
         enabled: !!(isSuccess && !isLoading && loginid && isEnabled),
     });

packages/api-v2/src/useInfiniteQuery.ts

@@ -25,7 +25,7 @@ const useInfiniteQuery = <T extends TSocketPaginateableEndpointNames>(
     const initial_offset = payload?.offset || 0;
     const limit = payload?.limit || 50;
 
-    return _useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>>(
+    return _useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>['error']>(
         getQueryKeys(name, payload),
 
         ({ pageParam = 0 }) =>

packages/api-v2/src/useMutation.ts

@@ -16,7 +16,7 @@ const useMutation = <T extends TSocketEndpointNames>(name: T, options?: TSocketR
         mutate: _mutate,
         mutateAsync: _mutateAsync,
         ...rest
-    } = _useMutation<TSocketResponseData<T>, TSocketError<T>, TSocketAcceptableProps<T>>(props => {
+    } = _useMutation<TSocketResponseData<T>, TSocketError<T>['error'], TSocketAcceptableProps<T>>(props => {
         const prop = props?.[0];
         const payload = prop && 'payload' in prop ? (prop.payload as TSocketRequestPayload<T>['payload']) : undefined;
 

packages/api-v2/src/useQuery.ts

@@ -16,7 +16,7 @@ const useQuery = <T extends TSocketEndpointNames>(name: T, ...props: TSocketAcce
     const options = prop && 'options' in prop ? (prop.options as TSocketRequestQueryOptions<T>) : undefined;
     const { send } = useAPI();
 
-    return _useQuery<TSocketResponseData<T>, TSocketError<T>>(
+    return _useQuery<TSocketResponseData<T>, TSocketError<T>['error']>(
         getQueryKeys(name, payload),
         () => send(name, payload),
         options

packages/api-v2/types.ts

@@ -453,15 +453,15 @@ export type TSocketRequestPayload<
           };
 
 export type TSocketRequestQueryOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useQuery<TSocketResponseData<T>, TSocketError<T>>
+    typeof useQuery<TSocketResponseData<T>, TSocketError<T>['error']>
 >[2];
 
 export type TSocketRequestInfiniteQueryOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>>
+    typeof useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>['error']>
 >[2];
 
 export type TSocketRequestMutationOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useMutation<TSocketResponseData<T>, TSocketError<T>, TSocketAcceptableProps<T>>
+    typeof useMutation<TSocketResponseData<T>, TSocketError<T>['error'], TSocketAcceptableProps<T>>
 >[2];
 
 type TSocketRequestWithOptions<

packages/api/src/APIProvider.tsx

@@ -49,7 +49,19 @@ declare global {
 // This is a temporary workaround to share a single `QueryClient` instance between all the packages.
 const getSharedQueryClientContext = (): QueryClient => {
     if (!window.ReactQueryClient) {
-        window.ReactQueryClient = new QueryClient();
+        window.ReactQueryClient = new QueryClient({
+            defaultOptions: {
+                queries: {
+                    refetchOnWindowFocus: false,
+                    refetchOnReconnect: false,
+                },
+            },
+            logger: {
+                log: () => {},
+                warn: () => {},
+                error: () => {},
+            },
+        });
     }
 
     return window.ReactQueryClient;

packages/api/src/index.ts

@@ -10,15 +10,7 @@ export { default as useRemoteConfig } from './hooks/useRemoteConfig';
 export { default as useTrackJS } from './hooks/useTrackJS';
 export * from './hooks';
 
-export {
-    useInfiniteQuery,
-    useMutation,
-    useQuery,
-    /** @deprecated use `useQuery` instead */
-    useQuery as useFetch,
-    /** @deprecated use `useMutation` instead */
-    useMutation as useRequest,
-};
+export { useInfiniteQuery, useMutation, useQuery };
 
 // Export types from types.ts
 export type {

packages/api/src/useInfiniteQuery.ts

@@ -25,7 +25,7 @@ const useInfiniteQuery = <T extends TSocketPaginateableEndpointNames>(
     const initial_offset = payload?.offset || 0;
     const limit = payload?.limit || 50;
 
-    return _useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>>(
+    return _useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>['error']>(
         getQueryKeys(name, payload),
 
         ({ pageParam = 0 }) =>

packages/api/src/useMutation.ts

@@ -16,7 +16,7 @@ const useMutation = <T extends TSocketEndpointNames>(name: T, options?: TSocketR
         mutate: _mutate,
         mutateAsync: _mutateAsync,
         ...rest
-    } = _useMutation<TSocketResponseData<T>, TSocketError<T>, TSocketAcceptableProps<T>>(props => {
+    } = _useMutation<TSocketResponseData<T>, TSocketError<T>['error'], TSocketAcceptableProps<T>>(props => {
         const prop = props?.[0];
         const payload = prop && 'payload' in prop ? (prop.payload as TSocketRequestPayload<T>) : undefined;
 

packages/api/src/useQuery.ts

@@ -16,7 +16,7 @@ const useQuery = <T extends TSocketEndpointNames>(name: T, ...props: TSocketAcce
     const options = prop && 'options' in prop ? (prop.options as TSocketRequestQueryOptions<T>) : undefined;
     const { send } = useAPI();
 
-    return _useQuery<TSocketResponseData<T>, TSocketError<T>>(
+    return _useQuery<TSocketResponseData<T>, TSocketError<T>['error']>(
         getQueryKeys(name, payload),
         () => send(name, payload),
         options

packages/api/types.ts

@@ -502,15 +502,15 @@ export type TSocketRequestPayload<
           };
 
 export type TSocketRequestQueryOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useQuery<TSocketResponseData<T>, TSocketError<T>>
+    typeof useQuery<TSocketResponseData<T>, TSocketError<T>['error']>
 >[2];
 
 export type TSocketRequestInfiniteQueryOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>>
+    typeof useInfiniteQuery<TSocketResponseData<T>, TSocketError<T>['error']>
 >[2];
 
 export type TSocketRequestMutationOptions<T extends TSocketEndpointNames> = Parameters<
-    typeof useMutation<TSocketResponseData<T>, TSocketError<T>, TSocketAcceptableProps<T>>
+    typeof useMutation<TSocketResponseData<T>, TSocketError<T>['error'], TSocketAcceptableProps<T>>
 >[2];
 
 type TSocketRequestWithOptions<

packages/core/src/Stores/index.js

@@ -5,7 +5,6 @@ import GTMStore from './gtm-store';
 import ModulesStore from './Modules';
 import NotificationStore from './notification-store';
 import UIStore from './ui-store';
-import ActiveSymbolsStore from './active-symbols-store';
 import PortfolioStore from './portfolio-store';
 import ContractReplayStore from './contract-replay-store';
 import ContractTradeStore from './contract-trade-store';
@@ -19,7 +18,6 @@ export default class RootStore {
         this.ui = new UIStore(this);
         this.gtm = new GTMStore(this);
         this.notifications = new NotificationStore(this);
-        this.active_symbols = new ActiveSymbolsStore(this);
         this.portfolio = new PortfolioStore(this);
         this.contract_replay = new ContractReplayStore(this);
         this.contract_trade = new ContractTradeStore(this);

packages/core/src/_common/base/socket_base.js

@@ -29,8 +29,7 @@ const BinarySocketBase = (() => {
         if (is_mock_server) {
             return 'ws://127.0.0.1:42069';
         }
-        // TODO remove hardcoded app_id in future
-        return `wss://${getSocketURL()}/websockets/v3?app_id=16929&brand=${getBrandName().toLowerCase()}`;
+        return `wss://${getSocketURL()}/websockets/v3?brand=${getBrandName().toLowerCase()}`;
     };
 
     const isReady = () => hasReadyState(1);

packages/trader/src/AppV2/Components/ClosedMarketMessage/closed-market-message.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import clsx from 'clsx';
 
 import { TTradingTimesRequest } from '@deriv/api';
-import { isMarketClosed, toMoment, useIsMounted, WS, mapErrorMessage } from '@deriv/shared';
+import { toMoment, useIsMounted, WS, mapErrorMessage } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv-com/translations';
 import { CaptionText } from '@deriv-com/quill-ui';
 
-import useActiveSymbols from 'AppV2/Hooks/useActiveSymbols';
 import { calculateTimeLeft, getSymbol } from 'AppV2/Utils/closed-market-message-utils';
 import { useTraderStore } from 'Stores/useTraderStores';
 
@@ -34,7 +33,6 @@ const ClosedMarketMessage = observer(() => {
     const { common } = useStore();
     const { current_language } = common;
     const { symbol, prepareTradeStore, is_market_closed } = useTraderStore();
-    const { activeSymbols } = useActiveSymbols();
 
     const isMounted = useIsMounted();
     const [when_market_opens, setWhenMarketOpens] = React.useState<TWhenMarketOpens>({} as TWhenMarketOpens);
@@ -84,7 +82,7 @@ const ClosedMarketMessage = observer(() => {
         setTimeLeft({});
         setWhenMarketOpens({} as TWhenMarketOpens);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeSymbols, symbol]);
+    }, [symbol, is_market_closed]);
 
     React.useEffect(() => {
         let timer: ReturnType<typeof setTimeout>;

packages/trader/src/AppV2/Components/MarketSelector/market-selector.scss

@@ -6,6 +6,9 @@
     &__container {
         padding: 0 var(--core-spacing-800);
     }
+    &__skeleton {
+        padding: 0 var(--semantic-spacing-general-sm);
+    }
     &-info {
         display: flex;
         flex-direction: column;

packages/trader/src/AppV2/Components/MarketSelector/market-selector.tsx

@@ -13,7 +13,7 @@ import SymbolIconsMapper from '../SymbolIconsMapper/symbol-icons-mapper';
 
 const MarketSelector = observer(() => {
     const [isOpen, setIsOpen] = useState(false);
-    const { activeSymbols } = useActiveSymbols();
+    const { activeSymbols, isLoading } = useActiveSymbols();
     const { symbol: storeSymbol, tick_data, is_market_closed, contract_type } = useTraderStore();
     const { addSnackbar } = useSnackbar();
     const { trade_types } = useContractsFor();
@@ -23,7 +23,7 @@ const MarketSelector = observer(() => {
     const contract_name = trade_types?.find((item: TContractType) => item.value === contract_type)?.text;
 
     useEffect(() => {
-        if (!currentSymbol) {
+        if (!currentSymbol && !isLoading) {
             const symbol_name = getMarketNamesMap()[storeSymbol as keyof typeof getMarketNamesMap] || storeSymbol;
             const message = contract_name ? (
                 <Localize
@@ -115,7 +115,11 @@ const MarketSelector = observer(() => {
 
     // Show skeleton loader for a reasonable time, then fallback to basic UI
     if (typeof currentSymbol?.exchange_is_open === 'undefined' && !showFallback) {
-        return <Skeleton.Square height={42} width={240} rounded />;
+        return (
+            <div className='market-selector__skeleton'>
+                <Skeleton.Square width={200} height={42} rounded />
+            </div>
+        );
     }
 
     // Fallback UI when data is not available after timeout

packages/trader/src/AppV2/Components/TradeParameters/Duration/__tests__/duration.spec.tsx

@@ -43,6 +43,11 @@ jest.mock('@deriv/shared', () => ({
     })),
 }));
 
+jest.mock('../day', () => ({
+    __esModule: true,
+    default: jest.fn(() => <div>Mocked DayInput</div>),
+}));
+
 describe('Duration', () => {
     let default_trade_store: TCoreStores, mockOnChangeMultiple: jest.Mock;