mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-09-29 09:51:09 +00:00
636 lines
24 KiB
Dart
636 lines
24 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:flutter_svg/svg.dart';
|
|
import 'package:stackwallet/notifications/show_flush_bar.dart';
|
|
import 'package:stackwallet/pages/paynym/add_new_paynym_follow_view.dart';
|
|
import 'package:stackwallet/pages/paynym/dialogs/paynym_qr_popup.dart';
|
|
import 'package:stackwallet/pages/paynym/subwidgets/desktop_paynym_details.dart';
|
|
import 'package:stackwallet/pages/paynym/subwidgets/paynym_bot.dart';
|
|
import 'package:stackwallet/pages/paynym/subwidgets/paynym_followers_list.dart';
|
|
import 'package:stackwallet/pages/paynym/subwidgets/paynym_following_list.dart';
|
|
import 'package:stackwallet/providers/ui/selected_paynym_details_item_Provider.dart';
|
|
import 'package:stackwallet/providers/wallet/my_paynym_account_state_provider.dart';
|
|
import 'package:stackwallet/utilities/assets.dart';
|
|
import 'package:stackwallet/utilities/constants.dart';
|
|
import 'package:stackwallet/utilities/format.dart';
|
|
import 'package:stackwallet/utilities/text_styles.dart';
|
|
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
|
import 'package:stackwallet/utilities/util.dart';
|
|
import 'package:stackwallet/widgets/conditional_parent.dart';
|
|
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
|
|
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
|
|
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
|
|
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';
|
|
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
|
import 'package:stackwallet/widgets/toggle.dart';
|
|
|
|
class PaynymHomeView extends ConsumerStatefulWidget {
|
|
const PaynymHomeView({
|
|
Key? key,
|
|
required this.walletId,
|
|
}) : super(key: key);
|
|
|
|
final String walletId;
|
|
|
|
static const String routeName = "/paynymHome";
|
|
|
|
@override
|
|
ConsumerState<PaynymHomeView> createState() => _PaynymHomeViewState();
|
|
}
|
|
|
|
class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
|
|
bool showFollowers = false;
|
|
int secretCount = 0;
|
|
Timer? timer;
|
|
|
|
bool _followButtonHoverState = false;
|
|
|
|
@override
|
|
void dispose() {
|
|
timer?.cancel();
|
|
timer = null;
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
debugPrint("BUILD: $runtimeType");
|
|
final isDesktop = Util.isDesktop;
|
|
|
|
return MasterScaffold(
|
|
isDesktop: isDesktop,
|
|
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),
|
|
)
|
|
],
|
|
),
|
|
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,
|
|
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",
|
|
style:
|
|
STextStyles.desktopButtonSecondaryEnabled(
|
|
context)
|
|
.copyWith(
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 2,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
: AppBar(
|
|
leading: AppBarBackButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop();
|
|
},
|
|
),
|
|
titleSpacing: 0,
|
|
title: Text(
|
|
"PayNym",
|
|
style: STextStyles.navBarTitle(context),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
actions: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 6),
|
|
child: AspectRatio(
|
|
aspectRatio: 1,
|
|
child: AppBarIconButton(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.circlePlusFilled,
|
|
width: 20,
|
|
height: 20,
|
|
color: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark,
|
|
),
|
|
onPressed: () {
|
|
Navigator.of(context).pushNamed(
|
|
AddNewPaynymFollowView.routeName,
|
|
arguments: widget.walletId,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 6),
|
|
child: AspectRatio(
|
|
aspectRatio: 1,
|
|
child: AppBarIconButton(
|
|
icon: SvgPicture.asset(
|
|
Assets.svg.circleQuestion,
|
|
width: 20,
|
|
height: 20,
|
|
color: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textDark,
|
|
),
|
|
onPressed: () {
|
|
// todo info ?
|
|
},
|
|
),
|
|
),
|
|
),
|
|
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,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
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,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
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,
|
|
),
|
|
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!,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
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)
|
|
const SizedBox(
|
|
height: 24,
|
|
),
|
|
ConditionalParent(
|
|
condition: isDesktop,
|
|
builder: (child) => Padding(
|
|
padding: const EdgeInsets.only(left: 24),
|
|
child: child,
|
|
),
|
|
child: SizedBox(
|
|
height: isDesktop ? 56 : 40,
|
|
width: isDesktop ? 490 : null,
|
|
child: Toggle(
|
|
onColor: Theme.of(context).extension<StackColors>()!.popupBG,
|
|
onText:
|
|
"Following (${ref.watch(myPaynymAccountStateProvider.state).state?.following.length ?? 0})",
|
|
offColor: Theme.of(context)
|
|
.extension<StackColors>()!
|
|
.textFieldDefaultBG,
|
|
offText:
|
|
"Followers (${ref.watch(myPaynymAccountStateProvider.state).state?.followers.length ?? 0})",
|
|
isOn: showFollowers,
|
|
onValueChanged: (value) {
|
|
setState(() {
|
|
showFollowers = value;
|
|
});
|
|
},
|
|
decoration: BoxDecoration(
|
|
color: Colors.transparent,
|
|
borderRadius: BorderRadius.circular(
|
|
Constants.size.circularBorderRadius,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: isDesktop ? 20 : 16,
|
|
),
|
|
Expanded(
|
|
child: ConditionalParent(
|
|
condition: isDesktop,
|
|
builder: (child) => Padding(
|
|
padding: const EdgeInsets.only(left: 24),
|
|
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,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
child: ConditionalParent(
|
|
condition: !isDesktop,
|
|
builder: (child) => Container(
|
|
child: child,
|
|
),
|
|
child: !showFollowers
|
|
? PaynymFollowingList(
|
|
walletId: widget.walletId,
|
|
)
|
|
: PaynymFollowersList(
|
|
walletId: widget.walletId,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|