CWA-198 | added transaction history panel to dashboard page; added fiat currency symbol to transaction_info; changed date_section_raw, trade_row and transaction_raw
Oleksandr Sobol committed
Apr 16, 2020 at 21:41 UTC
823030403a145fd24010c68efc41d4ea46070f04
28 files changed
+255
-53
assets/images/2.0x/coins.png
Binary files /dev/null and b/assets/images/2.0x/coins.png differ
assets/images/2.0x/down_arrow.png
Binary files /dev/null and b/assets/images/2.0x/down_arrow.png differ
assets/images/2.0x/exchange.png
Binary files /dev/null and b/assets/images/2.0x/exchange.png differ
assets/images/2.0x/filter_button.png
Binary files /dev/null and b/assets/images/2.0x/filter_button.png differ
assets/images/2.0x/menu_button.png
Binary files /dev/null and b/assets/images/2.0x/menu_button.png differ
assets/images/2.0x/send.png
Binary files /dev/null and b/assets/images/2.0x/send.png differ
assets/images/2.0x/up_arrow.png
Binary files /dev/null and b/assets/images/2.0x/up_arrow.png differ
assets/images/3.0x/coins.png
Binary files /dev/null and b/assets/images/3.0x/coins.png differ
assets/images/3.0x/down_arrow.png
Binary files /dev/null and b/assets/images/3.0x/down_arrow.png differ
assets/images/3.0x/exchange.png
Binary files /dev/null and b/assets/images/3.0x/exchange.png differ
assets/images/3.0x/filter_button.png
Binary files /dev/null and b/assets/images/3.0x/filter_button.png differ
assets/images/3.0x/menu_button.png
Binary files /dev/null and b/assets/images/3.0x/menu_button.png differ
assets/images/3.0x/send.png
Binary files /dev/null and b/assets/images/3.0x/send.png differ
assets/images/3.0x/up_arrow.png
Binary files /dev/null and b/assets/images/3.0x/up_arrow.png differ
assets/images/coins.png
Binary files /dev/null and b/assets/images/coins.png differ
assets/images/down_arrow.png
Binary files /dev/null and b/assets/images/down_arrow.png differ
assets/images/exchange.png
Binary files /dev/null and b/assets/images/exchange.png differ
assets/images/filter_button.png
Binary files /dev/null and b/assets/images/filter_button.png differ
assets/images/menu_button.png
Binary files /dev/null and b/assets/images/menu_button.png differ
assets/images/send.png
Binary files /dev/null and b/assets/images/send.png differ
assets/images/up_arrow.png
Binary files /dev/null and b/assets/images/up_arrow.png differ
lib/palette.dart
+3
@@ -82,4 +82,7 @@ class PaletteDark {
82
static const Color walletCardAddressField = Color.fromRGBO(51, 63, 104, 1.0);
83
static const Color walletCardAddressText = Color.fromRGBO(183, 197, 242, 1.0);
84
static const Color walletCardSubAddressField = Color.fromRGBO(63, 77, 122, 1.0);
85
+ static const Color historyPanel = Color.fromRGBO(33, 43, 73, 1.0);
86
+ static const Color historyPanelText = Color.fromRGBO(91, 112, 146, 1.0);
87
+ static const Color historyPanelButton = Color.fromRGBO(39, 53, 96, 1.0);
88
}
\ No newline at end of file
lib/src/domain/common/transaction_info.dart
+1
-1
@@ -43,7 +43,7 @@ class TransactionInfo {
43
44
String amountFormatted() => '${formatAmount(moneroAmountToString(amount: amount))} XMR';
45
46
- String fiatAmount() => _fiatAmount ?? '';
46
+ String fiatAmount(String symbol) => _fiatAmount != null ? symbol + ' ' + _fiatAmount : '';
47
48
void changeFiatAmount(String amount) => _fiatAmount = formatAmount(amount);
49
}
lib/src/screens/dashboard/dashboard_page.dart
+27
-6
@@ -18,14 +18,15 @@ import 'package:cake_wallet/src/stores/action_list/date_section_item.dart';
18
import 'package:cake_wallet/src/stores/action_list/trade_list_item.dart';
19
import 'package:cake_wallet/src/stores/action_list/transaction_list_item.dart';
20
import 'package:cake_wallet/src/screens/base_page.dart';
21
-import 'package:cake_wallet/src/screens/dashboard/date_section_raw.dart';
22
-import 'package:cake_wallet/src/screens/dashboard/trade_row.dart';
23
-import 'package:cake_wallet/src/screens/dashboard/transaction_raw.dart';
21
+import 'package:cake_wallet/src/screens/dashboard/widgets/date_section_raw.dart';
22
+import 'package:cake_wallet/src/screens/dashboard/widgets/trade_row.dart';
23
+import 'package:cake_wallet/src/screens/dashboard/widgets/transaction_raw.dart';
24
import 'package:cake_wallet/src/widgets/primary_button.dart';
25
import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
26
import 'package:cake_wallet/src/widgets/picker.dart';
27
import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
28
import 'package:cake_wallet/src/screens/dashboard/widgets/buttons_widget.dart';
29
+import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart';
30
31
class DashboardPage extends BasePage {
32
final _bodyKey = GlobalKey();
@@ -115,6 +116,7 @@ class DashboardPageBody extends StatefulWidget {
116
}
117
118
class DashboardPageBodyState extends State<DashboardPageBody> {
119
+ final menuButton = Image.asset('assets/images/menu_button.png');
120
/*final _connectionStatusObserverKey = GlobalKey();
121
final _balanceObserverKey = GlobalKey();
122
final _balanceTitleObserverKey = GlobalKey();
@@ -136,7 +138,27 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
138
child: Column(
139
children: <Widget>[
140
Padding(
139
- padding: EdgeInsets.only(left: 20, top: 78),
141
+ padding: EdgeInsets.only(top: 14),
142
+ child: Container(
143
+ width: double.infinity,
144
+ alignment: Alignment.centerRight,
145
+ child: SizedBox(
146
+ height: 37,
147
+ width: 37,
148
+ child: ButtonTheme(
149
+ minWidth: double.minPositive,
150
+ child: FlatButton(
151
+ highlightColor: Colors.transparent,
152
+ splashColor: Colors.transparent,
153
+ padding: EdgeInsets.all(0),
154
+ onPressed: () {},
155
+ child: menuButton),
156
+ ),
157
+ ),
158
+ )
159
+ ),
160
+ Padding(
161
+ padding: EdgeInsets.only(left: 20, top: 23),
162
child: WalletCard(),
163
),
164
Padding(
@@ -144,8 +166,7 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
166
child: ButtonsWidget(),
167
),
168
Expanded(
147
- child: Container(
148
- )
169
+ child: TradeHistoryPanel()
170
)
171
],
172
),
lib/src/screens/dashboard/widgets/date_section_raw.dart
renamed
+3
-3
@@ -20,8 +20,8 @@ class DateSectionRaw extends StatelessWidget {
20
final settingsStore = Provider.of<SettingsStore>(context);
21
final currentLanguage = settingsStore.languageCode;
22
final dateSectionDateFormat = settingsStore.getCurrentDateFormat(
23
- formatUSA: "MMM d",
24
- formatDefault: "d MMM");
23
+ formatUSA: "yyyy MMM d",
24
+ formatDefault: "d MMM yyyy");
25
var title = "";
26
27
if (isToday) {
@@ -39,7 +39,7 @@ class DateSectionRaw extends StatelessWidget {
39
padding: const EdgeInsets.only(top: 10, bottom: 10),
40
child: Center(
41
child: Text(title,
42
- style: TextStyle(fontSize: 16, color: Palette.wildDarkBlue))),
42
+ style: TextStyle(fontSize: 12, color: PaletteDark.historyPanelText))),
43
);
44
}
45
}
lib/src/screens/dashboard/widgets/trade_history_panel.dart
new
+179
@@ -0,0 +1,179 @@
1
+import 'dart:async';
2
+import 'package:cake_wallet/src/domain/common/balance_display_mode.dart';
3
+import 'package:cake_wallet/src/stores/action_list/action_list_store.dart';
4
+import 'package:cake_wallet/src/stores/action_list/date_section_item.dart';
5
+import 'package:cake_wallet/src/stores/action_list/trade_list_item.dart';
6
+import 'package:cake_wallet/src/stores/action_list/transaction_list_item.dart';
7
+import 'package:cake_wallet/src/stores/settings/settings_store.dart';
8
+import 'package:flutter/material.dart';
9
+import 'package:cake_wallet/palette.dart';
10
+import 'package:cake_wallet/generated/i18n.dart';
11
+import 'package:flutter_mobx/flutter_mobx.dart';
12
+import 'package:intl/intl.dart';
13
+import 'package:provider/provider.dart';
14
+import 'package:cake_wallet/routes.dart';
15
+import 'date_section_raw.dart';
16
+import 'trade_row.dart';
17
+import 'transaction_raw.dart';
18
+
19
+class TradeHistoryPanel extends StatefulWidget {
20
+ @override
21
+ TradeHistoryPanelState createState() => TradeHistoryPanelState();
22
+}
23
+
24
+class TradeHistoryPanelState extends State<TradeHistoryPanel> {
25
+ final _listObserverKey = GlobalKey();
26
+ final _listKey = GlobalKey();
27
+
28
+ double panelHeight;
29
+ double screenHeight;
30
+ double opacity;
31
+ bool isDraw;
32
+
33
+ @override
34
+ void initState() {
35
+ panelHeight = 0;
36
+ screenHeight = 0;
37
+ opacity = 0;
38
+ isDraw = false;
39
+ super.initState();
40
+ WidgetsBinding.instance.addPostFrameCallback(afterLayout);
41
+ }
42
+
43
+ void afterLayout(dynamic _) {
44
+ screenHeight = MediaQuery.of(context).size.height;
45
+ setState(() {
46
+ panelHeight = screenHeight;
47
+ opacity = 1;
48
+ });
49
+ Timer(Duration(milliseconds: 350), () =>
50
+ setState(() => isDraw = true)
51
+ );
52
+ }
53
+
54
+ @override
55
+ Widget build(BuildContext context) {
56
+ final actionListStore = Provider.of<ActionListStore>(context);
57
+ final settingsStore = Provider.of<SettingsStore>(context);
58
+ final transactionDateFormat = DateFormat("HH:mm");
59
+ final filterButton = Image.asset('assets/images/filter_button.png');
60
+
61
+ return Container(
62
+ width: double.infinity,
63
+ alignment: Alignment.bottomCenter,
64
+ child: AnimatedContainer(
65
+ width: double.infinity,
66
+ height: panelHeight,
67
+ duration: Duration(milliseconds: 1000),
68
+ curve: Curves.fastOutSlowIn,
69
+ decoration: BoxDecoration(
70
+ borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
71
+ color: PaletteDark.historyPanel.withOpacity(opacity),
72
+ ),
73
+ child: isDraw
74
+ ? Container(
75
+ padding: EdgeInsets.only(top: 20, left: 20, right: 20),
76
+ child: Column(
77
+ children: <Widget>[
78
+ Container(
79
+ width: double.infinity,
80
+ height: 36,
81
+ margin: EdgeInsets.only(bottom: 10),
82
+ child: Stack(
83
+ alignment: Alignment.center,
84
+ children: <Widget>[
85
+ Text(
86
+ S.of(context).trade_history_title,
87
+ style: TextStyle(
88
+ fontSize: 20
89
+ ),
90
+ ),
91
+ Positioned(
92
+ right: 0,
93
+ child: GestureDetector(
94
+ onTap: () {},
95
+ child: filterButton,
96
+ )
97
+ )
98
+ ],
99
+ ),
100
+ ),
101
+ Observer(
102
+ key: _listObserverKey,
103
+ builder: (_) {
104
+ final items = actionListStore.items == null
105
+ ? <String>[]
106
+ : actionListStore.items;
107
+ final itemsCount = items.length;
108
+ final symbol = settingsStore.fiatCurrency.toString();
109
+
110
+ return Expanded(
111
+ child: ListView.builder(
112
+ key: _listKey,
113
+ padding: EdgeInsets.only(bottom: 15),
114
+ itemCount: itemsCount,
115
+ itemBuilder: (context, index) {
116
+
117
+ final item = items[index];
118
+
119
+ if (item is DateSectionItem) {
120
+ return DateSectionRaw(date: item.date);
121
+ }
122
+
123
+ if (item is TransactionListItem) {
124
+ final transaction = item.transaction;
125
+ final savedDisplayMode = settingsStore.balanceDisplayMode;
126
+ final formattedAmount =
127
+ savedDisplayMode == BalanceDisplayMode.hiddenBalance
128
+ ? '---'
129
+ : transaction.amountFormatted();
130
+ final formattedFiatAmount =
131
+ savedDisplayMode == BalanceDisplayMode.hiddenBalance
132
+ ? '---'
133
+ : transaction.fiatAmount(symbol);
134
+
135
+ return TransactionRow(
136
+ onTap: () => Navigator.of(context).pushNamed(
137
+ Routes.transactionDetails,
138
+ arguments: transaction),
139
+ direction: transaction.direction,
140
+ formattedDate:
141
+ transactionDateFormat.format(transaction.date),
142
+ formattedAmount: formattedAmount,
143
+ formattedFiatAmount: formattedFiatAmount,
144
+ isPending: transaction.isPending);
145
+ }
146
+
147
+ if (item is TradeListItem) {
148
+ final trade = item.trade;
149
+ final savedDisplayMode = settingsStore.balanceDisplayMode;
150
+ final formattedAmount = trade.amount != null
151
+ ? savedDisplayMode == BalanceDisplayMode.hiddenBalance
152
+ ? '---'
153
+ : trade.amountFormatted()
154
+ : trade.amount;
155
+
156
+ return TradeRow(
157
+ onTap: () => Navigator.of(context)
158
+ .pushNamed(Routes.tradeDetails, arguments: trade),
159
+ provider: trade.provider,
160
+ from: trade.from,
161
+ to: trade.to,
162
+ createdAtFormattedDate:
163
+ transactionDateFormat.format(trade.createdAt),
164
+ formattedAmount: formattedAmount);
165
+ }
166
+
167
+ return Container();
168
+ }
169
+ )
170
+ );
171
+ })
172
+ ],
173
+ ),
174
+ )
175
+ : Offstage()
176
+ ),
177
+ );
178
+ }
179
+}
\ No newline at end of file
lib/src/screens/dashboard/widgets/trade_row.dart
renamed
+16
-19
@@ -21,25 +21,25 @@ class TradeRow extends StatelessWidget {
21
22
@override
23
Widget build(BuildContext context) {
24
- final amountCrypto = provider == ExchangeProviderDescription.xmrto
25
- ? to.toString()
26
- : from.toString();
24
+ final amountCrypto = from.toString();
25
26
return InkWell(
27
onTap: onTap,
28
child: Container(
31
- padding: EdgeInsets.only(top: 14, bottom: 14, left: 20, right: 20),
32
- decoration: BoxDecoration(
33
- border: Border(
34
- bottom: BorderSide(
35
- color: PaletteDark.darkGrey,
36
- width: 0.5,
37
- style: BorderStyle.solid))),
29
+ padding: EdgeInsets.only(top: 5, bottom: 5),
30
child: Row(children: <Widget>[
39
- _getPoweredImage(provider),
31
+ Container(
32
+ height: 36,
33
+ width: 36,
34
+ decoration: BoxDecoration(
35
+ shape: BoxShape.circle,
36
+ color: PaletteDark.historyPanelButton
37
+ ),
38
+ child: _getPoweredImage(provider),
39
+ ),
40
Expanded(
41
child: Padding(
42
- padding: const EdgeInsets.only(left: 10, right: 10),
42
+ padding: const EdgeInsets.only(left: 10),
43
child: Column(
44
children: <Widget>[
45
Row(
@@ -48,23 +48,20 @@ class TradeRow extends StatelessWidget {
48
Text('${from.toString()} → ${to.toString()}',
49
style: TextStyle(
50
fontSize: 16,
51
- color: Theme.of(context)
52
- .primaryTextTheme
53
- .subhead
54
- .color)),
51
+ )),
52
formattedAmount != null
53
? Text(formattedAmount + ' ' + amountCrypto,
54
style: const TextStyle(
58
- fontSize: 16, color: Palette.purpleBlue))
55
+ fontSize: 16))
56
: Container()
57
]),
61
- SizedBox(height: 6),
58
+ SizedBox(height: 5),
59
Row(
60
mainAxisAlignment: MainAxisAlignment.spaceBetween,
61
children: <Widget>[
62
Text(createdAtFormattedDate,
63
style: const TextStyle(
67
- fontSize: 13, color: Palette.blueGrey))
64
+ fontSize: 14, color: PaletteDark.historyPanelText))
65
]),
66
],
67
),
lib/src/screens/dashboard/widgets/transaction_raw.dart
renamed
+26
-24
@@ -24,24 +24,25 @@ class TransactionRow extends StatelessWidget {
24
return InkWell(
25
onTap: onTap,
26
child: Container(
27
- padding: EdgeInsets.only(top: 14, bottom: 14, left: 20, right: 20),
28
- decoration: BoxDecoration(
29
- border: Border(
30
- bottom: BorderSide(
31
- color: PaletteDark.darkGrey,
32
- width: 0.5,
33
- style: BorderStyle.solid))),
27
+ padding: EdgeInsets.only(top: 5, bottom: 5),
28
child: Row(children: <Widget>[
35
- Image.asset(
36
- direction == TransactionDirection.incoming
37
- ? 'assets/images/transaction_incoming.png'
38
- : 'assets/images/transaction_outgoing.png',
39
- height: 25,
40
- width: 25),
29
+ Container(
30
+ height: 36,
31
+ width: 36,
32
+ decoration: BoxDecoration(
33
+ shape: BoxShape.circle,
34
+ color: PaletteDark.historyPanelButton
35
+ ),
36
+ child: Image.asset(
37
+ direction == TransactionDirection.incoming
38
+ ? 'assets/images/down_arrow.png'
39
+ : 'assets/images/up_arrow.png'),
40
+ ),
41
Expanded(
42
child: Padding(
43
- padding: const EdgeInsets.only(left: 10, right: 10),
43
+ padding: const EdgeInsets.only(left: 10),
44
child: Column(
45
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
46
children: <Widget>[
47
Row(
48
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -53,24 +54,25 @@ class TransactionRow extends StatelessWidget {
54
(isPending ? S.of(context).pending : ''),
55
style: TextStyle(
56
fontSize: 16,
56
- color: Theme.of(context)
57
- .primaryTextTheme
58
- .subhead
59
- .color)),
60
- Text(formattedAmount,
57
+ )),
58
+ Text(direction == TransactionDirection.incoming
59
+ ? formattedAmount
60
+ : '- ' + formattedAmount,
61
style: const TextStyle(
62
- fontSize: 16, color: Palette.purpleBlue))
62
+ fontSize: 16))
63
]),
64
- SizedBox(height: 6),
64
+ SizedBox(height: 5,),
65
Row(
66
mainAxisAlignment: MainAxisAlignment.spaceBetween,
67
children: <Widget>[
68
Text(formattedDate,
69
style: const TextStyle(
70
- fontSize: 13, color: Palette.blueGrey)),
71
- Text(formattedFiatAmount,
70
+ fontSize: 14, color: PaletteDark.historyPanelText)),
71
+ Text(direction == TransactionDirection.incoming
72
+ ? formattedFiatAmount
73
+ : '- ' + formattedFiatAmount,
74
style: const TextStyle(
73
- fontSize: 14, color: Palette.blueGrey))
75
+ fontSize: 14, color: PaletteDark.historyPanelText))
76
]),
77
],
78
),