yashim/feat: add mock server integration

packages/appstore/src/modules/traders-hub/index.tsx

@@ -62,7 +62,7 @@ const TradersHub = () => {
             <Div100vhContainer
                 className={classNames('traders-hub--mobile', {
                     'traders-hub--mobile--eu-user': is_eu_user,
-                    'traders-hub__wallets-bg': is_wallet_account || is_display_test_wallets,
+                    'traders-hub__wallets-bg': is_wallet_account,
                 })}
                 height_offset='50px'
                 is_disabled={isDesktop()}

packages/bot-skeleton/package.json

@@ -35,7 +35,7 @@
         "eslint-plugin-react-hooks": "^4.2.0"
     },
     "dependencies": {
-        "@deriv/deriv-api": "^1.0.11",
+        "@deriv/deriv-api": "^1.0.13",
         "@deriv/indicators": "^1.0.0",
         "@deriv/js-interpreter": "^3.0.0",
         "@deriv/shared": "^1.0.0",

packages/cashier/package.json

@@ -38,7 +38,7 @@
         "@deriv/api": "^1.0.0",
         "@deriv/api-types": "^1.0.94",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-api": "^1.0.11",
+        "@deriv/deriv-api": "^1.0.13",
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",
         "@deriv/shared": "^1.0.0",

packages/cfd/package.json

@@ -85,7 +85,7 @@
         "@deriv/account": "^1.0.0",
         "@deriv/api-types": "^1.0.94",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-api": "^1.0.11",
+        "@deriv/deriv-api": "^1.0.13",
         "@deriv/shared": "^1.0.0",
         "@deriv/stores": "^1.0.0",
         "@deriv/translations": "^1.0.0",

packages/components/src/components/div100vh-container/div100vh-container.tsx

@@ -1,6 +1,6 @@
 /* eslint @typescript-eslint/triple-slash-reference: "off" */
 /// <reference path="../../../@types/react-div-100vh/react-div-100vh-config.d.ts" />
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import Div100vh from 'react-div-100vh';
 
 /* Div100vh is workaround for getting accurate height of 100vh from browsers on mobile,
@@ -15,14 +15,12 @@ import Div100vh from 'react-div-100vh';
 /* To bypass usage of component altogether, use is_bypassed */
 
 type TDiv100vhContainer = {
-    id?: string;
     height_offset: string;
     is_bypassed?: boolean;
     is_disabled?: boolean;
     max_height_offset?: string;
-    className: string;
     max_autoheight_offset?: string;
-};
+} & ComponentProps<'div'>;
 
 const Div100vhContainer = ({
     children,

packages/components/src/components/icon/icons.js

@@ -605,8 +605,6 @@ import './common/ic-whats-app.svg';
 import './common/ic-windows-logo.svg';
 import './common/ic-windows.svg';
 import './common/ic-wip.svg';
-import './common/ic-withdraw-request-verification-sent.svg';
-import './common/ic-withdraw-request-verification.svg';
 import './common/ic-zingpay.svg';
 import './common/ic-zoom-in.svg';
 import './common/ic-zoom-out.svg';

packages/components/src/components/input/input.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { HTMLAttributes } from 'react';
+import React, { ComponentProps, ComponentType, HTMLAttributes, RefObject } from 'react';
 import Field from '../field';
 import Text from '../text/text';
 
@@ -40,6 +40,13 @@ export type TInputProps = {
     onMouseEnter?: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     placeholder?: string;
+    ref?: RefObject<
+        ComponentType extends 'textarea'
+            ? HTMLTextAreaElement
+            : ComponentType extends 'input'
+            ? HTMLInputElement
+            : never
+    >;
     required?: boolean;
     trailing_icon?: React.ReactElement | null;
     type?: string;
@@ -48,7 +55,7 @@ export type TInputProps = {
     readOnly?: boolean;
     is_autocomplete_disabled?: string;
     is_hj_whitelisted?: string;
-};
+} & Omit<ComponentProps<'input'>, 'ref'>;
 
 type TInputWrapper = {
     has_footer: boolean;
@@ -129,7 +136,7 @@ const Input = React.forwardRef<HTMLInputElement & HTMLTextAreaElement, TInputPro
                             <textarea
                                 ref={ref}
                                 data-testid={data_testId}
-                                {...props}
+                                {...(props as ComponentProps<'textarea'>)}
                                 className={classNames('dc-input__field dc-input__textarea', {
                                     'dc-input__field--placeholder-visible': !label && props.placeholder,
                                 })}

packages/components/stories/icon/icons.js

@@ -57,7 +57,7 @@ export const icons =
         'IcAppstoreWalletUsdcLight',
         'IcAppstoreWalletUsdtLight',
         'IcAppstoreWalletsLink',
-        'IcAppstoreWarning',
+        'IcAppstoreWarning'
     ],
     'brand': [
         'IcBrandDerivEzWordmark',
@@ -67,7 +67,7 @@ export const icons =
         'IcBrandDmt5FinancialStp',
         'IcBrandDmt5Financial',
         'IcBrandDmt5Synthetics',
-        'IcBrandDxtradeWordmark',
+        'IcBrandDxtradeWordmark'
     ],
     'cashier': [
         'IcCashierAdd',
@@ -243,7 +243,7 @@ export const icons =
         'IcCashierWyreLight',
         'IcCashierZenithbankDark',
         'IcCashierZenithbankLight',
-        'IcCashier',
+        'IcCashier'
     ],
     'common': [
         'IcAccountCross',
@@ -614,11 +614,9 @@ export const icons =
         'IcWindowsLogo',
         'IcWindows',
         'IcWip',
-        'IcWithdrawRequestVerificationSent',
-        'IcWithdrawRequestVerification',
         'IcZingpay',
         'IcZoomIn',
-        'IcZoomOut',
+        'IcZoomOut'
     ],
     'contract': [
         'IcContractBarrier',
@@ -636,7 +634,7 @@ export const icons =
         'IcContractStartTimeCircle',
         'IcContractStartTime',
         'IcContractStrike',
-        'IcContractTarget',
+        'IcContractTarget'
     ],
     'currency': [
         'IcCurrencyAud',
@@ -660,10 +658,10 @@ export const icons =
         'IcCurrencyUsdc',
         'IcCurrencyUsdk',
         'IcCurrencyUst',
-        'IcCurrencyVirtual',
+        'IcCurrencyVirtual'
     ],
     'derivez': [
-        'IcDerivez',
+        'IcDerivez'
     ],
     'dxtrade': [
         'IcDxtradeDerivX',
@@ -680,7 +678,7 @@ export const icons =
         'IcDxtradeFinancialPlatform',
         'IcDxtradeFinancial',
         'IcDxtradeOnePassword',
-        'IcDxtradeSyntheticPlatform',
+        'IcDxtradeSyntheticPlatform'
     ],
     'flag': [
         'IcFlagDe',
@@ -696,7 +694,7 @@ export const icons =
         'IcFlagUk',
         'IcFlagVi',
         'IcFlagZhCn',
-        'IcFlagZhTw',
+        'IcFlagZhTw'
     ],
     'mt5': [
         'IcMt5Acuity',
@@ -725,7 +723,7 @@ export const icons =
         'IcMt5SyntheticDashboard',
         'IcMt5SyntheticIndices',
         'IcMt5SyntheticPlatform',
-        'IcMt5TradeTypes',
+        'IcMt5TradeTypes'
     ],
     'option': [
         'IcOptionAccumulators',
@@ -743,7 +741,7 @@ export const icons =
         'IcOptionOverUnder',
         'IcOptionRaiseFall',
         'IcOptionTouchNotouch',
-        'IcOptionUpDownAsian',
+        'IcOptionUpDownAsian'
     ],
     'rebranding': [
         'IcRebrandingBinaryBot',
@@ -768,7 +766,7 @@ export const icons =
         'IcRebrandingMt5Logo',
         'IcRebrandingMt5SwapFree',
         'IcRebrandingSmarttraderDashboard',
-        'IcRebrandingSmarttrader',
+        'IcRebrandingSmarttrader'
     ],
     'stock': [
         'IcStockAdidasSalomon',
@@ -818,7 +816,7 @@ export const icons =
         'IcStockVisa',
         'IcStockWallMart',
         'IcStockWaltDisney',
-        'IcStockZoom',
+        'IcStockZoom'
     ],
     'tradetype': [
         'IcTradetypeAccu',
@@ -856,7 +854,7 @@ export const icons =
         'IcTradetypeTicklow',
         'IcTradetypeUpordown',
         'IcTradetypeVanillaLongCall',
-        'IcTradetypeVanillaLongPut',
+        'IcTradetypeVanillaLongPut'
     ],
     'underlying': [
         'IcUnderlying1HZ100V',
@@ -1015,7 +1013,7 @@ export const icons =
         'IcUnderlyingWLDEUR',
         'IcUnderlyingWLDGBP',
         'IcUnderlyingWLDUSD',
-        'IcUnderlyingWLDXAU',
+        'IcUnderlyingWLDXAU'
     ],
     'wallet': [
         'IcWalletBitcoinDark',
@@ -1043,6 +1041,6 @@ export const icons =
         'IcWalletTetherDark',
         'IcWalletTetherLight',
         'IcWalletUsdCoinDark',
-        'IcWalletUsdCoinLight',
-    ],
-}
+        'IcWalletUsdCoinLight'
+    ]
+}

