diff --git a/lib/pages/paynym/paynym_home_view.dart b/lib/pages/paynym/paynym_home_view.dart index 6a2f7182e..519865c24 100644 --- a/lib/pages/paynym/paynym_home_view.dart +++ b/lib/pages/paynym/paynym_home_view.dart @@ -8,6 +8,8 @@ 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/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/wallet/my_paynym_account_state_provider.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/constants.dart'; @@ -41,7 +43,7 @@ class PaynymHomeView extends ConsumerStatefulWidget { } class _PaynymHomeViewState extends ConsumerState { - bool showFollowing = false; + bool showFollowers = false; int secretCount = 0; Timer? timer; @@ -521,15 +523,17 @@ class _PaynymHomeViewState extends ConsumerState { width: isDesktop ? 490 : null, child: Toggle( onColor: Theme.of(context).extension()!.popupBG, - onText: "Following", + onText: + "Following (${ref.watch(myPaynymAccountStateProvider.state).state?.following.length ?? 0})", offColor: Theme.of(context) .extension()! .textFieldDefaultBG, - offText: "Followers", - isOn: showFollowing, + offText: + "Followers (${ref.watch(myPaynymAccountStateProvider.state).state?.followers.length ?? 0})", + isOn: showFollowers, onValueChanged: (value) { setState(() { - showFollowing = value; + showFollowers = value; }); }, decoration: BoxDecoration( @@ -544,31 +548,28 @@ class _PaynymHomeViewState extends ConsumerState { SizedBox( height: isDesktop ? 20 : 16, ), - ConditionalParent( - condition: isDesktop, - builder: (child) => Padding( - padding: const EdgeInsets.only(left: 24), - child: SizedBox( - width: 490, - child: child, + Expanded( + child: ConditionalParent( + condition: isDesktop, + builder: (child) => Padding( + padding: const EdgeInsets.only(left: 24), + child: SizedBox( + width: 490, + child: child, + ), ), - ), - child: RoundedWhiteContainer( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Your PayNym contacts will appear here", - style: isDesktop - ? STextStyles.desktopTextExtraExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textSubtitle1, - ) - : STextStyles.label(context), - ), - ], + child: ConditionalParent( + condition: !isDesktop, + builder: (child) => Container( + child: child, + ), + child: !showFollowers + ? PaynymFollowingList( + walletId: widget.walletId, + ) + : PaynymFollowersList( + walletId: widget.walletId, + ), ), ), ), diff --git a/lib/pages/paynym/subwidgets/paynym_followers_list.dart b/lib/pages/paynym/subwidgets/paynym_followers_list.dart new file mode 100644 index 000000000..b0fed7b78 --- /dev/null +++ b/lib/pages/paynym/subwidgets/paynym_followers_list.dart @@ -0,0 +1,126 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages/paynym/subwidgets/paynym_card.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'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/rounded_white_container.dart'; + +class PaynymFollowersList extends ConsumerStatefulWidget { + const PaynymFollowersList({ + Key? key, + required this.walletId, + }) : super(key: key); + + final String walletId; + + @override + ConsumerState createState() => + _PaynymFollowersListState(); +} + +class _PaynymFollowersListState extends ConsumerState { + final isDesktop = Util.isDesktop; + + BorderRadius get _borderRadiusFirst { + return BorderRadius.only( + topLeft: Radius.circular( + Constants.size.circularBorderRadius, + ), + topRight: Radius.circular( + Constants.size.circularBorderRadius, + ), + ); + } + + BorderRadius get _borderRadiusLast { + return BorderRadius.only( + bottomLeft: Radius.circular( + Constants.size.circularBorderRadius, + ), + bottomRight: Radius.circular( + Constants.size.circularBorderRadius, + ), + ); + } + + @override + Widget build(BuildContext context) { + final count = + ref.watch(myPaynymAccountStateProvider.state).state?.followers.length ?? + 0; + if (count == 0) { + return Column( + children: [ + RoundedWhiteContainer( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Your PayNym followers will appear here", + style: isDesktop + ? STextStyles.desktopTextExtraExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textSubtitle1, + ) + : STextStyles.label(context), + ), + ], + ), + ), + ], + ); + } else { + final followers = + ref.watch(myPaynymAccountStateProvider.state).state!.followers; + + if (count == 1) { + return Column( + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: PaynymCard( + walletId: widget.walletId, + label: followers[0].nymName, + paymentCodeString: followers[0].code, + ), + ), + ], + ); + } else { + return ListView.separated( + itemCount: count, + separatorBuilder: (BuildContext context, int index) => Container( + height: 1.5, + color: Colors.transparent, + ), + itemBuilder: (BuildContext context, int index) { + BorderRadius? borderRadius; + if (index == 0) { + borderRadius = _borderRadiusFirst; + } else if (index == count - 1) { + borderRadius = _borderRadiusLast; + } + + return Container( + key: Key("paynymCardKey_${followers[index].nymId}"), + decoration: BoxDecoration( + borderRadius: borderRadius, + color: Theme.of(context).extension()!.popupBG, + ), + child: PaynymCard( + walletId: widget.walletId, + label: followers[index].nymName, + paymentCodeString: followers[index].code, + ), + ); + }, + ); + } + } + } +} diff --git a/lib/pages/paynym/subwidgets/paynym_following_list.dart b/lib/pages/paynym/subwidgets/paynym_following_list.dart new file mode 100644 index 000000000..5ab0c19b5 --- /dev/null +++ b/lib/pages/paynym/subwidgets/paynym_following_list.dart @@ -0,0 +1,126 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/pages/paynym/subwidgets/paynym_card.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'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/rounded_white_container.dart'; + +class PaynymFollowingList extends ConsumerStatefulWidget { + const PaynymFollowingList({ + Key? key, + required this.walletId, + }) : super(key: key); + + final String walletId; + + @override + ConsumerState createState() => + _PaynymFollowingListState(); +} + +class _PaynymFollowingListState extends ConsumerState { + final isDesktop = Util.isDesktop; + + BorderRadius get _borderRadiusFirst { + return BorderRadius.only( + topLeft: Radius.circular( + Constants.size.circularBorderRadius, + ), + topRight: Radius.circular( + Constants.size.circularBorderRadius, + ), + ); + } + + BorderRadius get _borderRadiusLast { + return BorderRadius.only( + bottomLeft: Radius.circular( + Constants.size.circularBorderRadius, + ), + bottomRight: Radius.circular( + Constants.size.circularBorderRadius, + ), + ); + } + + @override + Widget build(BuildContext context) { + final count = + ref.watch(myPaynymAccountStateProvider.state).state?.following.length ?? + 0; + if (count == 0) { + return Column( + children: [ + RoundedWhiteContainer( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Your PayNym contacts will appear here", + style: isDesktop + ? STextStyles.desktopTextExtraExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textSubtitle1, + ) + : STextStyles.label(context), + ), + ], + ), + ), + ], + ); + } else { + final following = + ref.watch(myPaynymAccountStateProvider.state).state!.following; + + if (count == 1) { + return Column( + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(0), + child: PaynymCard( + walletId: widget.walletId, + label: following[0].nymName, + paymentCodeString: following[0].code, + ), + ), + ], + ); + } else { + return ListView.separated( + itemCount: count, + separatorBuilder: (BuildContext context, int index) => Container( + height: 1.5, + color: Colors.transparent, + ), + itemBuilder: (BuildContext context, int index) { + BorderRadius? borderRadius; + if (index == 0) { + borderRadius = _borderRadiusFirst; + } else if (index == count - 1) { + borderRadius = _borderRadiusLast; + } + + return Container( + key: Key("paynymCardKey_${following[index].nymId}"), + decoration: BoxDecoration( + borderRadius: borderRadius, + color: Theme.of(context).extension()!.popupBG, + ), + child: PaynymCard( + walletId: widget.walletId, + label: following[index].nymName, + paymentCodeString: following[index].code, + ), + ); + }, + ); + } + } + } +}