Farzin/Putting wallet behind feature flag [WIP]

packages/account/package.json

@@ -28,7 +28,7 @@
     },
     "dependencies": {
         "@binary-com/binary-document-uploader": "^2.4.7",
-        "@deriv/api-types": "^1.0.94",
+        "@deriv/api-types": "^1.0.112",
         "@deriv/components": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/translations": "^1.0.0",

packages/api/package.json

@@ -10,7 +10,7 @@
         "@tanstack/react-query-devtools": "^4.28.0"
     },
     "devDependencies": {
-        "@deriv/api-types": "^1.0.94",
+        "@deriv/api-types": "^1.0.112",
         "@testing-library/react": "^12.0.0",
         "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^13.5.0",

packages/appstore/package.json

@@ -26,19 +26,17 @@
     "dependencies": {
         "@deriv/account": "^1.0.0",
         "@deriv/api": "^1.0.0",
-        "@deriv/api-types": "^1.0.94",
+        "@deriv/api-types": "^1.0.112",
         "@deriv/cashier": "^1.0.0",
-        "@deriv/components": "^1.0.0",
         "@deriv/cfd": "^1.0.0",
+        "@deriv/components": "^1.0.0",
+        "@deriv/hooks": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
-        "@testing-library/jest-dom": "^5.12.0",
-        "@deriv/hooks": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
-        "@deriv/hooks": "^1.0.0",
-        "@deriv/ui": "^0.8.0",
         "@deriv/utils": "^1.0.0",
+        "@testing-library/jest-dom": "^5.12.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "lodash.debounce": "^4.0.8",
@@ -48,8 +46,8 @@
         "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-content-loader": "^6.2.0",
-        "react-router": "^5.2.0",
         "react-joyride": "^2.5.3",
+        "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
         "react-transition-group": "4.4.2",
         "embla-carousel-react": "^8.0.0-rc07"
@@ -72,8 +70,8 @@
         "@types/react-router-dom": "^5.1.6",
         "babel-core": "^6.26.3",
         "babel-loader": "^8.1.0",
-        "copy-webpack-plugin": "^9.0.1",
         "concurrently": "^5.3.0",
+        "copy-webpack-plugin": "^9.0.1",
         "cross-env": "^5.2.0",
         "css-loader": "^5.0.1",
         "css-minimizer-webpack-plugin": "^3.0.1",

packages/appstore/src/components/transaction-list/transaction-list.tsx

@@ -20,7 +20,7 @@ const TransactionList = () => {
             text: localize('All'),
             value: '',
         },
-        ...(wallet.is_virtual
+        ...(wallet?.is_virtual
             ? ([
                   {
                       text: localize('Reset balance'),

packages/appstore/src/components/wallet-content/wallet-content.tsx

@@ -12,8 +12,6 @@ type TProps = {
 };
 
 const WalletContent = ({ wallet_account }: TProps) => {
-    const is_malta_wallet = wallet_account.is_malta_wallet;
-
     return (
         <div
             className={classNames('wallet-content', { 'wallet-content__demo': wallet_account.is_demo })}
@@ -23,7 +21,7 @@ const WalletContent = ({ wallet_account }: TProps) => {
             <WalletCfdsListing wallet_account={wallet_account} />
             <ContentDivider />
             <WalletOptionsAndMultipliersListing wallet_account={wallet_account} />
-            {is_malta_wallet && !wallet_account.is_demo && (
+            {wallet_account.is_malta_wallet && !wallet_account.is_demo && (
                 <EUDisclaimer
                     is_wallet={true}
                     wrapperClassName='wallet-content__disclaimer'

packages/cashier/package.json

@@ -36,15 +36,15 @@
     },
     "dependencies": {
         "@deriv/api": "^1.0.0",
-        "@deriv/api-types": "^1.0.94",
+        "@deriv/api-types": "^1.0.112",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.13",
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",
-        "@deriv/ui": "^0.8.0",
+        "@deriv/ui": "^0.6.0",
         "classnames": "^2.2.6",
         "formik": "^2.1.4",
         "framer-motion": "^6.5.1",

packages/cashier/src/containers/routes/error-component/error-component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { PageErrorContainer } from '@deriv/components';
 import { routes } from '@deriv/shared';
-import { TStores } from '@deriv/stores';
+import { TRootStore } from '../../../types';
 import { localize, Localize } from '@deriv/translations';
 
 const ErrorComponent = ({
@@ -14,7 +14,7 @@ const ErrorComponent = ({
     setError,
     should_clear_error_on_click,
     should_show_refresh = true,
-}: TStores['common']['error']) => {
+}: TRootStore['common']['error']) => {
     const history = useHistory();
 
     React.useEffect(() => {

packages/cashier/src/pages/account-transfer/__tests__/account-transfer.spec.tsx

@@ -5,7 +5,7 @@ import { useCashierLocked, useDepositLocked } from '@deriv/hooks';
 import { createBrowserHistory } from 'history';
 import AccountTransfer from '../account-transfer';
 import CashierProviders from '../../../cashier-providers';
-import { mockStore, TStores } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 
 jest.mock('@deriv/shared/src/services/ws-methods', () => ({
     __esModule: true,
@@ -62,7 +62,7 @@ describe('<AccountTransfer />', () => {
         onClose: jest.fn(),
     };
 
-    const renderAccountTransfer = (store: TStores) => {
+    const renderAccountTransfer = (store: ReturnType<typeof mockStore>) => {
         render(<AccountTransfer {...props} />, {
             wrapper: ({ children }) => <CashierProviders store={store}>{children}</CashierProviders>,
         });

packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.scss

@@ -180,7 +180,7 @@
     &__form-buttons {
         display: flex;
         flex-direction: row;
-        justify-content: flex-end;
+        justify-content: end;
         align-items: center;
 
         > * {

packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.tsx

@@ -3,9 +3,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { isMobile, routes } from '@deriv/shared';
 import { useCashierLocked, useDepositLocked } from '@deriv/hooks';
 import OnRamp from '../on-ramp';
+import { mockStore } from '@deriv/stores';
 import type { TOnRampProps } from '../on-ramp';
 import CashierProviders from '../../../cashier-providers';
-import { mockStore, TStores } from '@deriv/stores';
 
 jest.mock('@deriv/hooks', () => ({
     ...jest.requireActual('@deriv/hooks'),
@@ -94,17 +94,16 @@ describe('<OnRamp />', () => {
         mockUseDepositLocked.mockReturnValue(false);
         mockUseCashierLocked.mockReturnValue(false);
     });
-    const renderOnRamp = (mocked_store: TStores, is_rerender = false) => {
-        const ui = (
+    const mockOnRamp = (mocked_store: ReturnType<typeof mockStore>, is_rerender = false) => {
+        return (
             <CashierProviders store={mocked_store}>
                 <OnRamp {...props} />
             </CashierProviders>
         );
-        return is_rerender ? ui : render(ui);
     };
 
     it('should render <Loading /> component', () => {
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -124,16 +123,18 @@ describe('<OnRamp />', () => {
                 },
             },
         });
-        const { rerender } = renderOnRamp(mockRootStore) as ReturnType<typeof render>;
+        const { rerender } = render(mockOnRamp(mock));
+
         expect(screen.getByText('Loading')).toBeInTheDocument();
-        mockRootStore.modules.cashier.general_store.is_loading = false;
-        mockRootStore.client.is_switching = true;
-        rerender(renderOnRamp(mockRootStore, true) as JSX.Element);
+        mock.modules.cashier.general_store.is_loading = false;
+        mock.client.is_switching = true;
+        rerender(mockOnRamp(mock));
         expect(screen.getByText('Loading')).toBeInTheDocument();
     });
 
     it('should render <CashierLocked /> component', () => {
-        const mockRootStore = mockStore({
+        (useCashierLocked as jest.Mock).mockReturnValue(true);
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -145,16 +146,19 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        mockUseCashierLocked.mockReturnValue(true);
-        const { rerender } = renderOnRamp(mockRootStore) as ReturnType<typeof render>;
+        const { rerender } = render(mockOnRamp(mock));
+
         expect(screen.getByText('CashierLocked')).toBeInTheDocument();
-        mockUseDepositLocked.mockReturnValue(true);
-        rerender(renderOnRamp(mockRootStore, true) as JSX.Element);
+
+        (useCashierLocked as jest.Mock).mockReturnValue(false);
+        (useDepositLocked as jest.Mock).mockReturnValue(true);
+        rerender(mockOnRamp(mock));
+
         expect(screen.getByText('CashierLocked')).toBeInTheDocument();
     });
 
     it('should render <OnRampProviderCard /> component and "Select payment channel" message', () => {
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -166,7 +170,8 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
+
         expect(screen.getByText('Select payment channel')).toBeInTheDocument();
         expect(screen.getByText('OnRampProviderCard')).toBeInTheDocument();
     });
@@ -175,7 +180,7 @@ describe('<OnRamp />', () => {
         const modal_root_el = document.createElement('div');
         modal_root_el.setAttribute('id', 'modal_root');
         document.body.appendChild(modal_root_el);
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -195,7 +200,8 @@ describe('<OnRamp />', () => {
                 },
             },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
+
         expect(screen.getByText('Title of the onramp popup modal')).toBeInTheDocument();
         expect(screen.getByText('OnRampProviderPopup')).toBeInTheDocument();
         document.body.removeChild(modal_root_el);
@@ -205,7 +211,7 @@ describe('<OnRamp />', () => {
         const modal_root_el = document.createElement('div');
         modal_root_el.setAttribute('id', 'modal_root');
         document.body.appendChild(modal_root_el);
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -225,15 +231,16 @@ describe('<OnRamp />', () => {
                 },
             },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
         const close_cross_btn = screen.getByRole('button', { name: '' });
         fireEvent.click(close_cross_btn);
-        expect(mockRootStore.modules.cashier.onramp.setIsOnRampModalOpen).toHaveBeenCalledWith(false);
+
+        expect(mock.modules.cashier.onramp.setIsOnRampModalOpen).toHaveBeenCalledWith(false);
         document.body.removeChild(modal_root_el);
     });
 
     it('should trigger "setSideNotes" callback in Desktop mode', () => {
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -245,13 +252,14 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
+
         expect(props.setSideNotes).toHaveBeenCalledTimes(1);
     });
 
     it('should show "What is Fiat onramp?" message and render <ReadMore /> component in Mobile mode', () => {
         (isMobile as jest.Mock).mockReturnValue(true);
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -263,14 +271,15 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
+
         expect(screen.getByText('What is Fiat onramp?')).toBeInTheDocument();
         expect(screen.getByText('ReadMore')).toBeInTheDocument();
     });
 
     it('should have proper menu options in Mobile mode', () => {
         (isMobile as jest.Mock).mockReturnValue(true);
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -282,7 +291,8 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
+
         const select = screen.getByTestId('dt_on_ramp_select_native');
         const labels = Array.from(select as any).map((option: any) => option.label);
 
@@ -306,7 +316,7 @@ describe('<OnRamp />', () => {
                 path: routes.cashier_onramp,
             },
         ];
-        const mockRootStore = mockStore({
+        const mock = mockStore({
             client: {
                 account_status: { status: [] },
                 mt5_login_list: [
@@ -318,9 +328,10 @@ describe('<OnRamp />', () => {
             },
             modules: { cashier: cashier_mock },
         });
-        renderOnRamp(mockRootStore);
+        render(mockOnRamp(mock));
         const select = screen.getByTestId('dt_on_ramp_select_native');
         fireEvent.change(select, { target: { value: routes.cashier_deposit } });
-        expect(mockRootStore.common.routeTo).toHaveBeenCalledTimes(1);
+
+        expect(mock.common.routeTo).toHaveBeenCalledTimes(1);
     });
 });

packages/cashier/src/pages/payment-agent-transfer/__tests__/payment-agent-transfer.spec.tsx

@@ -5,7 +5,7 @@ import { createBrowserHistory } from 'history';
 import PaymentAgentTransfer from '../payment-agent-transfer';
 import CashierProviders from '../../../cashier-providers';
 import { useCashierLocked } from '@deriv/hooks';
-import { mockStore, TStores } from '@deriv/stores';
+import { mockStore } from '@deriv/stores';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -66,7 +66,7 @@ describe('<PaymentAgentTransfer />', () => {
         mockUseCashierLocked.mockReturnValue(false);
     });
 
-    const renderPaymentAgentTransfer = (mock_root_store: TStores) => {
+    const renderPaymentAgentTransfer = (mock_root_store: ReturnType<typeof mockStore>) => {
         return render(
             <Router history={createBrowserHistory()}>
                 <CashierProviders store={mock_root_store}>

packages/cashier/src/pages/payment-agent/__tests__/payment-agent.spec.tsx

@@ -4,8 +4,8 @@ import { Router } from 'react-router';
 import { createBrowserHistory } from 'history';
 import PaymentAgent from '../payment-agent';
 import CashierProviders from '../../../cashier-providers';
+import { mockStore } from '@deriv/stores';
 import { useCashierLocked } from '@deriv/hooks';
-import { mockStore, TStores } from '@deriv/stores';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -38,7 +38,7 @@ const cashier_mock = {
 };
 
 describe('<PaymentAgent />', () => {
-    const renderPaymentAgent = (mock_root_store: TStores) => {
+    const renderPaymentAgent = (mock_root_store: ReturnType<typeof mockStore>) => {
         return render(
             <Router history={createBrowserHistory()}>
                 <CashierProviders store={mock_root_store}>