packages/core/package.json

@@ -94,7 +94,7 @@
         "@deriv/cashier": "^1.0.0",
         "@deriv/cfd": "^1.0.0",
         "@deriv/components": "^1.0.0",
-        "@deriv/deriv-api": "^1.0.11",
+        "@deriv/deriv-api": "^1.0.13",
         "@deriv/deriv-charts": "1.2.2",
         "@deriv/hooks": "^1.0.0",
         "@deriv/p2p": "^0.7.3",

packages/core/src/App/Components/dev-tools/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import MockDialog from './mock-dialog';
+import { useLocalStorageData } from '@deriv/hooks';
+
+const DevTools = () => {
+    const [show_mockserver_panel, setShowMockServerPanel] = useLocalStorageData<boolean>(
+        'show_mockserver_panel',
+        false
+    );
+
+    React.useEffect(() => {
+        const handleShortcutKey = (event: globalThis.KeyboardEvent) => {
+            if (event.ctrlKey && event.key === '0') {
+                setShowMockServerPanel(prev => !prev);
+            }
+        };
+
+        window.addEventListener('keydown', handleShortcutKey);
+
+        return () => {
+            window.removeEventListener('keydown', handleShortcutKey);
+        };
+    }, [setShowMockServerPanel]);
+
+    if (show_mockserver_panel) {
+        return <MockDialog />;
+    }
+
+    return <React.Fragment />;
+};
+
+export default DevTools;

