Merge remote-tracking branch 'origin/master' into floating-rate

deriv-com · May 17, 2022 · 7d50914 · 7d50914
2 parents dd71fe1 + c1a88d7
commit 7d50914
Show file tree

Hide file tree

Showing 10 changed files with 355 additions and 282 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -44,6 +44,7 @@ commands:
             - node-v{{ .Environment.CACHE_VERSION }}-{{ checksum "CACHE_KEY1" }}
       - run:
           name: "Install npm packages"
+          no_output_timeout: 30m
           command: |
             npm run bootstrap
             # if [ -d "./node_modules" ]; then

diff --git a/packages/bot-web-ui/src/app/app.jsx b/packages/bot-web-ui/src/app/app.jsx
@@ -12,6 +12,7 @@ import {
     RunPanel,
     RoutePromptDialog,
     Toolbar,
+    NetworkToastPopup,
 } from 'Components';
 import { MobxContentProvider } from 'Stores/connect';
 import RootStore from 'Stores';
@@ -47,12 +48,25 @@ const App = ({ passthrough }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [onMount, onUnmount]);
 
+    React.useEffect(() => {
+
+        const onDisconnectFromNetwork = () => {
+            setIsLoading(false);
+        }
+
+        window.addEventListener('offline', onDisconnectFromNetwork);
+        return () => {
+            window.removeEventListener('offline', onDisconnectFromNetwork);
+        }
+    }, []);
+
     return is_loading ? (
         <Loading />
     ) : (
         <MobxContentProvider store={root_store_instance.current}>
             <div className='bot'>
                 <BotNotificationMessages />
+                <NetworkToastPopup />
                 <Toolbar />
                 <MainContent />
                 <RunPanel />

diff --git a/packages/bot-web-ui/src/components/index.js b/packages/bot-web-ui/src/components/index.js
@@ -21,3 +21,4 @@ export { default as Toolbar } from './toolbar';
 export { default as Toolbox } from './toolbox';
 export { default as TradeAnimation } from './trade-animation';
 export { default as Transactions } from './transactions';
+export { default as NetworkToastPopup } from './network-toast-popup';
diff --git a/packages/bot-web-ui/src/components/network-toast-popup/index.js b/packages/bot-web-ui/src/components/network-toast-popup/index.js
@@ -0,0 +1,3 @@
+import NetworkToastPopup from './network-toast-popup.jsx';
+
+export default NetworkToastPopup;
diff --git a/packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx b/packages/bot-web-ui/src/components/network-toast-popup/network-toast-popup.jsx
@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MobileWrapper, Toast } from '@deriv/components';
+import { connect } from 'Stores/connect';
+
+
+// TODO: Need to sanitize,
+// Same sort of component is being used inside DTrader,
+// In Future we might move the `NetworkStatusToastError` to the core packages for resuability.
+
+/**
+ * Network status Toast components
+ */
+const NetworkStatusToastError = ({ status, portal_id, message }) => {
+    const [is_open, setIsOpen] = React.useState(false);
+
+    if (!document.getElementById(portal_id) || !message) return null;
+
+    if (!is_open && status !== 'online') {
+        setIsOpen(true); // open if status === 'blinker' or 'offline'
+    } else if (is_open && status === 'online') {
+        setTimeout(() => {
+            setIsOpen(false);
+        }, 1500);
+    }
+
+    return ReactDOM.createPortal(
+        <MobileWrapper>
+            <Toast
+                className={classNames({
+                    'dc-toast--blinker': status === 'blinker',
+                })}
+                is_open={is_open}
+                timeout={0}
+                type='error'
+            >
+                {message}
+            </Toast>
+        </MobileWrapper>,
+        document.getElementById(portal_id)
+    );
+};
+
+NetworkStatusToastError.propTypes = {
+    portal_id: PropTypes.string,
+    status: PropTypes.string,
+    message: PropTypes.string,
+};
+
+export default connect(({ common }) => ({
+    network_status: common.network_status,
+}))(({ network_status }) => (
+    <NetworkStatusToastError portal_id='popup_root' message={network_status.tooltip} status={network_status.class} />
+));
diff --git a/packages/cashier/src/Components/Error/__tests__/cashier-locked.spec.js b/packages/cashier/src/Components/Error/__tests__/cashier-locked.spec.js
@@ -16,9 +16,9 @@ describe('<CashierLocked />', () => {
                     cashier_validation: [],
                 }}
                 current_currency_type={'crypto'}
