Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-11-17 01:37:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Balance Container redesigned according to Figma (#287)

Browse source 
* Balance Container redesigned according to Figma

* injected BalancePage to di.dart page

* removed an empty line and injected BalancePage using GetIt
This commit is contained in:
Rafia Rahman Chowdhury 2022-03-18 16:47:57 +06:00 committed by GitHub
parent efd4a259f7
commit c10d5ef83c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 206 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
lib/di.dart
View file

@ -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/entities/wake_lock.dart';
import 'package:cake_wallet/monero/monero.dart'; import 'package:cake_wallet/monero/monero.dart';
import 'package:cake_wallet/bitcoin/bitcoin.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:cw_core/unspent_coins_info.dart';
import 'package:cake_wallet/core/backup_service.dart'; import 'package:cake_wallet/core/backup_service.dart';
import 'package:cw_core/wallet_service.dart'; import 'package:cw_core/wallet_service.dart';
@ -250,6 +251,7 @@ Future setup(
fiatConvertationStore: getIt.get<FiatConversionStore>())); fiatConvertationStore: getIt.get<FiatConversionStore>()));
getIt.registerFactory(() => DashboardViewModel( getIt.registerFactory(() => DashboardViewModel(
balanceViewModel: getIt.get<BalanceViewModel>(), balanceViewModel: getIt.get<BalanceViewModel>(),
appStore: getIt.get<AppStore>(), appStore: getIt.get<AppStore>(),
tradesStore: getIt.get<TradesStore>(), tradesStore: getIt.get<TradesStore>(),
@ -304,10 +306,10 @@ Future setup(
onAuthenticationFinished: onAuthFinished, onAuthenticationFinished: onAuthFinished,
closable: closable ?? false)); closable: closable ?? false));
getIt.registerFactory<DashboardPage>(() => DashboardPage( getIt.registerFactory(() =>
walletViewModel: getIt.get<DashboardViewModel>(), BalancePage(dashboardViewModel: getIt.get<DashboardViewModel>(), settingsStore: getIt.get<SettingsStore>()));
addressListViewModel: getIt.get<WalletAddressListViewModel>()));
getIt.registerFactory<DashboardPage>(() => DashboardPage( balancePage: getIt.get<BalancePage>(), walletViewModel: getIt.get<DashboardViewModel>(), addressListViewModel: getIt.get<WalletAddressListViewModel>()));
getIt.registerFactory<ReceivePage>(() => ReceivePage( getIt.registerFactory<ReceivePage>(() => ReceivePage(
addressListViewModel: getIt.get<WalletAddressListViewModel>())); addressListViewModel: getIt.get<WalletAddressListViewModel>()));

6
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -30,10 +30,12 @@ import 'package:cake_wallet/wallet_type_utils.dart';
class DashboardPage extends BasePage { class DashboardPage extends BasePage {
DashboardPage({ DashboardPage({
@required this.balancePage,
@required this.walletViewModel, @required this.walletViewModel,
@required this.addressListViewModel, @required this.addressListViewModel,
}); });
final BalancePage balancePage;
@override @override
Color get backgroundLightColor => Color get backgroundLightColor =>
currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
@ -193,7 +195,7 @@ class DashboardPage extends BasePage {
pages.add(AddressPage( pages.add(AddressPage(
addressListViewModel: addressListViewModel, addressListViewModel: addressListViewModel,
walletViewModel: walletViewModel)); walletViewModel: walletViewModel));
pages.add(BalancePage(dashboardViewModel: walletViewModel)); pages.add(balancePage);
pages.add(TransactionsPage(dashboardViewModel: walletViewModel)); pages.add(TransactionsPage(dashboardViewModel: walletViewModel));
_isEffectsInstalled = true; _isEffectsInstalled = true;

262
lib/src/screens/dashboard/widgets/balance_page.dart
View file

@ -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:flutter/material.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:flutter/scheduler.dart'; import 'package:flutter/scheduler.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:auto_size_text/auto_size_text.dart'; import 'package:auto_size_text/auto_size_text.dart';
class BalancePage extends StatelessWidget { class BalancePage extends StatelessWidget{
BalancePage({@required this.dashboardViewModel}); BalancePage({@required this.dashboardViewModel, @required this.settingsStore});
final DashboardViewModel dashboardViewModel; final DashboardViewModel dashboardViewModel;
final SettingsStore settingsStore;
Color get backgroundLightColor =>
settingsStore.currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return GestureDetector(
@ -18,102 +24,182 @@ class BalancePage extends StatelessWidget {
onLongPressUp: () => onLongPressUp: () =>
dashboardViewModel.balanceViewModel.isReversing = dashboardViewModel.balanceViewModel.isReversing =
!dashboardViewModel.balanceViewModel.isReversing, !dashboardViewModel.balanceViewModel.isReversing,
child: Container( child: Column(
color: Colors.transparent, children: [
padding: EdgeInsets.all(24), SizedBox(height: 56),
child: Column( Container(
mainAxisAlignment: MainAxisAlignment.center, alignment: Alignment.topLeft,
crossAxisAlignment: CrossAxisAlignment.center, margin: const EdgeInsets.only(left: 24, bottom: 16),
children: <Widget>[ child: Observer(builder: (_) {
Observer(builder: (_) { return AutoSizeText(
return Text( dashboardViewModel.balanceViewModel.asset,
dashboardViewModel.balanceViewModel.currency.toString(), style: TextStyle(
style: TextStyle( fontSize: 24,
fontSize: 40, fontFamily: 'Lato',
fontWeight: FontWeight.bold, fontWeight: FontWeight.w600,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme .accentTextTheme
.display2 .display3
.backgroundColor, .backgroundColor,
height: 1), height: 1),
); maxLines: 1,
}), textAlign: TextAlign.center);
SizedBox(height: 10), })),
Observer(builder: (_) {
return Row( Container(
children: [ margin: const EdgeInsets.only(left: 16, right: 16),
Expanded( decoration: BoxDecoration(
child: Text( borderRadius: BorderRadius.circular(30.0),
'${dashboardViewModel.balanceViewModel.availableBalanceLabel} (${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()})', border: Border.all(color: settingsStore.currentTheme.type == ThemeType.bright ? Color.fromRGBO(255, 255, 255, 0.2): Colors.transparent, width: 1, ),
textAlign: TextAlign.center, 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( style: TextStyle(
fontSize: 12, fontSize: 24,
fontWeight: FontWeight.w600, fontFamily: 'Lato',
fontWeight: FontWeight.w900,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme .accentTextTheme
.display2 .display3
.backgroundColor, .backgroundColor,
height: 1), height: 1),
) maxLines: 1,
) textAlign: TextAlign.center);
], }),
); SizedBox(height: 4,),
}), Observer(builder: (_) {
SizedBox(height: 10), return Column(
Observer(builder: (_) { children: [
return AutoSizeText( Text(
dashboardViewModel.balanceViewModel.availableBalance, '${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()}',
style: TextStyle( textAlign: TextAlign.center,
fontSize: 54, style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16,
color: Theme.of(context) fontFamily: 'Lato',
.accentTextTheme fontWeight: FontWeight.w500,
.display3 color: Theme.of(context)
.backgroundColor, .accentTextTheme
height: 1), .display3
maxLines: 1, .backgroundColor,
textAlign: TextAlign.center); height: 1),
}), )
SizedBox(height: 10), ],
Observer(builder: (_) { );
return Row( }),
children: [ SizedBox(height: 26),
Expanded( Observer(builder: (_) {
child: Text( return Column(
'${dashboardViewModel.balanceViewModel.additionalBalanceLabel} (${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()})', children: [
textAlign: TextAlign.center, 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( style: TextStyle(
fontSize: 12, fontSize: 24,
fontWeight: FontWeight.w600, fontFamily: 'Lato',
fontWeight: FontWeight.w900,
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme .accentTextTheme
.display2 .display3
.backgroundColor, .backgroundColor,
height: 1), height: 1),
) maxLines: 1,
) textAlign: TextAlign.center);
], }),
); SizedBox(height: 4,),
}), Observer(builder: (_) {
SizedBox(height: 10), return Column(
Observer(builder: (_) { children: [
return AutoSizeText( Text(
dashboardViewModel.balanceViewModel.additionalBalance '${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()}',
.toString(), textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 16,
fontWeight: FontWeight.bold, fontFamily: 'Lato',
color: Theme.of(context) fontWeight: FontWeight.w500,
.accentTextTheme color: Theme.of(context)
.display3 .accentTextTheme
.backgroundColor, .display3
height: 1), .backgroundColor,
maxLines: 1, height: 1),
textAlign: TextAlign.center); )
}), ],
], );
), }),
],
),
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),
);
}),
],
),
),
),
],
), ),
); );
} }
} }

