followers/following paynym lists

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<PaynymHomeView> {
-  bool showFollowing = false;
+  bool showFollowers = false;
   int secretCount = 0;
   Timer? timer;
 
@@ -521,15 +523,17 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
                 width: isDesktop ? 490 : null,
                 child: Toggle(
                   onColor: Theme.of(context).extension<StackColors>()!.popupBG,
-                  onText: "Following",
+                  onText:
+                      "Following (${ref.watch(myPaynymAccountStateProvider.state).state?.following.length ?? 0})",
                   offColor: Theme.of(context)
                       .extension<StackColors>()!
                       .textFieldDefaultBG,
-                  offText: "Followers",
+                  offText:
-                  isOn: showFollowing,
+                      "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<PaynymHomeView> {
             SizedBox(
               height: isDesktop ? 20 : 16,
             ),
-            ConditionalParent(
+            Expanded(
-              condition: isDesktop,
+              child: ConditionalParent(
-              builder: (child) => Padding(
+                condition: isDesktop,
-                padding: const EdgeInsets.only(left: 24),
+                builder: (child) => Padding(
-                child: SizedBox(
+                  padding: const EdgeInsets.only(left: 24),
-                  width: 490,
+                  child: SizedBox(
-                  child: child,
+                    width: 490,
+                    child: child,
+                  ),
                 ),
-              ),
+                child: ConditionalParent(
-              child: RoundedWhiteContainer(
+                  condition: !isDesktop,
-                child: Row(
+                  builder: (child) => Container(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                    child: child,
-                  children: [
+                  ),
-                    Text(
+                  child: !showFollowers
-                      "Your PayNym contacts will appear here",
+                      ? PaynymFollowingList(
-                      style: isDesktop
+                          walletId: widget.walletId,
-                          ? STextStyles.desktopTextExtraExtraSmall(context)
+                        )
-                              .copyWith(
+                      : PaynymFollowersList(
-                              color: Theme.of(context)
+                          walletId: widget.walletId,
-                                  .extension<StackColors>()!
+                        ),
-                                  .textSubtitle1,
-                            )
-                          : STextStyles.label(context),
-                    ),
-                  ],
                 ),
               ),
             ),

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<PaynymFollowersList> createState() =>
+      _PaynymFollowersListState();
+}
+
+class _PaynymFollowersListState extends ConsumerState<PaynymFollowersList> {
+  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<StackColors>()!
+                              .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<StackColors>()!.popupBG,
+              ),
+              child: PaynymCard(
+                walletId: widget.walletId,
+                label: followers[index].nymName,
+                paymentCodeString: followers[index].code,
+              ),
+            );
+          },
+        );
+      }
+    }
+  }
+}

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<PaynymFollowingList> createState() =>
+      _PaynymFollowingListState();
+}
+
+class _PaynymFollowingListState extends ConsumerState<PaynymFollowingList> {
+  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<StackColors>()!
+                              .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<StackColors>()!.popupBG,
+              ),
+              child: PaynymCard(
+                walletId: widget.walletId,
+                label: following[index].nymName,
+                paymentCodeString: following[index].code,
+              ),
+            );
+          },
+        );
+      }
+    }
+  }
+}