Farzin/R&D/80379/Extract cashier hooks into packages

packages/api/jest.config.js

@@ -0,0 +1,5 @@
+const baseConfigForPackages = require('../../jest.config.base');
+
+module.exports = {
+    ...baseConfigForPackages,
+};

packages/api/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@deriv/api",
+    "private": true,
+    "version": "1.0.0",
+    "main": "src/index.ts",
+    "dependencies": {
+        "@deriv/shared": "^1.0.0",
+        "react": "^16.14.0"
+    },
+    "devDependencies": {
+        "@deriv/api-types": "^1.0.54",
+        "@testing-library/user-event": "^13.2.1",
+        "@testing-library/react": "^12.0.0",
+        "typescript": "^4.6.3"
+    }
+}

packages/api/src/index.ts

@@ -0,0 +1,2 @@
+export { default as useWS } from './useWS';
+export { default as useSubscription } from './useSubscription';

packages/cashier/src/hooks/useSubscription.ts → packages/api/src/useSubscription.ts

@@ -1,4 +1,4 @@
-import { TSocketRequestProps, TSocketResponseData, TSocketSubscribableEndpointNames } from 'Types';
+import { TSocketRequestProps, TSocketResponseData, TSocketSubscribableEndpointNames } from '../types';
 import { useWS as useWSShared } from '@deriv/shared';
 import { useState } from 'react';
 
@@ -12,7 +12,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onData = (response: any) => {
-        setData(response[name]);
+        setData(response[name === 'ticks' ? 'tick' : name]);
         setIsLoading(false);
     };
 

packages/cashier/src/hooks/useWS.ts → packages/api/src/useWS.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useWS as useWSShared } from '@deriv/shared';
-import { TSocketEndpointNames, TSocketRequestProps, TSocketResponseData } from 'Types';
+import { TSocketEndpointNames, TSocketRequestProps, TSocketResponseData } from '../types';
 
 const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const [is_loading, setIsLoading] = useState(false);

packages/api/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "paths": {
+            "@deriv/*": ["../*/src"]
+        },
+        "baseUrl": "./"
+    },
+    "include": ["src", "types.ts"]
+}

packages/api/types.ts

