CAKE-279 | renamed WebViewPage on WyrePage; applied spinner to Buy button on dashboard_page.dart

lib/di.dart

@@ -41,7 +41,7 @@ import 'package:cake_wallet/src/screens/transaction_details/transaction_details_
 import 'package:cake_wallet/src/screens/wallet_keys/wallet_keys_page.dart';
 import 'package:cake_wallet/src/screens/exchange/exchange_page.dart';
 import 'package:cake_wallet/src/screens/exchange/exchange_template_page.dart';
-import 'package:cake_wallet/src/screens/web_view/web_view_page.dart';
+import 'package:cake_wallet/src/screens/wyre/wyre_page.dart';
 import 'package:cake_wallet/store/dashboard/orders_store.dart';
 import 'package:cake_wallet/store/node_list_store.dart';
 import 'package:cake_wallet/store/secret_store.dart';
@@ -529,8 +529,8 @@ Future setup(
   getIt.registerFactoryParam<OrderDetailsPage, Order, void>((Order order, _) =>
       OrderDetailsPage(getIt.get<OrderDetailsViewModel>(param1: order)));
 
-  getIt.registerFactoryParam<WebViewPage, String, void>((String url, _) =>
-      WebViewPage(ordersStore: getIt.get<OrdersStore>(), url: url));
+  getIt.registerFactoryParam<WyrePage, String, void>((String url, _) =>
+      WyrePage(ordersStore: getIt.get<OrdersStore>(), url: url));
 
   getIt.registerFactory(() => SupportViewModel());
 

lib/router.dart

@@ -9,7 +9,7 @@ import 'package:cake_wallet/src/screens/restore/restore_from_backup_page.dart';
 import 'package:cake_wallet/src/screens/restore/wallet_restore_page.dart';
 import 'package:cake_wallet/src/screens/seed/pre_seed_page.dart';
 import 'package:cake_wallet/src/screens/support/support_page.dart';
-import 'package:cake_wallet/src/screens/web_view/web_view_page.dart';
+import 'package:cake_wallet/src/screens/wyre/wyre_page.dart';
 import 'package:cake_wallet/store/settings_store.dart';
 import 'package:cake_wallet/view_model/monero_account_list/account_list_item.dart';
 import 'package:flutter/cupertino.dart';
@@ -293,10 +293,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
           builder: (_) =>
               getIt.get<OrderDetailsPage>(param1: settings.arguments as Order));
 
-    case Routes.webView:
+    case Routes.wyre:
       return MaterialPageRoute<void>(
           builder: (_) =>
-              getIt.get<WebViewPage>(param1: settings.arguments as String));
+              getIt.get<WyrePage>(param1: settings.arguments as String));
 
     case Routes.restoreWalletFromSeedDetails:
       final args = settings.arguments as List;

lib/routes.dart

@@ -53,5 +53,5 @@ class Routes {
   static const restoreFromBackup = '/restore_from_backup';
   static const support = '/support';
   static const orderDetails = '/order_details';
-  static const webView = '/web_view';
+  static const wyre = '/wyre';
 }

lib/src/screens/dashboard/dashboard_page.dart

@@ -1,4 +1,3 @@
-import 'package:cake_wallet/entities/find_order_by_id.dart';
 import 'package:cake_wallet/entities/wallet_type.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/routes.dart';
@@ -16,6 +15,7 @@ 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:flutter_mobx/flutter_mobx.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
 
 class DashboardPage extends BasePage {
   DashboardPage({
@@ -126,26 +126,40 @@ class DashboardPage extends BasePage {
                   title: S.of(context).exchange,
                   route: Routes.exchange),
               if (walletViewModel.type == WalletType.bitcoin) Observer(
-                  builder: (_) => ActionButton(
-                      image: buyImage,
-                      title: S.of(context).buy,
-                      onClick: walletViewModel.isRunningWebView
-                        ? null
-                        : () async {
-                        walletViewModel.isRunningWebView = true;
-                        final url = await walletViewModel.getWyreUrl();
-                        if (url.isNotEmpty) {
-                          await Navigator.of(context)
-                              .pushNamed(Routes.webView, arguments: url);
-
-                          final orderId = walletViewModel.ordersStore.orderId;
-
-                          if (orderId.isNotEmpty) {
-                            await walletViewModel.saveOrder(orderId);
-                          }
-                        }
-                        walletViewModel.isRunningWebView = false;
-                      })),
+                  builder: (_) => Stack(
+                    clipBehavior: Clip.none,
+                    alignment: Alignment.topCenter,
+                    children: [
+                      if (walletViewModel.isRunningWebView) Positioned(
+                        top: -5,
+                        child: SpinKitRing(
+                          color: Theme.of(context).buttonColor,
+                          lineWidth: 3,
+                          size: 70.0,
+                        ),
+                      ),
+                      ActionButton(
+                          image: buyImage,
+                          title: S.of(context).buy,
+                          onClick: walletViewModel.isRunningWebView
+                              ? null
+                              : () async {
+                            walletViewModel.isRunningWebView = true;
+                            final url = await walletViewModel.getWyreUrl();
+                            if (url.isNotEmpty) {
+                              await Navigator.of(context)
+                                  .pushNamed(Routes.wyre, arguments: url);
+
+                              final orderId = walletViewModel.ordersStore.orderId;
+
+                              if (orderId.isNotEmpty) {
+                                await walletViewModel.saveOrder(orderId);
+                              }
+                            }
+                            walletViewModel.isRunningWebView = false;
+                          })
+                    ],
+                  )),
             ],
           )),
         )

lib/src/screens/wyre/wyre_page.dart

@@ -1,12 +1,13 @@
 import 'dart:io';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/store/dashboard/orders_store.dart';
 import 'package:flutter/material.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
-class WebViewPage extends BasePage {
-  WebViewPage({@required this.ordersStore, @required this.url});
+class WyrePage extends BasePage {
+  WyrePage({@required this.ordersStore, @required this.url});
 
   final OrdersStore ordersStore;
   final String url;
@@ -14,22 +15,28 @@ class WebViewPage extends BasePage {
   @override
   String get title => S.current.buy;
 
+  @override
+  Color get backgroundDarkColor => Colors.white;
+
+  @override
+  Color get titleColor => Palette.darkBlueCraiola;
+
   @override
   Widget body(BuildContext context) =>
-      WebViewPageBody(ordersStore: ordersStore,url: url);
+      WyrePageBody(ordersStore: ordersStore,url: url);
 }
 
-class WebViewPageBody extends StatefulWidget {
-  WebViewPageBody({this.ordersStore, this.url});
+class WyrePageBody extends StatefulWidget {
+  WyrePageBody({this.ordersStore, this.url});
 
   final OrdersStore ordersStore;
   final String url;
 
   @override
-  WebViewPageBodyState createState() => WebViewPageBodyState();
+  WyrePageBodyState createState() => WyrePageBodyState();
 }
 
-class WebViewPageBodyState extends State<WebViewPageBody> {
+class WyrePageBodyState extends State<WyrePageBody> {
   String orderId;
   WebViewController _webViewController;
   GlobalKey _webViewkey;

pubspec.yaml

@@ -56,6 +56,7 @@ dependencies:
   dotted_border: ^1.0.5
   smooth_page_indicator: ^0.2.0
   webview_flutter: ^1.0.7
+  flutter_spinkit: ^4.1.2
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.