desktop wallet network settings expanding advanced rescan

assets/svg/network-wired-2.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6129_18406)">
+<path d="M14.9173 0C15.8835 0 16.6673 0.769499 16.6673 1.71875V5.15625C16.6673 6.10514 15.8835 6.875 14.9173 6.875H13.1673V8.02083H22.5007C23.146 8.02083 23.6673 8.53288 23.6673 9.16667C23.6673 9.80046 23.146 10.3125 22.5007 10.3125H19.0007V11.4583H20.7507C21.7168 11.4583 22.5007 12.2282 22.5007 13.1771V16.6146C22.5007 17.5635 21.7168 18.3333 20.7507 18.3333H14.9173C13.9512 18.3333 13.1673 17.5635 13.1673 16.6146V13.1771C13.1673 12.2282 13.9512 11.4583 14.9173 11.4583H16.6673V10.3125H7.33398V11.4583H9.08398C10.0501 11.4583 10.834 12.2282 10.834 13.1771V16.6146C10.834 17.5635 10.0501 18.3333 9.08398 18.3333H3.25065C2.28414 18.3333 1.50065 17.5635 1.50065 16.6146V13.1771C1.50065 12.2282 2.28414 11.4583 3.25065 11.4583H5.00065V10.3125H1.50065C0.856432 10.3125 0.333984 9.80046 0.333984 9.16667C0.333984 8.53288 0.856432 8.02083 1.50065 8.02083H10.834V6.875H9.08398C8.11784 6.875 7.33398 6.10514 7.33398 5.15625V1.71875C7.33398 0.769499 8.11784 0 9.08398 0H14.9173ZM9.66732 2.29167V4.58333H14.334V2.29167H9.66732ZM8.50065 16.0417V13.75H3.83398V16.0417H8.50065ZM15.5007 13.75V16.0417H20.1673V13.75H15.5007Z" fill="#232323"/>
+</g>
+<defs>
+<clipPath id="clip0_6129_18406">
+<rect width="23.3333" height="18.3333" fill="white" transform="translate(0.333984)"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/confirm_full_rescan.dart

@@ -1,6 +1,11 @@
 import 'package:flutter/material.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/desktop/desktop_dialog.dart';
+import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
+import 'package:stackwallet/widgets/desktop/primary_button.dart';
+import 'package:stackwallet/widgets/desktop/secondary_button.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class ConfirmFullRescanDialog extends StatelessWidget {
@@ -11,40 +16,110 @@ class ConfirmFullRescanDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
+    if (Util.isDesktop) {
-      onWillPop: () async {
+      return DesktopDialog(
-        return true;
+        maxWidth: 576,
-      },
+        child: Column(
-      child: StackDialog(
+          mainAxisSize: MainAxisSize.min,
-        title: "Rescan blockchain",
+          children: [
-        message:
+            Row(
-            "Warning! It may take a while. If you exit before completion, you will have to redo the process.",
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        leftButton: TextButton(
+              children: [
-          style: Theme.of(context)
+                Padding(
-              .extension<StackColors>()!
+                  padding: const EdgeInsets.only(
-              .getSecondaryEnabledButtonColor(context),
+                    left: 32,
-          child: Text(
+                  ),
-            "Cancel",
+                  child: Text(
-            style: STextStyles.itemSubtitle12(context),
+                    "Rescan blockchain",
-          ),
+                    style: STextStyles.desktopH3(context),
-          onPressed: () {
+                  ),
-            Navigator.of(context).pop();
+                ),
-          },
+                const DesktopDialogCloseButton(),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.only(
+                top: 8,
+                left: 32,
+                right: 32,
+                bottom: 32,
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    "Warning! It may take a while. If you exit before completion, you will have to redo the process.",
+                    style: STextStyles.desktopTextSmall(context),
+                  ),
+                  const SizedBox(
+                    height: 43,
+                  ),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: SecondaryButton(
+                          desktopMed: true,
+                          onPressed: Navigator.of(context).pop,
+                          label: "Cancel",
+                        ),
+                      ),
+                      const SizedBox(
+                        width: 16,
+                      ),
+                      Expanded(
+                        child: PrimaryButton(
+                          desktopMed: true,
+                          onPressed: () {
+                            Navigator.of(context).pop();
+                            onConfirm.call();
+                          },
+                          label: "Rescan",
+                        ),
+                      ),
+                    ],
+                  )
+                ],
+              ),
+            )
+          ],
         ),
