@samitouri / QOSAMI-cakewallet / commits / 00ef34ee8

CWA-223 | added possibility to switch balance mode in the wallet card (long press on balance value); applied switch to back side of wallet card to short address field

Oleksandr Sobol committed Jun 11, 2020 at 20:29 UTC 00ef34ee8054f6c5eff8203dd708154d34f0c3ab
1 file changed +259 -197
lib/src/screens/dashboard/widgets/wallet_card.dart
+259 -197
@@ -22,8 +22,10 @@ class WalletCard extends StatefulWidget {
22
23 class WalletCardState extends State<WalletCard> {
24 final _syncingObserverKey = GlobalKey();
25 - final _balanceObserverKey = GlobalKey();
25 final _addressObserverKey = GlobalKey();
26 + final _connectionStatusObserverKey = GlobalKey();
27 + final _balanceObserverKey = GlobalKey();
28 + final _balanceTitleObserverKey = GlobalKey();
29
30 double cardWidth;
31 double cardHeight;
@@ -55,6 +57,8 @@ class WalletCardState extends State<WalletCard> {
57 );
58 }
59
60 + void rollCard() => setState(() => isFrontSide = !isFrontSide);
61 +
62 @override
63 Widget build(BuildContext context) {
64 final List<Color> colorsSync = [
@@ -93,12 +97,9 @@ class WalletCardState extends State<WalletCard> {
97 width: cardWidth,
98 height: cardHeight,
99 color: Theme.of(context).cardColor,
96 - child: InkWell(
97 - onTap: () => setState(() => isFrontSide = !isFrontSide),
98 - child: isFrontSide
99 - ? frontSide(colorsSync)
100 - : backSide(colorsSync)
101 - ),
100 + child: isFrontSide
101 + ? frontSide(colorsSync)
102 + : backSide(colorsSync),
103 ),
104 )
105 ),
@@ -214,88 +215,146 @@ class WalletCardState extends State<WalletCard> {
215 )
216 ],
217 ),
217 - Container(
218 - width: 98,
219 - height: 32,
220 - alignment: Alignment.center,
221 - decoration: BoxDecoration(
222 - color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
223 - borderRadius: BorderRadius.all(Radius.circular(16))
224 - ),
225 - child: Text(
226 - shortAddress,
227 - style: TextStyle(
228 - fontSize: 12,
229 - color: Theme.of(context).primaryTextTheme.caption.color
218 + GestureDetector(
219 + onTap: () => rollCard(),
220 + child: Container(
221 + width: 98,
222 + height: 32,
223 + alignment: Alignment.center,
224 + decoration: BoxDecoration(
225 + color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
226 + borderRadius: BorderRadius.all(Radius.circular(16))
227 + ),
228 + child: Text(
229 + shortAddress,
230 + style: TextStyle(
231 + fontSize: 12,
232 + color: Theme.of(context).primaryTextTheme.caption.color
233 + ),
234 ),
235 ),
236 )
237 ],
238 ),
239 status is SyncedSyncStatus
236 - ? Observer(
237 - key: _balanceObserverKey,
238 - builder: (_) {
239 - final balanceDisplayMode = settingsStore.balanceDisplayMode;
240 - final symbol = settingsStore
241 - .fiatCurrency
242 - .toString();
243 - var balance = '---';
244 - var fiatBalance = '---';
245 -
246 - if (balanceDisplayMode ==
247 - BalanceDisplayMode.availableBalance) {
248 - balance =
249 - balanceStore.unlockedBalance ??
250 - '0.0';
251 - fiatBalance =
252 - '$symbol ${balanceStore.fiatUnlockedBalance}';
253 - }
254 -
255 - if (balanceDisplayMode ==
256 - BalanceDisplayMode.fullBalance) {
257 - balance =
258 - balanceStore.fullBalance ?? '0.0';
259 - fiatBalance =
260 - '$symbol ${balanceStore.fiatFullBalance}';
261 - }
262 -
263 - return Row(
240 + ? GestureDetector(
241 + onTapUp: (_) => balanceStore.isReversing = false,
242 + onTapDown: (_) => balanceStore.isReversing = true,
243 + child: Row(
244 crossAxisAlignment: CrossAxisAlignment.end,
245 mainAxisAlignment: MainAxisAlignment.spaceBetween,
246 children: <Widget>[
247 Column(
248 crossAxisAlignment: CrossAxisAlignment.start,
249 children: <Widget>[
270 - Text(
271 - balanceDisplayMode.toString(),
272 - style: TextStyle(
273 - fontSize: 12,
274 - color: Theme.of(context).primaryTextTheme.caption.color
275 - ),
276 - ),
250 + Observer(
251 + key: _balanceTitleObserverKey,
252 + builder: (_) {
253 + final savedDisplayMode =
254 + settingsStore.balanceDisplayMode;
255 + final displayMode = balanceStore
256 + .isReversing
257 + ? (savedDisplayMode ==
258 + BalanceDisplayMode
259 + .availableBalance
260 + ? BalanceDisplayMode.fullBalance
261 + : BalanceDisplayMode
262 + .availableBalance)
263 + : savedDisplayMode;
264 +
265 + return Text(
266 + displayMode.toString(),
267 + style: TextStyle(
268 + fontSize: 12,
269 + color: Theme.of(context).primaryTextTheme.caption.color
270 + ),
271 + );
272 + }),
273 SizedBox(height: 5),
278 - Text(
279 - balance,
280 - style: TextStyle(
281 - fontSize: 28,
282 - height: 1,
283 - color: Theme.of(context).primaryTextTheme.title.color
284 - ),
285 - )
274 + Observer(
275 + key: _connectionStatusObserverKey,
276 + builder: (_) {
277 + final savedDisplayMode =
278 + settingsStore.balanceDisplayMode;
279 + var balance = '---';
280 + final displayMode = balanceStore
281 + .isReversing
282 + ? (savedDisplayMode ==
283 + BalanceDisplayMode
284 + .availableBalance
285 + ? BalanceDisplayMode.fullBalance
286 + : BalanceDisplayMode
287 + .availableBalance)
288 + : savedDisplayMode;
289 +
290 + if (displayMode ==
291 + BalanceDisplayMode.availableBalance) {
292 + balance =
293 + balanceStore.unlockedBalance ??
294 + '0.0';
295 + }
296 +
297 + if (displayMode ==
298 + BalanceDisplayMode.fullBalance) {
299 + balance =
300 + balanceStore.fullBalance ?? '0.0';
301 + }
302 +
303 + return Text(
304 + balance,
305 + style: TextStyle(
306 + fontSize: 28,
307 + height: 1,
308 + color: Theme.of(context).primaryTextTheme.title.color
309 + ),
310 + );
311 + }),
312 ],
313 ),
288 - Text(
289 - fiatBalance,
290 - style: TextStyle(
291 - fontSize: 14,
292 - height: 2,
293 - color: Theme.of(context).primaryTextTheme.title.color
294 - ),
295 - )
314 + Observer(
315 + key: _balanceObserverKey,
316 + builder: (_) {
317 + final savedDisplayMode =
318 + settingsStore.balanceDisplayMode;
319 + final displayMode =
320 + balanceStore.isReversing
321 + ? (savedDisplayMode ==
322 + BalanceDisplayMode
323 + .availableBalance
324 + ? BalanceDisplayMode
325 + .fullBalance
326 + : BalanceDisplayMode
327 + .availableBalance)
328 + : savedDisplayMode;
329 + final symbol = settingsStore
330 + .fiatCurrency
331 + .toString();
332 + var balance = '---';
333 +
334 + if (displayMode ==
335 + BalanceDisplayMode
336 + .availableBalance) {
337 + balance =
338 + '$symbol ${balanceStore.fiatUnlockedBalance}';
339 + }
340 +
341 + if (displayMode ==
342 + BalanceDisplayMode.fullBalance) {
343 + balance =
344 + '$symbol ${balanceStore.fiatFullBalance}';
345 + }
346 +
347 + return Text(
348 + balance,
349 + style: TextStyle(
350 + fontSize: 14,
351 + height: 2,
352 + color: Theme.of(context).primaryTextTheme.title.color
353 + ),
354 + );
355 + })
356 ],
297 - );
298 - }
357 + )
358 )
359 : Row(
360 crossAxisAlignment: CrossAxisAlignment.end,
@@ -343,144 +402,147 @@ class WalletCardState extends State<WalletCard> {
402 double messageBoxHeight = 0;
403 double messageBoxWidth = cardWidth - 10;
404
346 - return Observer(
347 - key: _addressObserverKey,
348 - builder: (_) {
349 - return Container(
350 - width: cardWidth,
351 - height: cardHeight,
352 - alignment: Alignment.topCenter,
353 - child: Stack(
354 - alignment: Alignment.topRight,
355 - children: <Widget>[
356 - Container(
357 - width: cardWidth,
358 - height: cardHeight,
359 - padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
360 - decoration: BoxDecoration(
361 - borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
362 - gradient: LinearGradient(
363 - colors: colorsSync,
364 - begin: Alignment.topCenter,
365 - end: Alignment.bottomCenter
366 - )
367 - ),
368 - child: Column(
369 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
370 - children: <Widget>[
371 - Row(
405 + return GestureDetector(
406 + onTap: () => rollCard(),
407 + child: Observer(
408 + key: _addressObserverKey,
409 + builder: (_) {
410 + return Container(
411 + width: cardWidth,
412 + height: cardHeight,
413 + alignment: Alignment.topCenter,
414 + child: Stack(
415 + alignment: Alignment.topRight,
416 + children: <Widget>[
417 + Container(
418 + width: cardWidth,
419 + height: cardHeight,
420 + padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
421 + decoration: BoxDecoration(
422 + borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
423 + gradient: LinearGradient(
424 + colors: colorsSync,
425 + begin: Alignment.topCenter,
426 + end: Alignment.bottomCenter
427 + )
428 + ),
429 + child: Column(
430 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
431 children: <Widget>[
373 - Expanded(
374 - child: Container(
375 - height: 90,
376 - child: Column(
377 - crossAxisAlignment: CrossAxisAlignment.start,
432 + Row(
433 + children: <Widget>[
434 + Expanded(
435 + child: Container(
436 + height: 90,
437 + child: Column(
438 + crossAxisAlignment: CrossAxisAlignment.start,
439 + children: <Widget>[
440 + Text(
441 + S.current.card_address,
442 + style: TextStyle(
443 + fontSize: 12,
444 + color: Theme.of(context).primaryTextTheme.caption.color
445 + ),
446 + ),
447 + GestureDetector(
448 + onTap: () {
449 + Clipboard.setData(ClipboardData(
450 + text: walletStore.subaddress.address));
451 + _addressObserverKey.currentState.setState(() {
452 + messageBoxHeight = 20;
453 + messageBoxWidth = cardWidth;
454 + });
455 + Timer(Duration(milliseconds: 1000), () {
456 + try {
457 + _addressObserverKey.currentState.setState(() {
458 + messageBoxHeight = 0;
459 + messageBoxWidth = cardWidth;
460 + });
461 + } catch(e) {
462 + print('${e.toString()}');
463 + }
464 + });
465 + },
466 + child: Padding(
467 + padding: EdgeInsets.only(top: 5),
468 + child: Text(
469 + walletStore.subaddress.address,
470 + style: TextStyle(
471 + fontSize: 12,
472 + color: Theme.of(context).primaryTextTheme.title.color
473 + ),
474 + ),
475 + ),
476 + )
477 + ],
478 + ),
479 + )
480 + ),
481 + SizedBox(width: 10),
482 + Container(
483 + width: 90,
484 + height: 90,
485 + child: QrImage(
486 + data: walletStore.subaddress.address,
487 + backgroundColor: Colors.transparent,
488 + foregroundColor: Theme.of(context).primaryTextTheme.caption.color
489 + ),
490 + )
491 + ],
492 + ),
493 + Container(
494 + height: 44,
495 + padding: EdgeInsets.only(left: 20, right: 20),
496 + alignment: Alignment.center,
497 + decoration: BoxDecoration(
498 + borderRadius: BorderRadius.all(Radius.circular(22)),
499 + color: Theme.of(context).primaryTextTheme.overline.color
500 + ),
501 + child: InkWell(
502 + onTap: () => Navigator.of(context,
503 + rootNavigator: true)
504 + .pushNamed(Routes.receive),
505 + child: Row(
506 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
507 children: <Widget>[
508 Text(
380 - S.current.card_address,
509 + S.of(context).accounts_subaddresses,
510 style: TextStyle(
382 - fontSize: 12,
383 - color: Theme.of(context).primaryTextTheme.caption.color
511 + fontSize: 14,
512 + color: Theme.of(context).primaryTextTheme.title.color
513 ),
514 ),
386 - GestureDetector(
387 - onTap: () {
388 - Clipboard.setData(ClipboardData(
389 - text: walletStore.subaddress.address));
390 - _addressObserverKey.currentState.setState(() {
391 - messageBoxHeight = 20;
392 - messageBoxWidth = cardWidth;
393 - });
394 - Timer(Duration(milliseconds: 1000), () {
395 - try {
396 - _addressObserverKey.currentState.setState(() {
397 - messageBoxHeight = 0;
398 - messageBoxWidth = cardWidth;
399 - });
400 - } catch(e) {
401 - print('${e.toString()}');
402 - }
403 - });
404 - },
405 - child: Padding(
406 - padding: EdgeInsets.only(top: 5),
407 - child: Text(
408 - walletStore.subaddress.address,
409 - style: TextStyle(
410 - fontSize: 12,
411 - color: Theme.of(context).primaryTextTheme.title.color
412 - ),
413 - ),
414 - ),
415 - )
515 + rightArrow
516 ],
517 ),
418 - )
419 - ),
420 - SizedBox(width: 10),
421 - Container(
422 - width: 90,
423 - height: 90,
424 - child: QrImage(
425 - data: walletStore.subaddress.address,
426 - backgroundColor: Colors.transparent,
427 - foregroundColor: Theme.of(context).primaryTextTheme.caption.color
518 ),
519 )
520 ],
521 ),
432 - Container(
433 - height: 44,
434 - padding: EdgeInsets.only(left: 20, right: 20),
435 - alignment: Alignment.center,
436 - decoration: BoxDecoration(
437 - borderRadius: BorderRadius.all(Radius.circular(22)),
438 - color: Theme.of(context).primaryTextTheme.overline.color
439 - ),
440 - child: InkWell(
441 - onTap: () => Navigator.of(context,
442 - rootNavigator: true)
443 - .pushNamed(Routes.receive),
444 - child: Row(
445 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
446 - children: <Widget>[
447 - Text(
448 - S.of(context).accounts_subaddresses,
449 - style: TextStyle(
450 - fontSize: 14,
451 - color: Theme.of(context).primaryTextTheme.title.color
452 - ),
453 - ),
454 - rightArrow
455 - ],
456 - ),
522 + ),
523 + AnimatedContainer(
524 + width: messageBoxWidth,
525 + height: messageBoxHeight,
526 + alignment: Alignment.center,
527 + duration: Duration(milliseconds: 500),
528 + curve: Curves.fastOutSlowIn,
529 + decoration: BoxDecoration(
530 + borderRadius: BorderRadius.only(topLeft: Radius.circular(10)),
531 + color: Colors.green
532 + ),
533 + child: Text(
534 + S.of(context).copied_to_clipboard,
535 + style: TextStyle(
536 + fontSize: 10,
537 + color: Colors.white
538 ),
458 - )
459 - ],
460 - ),
539 + ),
540 + )
541 + ],
542 ),
462 - AnimatedContainer(
463 - width: messageBoxWidth,
464 - height: messageBoxHeight,
465 - alignment: Alignment.center,
466 - duration: Duration(milliseconds: 500),
467 - curve: Curves.fastOutSlowIn,
468 - decoration: BoxDecoration(
469 - borderRadius: BorderRadius.only(topLeft: Radius.circular(10)),
470 - color: Colors.green
471 - ),
472 - child: Text(
473 - S.of(context).copied_to_clipboard,
474 - style: TextStyle(
475 - fontSize: 10,
476 - color: Colors.white
477 - ),
478 - ),
479 - )
480 - ],
481 - ),
482 - );
483 - }
543 + );
544 + }
545 + ),
546 );
547 }
548 }
\ No newline at end of file