wallet name layout for desktop

lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart

@@ -43,7 +43,6 @@ class CreateOrRestoreWalletView extends StatelessWidget {
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              const Spacer(),
               CreateRestoreWalletTitle(
                 coin: coin,
                 isDesktop: isDesktop,
@@ -51,9 +50,12 @@ class CreateOrRestoreWalletView extends StatelessWidget {
               const SizedBox(
                 height: 16,
               ),
-              CreateRestoreWalletSubTitle(
+              SizedBox(
+                width: 324,
+                child: CreateRestoreWalletSubTitle(
                   isDesktop: isDesktop,
                 ),
+              ),
               const SizedBox(
                 height: 32,
               ),
@@ -68,10 +70,6 @@ class CreateOrRestoreWalletView extends StatelessWidget {
                 coin: coin,
                 isDesktop: isDesktop,
               ),
-              const Spacer(),
-              const SizedBox(
-                height: kDesktopAppBarHeight,
-              ),
             ],
           ),
         ),

lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart

@@ -1,8 +1,12 @@
+import 'dart:async';
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/notifications/show_flush_bar.dart';
 import 'package:stackwallet/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart';
 import 'package:stackwallet/pages/add_wallet_views/restore_wallet_view/restore_options_view.dart';
+import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart';
 import 'package:stackwallet/providers/global/wallets_service_provider.dart';
 import 'package:stackwallet/providers/ui/verify_recovery_phrase/mnemonic_word_count_state_provider.dart';
 import 'package:stackwallet/utilities/assets.dart';
@@ -14,6 +18,8 @@ import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/name_generator.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
+import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
+import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
 import 'package:stackwallet/widgets/icon_widgets/dice_icon.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -21,14 +27,6 @@ import 'package:stackwallet/widgets/stack_text_field.dart';
 import 'package:stackwallet/widgets/textfield_icon_button.dart';
 import 'package:tuple/tuple.dart';
 
-// TODO replace with real list and move out of this file
-const kWalletNameWordList = [
-  "Bubby",
-  "Baby",
-  "Bobby",
-  "Booby",
-];
-
 class NameYourWalletView extends ConsumerStatefulWidget {
   const NameYourWalletView({
     Key? key,
@@ -59,6 +57,8 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
   Set<String> namesToExclude = {};
   late final NameGenerator generator;
 
+  late final bool isDesktop;
+
   Future<String> _generateRandomWalletName() async {
     final name = generator.generate(namesToExclude: namesToExclude);
     namesToExclude.add(name);
@@ -67,6 +67,8 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
 
   @override
   void initState() {
+    isDesktop = Platform.isLinux || Platform.isWindows || Platform.isMacOS;
+
     ref.read(walletsServiceChangeNotifierProvider).walletNames.then(
           (value) => namesToExclude.addAll(
             value.values.map((e) => e.name),
@@ -92,6 +94,20 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
   Widget build(BuildContext context) {
     debugPrint(
         "BUILD: NameYourWalletView with ${coin.name} ${addWalletType.name}");
+
+    if (isDesktop) {
+      return DesktopScaffold(
+        appBar: const DesktopAppBar(
+          leading: AppBarBackButton(),
+          trailing: ExitToMyStackButton(),
+          isCompactHeight: false,
+        ),
+        body: SizedBox(
+          width: 480,
+          child: _content(),
+        ),
+      );
+    } else {
       return Scaffold(
         appBar: AppBar(
           leading: AppBarBackButton(
@@ -116,38 +132,56 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
               builder: (ctx, constraints) {
                 return SingleChildScrollView(
                   child: ConstrainedBox(
-                  constraints: BoxConstraints(minHeight: constraints.maxHeight),
+                    constraints:
+                        BoxConstraints(minHeight: constraints.maxHeight),
                     child: IntrinsicHeight(
-                    child: Column(
+                      child: _content(),
-                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+  }
+
+  Widget _content() => Column(
+        crossAxisAlignment:
+            isDesktop ? CrossAxisAlignment.center : CrossAxisAlignment.stretch,
         children: [
+          if (!isDesktop)
             const Spacer(
               flex: 1,
             ),
+          if (!isDesktop)
             Image(
               image: AssetImage(
                 Assets.png.imageFor(coin: coin),
               ),
               height: 100,
             ),
-                        const SizedBox(
+          SizedBox(
-                          height: 16,
+            height: isDesktop ? 24 : 16,
           ),
           Text(
             "Name your ${coin.prettyName} wallet",
             textAlign: TextAlign.center,
-                          style: STextStyles.pageTitleH1,
+            style: isDesktop ? STextStyles.desktopH2 : STextStyles.pageTitleH1,
           ),
-                        const SizedBox(
+          SizedBox(
-                          height: 8,
+            height: isDesktop ? 16 : 8,
           ),
           Text(
             "Enter a label for your wallet (e.g. Savings)",
             textAlign: TextAlign.center,
-                          style: STextStyles.subtitle,
+            style: isDesktop
+                ? STextStyles.desktopSubtitleH2
+                : STextStyles.subtitle,
           ),
-                        const SizedBox(
+          SizedBox(
-                          height: 16,
+            height: isDesktop ? 40 : 16,
           ),
           ClipRRect(
             borderRadius: BorderRadius.circular(
@@ -173,22 +207,31 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
               },
               focusNode: textFieldFocusNode,
               controller: textEditingController,
-                            style: STextStyles.field,
+              style: isDesktop
+                  ? STextStyles.desktopTextMedium.copyWith(
+                      height: 2,
+                    )
+                  : STextStyles.field,
               decoration: standardInputDecoration(
                 "Enter wallet name",
                 textFieldFocusNode,
               ).copyWith(
                 suffixIcon: Padding(
-                                padding: const EdgeInsets.only(right: 0),
+                  padding: EdgeInsets.only(right: isDesktop ? 6 : 0),
                   child: UnconstrainedBox(
                     child: Row(
                       children: [
                         TextFieldIconButton(
-                                        key: const Key(
+                          key: const Key("genRandomWalletNameButtonKey"),
-                                            "genRandomWalletNameButtonKey"),
                           child: _showDiceIcon
-                                            ? const DiceIcon()
+                              ? DiceIcon(
-                                            : const XIcon(),
+                                  width: isDesktop ? 20 : 17,
+                                  height: isDesktop ? 20 : 17,
+                                )
+                              : XIcon(
+                                  width: isDesktop ? 21 : 18,
+                                  height: isDesktop ? 21 : 18,
+                                ),
                           onTap: () async {
                             if (_showDiceIcon) {
                               textEditingController.text =
@@ -213,35 +256,48 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
               ),
             ),
           ),
-                        const SizedBox(
+          SizedBox(
-                          height: 8,
+            height: isDesktop ? 16 : 8,
           ),
           RoundedWhiteContainer(
             child: Center(
               child: Text(
                 "Roll the dice to pick a random name.",
-                              style: STextStyles.itemSubtitle,
+                style: isDesktop
+                    ? STextStyles.desktopTextExtraSmall.copyWith(
+                        color: CFColors.textSubtitle1,
+                      )
+                    : STextStyles.itemSubtitle,
               ),
             ),
           ),
+          if (!isDesktop)
             const Spacer(
               flex: 4,
             ),
-                        TextButton(
+          if (isDesktop)
+            const SizedBox(
+              height: 32,
+            ),
+          ConstrainedBox(
+            constraints: BoxConstraints(
+              minWidth: isDesktop ? 480 : 0,
+              minHeight: isDesktop ? 70 : 0,
+            ),
+            child: TextButton(
               onPressed: _nextEnabled
                   ? () async {
-                                  final walletsService = ref.read(
+                      final walletsService =
-                                      walletsServiceChangeNotifierProvider);
+                          ref.read(walletsServiceChangeNotifierProvider);
                       final name = textEditingController.text;
 
-                                  if (await walletsService
+                      if (await walletsService.checkForDuplicate(name)) {
-                                      .checkForDuplicate(name)) {
+                        unawaited(showFloatingFlushBar(
-                                    showFloatingFlushBar(
                           type: FlushBarType.warning,
                           message: "Wallet name already in use.",
                           iconAsset: Assets.svg.circleAlert,
                           context: context,
-                                    );
+                        ));
                       } else {
                         // hide keyboard if has focus
                         if (FocusScope.of(context).hasFocus) {
@@ -253,30 +309,27 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
                         if (mounted) {
                           switch (widget.addWalletType) {
                             case AddWalletType.New:
-                                          Navigator.of(context).pushNamed(
+                              unawaited(Navigator.of(context).pushNamed(
-                                            NewWalletRecoveryPhraseWarningView
+                                NewWalletRecoveryPhraseWarningView.routeName,
-                                                .routeName,
                                 arguments: Tuple2(
                                   name,
                                   coin,
                                 ),
-                                          );
+                              ));
                               break;
                             case AddWalletType.Restore:
                               ref
-                                              .read(
+                                  .read(mnemonicWordCountStateProvider.state)
-                                                  mnemonicWordCountStateProvider
+                                  .state = Constants.possibleLengthsForCoin(
-                                                      .state)
+                                      coin)
-                                              .state = Constants
-                                                  .possibleLengthsForCoin(coin)
                                   .first;
-                                          Navigator.of(context).pushNamed(
+                              unawaited(Navigator.of(context).pushNamed(
                                 RestoreOptionsView.routeName,
                                 arguments: Tuple2(
                                   name,
                                   coin,
                                 ),
-                                          );
+                              ));
                               break;
                           }
                         }
@@ -284,39 +337,18 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
                     }
                   : null,
               style: _nextEnabled
-                              ? Theme.of(context)
+                  ? CFColors.getPrimaryEnabledButtonColor(context)
-                                  .textButtonTheme
+                  : CFColors.getPrimaryDisabledButtonColor(context),
-                                  .style
-                                  ?.copyWith(
-                                      backgroundColor:
-                                          MaterialStateProperty.all<Color>(
-                                    CFColors.stackAccent,
-                                  ))
-                              : Theme.of(context)
-                                  .textButtonTheme
-                                  .style
-                                  ?.copyWith(
-                                    backgroundColor:
-                                        MaterialStateProperty.all<Color>(
-                                      CFColors.stackAccent.withOpacity(
-                                        0.25,
-                                      ),
-                                    ),
-                                  ),
               child: Text(
                 "Next",
-                            style: STextStyles.button,
+                style: isDesktop
+                    ? _nextEnabled
+                        ? STextStyles.desktopButtonEnabled
+                        : STextStyles.desktopButtonDisabled
+                    : STextStyles.button,
+              ),
             ),
           ),
         ],
-                    ),
-                  ),
-                ),
       );
-            },
-          ),
-        ),
-      ),
-    );
-  }
 }

lib/widgets/desktop/desktop_scaffold.dart

@@ -18,7 +18,7 @@ class DesktopScaffold extends StatelessWidget {
     return Material(
       color: background,
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
+        // crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           if (appBar != null) appBar!,
           if (body != null)