paynym card refactor and paynym details popup for mobile WIP

This commit is contained in:
julian 2023-01-05 16:19:02 -06:00
parent 3d6d3d5d45
commit ca4cdd40c0
5 changed files with 354 additions and 30 deletions

View file

@ -0,0 +1,195 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:stackwallet/models/paynym/paynym_account_lite.dart';
import 'package:stackwallet/notifications/show_flush_bar.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_bot.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/custom_buttons/paynym_follow_toggle_button.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
class PaynymDetailsPopup extends StatefulWidget {
const PaynymDetailsPopup({
Key? key,
required this.walletId,
required this.accountLite,
}) : super(key: key);
final String walletId;
final PaynymAccountLite accountLite;
@override
State<PaynymDetailsPopup> createState() => _PaynymDetailsPopupState();
}
class _PaynymDetailsPopupState extends State<PaynymDetailsPopup> {
@override
Widget build(BuildContext context) {
return DesktopDialog(
maxWidth: MediaQuery.of(context).size.width - 32,
maxHeight: double.infinity,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 24,
top: 24,
right: 24,
bottom: 16,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PayNymBot(
paymentCodeString: widget.accountLite.code,
size: 32,
),
const SizedBox(
width: 12,
),
Text(
widget.accountLite.nymName,
style: STextStyles.w600_12(context),
),
],
),
PrimaryButton(
label: "Connect",
buttonHeight: ButtonHeight.l,
icon: SvgPicture.asset(
Assets.svg.circlePlusFilled,
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.buttonTextPrimary,
),
iconSpacing: 4,
width: 86,
onPressed: () {
// todo notification tx
},
),
],
),
),
Container(
color: Theme.of(context).extension<StackColors>()!.backgroundAppBar,
height: 1,
),
Padding(
padding: const EdgeInsets.only(
left: 24,
top: 16,
right: 24,
bottom: 16,
),
child: Row(
children: [
Expanded(
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 86),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"PayNym address",
style: STextStyles.infoSmall(context),
),
const SizedBox(
height: 6,
),
Text(
widget.accountLite.code,
style: STextStyles.infoSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
const SizedBox(
height: 6,
),
],
),
),
),
const SizedBox(
width: 20,
),
QrImage(
padding: const EdgeInsets.all(0),
size: 86,
data: widget.accountLite.code,
foregroundColor:
Theme.of(context).extension<StackColors>()!.textDark,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 24,
right: 24,
bottom: 24,
),
child: Row(
children: [
Expanded(
child: PaynymFollowToggleButton(
walletId: widget.walletId,
paymentCodeStringToFollow: widget.accountLite.code,
style: PaynymFollowToggleButtonStyle.detailsPopup,
),
),
const SizedBox(
width: 12,
),
Expanded(
child: SecondaryButton(
label: "Copy",
buttonHeight: ButtonHeight.l,
icon: SvgPicture.asset(
Assets.svg.copy,
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.buttonTextSecondary,
),
iconSpacing: 4,
onPressed: () async {
await Clipboard.setData(
ClipboardData(
text: widget.accountLite.code,
),
);
unawaited(
showFloatingFlushBar(
type: FlushBarType.info,
message: "Copied to clipboard",
iconAsset: Assets.svg.copy,
context: context,
),
);
},
),
),
],
),
),
],
),
);
}
}

View file

@ -0,0 +1,102 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/models/paynym/paynym_account_lite.dart';
import 'package:stackwallet/pages/paynym/dialogs/paynym_details_popup.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_bot.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';
class PaynymCardButton extends StatefulWidget {
const PaynymCardButton({
Key? key,
required this.walletId,
required this.accountLite,
}) : super(key: key);
final String walletId;
final PaynymAccountLite accountLite;
@override
State<PaynymCardButton> createState() => _PaynymCardButtonState();
}
class _PaynymCardButtonState extends State<PaynymCardButton> {
final isDesktop = Util.isDesktop;
@override
Widget build(BuildContext context) {
return Padding(
padding: isDesktop
? const EdgeInsets.symmetric(
vertical: 8,
horizontal: 12,
)
: const EdgeInsets.all(4),
child: RawMaterialButton(
padding: const EdgeInsets.all(0),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
onPressed: () {
showDialog<void>(
context: context,
builder: (context) => PaynymDetailsPopup(
accountLite: widget.accountLite,
walletId: widget.walletId,
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
PayNymBot(
size: 32,
paymentCodeString: widget.accountLite.code,
),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.accountLite.nymName,
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldActiveText,
)
: STextStyles.w500_12(context),
),
const SizedBox(
height: 2,
),
Text(
Format.shorten(widget.accountLite.code, 12, 5),
style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context)
: STextStyles.w500_12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
],
),
),
],
),
),
),
);
}
}

