utxo details desktop styled

This commit is contained in:
julian 2023-03-14 08:40:09 -06:00
parent 34c7f9f183
commit 3421c45e64

View file

@ -20,7 +20,8 @@ import 'package:stackwallet/widgets/custom_buttons/simple_edit_button.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/icon_widgets/utxo_status_icon.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
class UtxoDetailsView extends ConsumerStatefulWidget { class UtxoDetailsView extends ConsumerStatefulWidget {
const UtxoDetailsView({ const UtxoDetailsView({
@ -40,7 +41,6 @@ class UtxoDetailsView extends ConsumerStatefulWidget {
class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> { class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> {
final isDesktop = Util.isDesktop; final isDesktop = Util.isDesktop;
static const double _spacing = 12;
late Stream<UTXO?> streamUTXO; late Stream<UTXO?> streamUTXO;
UTXO? utxo; UTXO? utxo;
@ -133,169 +133,147 @@ class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> {
), ),
), ),
), ),
child: ConditionalParent( child: StreamBuilder<UTXO?>(
condition: isDesktop,
builder: (child) {
return DesktopDialog(
maxHeight: double.infinity,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 32),
child: Text(
"Output details",
style: STextStyles.desktopH3(context),
),
),
DesktopDialogCloseButton(
onPressedOverride: () {
Navigator.of(context)
.pop(_popWithRefresh ? "refresh" : null);
},
),
],
),
child,
],
),
);
},
child: StreamBuilder<UTXO?>(
stream: streamUTXO, stream: streamUTXO,
builder: (context, snapshot) { builder: (context, snapshot) {
if (snapshot.hasData) { if (snapshot.hasData) {
utxo = snapshot.data!; utxo = snapshot.data!;
} }
return ConditionalParent(
return Column( condition: isDesktop,
crossAxisAlignment: CrossAxisAlignment.stretch, builder: (child) {
children: [ return DesktopDialog(
const SizedBox( maxHeight: double.infinity,
height: 10,
),
RoundedWhiteContainer(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"${Format.satoshisToAmount(
utxo!.value,
coin: coin,
).toStringAsFixed(
coin.decimals,
)} ${coin.ticker}",
style: STextStyles.pageTitleH2(context),
),
Text(
utxo!.isBlocked
? "Frozen"
: confirmed
? "Available"
: "Unconfirmed",
style: STextStyles.w500_14(context).copyWith(
color: utxo!.isBlocked
? const Color(0xFF7FA2D4) // todo theme
: confirmed
? Theme.of(context)
.extension<StackColors>()!
.accentColorGreen
: Theme.of(context)
.extension<StackColors>()!
.accentColorYellow,
),
),
],
),
),
const SizedBox(
height: _spacing,
),
RoundedWhiteContainer(
child: Column( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Padding(
"Label", padding: const EdgeInsets.only(left: 32),
style: STextStyles.w500_14(context).copyWith( child: Text(
color: Theme.of(context) "Output details",
.extension<StackColors>()! style: STextStyles.desktopH3(context),
.textSubtitle1,
), ),
), ),
SimpleEditButton( DesktopDialogCloseButton(
editValue: utxo!.name, onPressedOverride: () {
editLabel: "label", Navigator.of(context)
onValueChanged: (newName) { .pop(_popWithRefresh ? "refresh" : null);
MainDB.instance.putUTXO(
utxo!.copyWith(
name: newName,
),
);
}, },
), ),
], ],
), ),
const SizedBox( IntrinsicHeight(
height: 4, child: Padding(
), padding: const EdgeInsets.only(
Text( left: 32,
utxo!.name, right: 32,
style: STextStyles.w500_14(context), bottom: 32,
), top: 10,
],
),
),
const SizedBox(
height: _spacing,
),
RoundedWhiteContainer(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Address",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
), ),
isDesktop child: Column(
? IconCopyButton( children: [
data: utxo!.address!, IntrinsicHeight(
) child: RoundedContainer(
: SimpleCopyButton( padding: EdgeInsets.zero,
data: utxo!.address!, color: Colors.transparent,
borderColor: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
child: child,
), ),
], ),
), const SizedBox(
const SizedBox( height: 20,
height: 4, ),
), SecondaryButton(
Text( buttonHeight: ButtonHeight.l,
utxo!.address!, label: utxo!.isBlocked ? "Unfreeze" : "Freeze",
style: STextStyles.w500_14(context), onPressed: _toggleFreeze,
),
],
),
),
), ),
], ],
), ),
), );
if (label != null && label!.value.isNotEmpty) },
const SizedBox( child: Column(
height: _spacing, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (!isDesktop)
const SizedBox(
height: 10,
),
RoundedContainer(
padding: const EdgeInsets.all(12),
color: isDesktop
? Colors.transparent
: Theme.of(context).extension<StackColors>()!.popupBG,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
if (isDesktop)
UTXOStatusIcon(
blocked: utxo!.isBlocked,
status: confirmed
? UTXOStatusIconStatus.confirmed
: UTXOStatusIconStatus.unconfirmed,
background: Theme.of(context)
.extension<StackColors>()!
.popupBG,
selected: false,
width: 32,
height: 32,
),
if (isDesktop)
const SizedBox(
width: 16,
),
Text(
"${Format.satoshisToAmount(
utxo!.value,
coin: coin,
).toStringAsFixed(
coin.decimals,
)} ${coin.ticker}",
style: STextStyles.pageTitleH2(context),
),
],
),
Text(
utxo!.isBlocked
? "Frozen"
: confirmed
? "Available"
: "Unconfirmed",
style: STextStyles.w500_14(context).copyWith(
color: utxo!.isBlocked
? const Color(0xFF7FA2D4) // todo theme
: confirmed
? Theme.of(context)
.extension<StackColors>()!
.accentColorGreen
: Theme.of(context)
.extension<StackColors>()!
.accentColorYellow,
),
),
],
),
), ),
if (label != null && label!.value.isNotEmpty) const _Div(),
RoundedWhiteContainer( RoundedContainer(
padding: isDesktop
? const EdgeInsets.all(16)
: const EdgeInsets.all(12),
color: isDesktop
? Colors.transparent
: Theme.of(context).extension<StackColors>()!.popupBG,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -304,7 +282,53 @@ class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> {
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text( Text(
"Address label", "Label",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
SimpleEditButton(
editValue: utxo!.name,
editLabel: "label",
onValueChanged: (newName) {
MainDB.instance.putUTXO(
utxo!.copyWith(
name: newName,
),
);
},
),
],
),
const SizedBox(
height: 4,
),
Text(
utxo!.name,
style: STextStyles.w500_14(context),
),
],
),
),
const _Div(),
RoundedContainer(
padding: isDesktop
? const EdgeInsets.all(16)
: const EdgeInsets.all(12),
color: isDesktop
? Colors.transparent
: Theme.of(context).extension<StackColors>()!.popupBG,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Address",
style: STextStyles.w500_14(context).copyWith( style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
@ -316,7 +340,7 @@ class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> {
data: utxo!.address!, data: utxo!.address!,
) )
: SimpleCopyButton( : SimpleCopyButton(
data: label!.value, data: utxo!.address!,
), ),
], ],
), ),
@ -324,141 +348,218 @@ class _UtxoDetailsViewState extends ConsumerState<UtxoDetailsView> {
height: 4, height: 4,
), ),
Text( Text(
label!.value, utxo!.address!,
style: STextStyles.w500_14(context), style: STextStyles.w500_14(context),
), ),
], ],
), ),
), ),
const SizedBox( if (label != null && label!.value.isNotEmpty) const _Div(),
height: _spacing, if (label != null && label!.value.isNotEmpty)
), RoundedContainer(
RoundedWhiteContainer( padding: isDesktop
child: Column( ? const EdgeInsets.all(16)
mainAxisSize: MainAxisSize.min, : const EdgeInsets.all(12),
crossAxisAlignment: CrossAxisAlignment.start, color: isDesktop
children: [ ? Colors.transparent
Row( : Theme.of(context).extension<StackColors>()!.popupBG,
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Row(
"Transaction ID", mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: STextStyles.w500_14(context).copyWith( children: [
color: Theme.of(context) Text(
.extension<StackColors>()! "Address label",
.textSubtitle1, style: STextStyles.w500_14(context).copyWith(
), color: Theme.of(context)
), .extension<StackColors>()!
isDesktop .textSubtitle1,
? IconCopyButton(
data: utxo!.address!,
)
: SimpleCopyButton(
data: utxo!.txid,
), ),
),
isDesktop
? IconCopyButton(
data: utxo!.address!,
)
: SimpleCopyButton(
data: label!.value,
),
],
),
const SizedBox(
height: 4,
),
Text(
label!.value,
style: STextStyles.w500_14(context),
),
], ],
), ),
const SizedBox( ),
height: 4, const _Div(),
), RoundedContainer(
Text( padding: isDesktop
utxo!.txid, ? const EdgeInsets.all(16)
style: STextStyles.w500_14(context), : const EdgeInsets.all(12),
), color: isDesktop
], ? Colors.transparent
), : Theme.of(context).extension<StackColors>()!.popupBG,
), child: Column(
const SizedBox( mainAxisSize: MainAxisSize.min,
height: _spacing, crossAxisAlignment: CrossAxisAlignment.start,
), children: [
RoundedWhiteContainer( Row(
child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Confirmations",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
const SizedBox(
height: 4,
),
Text(
"${utxo!.getConfirmations(currentHeight)}",
style: STextStyles.w500_14(context),
),
],
),
),
const SizedBox(
height: _spacing,
),
if (utxo!.isBlocked)
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
RoundedWhiteContainer(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Freeze reason",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
SimpleEditButton(
editValue: utxo!.blockedReason ?? "",
editLabel: "freeze reason",
onValueChanged: (newReason) {
MainDB.instance.putUTXO(
utxo!.copyWith(
blockedReason: newReason,
),
);
},
),
],
),
const SizedBox(
height: 4,
),
Text( Text(
utxo!.blockedReason ?? "", "Transaction ID",
style: STextStyles.w500_14(context), style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
), ),
isDesktop
? IconCopyButton(
data: utxo!.address!,
)
: SimpleCopyButton(
data: utxo!.txid,
),
], ],
), ),
), const SizedBox(
const SizedBox( height: 4,
height: _spacing, ),
), Text(
], utxo!.txid,
style: STextStyles.w500_14(context),
),
],
),
), ),
if (!isDesktop) const Spacer(), const _Div(),
SecondaryButton( RoundedContainer(
label: utxo!.isBlocked ? "Unfreeze" : "Freeze", padding: isDesktop
onPressed: _toggleFreeze, ? const EdgeInsets.all(16)
), : const EdgeInsets.all(12),
const SizedBox( color: isDesktop
height: 16, ? Colors.transparent
), : Theme.of(context).extension<StackColors>()!.popupBG,
], child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Confirmations",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
const SizedBox(
height: 4,
),
Text(
"${utxo!.getConfirmations(currentHeight)}",
style: STextStyles.w500_14(context),
),
],
),
),
const _Div(),
if (utxo!.isBlocked)
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
RoundedContainer(
padding: isDesktop
? const EdgeInsets.all(16)
: const EdgeInsets.all(12),
color: isDesktop
? Colors.transparent
: Theme.of(context)
.extension<StackColors>()!
.popupBG,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Freeze reason",
style:
STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
SimpleEditButton(
editValue: utxo!.blockedReason ?? "",
editLabel: "freeze reason",
onValueChanged: (newReason) {
MainDB.instance.putUTXO(
utxo!.copyWith(
blockedReason: newReason,
),
);
},
),
],
),
const SizedBox(
height: 4,
),
Text(
utxo!.blockedReason ?? "",
style: STextStyles.w500_14(context),
),
],
),
),
if (!isDesktop) const _Div(),
],
),
if (!isDesktop) const Spacer(),
if (!isDesktop)
SecondaryButton(
label: utxo!.isBlocked ? "Unfreeze" : "Freeze",
onPressed: _toggleFreeze,
),
if (!isDesktop)
const SizedBox(
height: 16,
),
],
),
); );
}, }),
),
),
); );
} }
} }
class _Div extends StatelessWidget {
const _Div({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
if (Util.isDesktop) {
return Container(
width: double.infinity,
height: 1.0,
color: Theme.of(context).extension<StackColors>()!.textFieldDefaultBG,
);
} else {
return const SizedBox(
height: 12,
);
}
}
}