31
lib/view_model/dashboard/balance_view_model.dart
View file

@ -58,6 +58,22 @@ abstract class BalanceViewModelBase with Store {
@computed @computed
BalanceDisplayMode get savedDisplayMode => settingsStore.balanceDisplayMode; 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 @computed
BalanceDisplayMode get displayMode => isReversing BalanceDisplayMode get displayMode => isReversing
? savedDisplayMode == BalanceDisplayMode.hiddenBalance ? savedDisplayMode == BalanceDisplayMode.hiddenBalance
@ -114,11 +130,10 @@ abstract class BalanceViewModelBase with Store {
return '---'; return '---';
} }
return fiatCurrency.toString() + return _getFiatBalance(
' ' +
_getFiatBalance(
price: price, price: price,
cryptoAmount: walletBalance.formattedAvailableBalance); cryptoAmount: walletBalance.formattedAvailableBalance) + ' ' + fiatCurrency.toString();
} }
@computed @computed
@ -130,11 +145,10 @@ abstract class BalanceViewModelBase with Store {
return '---'; return '---';
} }
return fiatCurrency.toString() + return _getFiatBalance(
' ' +
_getFiatBalance(
price: price, price: price,
cryptoAmount: walletBalance.formattedAdditionalBalance); cryptoAmount: walletBalance.formattedAdditionalBalance) + ' ' + fiatCurrency.toString();
} }
@computed @computed
@ -165,3 +179,4 @@ abstract class BalanceViewModelBase with Store {
return calculateFiatAmount(price: price, cryptoAmount: cryptoAmount); return calculateFiatAmount(price: price, cryptoAmount: cryptoAmount);
} }
} }