-                is_deposit_lock={false}
+                is_deposit_locked={false}
                 is_system_maintenance
-                is_withdrawal_lock={false}
+                is_withdrawal_locked={false}
             />
         );
 
@@ -36,9 +36,9 @@ describe('<CashierLocked />', () => {
                     cashier_validation: [],
                 }}
                 current_currency_type={'crypto'}
-                is_deposit_lock={false}
+                is_deposit_locked={false}
                 is_system_maintenance
-                is_withdrawal_lock
+                is_withdrawal_locked
             />
         );
 
@@ -56,9 +56,9 @@ describe('<CashierLocked />', () => {
                     cashier_validation: [],
                 }}
                 current_currency_type={'crypto'}
-                is_deposit_lock
+                is_deposit_locked
                 is_system_maintenance
-                is_withdrawal_lock={false}
+                is_withdrawal_locked={false}
             />
         );
 
@@ -76,9 +76,9 @@ describe('<CashierLocked />', () => {
                     cashier_validation: [],
                 }}
                 current_currency_type={'fiat'}
-                is_deposit_lock={false}
+                is_deposit_locked={false}
                 is_system_maintenance
-                is_withdrawal_lock={false}
+                is_withdrawal_locked={false}
             />
         );
 
@@ -95,6 +95,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['no_residence'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -111,6 +112,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['documents_expired'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -127,6 +129,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['cashier_locked_status'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -143,6 +146,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['disabled_status'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -159,6 +163,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_CURRENCY'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -173,6 +178,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_AUTHENTICATE'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -185,6 +191,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_FINANCIAL_RISK_APPROVAL'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -200,6 +207,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['FinancialAssessmentRequired'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -216,6 +224,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_TIN_INFORMATION'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -228,6 +237,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_UK_FUNDS_PROTECTION'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -240,6 +250,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_SELF_EXCLUSION_MAX_TURNOVER_SET'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -256,6 +267,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_FIX_DETAILS'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -277,7 +289,8 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['SelfExclusion'],
                 }}
-                is_deposit_lock
+                is_cashier_locked={false}
+                is_deposit_locked
                 loginid={'CR9000000'}
             />
         );
@@ -295,7 +308,8 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['unwelcome_status'],
                 }}
-                is_deposit_lock
+                is_cashier_locked={false}
+                is_deposit_locked
             />
         );
 
@@ -308,7 +322,8 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['no_withdrawal_or_trading_status'],
                 }}
-                is_withdrawal_lock
+                is_cashier_locked={false}
+                is_withdrawal_locked
             />
         );
 
@@ -325,7 +340,8 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['withdrawal_locked_status'],
                 }}
-                is_withdrawal_lock
+                is_cashier_locked={false}
+                is_withdrawal_locked
             />
         );
 
@@ -342,7 +358,8 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['only_pa_withdrawals_allowed_status'],
                 }}
-                is_withdrawal_lock
+                is_cashier_locked={false}
+                is_withdrawal_locked
             />
         );
 
@@ -357,6 +374,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['ASK_AUTHENTICATE', 'unwelcome_status'],
                 }}
+                is_cashier_locked
             />
         );
 
@@ -369,6 +387,7 @@ describe('<CashierLocked />', () => {
                 account_status={{
                     cashier_validation: ['no_withdrawal_or_trading_status', 'unwelcome_status'],
                 }}
+                is_cashier_locked
             />
         );