desktop trade history details updated

This commit is contained in:
julian 2022-11-22 08:07:22 -06:00
parent b512b2cefb
commit 7afe6940f9
3 changed files with 335 additions and 109 deletions

View file

@ -206,16 +206,57 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
padding: const EdgeInsets.only(
right: 12,
),
child: RoundedWhiteContainer(
borderColor: isDesktop
? Theme.of(context).extension<StackColors>()!.background
: null,
padding: const EdgeInsets.all(0),
child: ListView(
primary: false,
shrinkWrap: true,
children: children,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
RoundedWhiteContainer(
borderColor:
Theme.of(context).extension<StackColors>()!.background,
padding: const EdgeInsets.all(0),
child: ListView(
primary: false,
shrinkWrap: true,
children: children,
),
),
if (isStackCoin(trade.payInCurrency) &&
(trade.status == "New" ||
trade.status == "new" ||
trade.status == "waiting" ||
trade.status == "Waiting"))
const SizedBox(
height: 32,
),
if (isStackCoin(trade.payInCurrency) &&
(trade.status == "New" ||
trade.status == "new" ||
trade.status == "waiting" ||
trade.status == "Waiting"))
SecondaryButton(
label: "Send from Stack",
buttonHeight: ButtonHeight.l,
onPressed: () {
final amount = sendAmount;
final address = trade.payInAddress;
final coin =
coinFromTickerCaseInsensitive(trade.payInCurrency);
Navigator.of(context).pushNamed(
SendFromView.routeName,
arguments: Tuple4(
coin,
amount,
address,
trade,
),
);
},
),
const SizedBox(
height: 32,
),
],
),
),
),
@ -350,33 +391,94 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
padding: isDesktop
? const EdgeInsets.all(16)
: const EdgeInsets.all(12),
color: Theme.of(context)
.extension<StackColors>()!
.warningBackground,
child: RichText(
text: TextSpan(
text:
"You must send at least ${sendAmount.toStringAsFixed(
trade.payInCurrency.toLowerCase() == "xmr" ? 12 : 8,
)} ${trade.payInCurrency.toUpperCase()}. ",
style: STextStyles.label700(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.warningForeground,
),
children: [
TextSpan(
text:
"If you send less than ${sendAmount.toStringAsFixed(
trade.payInCurrency.toLowerCase() == "xmr" ? 12 : 8,
)} ${trade.payInCurrency.toUpperCase()}, your transaction may not be converted and it may not be refunded.",
style: STextStyles.label(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.warningForeground,
color: isDesktop
? Theme.of(context).extension<StackColors>()!.popupBG
: Theme.of(context)
.extension<StackColors>()!
.warningBackground,
child: ConditionalParent(
condition: isDesktop,
builder: (child) => Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Amount",
style: STextStyles.desktopTextExtraExtraSmall(
context),
),
const SizedBox(
height: 2,
),
Text(
"${trade.payInAmount} ${trade.payInCurrency.toUpperCase()}",
style: STextStyles.desktopTextExtraExtraSmall(
context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
],
),
),
]),
IconCopyButton(
data: trade.payInAmount,
),
],
),
const SizedBox(
height: 6,
),
child,
],
),
child: RichText(
text: TextSpan(
text:
"You must send at least ${sendAmount.toStringAsFixed(
trade.payInCurrency.toLowerCase() == "xmr" ? 12 : 8,
)} ${trade.payInCurrency.toUpperCase()}. ",
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorRed)
: STextStyles.label(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.warningForeground,
),
children: [
TextSpan(
text:
"If you send less than ${sendAmount.toStringAsFixed(
trade.payInCurrency.toLowerCase() == "xmr"
? 12
: 8,
)} ${trade.payInCurrency.toUpperCase()}, your transaction may not be converted and it may not be refunded.",
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(
context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorRed)
: STextStyles.label(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.warningForeground,
),
),
]),
),
),
),
if (sentFromStack)
@ -1035,12 +1137,12 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
],
),
),
isDesktop
? const _Divider()
: const SizedBox(
height: 12,
),
if (isStackCoin(trade.payInCurrency) &&
if (!isDesktop)
const SizedBox(
height: 12,
),
if (!isDesktop &&
isStackCoin(trade.payInCurrency) &&
(trade.status == "New" ||
trade.status == "new" ||
trade.status == "waiting" ||

View file

@ -10,7 +10,10 @@ import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:stackwallet/widgets/trade_card.dart';
import 'package:tuple/tuple.dart';
import '../../../route_generator.dart';
import '../../../widgets/desktop/desktop_dialog.dart';
import '../../../widgets/desktop/desktop_dialog_close_button.dart';
class DesktopTradeHistory extends ConsumerStatefulWidget {
const DesktopTradeHistory({Key? key}) : super(key: key);
@ -64,19 +67,122 @@ class _DesktopTradeHistoryState extends ConsumerState<DesktopTradeHistory> {
final tx = txData.getAllTransactions()[txid];
if (mounted) {
unawaited(
Navigator.of(context).pushNamed(
TradeDetailsView.routeName,
arguments: Tuple4(
tradeId, tx, walletIds.first, manager.walletName),
await showDialog<void>(
context: context,
builder: (context) => Navigator(
initialRoute: TradeDetailsView.routeName,
onGenerateRoute: RouteGenerator.generateRoute,
onGenerateInitialRoutes: (_, __) {
return [
FadePageRoute(
DesktopDialog(
// maxHeight:
// MediaQuery.of(context).size.height - 64,
maxHeight: double.infinity,
maxWidth: 580,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(
left: 32,
bottom: 16,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Trade details",
style: STextStyles.desktopH3(context),
),
DesktopDialogCloseButton(
onPressedOverride: Navigator.of(
context,
rootNavigator: true,
).pop,
),
],
),
),
Flexible(
child: TradeDetailsView(
tradeId: tradeId,
transactionIfSentFromStack: tx,
walletName: manager.walletName,
walletId: walletIds.first,
),
),
],
),
),
const RouteSettings(
name: TradeDetailsView.routeName,
),
),
];
},
),
);
}
} else {
unawaited(
Navigator.of(context).pushNamed(
TradeDetailsView.routeName,
arguments: Tuple4(tradeId, null, walletIds?.first, null),
showDialog<void>(
context: context,
builder: (context) => Navigator(
initialRoute: TradeDetailsView.routeName,
onGenerateRoute: RouteGenerator.generateRoute,
onGenerateInitialRoutes: (_, __) {
return [
FadePageRoute(
DesktopDialog(
// maxHeight:
// MediaQuery.of(context).size.height - 64,
maxHeight: double.infinity,
maxWidth: 580,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(
left: 32,
bottom: 16,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Trade details",
style: STextStyles.desktopH3(context),
),
DesktopDialogCloseButton(
onPressedOverride: Navigator.of(
context,
rootNavigator: true,
).pop,
),
],
),
),
Flexible(
child: TradeDetailsView(
tradeId: tradeId,
transactionIfSentFromStack: null,
walletName: null,
walletId: walletIds?.first,
),
),
],
),
),
const RouteSettings(
name: TradeDetailsView.routeName,
),
),
];
},
),
),
);
}

