@samitouri / QOSAMI-cakewallet / commits / 66aebb4d6

CWA-209 | applied new design to receive page

Oleksandr Sobol committed May 5, 2020 at 20:59 UTC 66aebb4d657b37522547cabdcdbd525bac25888f
11 files changed +275 -199
assets/images/2.0x/copy_content.png
Binary files /dev/null and b/assets/images/2.0x/copy_content.png differ
assets/images/2.0x/share.png
Binary files /dev/null and b/assets/images/2.0x/share.png differ
assets/images/3.0x/copy_content.png
Binary files /dev/null and b/assets/images/3.0x/copy_content.png differ
assets/images/3.0x/share.png
Binary files /dev/null and b/assets/images/3.0x/share.png differ
assets/images/copy_content.png
Binary files /dev/null and b/assets/images/copy_content.png differ
assets/images/share.png
Binary files /dev/null and b/assets/images/share.png differ
lib/src/screens/dashboard/widgets/wallet_card.dart
+5 -2
@@ -12,7 +12,8 @@ import 'package:flutter_mobx/flutter_mobx.dart';
12 import 'package:cake_wallet/palette.dart';
13 import 'package:cake_wallet/generated/i18n.dart';
14 import 'package:cake_wallet/src/domain/common/sync_status.dart';
15 -import 'package:cake_wallet/src/screens/receive/qr_image.dart';
15 +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
16 +import 'package:cake_wallet/routes.dart';
17
18 class WalletCard extends StatefulWidget {
19 @override
@@ -425,7 +426,9 @@ class WalletCardState extends State<WalletCard> {
426 color: PaletteDark.walletCardSubAddressField
427 ),
428 child: InkWell(
428 - onTap: () {},
429 + onTap: () => Navigator.of(context,
430 + rootNavigator: true)
431 + .pushNamed(Routes.receive),
432 child: Row(
433 mainAxisAlignment: MainAxisAlignment.spaceBetween,
434 children: <Widget>[
lib/src/screens/exchange_trade/exchange_trade_page.dart
+1 -1
@@ -13,7 +13,7 @@ import 'package:cake_wallet/src/stores/send/send_store.dart';
13 import 'package:cake_wallet/src/stores/send/sending_state.dart';
14 import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
15 import 'package:cake_wallet/src/screens/exchange_trade/widgets/copy_button.dart';
16 -import 'package:cake_wallet/src/screens/receive/qr_image.dart';
16 +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
17 import 'package:cake_wallet/src/screens/base_page.dart';
18 import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart';
19 import 'package:cake_wallet/src/widgets/primary_button.dart';
lib/src/screens/receive/receive_page.dart
+268 -195
@@ -9,12 +9,15 @@ import 'package:cake_wallet/palette.dart';
9 import 'package:cake_wallet/generated/i18n.dart';
10 import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.dart';
11 import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
12 -import 'package:cake_wallet/src/screens/receive/qr_image.dart';
12 +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
13 import 'package:cake_wallet/src/screens/base_page.dart';
14
15 class ReceivePage extends BasePage {
16 @override
17 - bool get isModalBackButton => true;
17 + Color get backgroundColor => PaletteDark.mainBackgroundColor;
18 +
19 + @override
20 + bool get resizeToAvoidBottomPadding => false;
21
22 @override
23 String get title => S.current.receive;
@@ -22,6 +25,7 @@ class ReceivePage extends BasePage {
25 @override
26 Widget trailing(BuildContext context) {
27 final walletStore = Provider.of<WalletStore>(context);
28 + final shareImage = Image.asset('assets/images/share.png');
29
30 return SizedBox(
31 height: 37.0,
@@ -34,17 +38,13 @@ class ReceivePage extends BasePage {
38 padding: EdgeInsets.all(0),
39 onPressed: () => Share.text(
40 'Share address', walletStore.subaddress.address, 'text/plain'),
37 - child: Icon(
38 - Icons.share,
39 - size: 30.0,
40 - )),
41 + child: shareImage),
42 ),
43 );
44 }
45
46 @override
46 - Widget body(BuildContext context) =>
47 - SingleChildScrollView(child: ReceiveBody());
47 + Widget body(BuildContext context) => ReceiveBody();
48 }
49
50 class ReceiveBody extends StatefulWidget {
@@ -67,8 +67,10 @@ class ReceiveBodyState extends State<ReceiveBody> {
67 final walletStore = Provider.of<WalletStore>(context);
68 final subaddressListStore = Provider.of<SubaddressListStore>(context);
69
70 - final currentColor = Theme.of(context).selectedRowColor;
71 - final notCurrentColor = Theme.of(context).scaffoldBackgroundColor;
70 + final copyImage = Image.asset('assets/images/copy_content.png');
71 +
72 + final currentColor = PaletteDark.menuList;
73 + final notCurrentColor = Colors.transparent;
74
75 amountController.addListener(() {
76 if (_formKey.currentState.validate()) {
@@ -78,202 +80,273 @@ class ReceiveBodyState extends State<ReceiveBody> {
80 }
81 });
82
81 - return SafeArea(
82 - child: SingleChildScrollView(
83 - child: Column(
84 - children: <Widget>[
85 - Container(
86 - padding: EdgeInsets.all(35.0),
87 - color: Theme.of(context).backgroundColor,
88 - child: Column(
89 - children: <Widget>[
90 - Observer(builder: (_) {
91 - return Row(
92 - children: <Widget>[
93 - Spacer(
94 - flex: 1,
95 - ),
96 - Flexible(
97 - flex: 2,
83 + return Container(
84 + height: MediaQuery.of(context).size.height,
85 + width: MediaQuery.of(context).size.width,
86 + color: PaletteDark.mainBackgroundColor,
87 + padding: EdgeInsets.only(top: 24),
88 + child: Column(
89 + children: <Widget>[
90 + Flexible(
91 + flex: 2,
92 + child: Observer(builder: (_) {
93 + return Row(
94 + children: <Widget>[
95 + Spacer(
96 + flex: 1,
97 + ),
98 + Flexible(
99 + flex: 2,
100 + child: Center(
101 child: AspectRatio(
102 aspectRatio: 1.0,
100 - child: Container(
101 - padding: EdgeInsets.all(5),
102 - color: Colors.white,
103 - child: QrImage(
104 - data: walletStore.subaddress.address +
105 - walletStore.amountValue,
106 - backgroundColor: Colors.transparent,
107 - ),
108 - ),
109 - )),
110 - Spacer(
111 - flex: 1,
112 - )
113 - ],
114 - );
115 - }),
116 - Observer(builder: (_) {
117 - return Row(
118 - children: <Widget>[
119 - Expanded(
120 - child: Container(
121 - padding: EdgeInsets.all(20.0),
122 - child: Center(
123 - child: GestureDetector(
124 - onTap: () {
125 - Clipboard.setData(ClipboardData(
126 - text: walletStore.subaddress.address));
127 - Scaffold.of(context).showSnackBar(SnackBar(
128 - content: Text(
129 - S.of(context).copied_to_clipboard,
130 - style: TextStyle(color: Colors.white),
131 - ),
132 - backgroundColor: Colors.green,
133 - ));
134 - },
135 - child: Text(
136 - walletStore.subaddress.address,
137 - textAlign: TextAlign.center,
138 - style: TextStyle(
139 - fontSize: 14.0,
140 - fontWeight: FontWeight.w600,
141 - color: Theme.of(context)
142 - .primaryTextTheme
143 - .title
144 - .color),
103 + child: QrImage(
104 + data: walletStore.subaddress.address +
105 + walletStore.amountValue,
106 + backgroundColor: Colors.transparent,
107 + foregroundColor: PaletteDark.walletCardText,
108 ),
109 ),
147 - ),
148 - ))
149 - ],
150 - );
151 - }),
152 - Row(
153 - children: <Widget>[
154 - Expanded(
155 - child: Form(
156 - key: _formKey,
157 - child: TextFormField(
158 - keyboardType:
159 - TextInputType.numberWithOptions(decimal: true),
160 - inputFormatters: [
161 - BlacklistingTextInputFormatter(
162 - RegExp('[\\-|\\ |\\,]'))
163 - ],
164 - style: TextStyle(
165 - fontSize: 14.0,
166 - ),
167 - decoration: InputDecoration(
168 - hintStyle: TextStyle(
169 - color: Theme.of(context).hintColor),
170 - hintText: S.of(context).amount,
171 - focusedBorder: UnderlineInputBorder(
172 - borderSide: BorderSide(
173 - color: Palette.cakeGreen, width: 2.0)),
174 - enabledBorder: UnderlineInputBorder(
175 - borderSide: BorderSide(
176 - color: Theme.of(context).focusColor,
177 - width: 1.0))),
178 - validator: (value) {
179 - walletStore.validateAmount(value);
180 - return walletStore.errorMessage;
181 - },
182 - autovalidate: true,
183 - controller: amountController,
184 - )))
110 + )),
111 + Spacer(
112 + flex: 1,
113 + )
114 ],
186 - )
187 - ],
115 + );
116 + }),
117 ),
189 - ),
190 - Row(
191 - children: <Widget>[
192 - Expanded(
193 - child: Container(
194 - color: Theme.of(context).accentTextTheme.headline.color,
195 - child: Column(
196 - children: <Widget>[
197 - ListTile(
198 - title: Text(
199 - S.of(context).subaddresses,
200 - style: TextStyle(
201 - fontSize: 16.0,
202 - color: Theme.of(context)
203 - .primaryTextTheme
204 - .headline
205 - .color),
118 + Padding(
119 + padding: EdgeInsets.all(24),
120 + child: Row(
121 + children: <Widget>[
122 + Expanded(
123 + child: Form(
124 + key: _formKey,
125 + child: TextFormField(
126 + keyboardType:
127 + TextInputType.numberWithOptions(decimal: true),
128 + inputFormatters: [
129 + BlacklistingTextInputFormatter(
130 + RegExp('[\\-|\\ |\\,]'))
131 + ],
132 + textAlign: TextAlign.center,
133 + style: TextStyle(
134 + fontSize: 20.0,
135 + color: Colors.white
136 + ),
137 + decoration: InputDecoration(
138 + hintStyle: TextStyle(
139 + fontSize: 20,
140 + color: PaletteDark.walletCardText),
141 + hintText: S.of(context).amount,
142 + focusedBorder: UnderlineInputBorder(
143 + borderSide: BorderSide(
144 + color: PaletteDark.walletCardText, width: 1.0)),
145 + enabledBorder: UnderlineInputBorder(
146 + borderSide: BorderSide(
147 + color: PaletteDark.walletCardText,
148 + width: 1.0))),
149 + validator: (value) {
150 + walletStore.validateAmount(value);
151 + return walletStore.errorMessage;
152 + },
153 + autovalidate: true,
154 + controller: amountController,
155 + )))
156 + ],
157 + ),
158 + ),
159 + Padding(
160 + padding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
161 + child: Observer(
162 + builder: (_) => GestureDetector(
163 + onTap: () {
164 + Clipboard.setData(ClipboardData(
165 + text: walletStore.subaddress.address));
166 + Scaffold.of(context).showSnackBar(SnackBar(
167 + content: Text(
168 + S.of(context).copied_to_clipboard,
169 + style: TextStyle(color: Colors.white),
170 ),
207 - trailing: Container(
208 - width: 28.0,
209 - height: 28.0,
210 - decoration: BoxDecoration(
211 - color: Theme.of(context).selectedRowColor,
212 - shape: BoxShape.circle),
213 - child: InkWell(
214 - onTap: () => Navigator.of(context)
215 - .pushNamed(Routes.newSubaddress),
216 - borderRadius: BorderRadius.all(Radius.circular(14.0)),
217 - child: Icon(
218 - Icons.add,
219 - color: Palette.violet,
220 - size: 22.0,
171 + backgroundColor: Colors.green,
172 + duration: Duration(milliseconds: 500),
173 + ));
174 + },
175 + child: Container(
176 + height: 54,
177 + padding: EdgeInsets.only(left: 24, right: 24),
178 + decoration: BoxDecoration(
179 + borderRadius: BorderRadius.all(Radius.circular(27)),
180 + color: PaletteDark.walletCardSubAddressField
181 + ),
182 + child: Row(
183 + mainAxisSize: MainAxisSize.max,
184 + children: <Widget>[
185 + Expanded(
186 + child: Text(
187 + walletStore.subaddress.address,
188 + maxLines: 1,
189 + overflow: TextOverflow.ellipsis,
190 + style: TextStyle(
191 + fontSize: 18,
192 + fontWeight: FontWeight.w600,
193 + color: Colors.white
194 + ),
195 ),
196 ),
223 - ),
197 + Padding(
198 + padding: EdgeInsets.only(left: 12),
199 + child: copyImage,
200 + )
201 + ],
202 ),
225 - Divider(
226 - color: Theme.of(context).dividerTheme.color,
227 - height: 1.0,
228 - )
229 - ],
203 + ),
204 + )
205 + ),
206 + ),
207 + Flexible(
208 + flex: 3,
209 + child: ClipRRect(
210 + borderRadius: BorderRadius.only(
211 + topLeft: Radius.circular(24),
212 + topRight: Radius.circular(24),
213 ),
231 - ))
232 - ],
233 - ),
234 - Observer(builder: (_) {
235 - return ListView.separated(
236 - shrinkWrap: true,
237 - physics: NeverScrollableScrollPhysics(),
238 - itemCount: subaddressListStore.subaddresses.length,
239 - separatorBuilder: (context, i) {
240 - return Divider(
241 - color: Theme.of(context).dividerTheme.color,
242 - height: 1.0,
243 - );
244 - },
245 - itemBuilder: (context, i) {
246 - return Observer(builder: (_) {
247 - final subaddress = subaddressListStore.subaddresses[i];
248 - final isCurrent =
249 - walletStore.subaddress.address == subaddress.address;
250 - final label = subaddress.label.isNotEmpty
251 - ? subaddress.label
252 - : subaddress.address;
253 -
254 - return InkWell(
255 - onTap: () => walletStore.setSubaddress(subaddress),
256 - child: Container(
257 - color: isCurrent ? currentColor : notCurrentColor,
258 - child: Column(children: <Widget>[
259 - ListTile(
260 - title: Text(
261 - label,
262 - style: TextStyle(
263 - fontSize: 16.0,
264 - color: Theme.of(context)
265 - .primaryTextTheme
266 - .headline
267 - .color),
268 - ),
269 - )
270 - ]),
214 + child: Container(
215 + color: PaletteDark.historyPanel,
216 + child: Observer(
217 + builder: (_) => ListView.separated(
218 + separatorBuilder: (context, index) => Divider(
219 + height: 1,
220 + color: PaletteDark.menuList,
221 ),
272 - );
273 - });
274 - });
275 - })
276 - ],
277 - )));
222 + itemCount: subaddressListStore.subaddresses.length + 2,
223 + itemBuilder: (context, index) {
224 +
225 + if (index == 0) {
226 + return accountTile(
227 + onTap: () {},
228 + title: walletStore.account.label,
229 + icon: Icon(
230 + Icons.arrow_forward_ios,
231 + size: 14,
232 + color: Colors.white,
233 + )
234 + );
235 + }
236 +
237 + if (index == 1) {
238 + return accountTile(
239 + onTap: () => Navigator.of(context)
240 + .pushNamed(Routes.newSubaddress),
241 + title: S.of(context).subaddresses,
242 + icon: Icon(
243 + Icons.add,
244 + size: 20,
245 + color: Colors.white,
246 + )
247 + );
248 + }
249 +
250 + index -= 2;
251 +
252 + return Observer(
253 + builder: (_) {
254 + final subaddress = subaddressListStore.subaddresses[index];
255 + final isCurrent =
256 + walletStore.subaddress.address == subaddress.address;
257 +
258 + final label = subaddress.label;
259 + final address = subaddress.address;
260 +
261 + return InkWell(
262 + onTap: () => walletStore.setSubaddress(subaddress),
263 + child: Container(
264 + color: isCurrent ? currentColor : notCurrentColor,
265 + padding: EdgeInsets.only(
266 + left: 24,
267 + right: 24,
268 + top: 32,
269 + bottom: 32
270 + ),
271 + child: Column(
272 + mainAxisAlignment: MainAxisAlignment.start,
273 + crossAxisAlignment: CrossAxisAlignment.start,
274 + children: <Widget>[
275 + label.isNotEmpty
276 + ? Text(
277 + label,
278 + style: TextStyle(
279 + fontSize: 14,
280 + color: PaletteDark.walletCardText
281 + ),
282 + )
283 + : Offstage(),
284 + Padding(
285 + padding: label.isNotEmpty
286 + ? EdgeInsets.only(top: 10)
287 + : EdgeInsets.only(top: 0),
288 + child: Text(
289 + address,
290 + style: TextStyle(
291 + fontSize: 16,
292 + fontWeight: FontWeight.w600,
293 + color: Colors.white
294 + ),
295 + ),
296 + )
297 + ]),
298 + ),
299 + );
300 + }
301 + );
302 + }
303 + )
304 + ),
305 + ),
306 + )
307 + )
308 + ],
309 + ),
310 + );
311 }
312 +
313 + Widget accountTile({
314 + @required VoidCallback onTap,
315 + @required String title,
316 + @required Icon icon
317 + }) => GestureDetector(
318 + onTap: onTap,
319 + child: Container(
320 + padding: EdgeInsets.only(
321 + left: 24,
322 + right: 24,
323 + top: 32,
324 + bottom: 32
325 + ),
326 + color: Colors.transparent,
327 + child: Row(
328 + mainAxisSize: MainAxisSize.max,
329 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
330 + children: <Widget>[
331 + Text(
332 + title,
333 + style: TextStyle(
334 + fontSize: 18,
335 + fontWeight: FontWeight.bold,
336 + color: Colors.white
337 + ),
338 + ),
339 + Container(
340 + height: 32,
341 + width: 32,
342 + decoration: BoxDecoration(
343 + shape: BoxShape.circle,
344 + color: PaletteDark.menuList
345 + ),
346 + child: icon,
347 + )
348 + ],
349 + ),
350 + ),
351 + );
352 }
lib/src/screens/receive/widgets/qr_image.dart renamed
+1 -1
@@ -1,6 +1,6 @@
1 import 'package:flutter/material.dart';
2 import 'package:qr/qr.dart';
3 -import 'package:cake_wallet/src/screens/receive/qr_painter.dart';
3 +import 'package:cake_wallet/src/screens/receive/widgets/qr_painter.dart';
4
5 class QrImage extends StatelessWidget {
6 QrImage({
lib/src/screens/receive/widgets/qr_painter.dart renamed