View file

@ -2,7 +2,7 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_card.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_card_button.dart';
import 'package:stackwallet/providers/wallet/my_paynym_account_state_provider.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
@ -83,10 +83,9 @@ class _PaynymFollowersListState extends ConsumerState<PaynymFollowersList> {
} else if (count == 1) {
return RoundedWhiteContainer(
padding: const EdgeInsets.all(0),
child: PaynymCard(
child: PaynymCardButton(
walletId: widget.walletId,
label: followers![0].nymName,
paymentCodeString: followers[0].code,
accountLite: followers![0],
),
);
} else {
@ -103,10 +102,9 @@ class _PaynymFollowersListState extends ConsumerState<PaynymFollowersList> {
borderRadius: borderRadius,
color: Theme.of(context).extension<StackColors>()!.popupBG,
),
child: PaynymCard(
child: PaynymCardButton(
walletId: widget.walletId,
label: followers[index].nymName,
paymentCodeString: followers[index].code,
accountLite: followers[index],
),
);
}

View file

@ -2,7 +2,7 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_card.dart';
import 'package:stackwallet/pages/paynym/subwidgets/paynym_card_button.dart';
import 'package:stackwallet/providers/wallet/my_paynym_account_state_provider.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
@ -83,10 +83,9 @@ class _PaynymFollowingListState extends ConsumerState<PaynymFollowingList> {
} else if (count == 1) {
return RoundedWhiteContainer(
padding: const EdgeInsets.all(0),
child: PaynymCard(
child: PaynymCardButton(
walletId: widget.walletId,
label: following![0].nymName,
paymentCodeString: following[0].code,
accountLite: following![0],
),
);
} else {
@ -103,10 +102,9 @@ class _PaynymFollowingListState extends ConsumerState<PaynymFollowingList> {
borderRadius: borderRadius,
color: Theme.of(context).extension<StackColors>()!.popupBG,
),
child: PaynymCard(
child: PaynymCardButton(
walletId: widget.walletId,
label: following[index].nymName,
paymentCodeString: following[index].code,
accountLite: following[index],
),
);
}

View file

@ -2,6 +2,7 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/models/paynym/paynym_account_lite.dart';
import 'package:stackwallet/models/paynym/paynym_response.dart';
import 'package:stackwallet/notifications/show_flush_bar.dart';
@ -10,19 +11,29 @@ import 'package:stackwallet/providers/global/wallets_provider.dart';
import 'package:stackwallet/providers/wallet/my_paynym_account_state_provider.dart';
import 'package:stackwallet/services/coins/coin_paynym_extension.dart';
import 'package:stackwallet/services/coins/dogecoin/dogecoin_wallet.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/loading_indicator.dart';
enum PaynymFollowToggleButtonStyle {
primary,
detailsPopup,
}
class PaynymFollowToggleButton extends ConsumerStatefulWidget {
const PaynymFollowToggleButton({
Key? key,
required this.walletId,
required this.paymentCodeStringToFollow,
this.style = PaynymFollowToggleButtonStyle.primary,
}) : super(key: key);
final String walletId;
final String paymentCodeStringToFollow;
final PaynymFollowToggleButtonStyle style;
@override
ConsumerState<PaynymFollowToggleButton> createState() =>
@ -229,6 +240,18 @@ class _PaynymFollowToggleButtonState
bool _lock = false;
late bool isFollowing;
Future<void> _onPressed() async {
if (!_lock) {
_lock = true;
if (isFollowing) {
await unfollow();
} else {
await follow();
}
_lock = false;
}
}
@override
void initState() {
isFollowing = ref
@ -242,21 +265,29 @@ class _PaynymFollowToggleButtonState
@override
Widget build(BuildContext context) {
return PrimaryButton(
width: isDesktop ? 120 : 84,
buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.l,
label: isFollowing ? "Unfollow" : "Follow",
onPressed: () async {
if (!_lock) {
_lock = true;
if (isFollowing) {
await unfollow();
} else {
await follow();
}
_lock = false;
}
},
);
switch (widget.style) {
case PaynymFollowToggleButtonStyle.primary:
return PrimaryButton(
width: isDesktop ? 120 : 84,
buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.l,
label: isFollowing ? "Unfollow" : "Follow",
onPressed: _onPressed,
);
case PaynymFollowToggleButtonStyle.detailsPopup:
return SecondaryButton(
label: isFollowing ? "- Unfollow" : "+ Follow",
buttonHeight: ButtonHeight.l,
icon: SvgPicture.asset(
Assets.svg.user,
width: 10,
height: 10,
color:
Theme.of(context).extension<StackColors>()!.buttonTextSecondary,
),
iconSpacing: 0,
onPressed: _onPressed,
);
}
}
}