extract shared code into shared widget

This commit is contained in:
julian 2023-10-16 16:08:15 -06:00
parent 26055f402b
commit 98de6dba01
3 changed files with 168 additions and 457 deletions

View file

@ -9,18 +9,15 @@
*/
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_item_card.dart';
import 'package:stackwallet/pages_desktop_specific/cashfusion/sub_widgets/fusion_dialog.dart';
import 'package:stackwallet/providers/cash_fusion/fusion_progress_ui_state_provider.dart';
import 'package:stackwallet/pages_desktop_specific/cashfusion/sub_widgets/fusion_progress.dart';
import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
class FusionProgressView extends StatefulWidget {
const FusionProgressView({
@ -110,234 +107,9 @@ class _FusionProgressViewState extends State<FusionProgressView> {
padding: const EdgeInsets.all(16),
child: Column(
children: [
RoundedContainer(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarBackError,
child: Text(
"Do not close this window. If you exit, "
"the process will be canceled.",
style: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarTextError,
),
textAlign: TextAlign.center,
),
FusionProgress(
walletId: widget.walletId,
),
const SizedBox(
height: 20,
),
Consumer(
builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(
widget.walletId)
.select((value) => value.connecting));
return RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.node,
width: 16,
height: 16,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Connecting to server",
),
);
},
),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(widget.walletId)
.select((value) => value.outputs));
return RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.upFromLine,
width: 18,
height: 18,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Allocating outputs",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(widget.walletId)
.select((value) => value.peers));
return RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.peers,
width: 20,
height: 20,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Waiting for peers",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(widget.walletId)
.select((value) => value.fusing));
return RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.fusing,
width: 20,
height: 20,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Fusing",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(widget.walletId)
.select((value) => value.complete));
return RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context)
.extension<StackColors>()!
.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.shadow,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.checkCircle,
width: 18,
height: 18,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Complete",
),
);
}),
const Spacer(),
const SizedBox(
height: 16,

View file

@ -1,15 +1,12 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_item_card.dart';
import 'package:stackwallet/providers/cash_fusion/fusion_progress_ui_state_provider.dart';
import 'package:stackwallet/pages_desktop_specific/cashfusion/sub_widgets/fusion_progress.dart';
import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
enum CashFusionStatus { waiting, running, success, failed }
@ -83,229 +80,9 @@ class FusionDialog extends StatelessWidget {
const SizedBox(
height: 20,
),
RoundedContainer(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarBackError,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Do not close this window. If you exit, "
"the process will be canceled.",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarTextError,
),
),
],
),
FusionProgress(
walletId: walletId,
),
const SizedBox(
height: 20,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(walletId)
.select((value) => value.connecting));
return RoundedContainer(
padding: EdgeInsets.zero,
color:
Theme.of(context).extension<StackColors>()!.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.node,
width: 16,
height: 16,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Connecting to server",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(walletId)
.select((value) => value.outputs));
return RoundedContainer(
padding: EdgeInsets.zero,
color:
Theme.of(context).extension<StackColors>()!.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.upFromLine,
width: 30,
height: 30,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Allocating outputs",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(walletId)
.select((value) => value.peers));
return RoundedContainer(
padding: EdgeInsets.zero,
color:
Theme.of(context).extension<StackColors>()!.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.peers,
width: 30,
height: 30,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Waiting for peers",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(walletId)
.select((value) => value.fusing));
return RoundedContainer(
padding: EdgeInsets.zero,
color:
Theme.of(context).extension<StackColors>()!.popupBG,
borderColor: Theme.of(context)
.extension<StackColors>()!
.background,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.fusing,
width: 30,
height: 30,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Fusing",
),
);
}),
const SizedBox(
height: 12,
),
Consumer(builder: (_, ref, __) {
final state = ref.watch(
fusionProgressUIStateProvider(walletId)
.select((value) => value.complete));
return RoundedContainer(
padding: EdgeInsets.zero,
color:
Theme.of(context).extension<StackColors>()!.popupBG,
borderColor:
Theme.of(context).extension<StackColors>()!.shadow,
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
Assets.svg.checkCircle,
width: 16,
height: 16,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(state),
),
title: "Complete",
),
);
}),
const SizedBox(
height: 12,
),