packages/core/src/App/Components/dev-tools/mock-dialog.scss

@@ -0,0 +1,69 @@
+.mock-dialog {
+    position: absolute;
+    bottom: 4.6rem;
+    right: 1rem;
+    width: 34rem;
+    border-radius: $BORDER_RADIUS;
+    padding: 1.2rem 1.6rem;
+    background-color: var(--general-main-1);
+    box-shadow: 0 20px 13px rgba(0, 0, 0, 0.01), 0 4px 3px rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--general-hover);
+    z-index: 69420;
+
+    &__title {
+        margin-bottom: 1.4rem;
+    }
+
+    &__status {
+        border-radius: 4px;
+        border: 2px solid;
+        padding: 0.8rem 1.2rem;
+        margin-bottom: 2.4rem;
+
+        &--online {
+        }
+        &--connecting {
+        }
+        &--offline {
+            background-color: #f3f4f6;
+            border-color: #e5e7eb;
+
+            .dc-text {
+                color: #6b7280;
+            }
+        }
+    }
+
+    &__form {
+        display: flex;
+        min-height: 40rem;
+        flex-direction: column;
+        gap: 2rem;
+
+        &--dropdown-container {
+            display: inline-flex;
+            gap: 1rem;
+
+            button {
+                height: unset;
+            }
+        }
+
+        &--input {
+            margin-bottom: unset;
+        }
+
+        &--submit-container {
+            display: flex;
+            justify-content: end;
+            gap: 1rem;
+
+            button:disabled {
+                cursor: not-allowed;
+                span {
+                    color: #9ca3af;
+                }
+            }
+        }
+    }
+}