From 7e6edd4dab91da6e99a376491d85b38c60a6dfdd Mon Sep 17 00:00:00 2001 From: julian Date: Thu, 13 Oct 2022 13:07:48 -0600 Subject: [PATCH] desktop basic wallet layout ui --- .../my_stack_view/coin_wallets_table.dart | 7 + .../wallet_view/desktop_wallet_view.dart | 294 ++++++++++++++++++ lib/route_generator.dart | 15 + .../wallet_info_row/wallet_info_row.dart | 70 +++-- 4 files changed, 355 insertions(+), 31 deletions(-) create mode 100644 lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart diff --git a/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart b/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart index 64e4a23d3..b16a9bc58 100644 --- a/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart +++ b/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart'; @@ -37,6 +38,12 @@ class CoinWalletsTable extends ConsumerWidget { ), WalletInfoRow( walletId: walletIds[i], + onPressed: () async { + await Navigator.of(context).pushNamed( + DesktopWalletView.routeName, + arguments: walletIds[i], + ); + }, ), ], ), diff --git a/lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart b/lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart new file mode 100644 index 000000000..785b94dc4 --- /dev/null +++ b/lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart @@ -0,0 +1,294 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/providers/providers.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart'; +import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; +import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; +import 'package:stackwallet/widgets/desktop/secondary_button.dart'; +import 'package:stackwallet/widgets/rounded_white_container.dart'; + +class DesktopWalletView extends ConsumerStatefulWidget { + const DesktopWalletView({ + Key? key, + required this.walletId, + }) : super(key: key); + + static const String routeName = "/desktopWalletView"; + + final String walletId; + + @override + ConsumerState createState() => _DesktopWalletViewState(); +} + +class _DesktopWalletViewState extends ConsumerState { + late final String walletId; + + Future onBackPressed() async { + // TODO log out and close wallet before popping back + Navigator.of(context).pop(); + } + + @override + void initState() { + walletId = widget.walletId; + super.initState(); + } + + @override + Widget build(BuildContext context) { + final manager = ref.watch(walletsChangeNotifierProvider + .select((value) => value.getManager(walletId))); + final coin = manager.coin; + + return DesktopScaffold( + appBar: DesktopAppBar( + background: Theme.of(context).extension()!.popupBG, + leading: Row( + children: [ + const SizedBox( + width: 32, + ), + AppBarIconButton( + size: 32, + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + shadows: const [], + icon: SvgPicture.asset( + Assets.svg.arrowLeft, + width: 18, + height: 18, + color: Theme.of(context) + .extension()! + .topNavIconPrimary, + ), + onPressed: onBackPressed, + ), + const SizedBox( + width: 15, + ), + SvgPicture.asset( + Assets.svg.iconFor(coin: coin), + width: 32, + height: 32, + ), + const SizedBox( + width: 12, + ), + Text( + manager.walletName, + style: STextStyles.desktopH3(context), + ), + ], + ), + trailing: Row( + children: const [ + NetworkInfoButton(), + SizedBox( + width: 12, + ), + WalletKeysButton(), + SizedBox( + width: 32, + ), + ], + ), + isCompactHeight: true, + ), + body: Padding( + padding: const EdgeInsets.all(24), + child: Column( + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(20), + child: Row( + children: [ + SvgPicture.asset( + Assets.svg.iconFor(coin: coin), + width: 40, + height: 40, + ), + const SizedBox( + width: 10, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Text( + "TODO: balance", + style: STextStyles.desktopH3(context), + ), + const SizedBox( + width: 8, + ), + Container( + color: Colors.red, + width: 20, + height: 20, + ), + ], + ), + Text( + "todo: fiat balance", + style: + STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textSubtitle1, + ), + ) + ], + ), + const Spacer(), + SecondaryButton( + width: 180, + height: 56, + onPressed: () { + // todo: go to wallet initiated exchange + }, + label: "Exchange", + icon: Container( + color: Colors.red, + width: 20, + height: 20, + ), + ) + ], + ), + ), + const SizedBox( + height: 24, + ), + Expanded( + child: Row( + children: const [ + Expanded( + child: MyWallet(), + ), + SizedBox( + width: 16, + ), + Expanded( + child: RecentDesktopTransactions(), + ), + ], + ), + ), + ], + ), + ), + ); + } +} + +class MyWallet extends StatefulWidget { + const MyWallet({Key? key}) : super(key: key); + + @override + State createState() => _MyWalletState(); +} + +class _MyWalletState extends State { + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "My wallet", + style: STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconLeft, + ), + ), + const SizedBox( + height: 16, + ), + Expanded( + child: RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: Container(), + ), + ), + ], + ); + } +} + +class RecentDesktopTransactions extends StatefulWidget { + const RecentDesktopTransactions({Key? key}) : super(key: key); + + @override + State createState() => + _RecentDesktopTransactionsState(); +} + +class _RecentDesktopTransactionsState extends State { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Recent transactions", + style: STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textFieldActiveSearchIconLeft, + ), + ), + BlueTextButton( + text: "See all", + onTap: () { + // todo: show all txns + }, + ), + ], + ), + const SizedBox( + height: 16, + ), + Expanded( + child: RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: Container(), + ), + ), + ], + ); + } +} + +class NetworkInfoButton extends StatelessWidget { + const NetworkInfoButton({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + child: Text("todo: sync status"), + ); + } +} + +class WalletKeysButton extends StatelessWidget { + const WalletKeysButton({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + child: Text("todo: wallet keys"), + ); + } +} diff --git a/lib/route_generator.dart b/lib/route_generator.dart index 834432a69..b4ca9ef92 100644 --- a/lib/route_generator.dart +++ b/lib/route_generator.dart @@ -86,6 +86,7 @@ import 'package:stackwallet/pages_desktop_specific/create_password/create_passwo import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart'; import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart'; import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart'; +import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart'; import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart'; import 'package:stackwallet/services/coins/manager.dart'; import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart'; @@ -969,6 +970,20 @@ class RouteGenerator { builder: (_) => const MyStackView(), settings: RouteSettings(name: settings.name)); + case DesktopWalletView.routeName: + if (args is String) { + return getRoute( + shouldUseMaterialRoute: useMaterialPageRoute, + builder: (_) => DesktopWalletView( + walletId: args, + ), + settings: RouteSettings( + name: settings.name, + ), + ); + } + return _routeError("${settings.name} invalid args: ${args.toString()}"); + case SettingsMenu.routeName: return getRoute( shouldUseMaterialRoute: useMaterialPageRoute, diff --git a/lib/widgets/wallet_info_row/wallet_info_row.dart b/lib/widgets/wallet_info_row/wallet_info_row.dart index 4840e9b01..d5e42e814 100644 --- a/lib/widgets/wallet_info_row/wallet_info_row.dart +++ b/lib/widgets/wallet_info_row/wallet_info_row.dart @@ -25,9 +25,13 @@ class WalletInfoRow extends ConsumerWidget { .watch(walletsChangeNotifierProvider.notifier) .getManagerProvider(walletId)); - return Row( - children: Util.isDesktop - ? [ + if (Util.isDesktop) { + return GestureDetector( + onTap: onPressed, + child: Container( + color: Colors.transparent, + child: Row( + children: [ Expanded( flex: 4, child: Row( @@ -38,11 +42,9 @@ class WalletInfoRow extends ConsumerWidget { ), Text( manager.walletName, - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark, + style: STextStyles.desktopTextExtraSmall(context).copyWith( + color: + Theme.of(context).extension()!.textDark, ), ), ], @@ -70,29 +72,35 @@ class WalletInfoRow extends ConsumerWidget { ], ), ) - ] - : [ - WalletInfoCoinIcon(coin: manager.coin), - const SizedBox( - width: 12, - ), - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - manager.walletName, - style: STextStyles.titleBold12(context), - ), - const SizedBox( - height: 2, - ), - WalletInfoRowBalanceFuture(walletId: walletId), - ], - ), - ), ], - ); + ), + ), + ); + } else { + return Row( + children: [ + WalletInfoCoinIcon(coin: manager.coin), + const SizedBox( + width: 12, + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + manager.walletName, + style: STextStyles.titleBold12(context), + ), + const SizedBox( + height: 2, + ), + WalletInfoRowBalanceFuture(walletId: walletId), + ], + ), + ), + ], + ); + } } }