wip: use connect core in suite-web

docs/packages/suite-desktop.md

@@ -6,6 +6,8 @@
 
 -   suite-web
 
+    <!-- TODO(karliatto): review those comments regarding static/connect they are probably not true anymore -->
+
     `@trezor/connect` is hosted at `[url]/build/static/connect` and injected as an iframe into DOM.
 
     `@trezor/connect` imports from `@trezor/suite` are replaced to `@trezor/connect-web` see [webpack config](https://github.com/trezor/trezor-suite/blob/develop/packages/suite-build/configs/web.webpack.config.ts)

docs/releases/adding-new-firmwares.md

@@ -37,7 +37,7 @@ After Suite is released, distribute new firmware by releasing new `@trezor/conne
 
 Firmware `releases.json` files provide data about all available firmware versions and they are used to offer the correct firmware version for the user to update depending on the current version of firmware, bootloader and bridge. See the table below for a description of every param.
 
-Those `releases.json` files are bundled inside `@trezor/connect` in `/static/connect/data` folder. Therefore, `suite-web` takes if from [`https://suite.trezor.io/web/static/connect/data/firmware/{deviceModel}/releases.json?r={timestamp to prevent caching}`](https://suite.trezor.io/web/static/connect/data/firmware/t1b1/releases.json?r=1654786865680) and `suite-desktop` has it on `file:///static/connect/data/firmware/{deviceModel}/releases.json`. Neither the `suite-web` nor the `suite-desktop` take it from [https://data.trezor.io](https://data.trezor.io).
+Those `releases.json` files are bundled inside `@trezor/connect` in `/data` folder. Therefore, `suite-web` takes if from [`https://suite.trezor.io/web/data/firmware/{deviceModel}/releases.json?r={timestamp to prevent caching}`](https://suite.trezor.io/web/data/firmware/t1b1/releases.json?r=1654786865680) and `suite-desktop` has it on `file:///data/firmware/{deviceModel}/releases.json`. Neither the `suite-web` nor the `suite-desktop` take it from [https://data.trezor.io](https://data.trezor.io).
 
 | key                     | type                     | example value                                                                     | description                                                                                                                                                                                                                                         |
 | ----------------------- | ------------------------ | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

packages/connect-iframe/package.json

@@ -4,7 +4,8 @@
     "private": true,
     "scripts": {
         "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
-        "build:iframe": "TS_NODE_PROJECT=\"tsconfig.json\" yarn webpack --config ./webpack/prod.webpack.config.ts --stats-children",
+        "build:iframe": "TS_NODE_PROJECT=\"tsconfig.json\" yarn webpack --config ./webpack/iframe.webpack.config.ts --stats-children",
+        "build:sessions": "TS_NODE_PROJECT=\"tsconfig.json\" yarn webpack --config ./webpack/sessions.webpack.config.ts --stats-children",
         "build:core-module": "TS_NODE_PROJECT=\"tsconfig.json\" yarn webpack --config ./webpack/core.webpack.config.ts --stats-children",
         "build": "yarn rimraf build && yarn build:iframe && yarn build:core-module",
         "___NOTE__": "iframe build is one of the prerequisites of suite-web. build:lib script provides it together with other libraries",

packages/connect-iframe/webpack/base.webpack.config.ts

@@ -1,16 +1,24 @@
-import path from 'path';
+// import path from 'path';
 import { execSync } from 'child_process';
 import webpack from 'webpack';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 
 import { version } from '../package.json';
+import { getDistPathForProject } from './utils';
 
 const COMMON_DATA_SRC = '../../packages/connect-common/files';
 const MESSAGES_SRC = '../../packages/protobuf/messages.json';
 
-const DIST = path.resolve(__dirname, '../build');
+// const DIST = path.resolve(__dirname, '../build');
+const project = process.env.PROJECT || 'iframe';
 
+if (project !== 'iframe' && project !== 'suite-web') {
+    throw new Error(`Unsupported project: ${project}`);
+}
+const DIST = getDistPathForProject(project);
+
+console.log('DIST', DIST);
 // Because of Expo EAS, we need to use the commit hash from expo to avoid failing git command inside EAS
 // because we need to call `yarn build:libs during native build`
 const commitHash =

packages/connect-iframe/webpack/core.webpack.config.ts

@@ -3,8 +3,15 @@ import webpack from 'webpack';
 import merge from 'webpack-merge';
 
 import baseConfig from './base.webpack.config';
+import { getDistPathForProject } from './utils';
 
-const DIST = path.resolve(__dirname, '../build');
+const project = process.env.PROJECT || 'iframe';
+
+if (project !== 'iframe' && project !== 'suite-web') {
+    throw new Error(`Unsupported project: ${project}`);
+}
+const DIST = getDistPathForProject(project);
+console.log('DIST', DIST);
 
 export const config: webpack.Configuration = {
     target: 'web',
@@ -15,7 +22,8 @@ export const config: webpack.Configuration = {
     output: {
         filename: 'js/[name].js',
         path: DIST,
-        publicPath: './',
+        publicPath: '/suite-web/feat/use-core-in-suite-web/web/',
+        // publicPath: '/',
         library: {
             type: 'module',
         },

packages/connect-iframe/webpack/prod.webpack.config.ts → packages/connect-iframe/webpack/iframe.webpack.config.ts

@@ -6,17 +6,10 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { config as baseConfig } from './base.webpack.config';
 
 const DIST = path.resolve(__dirname, '../build');
+
 const config: webpack.Configuration = {
-    // common instructions that are able to build correctly imports from @trezor/connect (reusing this in popup)
     entry: {
         iframe: path.resolve(__dirname, '../src/index.ts'),
-        ['sessions-background-sharedworker']: {
-            filename: 'workers/[name].js',
-            import: path.resolve(
-                __dirname,
-                '../../transport/src/sessions/background-sharedworker.ts',
-            ),
-        },
     },
     output: {
         filename: 'js/[name].[contenthash].js',

packages/connect-iframe/webpack/sessions.webpack.config.ts

@@ -0,0 +1,35 @@
+import path from 'path';
+import webpack from 'webpack';
+import merge from 'webpack-merge';
+
+import { config as baseConfig } from './base.webpack.config';
+import { getSharedworkerDistPathForProject } from './utils';
+
+const project = process.env.PROJECT || 'iframe';
+
+if (project !== 'iframe' && project !== 'suite-web') {
+    throw new Error(`Unsupported project: ${project}`);
+}
+const DIST = getSharedworkerDistPathForProject(project);
+
+console.log('DIST', DIST);
+
+const config: webpack.Configuration = {
+    // common instructions that are able to build correctly imports from @trezor/connect (reusing this in popup)
+    entry: {
+        ['sessions-background-sharedworker']: {
+            filename: 'workers/[name].js',
+            import: path.resolve(
+                __dirname,
+                '../../transport/src/sessions/background-sharedworker.ts',
+            ),
+        },
+    },
+    output: {
+        filename: 'js/[name].[contenthash].js',
+        path: DIST,
+        publicPath: './',
+    },
+};
+
+export default merge([config, baseConfig]);

packages/connect-iframe/webpack/utils.ts

@@ -0,0 +1,30 @@
+import path from 'path';
+
+type Project = 'iframe' | 'suite-web';
+
+export const getDistPathForProject = (project: Project = 'iframe') => {
+    const basePath = path.join(__dirname, '..', '..');
+    switch (project) {
+        case 'iframe':
+            return path.join(basePath, 'connect-iframe', 'build');
+        case 'suite-web':
+            return path.join(basePath, 'suite-web', 'build');
+        default:
+            throw new Error('Missing project.');
+    }
+};
+
+export const getSharedworkerDistPathForProject = (project: Project = 'iframe') => {
+    const basePath = path.join(__dirname, '..', '..');
+    switch (project) {
+        case 'iframe':
+            return path.join(basePath, 'connect-iframe', 'build');
+        case 'suite-web':
+            // It is hardcoded in suite-web:
+            // https://github.com/trezor/trezor-suite/blob/feat/use-core-in-suite-web/suite-common/connect-init/src/connectInitThunks.ts#L120
+            // return path.join(basePath, 'suite-web', 'build', 'static', 'connect');
+            return path.join(basePath, 'suite-web', 'build');
+        default:
+            throw new Error('Missing project.');
+    }
+};

packages/connect-web/src/module/index.ts

@@ -0,0 +1,70 @@
+import { factory } from '@trezor/connect/src/factory';
+import { config } from '@trezor/connect/src/data/config';
+import { TrezorConnectDynamic } from '@trezor/connect/src/impl/dynamic';
+import { CoreInModule } from '@trezor/connect/src/impl/core-in-module';
+// import webUSBB   utton from '../webusb/button';
+import type { ConnectSettingsPublic } from '@trezor/connect/src/types';
+import type { ConnectFactoryDependencies } from '@trezor/connect/src/factory';
+import { ERRORS, TRANSPORT } from '@trezor/connect/src/exports';
+
+const impl = new TrezorConnectDynamic<
+    'core-in-module',
+    ConnectSettingsPublic,
+    ConnectFactoryDependencies<ConnectSettingsPublic>
+>({
+    implementations: [
+        {
+            type: 'core-in-module',
+            impl: new CoreInModule(),
+        },
+    ],
+    getInitTarget: () => 'core-in-module',
+    handleErrorFallback: () => new Promise(resolve => resolve(false)),
+});
+
+const disableWebUSB = () => {
+    if (!impl.lastSettings) {
+        throw ERRORS.TypedError('Init_NotInitialized');
+    }
+
+    // @ts-ignore
+    impl.handleCoreMessage({ type: TRANSPORT.DISABLE_WEBUSB });
+};
+
+const requestWebUSBDevice = async () => {
+    try {
+        await window.navigator.usb.requestDevice({ filters: config.webusb });
+        // @ts-ignore
+        impl.handleCoreMessage({ type: TRANSPORT.REQUEST_DEVICE });
+    } catch (_err) {
+        console.log('_err', _err);
+    }
+};
+
+// const renderWebUSBButton = (className?: string) => {
+//     if (!impl.lastSettings) {
+//         throw ERRORS.TypedError('Init_NotInitialized');
+//     }
+//     webUSBButton(className, impl.lastSettings.webusbSrc);
+// };
+
+const TrezorConnect = factory(
+    {
+        eventEmitter: impl.eventEmitter,
+        init: impl.init.bind(impl),
+        call: impl.call.bind(impl),
+        manifest: impl.manifest.bind(impl),
+        requestLogin: impl.requestLogin.bind(impl),
+        uiResponse: impl.uiResponse.bind(impl),
+        cancel: impl.cancel.bind(impl),
+        dispose: impl.dispose.bind(impl),
+    },
+    {
+        // renderWebUSBButton: renderWebUSBButton.bind(impl),
+        disableWebUSB: disableWebUSB.bind(impl),
+        requestWebUSBDevice: requestWebUSBDevice.bind(impl),
+    },
+);
+
+export default TrezorConnect;
+export * from '@trezor/connect/src/exports';

packages/connect-web/tsconfig.json

@@ -15,7 +15,8 @@
     "include": [
         ".",
         "../connect-iframe/webpack/base.webpack.config.ts",
-        "../connect-iframe/webpack/prod.webpack.config.ts",
+        "../connect-iframe/webpack/iframe.webpack.config.ts",
+        "../connect-iframe/webpack/utils.ts",
         "../connect-iframe/package.json",
         "../connect-popup/webpack/prod.webpack.config.ts",
         "../connect-popup/package.json"

packages/connect-web/webpack/dev.webpack.config.ts

@@ -6,7 +6,7 @@ import { WebpackPluginServe } from 'webpack-plugin-serve';
 // todo: https://github.com/trezor/trezor-suite/issues/5305
 import popup from '../../connect-popup/webpack/prod.webpack.config';
 // todo: https://github.com/trezor/trezor-suite/issues/5305
-import iframe from '../../connect-iframe/webpack/prod.webpack.config';
+import iframe from '../../connect-iframe/webpack/iframe.webpack.config';
 import prod from './prod.webpack.config';
 
 const dev = {

packages/connect/src/backend/Blockchain.ts

@@ -17,6 +17,8 @@
 import type { CoinInfo, Proxy } from '../types';
 
 const getWorker = (type: string) => {
+    console.log('getWorker in connect/src/backend');
+    console.log('type', type);
     switch (type) {
         case 'blockbook':
             return BlockbookWorker;