mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-10 04:34:34 +00:00
desktop home view wallets table view
This commit is contained in:
julian
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: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/cfcolors.dart';
|
||||||
import 'package:stackwallet/utilities/text_styles.dart';
|
import 'package:stackwallet/utilities/text_styles.dart';
|
||||||
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
|
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
|
||||||
|
|
@ -61,7 +61,7 @@ class _MyWalletsState extends State<MyWallets> {
|
||||||
const SizedBox(
|
const SizedBox(
|
||||||
height: 20,
|
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