Redesign onboarding

[dewabisma]

Summary

Updated onboarding screens to follow figma design. This screen reuse the recovery phrase screens also before we show the account ready screen.

Screenshots

• Initial loading

• Welcome screen

• Account ready screen

[n13]

Code Review: Redesign Onboarding

Nice wrap-up to the series. The new OnboardingLoadingScreenV2 with animated fade-in, the redesigned welcome screen with OnboardingBackground, and the consolidated SettingsCautionScaffoldData factory constructors all tie the design system together cleanly.

DRY Concerns

1. Bottom bar duplication between RecoveryPhraseScreen and NewWalletRecoveryPhraseScreen — Both screens build a nearly identical bottom bar with the same layout: a row with two buttons (copy mnemonic + primary action), wrapped in ScaffoldBaseBottomContent. The copy logic (clipboard write, timer-based "Copied!" state, icon swap) is duplicated verbatim. Extract a RecoveryPhraseBottomBar widget (or at least the copy button) that both screens can share.

2. SettingsCautionScaffoldData.recoveryPhrase() and .walletReset() factory constructors — Excellent DRY improvement. The hardcoded strings that were duplicated in RecoveryPhraseConfirmationScreen and ResetConfirmationScreen are now centralized. Well done.

Architectural Notes

• OnboardingLoadingScreenV2 has a fixed 4-second timer — Future.delayed(Duration(seconds: 4)) then navigates forward. If wallet initialization is faster than 4 seconds, the user waits unnecessarily. If it's slower, the user hits the next screen before the wallet is ready. Consider tying the navigation to an actual readiness signal (e.g. await walletInitFuture) with a minimum display time, rather than a pure fixed delay.

• Wallet creation business logic in NewWalletRecoveryPhraseScreen._continue — This method does mnemonic generation, HD wallet creation, account derivation, settings persistence, notification registration, and navigation. That's a lot of business logic in a widget. Consider extracting this into a service method (e.g. WalletCreationService.createNewWallet(name)) that returns the created account, keeping the screen focused on UI concerns only. This would also make the logic testable.

• AccountReadyOverviewOrigin enum expansion — Renaming creation to newAccountInWallet and import to newWalletFromImport, and adding newWalletFromCreate, makes the intent much clearer. Good naming.

• OnboardingBackground as a shared widget — Clean extraction. Both the welcome screen and loading screen can use the same background without duplicating the image + gradient stack.

Overall this is a solid series of PRs. The main recurring theme across all six: extract shared UI patterns more aggressively (recipient display in send flow, bottom-bar copy logic in recovery phrase screens, settings row content layout) and keep business logic out of widget _continue methods.

[n13]

Looks very good!

These 2 should be fixed, the rest up to you:

(we do not want a fixed timer)

• OnboardingLoadingScreenV2 has a fixed 4-second timer — Future.delayed(Duration(seconds: 4)) then navigates forward. If wallet initialization is faster than 4 seconds, the user waits unnecessarily. If it's slower, the user hits the next screen before the wallet is ready. Consider tying the navigation to an actual readiness signal (e.g. await walletInitFuture) with a minimum display time, rather than a pure fixed delay.

• Wallet creation business logic in NewWalletRecoveryPhraseScreen._continue — This method does mnemonic generation, HD wallet creation, account derivation, settings persistence, notification registration, and navigation. That's a lot of business logic in a widget. Consider extracting this into a service method (e.g. WalletCreationService.createNewWallet(name)) that returns the created account, keeping the screen focused on UI concerns only. This would also make the logic testable.

[n13]

PR #465 Review — Redesign Onboarding

Overall this is a polished UI redesign with a clean service extraction. Two real concerns, one nitpick, and one regression in WalletCreationService you'll want to fix before merging.

---

Must Fix

1. await on submitAddressToBackend() will stall onboarding UI

This is an unintentional regression hiding inside the otherwise nice service extraction.

Before (wallet_ready_screen.dart on feat/v3):

        try {
          _referralService.submitAddressToBackend();
        } catch (_) {}

Fire-and-forget — deliberate. The user navigates onward immediately while the referral POST runs in the background.

After (mobile-app/lib/services/wallet_creation_service.dart):

  @override
  Future<void> submitReferralForNewWallet() async {
    try {
      await _referral.submitAddressToBackend();
    } catch (_) {}
  }

Now awaited inside createNewWallet, which itself is awaited from NewWalletRecoveryPhraseScreen._continue before navigating to AccountReadyScreen. On a slow network the user is stuck on a "Next" spinner waiting for a backend the referral flow doesn't need to block on.

Fix: preserve the original semantics — kick the referral off without awaiting. e.g.:

@override
Future<void> submitReferralForNewWallet() async {
  unawaited(_referral.submitAddressToBackend().catchError((e, st) {
    print('Referral submission failed: $e\n$st');
  }));
}

While you're there: the existing catch (_) {} swallows the error silently, which violates the "fail early — never have a silent failure" rule. At minimum log it.

2. OnboardingLoadingScreenV2 still has a fixed 4-second timer

The latest commit message says "remove fixed timer loading", and you did fix the cold-start path (WalletInitializer now goes straight to WelcomeScreenV2 instead of the 4s screen). Good.

But the screen itself still exists and is now used after logout (logout_service.dart):

class _OnboardingLoadingScreenV2State extends State<OnboardingLoadingScreenV2> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  final Duration _duration = const Duration(seconds: 4);

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: _duration)..forward();
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed && mounted) {

A user who explicitly tapped "Reset Wallet" / "Logout" now waits 4 seconds on a branding splash before they can do anything. Either:

• skip the splash on logout (just navigate to WelcomeScreenV2), or
• shorten the duration significantly (1–1.5s feels right for a hand-off animation), or
• delete OnboardingLoadingScreenV2 entirely if it has no other caller.

---

Should Fix — n13's Original DRY #1 Was Not Addressed

RecoveryPhraseScreen (settings/recovery_phrase_screen.dart) and the new NewWalletRecoveryPhraseScreen are nearly the same widget:

• Same intro copy: "Write these words down in order and keep them somewhere only you can access. Do not screenshot or copy to a notes app."
• Same MnemonicGrid(words: _words, isRevealed: true) inside a SingleChildScrollView
• Same ScaffoldBaseBottomContent + Row with two QuantusButtons and a 24-px gap
• Same _copyToClipboard() body

Only differences: where the mnemonic comes from (settings vs freshly generated), the right-hand button label/handler ("Done" pop vs "Next" continue), and an extra loading state during generation.

Per your DRY rule this needs a shared widget. Suggested shape:

class RecoveryPhraseView extends StatelessWidget {
  const RecoveryPhraseView({
    super.key,
    required this.appBarTitle,
    required this.words,
    required this.isLoading,
    required this.primaryLabel,
    required this.onPrimary,
    this.isPrimaryLoading = false,
    this.isPrimaryDisabled = false,
  });
  // ...
}

RecoveryPhraseScreen and NewWalletRecoveryPhraseScreen then become thin wrappers that supply the data + primary action.

---

Nice — Real Wins

• WalletCreationService + unit tests. The WalletCreationDependencies seam is clean and the two tests (new root / existing root) cover the branches. Exactly what was asked for in the previous review (apart from the await regression above).
• SettingsCautionScaffoldData.recoveryPhrase() / .walletReset() factories. Centralizes the warning copy. RecoveryPhraseConfirmationScreen, ResetConfirmationScreen, and the new WalletReadyScreen all reuse them. WalletReadyScreen shrinking from ~310 lines to ~30 by deferring to SettingsCautionScaffold is a great DRY win.
• AccountReadyOverviewOrigin rename to accountCreated / walletCreated / walletImported — much clearer than created/imported. Confirmed all call sites updated (create_account_screen, new_wallet_recovery_phrase_screen); no orphans.
• OnboardingBackground is a clean shared extraction — WelcomeScreenV2 and OnboardingLoadingScreenV2 both consume it, no copy-paste.
• SettingsTappableRowUtils.titleAndSubtitle gaining named optional titleColor/subtitleColor is a reasonable extension and all existing call sites were updated.
• Splash polish: Android windowSplashScreenBackground #141414 → #0E0E0E, iOS LaunchImage reshaped to a 160×160 square — matches the new icon.

---

Auth — Verified Clean

Confirmed no functional auth changes:

• local_auth_service.dart, local_auth_provider.dart, auth_wrapper.dart, app_lifecycle_manager.dart, base_background.dart, recovery_phrase_screen.dart, send_sheet.dart, and the entire quantus_sdk/ are untouched.
• The biometric gate in RecoveryPhraseConfirmationScreen._onContinue() is byte-identical; only its surrounding scaffolding moved into the data factory.
• LogoutService.logout() keeps the same SettingsService.clearAll() → SubstrateService.logout() → provider-reset sequence; only the post-logout route changed.

---

Nits (Optional)

• recovery_phrase_confirmation_screen.dart has a stray blank line and trailing comma anomaly at the closing of SettingsCautionScaffold(...) — easy dart format fix:

        onCheckboxChanged: () => setState(() => _acknowledged = !_acknowledged),
        onContinue: _onContinue,
        
      );
    }

