Merge branch 'dashboard-desktop-view' of https://github.com/cake-tech/cake_wallet into macos-fix-settings-create-wallet

lib/di.dart

@@ -7,7 +7,6 @@ import 'package:cake_wallet/ionia/ionia_anypay.dart';
 import 'package:cake_wallet/ionia/ionia_gift_card.dart';
 import 'package:cake_wallet/ionia/ionia_tip.dart';
 import 'package:cake_wallet/src/screens/buy/onramper_page.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/transactions_page.dart';
 import 'package:cake_wallet/src/screens/settings/display_settings_page.dart';
@@ -371,7 +370,7 @@ Future setup(
 
   getIt.registerFactory<DashboardPage>(() => DashboardPage(
       balancePage: getIt.get<BalancePage>(), 
-      walletViewModel: getIt.get<DashboardViewModel>(), 
+      dashboardViewModel: getIt.get<DashboardViewModel>(),
       addressListViewModel: getIt.get<WalletAddressListViewModel>(),
       desktopSidebarViewModel: getIt.get<DesktopSidebarViewModel>(),
     ));

lib/router.dart

@@ -445,7 +445,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
               ));
 
     case Routes.ioniaWelcomePage:
-      return CupertinoPageRoute<void>(builder: (_) => getIt.get<IoniaWelcomePage>());  
+      return CupertinoPageRoute<void>(
+        fullscreenDialog: true,
+        builder: (_) => getIt.get<IoniaWelcomePage>(),
+      );
     
     case Routes.ioniaLoginPage:
       return CupertinoPageRoute<void>( builder: (_) => getIt.get<IoniaLoginPage>());
@@ -517,8 +520,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
           ));
 
     case Routes.desktop_actions:
-      return CupertinoPageRoute<void>(
+      return PageRouteBuilder(
-          builder: (_) => DesktopDashboardActions(getIt<DashboardViewModel>()));
+        opaque: false,
+        pageBuilder: (_, __, ___) => DesktopDashboardActions(getIt<DashboardViewModel>()),
+      );
     
     case Routes.desktop_settings_page:
       return CupertinoPageRoute<void>(

lib/src/screens/base_page.dart

@@ -1,4 +1,5 @@
 import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
@@ -20,7 +21,7 @@ abstract class BasePage extends StatelessWidget {
 
   String? get title => null;
 
-  bool get isModalBackButton => false;
+  bool get canUseCloseIcon => false;
 
   Color get backgroundLightColor => Colors.white;
 
@@ -50,23 +51,27 @@ abstract class BasePage extends StatelessWidget {
     }
 
     final _backButton = Icon(Icons.arrow_back_ios,
-      color: titleColor ?? Theme.of(context).primaryTextTheme!.headline6!.color!,
+      color: titleColor ?? Theme.of(context).primaryTextTheme.headline6!.color!,
       size: 16,);
     final _closeButton = currentTheme.type == ThemeType.dark
         ? closeButtonImageDarkTheme : closeButtonImage;
 
+    bool isMobileView = ResponsiveLayoutUtil.instance.isMobile(context);
+
     return SizedBox(
-      height: 37,
+      height: isMobileView ? 37 : 45,
-      width: 37,
+      width: isMobileView ? 37 : 45,
       child: ButtonTheme(
         minWidth: double.minPositive,
         child: TextButton(
-            // FIX-ME: Style
+            style: ButtonStyle(
-            //highlightColor: Colors.transparent,
+              overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent),
-            //splashColor: Colors.transparent,
+            ),
-            //padding: EdgeInsets.all(0),
             onPressed: () => onClose(context),
-            child: isModalBackButton ? _closeButton : _backButton),
+            child: canUseCloseIcon && !isMobileView
+                ? _closeButton
+                : _backButton,
+        ),
       ),
     );
   }

lib/src/screens/dashboard/dashboard_page.dart

@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/entities/main_actions.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart';
@@ -29,13 +28,13 @@ import 'package:cake_wallet/main.dart';
 class DashboardPage extends StatelessWidget {
   DashboardPage({
     required this.balancePage,
-    required this.walletViewModel,
+    required this.dashboardViewModel,
     required this.addressListViewModel,
     required this.desktopSidebarViewModel,
   });
 
   final BalancePage balancePage;
-  final DashboardViewModel walletViewModel;
+  final DashboardViewModel dashboardViewModel;
   final WalletAddressListViewModel addressListViewModel;
   final DesktopSidebarViewModel desktopSidebarViewModel;
 
@@ -45,16 +44,15 @@ class DashboardPage extends StatelessWidget {
       body: ResponsiveLayoutUtil.instance.isMobile(context)
           ? _DashboardPageView(
               balancePage: balancePage,
-              walletViewModel: walletViewModel,
+              walletViewModel: dashboardViewModel,
               addressListViewModel: addressListViewModel,
             )
           : DesktopSidebarWrapper(
               desktopSidebarViewModel: desktopSidebarViewModel,
-              dashboardViewModel: walletViewModel,
+              dashboardViewModel: dashboardViewModel,
               child: DesktopDashboardPage(
-                desktopSidebarViewModel: desktopSidebarViewModel,
                 balancePage: balancePage,
-                walletViewModel: walletViewModel,
+                dashboardViewModel: dashboardViewModel,
                 addressListViewModel: addressListViewModel,
               ),
             ),

lib/src/screens/dashboard/desktop_dashboard_page.dart

@@ -1,51 +1,61 @@
 import 'dart:async';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/yat_emoji_id.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
-import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
-import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
-import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
 import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
 import 'package:mobx/mobx.dart';
 import 'package:cake_wallet/main.dart';
+import 'package:cake_wallet/router.dart' as Router;
 
-class DesktopDashboardPage extends BasePage {
+class DesktopDashboardPage extends StatelessWidget {
   DesktopDashboardPage({
     required this.balancePage,
-    required this.walletViewModel,
+    required this.dashboardViewModel,
     required this.addressListViewModel,
-    required this.desktopSidebarViewModel,
   });
 
-  @override
-  Color get backgroundLightColor =>
-      currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
-
-  @override
-  Color get backgroundDarkColor => Colors.transparent;
-
-
-  @override
-  bool get resizeToAvoidBottomInset => false;
-
   final BalancePage balancePage;
-  final DashboardViewModel walletViewModel;
+  final DashboardViewModel dashboardViewModel;
   final WalletAddressListViewModel addressListViewModel;
-  final DesktopSidebarViewModel desktopSidebarViewModel;
+
+  static final GlobalKey<NavigatorState> desktopKey = GlobalKey<NavigatorState>();
 
   bool _isEffectsInstalled = false;
   StreamSubscription<bool>? _onInactiveSub;
 
   @override
-  Widget body(BuildContext context) {
+  Widget build(BuildContext context) {
     _setEffects(context);
 
-    return DesktopDashboardView(balancePage);
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          width: 400,
+          child: balancePage,
+        ),
+        Flexible(
+          child: ConstrainedBox(
+            constraints: BoxConstraints(maxWidth: 500),
+            child: Navigator(
+              key: desktopKey,
+              initialRoute: Routes.desktop_actions,
+              onGenerateRoute: (settings) => Router.createRoute(settings),
+              onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
+                return [
+                  navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
+                ];
+              },
+            ),
+          ),
+        ),
+      ],
+    );
   }
 
   void _setEffects(BuildContext context) async {
@@ -55,7 +65,7 @@ class DesktopDashboardPage extends BasePage {
     _isEffectsInstalled = true;
 
     autorun((_) async {
-      if (!walletViewModel.isOutdatedElectrumWallet) {
+      if (!dashboardViewModel.isOutdatedElectrumWallet) {
         return;
       }
 
@@ -81,13 +91,13 @@ class DesktopDashboardPage extends BasePage {
         Future<void>.delayed(Duration(milliseconds: 500)).then((_) {
           showPopUp<void>(
               context: navigatorKey.currentContext!,
-              builder: (_) => YatEmojiId(walletViewModel.yatStore.emoji));
+              builder: (_) => YatEmojiId(dashboardViewModel.yatStore.emoji));
           needToPresentYat = false;
         });
       }
     });
 
-    walletViewModel.yatStore.emojiIncommingStream.listen((String emoji) {
+    dashboardViewModel.yatStore.emojiIncommingStream.listen((String emoji) {
       if (!_isEffectsInstalled || emoji.isEmpty) {
         return;
       }
@@ -96,3 +106,4 @@ class DesktopDashboardPage extends BasePage {
     });
   }
 }
+

lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart

@@ -1,7 +1,9 @@
 import 'package:cake_wallet/entities/main_actions.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_action_button.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
 
 class DesktopDashboardActions extends StatelessWidget {
   final DashboardViewModel dashboardViewModel;
@@ -10,6 +12,8 @@ class DesktopDashboardActions extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return Observer(
+      builder: (_) {
         return Column(
           children: [
             const SizedBox(height: 16),
@@ -65,7 +69,12 @@ class DesktopDashboardActions extends StatelessWidget {
                 ),
               ],
             ),
+            Expanded(
+              child: MarketPlacePage(dashboardViewModel: dashboardViewModel),
+            ),
           ],
         );
       }
+    );
+  }
 }

lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart

@@ -1,35 +0,0 @@
-import 'package:cake_wallet/routes.dart';
-import 'package:flutter/material.dart';
-import 'package:cake_wallet/router.dart' as Router;
-
-GlobalKey<NavigatorState> desktopKey = GlobalKey<NavigatorState>();
-
-class DesktopDashboardView extends StatelessWidget {
-  final Widget balancePage;
-
-  const DesktopDashboardView(this.balancePage, {Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Expanded(
-          flex: 3,
-          child: balancePage,
-        ),
-        Expanded(
-          flex: 5,
-          child: Navigator(
-            key: desktopKey,
-            initialRoute: Routes.desktop_actions,
-            onGenerateRoute: (settings) => Router.createRoute(settings),
-            onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
-              return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!];
-            },
-          ),
-        ),
-      ],
-    );
-  }
-}

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart

@@ -1,7 +1,7 @@
 import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/routes.dart';
+import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
@@ -31,12 +31,16 @@ class DesktopSidebarWrapper extends BasePage {
       currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
 
   @override
-  Color get backgroundDarkColor => Colors.transparent;
+  Color get backgroundDarkColor => Colors.black.withOpacity(0.1);
+
+  @override
+  bool get resizeToAvoidBottomInset => false;
 
   final pageController = PageController();
 
   final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
   final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
+
   double get sideMenuWidth => 76.0;
 
   @override
@@ -58,7 +62,7 @@ class DesktopSidebarWrapper extends BasePage {
       onTap: () {
         String? currentPath;
 
-        desktopKey.currentState?.popUntil((route) {
+        DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
           currentPath = route.settings.name;
           return true;
         });
@@ -71,7 +75,7 @@ class DesktopSidebarWrapper extends BasePage {
             desktopSidebarViewModel.resetSidebar();
             Future.delayed(Duration(milliseconds: 10), () {
               desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
-              desktopKey.currentState?.pushNamed(Routes.transactionsPage);
+              DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage);
             });
         }
       },
@@ -152,6 +156,8 @@ class DesktopSidebarWrapper extends BasePage {
     );
   }
 
+final desktopKey = DesktopDashboardPage.desktopKey;
+
 void _setEffects() async {
 
    reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {

lib/src/screens/dashboard/widgets/address_page.dart

@@ -42,26 +42,10 @@ class AddressPage extends BasePage {
   bool get resizeToAvoidBottomInset => false;
 
   @override
-  Widget leading(BuildContext context) {
+  Color get titleColor => Colors.white;
-    final _backButton = Icon(Icons.arrow_back_ios,
-      color: Theme.of(context).accentTextTheme!.headline2!.backgroundColor!,
-      size: 16,);
 
-    return SizedBox(
+  @override
-      height: 37,
+  bool get canUseCloseIcon => true;
-      width: 37,
-      child: ButtonTheme(
-        minWidth: double.minPositive,
-        child: TextButton(
-            // FIX-ME: Style
-            //highlightColor: Colors.transparent,
-            //splashColor: Colors.transparent,
-            //padding: EdgeInsets.all(0),
-            onPressed: () => onClose(context),
-            child: _backButton),
-      ),
-    );
-  }
 
   @override
   Widget middle(BuildContext context) {

lib/src/screens/dashboard/widgets/balance_page.dart

@@ -1,10 +1,8 @@
-import 'package:cake_wallet/di.dart';
-import 'package:cake_wallet/src/widgets/standard_list.dart';
 import 'package:cake_wallet/store/settings_store.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
-import 'package:flutter/scheduler.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cake_wallet/src/widgets/introducing_card.dart';
@@ -17,9 +15,6 @@ class BalancePage extends StatelessWidget{
   final DashboardViewModel dashboardViewModel;
   final SettingsStore settingsStore;
 
-  Color get backgroundLightColor =>
-      settingsStore.currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
-
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -29,7 +24,7 @@ class BalancePage extends StatelessWidget{
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SizedBox(height: 56),
+          SizedBox(height: ResponsiveLayoutUtil.instance.isMobile(context) ? 56 : 16),
           Container(
             margin: const EdgeInsets.only(left: 24, bottom: 16),
             child: Observer(builder: (_) {

lib/src/screens/exchange/exchange_page.dart

@@ -1,13 +1,14 @@
-import 'dart:ui';
 import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart';
+import 'package:cake_wallet/src/screens/exchange/widgets/mobile_exchange_cards_section.dart';
+import 'package:cake_wallet/src/widgets/add_template_button.dart';
 import 'package:cake_wallet/utils/debounce.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/sync_status.dart';
 import 'package:cw_core/wallet_type.dart';
 import 'package:cake_wallet/entities/parse_address_from_domain.dart';
 import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.dart';
 import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
-import 'package:dotted_border/dotted_border.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:keyboard_actions/keyboard_actions.dart';
@@ -35,7 +36,14 @@ import 'package:cake_wallet/src/screens/exchange/widgets/present_provider_picker
 import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart';
 
 class ExchangePage extends BasePage {
-  ExchangePage(this.exchangeViewModel);
+  ExchangePage(this.exchangeViewModel) {
+    depositWalletName = exchangeViewModel.depositCurrency == CryptoCurrency.xmr
+        ? exchangeViewModel.wallet.name
+        : null;
+    receiveWalletName = exchangeViewModel.receiveCurrency == CryptoCurrency.xmr
+        ? exchangeViewModel.wallet.name
+        : null;
+  }
 
   final ExchangeViewModel exchangeViewModel;
   final depositKey = GlobalKey<ExchangeCardState>();
@@ -50,6 +58,20 @@ class ExchangePage extends BasePage {
   final _depositAmountDebounce = Debounce(Duration(milliseconds: 500));
   var _isReactionsSet = false;
 
+  final arrowBottomPurple = Image.asset(
+    'assets/images/arrow_bottom_purple_icon.png',
+    color: Colors.white,
+    height: 8,
+  );
+  final arrowBottomCakeGreen = Image.asset(
+    'assets/images/arrow_bottom_cake_green.png',
+    color: Colors.white,
+    height: 8,
+  );
+
+  late final String? depositWalletName;
+  late final String? receiveWalletName;
+
   @override
   String get title => S.current.exchange;
 
@@ -86,28 +108,11 @@ class ExchangePage extends BasePage {
         exchangeViewModel.reset();
       });
 
+  @override
+  bool get canUseCloseIcon => true;
+
   @override
   Widget body(BuildContext context) {
-    final arrowBottomPurple = Image.asset(
-      'assets/images/arrow_bottom_purple_icon.png',
-      color: Colors.white,
-      height: 8,
-    );
-    final arrowBottomCakeGreen = Image.asset(
-      'assets/images/arrow_bottom_cake_green.png',
-      color: Colors.white,
-      height: 8,
-    );
-
-    final depositWalletName =
-        exchangeViewModel.depositCurrency == CryptoCurrency.xmr
-            ? exchangeViewModel.wallet.name
-            : null;
-    final receiveWalletName =
-        exchangeViewModel.receiveCurrency == CryptoCurrency.xmr
-            ? exchangeViewModel.wallet.name
-            : null;
-
     WidgetsBinding.instance
         .addPostFrameCallback((_) => _setReactions(context, exchangeViewModel));
 
@@ -138,201 +143,7 @@ class ExchangePage extends BasePage {
                 contentPadding: EdgeInsets.only(bottom: 24),
                 content: Observer(builder: (_) => Column(
                   children: <Widget>[
-                    Container(
+                    _exchangeCardsSection(context),
-                      padding: EdgeInsets.only(bottom: 32),
-                      decoration: BoxDecoration(
-                        borderRadius: BorderRadius.only(
-                            bottomLeft: Radius.circular(24),
-                            bottomRight: Radius.circular(24)),
-                        gradient: LinearGradient(
-                            colors: [
-                              Theme.of(context).primaryTextTheme!.bodyText2!.color!,
-                              Theme.of(context)
-                                  .primaryTextTheme!
-                                  .bodyText2!
-                                  .decorationColor!,
-                            ],
-                            stops: [
-                              0.35,
-                              1.0
-                            ],
-                            begin: Alignment.topLeft,
-                            end: Alignment.bottomRight),
-                      ),
-                      child: Column(
-                        children: <Widget>[
-                          Container(
-                            decoration: BoxDecoration(
-                              borderRadius: BorderRadius.only(
-                                  bottomLeft: Radius.circular(24),
-                                  bottomRight: Radius.circular(24)),
-                              gradient: LinearGradient(
-                                  colors: [
-                                    Theme.of(context)
-                                        .primaryTextTheme!
-                                        .subtitle2!
-                                        .color!,
-                                    Theme.of(context)
-                                        .primaryTextTheme!
-                                        .subtitle2!
-                                        .decorationColor!,
-                                  ],
-                                  begin: Alignment.topLeft,
-                                  end: Alignment.bottomRight),
-                            ),
-                            padding: EdgeInsets.fromLTRB(24, 100, 24, 32),
-                            child: Observer(
-                              builder: (_) => ExchangeCard(
-                                onDispose: disposeBestRateSync,
-                                hasAllAmount: exchangeViewModel.hasAllAmount,
-                                allAmount: exchangeViewModel.hasAllAmount
-                                    ? () => exchangeViewModel
-                                    .calculateDepositAllAmount()
-                                    : null,
-                                amountFocusNode: _depositAmountFocus,
-                                addressFocusNode: _depositAddressFocus,
-                                key: depositKey,
-                                title: S.of(context).you_will_send,
-                                initialCurrency:
-                                exchangeViewModel.depositCurrency,
-                                initialWalletName: depositWalletName ?? '',
-                                initialAddress:
-                                exchangeViewModel.depositCurrency ==
-                                    exchangeViewModel.wallet.currency
-                                    ? exchangeViewModel.wallet.walletAddresses.address
-                                    : exchangeViewModel.depositAddress,
-                                initialIsAmountEditable: true,
-                                initialIsAddressEditable:
-                                exchangeViewModel.isDepositAddressEnabled,
-                                isAmountEstimated: false,
-                                hasRefundAddress: true,
-                                isMoneroWallet: exchangeViewModel.isMoneroWallet,
-                                currencies: exchangeViewModel.depositCurrencies,
-                                onCurrencySelected: (currency) {
-                                  // FIXME: need to move it into view model
-                                  if (currency == CryptoCurrency.xmr &&
-                                      exchangeViewModel.wallet.type !=
-                                          WalletType.monero) {
-                                    showPopUp<void>(
-                                        context: context,
-                                        builder: (dialogContext) {
-                                          return AlertWithOneAction(
-                                              alertTitle: S.of(context).error,
-                                              alertContent: S
-                                                  .of(context)
-                                                  .exchange_incorrect_current_wallet_for_xmr,
-                                              buttonText: S.of(context).ok,
-                                              buttonAction: () =>
-                                                  Navigator.of(dialogContext)
-                                                      .pop());
-                                        });
-                                    return;
-                                  }
-
-                                  exchangeViewModel.changeDepositCurrency(
-                                      currency: currency);
-                                },
-                                imageArrow: arrowBottomPurple,
-                                currencyButtonColor: Colors.transparent,
-                                addressButtonsColor:
-                                Theme.of(context).focusColor!,
-                                borderColor: Theme.of(context)
-                                    .primaryTextTheme!
-                                    .bodyText1!
-                                    .color!,
-                                currencyValueValidator: AmountValidator(
-                                    type: exchangeViewModel.wallet.type),
-                                addressTextFieldValidator: AddressValidator(
-                                    type: exchangeViewModel.depositCurrency),
-                                onPushPasteButton: (context) async {
-                                  final domain =
-                                      exchangeViewModel.depositAddress;
-                                  final ticker = exchangeViewModel
-                                      .depositCurrency.title.toLowerCase();
-                                  exchangeViewModel.depositAddress =
-                                    await fetchParsedAddress(
-                                        context, domain, ticker);
-                                },
-                                onPushAddressBookButton: (context) async {
-                                  final domain =
-                                      exchangeViewModel.depositAddress;
-                                  final ticker = exchangeViewModel
-                                      .depositCurrency.title.toLowerCase();
-                                  exchangeViewModel.depositAddress =
-                                  await fetchParsedAddress(
-                                      context, domain, ticker);
-                                },
-                              ),
-                            ),
-                          ),
-                          Padding(
-                            padding:
-                            EdgeInsets.only(top: 29, left: 24, right: 24),
-                            child: Observer(
-                                builder: (_) => ExchangeCard(
-                                  onDispose: disposeBestRateSync,
-                                  amountFocusNode: _receiveAmountFocus,
-                                  addressFocusNode: _receiveAddressFocus,
-                                  key: receiveKey,
-                                  title: S.of(context).you_will_get,
-                                  initialCurrency:
-                                  exchangeViewModel.receiveCurrency,
-                                  initialWalletName: receiveWalletName ?? '',
-                                  initialAddress: exchangeViewModel
-                                      .receiveCurrency ==
-                                      exchangeViewModel.wallet.currency
-                                      ? exchangeViewModel.wallet.walletAddresses.address
-                                      : exchangeViewModel.receiveAddress,
-                                  initialIsAmountEditable: exchangeViewModel
-                                      .isReceiveAmountEditable,
-                                  initialIsAddressEditable:
-                                  exchangeViewModel
-                                      .isReceiveAddressEnabled,
-                                  isAmountEstimated: true,
-                                  isMoneroWallet: exchangeViewModel.isMoneroWallet,
-                                  currencies:
-                                    exchangeViewModel.receiveCurrencies,
-                                  onCurrencySelected: (currency) =>
-                                      exchangeViewModel
-                                          .changeReceiveCurrency(
-                                          currency: currency),
-                                  imageArrow: arrowBottomCakeGreen,
-                                  currencyButtonColor: Colors.transparent,
-                                  addressButtonsColor:
-                                  Theme.of(context).focusColor!,
-                                  borderColor: Theme.of(context)
-                                      .primaryTextTheme!
-                                      .bodyText1!
-                                      .decorationColor!,
-                                  currencyValueValidator: AmountValidator(
-                                      type: exchangeViewModel.wallet.type),
-                                  addressTextFieldValidator:
-                                  AddressValidator(
-                                      type: exchangeViewModel
-                                          .receiveCurrency),
-                                  onPushPasteButton: (context) async {
-                                    final domain =
-                                        exchangeViewModel.receiveAddress;
-                                    final ticker = exchangeViewModel
-                                        .receiveCurrency.title.toLowerCase();
-                                    exchangeViewModel.receiveAddress =
-                                      await fetchParsedAddress(
-                                          context, domain, ticker);
-                                  },
-                                  onPushAddressBookButton: (context) async {
-                                    final domain =
-                                        exchangeViewModel.receiveAddress;
-                                    final ticker = exchangeViewModel
-                                        .receiveCurrency.title.toLowerCase();
-                                    exchangeViewModel.receiveAddress =
-                                    await fetchParsedAddress(
-                                        context, domain, ticker);
-                                  },
-                                )),
-                          )
-                        ],
-                      ),
-                    ),
                     Padding(
                       padding: EdgeInsets.only(top: 12, left: 24),
                       child: Row(
@@ -429,50 +240,9 @@ class ExchangePage extends BasePage {
       
             return Row(
               children: <Widget>[
-                GestureDetector(
+                AddTemplateButton(
-                  onTap: () =>
+                  onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate),
-                      Navigator.of(context).pushNamed(Routes.exchangeTemplate),
+                  currentTemplatesLength: templates.length,
-                  child: Container(
-                    padding: EdgeInsets.only(left: 1, right: 10),
-                    child: DottedBorder(
-                      borderType: BorderType.RRect,
-                      dashPattern: [6, 4],
-                      color: Theme.of(context)
-                          .primaryTextTheme!
-                          .headline3!
-                          .decorationColor!,
-                      strokeWidth: 2,
-                      radius: Radius.circular(20),
-                      child: Container(
-                        height: 34,
-                        padding: EdgeInsets.only(left: 10, right: 10),
-                        alignment: Alignment.center,
-                        decoration: BoxDecoration(
-                          borderRadius: BorderRadius.all(Radius.circular(20)),
-                          color: Colors.transparent,
-                        ),
-                        child: templates.length >= 1
-                            ? Icon(
-                                Icons.add,
-                                color: Theme.of(context)
-                                    .primaryTextTheme!
-                                    .headline2!
-                                    .color!,
-                              )
-                            : Text(
-                                S.of(context).new_template,
-                                style: TextStyle(
-                                  fontSize: 14,
-                                  fontWeight: FontWeight.w600,
-                                  color: Theme.of(context)
-                                      .primaryTextTheme!
-                                      .headline2!
-                                      .color!,
-                                ),
-                              ),
-                      ),
-                    ),
-                  ),
                 ),
                 ListView.builder(
                   scrollDirection: Axis.horizontal,
@@ -816,5 +586,124 @@ class ExchangePage extends BasePage {
     }
   }
 
-  void disposeBestRateSync() => exchangeViewModel.bestRateSync?.cancel();
+  void disposeBestRateSync() => exchangeViewModel.bestRateSync.cancel();
+
+  Widget _exchangeCardsSection(BuildContext context) {
+    final firstExchangeCard = Observer(builder: (_) => ExchangeCard(
+      onDispose: disposeBestRateSync,
+      hasAllAmount: exchangeViewModel.hasAllAmount,
+      allAmount: exchangeViewModel.hasAllAmount
+          ? () => exchangeViewModel.calculateDepositAllAmount()
+          : null,
+      amountFocusNode: _depositAmountFocus,
+      addressFocusNode: _depositAddressFocus,
+      key: depositKey,
+      title: S.of(context).you_will_send,
+      initialCurrency: exchangeViewModel.depositCurrency,
+      initialWalletName: depositWalletName ?? '',
+      initialAddress:
+      exchangeViewModel.depositCurrency == exchangeViewModel.wallet.currency
+          ? exchangeViewModel.wallet.walletAddresses.address
+          : exchangeViewModel.depositAddress,
+      initialIsAmountEditable: true,
+      initialIsAddressEditable: exchangeViewModel.isDepositAddressEnabled,
+      isAmountEstimated: false,
+      hasRefundAddress: true,
+      isMoneroWallet: exchangeViewModel.isMoneroWallet,
+      currencies: exchangeViewModel.depositCurrencies,
+      onCurrencySelected: (currency) {
+        // FIXME: need to move it into view model
+        if (currency == CryptoCurrency.xmr &&
+            exchangeViewModel.wallet.type != WalletType.monero) {
+          showPopUp<void>(
+              context: context,
+              builder: (dialogContext) {
+                return AlertWithOneAction(
+                    alertTitle: S.of(context).error,
+                    alertContent:
+                    S.of(context).exchange_incorrect_current_wallet_for_xmr,
+                    buttonText: S.of(context).ok,
+                    buttonAction: () => Navigator.of(dialogContext).pop());
+              });
+          return;
+        }
+
+        exchangeViewModel.changeDepositCurrency(currency: currency);
+      },
+      imageArrow: arrowBottomPurple,
+      currencyButtonColor: Colors.transparent,
+      addressButtonsColor: Theme.of(context).focusColor!,
+      borderColor: Theme.of(context).primaryTextTheme!.bodyText1!.color!,
+      currencyValueValidator:
+      AmountValidator(type: exchangeViewModel.wallet.type),
+      addressTextFieldValidator:
+      AddressValidator(type: exchangeViewModel.depositCurrency),
+      onPushPasteButton: (context) async {
+        final domain = exchangeViewModel.depositAddress;
+        final ticker = exchangeViewModel.depositCurrency.title.toLowerCase();
+        exchangeViewModel.depositAddress =
+        await fetchParsedAddress(context, domain, ticker);
+      },
+      onPushAddressBookButton: (context) async {
+        final domain = exchangeViewModel.depositAddress;
+        final ticker = exchangeViewModel.depositCurrency.title.toLowerCase();
+        exchangeViewModel.depositAddress =
+        await fetchParsedAddress(context, domain, ticker);
+      },
+    ));
+
+    final secondExchangeCard = Observer(builder: (_) => ExchangeCard(
+      onDispose: disposeBestRateSync,
+      amountFocusNode: _receiveAmountFocus,
+      addressFocusNode: _receiveAddressFocus,
+      key: receiveKey,
+      title: S.of(context).you_will_get,
+      initialCurrency: exchangeViewModel.receiveCurrency,
+      initialWalletName: receiveWalletName ?? '',
+      initialAddress:
+      exchangeViewModel.receiveCurrency == exchangeViewModel.wallet.currency
+          ? exchangeViewModel.wallet.walletAddresses.address
+          : exchangeViewModel.receiveAddress,
+      initialIsAmountEditable: exchangeViewModel.isReceiveAmountEditable,
+      initialIsAddressEditable: exchangeViewModel.isReceiveAddressEnabled,
+      isAmountEstimated: true,
+      isMoneroWallet: exchangeViewModel.isMoneroWallet,
+      currencies: exchangeViewModel.receiveCurrencies,
+      onCurrencySelected: (currency) =>
+          exchangeViewModel.changeReceiveCurrency(currency: currency),
+      imageArrow: arrowBottomCakeGreen,
+      currencyButtonColor: Colors.transparent,
+      addressButtonsColor: Theme.of(context).focusColor!,
+      borderColor:
+      Theme.of(context).primaryTextTheme!.bodyText1!.decorationColor!,
+      currencyValueValidator:
+      AmountValidator(type: exchangeViewModel.wallet.type),
+      addressTextFieldValidator:
+      AddressValidator(type: exchangeViewModel.receiveCurrency),
+      onPushPasteButton: (context) async {
+        final domain = exchangeViewModel.receiveAddress;
+        final ticker = exchangeViewModel.receiveCurrency.title.toLowerCase();
+        exchangeViewModel.receiveAddress =
+        await fetchParsedAddress(context, domain, ticker);
+      },
+      onPushAddressBookButton: (context) async {
+        final domain = exchangeViewModel.receiveAddress;
+        final ticker = exchangeViewModel.receiveCurrency.title.toLowerCase();
+        exchangeViewModel.receiveAddress =
+        await fetchParsedAddress(context, domain, ticker);
+      },
+    ));
+
+    if (ResponsiveLayoutUtil.instance.isMobile(context)) {
+      return MobileExchangeCardsSection(
+        firstExchangeCard: firstExchangeCard,
+        secondExchangeCard: secondExchangeCard,
+      );
+    }
+
+    return DesktopExchangeCardsSection(
+      firstExchangeCard: firstExchangeCard,
+      secondExchangeCard: secondExchangeCard,
+    );
+  }
 }

lib/src/screens/exchange/widgets/desktop_exchange_cards_section.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class DesktopExchangeCardsSection extends StatelessWidget {
+  final Widget firstExchangeCard;
+  final Widget secondExchangeCard;
+
+  const DesktopExchangeCardsSection({
+    Key? key,
+    required this.firstExchangeCard,
+    required this.secondExchangeCard,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Padding(
+          padding: EdgeInsets.only(top: 55, left: 24, right: 24),
+          child: firstExchangeCard,
+        ),
+        Padding(
+          padding: EdgeInsets.only(top: 29, left: 24, right: 24),
+          child: secondExchangeCard,
+        ),
+      ],
+    );
+  }
+}

lib/src/screens/exchange/widgets/mobile_exchange_cards_section.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+class MobileExchangeCardsSection extends StatelessWidget {
+  final Widget firstExchangeCard;
+  final Widget secondExchangeCard;
+
+  const MobileExchangeCardsSection({
+    Key? key,
+    required this.firstExchangeCard,
+    required this.secondExchangeCard,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(bottom: 32),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(24),
+          bottomRight: Radius.circular(24),
+        ),
+        gradient: LinearGradient(
+          colors: [
+            Theme.of(context).primaryTextTheme.bodyText2!.color!,
+            Theme.of(context).primaryTextTheme.bodyText2!.decorationColor!,
+          ],
+          stops: [0.35, 1.0],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+      ),
+      child: Column(
+        children: <Widget>[
+          Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
+              gradient: LinearGradient(
+                colors: [
+                  Theme.of(context).primaryTextTheme.subtitle2!.color!,
+                  Theme.of(context).primaryTextTheme.subtitle2!.decorationColor!,
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
+            ),
+            padding: EdgeInsets.fromLTRB(24, 100, 24, 32),
+            child: firstExchangeCard,
+          ),
+          Padding(
+            padding: EdgeInsets.only(top: 29, left: 24, right: 24),
+            child: secondExchangeCard,
+          )
+        ],
+      ),
+    );
+  }
+}

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/entities/generate_name.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:mobx/mobx.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -24,18 +25,14 @@ class NewWalletPage extends BasePage {
 
   final walletNameImage = Image.asset('assets/images/wallet_name.png');
 
-  final walletNameLightImage =
+  final walletNameLightImage = Image.asset('assets/images/wallet_name_light.png');
-      Image.asset('assets/images/wallet_name_light.png');
 
   @override
   String get title => S.current.new_wallet;
 
   @override
   Widget body(BuildContext context) => WalletNameForm(
-      _walletNewVM,
+      _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage);
-      currentTheme.type == ThemeType.dark
-          ? walletNameImage
-          : walletNameLightImage);
 }
 
 class WalletNameForm extends StatefulWidget {
@@ -64,11 +61,9 @@ class _WalletNameFormState extends State<WalletNameForm> {
 
   @override
   void initState() {
-    _stateReaction ??=
+    _stateReaction ??= reaction((_) => _walletNewVM.state, (ExecutionState state) {
-        reaction((_) => _walletNewVM.state, (ExecutionState state) {
       if (state is ExecutedSuccessfullyState) {
-        Navigator.of(context)
+        Navigator.of(context).pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
-            .pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
       }
 
       if (state is FailureState) {
@@ -90,18 +85,21 @@ class _WalletNameFormState extends State<WalletNameForm> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
       padding: EdgeInsets.only(top: 24),
       child: ScrollableWithBottomSection(
           contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-          content:
+          content: Center(
-              Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
+            child: ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
                   Padding(
                     padding: EdgeInsets.only(left: 12, right: 12),
                     child: AspectRatio(
                         aspectRatio: aspectRatioImage,
-                  child:
+                        child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
-                      FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
                   ),
                   Padding(
                     padding: EdgeInsets.only(top: 24),
@@ -117,16 +115,12 @@ class _WalletNameFormState extends State<WalletNameForm> {
                             style: TextStyle(
                                 fontSize: 20.0,
                                 fontWeight: FontWeight.w600,
-                          color:
+                                color: Theme.of(context).primaryTextTheme!.headline6!.color!),
-                              Theme.of(context).primaryTextTheme!.headline6!.color!),
                             decoration: InputDecoration(
                               hintStyle: TextStyle(
                                   fontSize: 18.0,
                                   fontWeight: FontWeight.w500,
-                            color: Theme.of(context)
+                                  color: Theme.of(context).accentTextTheme!.headline2!.color!),
-                                .accentTextTheme!
-                                .headline2!
-                                .color!),
                               hintText: S.of(context).wallet_name,
                               focusedBorder: UnderlineInputBorder(
                                   borderSide: BorderSide(
@@ -194,13 +188,14 @@ class _WalletNameFormState extends State<WalletNameForm> {
                     Padding(
                       padding: EdgeInsets.only(top: 24),
                       child: SeedLanguageSelector(
-                    key: _languageSelectorKey,
+                          key: _languageSelectorKey, initialSelected: defaultSeedLanguage),
-                    initialSelected: defaultSeedLanguage),
                     )
                   ]
-          ]),
+                ],
-          bottomSectionPadding:
+              ),
-              EdgeInsets.all(24),
+            ),
+          ),
+          bottomSectionPadding: EdgeInsets.all(24),
           bottomSection: Column(
             children: [
               Observer(

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/wallet_type.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:flutter/material.dart';
@@ -13,8 +14,7 @@ class NewWalletTypePage extends BasePage {
 
   final void Function(BuildContext, WalletType) onTypeSelected;
   final walletTypeImage = Image.asset('assets/images/wallet_type.png');
-  final walletTypeLightImage =
+  final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
-      Image.asset('assets/images/wallet_type_light.png');
 
   @override
   String get title => S.current.wallet_list_restore_wallet;
@@ -22,14 +22,11 @@ class NewWalletTypePage extends BasePage {
   @override
   Widget body(BuildContext context) => WalletTypeForm(
       onTypeSelected: onTypeSelected,
-    walletImage: currentTheme.type == ThemeType.dark
+      walletImage: currentTheme.type == ThemeType.dark ? walletTypeImage : walletTypeLightImage);
-      ? walletTypeImage
-      : walletTypeLightImage);
 }
 
 class WalletTypeForm extends StatefulWidget {
-  WalletTypeForm({required this.onTypeSelected,
+  WalletTypeForm({required this.onTypeSelected, required this.walletImage});
-       required this.walletImage});
 
   final void Function(BuildContext, WalletType) onTypeSelected;
   final Image walletImage;
@@ -39,22 +36,16 @@ class WalletTypeForm extends StatefulWidget {
 }
 
 class WalletTypeFormState extends State<WalletTypeForm> {
-  WalletTypeFormState()
+  WalletTypeFormState() : types = availableWalletTypes;
-    : types = availableWalletTypes; 
 
   static const aspectRatioImage = 1.22;
 
-  final moneroIcon =
+  final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
-      Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
+  final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
-  final bitcoinIcon =
+  final litecoinIcon = Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
-      Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
-  final litecoinIcon =
-      Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
   final walletTypeImage = Image.asset('assets/images/wallet_type.png');
-  final walletTypeLightImage =
+  final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
-      Image.asset('assets/images/wallet_type_light.png');
+  final havenIcon = Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
-  final havenIcon =
-      Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
 
   WalletType? selected;
   List<WalletType> types;
@@ -69,7 +60,10 @@ class WalletTypeFormState extends State<WalletTypeForm> {
   Widget build(BuildContext context) {
     return ScrollableWithBottomSection(
       contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-      content: Column(
+      content: Center(
+        child: ConstrainedBox(
+          constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+          child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: <Widget>[
               Padding(
@@ -99,6 +93,8 @@ class WalletTypeFormState extends State<WalletTypeForm> {
                   ))
             ],
           ),
+        ),
+      ),
       bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
       bottomSection: PrimaryButton(
         onPressed: () => onTypeSelected(),
@@ -121,7 +117,8 @@ class WalletTypeFormState extends State<WalletTypeForm> {
       case WalletType.haven:
         return havenIcon;
       default:
-        throw Exception('_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
+        throw Exception(
+            '_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
     }
   }
 

lib/src/screens/pin_code/pin_code_widget.dart

@@ -1,17 +1,19 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:another_flushbar/flushbar.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:flutter/services.dart';
 
 class PinCodeWidget extends StatefulWidget {
-  PinCodeWidget(
+  PinCodeWidget({
-      {required Key key,
+    required Key key,
     required this.onFullPin,
     required this.initialPinLength,
     required this.onChangedPin,
     required this.hasLengthSwitcher,
-      this.onChangedPinLength,})
+    this.onChangedPinLength,
-      : super(key: key);
+  }) : super(key: key);
 
   final void Function(String pin, PinCodeState state) onFullPin;
   final void Function(String pin) onChangedPin;
@@ -75,8 +77,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
   void setDefaultPinLength() => changePinLength(widget.initialPinLength);
 
   void calculateAspectRatio() {
-    final renderBox =
+    final renderBox = _gridViewKey.currentContext!.findRenderObject() as RenderBox;
-        _gridViewKey.currentContext!.findRenderObject() as RenderBox;
     final cellWidth = renderBox.size.width / 3;
     final cellHeight = renderBox.size.height / 4;
 
@@ -89,8 +90,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
 
   void changeProcessText(String text) {
     hideProgressText();
-    _progressBar = createBar<void>(text, duration: null)
+    _progressBar = createBar<void>(text, duration: null)..show(_key.currentContext!);
-      ..show(_key.currentContext!);
   }
 
   void close() {
@@ -104,8 +104,8 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
   }
 
   @override
-  Widget build(BuildContext context) => Scaffold(
+  Widget build(BuildContext context) =>
-      key: _key, body: body(context), resizeToAvoidBottomInset: false);
+      Scaffold(key: _key, body: body(context), resizeToAvoidBottomInset: false);
 
   Widget body(BuildContext context) {
     final deleteIconImage = Image.asset(
@@ -117,10 +117,26 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
       color: Theme.of(context).primaryTextTheme!.headline6!.color!,
     );
 
-    return Container(
+    return RawKeyboardListener(
+      focusNode: FocusNode(),
+      autofocus: true,
+      onKey: (keyEvent) {
+        if (keyEvent is RawKeyDownEvent) {
+          if (keyEvent.logicalKey.keyLabel == "Backspace") {
+            _pop();
+            return;
+          }
+          int? number = int.tryParse(keyEvent.character ?? '');
+          if (number != null) {
+            _push(number);
+          }
+        }
+      },
+      child: Container(
         color: Theme.of(context).backgroundColor,
         padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
-      child: Column(children: <Widget>[
+        child: Column(
+          children: <Widget>[
             Spacer(flex: 2),
             Text(title,
                 style: TextStyle(
@@ -165,19 +181,24 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                   style: TextStyle(
                       fontSize: 14.0,
                       fontWeight: FontWeight.normal,
-                    color: Theme.of(context)
+                      color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!),
-                        .accentTextTheme!
+                ),
-                        .bodyText2!
+              )
-                        .decorationColor!),
-              ))
             ],
             Spacer(flex: 1),
             Flexible(
               flex: 24,
+              child: Center(
+                child: ConstrainedBox(
+                  constraints: BoxConstraints(
+                    maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
+                  ),
                   child: Container(
                     key: _gridViewKey,
                     child: _aspectRatio > 0
-                    ? GridView.count(
+                        ? ScrollConfiguration(
+                            behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+                            child: GridView.count(
                               shrinkWrap: true,
                               crossAxisCount: 3,
                               childAspectRatio: _aspectRatio,
@@ -188,8 +209,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
 
                                 if (index == 9) {
                                   return Container(
-                              margin: EdgeInsets.only(
+                                    margin: EdgeInsets.only(left: marginLeft, right: marginRight),
-                                  left: marginLeft, right: marginRight),
                                     child: TextButton(
                                         onPressed: () => null,
                                         // (widget.hasLengthSwitcher ||
@@ -232,13 +252,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                   index = 0;
                                 } else if (index == 11) {
                                   return Container(
-                              margin: EdgeInsets.only(
+                                    margin: EdgeInsets.only(left: marginLeft, right: marginRight),
-                                  left: marginLeft, right: marginRight),
                                     child: TextButton(
                                       onPressed: () => _pop(),
-                                // FIX-ME: Style
+                                      style: TextButton.styleFrom(
-                                //color: Theme.of(context).backgroundColor,
+                                        backgroundColor: Theme.of(context).backgroundColor,
-                                //shape: CircleBorder(),
+                                        shape: CircleBorder(),
+                                      ),
                                       child: deleteIconImage,
                                     ),
                                   );
@@ -247,13 +267,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                 }
 
                                 return Container(
-                            margin: EdgeInsets.only(
+                                  margin: EdgeInsets.only(left: marginLeft, right: marginRight),
-                                left: marginLeft, right: marginRight),
                                   child: TextButton(
                                     onPressed: () => _push(index),
-                              // FIX-ME: Style
+                                    style: TextButton.styleFrom(
-                              //color: Theme.of(context).backgroundColor,
+                                      backgroundColor: Theme.of(context).backgroundColor,
-                              //shape: CircleBorder(),
+                                      shape: CircleBorder(),
+                                    ),
                                     child: Text('$index',
                                         style: TextStyle(
                                             fontSize: 30.0,
@@ -265,9 +285,16 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                   ),
                                 );
                               }),
+                            ),
                           )
-                    : null))
+                        : null,
-      ]),
+                  ),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
     );
   }
 

lib/src/screens/send/send_page.dart

@@ -1,10 +1,12 @@
 import 'package:cake_wallet/entities/fiat_currency.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart';
 import 'package:cake_wallet/src/screens/send/widgets/send_card.dart';
+import 'package:cake_wallet/src/widgets/add_template_button.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
 import 'package:cake_wallet/src/widgets/template_tile.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/view_model/send/output.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -19,7 +21,6 @@ import 'package:cake_wallet/src/widgets/trail_button.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:cake_wallet/view_model/send/send_view_model_state.dart';
 import 'package:cake_wallet/generated/i18n.dart';
-import 'package:dotted_border/dotted_border.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
@@ -50,9 +51,21 @@ class SendPage extends BasePage {
   @override
   bool get extendBodyBehindAppBar => true;
 
+  @override
+  bool get canUseCloseIcon => true;
+
   @override
   AppBarStyle get appBarStyle => AppBarStyle.transparent;
 
+  double _sendCardHeight(BuildContext context) {
+    final double initialHeight = sendViewModel.isElectrumWallet ? 490 : 465;
+
+    if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
+      return initialHeight - 66;
+    }
+    return initialHeight;
+  }
+
   @override
   void onClose(BuildContext context) {
     sendViewModel.onClose();
@@ -107,7 +120,7 @@ class SendPage extends BasePage {
           content: Column(
             children: <Widget>[
               Container(
-                  height: sendViewModel.isElectrumWallet ? 490 : 465,
+                  height: _sendCardHeight(context),
                   child: Observer(
                     builder: (_) {
                       return PageView.builder(
@@ -172,51 +185,9 @@ class SendPage extends BasePage {
 
                       return Row(
                         children: <Widget>[
-                          GestureDetector(
+                          AddTemplateButton(
-                            onTap: () => Navigator.of(context)
+                            onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate),
-                                .pushNamed(Routes.sendTemplate),
+                            currentTemplatesLength: templates.length,
-                            child: Container(
-                              padding: EdgeInsets.only(left: 1, right: 10),
-                              child: DottedBorder(
-                                borderType: BorderType.RRect,
-                                dashPattern: [6, 4],
-                                color: Theme.of(context)
-                                    .primaryTextTheme!
-                                    .headline2!
-                                    .decorationColor!,
-                                strokeWidth: 2,
-                                radius: Radius.circular(20),
-                                child: Container(
-                                  height: 34,
-                                  padding: EdgeInsets.only(left: 10, right: 10),
-                                  alignment: Alignment.center,
-                                  decoration: BoxDecoration(
-                                    borderRadius:
-                                        BorderRadius.all(Radius.circular(20)),
-                                    color: Colors.transparent,
-                                  ),
-                                  child: templates.length >= 1
-                                      ? Icon(
-                                          Icons.add,
-                                          color: Theme.of(context)
-                                              .primaryTextTheme!
-                                              .headline2!
-                                              .color!,
-                                        )
-                                      : Text(
-                                          S.of(context).new_template,
-                                          style: TextStyle(
-                                            fontSize: 14,
-                                            fontWeight: FontWeight.w600,
-                                            color: Theme.of(context)
-                                                .primaryTextTheme!
-                                                .headline2!
-                                                .color!,
-                                          ),
-                                        ),
-                                ),
-                              ),
-                            ),
                           ),
                           ListView.builder(
                             scrollDirection: Axis.horizontal,

lib/src/screens/send/widgets/send_card.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/entities/priority_for_wallet_type.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/transaction_priority.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
@@ -119,7 +120,7 @@ class SendCardState extends State<SendCard>
               color: Colors.transparent,
             )),
         Container(
-          decoration: BoxDecoration(
+          decoration: ResponsiveLayoutUtil.instance.isMobile(context) ? BoxDecoration(
             borderRadius: BorderRadius.only(
                 bottomLeft: Radius.circular(24),
                 bottomRight: Radius.circular(24)),
@@ -130,9 +131,14 @@ class SendCardState extends State<SendCard>
                   .subtitle1!
                   .decorationColor!,
             ], begin: Alignment.topLeft, end: Alignment.bottomRight),
-          ),
+          ) : null,
           child: Padding(
-            padding: EdgeInsets.fromLTRB(24, 100, 24, 32),
+            padding: EdgeInsets.fromLTRB(
+              24,
+              ResponsiveLayoutUtil.instance.isMobile(context) ? 100 : 55,
+              24,
+              ResponsiveLayoutUtil.instance.isMobile(context) ? 32 : 0,
+            ),
             child: SingleChildScrollView(
                 child: Observer(builder: (_) => Column(
                   mainAxisSize: MainAxisSize.min,

lib/src/screens/welcome/welcome_page.dart

@@ -1,4 +1,5 @@
 import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
@@ -38,36 +39,30 @@ class WelcomePage extends BasePage {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        backgroundColor: Theme
+        backgroundColor: Theme.of(context).backgroundColor,
-            .of(context)
-            .backgroundColor,
         resizeToAvoidBottomInset: false,
         body: body(context));
   }
 
   @override
   Widget body(BuildContext context) {
-    final welcomeImage = currentTheme.type == ThemeType.dark
+    final welcomeImage = currentTheme.type == ThemeType.dark ? welcomeImageDark : welcomeImageLight;
-        ? welcomeImageDark : welcomeImageLight;
 
     final newWalletImage = Image.asset('assets/images/new_wallet.png',
         height: 12,
         width: 12,
-        color: Theme
+        color: Theme.of(context).accentTextTheme!.headline5!.decorationColor!);
-            .of(context)
-            .accentTextTheme!
-            .headline5!
-            .decorationColor!);
     final restoreWalletImage = Image.asset('assets/images/restore_wallet.png',
-        height: 12,
+        height: 12, width: 12, color: Theme.of(context).primaryTextTheme!.headline6!.color!);
-        width: 12,
-        color: Theme.of(context)
-            .primaryTextTheme!
-            .headline6!
-            .color!);
 
-    return WillPopScope(onWillPop: () async => false, child: Container(
+    return WillPopScope(
+        onWillPop: () async => false,
+        child: Container(
             padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24),
+            child: Center(
+              child: ConstrainedBox(
+                constraints:
+                    BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: <Widget>[
@@ -75,9 +70,7 @@ class WelcomePage extends BasePage {
                         flex: 2,
                         child: AspectRatio(
                             aspectRatio: aspectRatioImage,
-                    child: FittedBox(child: welcomeImage, fit: BoxFit.fill)
+                            child: FittedBox(child: welcomeImage, fit: BoxFit.fill))),
-                )
-            ),
                     Flexible(
                         flex: 3,
                         child: Column(
@@ -88,17 +81,11 @@ class WelcomePage extends BasePage {
                                 Padding(
                                   padding: EdgeInsets.only(top: 24),
                                   child: Text(
-                            S
+                                    S.of(context).welcome,
-                                .of(context)
-                                .welcome,
                                     style: TextStyle(
                                       fontSize: 18,
                                       fontWeight: FontWeight.w500,
-                              color: Theme
+                                      color: Theme.of(context).accentTextTheme!.headline2!.color!,
-                                  .of(context)
-                                  .accentTextTheme!
-                                  .headline2!
-                                  .color!,
                                     ),
                                     textAlign: TextAlign.center,
                                   ),
@@ -110,10 +97,7 @@ class WelcomePage extends BasePage {
                                     style: TextStyle(
                                       fontSize: 36,
                                       fontWeight: FontWeight.bold,
-                              color: Theme.of(context)
+                                      color: Theme.of(context).primaryTextTheme!.headline6!.color!,
-                                  .primaryTextTheme!
-                                  .headline6!
-                                  .color!,
                                     ),
                                     textAlign: TextAlign.center,
                                   ),
@@ -125,11 +109,7 @@ class WelcomePage extends BasePage {
                                     style: TextStyle(
                                       fontSize: 16,
                                       fontWeight: FontWeight.w500,
-                              color: Theme
+                                      color: Theme.of(context).accentTextTheme!.headline2!.color!,
-                                  .of(context)
-                                  .accentTextTheme!
-                                  .headline2!
-                                  .color!,
                                     ),
                                     textAlign: TextAlign.center,
                                   ),
@@ -139,16 +119,11 @@ class WelcomePage extends BasePage {
                             Column(
                               children: <Widget>[
                                 Text(
-                          S
+                                  S.of(context).please_make_selection,
-                              .of(context)
-                              .please_make_selection,
                                   style: TextStyle(
                                     fontSize: 12,
                                     fontWeight: FontWeight.normal,
-                            color: Theme.of(context)
+                                    color: Theme.of(context).accentTextTheme!.headline2!.color!,
-                                .accentTextTheme!
-                                .headline2!
-                                .color!,
                                   ),
                                   textAlign: TextAlign.center,
                                 ),
@@ -156,16 +131,14 @@ class WelcomePage extends BasePage {
                                   padding: EdgeInsets.only(top: 24),
                                   child: PrimaryImageButton(
                                     onPressed: () =>
-                                Navigator.pushNamed(context,
+                                        Navigator.pushNamed(context, Routes.newWalletFromWelcome),
-                                    Routes.newWalletFromWelcome),
                                     image: newWalletImage,
                                     text: S.of(context).create_new,
                                     color: Theme.of(context)
                                         .accentTextTheme!
                                         .subtitle2!
                                         .decorationColor!,
-                            textColor: Theme
+                                    textColor: Theme.of(context)
-                                .of(context)
                                         .accentTextTheme!
                                         .headline5!
                                         .decorationColor!,
@@ -178,25 +151,18 @@ class WelcomePage extends BasePage {
                                         Navigator.pushNamed(context, Routes.restoreOptions);
                                       },
                                       image: restoreWalletImage,
-                              text: S
+                                      text: S.of(context).restore_wallet,
-                                  .of(context)
+                                      color: Theme.of(context).accentTextTheme!.caption!.color!,
-                                  .restore_wallet,
+                                      textColor:
-                              color: Theme.of(context)
+                                          Theme.of(context).primaryTextTheme!.headline6!.color!),
-                                  .accentTextTheme!
-                                  .caption!
-                                  .color!,
-                              textColor: Theme.of(context)
-                                  .primaryTextTheme!
-                                  .headline6!
-                                  .color!),
                                 )
                               ],
                             )
                           ],
-                )
+                        ))
-            )
                   ],
-        )
+                ),
-    ));
+              ),
+            )));
   }
 }

lib/src/widgets/add_template_button.dart

@@ -0,0 +1,52 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
+import 'package:dotted_border/dotted_border.dart';
+import 'package:flutter/material.dart';
+
+class AddTemplateButton extends StatelessWidget {
+  final Function() onTap;
+  final int currentTemplatesLength;
+
+  const AddTemplateButton({Key? key, required this.onTap, required this.currentTemplatesLength})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: EdgeInsets.only(left: 1, right: 10),
+        child: DottedBorder(
+          borderType: BorderType.RRect,
+          dashPattern: [6, 4],
+          color: Theme.of(context).primaryTextTheme.headline3!.decorationColor!,
+          strokeWidth: 2,
+          radius: Radius.circular(20),
+          child: Container(
+            height: 34,
+            padding: EdgeInsets.symmetric(
+                horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30),
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(20)),
+              color: Colors.transparent,
+            ),
+            child: currentTemplatesLength >= 1
+                ? Icon(
+                    Icons.add,
+                    color: Theme.of(context).primaryTextTheme.headline2!.color!,
+                  )
+                : Text(
+                    S.of(context).new_template,
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: Theme.of(context).primaryTextTheme.headline2!.color!,
+                    ),
+                  ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/widgets/market_place_item.dart

@@ -17,6 +17,9 @@ class MarketPlaceItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: onTap,
+      hoverColor: Colors.transparent,
+      splashColor: Colors.transparent,
+      highlightColor: Colors.transparent,
       child: Stack(
         children: [
           Container(

lib/src/widgets/nav_bar.dart

@@ -2,12 +2,7 @@ import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/cupertino.dart';
 
 class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
-  factory NavBar(
+  factory NavBar({Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) {
-      {Widget? leading,
-      Widget? middle,
-      Widget? trailing,
-      Color? backgroundColor}) {
-
     return NavBar._internal(
         leading: leading,
         middle: middle,
@@ -17,11 +12,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
   }
 
   factory NavBar.withShadow(
-      {Widget? leading,
+      {Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) {
-      Widget? middle,
-      Widget? trailing,
-      Color? backgroundColor}) {
-
     return NavBar._internal(
       leading: leading,
       middle: middle,
@@ -34,8 +25,10 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
           BoxShadow(
             color: Color.fromRGBO(132, 141, 198, 0.11),
             blurRadius: 8,
-                offset: Offset(0, 2))
+            offset: Offset(0, 2),
-          ]),
+          ),
+        ],
+      ),
     );
   }
 
@@ -59,22 +52,26 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
 
   @override
   Widget build(BuildContext context) {
+    if (leading == null && middle == null && trailing == null) {
+      return const SizedBox();
+    }
+
     final pad = height - _originalHeight;
     final paddingTop = pad / 2;
     final _paddingBottom = (pad / 2);
 
     if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
-      return PreferredSize(
+      return Container(
-        preferredSize: Size.fromHeight(height),
-        child: Padding(
         padding: const EdgeInsetsDirectional.only(end: 24),
+        color: backgroundColor,
+        child: Center(
           child: Row(
             mainAxisSize: MainAxisSize.max,
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              if (leading != null) Flexible(child: leading!),
+              if (leading != null) Flexible(child: leading!) else const SizedBox(),
               if (middle != null) middle!,
-              if (trailing != null) trailing!,
+              trailing ?? const SizedBox(),
             ],
           ),
         ),

lib/src/widgets/primary_button.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:dotted_border/dotted_border.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -24,7 +25,9 @@ class PrimaryButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final content = SizedBox(
+    final content = ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
           width: double.infinity,
           height: 52.0,
           child: TextButton(
@@ -45,7 +48,8 @@ class PrimaryButton extends StatelessWidget {
                     color: isDisabled
                         ? textColor.withOpacity(0.5)
                         : textColor)),
-        ));
+          )),
+    );
 
     return isDottedBorder
         ? DottedBorder(
@@ -77,7 +81,9 @@ class LoadingPrimaryButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
           width: double.infinity,
           height: 52.0,
           child: TextButton(
@@ -99,7 +105,8 @@ class LoadingPrimaryButton extends StatelessWidget {
                         ? textColor.withOpacity(0.5)
                         : textColor
                 )),
-        ));
+          )),
+    );
   }
 }
 
@@ -130,7 +137,9 @@ class PrimaryIconButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
           width: double.infinity,
           height: 52.0,
           child: TextButton(
@@ -168,7 +177,8 @@ class PrimaryIconButton extends StatelessWidget {
                 )
               ],
             ),
-        ));
+          )),
+    );
   }
 }
 
@@ -190,7 +200,9 @@ class PrimaryImageButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
           width: double.infinity,
           height: 52.0,
           child: TextButton(
@@ -218,6 +230,7 @@ class PrimaryImageButton extends StatelessWidget {
                 ],
               ),
             )
-        ));
+          )),
+    );
   }
 }

lib/utils/responsive_layout_util.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 class ResponsiveLayoutUtil {
   static const double _kMobileThreshold = 900;
+  static const double kDesktopMaxWidthConstraint = 400;
 
   const ResponsiveLayoutUtil._();
 

macos/Runner.xcodeproj/project.pbxproj

@@ -21,14 +21,14 @@
 /* End PBXAggregateTarget section */
 
 /* Begin PBXBuildFile section */
-		260A2F3C8557E98408EEF103 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */; };
+		328F945957E1041662291EC5 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C84AA35EA80D710889C68D81 /* Pods_Runner.framework */; };
 		335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */ = {isa = PBXBuildFile; fileRef = 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */; };
 		33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC10F02044A3C60003C045 /* AppDelegate.swift */; };
 		33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F22044A3C60003C045 /* Assets.xcassets */; };
 		33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; };
 		33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; };
-		5A1F888E2993FFF400619FD4 /* secRandom.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A1F888D2993FFF400619FD4 /* secRandom.swift */; };
+		9F565D5929954F53009A75FB /* secRandom.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9F565D5729954F53009A75FB /* secRandom.swift */; };
-		5A1F88902994000F00619FD4 /* decrypt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A1F888F2994000F00619FD4 /* decrypt.swift */; };
+		9F565D5A29954F53009A75FB /* decrypt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9F565D5829954F53009A75FB /* decrypt.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -56,7 +56,7 @@
 
 /* Begin PBXFileReference section */
 		0C090639294D3AAC00954DC9 /* libiconv.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libiconv.tbd; path = usr/lib/libiconv.tbd; sourceTree = SDKROOT; };
-		2A2C063A3322F546C19D07F5 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
+		135D3AD0276D31F62BBEDDBF /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
 		333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = "<group>"; };
 		335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = "<group>"; };
 		33CC10ED2044A3C60003C045 /* Cake Wallet.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Cake Wallet.app"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -71,13 +71,13 @@
 		33E51913231747F40026EE4D /* DebugProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = DebugProfile.entitlements; sourceTree = "<group>"; };
 		33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = "<group>"; };
 		33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = "<group>"; };
-		4BBFB4E6C5ECED3763C70B52 /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
+		359F2F22842E234537DED5E3 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
-		5A1F888D2993FFF400619FD4 /* secRandom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = secRandom.swift; path = CakeWallet/secRandom.swift; sourceTree = "<group>"; };
-		5A1F888F2994000F00619FD4 /* decrypt.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = decrypt.swift; path = CakeWallet/decrypt.swift; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = "<group>"; };
-		D4FCC525D86B82897EAA2C70 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
+		9F565D5729954F53009A75FB /* secRandom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = secRandom.swift; path = CakeWallet/secRandom.swift; sourceTree = "<group>"; };
-		E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		9F565D5829954F53009A75FB /* decrypt.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = decrypt.swift; path = CakeWallet/decrypt.swift; sourceTree = "<group>"; };
+		C84AA35EA80D710889C68D81 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		FF499CFF131B036E3C5638D0 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -85,7 +85,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				260A2F3C8557E98408EEF103 /* Pods_Runner.framework in Frameworks */,
+				328F945957E1041662291EC5 /* Pods_Runner.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -106,8 +106,8 @@
 		33CC10E42044A3C60003C045 = {
 			isa = PBXGroup;
 			children = (
-				5A1F888F2994000F00619FD4 /* decrypt.swift */,
+				9F565D5829954F53009A75FB /* decrypt.swift */,
-				5A1F888D2993FFF400619FD4 /* secRandom.swift */,
+				9F565D5729954F53009A75FB /* secRandom.swift */,
 				33FAB671232836740065AC1E /* Runner */,
 				33CEB47122A05771004F2AC0 /* Flutter */,
 				33CC10EE2044A3C60003C045 /* Products */,
@@ -162,9 +162,9 @@
 		9B6E7CA3983216A9E173F00F /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				D4FCC525D86B82897EAA2C70 /* Pods-Runner.debug.xcconfig */,
+				359F2F22842E234537DED5E3 /* Pods-Runner.debug.xcconfig */,
-				4BBFB4E6C5ECED3763C70B52 /* Pods-Runner.release.xcconfig */,
+				135D3AD0276D31F62BBEDDBF /* Pods-Runner.release.xcconfig */,
-				2A2C063A3322F546C19D07F5 /* Pods-Runner.profile.xcconfig */,
+				FF499CFF131B036E3C5638D0 /* Pods-Runner.profile.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -173,7 +173,7 @@
 			isa = PBXGroup;
 			children = (
 				0C090639294D3AAC00954DC9 /* libiconv.tbd */,
-				E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */,
+				C84AA35EA80D710889C68D81 /* Pods_Runner.framework */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -185,13 +185,13 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */;
 			buildPhases = (
-				8E34FE8A171861D3E5428EEA /* [CP] Check Pods Manifest.lock */,
+				8AB41FC42599228A92F51A44 /* [CP] Check Pods Manifest.lock */,
 				33CC10E92044A3C60003C045 /* Sources */,
 				33CC10EA2044A3C60003C045 /* Frameworks */,
 				33CC10EB2044A3C60003C045 /* Resources */,
 				33CC110E2044A8840003C045 /* Bundle Framework */,
 				3399D490228B24CF009A79C7 /* ShellScript */,
-				C20EA636086D5486C5C91CF2 /* [CP] Embed Pods Frameworks */,
+				F015812745AAC61FF550BB30 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -299,7 +299,7 @@
 			shellPath = /bin/sh;
 			shellScript = "\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh && touch Flutter/ephemeral/tripwire";
 		};
-		8E34FE8A171861D3E5428EEA /* [CP] Check Pods Manifest.lock */ = {
+		8AB41FC42599228A92F51A44 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -321,7 +321,7 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C20EA636086D5486C5C91CF2 /* [CP] Embed Pods Frameworks */ = {
+		F015812745AAC61FF550BB30 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -345,8 +345,8 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				5A1F88902994000F00619FD4 /* decrypt.swift in Sources */,
+				9F565D5929954F53009A75FB /* secRandom.swift in Sources */,
-				5A1F888E2993FFF400619FD4 /* secRandom.swift in Sources */,
+				9F565D5A29954F53009A75FB /* decrypt.swift in Sources */,
 				33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */,
 				33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */,
 				335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */,
@@ -414,7 +414,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				MACOSX_DEPLOYMENT_TARGET = 12.0;
+				MACOSX_DEPLOYMENT_TARGET = 10.14;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = macosx;
 				SWIFT_COMPILATION_MODE = wholemodule;
@@ -426,19 +426,24 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
 			buildSettings = {
-				ARCHS = x86_64;
+				ARCHS = arm64;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = 32J6BB6VUS;
 				INFOPLIST_FILE = Runner/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet";
+				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance";
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/../Frameworks",
 				);
+				MACOSX_DEPLOYMENT_TARGET = 12;
+				MARKETING_VERSION = 1.0.0;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_VERSION = 5.0;
 			};
@@ -496,7 +501,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				MACOSX_DEPLOYMENT_TARGET = 12.0;
+				MACOSX_DEPLOYMENT_TARGET = 10.14;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = macosx;
@@ -543,7 +548,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				MACOSX_DEPLOYMENT_TARGET = 12.0;
+				MACOSX_DEPLOYMENT_TARGET = 10.14;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = macosx;
 				SWIFT_COMPILATION_MODE = wholemodule;
@@ -555,19 +560,24 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
 			buildSettings = {
-				ARCHS = x86_64;
+				ARCHS = arm64;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = 32J6BB6VUS;
 				INFOPLIST_FILE = Runner/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet";
+				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance";
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/../Frameworks",
 				);
+				MACOSX_DEPLOYMENT_TARGET = 12;
+				MARKETING_VERSION = 1.0.0;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -578,19 +588,24 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */;
 			buildSettings = {
-				ARCHS = x86_64;
+				ARCHS = arm64;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Runner/Release.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = 32J6BB6VUS;
 				INFOPLIST_FILE = Runner/Info.plist;
+				INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet";
+				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance";
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/../Frameworks",
 				);
+				MACOSX_DEPLOYMENT_TARGET = 12;
+				MARKETING_VERSION = 1.0.0;
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_VERSION = 5.0;
 			};

macos/Runner/Base.lproj/MainMenu.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="20037" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="21507" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="20037"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="21507"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -332,13 +332,13 @@
         </menu>
         <window title="APP_NAME" allowsToolTipsWhenApplicationIsInactive="NO" autorecalculatesKeyViewLoop="NO" releasedWhenClosed="NO" animationBehavior="default" id="QvC-M9-y7g" customClass="MainFlutterWindow" customModule="Cake_Wallet" customModuleProvider="target">
             <windowStyleMask key="styleMask" titled="YES" closable="YES" miniaturizable="YES" resizable="YES"/>
-            <rect key="contentRect" x="335" y="390" width="1390" height="782"/>
+            <rect key="contentRect" x="335" y="390" width="1163" height="755"/>
             <rect key="screenRect" x="0.0" y="0.0" width="1512" height="944"/>
             <view key="contentView" wantsLayer="YES" id="EiT-Mj-1SZ">
-                <rect key="frame" x="0.0" y="0.0" width="1390" height="782"/>
+                <rect key="frame" x="0.0" y="0.0" width="1163" height="755"/>
                 <autoresizingMask key="autoresizingMask"/>
             </view>
-            <point key="canvasLocation" x="252" y="236"/>
+            <point key="canvasLocation" x="138.5" y="222.5"/>
         </window>
     </objects>
 </document>

macos/Runner/InfoBase.plist

@@ -28,5 +28,7 @@
 	<string>MainMenu</string>
 	<key>NSPrincipalClass</key>
 	<string>NSApplication</string>
+	<key>LSApplicationCategoryType</key>
+	<string>public.app-category.finance</string>
 </dict>
 </plist>

scripts/macos/app_env.sh

@@ -16,7 +16,7 @@ fi
 
 CAKEWALLET_NAME="Cake Wallet"
 CAKEWALLET_VERSION="1.0.0"
-CAKEWALLET_BUILD_NUMBER=1
+CAKEWALLET_BUILD_NUMBER=4
 CAKEWALLET_BUNDLE_ID="com.fotolockr.cakewallet"
 
 if ! [[ " ${TYPES[*]} " =~ " ${APP_MACOS_TYPE} " ]]; then