mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-11-16 17:27:37 +00:00
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
This commit is contained in:
Rafia Rahman Chowdhury
GitHub
parent
efd4a259f7
commit
c10d5ef83c
4 changed files with 206 additions and 101 deletions
|
|
@ -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<FiatConversionStore>()));
|
||||
|
||||
getIt.registerFactory(() => DashboardViewModel(
|
||||
|
||||
balanceViewModel: getIt.get<BalanceViewModel>(),
|
||||
appStore: getIt.get<AppStore>(),
|
||||
tradesStore: getIt.get<TradesStore>(),
|
||||
|
|
@ -304,10 +306,10 @@ Future setup(
|
|||
onAuthenticationFinished: onAuthFinished,
|
||||
closable: closable ?? false));
|
||||
|
||||
getIt.registerFactory<DashboardPage>(() => DashboardPage(
|
||||
walletViewModel: getIt.get<DashboardViewModel>(),
|
||||
addressListViewModel: getIt.get<WalletAddressListViewModel>()));
|
||||
getIt.registerFactory(() =>
|
||||
BalancePage(dashboardViewModel: getIt.get<DashboardViewModel>(), settingsStore: getIt.get<SettingsStore>()));
|
||||
|
||||
getIt.registerFactory<DashboardPage>(() => DashboardPage( balancePage: getIt.get<BalancePage>(), walletViewModel: getIt.get<DashboardViewModel>(), addressListViewModel: getIt.get<WalletAddressListViewModel>()));
|
||||
getIt.registerFactory<ReceivePage>(() => ReceivePage(
|
||||
addressListViewModel: getIt.get<WalletAddressListViewModel>()));
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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: <Widget>[
|
||||
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),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
],
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue