deriv-com
diff --git a/‎jest.config.base.js
+1-1 b/‎jest.config.base.js
+1-1
diff --git a/‎jest.config.js
+1-1 b/‎jest.config.js
+1-1
diff --git a/‎package-lock.json
+15 b/‎package-lock.json
+15
diff --git a/‎packages/account/src/App.tsx
+2 b/‎packages/account/src/App.tsx
+2
diff --git a/‎packages/account/src/Constants/routes-config.ts
+7 b/‎packages/account/src/Constants/routes-config.ts
+7
diff --git a/‎packages/account/src/Containers/Account/account.tsx
+26-6 b/‎packages/account/src/Containers/Account/account.tsx
+26-6
diff --git a/‎packages/account/src/Containers/toast-popup.tsx
+79 b/‎packages/account/src/Containers/toast-popup.tsx
+79
diff --git a/‎packages/account/src/Helpers/utils.tsx
-3 b/‎packages/account/src/Helpers/utils.tsx
-3
@@ -15,7 +15,7 @@ module.exports = {
     coverageDirectory: './coverage/',
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
     // This is needed to transform es modules imported from node_modules of the target component.
-    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser)).+\\.js$'],
     setupFiles: ['<rootDir>/../../jest.setup.js'],
     setupFilesAfterEnv: ['<rootDir>/../../setupTests.js'],
     testPathIgnorePatterns: ['/integration-tests/', '/component-tests/'],
 
@@ -17,6 +17,6 @@ module.exports = {
         '^.+\\.(ts|tsx)?$': 'ts-jest',
     },
     testRegex: '(/__tests__/.*|(\\.)(test|spec))\\.(js|jsx|tsx|ts)?$',
-    transformIgnorePatterns: ['/node_modules/(?!@enykeev/react-virtualized).+\\.js$'],
+    transformIgnorePatterns: ['/node_modules/(?!(@enykeev/react-virtualized|@simplewebauthn/browser)).+\\.js$'],
     testPathIgnorePatterns: ['/integration-tests/'],
 };
@@ -1,6 +1,7 @@
 import React from 'react';
 import Routes from './Containers/routes';
 import ResetTradingPassword from './Containers/reset-trading-password';
+import { NetworkStatusToastErrorPopup } from './Containers/toast-popup';
 import { APIProvider } from '@deriv/api';
 import { StoreProvider } from '@deriv/stores';
 import { TCoreStores } from '@deriv/stores/types';
