feat(popup): error screen if handshake takes too long

packages/connect-popup/src/index.tsx

@@ -10,7 +10,7 @@ import {
     PopupInit,
     PopupHandshake,
 } from '@trezor/connect';
-import { Transport } from '@trezor/connect-ui';
+import { Transport, ErrorView } from '@trezor/connect-ui';
 
 import * as view from './view';
 import {
@@ -26,6 +26,8 @@ import {
     showBackupNotification,
 } from './view/notification';
 
+let handshakeTimeout: ReturnType<typeof setTimeout>;
+
 // browser built-in functionality to quickly and safely escape the string
 const escapeHtml = (payload: any) => {
     if (!payload) return;
@@ -43,6 +45,8 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
     const { data } = event;
     if (!data) return;
 
+    console.log('data', data);
+
     // This is message from the window.opener
     if (data.type === POPUP.INIT) {
         init(escapeHtml(data.payload)); // eslint-disable-line @typescript-eslint/no-use-before-define
@@ -185,6 +189,9 @@ const handshake = (payload: PopupHandshake['payload']) => {
     if (payload.transport && payload.transport.outdated) {
         showBridgeUpdateNotification();
     }
+
+    // todo: uncomment. now disabled for testing
+    // clearTimeout(handshakeTimeout);
 };
 
 const onLoad = () => {
@@ -196,6 +203,11 @@ const onLoad = () => {
     }
 
     postMessageToParent(createPopupMessage(POPUP.LOADED));
+
+    handshakeTimeout = setTimeout(() => {
+        showView(<ErrorView error="handshake-timeout" />);
+        // todo: increase timeout, now set low for testing
+    }, 3 * 1000);
 };
 
 window.addEventListener('load', onLoad, false);

packages/connect-ui/src/index.ts

@@ -1,4 +1,5 @@
 export * from './views/Transport';
+export * from './views/Error';
 
 // this export will be removed in the future but it is required now
 // future => connect-ui will have its own entrypoint

packages/connect-ui/src/views/Error.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Button, Image } from '@trezor/components';
+
+import { View } from '../components/View';
+import imageSrc from '../images/man_with_laptop.svg';
+
+// todo: move this to @trezor/env-utils
+const isFirefox =
+    typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+interface ErrorProps {
+    error: 'handshake-timeout';
+}
+
+const errorCodeToErrorMessage = (code: ErrorProps['error']) => {
+    switch (code) {
+        case 'handshake-timeout':
+            return 'Failed to establish communication between host and connect.trezor.io/popup';
+        default:
+            throw new Error('unhandled case');
+    }
+};
+
+const getTroubleshootingTips = (code: ErrorProps['error']) => {
+    if (code === 'handshake-timeout' && isFirefox) {
+        return [
+            {
+                desc: 'Check if "Enhanced tracking protection" setting in your Firefox browser is off.',
+            },
+        ];
+    }
+
+    return [];
+};
+
+export const ErrorView = (props: ErrorProps) => (
+    <View
+        title={errorCodeToErrorMessage(props.error)}
+        description={
+            getTroubleshootingTips(props.error)
+                .map(tip => tip.desc)
+                .join('') || ''
+        }
+        image={<Image imageSrc={imageSrc} />}
+        buttons={
+            // todo: maybe button onClick handler should be passed in props? Why?
+            // maybe we wan't connect-ui to become a mini application run-able over host application in modal?
+            // so far it only expects to be run in own window in popup
+            <Button variant="primary" onClick={() => window.close()}>
+                Close
+            </Button>
+        }
+    />
+);

packages/suite-storage/src/web/index.ts

@@ -71,6 +71,8 @@ class CommonDB<TDBStructure> {
         // so we need to try accessing the IDB. try/catch around idb.open() does not catch the error (bug in idb?), that's why we use callbacks.
         // this solution calls callback function from within onerror/onsuccess event handlers.
         // For other browsers checking the window.indexedDB should be enough.
+
+        // todo: move this to @trezor/env-utils
         const isFirefox =
             typeof navigator !== 'undefined' &&
             navigator.userAgent.toLowerCase().indexOf('firefox') > -1;