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 new file mode 100644 index 000000000..13e360d8f --- /dev/null +++ b/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/utilities/cfcolors.dart'; +import 'package:stackwallet/utilities/constants.dart'; +import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart'; + +class CoinWalletsTable extends ConsumerWidget { + const CoinWalletsTable({ + Key? key, + required this.walletIds, + }) : super(key: key); + + final List walletIds; + + @override + Widget build(BuildContext context, WidgetRef ref) { + return Container( + decoration: BoxDecoration( + color: CFColors.background, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 20, + vertical: 16, + ), + child: Column( + children: [ + for (int i = 0; i < walletIds.length; i++) + WalletInfoRow( + walletId: walletIds[i], + ), + ], + ), + ), + ); + } +} diff --git a/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart b/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart index 01e95259e..3c888e949 100644 --- a/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart +++ b/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_table.dart'; +import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart'; import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart'; @@ -61,7 +61,7 @@ class _MyWalletsState extends State { const SizedBox( height: 20, ), - const WalletTable(), + const WalletSummaryTable(), ], ), ), diff --git a/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart b/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart new file mode 100644 index 000000000..e8aec902e --- /dev/null +++ b/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart @@ -0,0 +1,154 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart'; +import 'package:stackwallet/providers/providers.dart'; +import 'package:stackwallet/utilities/cfcolors.dart'; +import 'package:stackwallet/utilities/constants.dart'; +import 'package:stackwallet/utilities/enums/coin_enum.dart'; +import 'package:stackwallet/utilities/format.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/widgets/table_view/table_view.dart'; +import 'package:stackwallet/widgets/table_view/table_view_cell.dart'; +import 'package:stackwallet/widgets/table_view/table_view_row.dart'; + +class WalletSummaryTable extends ConsumerStatefulWidget { + const WalletSummaryTable({Key? key}) : super(key: key); + + @override + ConsumerState createState() => _WalletTableState(); +} + +class _WalletTableState extends ConsumerState { + @override + Widget build(BuildContext context) { + final providersByCoin = ref + .watch( + walletsChangeNotifierProvider.select( + (value) => value.getManagerProvidersByCoin(), + ), + ) + .entries + .toList(growable: false); + + return TableView( + rows: [ + for (int i = 0; i < providersByCoin.length; i++) + TableViewRow( + padding: const EdgeInsets.symmetric( + horizontal: 20, + vertical: 16, + ), + decoration: BoxDecoration( + color: CFColors.background, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + cells: [ + TableViewCell( + flex: 4, + child: Row( + children: [ + // logo/icon + const SizedBox( + width: 10, + ), + Text( + providersByCoin[i].key.prettyName, + style: STextStyles.desktopTextExtraSmall.copyWith( + color: CFColors.textDark, + ), + ) + ], + ), + ), + TableViewCell( + flex: 4, + child: Text( + providersByCoin[i].value.length == 1 + ? "${providersByCoin[i].value.length} wallet" + : "${providersByCoin[i].value.length} wallets", + style: STextStyles.desktopTextExtraSmall.copyWith( + color: CFColors.textSubtitle1, + ), + ), + ), + TableViewCell( + flex: 6, + child: TablePriceInfo( + coin: providersByCoin[i].key, + ), + ), + ], + expandingChild: CoinWalletsTable( + walletIds: ref.watch( + walletsChangeNotifierProvider.select( + (value) => value.getWalletIdsFor( + coin: providersByCoin[i].key, + ), + ), + ), + ), + ) + ], + ); + } +} + +class TablePriceInfo extends ConsumerWidget { + const TablePriceInfo({Key? key, required this.coin}) : super(key: key); + + final Coin coin; + + @override + Widget build(BuildContext context, WidgetRef ref) { + final tuple = ref.watch( + priceAnd24hChangeNotifierProvider.select( + (value) => value.getPrice(coin), + ), + ); + + final currency = ref.watch( + prefsChangeNotifierProvider.select( + (value) => value.currency, + ), + ); + + final priceString = Format.localizedStringAsFixed( + value: tuple.item1, + locale: ref + .watch( + localeServiceChangeNotifierProvider.notifier, + ) + .locale, + decimalPlaces: 2, + ); + + final double percentChange = tuple.item2; + + var percentChangedColor = CFColors.stackAccent; + if (percentChange > 0) { + percentChangedColor = CFColors.stackGreen; + } else if (percentChange < 0) { + percentChangedColor = CFColors.stackRed; + } + + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "$priceString $currency/${coin.ticker}", + style: STextStyles.desktopTextExtraSmall.copyWith( + color: CFColors.textSubtitle1, + ), + ), + Text( + "${percentChange.toStringAsFixed(2)}%", + style: STextStyles.desktopTextExtraSmall.copyWith( + color: percentChangedColor, + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/home/my_stack_view/wallet_table.dart b/lib/pages_desktop_specific/home/my_stack_view/wallet_table.dart deleted file mode 100644 index 4c8af3221..000000000 --- a/lib/pages_desktop_specific/home/my_stack_view/wallet_table.dart +++ /dev/null @@ -1,155 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:stackwallet/providers/providers.dart'; -import 'package:stackwallet/services/coins/manager.dart'; -import 'package:stackwallet/utilities/cfcolors.dart'; -import 'package:stackwallet/utilities/enums/coin_enum.dart'; -import 'package:stackwallet/utilities/format.dart'; -import 'package:stackwallet/utilities/text_styles.dart'; - -class WalletTable extends ConsumerStatefulWidget { - const WalletTable({Key? key}) : super(key: key); - - @override - ConsumerState createState() => _WalletTableState(); -} - -class _WalletTableState extends ConsumerState { - void tapRow(int index) { - print("row $index clicked"); - } - - TableRow getRowForCoin( - int index, - Map>> providersByCoin, - ) { - final coin = providersByCoin.keys.toList(growable: false)[index]; - final walletCount = providersByCoin[coin]!.length; - - final walletCountString = - walletCount == 1 ? "$walletCount wallet" : "$walletCount wallets"; - - return TableRow( - children: [ - GestureDetector( - onTap: () { - tapRow(index); - }, - child: Container( - decoration: BoxDecoration( - color: CFColors.background, - ), - child: Row( - children: [ - // logo/icon - const SizedBox( - width: 10, - ), - Text( - coin.prettyName, - style: STextStyles.desktopTextExtraSmall.copyWith( - color: CFColors.textDark, - ), - ) - ], - ), - ), - ), - GestureDetector( - onTap: () { - tapRow(index); - }, - child: Container( - decoration: BoxDecoration( - color: CFColors.background, - ), - child: Text( - walletCountString, - style: STextStyles.desktopTextExtraSmall.copyWith( - color: CFColors.textSubtitle1, - ), - ), - ), - ), - GestureDetector( - onTap: () { - tapRow(index); - }, - child: Container( - decoration: BoxDecoration( - color: CFColors.background, - ), - child: PriceInfoRow(coin: coin), - ), - ), - ], - ); - } - - @override - Widget build(BuildContext context) { - final providersByCoin = ref.watch(walletsChangeNotifierProvider - .select((value) => value.getManagerProvidersByCoin())); - - return Table( - border: TableBorder.all(), - columnWidths: const { - 0: FlexColumnWidth(1), - 1: FlexColumnWidth(1.25), - 2: FlexColumnWidth(1.75), - }, - defaultVerticalAlignment: TableCellVerticalAlignment.middle, - children: [ - for (int i = 0; i < providersByCoin.length; i++) - getRowForCoin(i, providersByCoin) - ]); - } -} - -class PriceInfoRow extends ConsumerWidget { - const PriceInfoRow({Key? key, required this.coin}) : super(key: key); - - final Coin coin; - - @override - Widget build(BuildContext context, WidgetRef ref) { - final tuple = ref.watch(priceAnd24hChangeNotifierProvider - .select((value) => value.getPrice(coin))); - - final currency = ref - .watch(prefsChangeNotifierProvider.select((value) => value.currency)); - - final priceString = Format.localizedStringAsFixed( - value: tuple.item1, - locale: ref.watch(localeServiceChangeNotifierProvider.notifier).locale, - decimalPlaces: 2, - ); - - final double percentChange = tuple.item2; - - var percentChangedColor = CFColors.stackAccent; - if (percentChange > 0) { - percentChangedColor = CFColors.stackGreen; - } else if (percentChange < 0) { - percentChangedColor = CFColors.stackRed; - } - - return Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "$priceString $currency/${coin.ticker}", - style: STextStyles.desktopTextExtraSmall.copyWith( - color: CFColors.textSubtitle1, - ), - ), - Text( - "${percentChange.toStringAsFixed(2)}%", - style: STextStyles.desktopTextExtraSmall.copyWith( - color: percentChangedColor, - ), - ), - ], - ); - } -}