mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-29 21:55:58 +00:00
paynym card refactor and paynym details popup for mobile WIP
This commit is contained in:
parent
3d6d3d5d45
commit
ca4cdd40c0
5 changed files with 354 additions and 30 deletions
195
lib/pages/paynym/dialogs/paynym_details_popup.dart
Normal file
195
lib/pages/paynym/dialogs/paynym_details_popup.dart
Normal 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,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
102
lib/pages/paynym/subwidgets/paynym_card_button.dart
Normal file
102
lib/pages/paynym/subwidgets/paynym_card_button.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue