stack_wallet/lib/pages/paynym/paynym_home_view.dart

637 lines
24 KiB
Dart
Raw Normal View History

2022-12-21 17:08:14 +00:00
import 'dart:async';
2022-12-20 23:00:03 +00:00
import 'package:flutter/material.dart';
2022-12-21 17:08:14 +00:00
import 'package:flutter/services.dart';
2022-12-21 23:02:14 +00:00
import 'package:flutter_riverpod/flutter_riverpod.dart';
2022-12-21 16:17:53 +00:00
import 'package:flutter_svg/svg.dart';
2022-12-21 17:08:14 +00:00
import 'package:stackwallet/notifications/show_flush_bar.dart';
2022-12-21 19:46:50 +00:00
import 'package:stackwallet/pages/paynym/add_new_paynym_follow_view.dart';
2022-12-21 17:14:50 +00:00
import 'package:stackwallet/pages/paynym/dialogs/paynym_qr_popup.dart';
2023-01-09 19:15:15 +00:00
import 'package:stackwallet/pages/paynym/subwidgets/desktop_paynym_details.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_bot.dart';
2023-01-04 21:28:48 +00:00
import 'package:stackwallet/pages/paynym/subwidgets/paynym_followers_list.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_following_list.dart';
2023-01-09 19:15:15 +00:00
import 'package:stackwallet/providers/ui/selected_paynym_details_item_Provider.dart';
import 'package:stackwallet/providers/wallet/my_paynym_account_state_provider.dart';
2022-12-21 16:17:53 +00:00
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/format.dart';
2022-12-20 23:00:03 +00:00
import 'package:stackwallet/utilities/text_styles.dart';
2022-12-21 16:17:53 +00:00
import 'package:stackwallet/utilities/theme/stack_colors.dart';
2022-12-20 23:00:03 +00:00
import 'package:stackwallet/utilities/util.dart';
2023-01-04 16:57:04 +00:00
import 'package:stackwallet/widgets/conditional_parent.dart';
2022-12-20 23:00:03 +00:00
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
2023-01-04 16:57:04 +00:00
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
2022-12-20 23:00:03 +00:00
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
2022-12-21 16:17:53 +00:00
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/icon_widgets/copy_icon.dart';
import 'package:stackwallet/widgets/icon_widgets/qrcode_icon.dart';
import 'package:stackwallet/widgets/icon_widgets/share_icon.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
2022-12-21 16:17:53 +00:00
import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:stackwallet/widgets/toggle.dart';
2022-12-20 23:00:03 +00:00
2022-12-21 23:02:14 +00:00
class PaynymHomeView extends ConsumerStatefulWidget {
2022-12-20 23:00:03 +00:00
const PaynymHomeView({
Key? key,
required this.walletId,
}) : super(key: key);
final String walletId;
static const String routeName = "/paynymHome";
@override
2022-12-21 23:02:14 +00:00
ConsumerState<PaynymHomeView> createState() => _PaynymHomeViewState();
2022-12-20 23:00:03 +00:00
}
2022-12-21 23:02:14 +00:00
class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
2023-01-04 21:28:48 +00:00
bool showFollowers = false;
2022-12-21 23:02:14 +00:00
int secretCount = 0;
Timer? timer;
bool _followButtonHoverState = false;
2022-12-21 23:02:14 +00:00
@override
void dispose() {
timer?.cancel();
timer = null;
super.dispose();
}
2022-12-21 16:17:53 +00:00
2022-12-20 23:00:03 +00:00
@override
Widget build(BuildContext context) {
debugPrint("BUILD: $runtimeType");
final isDesktop = Util.isDesktop;
return MasterScaffold(
isDesktop: isDesktop,
2023-01-04 16:57:04 +00:00
appBar: isDesktop
? DesktopAppBar(
isCompactHeight: true,
background: Theme.of(context).extension<StackColors>()!.popupBG,
leading: Row(
children: [
Padding(
padding: const EdgeInsets.only(
left: 24,
right: 20,
),
child: AppBarIconButton(
size: 32,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.topNavIconPrimary,
),
onPressed: Navigator.of(context).pop,
),
),
SvgPicture.asset(
Assets.svg.user,
width: 32,
height: 32,
color: Theme.of(context).extension<StackColors>()!.textDark,
),
const SizedBox(
width: 10,
),
Text(
"PayNym",
style: STextStyles.desktopH3(context),
)
],
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
trailing: Padding(
padding: const EdgeInsets.only(right: 12),
child: SizedBox(
height: 56,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) => setState(() {
_followButtonHoverState = true;
}),
onExit: (_) => setState(() {
_followButtonHoverState = false;
}),
child: GestureDetector(
onTap: () {
showDialog<void>(
context: context,
builder: (context) => AddNewPaynymFollowView(
walletId: widget.walletId,
),
);
},
child: RoundedContainer(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
color: _followButtonHoverState
? Theme.of(context)
.extension<StackColors>()!
.highlight
: Colors.transparent,
radiusMultiplier: 100,
2023-01-04 16:57:04 +00:00
child: Row(
children: [
SvgPicture.asset(
Assets.svg.plus,
width: 16,
height: 16,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
const SizedBox(
width: 8,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Follow",
2023-01-04 16:57:04 +00:00
style:
STextStyles.desktopButtonSecondaryEnabled(
context)
.copyWith(
fontSize: 16,
),
),
const SizedBox(
height: 2,
),
],
),
],
),
),
),
),
2022-12-21 23:02:14 +00:00
),
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
)
: AppBar(
leading: AppBarBackButton(
onPressed: () {
Navigator.of(context).pop();
},
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
titleSpacing: 0,
title: Text(
"PayNym",
style: STextStyles.navBarTitle(context),
overflow: TextOverflow.ellipsis,
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
actions: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
icon: SvgPicture.asset(
Assets.svg.circlePlusFilled,
width: 20,
height: 20,
2022-12-21 16:17:53 +00:00
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
2023-01-04 16:57:04 +00:00
onPressed: () {
Navigator.of(context).pushNamed(
AddNewPaynymFollowView.routeName,
arguments: widget.walletId,
2022-12-21 17:08:14 +00:00
);
2022-12-21 16:17:53 +00:00
},
),
),
2023-01-04 16:57:04 +00:00
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
icon: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 20,
height: 20,
2022-12-21 16:17:53 +00:00
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
onPressed: () {
2023-01-04 16:57:04 +00:00
// todo info ?
2022-12-21 16:17:53 +00:00
},
),
),
2023-01-04 16:57:04 +00:00
),
const SizedBox(
width: 4,
),
],
),
body: ConditionalParent(
condition: !isDesktop,
builder: (child) => SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: child,
),
),
child: Column(
crossAxisAlignment:
isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center,
children: [
if (!isDesktop)
Column(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {
secretCount++;
if (secretCount > 5) {
debugPrint(
"My Account: ${ref.read(myPaynymAccountStateProvider.state).state}");
debugPrint(
"My Account: ${ref.read(myPaynymAccountStateProvider.state).state!.following}");
secretCount = 0;
}
timer ??= Timer(
const Duration(milliseconds: 1500),
() {
secretCount = 0;
timer = null;
},
);
},
child: PayNymBot(
paymentCodeString: ref
.watch(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
),
),
2022-12-21 16:17:53 +00:00
const SizedBox(
2023-01-04 16:57:04 +00:00
height: 10,
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
Text(
ref
.watch(myPaynymAccountStateProvider.state)
.state!
.nymName,
style: STextStyles.desktopMenuItemSelected(context),
),
const SizedBox(
height: 4,
),
Text(
Format.shorten(
ref
.watch(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
12,
5),
style: STextStyles.label(context),
),
const SizedBox(
height: 11,
),
Row(
children: [
Expanded(
child: SecondaryButton(
label: "Copy",
buttonHeight: ButtonHeight.l,
iconSpacing: 4,
icon: CopyIcon(
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
onPressed: () async {
await Clipboard.setData(
ClipboardData(
text: ref
.read(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
),
);
unawaited(
showFloatingFlushBar(
type: FlushBarType.info,
message: "Copied to clipboard",
iconAsset: Assets.svg.copy,
context: context,
),
);
},
),
2022-12-21 16:17:53 +00:00
),
2023-01-04 16:57:04 +00:00
const SizedBox(
width: 13,
),
Expanded(
child: SecondaryButton(
label: "Share",
buttonHeight: ButtonHeight.l,
iconSpacing: 4,
icon: ShareIcon(
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
2022-12-21 17:06:53 +00:00
),
2023-01-04 16:57:04 +00:00
onPressed: () {
// copy to clipboard
},
),
),
const SizedBox(
width: 13,
),
Expanded(
child: SecondaryButton(
label: "Address",
buttonHeight: ButtonHeight.l,
iconSpacing: 4,
icon: QrCodeIcon(
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
onPressed: () {
showDialog<void>(
context: context,
builder: (context) => PaynymQrPopup(
paynymAccount: ref
.read(myPaynymAccountStateProvider.state)
.state!,
),
);
},
),
),
],
2022-12-21 16:17:53 +00:00
),
],
),
2023-01-04 16:57:04 +00:00
if (isDesktop)
Padding(
padding: const EdgeInsets.all(24),
child: RoundedWhiteContainer(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const SizedBox(
width: 4,
),
GestureDetector(
onTap: () {
secretCount++;
if (secretCount > 5) {
debugPrint(
"My Account: ${ref.read(myPaynymAccountStateProvider.state).state}");
debugPrint(
"My Account: ${ref.read(myPaynymAccountStateProvider.state).state!.following}");
secretCount = 0;
}
timer ??= Timer(
const Duration(milliseconds: 1500),
() {
secretCount = 0;
timer = null;
},
);
},
child: PayNymBot(
paymentCodeString: ref
.watch(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
),
),
const SizedBox(
width: 16,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ref
.watch(myPaynymAccountStateProvider.state)
.state!
.nymName,
style: STextStyles.desktopH3(context),
),
const SizedBox(
height: 4,
),
Text(
Format.shorten(
ref
.watch(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
12,
5),
style:
STextStyles.desktopTextExtraExtraSmall(context),
),
],
),
const Spacer(),
SecondaryButton(
label: "Copy",
buttonHeight: ButtonHeight.l,
width: 160,
icon: CopyIcon(
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
onPressed: () async {
await Clipboard.setData(
ClipboardData(
text: ref
.read(myPaynymAccountStateProvider.state)
.state!
.codes
.first
.code,
),
);
unawaited(
showFloatingFlushBar(
type: FlushBarType.info,
message: "Copied to clipboard",
iconAsset: Assets.svg.copy,
context: context,
),
);
},
),
const SizedBox(
width: 16,
),
SecondaryButton(
label: "Address",
width: 160,
buttonHeight: ButtonHeight.l,
icon: QrCodeIcon(
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
onPressed: () {
showDialog<void>(
context: context,
builder: (context) => PaynymQrPopup(
paynymAccount: ref
.read(myPaynymAccountStateProvider.state)
.state!,
),
);
},
),
],
),
),
),
if (!isDesktop)
2022-12-21 16:17:53 +00:00
const SizedBox(
height: 24,
),
2023-01-04 16:57:04 +00:00
ConditionalParent(
condition: isDesktop,
builder: (child) => Padding(
padding: const EdgeInsets.only(left: 24),
child: child,
),
child: SizedBox(
height: isDesktop ? 56 : 40,
width: isDesktop ? 490 : null,
2022-12-21 16:17:53 +00:00
child: Toggle(
onColor: Theme.of(context).extension<StackColors>()!.popupBG,
2023-01-04 21:28:48 +00:00
onText:
"Following (${ref.watch(myPaynymAccountStateProvider.state).state?.following.length ?? 0})",
2022-12-21 16:17:53 +00:00
offColor: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
2023-01-04 21:28:48 +00:00
offText:
"Followers (${ref.watch(myPaynymAccountStateProvider.state).state?.followers.length ?? 0})",
isOn: showFollowers,
2022-12-21 16:17:53 +00:00
onValueChanged: (value) {
setState(() {
2023-01-04 21:28:48 +00:00
showFollowers = value;
2022-12-21 16:17:53 +00:00
});
},
decoration: BoxDecoration(
2023-01-04 16:57:04 +00:00
color: Colors.transparent,
2022-12-21 16:17:53 +00:00
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
),
),
2023-01-04 16:57:04 +00:00
),
SizedBox(
height: isDesktop ? 20 : 16,
),
2023-01-04 21:28:48 +00:00
Expanded(
child: ConditionalParent(
condition: isDesktop,
builder: (child) => Padding(
padding: const EdgeInsets.only(left: 24),
2023-01-09 19:15:15 +00:00
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 490,
child: child,
),
const SizedBox(
width: 24,
),
if (ref
.watch(selectedPaynymDetailsItemProvider.state)
.state !=
null)
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 600,
),
child: DesktopPaynymDetails(
walletId: widget.walletId,
accountLite: ref
.watch(selectedPaynymDetailsItemProvider
.state)
.state!,
),
),
],
),
),
if (ref
.watch(selectedPaynymDetailsItemProvider.state)
.state !=
null)
const SizedBox(
width: 24,
),
],
2023-01-04 21:28:48 +00:00
),
2023-01-04 16:57:04 +00:00
),
2023-01-04 21:28:48 +00:00
child: ConditionalParent(
condition: !isDesktop,
builder: (child) => Container(
child: child,
),
child: !showFollowers
? PaynymFollowingList(
walletId: widget.walletId,
)
: PaynymFollowersList(
walletId: widget.walletId,
),
2022-12-21 16:17:53 +00:00
),
2022-12-20 23:00:03 +00:00
),
2023-01-04 16:57:04 +00:00
),
],
2022-12-20 23:00:03 +00:00
),
),
);
}
}