-        rightButton: TextButton(
+      );
-          style: Theme.of(context)
+    } else {
-              .extension<StackColors>()!
+      return WillPopScope(
-              .getPrimaryEnabledButtonColor(context),
+        onWillPop: () async {
-          child: Text(
+          return true;
-            "Rescan",
+        },
-            style: STextStyles.button(context),
+        child: StackDialog(
+          title: "Rescan blockchain",
+          message:
+              "Warning! It may take a while. If you exit before completion, you will have to redo the process.",
+          leftButton: TextButton(
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getSecondaryEnabledButtonColor(context),
+            child: Text(
+              "Cancel",
+              style: STextStyles.itemSubtitle12(context),
+            ),
+            onPressed: () {
+              Navigator.of(context).pop();
+            },
+          ),
+          rightButton: TextButton(
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context),
+            child: Text(
+              "Rescan",
+              style: STextStyles.button(context),
+            ),
+            onPressed: () {
+              Navigator.of(context).pop();
+              onConfirm.call();
+            },
           ),
-          onPressed: () {
-            Navigator.of(context).pop();
-            onConfirm.call();
-          },
         ),
-      ),
+      );
-    );
+    }
   }
 }

lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart

@@ -28,6 +28,7 @@ import 'package:stackwallet/widgets/animated_text.dart';
 import 'package:stackwallet/widgets/conditional_parent.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
