diff --git a/packages/connect-popup/src/index.tsx b/packages/connect-popup/src/index.tsx index 4c57167beb4..ae64209619c 100644 --- a/packages/connect-popup/src/index.tsx +++ b/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; + // 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) => { 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(); + // todo: increase timeout, now set low for testing + }, 3 * 1000); }; window.addEventListener('load', onLoad, false); diff --git a/packages/connect-ui/src/index.ts b/packages/connect-ui/src/index.ts index a99b7843567..04e1e63dfad 100644 --- a/packages/connect-ui/src/index.ts +++ b/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 diff --git a/packages/connect-ui/src/views/Error.tsx b/packages/connect-ui/src/views/Error.tsx new file mode 100644 index 00000000000..d60083683d3 --- /dev/null +++ b/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) => ( + tip.desc) + .join('') || '' + } + image={} + 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 + + } + /> +); diff --git a/packages/suite-storage/src/web/index.ts b/packages/suite-storage/src/web/index.ts index a83b164c516..5c56a051d01 100644 --- a/packages/suite-storage/src/web/index.ts +++ b/packages/suite-storage/src/web/index.ts @@ -71,6 +71,8 @@ class CommonDB { // 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;