diff --git a/assets/images/2.0x/triangle.png b/assets/images/2.0x/triangle.png new file mode 100644 index 000000000..1a7baf26d Binary files /dev/null and b/assets/images/2.0x/triangle.png differ diff --git a/assets/images/3.0x/triangle.png b/assets/images/3.0x/triangle.png new file mode 100644 index 000000000..2813c9443 Binary files /dev/null and b/assets/images/3.0x/triangle.png differ diff --git a/assets/images/triangle.png b/assets/images/triangle.png new file mode 100644 index 000000000..0c48a2465 Binary files /dev/null and b/assets/images/triangle.png differ diff --git a/lib/palette.dart b/lib/palette.dart index d4d915a02..382ddebff 100644 --- a/lib/palette.dart +++ b/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); } \ No newline at end of file diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 5a54eb204..5fa659976 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/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 { @override Widget build(BuildContext context) { - final balanceStore = Provider.of(context); + final List colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd]; + + return SafeArea( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: colors + ) + ), + child: Column( + children: [ + Padding( + padding: EdgeInsets.only(left: 20, top: 78), + child: WalletCard(), + ) + ], + ), + ), + ); + + /*final balanceStore = Provider.of(context); final actionListStore = Provider.of(context); final syncStore = Provider.of(context); final settingsStore = Provider.of(context); @@ -593,6 +616,6 @@ class DashboardPageBodyState extends State { return Container(); }); - }); + });*/ } } diff --git a/lib/src/screens/dashboard/widgets/wallet_card.dart b/lib/src/screens/dashboard/widgets/wallet_card.dart new file mode 100644 index 000000000..0bf8ae34d --- /dev/null +++ b/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 { + final _syncingObserverKey = GlobalKey(); + final triangleButton = Image.asset('assets/images/triangle.png'); + + final List 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(context); + final walletStore = Provider.of(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: [ + 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: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + InkWell( + onTap: (){print('TAP 2');}, + child: Row( + children: [ + 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: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + statusText, + style: TextStyle( + fontSize: 12 + ), + ), + SizedBox(height: 5), + Text( + descriptionText, + style: TextStyle( + fontSize: 14 + ), + ) + ], + ), + Text( + walletStore.account.label + ) + ], + ) + ], + ), + ) + ) + ], + ), + ); + }, + ) + ) + : Offstage(), + ), + ); + } +} \ No newline at end of file