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( padding: const EdgeInsets.only(
right: 12, right: 12,
), ),
child: RoundedWhiteContainer( child: Column(
borderColor: isDesktop mainAxisSize: MainAxisSize.min,
? Theme.of(context).extension<StackColors>()!.background children: [
: null, RoundedWhiteContainer(
padding: const EdgeInsets.all(0), borderColor:
child: ListView( Theme.of(context).extension<StackColors>()!.background,
primary: false, padding: const EdgeInsets.all(0),
shrinkWrap: true, child: ListView(
children: children, 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 padding: isDesktop
? const EdgeInsets.all(16) ? const EdgeInsets.all(16)
: const EdgeInsets.all(12), : const EdgeInsets.all(12),
color: Theme.of(context) color: isDesktop
.extension<StackColors>()! ? Theme.of(context).extension<StackColors>()!.popupBG
.warningBackground, : Theme.of(context)
child: RichText( .extension<StackColors>()!
text: TextSpan( .warningBackground,
text: child: ConditionalParent(
"You must send at least ${sendAmount.toStringAsFixed( condition: isDesktop,
trade.payInCurrency.toLowerCase() == "xmr" ? 12 : 8, builder: (child) => Column(
)} ${trade.payInCurrency.toUpperCase()}. ", mainAxisSize: MainAxisSize.min,
style: STextStyles.label700(context).copyWith( children: [
color: Theme.of(context) Row(
.extension<StackColors>()! mainAxisAlignment: MainAxisAlignment.spaceBetween,
.warningForeground, crossAxisAlignment: CrossAxisAlignment.start,
), children: [
children: [ Column(
TextSpan( crossAxisAlignment: CrossAxisAlignment.start,
text: children: [
"If you send less than ${sendAmount.toStringAsFixed( Text(
trade.payInCurrency.toLowerCase() == "xmr" ? 12 : 8, "Amount",
)} ${trade.payInCurrency.toUpperCase()}, your transaction may not be converted and it may not be refunded.", style: STextStyles.desktopTextExtraExtraSmall(
style: STextStyles.label(context).copyWith( context),
color: Theme.of(context) ),
.extension<StackColors>()! const SizedBox(
.warningForeground, 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) if (sentFromStack)
@ -1035,12 +1137,12 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
], ],
), ),
), ),
isDesktop if (!isDesktop)
? const _Divider() const SizedBox(
: const SizedBox( height: 12,
height: 12, ),
), if (!isDesktop &&
if (isStackCoin(trade.payInCurrency) && isStackCoin(trade.payInCurrency) &&
(trade.status == "New" || (trade.status == "New" ||
trade.status == "new" || trade.status == "new" ||
trade.status == "waiting" || 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/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:stackwallet/widgets/trade_card.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 { class DesktopTradeHistory extends ConsumerStatefulWidget {
const DesktopTradeHistory({Key? key}) : super(key: key); const DesktopTradeHistory({Key? key}) : super(key: key);
@ -64,19 +67,122 @@ class _DesktopTradeHistoryState extends ConsumerState<DesktopTradeHistory> {
final tx = txData.getAllTransactions()[txid]; final tx = txData.getAllTransactions()[txid];
if (mounted) { if (mounted) {
unawaited( await showDialog<void>(
Navigator.of(context).pushNamed( context: context,
TradeDetailsView.routeName, builder: (context) => Navigator(
arguments: Tuple4( initialRoute: TradeDetailsView.routeName,
tradeId, tx, walletIds.first, manager.walletName), 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 { } else {
unawaited( unawaited(
Navigator.of(context).pushNamed( showDialog<void>(
TradeDetailsView.routeName, context: context,
arguments: Tuple4(tradeId, null, walletIds?.first, null), 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/format.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
class TradeCard extends ConsumerWidget { class TradeCard extends ConsumerWidget {
@ -49,68 +50,85 @@ class TradeCard extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
return GestureDetector( final isDesktop = Util.isDesktop;
onTap: onTap,
child: RoundedWhiteContainer( return ConditionalParent(
child: Row( condition: isDesktop,
children: [ builder: (child) => MouseRegion(
Container( cursor: SystemMouseCursors.click,
width: 32, child: child,
height: 32, ),
decoration: BoxDecoration( child: GestureDetector(
borderRadius: BorderRadius.circular(32), onTap: onTap,
), child: RoundedWhiteContainer(
child: Center( padding:
child: SvgPicture.asset( isDesktop ? const EdgeInsets.all(16) : const EdgeInsets.all(12),
_fetchIconAssetForStatus( child: Row(
trade.status, children: [
context, 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(
const SizedBox( width: 12,
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),
),
],
),
],
), ),
) 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),
),
],
),
],
),
)
],
),
), ),
), ),
); );