@samitouri / QOSAMI-cakewallet-1 / commits / c10d5ef83

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

Rafia Rahman Chowdhury committed Mar 18, 2022 at 16:47 UTC c10d5ef83c9d2b1c807c83454741c7dc767bb4fa
4 files changed +206 -101
lib/di.dart
+5 -3
@@ -3,6 +3,7 @@ import 'package:cake_wallet/entities/parse_address_from_domain.dart';
3 import 'package:cake_wallet/entities/wake_lock.dart';
4 import 'package:cake_wallet/monero/monero.dart';
5 import 'package:cake_wallet/bitcoin/bitcoin.dart';
6 +import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
7 import 'package:cw_core/unspent_coins_info.dart';
8 import 'package:cake_wallet/core/backup_service.dart';
9 import 'package:cw_core/wallet_service.dart';
@@ -250,6 +251,7 @@ Future setup(
251 fiatConvertationStore: getIt.get<FiatConversionStore>()));
252
253 getIt.registerFactory(() => DashboardViewModel(
254 +
255 balanceViewModel: getIt.get<BalanceViewModel>(),
256 appStore: getIt.get<AppStore>(),
257 tradesStore: getIt.get<TradesStore>(),
@@ -304,10 +306,10 @@ Future setup(
306 onAuthenticationFinished: onAuthFinished,
307 closable: closable ?? false));
308
307 - getIt.registerFactory<DashboardPage>(() => DashboardPage(
308 - walletViewModel: getIt.get<DashboardViewModel>(),
309 - addressListViewModel: getIt.get<WalletAddressListViewModel>()));
309 + getIt.registerFactory(() =>
310 + BalancePage(dashboardViewModel: getIt.get<DashboardViewModel>(), settingsStore: getIt.get<SettingsStore>()));
311
312 + getIt.registerFactory<DashboardPage>(() => DashboardPage( balancePage: getIt.get<BalancePage>(), walletViewModel: getIt.get<DashboardViewModel>(), addressListViewModel: getIt.get<WalletAddressListViewModel>()));
313 getIt.registerFactory<ReceivePage>(() => ReceivePage(
314 addressListViewModel: getIt.get<WalletAddressListViewModel>()));
315
lib/src/screens/dashboard/dashboard_page.dart
+4 -2
@@ -30,10 +30,12 @@ import 'package:cake_wallet/wallet_type_utils.dart';
30
31 class DashboardPage extends BasePage {
32 DashboardPage({
33 + @required this.balancePage,
34 @required this.walletViewModel,
35 @required this.addressListViewModel,
36 });
36 -
37 + final BalancePage balancePage;
38 +
39 @override
40 Color get backgroundLightColor =>
41 currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
@@ -193,7 +195,7 @@ class DashboardPage extends BasePage {
195 pages.add(AddressPage(
196 addressListViewModel: addressListViewModel,
197 walletViewModel: walletViewModel));
196 - pages.add(BalancePage(dashboardViewModel: walletViewModel));
198 + pages.add(balancePage);
199 pages.add(TransactionsPage(dashboardViewModel: walletViewModel));
200 _isEffectsInstalled = true;
201
lib/src/screens/dashboard/widgets/balance_page.dart
+174 -88
@@ -1,14 +1,20 @@
1 +import 'package:cake_wallet/di.dart';
2 +import 'package:cake_wallet/store/settings_store.dart';
3 +import 'package:cake_wallet/themes/theme_base.dart';
4 import 'package:flutter/material.dart';
5 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
6 import 'package:flutter/scheduler.dart';
7 import 'package:flutter_mobx/flutter_mobx.dart';
8 import 'package:auto_size_text/auto_size_text.dart';
9
7 -class BalancePage extends StatelessWidget {
8 - BalancePage({@required this.dashboardViewModel});
10 +class BalancePage extends StatelessWidget{
11 + BalancePage({@required this.dashboardViewModel, @required this.settingsStore});
12
13 final DashboardViewModel dashboardViewModel;
11 -
14 + final SettingsStore settingsStore;
15 +
16 + Color get backgroundLightColor =>
17 + settingsStore.currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
18 @override
19 Widget build(BuildContext context) {
20 return GestureDetector(
@@ -18,102 +24,182 @@ class BalancePage extends StatelessWidget {
24 onLongPressUp: () =>
25 dashboardViewModel.balanceViewModel.isReversing =
26 !dashboardViewModel.balanceViewModel.isReversing,
21 - child: Container(
22 - color: Colors.transparent,
23 - padding: EdgeInsets.all(24),
24 - child: Column(
25 - mainAxisAlignment: MainAxisAlignment.center,
26 - crossAxisAlignment: CrossAxisAlignment.center,
27 - children: <Widget>[
28 - Observer(builder: (_) {
29 - return Text(
30 - dashboardViewModel.balanceViewModel.currency.toString(),
31 - style: TextStyle(
32 - fontSize: 40,
33 - fontWeight: FontWeight.bold,
34 - color: Theme.of(context)
35 - .accentTextTheme
36 - .display2
37 - .backgroundColor,
38 - height: 1),
39 - );
40 - }),
41 - SizedBox(height: 10),
42 - Observer(builder: (_) {
43 - return Row(
44 - children: [
45 - Expanded(
46 - child: Text(
47 - '${dashboardViewModel.balanceViewModel.availableBalanceLabel} (${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()})',
48 - textAlign: TextAlign.center,
27 + child: Column(
28 + children: [
29 + SizedBox(height: 56),
30 + Container(
31 + alignment: Alignment.topLeft,
32 + margin: const EdgeInsets.only(left: 24, bottom: 16),
33 + child: Observer(builder: (_) {
34 + return AutoSizeText(
35 + dashboardViewModel.balanceViewModel.asset,
36 + style: TextStyle(
37 + fontSize: 24,
38 + fontFamily: 'Lato',
39 + fontWeight: FontWeight.w600,
40 + color: Theme.of(context)
41 + .accentTextTheme
42 + .display3
43 + .backgroundColor,
44 + height: 1),
45 + maxLines: 1,
46 + textAlign: TextAlign.center);
47 + })),
48 +
49 + Container(
50 + margin: const EdgeInsets.only(left: 16, right: 16),
51 + decoration: BoxDecoration(
52 + borderRadius: BorderRadius.circular(30.0),
53 + border: Border.all(color: settingsStore.currentTheme.type == ThemeType.bright ? Color.fromRGBO(255, 255, 255, 0.2): Colors.transparent, width: 1, ),
54 + color:Theme.of(context).textTheme.title.backgroundColor
55 + ),
56 + child: Container(
57 + margin: const EdgeInsets.only(top: 24, left: 24, right: 24, bottom: 24),
58 + child: Row(
59 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
60 + crossAxisAlignment: CrossAxisAlignment.start,
61 + children: [
62 + Column(
63 + crossAxisAlignment: CrossAxisAlignment.start,
64 + children: [
65 + SizedBox(height: 8,),
66 + Observer(builder: (_) {
67 + return Column(
68 + children: [
69 + Text(
70 + '${dashboardViewModel.balanceViewModel.availableBalanceLabel}',
71 + textAlign: TextAlign.center,
72 + style: TextStyle(
73 + fontSize: 12,
74 + fontFamily: 'Lato',
75 + fontWeight: FontWeight.w500,
76 + color: Theme.of(context)
77 + .accentTextTheme
78 + .display2
79 + .backgroundColor,
80 + height: 1),
81 + )
82 + ],
83 + );
84 + }),
85 + SizedBox(height: 8,),
86 + Observer(builder: (_) {
87 + return AutoSizeText(
88 + dashboardViewModel.balanceViewModel.availableBalance,
89 style: TextStyle(
50 - fontSize: 12,
51 - fontWeight: FontWeight.w600,
90 + fontSize: 24,
91 + fontFamily: 'Lato',
92 +
93 + fontWeight: FontWeight.w900,
94 color: Theme.of(context)
95 .accentTextTheme
54 - .display2
96 + .display3
97 .backgroundColor,
98 height: 1),
57 - )
58 - )
59 - ],
60 - );
61 - }),
62 - SizedBox(height: 10),
63 - Observer(builder: (_) {
64 - return AutoSizeText(
65 - dashboardViewModel.balanceViewModel.availableBalance,
66 - style: TextStyle(
67 - fontSize: 54,
68 - fontWeight: FontWeight.bold,
69 - color: Theme.of(context)
70 - .accentTextTheme
71 - .display3
72 - .backgroundColor,
73 - height: 1),
74 - maxLines: 1,
75 - textAlign: TextAlign.center);
76 - }),
77 - SizedBox(height: 10),
78 - Observer(builder: (_) {
79 - return Row(
80 - children: [
81 - Expanded(
82 - child: Text(
83 - '${dashboardViewModel.balanceViewModel.additionalBalanceLabel} (${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()})',
84 - textAlign: TextAlign.center,
99 + maxLines: 1,
100 + textAlign: TextAlign.center);
101 + }),
102 + SizedBox(height: 4,),
103 + Observer(builder: (_) {
104 + return Column(
105 + children: [
106 + Text(
107 + '${dashboardViewModel.balanceViewModel.availableFiatBalance.toString()}',
108 + textAlign: TextAlign.center,
109 + style: TextStyle(
110 + fontSize: 16,
111 + fontFamily: 'Lato',
112 + fontWeight: FontWeight.w500,
113 + color: Theme.of(context)
114 + .accentTextTheme
115 + .display3
116 + .backgroundColor,
117 + height: 1),
118 + )
119 + ],
120 + );
121 + }),
122 + SizedBox(height: 26),
123 + Observer(builder: (_) {
124 + return Column(
125 + children: [
126 + Text(
127 + '${dashboardViewModel.balanceViewModel.additionalBalanceLabel}',
128 + textAlign: TextAlign.center,
129 + style: TextStyle(
130 + fontSize: 12,
131 + fontFamily: 'Lato',
132 + fontWeight: FontWeight.w500,
133 + color: Theme.of(context)
134 + .accentTextTheme
135 + .display2
136 + .backgroundColor,
137 + height: 1),
138 + )
139 + ],
140 + );
141 + }),
142 + SizedBox(height: 8),
143 + Observer(builder: (_) {
144 + return AutoSizeText(
145 + dashboardViewModel.balanceViewModel.additionalBalance
146 + .toString(),
147 style: TextStyle(
86 - fontSize: 12,
87 - fontWeight: FontWeight.w600,
148 + fontSize: 24,
149 + fontFamily: 'Lato',
150 + fontWeight: FontWeight.w900,
151 color: Theme.of(context)
152 .accentTextTheme
90 - .display2
153 + .display3
154 .backgroundColor,
155 height: 1),
93 - )
94 - )
95 - ],
96 - );
97 - }),
98 - SizedBox(height: 10),
99 - Observer(builder: (_) {
100 - return AutoSizeText(
101 - dashboardViewModel.balanceViewModel.additionalBalance
102 - .toString(),
103 - style: TextStyle(
104 - fontSize: 18,
105 - fontWeight: FontWeight.bold,
106 - color: Theme.of(context)
107 - .accentTextTheme
108 - .display3
109 - .backgroundColor,
110 - height: 1),
111 - maxLines: 1,
112 - textAlign: TextAlign.center);
113 - }),
114 - ],
115 - ),
156 + maxLines: 1,
157 + textAlign: TextAlign.center);
158 + }),
159 + SizedBox(height: 4,),
160 + Observer(builder: (_) {
161 + return Column(
162 + children: [
163 + Text(
164 + '${dashboardViewModel.balanceViewModel.additionalFiatBalance.toString()}',
165 + textAlign: TextAlign.center,
166 + style: TextStyle(
167 + fontSize: 16,
168 + fontFamily: 'Lato',
169 + fontWeight: FontWeight.w500,
170 + color: Theme.of(context)
171 + .accentTextTheme
172 + .display3
173 + .backgroundColor,
174 + height: 1),
175 + )
176 + ],
177 + );
178 + }),
179 + ],
180 + ),
181 + Observer(builder: (_) {
182 + return Text(
183 + dashboardViewModel.balanceViewModel.currency.toString(),
184 + style: TextStyle(
185 + fontSize: 28,
186 + fontFamily: 'Lato',
187 + fontWeight: FontWeight.w800,
188 + color: Theme.of(context)
189 + .accentTextTheme
190 + .display3
191 + .backgroundColor,
192 + height: 1),
193 + );
194 + }),
195 + ],
196 + ),
197 + ),
198 + ),
199 +
200 + ],
201 ),
202 +
203 );
204 }
205 }
lib/view_model/dashboard/balance_view_model.dart
+23 -8
@@ -58,6 +58,22 @@ abstract class BalanceViewModelBase with Store {
58 @computed
59 BalanceDisplayMode get savedDisplayMode => settingsStore.balanceDisplayMode;
60
61 + @computed
62 + String get asset {
63 +
64 + switch(appStore.wallet.currency){
65 + case CryptoCurrency.btc:
66 + return 'Bitcoin Assets';
67 + case CryptoCurrency.xmr:
68 + return 'Monero Assets';
69 + case CryptoCurrency.ltc:
70 + return 'Litecoin Assets';
71 + default:
72 + return '';
73 + }
74 +
75 + }
76 +
77 @computed
78 BalanceDisplayMode get displayMode => isReversing
79 ? savedDisplayMode == BalanceDisplayMode.hiddenBalance
@@ -114,11 +130,10 @@ abstract class BalanceViewModelBase with Store {
130 return '---';
131 }
132
117 - return fiatCurrency.toString() +
118 - ' ' +
119 - _getFiatBalance(
133 + return _getFiatBalance(
134 price: price,
121 - cryptoAmount: walletBalance.formattedAvailableBalance);
135 + cryptoAmount: walletBalance.formattedAvailableBalance) + ' ' + fiatCurrency.toString();
136 +
137 }
138
139 @computed
@@ -130,11 +145,10 @@ abstract class BalanceViewModelBase with Store {
145 return '---';
146 }
147
133 - return fiatCurrency.toString() +
134 - ' ' +
135 - _getFiatBalance(
148 + return _getFiatBalance(
149 price: price,
137 - cryptoAmount: walletBalance.formattedAdditionalBalance);
150 + cryptoAmount: walletBalance.formattedAdditionalBalance) + ' ' + fiatCurrency.toString();
151 +
152 }
153
154 @computed
@@ -165,3 +179,4 @@ abstract class BalanceViewModelBase with Store {
179 return calculateFiatAmount(price: price, cryptoAmount: cryptoAmount);
180 }
181 }
182 +