• recovery_phrase_sheet.dart was deleted but worth a quick git grep to make sure no surviving showRecoveryPhraseSheet(...) callers were missed (I didn't find any, but worth a final sweep).
• mnemonic_grid.dart horizontal padding tightened from 14 → 10 — not a regression, just flagging it as a knock-on layout change for any other screen that renders the grid.

---

TL;DR

Two blockers for me: un-await the referral submission (it was intentionally fire-and-forget) and either drop or shorten the 4-second post-logout splash. After that, address the recovery-phrase DRY duplication (n13's original #1, still pending), and ship. Auth is solidly untouched.

[n13]

Also the wallet service is quite strange, can we maybe do this instead:

Use mock classes for services..

AI:
The project already has mockito: ^5.4.6 in dev deps. The three services are concrete singletons with simple async methods — mockito handles them out of the box. The whole WalletCreationDependencies / SdkWalletCreationDependencies layer is dead weight.

Here's how wallet_creation_service.dart collapses:

import 'dart:async';

import 'package:quantus_sdk/quantus_sdk.dart';
import 'package:resonance_network_wallet/services/referral_service.dart';

class WalletCreationService {
  WalletCreationService({
    SettingsService? settingsService,
    AccountsService? accountsService,
    ReferralService? referralService,
  }) : _settings = settingsService ?? SettingsService(),
       _accounts = accountsService ?? AccountsService(),
       _referral = referralService ?? ReferralService();

  final SettingsService _settings;
  final AccountsService _accounts;
  final ReferralService _referral;

  Future<Account> createNewWallet({
    required String name,
    required String mnemonic,
    required int walletIndex,
    required String accountId,
    required List<Account> existingAccounts,
  }) async {
    await _settings.setMnemonic(mnemonic, walletIndex);

    final existingRoot = existingAccounts
        .where((a) => a.walletIndex == walletIndex && a.index == 0)
        .firstOrNull;
    if (existingRoot != null) return existingRoot;

    final account = Account(walletIndex: walletIndex, index: 0, name: name, accountId: accountId);
    await _accounts.addAccount(account);

    unawaited(_referral.submitAddressToBackend().catchError((e, st) {
      print('Referral submission failed for new wallet: $e\n$st');
    }));

    return account;
  }
}

Two wins in the same change:

• 67 lines → ~30 lines, no rename layer.
• The unawaited(...) restores the original fire-and-forget referral semantics, fixing the UI-stall regression. Failure is logged, not swallowed (your "fail early" rule).

The test then mocks the real services. Add to the test file's top:

@GenerateNiceMocks([
  MockSpec<SettingsService>(),
  MockSpec<AccountsService>(),
  MockSpec<ReferralService>(),
])
import 'wallet_creation_service_test.mocks.dart';

…and run dart run build_runner build. The body becomes:

test('persists mnemonic, adds root account, and submits referral when no root exists', () async {
  final settings = MockSettingsService();
  final accounts = MockAccountsService();
  final referral = MockReferralService();
  when(referral.submitAddressToBackend()).thenAnswer((_) async {});

  final service = WalletCreationService(
    settingsService: settings,
    accountsService: accounts,
    referralService: referral,
  );

  await service.createNewWallet(
    name: 'Account 1',
    mnemonic: 'abandon abandon ...',
    walletIndex: 0,
    accountId: 'abc',
    existingAccounts: const [],
  );

  verify(settings.setMnemonic('abandon abandon ...', 0)).called(1);
  verify(accounts.addAccount(argThat(
    isA<Account>().having((a) => a.accountId, 'accountId', 'abc'),
  ))).called(1);
  verify(referral.submitAddressToBackend()).called(1);
});

If you'd rather skip codegen, hand-rolled fakes work too — but in that case keep them as class _FakeSettingsService implements SettingsService (etc.) with noSuchMethod overrides, not as a re-named contract layer. The point is: the seam is the real service interface, not an invented one.

Bottom line for the PR

Add this to the must-fix list: collapse WalletCreationDependencies / SdkWalletCreationDependencies, inject the three real services, restore unawaited(...) on the referral call. That single refactor fixes the UI-stall regression and removes the dead abstraction in one shot.

[n13]

PR #465 Re-Review — Redesign Onboarding

Two new commits since last round (7142516 reusable recovery component, 2cf9d8d PR review fixes). All three previous blockers are addressed. One small "fail early" gap and a dart format nit remain.

---

Previously-Flagged Issues — Status

Must-Fix #1 — WalletCreationService await regression + DI layer collapse — FIXED

The whole WalletCreationDependencies / SdkWalletCreationDependencies indirection is gone. Service is now 30 lines of real logic with three injected real services, and the referral call is back to fire-and-forget:

  Future<Account> createNewWallet({
    required String name,
    required String mnemonic,
    required int walletIndex,
    required String accountId,
    required List<Account> existingAccounts,
  }) async {
    await _settings.setMnemonic(mnemonic, walletIndex);

    final hasRoot = existingAccounts.any((a) => a.walletIndex == walletIndex && a.index == 0);
    if (!hasRoot) {
      final account = Account(walletIndex: walletIndex, index: 0, name: name, accountId: accountId);
      await _accounts.addAccount(account);
      unawaited(_referral.submitAddressToBackend());
      return account;
    }

    return existingAccounts.firstWhere((a) => a.walletIndex == walletIndex && a.index == 0);
  }

Tests now use @GenerateNiceMocks against the real services (no invented contract layer):

@GenerateNiceMocks([MockSpec<SettingsService>(), MockSpec<AccountsService>(), MockSpec<ReferralService>()])
import 'wallet_creation_service_test.mocks.dart';

Verified locally — both tests pass (+2: All tests passed!). UI-stall regression is gone.

Must-Fix #2 — OnboardingLoadingScreenV2 4-second timer — FIXED (deleted)

The screen file no longer exists. git grep for OnboardingLoadingScreenV2|onboarding_loading returns zero matches anywhere. LogoutService now goes straight to WelcomeScreenV2:

    Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (_) => const WelcomeScreenV2()),
      (r) => false,
    );

