amam/add bridge functionality for native mobile app

packages/core/src/App/Components/Layout/Header/account-actions.tsx

@@ -25,7 +25,22 @@ const AccountInfo = React.lazy(
 
 const LogoutButton = ({ onClickLogout }: { onClickLogout: () => void }) => {
     const { localize } = useTranslations();
-    return <Button className='acc-info__button' has_effect text={localize('Log out')} onClick={onClickLogout} />;
+    const { isDesktop } = useDevice();
+
+    const handleLogoutClick = () => {
+        // Check if we're in a mobile environment with Flutter channel available
+        if (!isDesktop && window.DerivAppChannel) {
+            // Use Flutter channel postMessage for mobile "Back to app"
+            window.DerivAppChannel.postMessage(JSON.stringify({ event: 'trading:back' }));
+        } else {
+            // Fallback to default logout behavior for desktop or when Flutter channel is not available
+            onClickLogout();
+        }
+    };
+
+    const buttonText = !isDesktop && window.DerivAppChannel ? localize('Back to app') : localize('Log out');
+
+    return <Button className='acc-info__button' has_effect text={buttonText} onClick={handleLogoutClick} />;
 };
 
 const LoggedOutView = () => (

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -17,6 +17,7 @@ import {
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { useTranslations } from '@deriv-com/translations';
+import { useDevice } from '@deriv-com/ui';
 
 // eslint-disable-next-line no-unused-vars, import/no-unresolved -- Kept for future restoration of LiveChat functionality
 import LiveChat from 'App/Components/Elements/LiveChat';
@@ -31,6 +32,7 @@ import MenuLink from './menu-link';
 
 const ToggleMenuDrawer = observer(() => {
     const { localize } = useTranslations();
+    const { isDesktop } = useDevice();
     const { ui, client, traders_hub } = useStore();
     const {
         disableApp,
@@ -83,8 +85,15 @@ const ToggleMenuDrawer = observer(() => {
     // Simple logout handler that closes drawer and calls logout
     const handleLogout = React.useCallback(async () => {
         toggleDrawer();
-        await logoutClient();
-    }, [logoutClient, toggleDrawer]);
+        // Check if we're in a mobile environment with Flutter channel available
+        if (!isDesktop && window.DerivAppChannel) {
+            // Use Flutter channel postMessage for mobile "Back to app"
+            window.DerivAppChannel.postMessage(JSON.stringify({ event: 'trading:back' }));
+        } else {
+            // Fallback to default logout behavior for desktop or when Flutter channel is not available
+            await logoutClient();
+        }
+    }, [logoutClient, toggleDrawer, isDesktop]);
 
     const renderSubMenuFromConfig = routePath => {
         const routes_config = getRoutesConfig();
@@ -238,7 +247,10 @@ const ToggleMenuDrawer = observer(() => {
                                 )}
                                 {is_logged_in && (
                                     <MobileDrawer.Item onClick={handleLogout}>
-                                        <MenuLink icon={<LegacyLogout1pxIcon />} text={localize('Log out')} />
+                                        <MenuLink 
+                                            icon={<LegacyLogout1pxIcon />} 
+                                            text={!isDesktop && window.DerivAppChannel ? localize('Back to app') : localize('Log out')} 
+                                        />
                                     </MobileDrawer.Item>
                                 )}
                             </MobileDrawer.Body>

packages/core/src/App/Containers/Layout/header/brand-short-logo.tsx

@@ -2,11 +2,21 @@ import React from 'react';
 
 import { BrandDerivLogoCoralIcon } from '@deriv/quill-icons';
 import { getBrandHomeUrl } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 
 const BrandShortLogo = () => {
+    const { isDesktop } = useDevice();
+
     const handleLogoClick = () => {
-        const brandUrl = getBrandHomeUrl();
-        window.location.href = brandUrl;
+        // Check if we're in a mobile environment with Flutter channel available
+        if (!isDesktop && window.DerivAppChannel) {
+            // Use Flutter channel postMessage for mobile
+            window.DerivAppChannel.postMessage(JSON.stringify({ event: 'trading:home' }));
+        } else {
+            // Fallback to default behavior for desktop or when Flutter channel is not available
+            const brandUrl = getBrandHomeUrl();
+            window.location.href = brandUrl;
+        }
     };
 
     return (

types/global.d.ts

@@ -5,6 +5,9 @@ declare global {
         Analytics: any;
         dataLayer: object[];
         DD_RUM: object | undefined;
+        DerivAppChannel?: {
+            postMessage: (message: string) => void;
+        };
         DerivInterCom: {
             initialize: (config: IntercomConfig) => void;
         };