View file

@ -0,0 +1,162 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_item_card.dart';
import 'package:stackwallet/pages_desktop_specific/cashfusion/sub_widgets/fusion_dialog.dart';
import 'package:stackwallet/providers/cash_fusion/fusion_progress_ui_state_provider.dart';
import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/assets.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_container.dart';
class FusionProgress extends ConsumerWidget {
const FusionProgress({super.key, required this.walletId});
final String walletId;
@override
Widget build(BuildContext context, WidgetRef ref) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
RoundedContainer(
color: Theme.of(context).extension<StackColors>()!.snackBarBackError,
child: Text(
"Do not close this window. If you exit, "
"the process will be canceled.",
style: Util.isDesktop
? STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarTextError,
)
: STextStyles.w500_14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.snackBarTextError,
),
textAlign: TextAlign.center,
),
),
const SizedBox(
height: 20,
),
_ProgressItem(
iconAsset: Assets.svg.node,
label: "Connecting to server",
status: ref.watch(fusionProgressUIStateProvider(walletId)
.select((value) => value.connecting))),
const SizedBox(
height: 12,
),
_ProgressItem(
iconAsset: Assets.svg.upFromLine,
label: "Allocating outputs",
status: ref.watch(fusionProgressUIStateProvider(walletId)
.select((value) => value.outputs))),
const SizedBox(
height: 12,
),
_ProgressItem(
iconAsset: Assets.svg.peers,
label: "Waiting for peers",
status: ref.watch(fusionProgressUIStateProvider(walletId)
.select((value) => value.peers))),
const SizedBox(
height: 12,
),
_ProgressItem(
iconAsset: Assets.svg.fusing,
label: "Fusing",
status: ref.watch(fusionProgressUIStateProvider(walletId)
.select((value) => value.fusing))),
const SizedBox(
height: 12,
),
_ProgressItem(
iconAsset: Assets.svg.checkCircle,
label: "Complete",
status: ref.watch(fusionProgressUIStateProvider(walletId)
.select((value) => value.complete))),
],
);
}
}
class _ProgressItem extends StatelessWidget {
const _ProgressItem({
super.key,
required this.iconAsset,
required this.label,
required this.status,
});
final String iconAsset;
final String label;
final CashFusionStatus status;
Widget _getIconForState(CashFusionStatus state, BuildContext context) {
switch (state) {
case CashFusionStatus.waiting:
return SvgPicture.asset(
Assets.svg.loader,
color:
Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
);
case CashFusionStatus.running:
return SvgPicture.asset(
Assets.svg.loader,
color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
);
case CashFusionStatus.success:
return SvgPicture.asset(
Assets.svg.checkCircle,
color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
);
case CashFusionStatus.failed:
return SvgPicture.asset(
Assets.svg.circleAlert,
color: Theme.of(context).extension<StackColors>()!.textError,
);
}
}
@override
Widget build(BuildContext context) {
return ConditionalParent(
condition: Util.isDesktop,
builder: (child) => RoundedContainer(
padding: EdgeInsets.zero,
color: Theme.of(context).extension<StackColors>()!.popupBG,
borderColor: Theme.of(context).extension<StackColors>()!.background,
child: child,
),
child: RestoringItemCard(
left: SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
padding: const EdgeInsets.all(0),
color:
Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
child: Center(
child: SvgPicture.asset(
iconAsset,
width: 18,
height: 18,
),
),
),
),
right: SizedBox(
width: 20,
height: 20,
child: _getIconForState(status, context),
),
title: label,
),
);
}
}