Cleanest possible resolution.

Should-Fix — Recovery phrase DRY duplication — FIXED

New RecoveryPhraseBody widget owns the shared scaffold, intro copy, mnemonic grid, and copy-button bottom bar:

class RecoveryPhraseBody extends StatelessWidget {
  final String appBarTitle;
  final List<String> words;
  final String primaryButtonLabel;
  final VoidCallback onPrimary;
  final bool isGridLoading;
  final bool isPrimaryButtonDisabled;
  final bool isPrimaryButtonLoading;

  const RecoveryPhraseBody({
    super.key,
    required this.appBarTitle,
    required this.words,
    required this.primaryButtonLabel,
    required this.onPrimary,
    this.isGridLoading = false,
    this.isPrimaryButtonDisabled = false,
    this.isPrimaryButtonLoading = false,
  });

RecoveryPhraseScreen is now 42 lines (was ~95) and NewWalletRecoveryPhraseScreen.build collapses to 9 lines. Both call sites are clean wrappers.

---

New Issues / Lingering Items

1. unawaited(...) has no error handler — silent-failure risk

unawaited(_referral.submitAddressToBackend()) restores fire-and-forget, but a thrown future now becomes an unhandled async error in the runtime zone. Per the project rule "Fail early — never have a silent failure, all failures must produce error logging", this should explicitly log:

unawaited(
  _referral.submitAddressToBackend().catchError((Object e, StackTrace st) {
    debugPrint('Referral submission failed: $e\n$st');
  }),
);

debugPrint is the project's idiom (used in local_auth_service.dart, shared_address_action_sheet.dart, etc.). Two-line change.

2. dart format will rewrite three files

dart format --set-exit-if-changed reports changes in:

• lib/v2/screens/settings/recovery_phrase_confirmation_screen.dart (the trailing-whitespace blank line I flagged last time is still there)
• lib/v2/screens/welcome/welcome_screen.dart (the long Text(...) should split per Dart formatter)
• lib/services/logout_service.dart

dart format lib/ will fix all three. Consider wiring it into pre-commit / CI so this stops recurring across the v3 series.

3. Generated wallet_creation_service_test.mocks.dart is checked in (753 lines)

Not a blocker — many Flutter projects do this. But if you'd rather not, add *.mocks.dart to .gitignore and run dart run build_runner build in CI before tests. Either choice is fine; just flagging because this is the first generated mocks file in the repo.

---

Re-Verified Clean

• Auth surface untouched — git diff origin/feat/v3...beast/redesign-onboarding -- mobile-app/lib/services/local_auth_service.dart mobile-app/lib/providers/local_auth_provider.dart mobile-app/lib/widgets/auth_wrapper.dart mobile-app/lib/services/app_lifecycle_manager.dart mobile-app/lib/v2/components/base_background.dart returns empty.
• quantus_sdk/ untouched — diff returns empty.
• recovery_phrase_sheet.dart references — zero matches anywhere for recovery_phrase_sheet|showRecoveryPhraseSheet.
• AccountReadyOverviewOrigin rename — confirmed walletCreated flows through NewWalletRecoveryPhraseScreen._continue.
• Tests pass locally — flutter test test/unit/wallet_creation_service_test.dart → +2: All tests passed!
• Static analysis clean — dart analyze on all changed files: No issues found!

---

TL;DR

Both blockers from the prior round are gone, the DRY refactor landed cleanly, and the test approach is exactly the mockito-on-real-services shape we wanted. Two trivial polish items before merge:

1. Wrap submitAddressToBackend() with .catchError(debugPrint(...)) to satisfy the no-silent-failure rule.
2. Run dart format lib/ (3 files).

Ship after that.

Related prior chats: PR 465 review onboarding.

[n13]

I think GTG, AI nits up to you