From 8dbefd87fe58fd56aa4ac81a24fab5a9a8605302 Mon Sep 17 00:00:00 2001 From: julian Date: Mon, 27 Feb 2023 10:37:41 -0600 Subject: [PATCH] eth token summary layout and style --- assets/svg/cc.svg | 11 ++ .../token_view/sub_widgets/token_summary.dart | 166 +++++++++++++++--- lib/pages/token_view/token_view.dart | 20 +-- lib/utilities/assets.dart | 1 + pubspec.yaml | 1 + 5 files changed, 165 insertions(+), 34 deletions(-) create mode 100644 assets/svg/cc.svg diff --git a/assets/svg/cc.svg b/assets/svg/cc.svg new file mode 100644 index 000000000..646ae64ce --- /dev/null +++ b/assets/svg/cc.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/pages/token_view/sub_widgets/token_summary.dart b/lib/pages/token_view/sub_widgets/token_summary.dart index 28abdda8a..e080c7d67 100644 --- a/lib/pages/token_view/sub_widgets/token_summary.dart +++ b/lib/pages/token_view/sub_widgets/token_summary.dart @@ -1,8 +1,12 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:stackwallet/pages/token_view/token_view.dart'; import 'package:stackwallet/providers/global/wallets_provider.dart'; +import 'package:stackwallet/utilities/assets.dart'; +import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/widgets/rounded_container.dart'; class TokenSummary extends ConsumerWidget { @@ -15,37 +19,157 @@ class TokenSummary extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final token = + ref.watch(tokenServiceProvider.select((value) => value!.token)); + final balance = + ref.watch(tokenServiceProvider.select((value) => value!.balance)); + return RoundedContainer( color: const Color(0xFFE9EAFF), // todo: fix color // color: Theme.of(context).extension()!., - + padding: const EdgeInsets.all(24), child: Column( children: [ - Text( - ref.watch( - walletsChangeNotifierProvider.select( - (value) => value.getManager(walletId).walletName, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SvgPicture.asset( + Assets.svg.walletDesktop, + color: const Color(0xFF8488AB), // todo: fix color + width: 12, + height: 12, ), - ), - style: STextStyles.label(context), - ), - Text( - ref.watch(tokenServiceProvider.select((value) => value!.balance - .getTotal() - .toStringAsFixed(ref.watch(tokenServiceProvider - .select((value) => value!.token.decimals))))), - style: STextStyles.label(context), - ), - Text( - ref.watch( - walletsChangeNotifierProvider.select( - (value) => value.getManager(walletId).walletName, + const SizedBox( + width: 6, ), - ), - style: STextStyles.label(context), + Text( + ref.watch( + walletsChangeNotifierProvider.select( + (value) => value.getManager(walletId).walletName, + ), + ), + style: STextStyles.w500_12(context).copyWith( + color: const Color(0xFF8488AB), // todo: fix color + ), + ), + ], ), + const SizedBox( + height: 6, + ), + Text( + "${balance.getTotal()}" + " ${token.symbol}", + style: STextStyles.pageTitleH1(context), + ), + const SizedBox( + height: 6, + ), + Text( + "FIXME: price", + style: STextStyles.subtitle500(context), + ), + const SizedBox( + height: 20, + ), + const TokenWalletOptions(), ], ), ); } } + +class TokenWalletOptions extends StatelessWidget { + const TokenWalletOptions({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + TokenOptionsButton( + onPressed: () {}, + subLabel: "Receive", + iconAssetSVG: Assets.svg.receive(context), + ), + const SizedBox( + width: 16, + ), + TokenOptionsButton( + onPressed: () {}, + subLabel: "Receive", + iconAssetSVG: Assets.svg.send(context), + ), + const SizedBox( + width: 16, + ), + TokenOptionsButton( + onPressed: () {}, + subLabel: "Exchange", + iconAssetSVG: Assets.svg.exchange(context), + ), + const SizedBox( + width: 16, + ), + TokenOptionsButton( + onPressed: () {}, + subLabel: "Buy", + iconAssetSVG: Assets.svg.creditCard, + ), + ], + ); + } +} + +class TokenOptionsButton extends StatelessWidget { + const TokenOptionsButton({ + Key? key, + required this.onPressed, + required this.subLabel, + required this.iconAssetSVG, + }) : super(key: key); + + final VoidCallback onPressed; + final String subLabel; + final String iconAssetSVG; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + RawMaterialButton( + fillColor: Theme.of(context).extension()!.popupBG, + elevation: 0, + focusElevation: 0, + hoverElevation: 0, + highlightElevation: 0, + constraints: const BoxConstraints(), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: onPressed, + child: Padding( + padding: const EdgeInsets.all(10), + child: SvgPicture.asset( + iconAssetSVG, + color: const Color(0xFF424A97), // todo: fix color + width: 24, + height: 24, + ), + ), + ), + const SizedBox( + height: 6, + ), + Text( + subLabel, + style: STextStyles.w500_12(context), + ) + ], + ); + } +} diff --git a/lib/pages/token_view/token_view.dart b/lib/pages/token_view/token_view.dart index 4160650bf..5d7396e88 100644 --- a/lib/pages/token_view/token_view.dart +++ b/lib/pages/token_view/token_view.dart @@ -2,6 +2,7 @@ import 'package:event_bus/event_bus.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/pages/token_view/sub_widgets/token_summary.dart'; import 'package:stackwallet/pages/token_view/sub_widgets/token_transaction_list_widget.dart'; import 'package:stackwallet/pages/wallet_view/transaction_views/all_transactions_view.dart'; import 'package:stackwallet/services/ethereum/ethereum_token_service.dart'; @@ -98,19 +99,12 @@ class _TokenViewState extends ConsumerState { const SizedBox( height: 10, ), - // Center( - // child: Padding( - // padding: const EdgeInsets.symmetric(horizontal: 16), - // child: TokenSummary( - // walletId: widget.walletId, - // managerProvider: managerProvider, - // initialSyncStatus: ref.watch(managerProvider - // .select((value) => value.isRefreshing)) - // ? WalletSyncStatus.syncing - // : WalletSyncStatus.synced, - // ), - // ), - // ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 16), + child: TokenSummary( + walletId: widget.walletId, + ), + ), const SizedBox( height: 20, ), diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index 38d09c131..262875cee 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -210,6 +210,7 @@ class _SVG { String get faceId => "assets/svg/faceid.svg"; String get tokens => "assets/svg/tokens.svg"; String get circlePlusDark => "assets/svg/circle-plus.svg"; + String get creditCard => "assets/svg/cc.svg"; String get ellipse1 => "assets/svg/Ellipse-43.svg"; String get ellipse2 => "assets/svg/Ellipse-42.svg"; diff --git a/pubspec.yaml b/pubspec.yaml index bf92ed314..e6b7ec266 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -310,6 +310,7 @@ flutter: - assets/svg/whirlpool.svg - assets/svg/fingerprint.svg - assets/svg/faceid.svg + - assets/svg/cc.svg # light theme coin - assets/images/light/