@@ -0,0 +1,126 @@
+import type {
+    BalanceRequest,
+    BalanceResponse,
+    CashierInformationRequest,
+    CashierInformationResponse,
+    CryptocurrencyConfigurationsRequest,
+    CryptocurrencyConfigurationsResponse,
+    ExchangeRatesRequest,
+    ExchangeRatesResponse,
+    NewVirtualMoneyAccountRequest,
+    NewVirtualMoneyAccountResponse,
+    P2POrderInformationRequest,
+    P2POrderInformationResponse,
+    PaymentAgentDetailsRequest,
+    PaymentAgentDetailsResponse,
+    PaymentAgentListRequest,
+    PaymentAgentListResponse,
+    PaymentAgentTransferRequest,
+    PaymentAgentTransferResponse,
+    PaymentAgentWithdrawRequest,
+    PaymentAgentWithdrawResponse,
+    PingRequest,
+    PingResponse,
+    ServerStatusRequest,
+    ServerStatusResponse,
+    TermsAndConditionsApprovalRequest,
+    TermsAndConditionsApprovalResponse,
+    TicksStreamRequest,
+    TicksStreamResponse,
+    TransferBetweenAccountsRequest,
+    TransferBetweenAccountsResponse,
+    VerifyEmailRequest,
+    VerifyEmailResponse,
+} from '@deriv/api-types';
+
+export type TSocketEndpoints = {
+    ping: {
+        request: PingRequest;
+        response: PingResponse;
+    };
+    verify_email: {
+        request: VerifyEmailRequest;
+        response: VerifyEmailResponse;
+    };
+    exchange_rates: {
+        request: ExchangeRatesRequest;
+        response: ExchangeRatesResponse;
+    };
+    p2p_order_info: {
+        request: P2POrderInformationRequest;
+        response: P2POrderInformationResponse;
+    };
+    website_status: {
+        request: ServerStatusRequest;
+        response: ServerStatusResponse;
+    };
+    tnc_approval: {
+        request: TermsAndConditionsApprovalRequest;
+        response: TermsAndConditionsApprovalResponse;
+    };
+    cashier: {
+        request: CashierInformationRequest;
+        response: CashierInformationResponse;
+    };
+    crypto_config: {
+        request: CryptocurrencyConfigurationsRequest;
+        response: CryptocurrencyConfigurationsResponse;
+    };
+    paymentagent_transfer: {
+        request: PaymentAgentTransferRequest;
+        response: PaymentAgentTransferResponse;
+    };
+    paymentagent_list: {
+        request: PaymentAgentListRequest;
+        response: PaymentAgentListResponse;
+    };
+    paymentagent_details: {
+        request: PaymentAgentDetailsRequest;
+        response: PaymentAgentDetailsResponse;
+    };
+    paymentagent_withdraw: {
+        request: PaymentAgentWithdrawRequest;
+        response: PaymentAgentWithdrawResponse;
+    };
+    transfer_between_accounts: {
+        request: TransferBetweenAccountsRequest;
+        response: TransferBetweenAccountsResponse;
+    };
+    balance: {
+        request: BalanceRequest;
+        response: BalanceResponse;
+    };
+    ticks: {
+        request: TicksStreamRequest;
+        response: TicksStreamResponse;
+    };
+    new_account_virtual: {
+        request: NewVirtualMoneyAccountRequest;
+        response: NewVirtualMoneyAccountResponse;
+    };
+};
+
+export type TSocketEndpointNames = keyof TSocketEndpoints;
+
+export type TSocketSubscribableEndpointNames =
+    | KeysMatching<TSocketEndpoints, { request: { subscribe?: number } }>
+    | 'exchange_rates';
+
+export type TSocketResponse<T extends TSocketEndpointNames> = TSocketEndpoints[T]['response'];
+
+export type TSocketResponseData<T extends TSocketEndpointNames> = TSocketResponse<T>[T extends 'ticks' ? 'tick' : T];
+
+export type TSocketRequest<T extends TSocketEndpointNames> = TSocketEndpoints[T]['request'];
+
+type TSocketRequestCleaned<T extends TSocketEndpointNames> = Omit<
+    TSocketRequest<T>,
+    (T extends KeysMatching<TSocketRequest<T>, 1> ? T : never) | 'passthrough' | 'req_id' | 'subscribe'
+>;
+
+export type TSocketRequestProps<T extends TSocketEndpointNames> = TSocketRequestCleaned<T> extends Record<string, never>
+    ? never
+    : TSocketRequestCleaned<T>;
+
+export type KeysMatching<T, V> = {
+    [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];

packages/cashier/@deriv-stores.d.ts

@@ -0,0 +1,10 @@
+import type { TRootStore } from '@deriv/stores/types';
+import type CashierStore from './src/stores/cashier-store';
+
+declare module '@deriv/stores' {
+    export function useStore(): TRootStore & {
+        modules: {
+            cashier: CashierStore;
+        };
+    };
+}

packages/cashier/package.json

@@ -40,6 +40,7 @@
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/p2p": "^0.7.3",
         "@deriv/shared": "^1.0.0",
+        "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",

packages/cashier/src/app.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { setWebsocket } from '@deriv/shared';
+import { StoreProvider } from '@deriv/stores';
 import { init } from 'Utils/server_time';
 import Routes from 'Containers/routes';
 import { MobxContentProvider } from 'Stores/connect';
-import { StoreProvider } from './hooks';
 
 const App = ({ passthrough: { WS, root_store } }) => {
     React.useEffect(() => {

packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx

@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import QRCode from 'qrcode.react';
 import { observer } from 'mobx-react-lite';
 import RecentTransaction from 'Components/recent-transaction';
-import { useStore } from '../../../hooks';
 import './crypto-deposit.scss';
 
 const CryptoDeposit = () => {

packages/cashier/src/pages/deposit/deposit-locked/deposit-locked.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { routes, WS } from '@deriv/shared';
 import { Icon, Checklist, StaticUrl, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
+import { routes, WS } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { observer } from 'mobx-react-lite';
 import CashierLocked from 'Components/cashier-locked';
-import { useStore } from '../../../hooks';
 
 const DepositLocked = () => {
     const { client, modules } = useStore();

packages/cashier/src/pages/deposit/deposit.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Loading } from '@deriv/components';
+import { useStore } from '@deriv/stores';
 import { observer } from 'mobx-react-lite';
 import { Real, Virtual } from 'Components/cashier-container';
 import { CashierOnboarding, CashierOnboardingSideNote } from 'Components/cashier-onboarding';
@@ -12,7 +13,6 @@ import RecentTransaction from 'Components/recent-transaction';
 import CryptoDeposit from './crypto-deposit';
 import DepositLocked from './deposit-locked';
 import SideNote from 'Components/side-note';
-import { useStore } from '../../hooks';
 
 type TDeposit = {
     setSideNotes: (notes: object | null) => void;

packages/cashier/src/types/stores/index.ts

@@ -1,4 +1,12 @@
-export * from './client-store.types';
-export * from './common-store.types';
-export * from './root-store.types';
-export * from './ui-store.types';
+import { TRootStore as TRootStoreBase } from '@deriv/stores/types';
+import type CashierStore from '../../stores/cashier-store';
+
+export type TRootStore = TRootStoreBase & {
+    modules: {
+        cashier: CashierStore;
+    };
+};
+
+export type TClientStore = TRootStore['client'];
+export type TCommonStore = TRootStore['common'];
+export type TUiStore = TRootStore['ui'];

packages/cashier/tsconfig.json

@@ -15,5 +15,5 @@
         "outDir": "./dist",
         "baseUrl": "./"
     },
-    "include": ["src"]
+    "include": ["src", "@deriv-stores.d.ts"]
 }