mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-09 20:29:57 +00:00
desktop home view wallets table view
This commit is contained in:
parent
79327a145c
commit
f25fc0696a
4 changed files with 196 additions and 157 deletions
|
@ -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<String> 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],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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<MyWallets> {
|
|||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
const WalletTable(),
|
||||
const WalletSummaryTable(),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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<WalletSummaryTable> createState() => _WalletTableState();
|
||||
}
|
||||
|
||||
class _WalletTableState extends ConsumerState<WalletSummaryTable> {
|
||||
@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,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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<WalletTable> createState() => _WalletTableState();
|
||||
}
|
||||
|
||||
class _WalletTableState extends ConsumerState<WalletTable> {
|
||||
void tapRow(int index) {
|
||||
print("row $index clicked");
|
||||
}
|
||||
|
||||
TableRow getRowForCoin(
|
||||
int index,
|
||||
Map<Coin, List<ChangeNotifierProvider<Manager>>> 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 <int, TableColumnWidth>{
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue