Merge pull request #775 from cake-tech/CW-311-remove-drawer-from-mac-os

Replace drawer icon for mac os

lib/di.dart

@@ -8,6 +8,7 @@ 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_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';
 import 'package:cake_wallet/src/screens/settings/other_settings_page.dart';
 import 'package:cake_wallet/src/screens/settings/privacy_page.dart';
@@ -18,6 +19,7 @@ import 'package:cake_wallet/src/screens/ionia/cards/ionia_more_options_page.dart
 import 'package:cake_wallet/src/screens/settings/connection_sync_page.dart';
 import 'package:cake_wallet/themes/theme_list.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
+import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_auth_view_model.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_buy_card_view_model.dart';
 import 'package:cake_wallet/view_model/ionia/ionia_custom_tip_view_model.dart';
@@ -366,7 +368,13 @@ Future setup(
   getIt.registerFactory(() =>
    BalancePage(dashboardViewModel: getIt.get<DashboardViewModel>(), settingsStore: getIt.get<SettingsStore>()));
 
-  getIt.registerFactory<DashboardPage>(() => DashboardPage( balancePage: getIt.get<BalancePage>(), walletViewModel: getIt.get<DashboardViewModel>(), addressListViewModel: getIt.get<WalletAddressListViewModel>()));
+  getIt.registerFactory<DashboardPage>(() => DashboardPage(
+      balancePage: getIt.get<BalancePage>(), 
+      dashboardViewModel: getIt.get<DashboardViewModel>(),
+      addressListViewModel: getIt.get<WalletAddressListViewModel>(),
+      desktopSidebarViewModel: getIt.get<DesktopSidebarViewModel>(),
+    ));
+  getIt.registerFactory<TransactionsPage>(() => TransactionsPage(dashboardViewModel: getIt.get<DashboardViewModel>()));
   getIt.registerFactory<ReceivePage>(() => ReceivePage(
       addressListViewModel: getIt.get<WalletAddressListViewModel>()));
   getIt.registerFactory<AddressPage>(() => AddressPage(
@@ -830,6 +838,8 @@ Future setup(
 
   getIt.registerFactory(() => DesktopWalletSelectionDropDown(getIt.get<WalletListViewModel>()));
 
+  getIt.registerFactory(() => DesktopSidebarViewModel());
+
   getIt.registerFactoryParam<IoniaPaymentStatusViewModel, IoniaAnyPayPaymentInfo, AnyPayPaymentCommittedInfo>(
     (IoniaAnyPayPaymentInfo paymentInfo, AnyPayPaymentCommittedInfo committedInfo)
       => IoniaPaymentStatusViewModel(

lib/router.dart

@@ -6,6 +6,7 @@ import 'package:cake_wallet/src/screens/buy/buy_webview_page.dart';
 import 'package:cake_wallet/src/screens/buy/onramper_page.dart';
 import 'package:cake_wallet/src/screens/buy/pre_order_page.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart';
+import 'package:cake_wallet/src/screens/dashboard/widgets/transactions_page.dart';
 import 'package:cake_wallet/src/screens/settings/desktop_settings/dashboard_settings_page.dart';
 import 'package:cake_wallet/src/screens/settings/display_settings_page.dart';
 import 'package:cake_wallet/src/screens/settings/other_settings_page.dart';
@@ -519,8 +520,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
           ));
 
     case Routes.desktop_actions:
-      return CupertinoPageRoute<void>(
-          builder: (_) => DesktopDashboardActions(getIt<DashboardViewModel>()));
+      return PageRouteBuilder(
+        opaque: false,
+        pageBuilder: (_, __, ___) => DesktopDashboardActions(getIt<DashboardViewModel>()),
+      );
     
     case Routes.desktop_settings_page:
       return CupertinoPageRoute<void>(
@@ -529,6 +532,12 @@ Route<dynamic> createRoute(RouteSettings settings) {
     case Routes.empty_no_route:
       return MaterialPageRoute<void>(
           builder: (_) => SizedBox.shrink());
+    
+    case Routes.transactionsPage:
+      return CupertinoPageRoute<void>(
+          settings: settings,
+          fullscreenDialog: true,
+          builder: (_) => getIt.get<TransactionsPage>());
           
     default:
       return MaterialPageRoute<void>(

lib/routes.dart

@@ -84,4 +84,5 @@ class Routes {
   static const otherSettingsPage = '/other_settings_page';
   static const advancedPrivacySettings = '/advanced_privacy_settings';
   static const desktop_actions = '/desktop_actions';
+  static const transactionsPage = '/transactions_page';
 }

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,
-      width: 37,
+      height: isMobileView ? 37 : 45,
+      width: isMobileView ? 37 : 45,
       child: ButtonTheme(
         minWidth: double.minPositive,
         child: TextButton(
-            // FIX-ME: Style
-            //highlightColor: Colors.transparent,
-            //splashColor: Colors.transparent,
-            //padding: EdgeInsets.all(0),
+            style: ButtonStyle(
+              overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent),
+            ),
             onPressed: () => onClose(context),
-            child: isModalBackButton ? _closeButton : _backButton),
+            child: canUseCloseIcon && !isMobileView
+                ? _closeButton
+                : _backButton,
+        ),
       ),
     );
   }

lib/src/screens/dashboard/dashboard_page.dart

@@ -10,6 +10,7 @@ import 'package:cake_wallet/src/widgets/alert_with_one_action.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: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';
@@ -27,13 +28,15 @@ 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;
 
   @override
   Widget build(BuildContext context) {
@@ -41,13 +44,15 @@ class DashboardPage extends StatelessWidget {
       body: ResponsiveLayoutUtil.instance.isMobile(context)
           ? _DashboardPageView(
               balancePage: balancePage,
-              walletViewModel: walletViewModel,
+              walletViewModel: dashboardViewModel,
               addressListViewModel: addressListViewModel,
             )
           : DesktopSidebarWrapper(
+              desktopSidebarViewModel: desktopSidebarViewModel,
+              dashboardViewModel: dashboardViewModel,
               child: DesktopDashboardPage(
                 balancePage: balancePage,
-                walletViewModel: walletViewModel,
+                dashboardViewModel: dashboardViewModel,
                 addressListViewModel: addressListViewModel,
               ),
             ),

lib/src/screens/dashboard/desktop_dashboard_page.dart

@@ -1,78 +1,61 @@
 import 'dart:async';
-import 'package:cake_wallet/di.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
-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: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/src/screens/dashboard/widgets/sync_indicator.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,
   });
 
-  @override
-  Color get backgroundLightColor =>
-      currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
-
-  @override
-  Color get backgroundDarkColor => Colors.transparent;
-
-  @override
-  Widget Function(BuildContext, Widget) get rootWrapper =>
-      (BuildContext context, Widget scaffold) => Container(
-          decoration: BoxDecoration(
-              gradient: LinearGradient(colors: [
-            Theme.of(context).accentColor,
-            Theme.of(context).scaffoldBackgroundColor,
-            Theme.of(context).primaryColor,
-          ], begin: Alignment.topRight, end: Alignment.bottomLeft)),
-          child: scaffold);
-
-  @override
-  bool get resizeToAvoidBottomInset => false;
-
-  @override
-  Widget? leading(BuildContext context) => getIt<DesktopWalletSelectionDropDown>();
-
-  @override
-  Widget middle(BuildContext context) {
-    return SyncIndicator(
-        dashboardViewModel: walletViewModel,
-        onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
-  }
-
-  @override
-  Widget trailing(BuildContext context) {
-    return Image.asset('assets/images/menu.png',
-        color: Theme.of(context).accentTextTheme.headline2!.backgroundColor!);
-  }
-
   final BalancePage balancePage;
-  final DashboardViewModel walletViewModel;
+  final DashboardViewModel dashboardViewModel;
   final WalletAddressListViewModel addressListViewModel;
 
+  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 {
@@ -82,7 +65,7 @@ class DesktopDashboardPage extends BasePage {
     _isEffectsInstalled = true;
 
     autorun((_) async {
-      if (!walletViewModel.isOutdatedElectrumWallet) {
+      if (!dashboardViewModel.isOutdatedElectrumWallet) {
         return;
       }
 
@@ -108,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;
       }
@@ -123,3 +106,4 @@ class DesktopDashboardPage extends BasePage {
     });
   }
 }
+

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

@@ -1,32 +0,0 @@
-import 'package:cake_wallet/routes.dart';
-import 'package:flutter/material.dart';
-import 'package:cake_wallet/router.dart' as Router;
-
-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(
-            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/side_menu.dart

@@ -6,19 +6,21 @@ class SideMenu extends StatelessWidget {
     super.key,
     required this.topItems,
     required this.bottomItems,
+    required this.width,
   });
+  
   final List<SideMenuItem> topItems;
   final List<SideMenuItem> bottomItems;
+  final double width;
 
   @override
   Widget build(BuildContext context) {
     return Container(
       color: Colors.black.withOpacity(0.1),
-      width: 76,
+      width: width,
       height: MediaQuery.of(context).size.height,
       child: Column(
         children: [
-          SizedBox(height: 20),
           ...topItems,
           Spacer(),
           ...bottomItems,

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_controller.dart

@@ -1,35 +0,0 @@
-import 'dart:async';
-
-class SideMenuController {
-  late int _currentPage;
-
-  int get currentPage => _currentPage;
-
-  SideMenuController({int initialPage = 0}) {
-    _currentPage = initialPage;
-  }
-  final _streameController = StreamController<int>.broadcast();
-
-  Stream<int> get stream => _streameController.stream;
-
-  void changePage(int index) {
-    _currentPage = index;
-    _streameController.sink.add(index);
-  }
-
-  void dispose() {
-    _streameController.close();
-  }
-
-  void addListener(void Function(int) listener) {
-    _streameController.stream.listen(listener);
-  }
-
-  void removeListener(void Function(int) listener) {
-    _streameController.stream.listen(listener).cancel();
-  }
-}
-
-class SideMenuGlobal {
-  static late SideMenuController controller;
-}

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart

@@ -1,59 +1,24 @@
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_controller.dart';
 import 'package:flutter/material.dart';
 
-class SideMenuItem extends StatefulWidget {
+class SideMenuItem extends StatelessWidget {
   const SideMenuItem({
     Key? key,
-    this.onTap,
+    required this.onTap,
     required this.iconPath,
-    required this.priority,
+    required this.isSelected,
   }) : super(key: key);
 
-  final void Function(int, SideMenuController)? onTap;
+  final void Function() onTap;
   final String iconPath;
-  final int priority;
+  final bool isSelected;
 
-  @override
-  _SideMenuItemState createState() => _SideMenuItemState();
-}
-
-class _SideMenuItemState extends State<SideMenuItem> {
-  late int currentPage = SideMenuGlobal.controller.currentPage;
-
-  void _handleChange(int page) {
-    if (mounted) {
-      setState(() {
-        currentPage = page;
-      });
-    }
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
-      setState(() {
-        currentPage = SideMenuGlobal.controller.currentPage;
-      });
-      if (mounted) {
-        SideMenuGlobal.controller.addListener(_handleChange);
+   Color _setColor(BuildContext context) {
+      if (isSelected) {
+        return Theme.of(context).primaryTextTheme.headline6!.color!;
+      } else {
+        return Theme.of(context).highlightColor;
       }
-    });
-  }
-
-  @override
-  void dispose() {
-    SideMenuGlobal.controller.removeListener(_handleChange);
-    super.dispose();
-  }
-
-  Color _setColor() {
-    if (widget.priority == currentPage) {
-      return Theme.of(context).primaryTextTheme.headline6!.color!;
-    } else {
-      return Theme.of(context).highlightColor;
     }
-  }
 
   @override
   Widget build(BuildContext context) {
@@ -61,14 +26,14 @@ class _SideMenuItemState extends State<SideMenuItem> {
       child: Padding(
         padding: EdgeInsets.all(20),
         child: Image.asset(
-          widget.iconPath,
+          iconPath,
           fit: BoxFit.cover,
           height: 30,
           width: 30,
-          color: _setColor(),
+          color: _setColor(context),
         ),
       ),
-      onTap: () => widget.onTap?.call(widget.priority, SideMenuGlobal.controller),
+      onTap: () => onTap.call(),
       highlightColor: Colors.transparent,
       focusColor: Colors.transparent,
       hoverColor: Colors.transparent,

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

@@ -1,65 +1,166 @@
+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_sidebar/side_menu.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_controller.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';
+import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
+import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
+import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/router.dart' as Router;
+import 'package:mobx/mobx.dart';
 
-class DesktopSidebarWrapper extends StatefulWidget {
+class DesktopSidebarWrapper extends BasePage {
   final Widget child;
+  final DesktopSidebarViewModel desktopSidebarViewModel;
+  final DashboardViewModel dashboardViewModel;
 
-  const DesktopSidebarWrapper({required this.child});
+  DesktopSidebarWrapper({
+    required this.child,
+    required this.desktopSidebarViewModel,
+    required this.dashboardViewModel,
+  });
 
   @override
-  State<DesktopSidebarWrapper> createState() => _DesktopSidebarWrapperState();
-}
-
-class _DesktopSidebarWrapperState extends State<DesktopSidebarWrapper> {
-  final page = PageController();
-  final sideMenu = SideMenuController();
+  Color get backgroundLightColor =>
+      currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
 
   @override
-  void initState() {
-    SideMenuGlobal.controller = sideMenu;
-    sideMenu.addListener((p0) {
-      page.jumpToPage(p0);
-    });
-    super.initState();
+  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
+  Widget Function(BuildContext, Widget) get rootWrapper =>
+      (BuildContext context, Widget scaffold) => Container(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: [
+                  Theme.of(context).accentColor,
+                  Theme.of(context).scaffoldBackgroundColor,
+                  Theme.of(context).primaryColor,
+                ],
+                begin: Alignment.topRight,
+                end: Alignment.bottomLeft,
+              ),
+            ),
+            child: scaffold,
+          );
+
+  @override
+  Widget? leading(BuildContext context) => Padding(
+        padding: EdgeInsets.only(left: sideMenuWidth),
+        child: getIt<DesktopWalletSelectionDropDown>(),
+      );
+
+  @override
+  Widget middle(BuildContext context) {
+    return SyncIndicator(
+        dashboardViewModel: dashboardViewModel,
+        onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
   }
 
   @override
-  Widget build(BuildContext context) {
+  Widget trailing(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        String? currentPath;
+
+        DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
+          currentPath = route.settings.name;
+          return true;
+        });
+
+        switch (currentPath) {
+          case Routes.transactionsPage:
+            desktopSidebarViewModel.resetSidebar();
+            break;
+          default:
+            desktopSidebarViewModel.resetSidebar();
+            Future.delayed(Duration(milliseconds: 10), () {
+              desktopSidebarViewModel.onPageChange(SidebarItem.transactions);
+              DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage);
+            });
+        }
+      },
+      child: Observer(
+        builder: (_) {
+          return Image.asset(
+            desktopSidebarViewModel.currentPage == SidebarItem.transactions
+                ? selectedIconPath
+                : unselectedIconPath,
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget body(BuildContext context) {
+    reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
+      String? currentPath;
+
+      DesktopDashboardPage.desktopKey.currentState?.popUntil((route) {
+        currentPath = route.settings.name;
+        return true;
+      });
+      if (page == SidebarItem.transactions) {
+        return;
+      }
+
+      if (currentPath == Routes.transactionsPage) {
+        Navigator.of(DesktopDashboardPage.desktopKey.currentContext!).pop();
+      }
+
+      pageController.jumpToPage(page.index);
+    });
+
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SideMenu(
-          topItems: [
-            SideMenuItem(
-              iconPath: 'assets/images/wallet_outline.png',
-              priority: 0,
-              onTap: (page, _) => sideMenu.changePage(page),
-            ),
-          ],
-          bottomItems: [
-            SideMenuItem(
-              iconPath: 'assets/images/support_icon.png',
-              priority: 1,
-              onTap: (page, _) => sideMenu.changePage(page),
-            ),
-            SideMenuItem(
-              iconPath: 'assets/images/settings_outline.png',
-              priority: 2,
-              onTap: (page, _) => sideMenu.changePage(page),
-            ),
-          ],
-        ),
+        Observer(builder: (_) {
+          return SideMenu(
+            width: sideMenuWidth,
+            topItems: [
+              SideMenuItem(
+                iconPath: 'assets/images/wallet_outline.png',
+                isSelected: desktopSidebarViewModel.currentPage == SidebarItem.dashboard,
+                onTap: () => desktopSidebarViewModel.onPageChange(SidebarItem.dashboard),
+              ),
+            ],
+            bottomItems: [
+              SideMenuItem(
+                  iconPath: 'assets/images/support_icon.png',
+                  isSelected: desktopSidebarViewModel.currentPage == SidebarItem.support,
+                  onTap: () => desktopSidebarViewModel.onPageChange(SidebarItem.support)),
+              SideMenuItem(
+                iconPath: 'assets/images/settings_outline.png',
+                isSelected: desktopSidebarViewModel.currentPage == SidebarItem.settings,
+                onTap: () => desktopSidebarViewModel.onPageChange(SidebarItem.settings),
+              ),
+            ],
+          );
+        }),
         Expanded(
           child: PageView(
-            controller: page,
+            controller: pageController,
             physics: NeverScrollableScrollPhysics(),
             children: [
-              widget.child,
+              child,
               Container(
+                padding: EdgeInsets.all(20),
                 child: Navigator(
                   initialRoute: Routes.support,
                   onGenerateRoute: (settings) => Router.createRoute(settings),

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) {
-    final _backButton = Icon(Icons.arrow_back_ios,
-      color: Theme.of(context).accentTextTheme!.headline2!.backgroundColor!,
-      size: 16,);
+  Color get titleColor => Colors.white;
 
-    return SizedBox(
-      height: 37,
-      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
+  bool get canUseCloseIcon => true;
 
   @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';
@@ -16,9 +14,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) {
@@ -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/dashboard/widgets/transactions_page.dart

@@ -22,6 +22,7 @@ class TransactionsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
+      color: Theme.of(context).backgroundColor,
       padding: EdgeInsets.only(
         top: 24,
         bottom: 24

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(
-                      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);
-                                  },
-                                )),
-                          )
-                        ],
-                      ),
-                    ),
+                    _exchangeCardsSection(context),
                     Padding(
                       padding: EdgeInsets.only(top: 12, left: 24),
                       child: Row(
@@ -429,50 +240,9 @@ class ExchangePage extends BasePage {
       
             return Row(
               children: <Widget>[
-                GestureDetector(
-                  onTap: () =>
-                      Navigator.of(context).pushNamed(Routes.exchangeTemplate),
-                  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!,
-                                ),
-                              ),
-                      ),
-                    ),
-                  ),
+                AddTemplateButton(
+                  onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate),
+                  currentTemplatesLength: templates.length,
                 ),
                 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

@@ -91,8 +91,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
           contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
           content: Center(
             child: ConstrainedBox(
-              constraints:
-                  BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+              constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
@@ -197,32 +196,29 @@ class _WalletNameFormState extends State<WalletNameForm> {
             ),
           ),
           bottomSectionPadding: EdgeInsets.all(24),
-          bottomSection: ConstrainedBox(
-            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
-            child: Column(
-              children: [
-                Observer(
-                  builder: (context) {
-                    return LoadingPrimaryButton(
-                      onPressed: _confirmForm,
-                      text: S.of(context).seed_language_next,
-                      color: Colors.green,
-                      textColor: Colors.white,
-                      isLoading: _walletNewVM.state is IsExecutingState,
-                      isDisabled: _walletNewVM.name.isEmpty,
-                    );
-                  },
-                ),
-                const SizedBox(height: 25),
-                GestureDetector(
-                  onTap: () {
-                    Navigator.of(context)
-                        .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type);
-                  },
-                  child: Text(S.of(context).advanced_privacy_settings),
-                ),
-              ],
-            ),
+          bottomSection: Column(
+            children: [
+              Observer(
+                builder: (context) {
+                  return LoadingPrimaryButton(
+                    onPressed: _confirmForm,
+                    text: S.of(context).seed_language_next,
+                    color: Colors.green,
+                    textColor: Colors.white,
+                    isLoading: _walletNewVM.state is IsExecutingState,
+                    isDisabled: _walletNewVM.name.isEmpty,
+                  );
+                },
+              ),
+              const SizedBox(height: 25),
+              GestureDetector(
+                onTap: () {
+                  Navigator.of(context)
+                      .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type);
+                },
+                child: Text(S.of(context).advanced_privacy_settings),
+              ),
+            ],
           )),
     );
   }

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -96,15 +96,12 @@ class WalletTypeFormState extends State<WalletTypeForm> {
         ),
       ),
       bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-      bottomSection: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
-        child: PrimaryButton(
-          onPressed: () => onTypeSelected(),
-          text: S.of(context).seed_language_next,
-          color: Theme.of(context).accentTextTheme.bodyText1!.color!,
-          textColor: Colors.white,
-          isDisabled: selected == null,
-        ),
+      bottomSection: PrimaryButton(
+        onPressed: () => onTypeSelected(),
+        text: S.of(context).seed_language_next,
+        color: Theme.of(context).accentTextTheme.bodyText1!.color!,
+        textColor: Colors.white,
+        isDisabled: selected == 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(
-                            onTap: () => Navigator.of(context)
-                                .pushNamed(Routes.sendTemplate),
-                            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!,
-                                          ),
-                                        ),
-                                ),
-                              ),
-                            ),
+                          AddTemplateButton(
+                            onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate),
+                            currentTemplatesLength: templates.length,
                           ),
                           ListView.builder(
                             scrollDirection: Axis.horizontal,
@@ -339,7 +310,7 @@ class SendPage extends BasePage {
                         showErrorValidationAlert(context);
                         return;
                       }
-                      
+
                       await sendViewModel.createTransaction();
 
                     },

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/settings/desktop_settings/dashboard_settings_page.dart

@@ -1,6 +1,5 @@
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/routes.dart';
-import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_controller.dart';
 import 'package:cake_wallet/src/widgets/setting_action_button.dart';
 import 'package:cake_wallet/src/widgets/setting_actions.dart';
 import 'package:cake_wallet/typography.dart';
@@ -17,19 +16,12 @@ class DesktopSettingsPage extends StatefulWidget {
 }
 
 class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
-  int itemCount = 0;
-  SideMenuController sideMenu = SideMenuController();
+  final int itemCount = SettingActions.all.length;
   int? currentPage;
-  bool isTapped = false;
 
-  initState() {
-    super.initState();
-    itemCount = SettingActions.all.length;
-    sideMenu.addListener((index) {
-      setState(() {
-        isTapped = true;
-        currentPage = index;
-      });
+  void _onItemChange(int index) {
+    setState(() {
+      currentPage = index;
     });
   }
 
@@ -60,15 +52,15 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
                           final isLastTile = index == itemCount;
                           return SettingActionButton(
                             isLastTile: isLastTile,
-                            selectionActive: isTapped,
+                            selectionActive: currentPage != null,
                             isSelected: currentPage == index,
                             isArrowVisible: true,
                             onTap: () {
                               if (currentPage != index) {
                                 final settingContext =
                                     _settingsNavigatorKey.currentState?.context ?? context;
-                                sideMenu.changePage(index);
                                 item.onTap.call(settingContext);
+                                _onItemChange(index);
                               }
                             },
                             image: item.image,

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/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(
-      {Widget? leading,
-      Widget? middle,
-      Widget? trailing,
-      Color? backgroundColor}) {
-
+  factory NavBar({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? middle,
-      Widget? trailing,
-      Color? backgroundColor}) {
-
+      {Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) {
     return NavBar._internal(
       leading: leading,
       middle: middle,
@@ -29,13 +20,15 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
       height: 80,
       backgroundColor: backgroundColor,
       decoration: BoxDecoration(
-          color: backgroundColor,
-          boxShadow: [
-            BoxShadow(
-                color: Color.fromRGBO(132, 141, 198, 0.11),
-                blurRadius: 8,
-                offset: Offset(0, 2))
-          ]),
+        color: backgroundColor,
+        boxShadow: [
+          BoxShadow(
+            color: Color.fromRGBO(132, 141, 198, 0.11),
+            blurRadius: 8,
+            offset: Offset(0, 2),
+          ),
+        ],
+      ),
     );
   }
 
@@ -59,20 +52,24 @@ 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(
-        preferredSize: Size.fromHeight(height),
-        child: Padding(
-          padding: const EdgeInsetsDirectional.only(end: 24),
+      return Container(
+        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!,
               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,28 +25,31 @@ class PrimaryButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final content = SizedBox(
-        width: double.infinity,
-        height: 52.0,
-        child: TextButton(
-          onPressed: isDisabled
-              ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed,
-          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
-              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-                RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(26.0),
+    final content = ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
+          width: double.infinity,
+          height: 52.0,
+          child: TextButton(
+            onPressed: isDisabled
+                ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed,
+            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
+                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                  RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(26.0),
+                  ),
                 ),
-              ),
-            overlayColor: MaterialStateProperty.all(Colors.transparent)),
-          child: Text(text,
-              textAlign: TextAlign.center,
-              style: TextStyle(
-                  fontSize: 15.0,
-                  fontWeight: FontWeight.w600,
-                  color: isDisabled
-                      ? textColor.withOpacity(0.5)
-                      : textColor)),
-        ));
+              overlayColor: MaterialStateProperty.all(Colors.transparent)),
+            child: Text(text,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                    fontSize: 15.0,
+                    fontWeight: FontWeight.w600,
+                    color: isDisabled
+                        ? textColor.withOpacity(0.5)
+                        : textColor)),
+          )),
+    );
 
     return isDottedBorder
         ? DottedBorder(
@@ -77,29 +81,32 @@ class LoadingPrimaryButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-        width: double.infinity,
-        height: 52.0,
-        child: TextButton(
-          onPressed: (isLoading || isDisabled) ? null : onPressed,
-          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
-            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-              RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(26.0),
-              ),
-            )),
-
-          child: isLoading
-              ? CupertinoActivityIndicator(animating: true)
-              : Text(text,
-              style: TextStyle(
-                  fontSize: 15.0,
-                  fontWeight: FontWeight.w600,
-                  color: isDisabled
-                      ? textColor.withOpacity(0.5)
-                      : textColor
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
+          width: double.infinity,
+          height: 52.0,
+          child: TextButton(
+            onPressed: (isLoading || isDisabled) ? null : onPressed,
+            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
+              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(26.0),
+                ),
               )),
-        ));
+
+            child: isLoading
+                ? CupertinoActivityIndicator(animating: true)
+                : Text(text,
+                style: TextStyle(
+                    fontSize: 15.0,
+                    fontWeight: FontWeight.w600,
+                    color: isDisabled
+                        ? textColor.withOpacity(0.5)
+                        : textColor
+                )),
+          )),
+    );
   }
 }
 
@@ -130,45 +137,48 @@ class PrimaryIconButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-        width: double.infinity,
-        height: 52.0,
-        child: TextButton(
-          onPressed: onPressed,
-          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
-              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-                RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(radius),
-                ),
-              )),
-          child: Stack(
-            children: <Widget>[
-              Row(
-                mainAxisAlignment: mainAxisAlignment,
-                children: <Widget>[
-                  Container(
-                    width: 26.0,
-                    height: 52.0,
-                    decoration: BoxDecoration(
-                        shape: BoxShape.circle, color: iconBackgroundColor),
-                    child: Center(
-                        child: Icon(iconData, color: iconColor, size: 22.0)
-                    ),
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
+          width: double.infinity,
+          height: 52.0,
+          child: TextButton(
+            onPressed: onPressed,
+            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
+                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                  RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(radius),
                   ),
-                ],
-              ),
-              Container(
-                height: 52.0,
-                child: Center(
-                  child: Text(text,
-                      style: TextStyle(
-                          fontSize: 16.0,
-                          color: textColor)),
+                )),
+            child: Stack(
+              children: <Widget>[
+                Row(
+                  mainAxisAlignment: mainAxisAlignment,
+                  children: <Widget>[
+                    Container(
+                      width: 26.0,
+                      height: 52.0,
+                      decoration: BoxDecoration(
+                          shape: BoxShape.circle, color: iconBackgroundColor),
+                      child: Center(
+                          child: Icon(iconData, color: iconColor, size: 22.0)
+                      ),
+                    ),
+                  ],
                 ),
-              )
-            ],
-          ),
-        ));
+                Container(
+                  height: 52.0,
+                  child: Center(
+                    child: Text(text,
+                        style: TextStyle(
+                            fontSize: 16.0,
+                            color: textColor)),
+                  ),
+                )
+              ],
+            ),
+          )),
+    );
   }
 }
 
@@ -190,34 +200,37 @@ class PrimaryImageButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-        width: double.infinity,
-        height: 52.0,
-        child: TextButton(
-          onPressed: onPressed,
-          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
-              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-                RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(26.0),
-                ),
-              )),
-          child:Center(
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: <Widget>[
-                image,
-                SizedBox(width: 15),
-                Text(
-                  text,
-                  style: TextStyle(
-                    fontSize: 15,
-                    fontWeight: FontWeight.w600,
-                    color: textColor
+    return ConstrainedBox(
+      constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+      child: SizedBox(
+          width: double.infinity,
+          height: 52.0,
+          child: TextButton(
+            onPressed: onPressed,
+            style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color),
+                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                  RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(26.0),
                   ),
-                )
-              ],
-            ),
-          )
-        ));
+                )),
+            child:Center(
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: <Widget>[
+                  image,
+                  SizedBox(width: 15),
+                  Text(
+                    text,
+                    style: TextStyle(
+                      fontSize: 15,
+                      fontWeight: FontWeight.w600,
+                      color: textColor
+                    ),
+                  )
+                ],
+              ),
+            )
+          )),
+    );
   }
 }

lib/view_model/dashboard/desktop_sidebar_view_model.dart

@@ -0,0 +1,36 @@
+import 'package:mobx/mobx.dart';
+
+part 'desktop_sidebar_view_model.g.dart';
+
+enum SidebarItem {
+  dashboard,
+  support,
+  settings,
+  transactions;
+}
+
+class DesktopSidebarViewModel = DesktopSidebarViewModelBase with _$DesktopSidebarViewModel;
+
+abstract class DesktopSidebarViewModelBase with Store {
+  DesktopSidebarViewModelBase();
+
+  @observable
+  SidebarItem currentPage = SidebarItem.dashboard;
+
+
+  @action
+  void onPageChange(SidebarItem item) {
+    
+    if(currentPage == item){
+      resetSidebar();
+      
+      return;
+    }
+    currentPage = item;
+  }
+
+  @action
+  void resetSidebar() {
+    currentPage = SidebarItem.dashboard;
+  }
+}

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 */; };
-		5A1F88902994000F00619FD4 /* decrypt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A1F888F2994000F00619FD4 /* decrypt.swift */; };
+		9F565D5929954F53009A75FB /* secRandom.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9F565D5729954F53009A75FB /* secRandom.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>"; };
-		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>"; };
+		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>"; };
 		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>"; };
-		E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		9F565D5729954F53009A75FB /* secRandom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = secRandom.swift; path = CakeWallet/secRandom.swift; sourceTree = "<group>"; };
+		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 */,
-				5A1F888D2993FFF400619FD4 /* secRandom.swift */,
+				9F565D5829954F53009A75FB /* decrypt.swift */,
+				9F565D5729954F53009A75FB /* secRandom.swift */,
 				33FAB671232836740065AC1E /* Runner */,
 				33CEB47122A05771004F2AC0 /* Flutter */,
 				33CC10EE2044A3C60003C045 /* Products */,
@@ -162,9 +162,9 @@
 		9B6E7CA3983216A9E173F00F /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				D4FCC525D86B82897EAA2C70 /* Pods-Runner.debug.xcconfig */,
-				4BBFB4E6C5ECED3763C70B52 /* Pods-Runner.release.xcconfig */,
-				2A2C063A3322F546C19D07F5 /* Pods-Runner.profile.xcconfig */,
+				359F2F22842E234537DED5E3 /* Pods-Runner.debug.xcconfig */,
+				135D3AD0276D31F62BBEDDBF /* Pods-Runner.release.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 */,
-				5A1F888E2993FFF400619FD4 /* secRandom.swift in Sources */,
+				9F565D5929954F53009A75FB /* 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