feat(cat-voices): Frontend performance optimisation

.config/dictionaries/project.dic

@@ -278,6 +278,7 @@ postcss
 Pozhylenkov
 Precache
 Precertificate
+precompressed
 preprod
 proguard
 projectcatalyst

.vscode/launch.recommended.json

@@ -14,6 +14,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -34,6 +35,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -52,6 +54,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -70,6 +73,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -88,6 +92,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -106,6 +111,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -124,6 +130,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -142,6 +149,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",
@@ -160,6 +168,7 @@
       "deviceId": "chrome",
       "program": "lib/configs/main_web.dart",
       "args": [
+        "--wasm",
         "--dart-define",
         "SENTRY_DSN=REPLACE_WITH_SENTRY_DSN_URL",
         "--web-header",

catalyst_voices/.gitignore

@@ -3,7 +3,9 @@
 devtools_options.yaml
 
 # Documentation
-docs/
+docs/dartdoc
+docs/licenses
+docs/*.dot
 
 # Generated files from code generation tools
 *.g.dart
@@ -169,4 +171,5 @@ coverage/
 ### Tests ###
 # Those files are generated by melos test-report script
 test_reports/*.junit-report.xml
-test_reports/*.tests-output.json
+test_reports/*.tests-output.json
+scripts/version_web_assets/test/helper/tmp

catalyst_voices/Caddyfile

@@ -1,30 +1,42 @@
 {
-    admin :8081
-    metrics
+	admin :8081
+	metrics
 }
 http://:8080 {
-    root * /app
+	root * /app
+
+    # Compress on-the-fly if not precompressed
+    encode
 
     handle /healthz {
         respond `{"status":"ok"}` 200
     }
 
     handle {
         try_files {path} /index.html
-        file_server
+        file_server {
+            # default order br zstd gzip
+            precompressed
+        }
     }
 
-    header {
-        Cross-Origin-Opener-Policy "same-origin"
-        Cross-Origin-Embedder-Policy "require-corp"
+	header {
+		Cross-Origin-Opener-Policy "same-origin"
+		Cross-Origin-Embedder-Policy "require-corp"
+		Cross-Origin-Resource-Policy "same-origin"
 
-        / Cache-Control "public, max-age=3600, must-revalidate"
-    }
+		?Cache-Control "public, max-age=3600, must-revalidate"
+	}
 
-    handle_errors {
-        rewrite * /50x.html
-        file_server
-    }
+	@index_html path /index.html
+	header @index_html Cache-Control "no-cache, must-revalidate"
 
-    log
-}
+	import /app/versioned_assets.caddy
+
+	handle_errors {
+		rewrite * /50x.html
+		file_server
+	}
+
+	log
+}

catalyst_voices/Earthfile

@@ -126,7 +126,14 @@ build-web:
         --TARGET=lib/configs/main_web.dart \
         --UPLOAD_DEBUG_SYMBOLS=$UPLOAD_DEBUG_SYMBOLS \
         --SENTRY_ORG='iohk-j4' \
-        --SENTRY_PROJECT='catalyst-voices'
+        --SENTRY_PROJECT='catalyst-voices' \
+        --WASM=true
+
+    # Version web assets with content-based MD5 hashes for cache busting
+    RUN dart run /frontend/scripts/version_web_assets/version_web_assets.dart --build-dir=$WORKDIR/build/web --wasm=true
+
+    DO flutter-ci+COMPRESS_WEB_FILES
+
     SAVE ARTIFACT --keep-ts web
 
 package:

catalyst_voices/README.md

@@ -6,19 +6,22 @@ This repository contains the Catalyst Voices app and packages.
 
 * [Catalyst Voices](#catalyst-voices)
     * [Requirements](#requirements)
+    * [Recommended VS code plugins](#recommended-vs-code-plugins)
     * [Platforms](#platforms)
     * [Getting Started](#getting-started)
         * [Bootstrapping](#bootstrapping)
         * [Packages](#packages)
         * [Environment Type vs Flavor](#environment-type-vs-flavor)
         * [Environment types](#environment-types)
+            * [Stress Test](#stress-test)
+            * [Debug Performance Flags](#debug-performance-flags)
         * [Flavor types](#flavor-types)
         * [Environment variables](#environment-variables)
             * [Environment config](#environment-config)
-        * [Code Generation](#code-generation)
-            * [Running Code Generation](#running-code-generation)
+    * [Code Generation](#code-generation)
+            *[Running Code Generation](#running-code-generation)
                 * [Basic Generation](#basic-generation)
-                * [Local Saving](#local-saving)
+                *[Local Saving](#local-saving)
             * [GitHub Token / PAT Setup](#github-token--pat-setup)
             * [Security Notes](#security-notes)
     * [Running Tests](#running-tests)
@@ -76,6 +79,7 @@ just bootstrap
 | [catalyst_voices_services](./packages/internal/catalyst_voices_services/)         | Services |[example](./packages/internal/catalyst_voices_services/)|
 | [catalyst_voices_shared](./packages/internal/catalyst_voices_shared/)             | Shared code  |[example](./packages/internal/catalyst_voices_shared/)|
 | [catalyst_voices_view_models](./packages/internal/catalyst_voices_view_models/)   | ViewModels  |[example](./packages/internal/catalyst_voices_view_models/)|
+| [catalyst_voices_dev](./packages/internal/catalyst_voices_dev/)                   | Dev | [example](./packages/internal/catalyst_voices_dev/)|
 
 ### Environment Type vs Flavor
 
@@ -122,6 +126,39 @@ flutter run --target lib/configs/main.dart --dart-define=ENV_NAME=prod -d chrome
 > Catalyst Voices works on the Web only.
 > We plan to add support for other targets later.
 
+#### Stress Test
+
+Each environment can be launched in stress test.
+It will use local version of Gateway and produce as many proposals as configured (defaults to 100).
+Use following `--dart-define` variables to configure your setup:
+
+* `--dart-define=STRESS_TEST=true` to enable
+* `--dart-define=STRESS_TEST_PROPOSAL_INDEX_COUNT=100` says how many proposals will be produced
+* `--dart-define=STRESS_TEST_DECOMPRESSED=false` if signed documents should be compressed or not
+
+#### Debug Performance Flags
+
+Each environment can be launched with additional debug performance flags on web in `Profile` mode
+There is four performance flags to choose from:
+
+* **debugProfileBuildsEnabled:** Adds Timeline events for every Widget built.
+* **debugProfileBuildsEnabledUserWidgets:** Adds Timeline events for every user-created Widget built.
+* **debugProfileLayoutsEnabled:** Adds Timeline events for every RenderObject layout.
+* **debugProfilePaintsEnabled:** Adds Timeline events for every RenderObject painted.
+
+To use following `--dart-define` variables to configure your setup:
+
+* `--dart-define=DEBUG_PROFILE_BUILDS_ENABLED` to enable debugProfileBuildsEnabled
+* `--dart-define=DEBUG_PROFILE_BUILDS_ENABLED_USER_WIDGETS` to enable debugProfileBuildsEnabledUserWidgets
+* `--dart-define=DEBUG_PROFILE_LAYOUTS_ENABLED` to enable debugProfileLayoutsEnabled
+* `--dart-define=DEBUG_PROFILE_PAINTS_ENABLED` to enable debugProfilePaintsEnabled
+
+There is `--dart-define` variable to enable all four performance flags at once:
+
+* `--dart-define=DEBUG_PROFILE_DEVELOPER_PROFILER_ENABLE_ALL`
+
+Remember to also use `--profile` mode when running the app.
+
 ### Flavor types
 
 You should use flavor types instead of environment variables when running the app on mobile

catalyst_voices/apps/voices/lib/app/view/app_precache_image_assets.dart

@@ -7,6 +7,8 @@ import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:flutter/material.dart';
 import 'package:synchronized/synchronized.dart';
 
+final _logger = Logger('AppPrecacheImageAssets');
+
 class GlobalPrecacheImages extends StatefulWidget {
   final Widget child;
 
@@ -59,6 +61,22 @@ class ImagePrecacheService {
     }
   }
 
+  Future<void> _cacheImageAsset(AssetGenImage asset, BuildContext context) async {
+    try {
+      await asset.cache(context: context);
+    } catch (error) {
+      _logger.info('Failed to cache image asset: $error');
+    }
+  }
+
+  Future<void> _cacheSvgAsset(SvgGenImage svg, BuildContext context) async {
+    try {
+      await svg.cache(context: context);
+    } catch (error) {
+      _logger.info('Failed to cache SVG asset: $error');
+    }
+  }
+
   Future<void> _precacheAssets(
     BuildContext context, {
     List<SvgGenImage> svgs = const [],
@@ -71,8 +89,8 @@ class ImagePrecacheService {
       _assets.addAll(assets);
 
       await Future.wait([
-        ..._svgs.map((e) => e.cache(context: context)),
-        ..._assets.map((e) => e.cache(context: context)),
+        ..._svgs.map((e) => _cacheSvgAsset(e, context)),
+        ..._assets.map((e) => _cacheImageAsset(e, context)),
       ]);
 
       if (!_isInitialized.isCompleted) _isInitialized.complete(true);

catalyst_voices/apps/voices/lib/app/view/app_session_listener.dart

@@ -1,6 +1,6 @@
 import 'package:catalyst_voices/common/signal_handler.dart';
 import 'package:catalyst_voices/notification/catalyst_messenger.dart';
-import 'package:catalyst_voices/notification/specialized/account_needs_verification_banner.dart';
+import 'package:catalyst_voices/notification/specialized/banner/account_needs_verification_banner.dart';
 import 'package:catalyst_voices/routes/routes.dart';
 import 'package:catalyst_voices/widgets/snackbar/voices_snackbar.dart';
 import 'package:catalyst_voices/widgets/snackbar/voices_snackbar_type.dart';
@@ -30,12 +30,7 @@ class _GlobalSessionListenerState extends State<GlobalSessionListener>
 
   @override
   Widget build(BuildContext context) {
-    // TODO(damian-molinski): refactor it to use signals
-    return BlocListener<SessionCubit, SessionState>(
-      listenWhen: _listenToSessionChangesWhen,
-      listener: _onSessionChanged,
-      child: widget.child,
-    );
+    return widget.child;
   }
 
   @override
@@ -47,28 +42,23 @@ class _GlobalSessionListenerState extends State<GlobalSessionListener>
             : AccountContributorNeedsVerificationBanner();
         CatalystMessenger.of(context).add(notification);
       case CancelAccountNeedsVerificationSignal():
-        CatalystMessenger.of(
-          context,
-        ).cancelWhere((notification) => notification is AccountNeedsVerificationBanner);
+        CatalystMessenger.of(context).cancelWhere(
+          (notification) => notification is AccountNeedsVerificationBanner,
+        );
+      case KeychainLockedSignal():
+        _handleKeychainLock();
+      case KeychainUnlockedSignal():
+        _handleKeychainUnlock();
     }
   }
 
-  bool _listenToSessionChangesWhen(SessionState prev, SessionState next) {
-    // We deliberately check if previous was guest because we don't
-    // want to show the snackbar after the registration is completed.
-    final keychainUnlocked = prev.isGuest && next.isActive;
-    final keychainLocked = prev.isActive && next.isGuest;
-
-    return keychainUnlocked || keychainLocked;
-  }
-
-  void _onLockedKeychain(BuildContext context) {
+  void _handleKeychainLock() {
     VoicesSnackBar(
       type: VoicesSnackBarType.error,
       behavior: SnackBarBehavior.floating,
-      icon: VoicesAssets.icons.lockClosed.buildIcon(),
       title: context.l10n.lockSnackbarTitle,
       message: context.l10n.lockSnackbarMessage,
+      icon: VoicesAssets.icons.lockClosed.buildIcon(),
     ).show(context);
 
     final routerContext = AppRouterFactory.rootNavigatorKey.currentContext;
@@ -78,21 +68,13 @@ class _GlobalSessionListenerState extends State<GlobalSessionListener>
     }
   }
 
-  void _onSessionChanged(BuildContext context, SessionState state) {
-    if (state.isActive) {
-      _onUnlockedKeychain(context);
-    } else if (state.isGuest) {
-      _onLockedKeychain(context);
-    }
-  }
-
-  void _onUnlockedKeychain(BuildContext context) {
+  void _handleKeychainUnlock() {
     VoicesSnackBar(
       type: VoicesSnackBarType.success,
       behavior: SnackBarBehavior.floating,
-      icon: VoicesAssets.icons.lockOpen.buildIcon(),
       title: context.l10n.unlockSnackbarTitle,
       message: context.l10n.unlockSnackbarMessage,
+      icon: VoicesAssets.icons.lockOpen.buildIcon(),
     ).show(context);
 
     final routerContext = AppRouterFactory.rootNavigatorKey.currentContext;