fix(connect-popup): systemInfo

packages/connect-popup/package.json

@@ -16,6 +16,7 @@
         "@trezor/connect-analytics": "workspace:*",
         "@trezor/connect-ui": "workspace:*",
         "@trezor/crypto-utils": "workspace:*",
+        "@trezor/env-utils": "workspace:*",
         "@trezor/urls": "workspace:*",
         "eth-phishing-detect": "^1.2.0"
     },

packages/connect-popup/src/index.tsx

@@ -9,7 +9,9 @@ import {
     PopupEvent,
     PopupInit,
     PopupHandshake,
+    SystemInfo,
 } from '@trezor/connect';
+import { config } from '@trezor/connect/lib/data/config';
 
 import { reactEventBus } from '@trezor/connect-ui/src/utils/eventBus';
 import { analytics, EventType } from '@trezor/connect-analytics';
@@ -24,6 +26,35 @@ import {
     postMessage,
 } from './view/common';
 import { isPhishingDomain } from './utils/isPhishingDomain';
+import { getBrowserVersion, getBrowserName, getDeviceType, getOsFamily } from '@trezor/env-utils';
+
+// FIXME!!!
+// this is copy paste hotfix from connect-iframe package
+// why: systemInfo is sent in POPUP.INIT message from connect-web/src/popup. And this was added in 9.0.8.
+// In case implementator has earlier version, systemInfo does not come. One of results is that popup displays
+// outdated browser.
+const getSystemInfo = (supportedBrowsers: { [key: string]: { version: number } }): SystemInfo => {
+    const browserName = getBrowserName();
+    const browserVersion = getBrowserVersion();
+    const supportedBrowser = browserName ? supportedBrowsers[browserName.toLowerCase()] : undefined;
+    const outdatedBrowser = supportedBrowser
+        ? supportedBrowser.version > parseInt(browserVersion, 10)
+        : false;
+    const mobile = getDeviceType() === 'mobile';
+    const supportedMobile = mobile ? typeof navigator.usb !== 'undefined' : true;
+    const supported = !!(supportedBrowser && !outdatedBrowser && supportedMobile);
+
+    return {
+        os: {
+            family: getOsFamily(),
+            mobile,
+        },
+        browser: {
+            supported,
+            outdated: outdatedBrowser,
+        },
+    };
+};
 
 let handshakeTimeout: ReturnType<typeof setTimeout>;
 
@@ -43,6 +74,8 @@ const escapeHtml = (payload: any) => {
 const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
     const { data } = event;
 
+    console.log('popup handle message', event.data);
+
     if (!data) return;
 
     // This is message from the window.opener
@@ -181,6 +214,9 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
 // handle POPUP.INIT message from window.opener
 const init = async (payload: PopupInit['payload']) => {
     if (!payload) return;
+
+    payload.systemInfo = getSystemInfo(config.supportedBrowsers);
+
     try {
         initMessageChannel(payload, handleMessage);
         // reset loading hash
@@ -209,7 +245,9 @@ const handshake = (handshake: PopupHandshake) => {
     clearTimeout(handshakeTimeout);
 
     // use trusted settings from iframe
-    setState({ settings: payload.settings });
+    setState({
+        settings: payload.settings,
+    });
 
     reactEventBus.dispatch(handshake);
 

yarn.lock

@@ -7738,6 +7738,7 @@ __metadata:
     "@trezor/connect-analytics": "workspace:*"
     "@trezor/connect-ui": "workspace:*"
     "@trezor/crypto-utils": "workspace:*"
+    "@trezor/env-utils": "workspace:*"
     "@trezor/node-utils": "workspace:*"
     "@trezor/trezor-user-env-link": "workspace:*"
     "@trezor/urls": "workspace:*"