Fix Popup content in add balance page

Fix PhoneNumberSettings navigation

lib/router.dart

@@ -384,13 +384,13 @@ Route<dynamic> createRoute(RouteSettings settings) {
     case Routes.numberSettings:
       return MaterialPageRoute<NumberSettingsPage>(
         settings: RouteSettings(name: Routes.numberSettings),
-        builder: (_) => getIt.get<NumberSettingsPage>(),
+        builder: (_) => getIt.get<NumberSettingsPage>(param1: settings.arguments as PhoneNumberService),
       );
 
     case Routes.autoRenewSettings:
       return MaterialPageRoute<AutoRenewSettingsPage>(
         settings: RouteSettings(name: Routes.autoRenewSettings),
-        builder: (_) => getIt.get<AutoRenewSettingsPage>(),
+        builder: (_) => getIt.get<AutoRenewSettingsPage>(param1: settings.arguments as PhoneNumberService),
       );
 
     case Routes.addBalance:

lib/src/screens/cake_phone/add_balance_page.dart

@@ -1,12 +1,20 @@
 import 'dart:ui';
+import 'package:cake_wallet/buy/buy_amount.dart';
+import 'package:cake_wallet/buy/moonpay/moonpay_buy_provider.dart';
+import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/entities/fiat_currency.dart';
+import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
+import 'package:cake_wallet/src/widgets/info_alert_dialog.dart';
 import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
+import 'package:cake_wallet/store/app_store.dart';
+import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:keyboard_actions/keyboard_actions.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/screens/cake_phone/widgets/receipt_row.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
 import 'package:cake_wallet/generated/i18n.dart';
@@ -160,11 +168,67 @@ class AddBalancePage extends BasePage {
             ],
           ),
           bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-          bottomSection: Observer(
+          bottomSection: Observer(builder: (_) {
-            builder: (_) {
             return LoadingPrimaryButton(
               onPressed: () {
-
+                showPopUp<void>(
+                    context: context,
+                    builder: (dialogContext) {
+                      return AlertWithTwoActions(
+                          alertTitle: S.of(context).confirm_sending,
+                          alertTitleColor: Theme.of(context).primaryTextTheme.title.decorationColor,
+                          alertContent: S.of(context).confirm_delete_template,
+                          contentWidget: Material(
+                            child: Column(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                ReceiptRow(
+                                    title: S.of(context).amount,
+                                    value: cryptoAmount(addBalanceViewModel.buyAmountViewModel.doubleAmount)),
+                                ReceiptRow(
+                                    title: S.of(context).send_fee,
+                                    value: cryptoAmount(getIt
+                                        .get<AppStore>()
+                                        .wallet
+                                        .calculateEstimatedFee(
+                                          getIt.get<AppStore>().settingsStore.priority[getIt.get<AppStore>().wallet.type],
+                                          addBalanceViewModel.buyAmountViewModel.doubleAmount.floor(),
+                                        )
+                                        .toDouble())),
+                                const SizedBox(height: 45),
+                                Text(
+                                  S.of(context).recipient_address,
+                                  style: TextStyle(
+                                    fontSize: 16,
+                                    fontWeight: FontWeight.w600,
+                                    color: Theme.of(context).primaryTextTheme.title.color,
+                                  ),
+                                ),
+                                const SizedBox(height: 16),
+                                Text(
+                                  //TODO: remove static address if it will be generated everytime
+                                  "4B6c5ApfayzRN8jYxXyprv9me1vttSjF21WAz4HQ8JvS13RgRbgfQg7PPgvm2QMA8N1ed7izqPFsnCKGWWwFoGyjTFstzXm",
+                                  style: TextStyle(
+                                    fontSize: 10,
+                                    fontWeight: FontWeight.w600,
+                                    color: Theme.of(context).accentTextTheme.subhead.color,
+                                  ),
+                                  textAlign: TextAlign.center,
+                                ),
+                              ],
+                            ),
+                          ),
+                          isDividerExists: true,
+                          rightButtonText: S.of(context).ok,
+                          leftButtonText: S.of(context).cancel,
+                          rightActionButtonColor: Theme.of(context).accentTextTheme.body2.color,
+                          leftActionButtonColor: Theme.of(context).primaryTextTheme.body2.backgroundColor,
+                          actionRightButton: () {
+                            Navigator.of(dialogContext).pop();
+                            showPaymentConfirmationPopup(context);
+                          },
+                          actionLeftButton: () => Navigator.of(dialogContext).pop());
+                    });
               },
               text: S.of(context).buy,
               color: Theme.of(context).accentTextTheme.body2.color,
@@ -172,10 +236,139 @@ class AddBalancePage extends BasePage {
               isLoading: false,
               isDisabled: addBalanceViewModel.buyAmountViewModel.amount.isEmpty,
             );
-            }
+          }),
-          ),
         ),
       ),
     );
   }