+import 'package:stackwallet/widgets/expandable.dart';
 import 'package:stackwallet/widgets/progress_bar.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -61,7 +62,7 @@ class _WalletNetworkSettingsViewState
     extends ConsumerState<WalletNetworkSettingsView> {
   final double _padding = 16;
   final double _boxPadding = 12;
-  final double _iconSize = 28;
+  final double _iconSize = Util.isDesktop ? 40 : 28;
 
   late final EventBus eventBus;
 
@@ -75,6 +76,7 @@ class _WalletNetworkSettingsViewState
 
   late double _percent;
   late int _blocksRemaining;
+  bool _advancedIsExpanded = true;
 
   Future<void> _attemptRescan() async {
     if (!Platform.isLinux) await Wakelock.enable();
@@ -269,7 +271,7 @@ class _WalletNetworkSettingsViewState
     final bool isDesktop = Util.isDesktop;
 
     final progressLength = isDesktop
-        ? 450.0
+        ? 430.0
         : screenWidth - (_padding * 2) - (_boxPadding * 3) - _iconSize;
 
     final coin = ref
@@ -373,7 +375,7 @@ class _WalletNetworkSettingsViewState
                                       GestureDetector(
                                         onTap: () {
                                           Navigator.of(context).pop();
-                                          showDialog<dynamic>(
+                                          showDialog<void>(
                                             context: context,
                                             useSafeArea: false,
                                             barrierDismissible: true,
@@ -453,11 +455,17 @@ class _WalletNetworkSettingsViewState
               ),
             ],
           ),
-          const SizedBox(
+          SizedBox(
-            height: 9,
+            height: isDesktop ? 12 : 9,
           ),
           if (_currentSyncStatus == WalletSyncStatus.synced)
             RoundedWhiteContainer(
+              borderColor: isDesktop
+                  ? Theme.of(context).extension<StackColors>()!.background
+                  : null,
+              padding: isDesktop
+                  ? const EdgeInsets.all(16)
+                  : const EdgeInsets.all(12),
               child: Row(
                 children: [
                   Container(
@@ -527,6 +535,12 @@ class _WalletNetworkSettingsViewState
             ),
           if (_currentSyncStatus == WalletSyncStatus.syncing)
             RoundedWhiteContainer(
+              borderColor: isDesktop
+                  ? Theme.of(context).extension<StackColors>()!.background
+                  : null,
+              padding: isDesktop
+                  ? const EdgeInsets.all(16)
+                  : const EdgeInsets.all(12),
               child: Row(
                 children: [
                   Container(
@@ -618,6 +632,12 @@ class _WalletNetworkSettingsViewState
             ),
           if (_currentSyncStatus == WalletSyncStatus.unableToSync)
             RoundedWhiteContainer(
+              borderColor: isDesktop
+                  ? Theme.of(context).extension<StackColors>()!.background
+                  : null,
+              padding: isDesktop
+                  ? const EdgeInsets.all(16)
+                  : const EdgeInsets.all(12),
               child: Row(
                 children: [
                   Container(
@@ -708,8 +728,8 @@ class _WalletNetworkSettingsViewState
                 ),
               ),
             ),
-          const SizedBox(
+          SizedBox(
-            height: 20,
+            height: isDesktop ? 32 : 20,
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -740,8 +760,8 @@ class _WalletNetworkSettingsViewState
               ),
             ],
           ),
-          const SizedBox(
+          SizedBox(
-            height: 8,
+            height: isDesktop ? 12 : 8,
           ),
           NodesList(
             coin: ref.watch(walletsChangeNotifierProvider
@@ -750,18 +770,125 @@ class _WalletNetworkSettingsViewState
           ),
           if (isDesktop)
             const SizedBox(
-              height: 20,
+              height: 32,
             ),
           if (isDesktop)
-            Row(
+            Padding(
-              mainAxisAlignment: MainAxisAlignment.start,
+              padding: const EdgeInsets.only(
-              children: [
+                bottom: 12,
-                Text(
+              ),
-                  "Advanced",
+              child: Row(
-                  textAlign: TextAlign.left,
+                mainAxisAlignment: MainAxisAlignment.start,
-                  style: STextStyles.desktopTextExtraExtraSmall(context),
+                children: [
+                  Text(
+                    "Advanced",
+                    textAlign: TextAlign.left,
+                    style: STextStyles.desktopTextExtraExtraSmall(context),
+                  ),
+                ],
+              ),
+            ),
+          if (isDesktop)
+            RoundedWhiteContainer(
+              borderColor: isDesktop
+                  ? Theme.of(context).extension<StackColors>()!.background
+                  : null,
+              padding: isDesktop
+                  ? const EdgeInsets.all(16)
+                  : const EdgeInsets.all(12),
+              child: Expandable(
+                onExpandChanged: (state) {
+                  setState(() {
+                    _advancedIsExpanded = state == ExpandableState.expanded;
+                  });
+                },
+                header: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Row(
+                      children: [
+                        Container(
+                          width: _iconSize,
+                          height: _iconSize,
+                          decoration: BoxDecoration(
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .textFieldDefaultBG,
+                            borderRadius: BorderRadius.circular(_iconSize),
+                          ),
+                          child: Center(
+                            child: SvgPicture.asset(
+                              Assets.svg.networkWired,
+                              width: 24,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textDark,
+                            ),
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Column(
+                          mainAxisSize: MainAxisSize.min,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              "Advanced",
+                              style: STextStyles.desktopTextExtraExtraSmall(
+                                      context)
+                                  .copyWith(
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textDark,
+                              ),
+                            ),
+                            Text(
+                              "Rescan blockchain",
+                              style: STextStyles.desktopTextExtraExtraSmall(
+                                  context),
+                            ),
+                          ],
+                        )
+                      ],
+                    ),
+                    SvgPicture.asset(
+                      _advancedIsExpanded
+                          ? Assets.svg.chevronDown
+                          : Assets.svg.chevronUp,
+                      width: 12,
+                      height: 6,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textSubtitle1,
+                    ),
+                  ],
                 ),
-              ],
+                body: Row(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(
+                        left: 50,
+                        top: 16,
+                        bottom: 6,
+                      ),
+                      child: BlueTextButton(
+                        text: "Rescan",
+                        onTap: () async {
+                          await showDialog<dynamic>(
+                            context: context,
+                            builder: (context) {
+                              return ConfirmFullRescanDialog(
+                                onConfirm: _attemptRescan,
+                              );
+                            },
+                          );
+                        },
+                      ),
+                    ),
+                  ],
+                ),
+              ),
             ),
         ],
       ),

lib/utilities/assets.dart

@@ -101,6 +101,7 @@ class _SVG {
   String get downloadFolder => "assets/svg/folder-down.svg";
   String get lock => "assets/svg/lock-keyhole.svg";
   String get network => "assets/svg/network-wired.svg";
+  String get networkWired => "assets/svg/network-wired-2.svg";
   String get addressBook => "assets/svg/address-book.svg";
   String get addressBook2 => "assets/svg/address-book2.svg";
   String get arrowRotate3 => "assets/svg/rotate-exclamation.svg";

lib/widgets/conditional_parent.dart

@@ -4,13 +4,13 @@ class ConditionalParent extends StatelessWidget {
   const ConditionalParent({
     Key? key,
     required this.condition,
-    required this.child,
     required this.builder,
+    required this.child,
   }) : super(key: key);
 
   final bool condition;
-  final Widget child;
   final Widget Function(Widget) builder;
+  final Widget child;
 
   @override
   Widget build(BuildContext context) {

pubspec.yaml

@@ -237,6 +237,7 @@ flutter:
     - assets/svg/rotate-exclamation.svg
     - assets/svg/folder-down.svg
     - assets/svg/network-wired.svg
+    - assets/svg/network-wired-2.svg
     - assets/svg/address-book.svg
     - assets/svg/address-book2.svg
     - assets/svg/arrow-right.svg