From c10d5ef83c9d2b1c807c83454741c7dc767bb4fa Mon Sep 17 00:00:00 2001 From: Rafia Rahman Chowdhury <55042866+RafiaChy@users.noreply.github.com> Date: Fri, 18 Mar 2022 16:47:57 +0600 Subject: [PATCH] Balance Container redesigned according to Figma (#287) * Balance Container redesigned according to Figma * injected BalancePage to di.dart page * removed an empty line and injected BalancePage using GetIt --- lib/di.dart | 8 +- lib/src/screens/dashboard/dashboard_page.dart | 6 +- .../dashboard/widgets/balance_page.dart | 262 ++++++++++++------ .../dashboard/balance_view_model.dart | 31 ++- 4 files changed, 206 insertions(+), 101 deletions(-) diff --git a/lib/di.dart b/lib/di.dart index 392480521..4252ec3a5 100644 --- a/lib/di.dart +++ b/lib/di.dart @@ -3,6 +3,7 @@ import 'package:cake_wallet/entities/parse_address_from_domain.dart'; import 'package:cake_wallet/entities/wake_lock.dart'; import 'package:cake_wallet/monero/monero.dart'; import 'package:cake_wallet/bitcoin/bitcoin.dart'; +import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart'; import 'package:cw_core/unspent_coins_info.dart'; import 'package:cake_wallet/core/backup_service.dart'; import 'package:cw_core/wallet_service.dart'; @@ -250,6 +251,7 @@ Future setup( fiatConvertationStore: getIt.get())); getIt.registerFactory(() => DashboardViewModel( + balanceViewModel: getIt.get(), appStore: getIt.get(), tradesStore: getIt.get(), @@ -304,10 +306,10 @@ Future setup( onAuthenticationFinished: onAuthFinished, closable: closable ?? false)); - getIt.registerFactory(() => DashboardPage( - walletViewModel: getIt.get(), - addressListViewModel: getIt.get())); + getIt.registerFactory(() => + BalancePage(dashboardViewModel: getIt.get(), settingsStore: getIt.get())); + getIt.registerFactory(() => DashboardPage( balancePage: getIt.get(), walletViewModel: getIt.get(), addressListViewModel: getIt.get())); getIt.registerFactory(() => ReceivePage( addressListViewModel: getIt.get())); diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index d009b10c1..d626bf735 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -30,10 +30,12 @@ import 'package:cake_wallet/wallet_type_utils.dart'; class DashboardPage extends BasePage { DashboardPage({ + @required this.balancePage, @required this.walletViewModel, @required this.addressListViewModel, }); - + final BalancePage balancePage; + @override Color get backgroundLightColor => currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @@ -193,7 +195,7 @@ class DashboardPage extends BasePage { pages.add(AddressPage( addressListViewModel: addressListViewModel, walletViewModel: walletViewModel)); - pages.add(BalancePage(dashboardViewModel: walletViewModel)); + pages.add(balancePage); pages.add(TransactionsPage(dashboardViewModel: walletViewModel)); _isEffectsInstalled = true; diff --git a/lib/src/screens/dashboard/widgets/balance_page.dart b/lib/src/screens/dashboard/widgets/balance_page.dart index 2498e2d5c..e4186ad9b 100644 --- a/lib/src/screens/dashboard/widgets/balance_page.dart +++ b/lib/src/screens/dashboard/widgets/balance_page.dart @@ -1,14 +1,20 @@ +import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/store/settings_store.dart'; +import 'package:cake_wallet/themes/theme_base.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:flutter/scheduler.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:auto_size_text/auto_size_text.dart'; -class BalancePage extends StatelessWidget { - BalancePage({@required this.dashboardViewModel}); +class BalancePage extends StatelessWidget{ + BalancePage({@required this.dashboardViewModel, @required this.settingsStore}); final DashboardViewModel dashboardViewModel; - + final SettingsStore settingsStore; + + Color get backgroundLightColor => + settingsStore.currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @override Widget build(BuildContext context) { return GestureDetector( @@ -18,102 +24,182 @@ class BalancePage extends StatelessWidget { onLongPressUp: () => dashboardViewModel.balanceViewModel.isReversing = !dashboardViewModel.balanceViewModel.isReversing, - child: Container( - color: Colors.transparent, - padding: EdgeInsets.all(24), - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Observer(builder: (_) { - return Text( - dashboardViewModel.balanceViewModel.currency.toString(), - style: TextStyle( - fontSize: 40, - fontWeight: FontWeight.bold, - color: Theme.of(context) - .accentTextTheme - .display2 - .backgroundColor, - height: 1), - ); - }), - SizedBox(height: 10), - Observer(builder: (_) { - return Row( - children: [ - Expanded( - child: Text( - '${dashboardViewModel.balanceViewModel.availableBalanceLabel} (${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()})', - textAlign: TextAlign.center, + child: Column( + children: [ + SizedBox(height: 56), + Container( + alignment: Alignment.topLeft, + margin: const EdgeInsets.only(left: 24, bottom: 16), + child: Observer(builder: (_) { + return AutoSizeText( + dashboardViewModel.balanceViewModel.asset, + style: TextStyle( + fontSize: 24, + fontFamily: 'Lato', + fontWeight: FontWeight.w600, + color: Theme.of(context) + .accentTextTheme + .display3 + .backgroundColor, + height: 1), + maxLines: 1, + textAlign: TextAlign.center); + })), + + Container( + margin: const EdgeInsets.only(left: 16, right: 16), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30.0), + border: Border.all(color: settingsStore.currentTheme.type == ThemeType.bright ? Color.fromRGBO(255, 255, 255, 0.2): Colors.transparent, width: 1, ), + color:Theme.of(context).textTheme.title.backgroundColor + ), + child: Container( + margin: const EdgeInsets.only(top: 24, left: 24, right: 24, bottom: 24), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 8,), + Observer(builder: (_) { + return Column( + children: [ + Text( + '${dashboardViewModel.balanceViewModel.availableBalanceLabel}', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12, + fontFamily: 'Lato', + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme + .display2 + .backgroundColor, + height: 1), + ) + ], + ); + }), + SizedBox(height: 8,), + Observer(builder: (_) { + return AutoSizeText( + dashboardViewModel.balanceViewModel.availableBalance, style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.w600, + fontSize: 24, + fontFamily: 'Lato', + + fontWeight: FontWeight.w900, color: Theme.of(context) .accentTextTheme - .display2 + .display3 .backgroundColor, height: 1), - ) - ) - ], - ); - }), - SizedBox(height: 10), - Observer(builder: (_) { - return AutoSizeText( - dashboardViewModel.balanceViewModel.availableBalance, - style: TextStyle( - fontSize: 54, - fontWeight: FontWeight.bold, - color: Theme.of(context) - .accentTextTheme - .display3 - .backgroundColor, - height: 1), - maxLines: 1, - textAlign: TextAlign.center); - }), - SizedBox(height: 10), - Observer(builder: (_) { - return Row( - children: [ - Expanded( - child: Text( - '${dashboardViewModel.balanceViewModel.additionalBalanceLabel} (${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()})', - textAlign: TextAlign.center, + maxLines: 1, + textAlign: TextAlign.center); + }), + SizedBox(height: 4,), + Observer(builder: (_) { + return Column( + children: [ + Text( + '${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()}', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16, + fontFamily: 'Lato', + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme + .display3 + .backgroundColor, + height: 1), + ) + ], + ); + }), + SizedBox(height: 26), + Observer(builder: (_) { + return Column( + children: [ + Text( + '${dashboardViewModel.balanceViewModel.additionalBalanceLabel}', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12, + fontFamily: 'Lato', + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme + .display2 + .backgroundColor, + height: 1), + ) + ], + ); + }), + SizedBox(height: 8), + Observer(builder: (_) { + return AutoSizeText( + dashboardViewModel.balanceViewModel.additionalBalance + .toString(), style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.w600, + fontSize: 24, + fontFamily: 'Lato', + fontWeight: FontWeight.w900, color: Theme.of(context) .accentTextTheme - .display2 + .display3 .backgroundColor, height: 1), - ) - ) - ], - ); - }), - SizedBox(height: 10), - Observer(builder: (_) { - return AutoSizeText( - dashboardViewModel.balanceViewModel.additionalBalance - .toString(), - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - color: Theme.of(context) - .accentTextTheme - .display3 - .backgroundColor, - height: 1), - maxLines: 1, - textAlign: TextAlign.center); - }), - ], - ), + maxLines: 1, + textAlign: TextAlign.center); + }), + SizedBox(height: 4,), + Observer(builder: (_) { + return Column( + children: [ + Text( + '${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()}', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16, + fontFamily: 'Lato', + fontWeight: FontWeight.w500, + color: Theme.of(context) + .accentTextTheme + .display3 + .backgroundColor, + height: 1), + ) + ], + ); + }), + ], + ), + Observer(builder: (_) { + return Text( + dashboardViewModel.balanceViewModel.currency.toString(), + style: TextStyle( + fontSize: 28, + fontFamily: 'Lato', + fontWeight: FontWeight.w800, + color: Theme.of(context) + .accentTextTheme + .display3 + .backgroundColor, + height: 1), + ); + }), + ], + ), + ), + ), + + ], ), + ); } } diff --git a/lib/view_model/dashboard/balance_view_model.dart b/lib/view_model/dashboard/balance_view_model.dart index 290282ed6..77203bf17 100644 --- a/lib/view_model/dashboard/balance_view_model.dart +++ b/lib/view_model/dashboard/balance_view_model.dart @@ -58,6 +58,22 @@ abstract class BalanceViewModelBase with Store { @computed BalanceDisplayMode get savedDisplayMode => settingsStore.balanceDisplayMode; + @computed + String get asset { + + switch(appStore.wallet.currency){ + case CryptoCurrency.btc: + return 'Bitcoin Assets'; + case CryptoCurrency.xmr: + return 'Monero Assets'; + case CryptoCurrency.ltc: + return 'Litecoin Assets'; + default: + return ''; + } + + } + @computed BalanceDisplayMode get displayMode => isReversing ? savedDisplayMode == BalanceDisplayMode.hiddenBalance @@ -114,11 +130,10 @@ abstract class BalanceViewModelBase with Store { return '---'; } - return fiatCurrency.toString() + - ' ' + - _getFiatBalance( + return _getFiatBalance( price: price, - cryptoAmount: walletBalance.formattedAvailableBalance); + cryptoAmount: walletBalance.formattedAvailableBalance) + ' ' + fiatCurrency.toString(); + } @computed @@ -130,11 +145,10 @@ abstract class BalanceViewModelBase with Store { return '---'; } - return fiatCurrency.toString() + - ' ' + - _getFiatBalance( + return _getFiatBalance( price: price, - cryptoAmount: walletBalance.formattedAdditionalBalance); + cryptoAmount: walletBalance.formattedAdditionalBalance) + ' ' + fiatCurrency.toString(); + } @computed @@ -165,3 +179,4 @@ abstract class BalanceViewModelBase with Store { return calculateFiatAmount(price: price, cryptoAmount: cryptoAmount); } } +