+
+  // TODO: Make it reusable after finding the models related and use it here and in phone_number_product_page.dart
+  Widget cryptoAmount(double totalPrice) {
+    return FutureBuilder<BuyAmount>(
+      future: MoonPayBuyProvider(wallet: getIt.get<AppStore>().wallet)
+          .calculateAmount(totalPrice.toString(), FiatCurrency.usd.title),
+      builder: (context, AsyncSnapshot<BuyAmount> snapshot) {
+        double sourceAmount;
+        double destAmount;
+
+        if (snapshot.hasData) {
+          sourceAmount = snapshot.data.sourceAmount;
+          destAmount = snapshot.data.destAmount;
+        } else {
+          sourceAmount = 0.0;
+          destAmount = 0.0;
+        }
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Text(
+              "${sourceAmount} ${getIt.get<AppStore>().wallet.currency.toString()}",
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w700,
+                color: Theme.of(context).primaryTextTheme.title.color,
+              ),
+            ),
+            Text(
+              "${destAmount} ${FiatCurrency.usd.title}",
+              style: TextStyle(
+                fontSize: 12,
+                fontWeight: FontWeight.w500,
+                color: Theme.of(context).accentTextTheme.subhead.color,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  // TODO: Make it reusable after finding the models related and use it here and in phone_number_product_page.dart
+  void showPaymentConfirmationPopup(BuildContext context) {
+    showPopUp<void>(
+        context: context,
+        builder: (dialogContext) {
+          return InfoAlertDialog(
+            alertTitle: S.of(context).awaiting_payment_confirmation,
+            alertTitleColor: Theme.of(context).primaryTextTheme.title.decorationColor,
+            alertContentPadding: EdgeInsets.zero,
+            alertContent: Padding(
+              padding: const EdgeInsets.only(top: 8, bottom: 32),
+              child: Material(
+                child: Column(
+                  children: [
+                    Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 24),
+                      child: Text(
+                        S.of(context).transaction_sent_popup_info,
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: Theme.of(context).primaryTextTheme.title.color,
+                        ),
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.symmetric(vertical: 24),
+                      child: Container(
+                        height: 1,
+                        color: Theme.of(context).dividerColor,
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.symmetric(horizontal: 24),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            "${S.of(context).transaction_details_transaction_id}:",
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontWeight: FontWeight.w500,
+                              color: Theme.of(context).accentTextTheme.subhead.color,
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 4, bottom: 16),
+                            child: Text(
+                              // TODO: Replace with the transaction id
+                              "dsyf5ind7akwryewkmf5nf4eakdrm4infd4i8rm4fd8nrmsein",
+                              style: TextStyle(
+                                fontSize: 12,
+                                fontWeight: FontWeight.w500,
+                                color: Theme.of(context).primaryTextTheme.title.color,
+                              ),
+                            ),
+                          ),
+                          Text(
+                            "${S.of(context).view_in_block_explorer}:",
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontWeight: FontWeight.w500,
+                              color: Theme.of(context).accentTextTheme.subhead.color,
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 4),
+                            child: Text(
+                              // TODO: get it from transaction details view model
+                              S.of(context).view_transaction_on,
+                              style: TextStyle(
+                                fontSize: 12,
+                                fontWeight: FontWeight.w500,
+                                color: Theme.of(context).primaryTextTheme.title.color,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          );
+        });
+  }
 }

lib/src/screens/cake_phone/phone_number_service/phone_number_product_page.dart

@@ -6,6 +6,7 @@ import 'package:cake_wallet/entities/fiat_currency.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/cake_phone/widgets/cake_phone_settings_tile.dart';
 import 'package:cake_wallet/src/screens/cake_phone/widgets/plan_card.dart';
+import 'package:cake_wallet/src/screens/cake_phone/widgets/receipt_row.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 import 'package:cake_wallet/src/widgets/info_alert_dialog.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
@@ -252,7 +253,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                           children: [
                             GestureDetector(
                               onTap: () => widget.phonePlanViewModel.removeAdditionalSms(),
-                              child: icon(Icons.remove),
+                              child: quantityIcon(Icons.remove),
                             ),
                             Padding(
                               padding: const EdgeInsets.symmetric(horizontal: 16),
@@ -269,7 +270,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                             ),
                             GestureDetector(
                               onTap: () => widget.phonePlanViewModel.addAdditionalSms(),
-                              child: icon(Icons.add),
+                              child: quantityIcon(Icons.add),
                             ),
                           ],
                         ),
@@ -318,8 +319,9 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                           contentWidget: Column(
                             mainAxisSize: MainAxisSize.min,
                             children: [
-                              receiptRow(S.of(context).amount, amountText(widget.phonePlanViewModel.totalPrice)),
+                              ReceiptRow(
-                              receiptRow("${S.of(context).cake_pay_balance}: ", amountText(100)),
+                                  title: S.of(context).amount, value: amountText(widget.phonePlanViewModel.totalPrice)),
+                              ReceiptRow(title: "${S.of(context).cake_pay_balance}: ", value: amountText(100)),
                             ],
                           ),
                           isDividerExists: true,
@@ -355,17 +357,21 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                           contentWidget: Column(
                             mainAxisSize: MainAxisSize.min,
                             children: [
-                              receiptRow(S.of(context).amount, cryptoAmount(widget.phonePlanViewModel.totalPrice)),
+                              ReceiptRow(
-                              receiptRow(
+                                title: S.of(context).amount,
-                                  S.of(context).send_fee,
+                                value: cryptoAmount(widget.phonePlanViewModel.totalPrice),
-                                  cryptoAmount(getIt
+                              ),
+                              ReceiptRow(
+                                title: S.of(context).send_fee,
+                                value: cryptoAmount(getIt
                                     .get<AppStore>()
                                     .wallet
                                     .calculateEstimatedFee(
                                       getIt.get<AppStore>().settingsStore.priority[getIt.get<AppStore>().wallet.type],
                                       widget.phonePlanViewModel.totalPrice.floor(),
                                     )
-                                      .toDouble())),
+                                    .toDouble()),
+                              ),
                               const SizedBox(height: 45),
                               Text(
                                 S.of(context).recipient_address,
@@ -410,7 +416,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
     );
   }
 
-  Widget icon(IconData icon) {
+  Widget quantityIcon(IconData icon) {
     if (widget.phoneNumberService == null) {
       return Container(
         padding: const EdgeInsets.all(8),
@@ -441,26 +447,6 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
     );
   }
 
-  Widget receiptRow(String title, Widget value) {
-    return Padding(
-      padding: const EdgeInsets.only(top: 24),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          Text(
-            title,
-            style: TextStyle(
-              fontSize: 16,
-              fontWeight: FontWeight.w500,
-              color: Theme.of(context).accentTextTheme.subhead.color,
-            ),
-          ),
-          value,
-        ],
-      ),
-    );
-  }
-
   Widget amountText(double amount) {
     return Text(
       "\$${amount.roundToDouble() == amount ? amount.round() : amount}",

lib/src/screens/cake_phone/widgets/receipt_row.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class ReceiptRow extends StatelessWidget {
+  const ReceiptRow({Key key, @required this.title, @required this.value}) : super(key: key);
+
+  final String title;
+  final Widget value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 24),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              color: Theme.of(context).accentTextTheme.subhead.color,
+            ),
+          ),
+          value,
+        ],
+      ),
+    );
+  }
+}