@@ -21,6 +22,7 @@ const App = ({ passthrough }: TAppProps) => {
 
     return (
         <StoreProvider store={root_store}>
+            <NetworkStatusToastErrorPopup />
             <APIProvider>
                 <POIProvider>
                     {Notifications && <Notifications />}
 
@@ -4,6 +4,7 @@ import { localize } from '@deriv/translations';
 import {
     AccountLimits,
     Passwords,
+    Passkeys,
     PersonalDetails,
     TradingAssessment,
     FinancialAssessment,
@@ -111,12 +112,18 @@ const initRoutesConfig = () => [
             {
                 getTitle: () => localize('Security and safety'),
                 icon: 'IcSecurity',
+                id: 'security_routes',
                 subroutes: [
                     {
                         path: routes.passwords,
                         component: Passwords,
                         getTitle: () => localize('Email and passwords'),
                     },
+                    {
+                        path: routes.passkeys,
+                        component: Passkeys,
+                        getTitle: () => localize('Passkeys'),
+                    },
                     {
                         path: routes.self_exclusion,
                         component: SelfExclusion,
 
@@ -1,12 +1,18 @@
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { FadeWrapper, Loading } from '@deriv/components';
-import { matchRoute, routes as shared_routes } from '@deriv/shared';
+import {
+    deepCopy,
+    flatten,
+    matchRoute,
+    removeExactRouteFromRoutes,
+    routes as shared_routes,
+    TRoute as TSharedRoute,
+} from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import PageOverlayWrapper from './page-overlay-wrapper';
 import { TRoute } from '../../Types';
 import 'Styles/account.scss';
-import { flatten } from 'Helpers/utils';
 
 type TAccountProps = RouteComponentProps & {
     routes: Array<TRoute>;
@@ -30,17 +36,31 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
         landing_company_shortcode,
         should_allow_authentication,
         should_allow_poinc_authentication,
+        is_passkey_supported,
     } = client;
-    const { toggleAccountSettings, is_account_settings_visible } = ui;
+    const { toggleAccountSettings, is_account_settings_visible, is_mobile, is_desktop } = ui;
+
+    const [available_routes, setAvailableRoutes] = React.useState(routes);
+
+    React.useEffect(() => {
+        const should_remove_passkeys_route = is_desktop || (is_mobile && !is_passkey_supported);
+        if (should_remove_passkeys_route) {
+            const desktop_routes = removeExactRouteFromRoutes(deepCopy(routes) as TSharedRoute[], 'passkeys');
+            setAvailableRoutes(desktop_routes as TRoute[]);
+        } else {
+            setAvailableRoutes(routes);
+        }
+    }, [routes, is_desktop, is_mobile, is_passkey_supported]);
+
     // subroutes of a route is structured as an array of arrays
-    const subroutes = flatten(routes.map(i => i.subroutes));
+    const subroutes = flatten(available_routes.map(i => i.subroutes));
     const selected_content = subroutes.find(r => matchRoute(r, location.pathname));
 
     React.useEffect(() => {
         toggleAccountSettings(true);
     }, [toggleAccountSettings]);
 
-    routes.forEach(menu_item => {
+    available_routes.forEach(menu_item => {
         if (menu_item?.subroutes?.length) {
             menu_item.subroutes.forEach(route => {
                 if (route.path === shared_routes.financial_assessment) {
@@ -81,7 +101,7 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
             keyname='account-page-wrapper'
         >
             <div className='account'>
-                <PageOverlayWrapper routes={routes} subroutes={subroutes} />
+                <PageOverlayWrapper routes={available_routes} subroutes={subroutes} />
             </div>
         </FadeWrapper>
     );
 
@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MobileWrapper, Toast } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+
+type TToastPopUp = {
+    portal_id?: string;
+    className: string;
+} & React.ComponentProps<typeof Toast>;
+
+type TNetworkStatusToastError = {
+    status: string;
+    portal_id: string;
+    message: string;
+};
+
+export const ToastPopup = ({
+    portal_id = 'popup_root',
+    children,
+    className,
+    ...props
+}: React.PropsWithChildren<TToastPopUp>) => {
+    const new_portal_id = document.getElementById(portal_id);
+    if (!new_portal_id) return null;
+    return ReactDOM.createPortal(
+        <Toast className={classNames('dc-toast-popup', className)} {...props}>
+            {children}
+        </Toast>,
+        new_portal_id
+    );
+};
+
+/**
+ * Network status Toast components
+ */
+const NetworkStatusToastError = ({ status, portal_id, message }: TNetworkStatusToastError) => {
+    const [is_open, setIsOpen] = React.useState(false);
+    const new_portal_id = document.getElementById(portal_id);
+
+    if (!new_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>,
+        new_portal_id
+    );
+};
+
+export const NetworkStatusToastErrorPopup = observer(() => {
+    const {
+        common: { network_status },
+    } = useStore();
+    return (
+        <NetworkStatusToastError
+            portal_id='popup_root'
+            message={network_status.tooltip}
+            status={network_status.class}
+        />
+    );
+});
@@ -199,9 +199,6 @@ export const isDocumentNumberValid = (document_number: string, document_type: Fo
 
 export const shouldHideHelperImage = (document_id: string) => document_id === IDV_NOT_APPLICABLE_OPTION.id;
 
-// @ts-expect-error as the generic is a Array
-export const flatten = <T extends Array<unknown>>(arr: T) => [].concat(...arr);
-
 export const isServerError = (error: unknown): error is TServerError =>
     typeof error === 'object' && error !== null && 'code' in error;