Skip to content

CW-1468 Home Screen Top Bar Layout #3576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lapatric wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

CW-1468 Home Screen Top Bar Layout #3576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6dfae31
Improve homescreen layout and account access
lapatric Aug 28, 2026
6bdd4f5
Add homescreen layout regression tests
lapatric Aug 28, 2026
6d454de
Merge branch 'dev' into cw-1468-homescreen-layout
lapatric Aug 28, 2026
f67fbad
address feedback
lapatric Sep 10, 2026
2a01107
Merge remote-tracking branch 'origin/dev' into cw-1468-homescreen-layout
lapatric Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions lib/di.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -598,6 +598,13 @@ Future<void> setup({
getIt.registerFactory<AccountCreationModal>(() => AccountCreationModal(
accountEditOrCreateViewModel: getIt.get<MoneroAccountEditOrCreateViewModel>()));

getIt.registerFactoryParam<AccountCustomizer, DashboardViewModel, void>(
(dashboardViewModel, _) => AccountCustomizer(
accountListViewModel: getIt.get<MoneroAccountListViewModel>(),
dashboardViewModel: dashboardViewModel,
),
);

getIt.registerFactory<LightningUsernameBloc>(
() => LightningUsernameBloc(getIt.get<AppStore>().wallet!));

Expand Down
10 changes: 2 additions & 8 deletions lib/new-ui/pages/account_customizer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'dart:ui';
import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/monero/monero.dart';
import 'package:cake_wallet/new-ui/pages/card_customizer.dart';
import 'package:cake_wallet/new-ui/viewmodels/card_customizer/card_customizer_bloc.dart';
import 'package:cake_wallet/new-ui/widgets/coins_page/cards/balance_card.dart';
Expand All @@ -24,7 +23,6 @@ import 'package:cw_core/utils/print_verbose.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class AccountCustomizerListItem {
Expand All @@ -38,13 +36,9 @@ class AccountCustomizerListItem {

class AccountCustomizer extends StatefulWidget {
const AccountCustomizer(
{super.key,
required this.accountListViewModel,
required this.accountEditOrCreateViewModel,
required this.dashboardViewModel});
{super.key, required this.accountListViewModel, required this.dashboardViewModel});

final MoneroAccountListViewModel accountListViewModel;
final MoneroAccountEditOrCreateViewModel accountEditOrCreateViewModel;
final DashboardViewModel dashboardViewModel;

@override
Expand All @@ -62,7 +56,7 @@ class _AccountCustomizerState extends State<AccountCustomizer> {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
loadCards();
final activeId = monero!.getCurrentAccount(widget.dashboardViewModel.wallet).id;
final activeId = widget.accountListViewModel.selected.id;
for (int i = 0; i < _items.length - 1; i++) {
if (_items[i].accountListItem.id == activeId) {
final lastIndex = _items.length - 1;
Expand Down
143 changes: 77 additions & 66 deletions lib/new-ui/pages/home_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,9 @@ import 'package:cake_wallet/new-ui/widgets/coins_page/cards/cards_view.dart';
import 'package:cake_wallet/new-ui/widgets/coins_page/mweb_ad.dart';
import 'package:cake_wallet/new-ui/widgets/coins_page/top_bar_widget/top_bar.dart';
import 'package:cake_wallet/new-ui/widgets/coins_page/unconfirmed_balance_widget.dart';
import 'package:cake_wallet/new-ui/widgets/coins_page/wallet_info.dart';
import "package:cake_wallet/new-ui/widgets/coins_page/zcash_migration_modal.dart";
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/nft_view_model.dart';
import 'package:cake_wallet/view_model/monero_account_list/monero_account_edit_or_create_view_model.dart';
import 'package:cake_wallet/view_model/monero_account_list/monero_account_list_view_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Expand Down Expand Up @@ -115,15 +113,16 @@ class _NewHomePageState extends State<NewHomePage> {
spacing: 24.0,
children: [
TopBar(
key: ValueKey(widget.dashboardViewModel.wallet.id),
dashboardViewModel: widget.dashboardViewModel,
lightningMode: _lightningMode,
onLightningSwitchPress: () {
setState(() {
_lightningMode = !_lightningMode;
});
},
onSettingsButtonPress: () {
CupertinoScaffold.showCupertinoModalBottomSheet(
onSettingsButtonPress: () async {
await CupertinoScaffold.showCupertinoModalBottomSheet(
context: context,
barrierColor: Colors.black.withAlpha(85),
builder: (context) => FractionallySizedBox(
Expand All @@ -133,70 +132,77 @@ class _NewHomePageState extends State<NewHomePage> {
authService: getIt.get<AuthService>(),
))),
);

if (!mounted) {
return;
}
_setAccountViewModel();
await widget.dashboardViewModel.loadCardDesigns();
if (mounted) {
setState(() {});
}
},
),
Observer(
builder: (_) => WalletInfoBar(
lightningMode: _lightningMode,
hardwareWalletType: widget.dashboardViewModel.wallet.hardwareWalletType,
name: widget.dashboardViewModel.wallet.name,
hasCustomize: accountListViewModel != null,
onCustomizeButtonTap: openAccountCustomizer),
),
Column(
spacing: 20,
children: [
Observer(
builder: (_) => CardsView(
key: ValueKey(widget.dashboardViewModel.wallet.name),
onCustomizeTapped: openCardCustomizer,
dashboardViewModel: widget.dashboardViewModel,
accountListViewModel: accountListViewModel,
onCompactModeBackgroundCardsTapped: openAccountCustomizer,
lightningMode: _lightningMode,
),
),
Observer(builder: (_) {
return AnimatedSize(
duration: Duration(milliseconds: 150),
curve: Curves.easeInOutCubic,
child: (widget.dashboardViewModel.shouldShowBalanceHiddenMessage)
? Column(
children: [
SizedBox(
height: 12,
width: double.infinity,
),
Text(
S.of(context).long_press_show_balance,
style: TextStyle(
color:
Theme.of(context).colorScheme.onSurfaceVariant),
)
],
)
: SizedBox(width: double.infinity),
);
}),
UnconfirmedBalanceWidget(
dashboardViewModel: widget.dashboardViewModel,
),
],
),
Observer(
builder: (_) {
return Column(
Column(
children: [
CoinActionRow(
lightningMode: _lightningMode,
showSwap: widget.dashboardViewModel.isEnabledSwapAction,
walletType: widget.dashboardViewModel.wallet.type,
Observer(
builder: (_) => CardsView(
key: ValueKey(widget.dashboardViewModel.wallet.name),
onCustomizeTapped: openCardCustomizer,
dashboardViewModel: widget.dashboardViewModel,
accountListViewModel: accountListViewModel,
onCompactModeBackgroundCardsTapped: openAccountCustomizer,
lightningMode: _lightningMode,
),
),
MwebAd(
Observer(builder: (_) {
return AnimatedSize(
duration: Duration(milliseconds: 150),
curve: Curves.easeInOutCubic,
child: (widget.dashboardViewModel.shouldShowBalanceHiddenMessage)
? Column(
children: [
SizedBox(
height: 12,
width: double.infinity,
),
Text(
S.of(context).long_press_show_balance,
style: TextStyle(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant),
)
],
)
: SizedBox(width: double.infinity),
);
}),
UnconfirmedBalanceWidget(
dashboardViewModel: widget.dashboardViewModel,
),
],
);
},
),
Observer(
builder: (_) {
return Column(
children: [
CoinActionRow(
lightningMode: _lightningMode,
showSwap: widget.dashboardViewModel.isEnabledSwapAction,
walletType: widget.dashboardViewModel.wallet.type,
),
MwebAd(
dashboardViewModel: widget.dashboardViewModel,
),
],
);
},
),
],
),
],
),
Expand Down Expand Up @@ -234,7 +240,12 @@ class _NewHomePageState extends State<NewHomePage> {
);
}

void openAccountCustomizer() async {
Future<void> openAccountCustomizer() async {
final accountList = accountListViewModel;
if (accountList == null) {
return;
}

await CupertinoScaffold.showCupertinoModalBottomSheet(
barrierColor: Colors.black.withAlpha(60),
context: context,
Expand All @@ -243,15 +254,15 @@ class _NewHomePageState extends State<NewHomePage> {
parentContext: context,
heightMode: ModalHeightModes.fullScreen,
rootPage: Material(
child: AccountCustomizer(
accountListViewModel: accountListViewModel!,
accountEditOrCreateViewModel: getIt.get<MoneroAccountEditOrCreateViewModel>(),
dashboardViewModel: widget.dashboardViewModel,
)),
child: AccountCustomizer(
accountListViewModel: accountList,
dashboardViewModel: widget.dashboardViewModel,
),
),
);
},
);
widget.dashboardViewModel.loadCardDesigns();
await widget.dashboardViewModel.loadCardDesigns();
}

void openCardCustomizer() async {
Expand Down
17 changes: 16 additions & 1 deletion lib/new-ui/pages/settings_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ bool _hasMweb(DashboardViewModel vm) => vm.hasMweb;

bool _hasWalletConnect(DashboardViewModel vm) => vm.hasWalletConnect;

bool _hasAccounts(DashboardViewModel vm) => vm.balanceViewModel.hasAccounts;

bool _requiresKeyImageSync(DashboardViewModel vm) =>
vm.wallet.type == WalletType.monero &&
[HardwareWalletType.cupcake, HardwareWalletType.trezor].contains(vm.wallet.hardwareWalletType);
Expand All @@ -38,12 +40,14 @@ class SettingsListItem {
this.use2fa = _falseFunc,
this.condition = _trueFunc,
this.routeArgs,
this.routeArgsBuilder,
});

final String iconPath;
final String title;
final String route;
final Object? routeArgs;
final Object? Function(DashboardViewModel)? routeArgsBuilder;
final bool requireAuth;
final bool Function(DashboardViewModel) use2fa;
final bool Function(DashboardViewModel) condition;
Expand All @@ -58,6 +62,13 @@ class SettingsSectionData {

static SettingsSectionData walletSettings =
SettingsSectionData(S.current.wallet_settings, "assets/new-ui/wallet-setting.svg", [
SettingsListItem(
"assets/new-ui/settings_row_icons/accounts.svg",
S.current.accounts,
Routes.accountCustomizer,
condition: _hasAccounts,
routeArgsBuilder: (vm) => vm,
),
SettingsListItem(
"assets/new-ui/settings_row_icons/nodes.svg", S.current.nodes, Routes.manageNodes),
SettingsListItem(
Expand Down Expand Up @@ -148,7 +159,11 @@ class SettingsMainPage extends StatelessWidget {
conditionToDetermineIfToUse2FA: item.use2fa(dashboardViewModel),
route: item.route);
} else {
Navigator.of(context).pushNamed(item.route, arguments: item.routeArgs);
Navigator.of(context).pushNamed(
item.route,
arguments:
item.routeArgsBuilder?.call(dashboardViewModel) ?? item.routeArgs,
);
}
}
})
Expand Down
7 changes: 6 additions & 1 deletion lib/new-ui/widgets/coins_page/assets_history/assets_top_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ class AssetsTopBar extends StatelessWidget {

return SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 32.0, bottom: 0.0, left: 12.0, right: 18.0),
padding: const EdgeInsets.only(
top: 20,
bottom: 0,
left: 12,
right: 18,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
Expand Down
2 changes: 1 addition & 1 deletion lib/new-ui/widgets/coins_page/assets_history/history_top_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ class HistoryTopBar extends StatelessWidget {
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 24),
padding: const EdgeInsets.only(left: 16, right: 16, top: 20),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
Expand Down
Loading
Loading