CWA-198 | created front and back sides of wallet card

lib/generated/i18n.dart

@@ -40,6 +40,7 @@ class S implements WidgetsLocalizations {
   String get available_balance => "Available Balance";
   String get biometric_auth_reason => "Scan your fingerprint to authenticate";
   String get cancel => "Cancel";
+  String get card_address => "Address:";
   String get change => "Change";
   String get change_currency => "Change Currency";
   String get change_exchange_provider => "Change Exchange Provider";
@@ -362,6 +363,8 @@ class $de extends S {
   @override
   String get wallet_list_create_new_wallet => "Neue Wallet erstellen";
   @override
+  String get card_address => "Adresse:";
+  @override
   String get seed_language_portuguese => "Portugiesisch";
   @override
   String get setup_pin => "PIN einrichten";
@@ -930,6 +933,8 @@ class $hi extends S {
   @override
   String get wallet_list_create_new_wallet => "नया बटुआ बनाएँ";
   @override
+  String get card_address => "पता:";
+  @override
   String get seed_language_portuguese => "पुर्तगाली";
   @override
   String get setup_pin => "पिन सेट करें";
@@ -1498,6 +1503,8 @@ class $ru extends S {
   @override
   String get wallet_list_create_new_wallet => "Создать новый кошелёк";
   @override
+  String get card_address => "Адрес:";
+  @override
   String get seed_language_portuguese => "Португальский";
   @override
   String get setup_pin => "Настроить PIN";
@@ -2066,6 +2073,8 @@ class $ko extends S {
   @override
   String get wallet_list_create_new_wallet => "새 월렛 만들기";
   @override
+  String get card_address => "주소:";
+  @override
   String get seed_language_portuguese => "포르투갈 인";
   @override
   String get setup_pin => "설정 PIN";
@@ -2634,6 +2643,8 @@ class $pt extends S {
   @override
   String get wallet_list_create_new_wallet => "Criar nova carteira";
   @override
+  String get card_address => "Endereço:";
+  @override
   String get seed_language_portuguese => "Português";
   @override
   String get setup_pin => "Configurar PIN";
@@ -3202,6 +3213,8 @@ class $uk extends S {
   @override
   String get wallet_list_create_new_wallet => "Створити новий гаманець";
   @override
+  String get card_address => "Адреса:";
+  @override
   String get seed_language_portuguese => "Португальська";
   @override
   String get setup_pin => "Встановити PIN";
@@ -3770,6 +3783,8 @@ class $ja extends S {
   @override
   String get wallet_list_create_new_wallet => "新しいウォレットを作成";
   @override
+  String get card_address => "住所:";
+  @override
   String get seed_language_portuguese => "ポルトガル語";
   @override
   String get setup_pin => "PINのセットアップ";
@@ -4342,6 +4357,8 @@ class $pl extends S {
   @override
   String get wallet_list_create_new_wallet => "Utwórz nowy portfel";
   @override
+  String get card_address => "Adres:";
+  @override
   String get seed_language_portuguese => "Portugalski";
   @override
   String get setup_pin => "Ustaw PIN";
@@ -4910,6 +4927,8 @@ class $es extends S {
   @override
   String get wallet_list_create_new_wallet => "Crear nueva billetera";
   @override
+  String get card_address => "Dirección:";
+  @override
   String get seed_language_portuguese => "Portugués";
   @override
   String get setup_pin => "PIN de configuración";
@@ -5478,6 +5497,8 @@ class $nl extends S {
   @override
   String get wallet_list_create_new_wallet => "Maak een nieuwe portemonnee";
   @override
+  String get card_address => "Adres:";
+  @override
   String get seed_language_portuguese => "Portugees";
   @override
   String get setup_pin => "PIN instellen";
@@ -6046,6 +6067,8 @@ class $zh extends S {
   @override
   String get wallet_list_create_new_wallet => "创建新钱包";
   @override
+  String get card_address => "地址:";
+  @override
   String get seed_language_portuguese => "葡萄牙語";
   @override
   String get setup_pin => "设定PIN码";

lib/palette.dart

@@ -78,4 +78,8 @@ class PaletteDark {
   static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
   static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);
   static const Color walletCardBottomEndSync = Color.fromRGBO(45, 56, 95, 1.0);
+  static const Color walletCardText = Color.fromRGBO(140, 153, 201, 1.0);
+  static const Color walletCardAddressField = Color.fromRGBO(51, 63, 104, 1.0);
+  static const Color walletCardAddressText = Color.fromRGBO(183, 197, 242, 1.0);
+  static const Color walletCardSubAddressField = Color.fromRGBO(63, 77, 122, 1.0);
 }

lib/src/screens/dashboard/dashboard_page.dart

@@ -114,12 +114,12 @@ class DashboardPageBody extends StatefulWidget {
 }
 
 class DashboardPageBodyState extends State<DashboardPageBody> {
-  final _connectionStatusObserverKey = GlobalKey();
+  /*final _connectionStatusObserverKey = GlobalKey();
   final _balanceObserverKey = GlobalKey();
   final _balanceTitleObserverKey = GlobalKey();
   final _syncingObserverKey = GlobalKey();
   final _listObserverKey = GlobalKey();
-  final _listKey = GlobalKey();
+  final _listKey = GlobalKey();*/
 
   @override
   Widget build(BuildContext context) {

lib/src/screens/dashboard/widgets/wallet_card.dart

@@ -1,12 +1,18 @@
+import 'dart:async';
+import 'package:cake_wallet/src/domain/common/balance_display_mode.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+import 'package:cake_wallet/src/stores/balance/balance_store.dart';
+import 'package:cake_wallet/src/stores/settings/settings_store.dart';
 import 'package:cake_wallet/src/stores/sync/sync_store.dart';
 import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/palette.dart';
-import 'package:provider/provider.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/domain/common/sync_status.dart';
+import 'package:cake_wallet/src/screens/receive/qr_image.dart';
 
 class WalletCard extends StatefulWidget {
   @override
@@ -15,18 +21,25 @@ class WalletCard extends StatefulWidget {
 
 class WalletCardState extends State<WalletCard> {
   final _syncingObserverKey = GlobalKey();
-  final triangleButton = Image.asset('assets/images/triangle.png');
+  final _balanceObserverKey = GlobalKey();
+  final _addressObserverKey = GlobalKey();
 
   final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
   double cardWidth;
+  double cardHeight;
   double screenWidth;
   double opacity;
+  bool isDraw;
+  bool isFrontSide;
 
   @override
   void initState() {
     cardWidth = 0;
+    cardHeight = 220;
     screenWidth = 0;
     opacity = 0;
+    isDraw = false;
+    isFrontSide = true;
     super.initState();
     WidgetsBinding.instance.addPostFrameCallback(afterLayout);
   }
@@ -37,21 +50,21 @@ class WalletCardState extends State<WalletCard> {
       cardWidth = screenWidth;
       opacity = 1;
     });
+    Timer(Duration(milliseconds: 350), () =>
+        setState(() => isDraw = true)
+    );
   }
 
   @override
   Widget build(BuildContext context) {
-    final syncStore = Provider.of<SyncStore>(context);
-    final walletStore = Provider.of<WalletStore>(context);
-
     return Container(
       width: double.infinity,
-      height: 220,
+      height: cardHeight,
       alignment: Alignment.centerRight,
       child: AnimatedContainer(
         alignment: Alignment.centerLeft,
         width: cardWidth,
-        height: 220,
+        height: cardHeight,
         duration: Duration(milliseconds: 500),
         curve: Curves.fastOutSlowIn,
         decoration: BoxDecoration(
@@ -63,16 +76,32 @@ class WalletCardState extends State<WalletCard> {
                 end: Alignment.bottomCenter
             )
         ),
-        child: screenWidth > 0 && cardWidth == screenWidth
+        child: InkWell(
-        ? InkWell(
+          onTap: () => setState(() => isFrontSide = !isFrontSide),
-          onTap: (){print('TAP');},
+          child: isFrontSide
-          child: Observer(
+            ? frontSide()
+            : backSide()
+        ),
+      ),
+    );
+  }
+
+  Widget frontSide() {
+    final syncStore = Provider.of<SyncStore>(context);
+    final walletStore = Provider.of<WalletStore>(context);
+    final settingsStore = Provider.of<SettingsStore>(context);
+    final balanceStore = Provider.of<BalanceStore>(context);
+    final triangleButton = Image.asset('assets/images/triangle.png');
+
+    return Observer(
       key: _syncingObserverKey,
       builder: (_) {
         final status = syncStore.status;
         final statusText = status.title();
         final progress = syncStore.status.progress();
-              //final isFialure = status is FailedSyncStatus;
+
+        String shortAddress = walletStore.subaddress.address;
+        shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
 
         var descriptionText = '';
 
@@ -91,11 +120,11 @@ class WalletCardState extends State<WalletCard> {
 
         return Container(
           width: cardWidth,
-                height: 220,
+          height: cardHeight,
           child: Stack(
             children: <Widget>[
               Container(
-                      height: 220,
+                height: cardHeight,
                 width: progress * cardWidth,
                 decoration: BoxDecoration(
                     borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
@@ -106,7 +135,7 @@ class WalletCardState extends State<WalletCard> {
                     )
                 ),
               ),
-                    Positioned(
+              isDraw ? Positioned(
                   left: 20,
                   right: 20,
                   top: 30,
@@ -123,7 +152,7 @@ class WalletCardState extends State<WalletCard> {
                               crossAxisAlignment: CrossAxisAlignment.start,
                               children: <Widget>[
                                 InkWell(
-                                        onTap: (){print('TAP 2');},
+                                  onTap: () {print('TAP 2');},
                                   child: Row(
                                     children: <Widget>[
                                       Text(
@@ -144,17 +173,92 @@ class WalletCardState extends State<WalletCard> {
                                 Text(
                                   walletStore.account.label,
                                   style: TextStyle(
-                                            fontSize: 12
+                                      fontSize: 12,
+                                      color: PaletteDark.walletCardText
+                                  ),
+                                )
+                              ],
+                            ),
+                            Container(
+                              width: 98,
+                              height: 32,
+                              alignment: Alignment.center,
+                              decoration: BoxDecoration(
+                                  color: PaletteDark.walletCardAddressField,
+                                  borderRadius: BorderRadius.all(Radius.circular(16))
+                              ),
+                              child: Text(
+                                shortAddress,
+                                style: TextStyle(
+                                    fontSize: 12,
+                                    color: PaletteDark.walletCardAddressText
+                                ),
+                              ),
+                            )
+                          ],
+                        ),
+                        status is SyncedSyncStatus
+                            ? Observer(
+                            key: _balanceObserverKey,
+                            builder: (_) {
+                              final balanceDisplayMode = settingsStore.balanceDisplayMode;
+                              final symbol = settingsStore
+                                  .fiatCurrency
+                                  .toString();
+                              var balance = '---';
+                              var fiatBalance = '---';
+
+                              if (balanceDisplayMode ==
+                                  BalanceDisplayMode.availableBalance) {
+                                balance =
+                                    balanceStore.unlockedBalance ??
+                                        '0.0';
+                                fiatBalance =
+                                '$symbol ${balanceStore.fiatUnlockedBalance}';
+                              }
+
+                              if (balanceDisplayMode ==
+                                  BalanceDisplayMode.fullBalance) {
+                                balance =
+                                    balanceStore.fullBalance ?? '0.0';
+                                fiatBalance =
+                                '$symbol ${balanceStore.fiatFullBalance}';
+                              }
+
+                              return Row(
+                                crossAxisAlignment: CrossAxisAlignment.end,
+                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                children: <Widget>[
+                                  Column(
+                                    crossAxisAlignment: CrossAxisAlignment.start,
+                                    children: <Widget>[
+                                      Text(
+                                        balanceDisplayMode.toString(),
+                                        style: TextStyle(
+                                            fontSize: 12,
+                                            color: PaletteDark.walletCardText
+                                        ),
+                                      ),
+                                      SizedBox(height: 5),
+                                      Text(
+                                        balance,
+                                        style: TextStyle(
+                                            fontSize: 28
                                         ),
                                       )
                                     ],
                                   ),
                                   Text(
-                                      walletStore.account.label
+                                    fiatBalance,
+                                    style: TextStyle(
+                                        fontSize: 14
+                                    ),
                                   )
                                 ],
-                              ),
+                              );
-                              Row(
+                            }
+                          )
+                          : Row(
                           crossAxisAlignment: CrossAxisAlignment.end,
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: <Widget>[
@@ -164,7 +268,8 @@ class WalletCardState extends State<WalletCard> {
                                 Text(
                                   statusText,
                                   style: TextStyle(
-                                          fontSize: 12
+                                      fontSize: 12,
+                                      color: PaletteDark.walletCardText
                                   ),
                                 ),
                                 SizedBox(height: 5),
@@ -175,9 +280,6 @@ class WalletCardState extends State<WalletCard> {
                                   ),
                                 )
                               ],
-                                  ),
-                                  Text(
-                                      walletStore.account.label
                             )
                           ],
                         )
@@ -185,14 +287,144 @@ class WalletCardState extends State<WalletCard> {
                     ),
                   )
               )
+              : Offstage()
             ],
           ),
         );
       },
+    );
+  }
+
+  Widget backSide() {
+    final walletStore = Provider.of<WalletStore>(context);
+    final rightArrow = Image.asset('assets/images/right_arrow.png');
+    double messageBoxHeight = 0;
+
+    return Observer(
+      key: _addressObserverKey,
+      builder: (_) {
+        return Container(
+          width: cardWidth,
+          height: cardHeight,
+          alignment: Alignment.topCenter,
+          child: Stack(
+            children: <Widget>[
+              Container(
+                width: cardWidth,
+                height: cardHeight,
+                padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
+                    gradient: LinearGradient(
+                        colors: colorsSync,
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter
                     )
+                ),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: <Widget>[
+                    Row(
+                      children: <Widget>[
+                        Expanded(
+                          child: Container(
+                            height: 72,
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: <Widget>[
+                                Text(
+                                  S.current.card_address,
+                                  style: TextStyle(
+                                      fontSize: 12,
+                                      color: PaletteDark.walletCardText
+                                  ),
+                                ),
+                                GestureDetector(
+                                  onTap: () {
+                                    Clipboard.setData(ClipboardData(
+                                        text: walletStore.subaddress.address));
+                                    _addressObserverKey.currentState.setState(() => messageBoxHeight = 20);
+                                    Timer(Duration(milliseconds: 1000), () {
+                                      try {
+                                        _addressObserverKey.currentState.setState(() => messageBoxHeight = 0);
+                                      } catch(e) {
+                                        print('${e.toString()}');
+                                      }
+                                    });
+                                  },
+                                  child: Text(
+                                    walletStore.subaddress.address,
+                                    style: TextStyle(
+                                        fontSize: 14,
+                                    ),
+                                  ),
                                 )
-        : Offstage(),
+                              ],
+                            ),
+                          )
+                        ),
+                        SizedBox(width: 20),
+                        Container(
+                          width: 72,
+                          height: 72,
+                          child: QrImage(
+                            data: walletStore.subaddress.address,
+                            backgroundColor: Colors.transparent,
+                            foregroundColor: PaletteDark.walletCardText,
+                          ),
+                        )
+                      ],
+                    ),
+                    Container(
+                      height: 44,
+                      padding: EdgeInsets.only(left: 20, right: 20),
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.all(Radius.circular(22)),
+                          color: PaletteDark.walletCardSubAddressField
+                      ),
+                      child: InkWell(
+                        onTap: () {},
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: <Widget>[
+                            Text(
+                              S.current.subaddresses,
+                              style: TextStyle(
+                                fontSize: 14,
+                              ),
+                            ),
+                            rightArrow
+                          ],
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              AnimatedContainer(
+                width: cardWidth,
+                height: messageBoxHeight,
+                alignment: Alignment.center,
+                duration: Duration(milliseconds: 500),
+                curve: Curves.fastOutSlowIn,
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.only(topLeft: Radius.circular(10)),
+                    color: Colors.green
+                ),
+                child: Text(
+                  S.of(context).copied_to_clipboard,
+                  style: TextStyle(
+                    fontSize: 10,
+                    color: Colors.white
+                  ),
+                ),
+              )
+            ],
           ),
         );
       }
+    );
+  }
 }

res/values/strings_de.arb

@@ -349,5 +349,7 @@
   "version" : "Ausführung ${currentVersion}",
 
   "openalias_alert_title" : "XMR-Empfänger erkannt",
-  "openalias_alert_content" : "Sie senden Geld an\n${recipient_name}"
+  "openalias_alert_content" : "Sie senden Geld an\n${recipient_name}",
+
+  "card_address" : "Adresse:"
 }

res/values/strings_en.arb

@@ -349,5 +349,7 @@
   "version" : "Version ${currentVersion}",
 
   "openalias_alert_title" : "XMR Recipient Detected",
-  "openalias_alert_content" : "You will be sending funds to\n${recipient_name}"
+  "openalias_alert_content" : "You will be sending funds to\n${recipient_name}",
+
+  "card_address" : "Address:"
 }

res/values/strings_es.arb

@@ -349,5 +349,7 @@
   "version" : "Versión ${currentVersion}",
 
   "openalias_alert_title" : "Destinatario XMR detectado",
-  "openalias_alert_content" : "Enviará fondos a\n${recipient_name}"
+  "openalias_alert_content" : "Enviará fondos a\n${recipient_name}",
+
+  "card_address" : "Dirección:"
 }

res/values/strings_hi.arb

@@ -349,5 +349,7 @@
   "version" : "संस्करण ${currentVersion}",
 
   "openalias_alert_title" : "XMR प्राप्तकर्ता का पता लगाया",
-  "openalias_alert_content" : "आपको धनराशि भेजी जाएगी\n${recipient_name}"
+  "openalias_alert_content" : "आपको धनराशि भेजी जाएगी\n${recipient_name}",
+
+  "card_address" : "पता:"
 }

res/values/strings_ja.arb

@@ -349,5 +349,7 @@
   "version" : "バージョン ${currentVersion}",
 
   "openalias_alert_title" : "XMR受信者が検出されました",
-  "openalias_alert_content" : "に送金します\n${recipient_name}"
+  "openalias_alert_content" : "に送金します\n${recipient_name}",
+
+  "card_address" : "住所:"
 }

res/values/strings_ko.arb

@@ -349,5 +349,7 @@
   "version" : "버전 ${currentVersion}",
 
   "openalias_alert_title" : "XMR 수신자 감지",
-  "openalias_alert_content" : "당신은에 자금을 보낼 것입니다\n${recipient_name}"
+  "openalias_alert_content" : "당신은에 자금을 보낼 것입니다\n${recipient_name}",
+
+  "card_address" : "주소:"
 }

res/values/strings_nl.arb

@@ -349,5 +349,7 @@
   "version" : "Versie ${currentVersion}",
 
   "openalias_alert_title" : "XMR-ontvanger gedetecteerd",
-  "openalias_alert_content" : "U stuurt geld naar\n${recipient_name}"
+  "openalias_alert_content" : "U stuurt geld naar\n${recipient_name}",
+
+  "card_address" : "Adres:"
 }

res/values/strings_pl.arb

@@ -349,5 +349,7 @@
   "version" : "Wersja ${currentVersion}",
 
   "openalias_alert_title" : "Wykryto odbiorcę XMR",
-  "openalias_alert_content" : "Będziesz wysyłać środki na\n${recipient_name}"
+  "openalias_alert_content" : "Będziesz wysyłać środki na\n${recipient_name}",
+
+  "card_address" : "Adres:"
 }

res/values/strings_pt.arb

@@ -349,5 +349,7 @@
   "version" : "Versão ${currentVersion}",
 
   "openalias_alert_title" : "Destinatário XMR detectado",
-  "openalias_alert_content" : "Você enviará fundos para\n${recipient_name}"
+  "openalias_alert_content" : "Você enviará fundos para\n${recipient_name}",
+
+  "card_address" : "Endereço:"
 }

res/values/strings_ru.arb

@@ -349,5 +349,7 @@
   "version" : "Версия ${currentVersion}",
 
   "openalias_alert_title" : "Получатель XMR обнаружен",
-  "openalias_alert_content" : "Вы будете отправлять средства\n${recipient_name}"
+  "openalias_alert_content" : "Вы будете отправлять средства\n${recipient_name}",
+
+  "card_address" : "Адрес:"
 }

res/values/strings_uk.arb

@@ -349,5 +349,7 @@
   "version" : "Версія ${currentVersion}",
 
   "openalias_alert_title" : "Отримувача XMR виявлено",
-  "openalias_alert_content" : "Ви будете відправляти кошти\n${recipient_name}"
+  "openalias_alert_content" : "Ви будете відправляти кошти\n${recipient_name}",
+
+  "card_address" : "Адреса:"
 }

res/values/strings_zh.arb

@@ -349,5 +349,7 @@
   "version" : "版 ${currentVersion}",
 
   "openalias_alert_title" : "檢測到XMR收件人",
-  "openalias_alert_content" : "您將匯款至\n${recipient_name}"
+  "openalias_alert_content" : "您將匯款至\n${recipient_name}",
+
+  "card_address" : "地址:"
 }