CWA-198 | created wallet card

lib/palette.dart

@@ -69,4 +69,13 @@ class PaletteDark {
   static const Color switchBackground = Color.fromRGBO(100, 115, 137, 0.4);
   static const Color wildDarkBlueWithOpacity = Color.fromRGBO(155, 172, 197, 0.4);
   static const Color wildDarkBlue = Color.fromRGBO(155, 172, 197, 0.8);
+
+  // NEW
+
+  static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
+  static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
+  static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
+  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);
 }

lib/src/screens/dashboard/dashboard_page.dart

@@ -24,11 +24,12 @@ import 'package:cake_wallet/src/screens/dashboard/transaction_raw.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
 
 class DashboardPage extends BasePage {
   final _bodyKey = GlobalKey();
 
-  @override
+  /*@override
   Widget leading(BuildContext context) {
     return SizedBox(
         width: 30,
@@ -75,12 +76,14 @@ class DashboardPage extends BasePage {
           child: Image.asset('assets/images/settings_icon.png',
               color: Colors.grey, height: 20)),
     );
-  }
+  }*/
+  @override
+  ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
 
   @override
   Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
 
-  @override
+  /*@override
   Widget floatingActionButton(BuildContext context) => FloatingActionButton(
       child: Image.asset('assets/images/exchange_icon.png',
           color: Colors.white, height: 26, width: 22),
@@ -100,7 +103,7 @@ class DashboardPage extends BasePage {
             onItemSelected: (String item) =>
                 walletMenu.action(walletMenu.items.indexOf(item))),
         context: bodyContext);
-  }
+  }*/
 }
 
 class DashboardPageBody extends StatefulWidget {
@@ -120,7 +123,27 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
 
   @override
   Widget build(BuildContext context) {
-    final balanceStore = Provider.of<BalanceStore>(context);
+    final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
+
+    return SafeArea(
+      child: Container(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            colors: colors
+          )
+        ),
+        child: Column(
+          children: <Widget>[
+            Padding(
+              padding: EdgeInsets.only(left: 20, top: 78),
+              child: WalletCard(),
+            )
+          ],
+        ),
+      ),
+    );
+
+    /*final balanceStore = Provider.of<BalanceStore>(context);
     final actionListStore = Provider.of<ActionListStore>(context);
     final syncStore = Provider.of<SyncStore>(context);
     final settingsStore = Provider.of<SettingsStore>(context);
@@ -593,6 +616,6 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
 
                 return Container();
               });
-        });
+        });*/
   }
 }

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

@@ -0,0 +1,198 @@
+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';
+
+class WalletCard extends StatefulWidget {
+  @override
+  WalletCardState createState() => WalletCardState();
+}
+
+class WalletCardState extends State<WalletCard> {
+  final _syncingObserverKey = GlobalKey();
+  final triangleButton = Image.asset('assets/images/triangle.png');
+
+  final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
+  double cardWidth;
+  double screenWidth;
+  double opacity;
+
+  @override
+  void initState() {
+    cardWidth = 0;
+    screenWidth = 0;
+    opacity = 0;
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback(afterLayout);
+  }
+
+  void afterLayout(dynamic _) {
+    screenWidth = MediaQuery.of(context).size.width;
+    setState(() {
+      cardWidth = screenWidth;
+      opacity = 1;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final syncStore = Provider.of<SyncStore>(context);
+    final walletStore = Provider.of<WalletStore>(context);
+
+    return Container(
+      width: double.infinity,
+      height: 220,
+      alignment: Alignment.centerRight,
+      child: AnimatedContainer(
+        alignment: Alignment.centerLeft,
+        width: cardWidth,
+        height: 220,
+        duration: Duration(milliseconds: 500),
+        curve: Curves.fastOutSlowIn,
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
+            gradient: LinearGradient(
+                colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity),
+                         PaletteDark.walletCardBottomStartSync.withOpacity(opacity)],
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter
+            )
+        ),
+        child: screenWidth > 0 && cardWidth == screenWidth
+        ? InkWell(
+          onTap: (){print('TAP');},
+          child: Observer(
+            key: _syncingObserverKey,
+            builder: (_) {
+              final status = syncStore.status;
+              final statusText = status.title();
+              final progress = syncStore.status.progress();
+              //final isFialure = status is FailedSyncStatus;
+
+              var descriptionText = '';
+
+              if (status is SyncingSyncStatus) {
+                descriptionText = S
+                    .of(context)
+                    .Blocks_remaining(
+                    syncStore.status.toString());
+              }
+
+              if (status is FailedSyncStatus) {
+                descriptionText = S
+                    .of(context)
+                    .please_try_to_connect_to_another_node;
+              }
+
+              return Container(
+                width: cardWidth,
+                height: 220,
+                child: Stack(
+                  children: <Widget>[
+                    Container(
+                      height: 220,
+                      width: progress * cardWidth,
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
+                          gradient: LinearGradient(
+                              colors: colorsSync,
+                              begin: Alignment.topCenter,
+                              end: Alignment.bottomCenter
+                          )
+                      ),
+                    ),
+                    Positioned(
+                        left: 20,
+                        right: 20,
+                        top: 30,
+                        bottom: 30,
+                        child: Container(
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: <Widget>[
+                              Row(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                children: <Widget>[
+                                  Column(
+                                    crossAxisAlignment: CrossAxisAlignment.start,
+                                    children: <Widget>[
+                                      InkWell(
+                                        onTap: (){print('TAP 2');},
+                                        child: Row(
+                                          children: <Widget>[
+                                            Text(
+                                              walletStore.name,
+                                              style: TextStyle(
+                                                  fontSize: 20,
+                                                  fontWeight: FontWeight.bold
+                                              ),
+                                            ),
+                                            SizedBox(width: 10),
+                                            triangleButton
+                                          ],
+                                        ),
+                                      ),
+                                      SizedBox(
+                                        height: 5,
+                                      ),
+                                      Text(
+                                        walletStore.account.label,
+                                        style: TextStyle(
+                                            fontSize: 12
+                                        ),
+                                      )
+                                    ],
+                                  ),
+                                  Text(
+                                      walletStore.account.label
+                                  )
+                                ],
+                              ),
+                              Row(
+                                crossAxisAlignment: CrossAxisAlignment.end,
+                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                                children: <Widget>[
+                                  Column(
+                                    crossAxisAlignment: CrossAxisAlignment.start,
+                                    children: <Widget>[
+                                      Text(
+                                        statusText,
+                                        style: TextStyle(
+                                          fontSize: 12
+                                        ),
+                                      ),
+                                      SizedBox(height: 5),
+                                      Text(
+                                        descriptionText,
+                                        style: TextStyle(
+                                          fontSize: 14
+                                        ),
+                                      )
+                                    ],
+                                  ),
+                                  Text(
+                                      walletStore.account.label
+                                  )
+                                ],
+                              )
+                            ],
+                          ),
+                        )
+                    )
+                  ],
+                ),
+              );
+            },
+          )
+        )
+        : Offstage(),
+      ),
+    );
+  }
+}