View file

@ -8,6 +8,7 @@ import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
class TradeCard extends ConsumerWidget {
@ -49,68 +50,85 @@ class TradeCard extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return GestureDetector(
onTap: onTap,
child: RoundedWhiteContainer(
child: Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
),
child: Center(
child: SvgPicture.asset(
_fetchIconAssetForStatus(
trade.status,
context,
final isDesktop = Util.isDesktop;
return ConditionalParent(
condition: isDesktop,
builder: (child) => MouseRegion(
cursor: SystemMouseCursors.click,
child: child,
),
child: GestureDetector(
onTap: onTap,
child: RoundedWhiteContainer(
padding:
isDesktop ? const EdgeInsets.all(16) : const EdgeInsets.all(12),
child: Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
),
child: Center(
child: SvgPicture.asset(
_fetchIconAssetForStatus(
trade.status,
context,
),
width: 32,
height: 32,
),
width: 32,
height: 32,
),
),
),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"${trade.payInCurrency.toUpperCase()}${trade.payOutCurrency.toUpperCase()}",
style: STextStyles.itemSubtitle12(context),
),
Text(
"${Util.isDesktop ? "-" : ""}${Decimal.tryParse(trade.payInAmount) ?? "..."} ${trade.payInCurrency.toUpperCase()}",
style: STextStyles.itemSubtitle12(context),
),
],
),
const SizedBox(
height: 2,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
trade.exchangeName,
style: STextStyles.label(context),
),
Text(
Format.extractDateFrom(
trade.timestamp.millisecondsSinceEpoch ~/ 1000),
style: STextStyles.label(context),
),
],
),
],
const SizedBox(
width: 12,
),
)
],
Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"${trade.payInCurrency.toUpperCase()}${trade.payOutCurrency.toUpperCase()}",
style: STextStyles.itemSubtitle12(context),
),
Text(
"${isDesktop ? "-" : ""}${Decimal.tryParse(trade.payInAmount) ?? "..."} ${trade.payInCurrency.toUpperCase()}",
style: STextStyles.itemSubtitle12(context),
),
],
),
const SizedBox(
height: 2,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (!isDesktop)
Text(
trade.exchangeName,
style: STextStyles.label(context),
),
Text(
Format.extractDateFrom(
trade.timestamp.millisecondsSinceEpoch ~/ 1000),
style: STextStyles.label(context),
),
if (isDesktop)
Text(
trade.exchangeName,
style: STextStyles.label(context),
),
],
),
],
),
)
],
),
),
),
);