mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-12-23 03:59:23 +00:00
Add initial design for add balance screen
This commit is contained in:
OmarHatem28
parent
9bf4e3a20e
commit
79ff0701ef
6 changed files with 265 additions and 9 deletions
20
lib/di.dart
20
lib/di.dart
|
|
@ -1,9 +1,12 @@
|
|||
import 'package:cake_wallet/core/yat_service.dart';
|
||||
import 'package:cake_wallet/entities/cake_phone_entities/phone_number_service.dart';
|
||||
import 'package:cake_wallet/entities/parse_address_from_domain.dart';
|
||||
import 'package:cake_wallet/entities/wake_lock.dart';
|
||||
import 'package:cake_wallet/monero/monero.dart';
|
||||
import 'package:cake_wallet/haven/haven.dart';
|
||||
import 'package:cake_wallet/bitcoin/bitcoin.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/phone_number_service/auto_renew_settings_page.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/phone_number_service/number_settings_page.dart';
|
||||
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
|
||||
import 'package:cake_wallet/view_model/cake_phone/phone_plan_view_model.dart';
|
||||
import 'package:cw_core/unspent_coins_info.dart';
|
||||
|
|
@ -125,6 +128,7 @@ import 'package:cake_wallet/exchange/exchange_template.dart';
|
|||
import 'package:cake_wallet/.secrets.g.dart' as secrets;
|
||||
import 'package:cake_wallet/src/screens/dashboard/widgets/address_page.dart';
|
||||
import 'package:cake_wallet/src/screens/receive/fullscreen_qr_page.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/add_balance_page.dart';
|
||||
|
||||
final getIt = GetIt.instance;
|
||||
|
||||
|
|
@ -645,5 +649,21 @@ Future setup(
|
|||
|
||||
getIt.registerFactory(() => PhonePlanViewModel());
|
||||
|
||||
getIt.registerFactoryParam<NumberSettingsPage, PhoneNumberService, void>(
|
||||
(PhoneNumberService phoneNumberService, _) => NumberSettingsPage(
|
||||
phoneNumberService: phoneNumberService,
|
||||
phonePlanViewModel: getIt.get<PhonePlanViewModel>(),
|
||||
));
|
||||
|
||||
getIt.registerFactoryParam<AutoRenewSettingsPage, PhoneNumberService, void>(
|
||||
(PhoneNumberService phoneNumberService, _) => AutoRenewSettingsPage(
|
||||
phoneNumberService: phoneNumberService,
|
||||
phonePlanViewModel: getIt.get<PhonePlanViewModel>(),
|
||||
));
|
||||
|
||||
getIt.registerFactory(() {
|
||||
return AddBalancePage(buyViewModel: getIt.get<BuyViewModel>());
|
||||
});
|
||||
|
||||
_isSetupFinished = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ import 'package:cake_wallet/src/screens/cake_phone/cake_phone_products_page.dart
|
|||
import 'package:cake_wallet/src/screens/cake_phone/phone_number_service/phone_number_product_page.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/active_services_page.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/phone_number_service/number_settings_page.dart';
|
||||
import 'package:cake_wallet/src/screens/cake_phone/add_balance_page.dart';
|
||||
|
||||
RouteSettings currentRouteSettings;
|
||||
|
||||
|
|
@ -383,19 +384,19 @@ Route<dynamic> createRoute(RouteSettings settings) {
|
|||
case Routes.numberSettings:
|
||||
return MaterialPageRoute<NumberSettingsPage>(
|
||||
settings: RouteSettings(name: Routes.numberSettings),
|
||||
builder: (_) => NumberSettingsPage(
|
||||
phoneNumberService: settings.arguments as PhoneNumberService,
|
||||
phonePlanViewModel: getIt.get<PhonePlanViewModel>(),
|
||||
),
|
||||
builder: (_) => getIt.get<NumberSettingsPage>(),
|
||||
);
|
||||
|
||||
case Routes.autoRenewSettings:
|
||||
return MaterialPageRoute<AutoRenewSettingsPage>(
|
||||
settings: RouteSettings(name: Routes.autoRenewSettings),
|
||||
builder: (_) => AutoRenewSettingsPage(
|
||||
phoneNumberService: settings.arguments as PhoneNumberService,
|
||||
phonePlanViewModel: getIt.get<PhonePlanViewModel>(),
|
||||
),
|
||||
builder: (_) => getIt.get<AutoRenewSettingsPage>(),
|
||||
);
|
||||
|
||||
case Routes.addBalance:
|
||||
return MaterialPageRoute<void>(
|
||||
settings: RouteSettings(name: Routes.addBalance),
|
||||
builder: (_) => getIt.get<AddBalancePage>(),
|
||||
);
|
||||
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -68,4 +68,5 @@ class Routes {
|
|||
static const cakePhoneActiveServices = '/cake_phone_active_services';
|
||||
static const numberSettings = '/number_settings';
|
||||
static const autoRenewSettings = '/auto_renew_settings';
|
||||
static const addBalance = '/add_balance';
|
||||
}
|
||||
|
|
@ -83,6 +83,9 @@ class ActiveServicesBodyState extends State<ActiveServicesBody> {
|
|||
subtitle: "\$${accountBalance.toStringAsFixed(2)}",
|
||||
isReversed: true,
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pushNamed(context, Routes.addBalance);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 64),
|
||||
SubscribedPhoneNumbers(),
|
||||
|
|
|
|||
228
lib/src/screens/cake_phone/add_balance_page.dart
Normal file
228
lib/src/screens/cake_phone/add_balance_page.dart
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
import 'dart:ui';
|
||||
import 'package:cake_wallet/entities/fiat_currency.dart';
|
||||
import 'package:cake_wallet/src/widgets/picker.dart';
|
||||
import 'package:cw_core/wallet_type.dart';
|
||||
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
|
||||
import 'package:cake_wallet/utils/show_pop_up.dart';
|
||||
import 'package:cake_wallet/view_model/buy/buy_view_model.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/widgets/primary_button.dart';
|
||||
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
|
||||
import 'package:cake_wallet/src/widgets/trail_button.dart';
|
||||
import 'package:mobx/mobx.dart';
|
||||
|
||||
class AddBalancePage extends BasePage {
|
||||
AddBalancePage({@required this.buyViewModel})
|
||||
: _amountFocus = FocusNode(),
|
||||
_amountController = TextEditingController() {
|
||||
_amountController.addListener(() {
|
||||
final amount = _amountController.text;
|
||||
|
||||
if (amount != buyViewModel.buyAmountViewModel.amount) {
|
||||
buyViewModel.buyAmountViewModel.amount = amount;
|
||||
buyViewModel.selectedProvider = null;
|
||||
}
|
||||
});
|
||||
|
||||
reaction((_) => buyViewModel.buyAmountViewModel.amount, (String amount) {
|
||||
if (_amountController.text != amount) {
|
||||
_amountController.text = amount;
|
||||
}
|
||||
if (amount.isEmpty) {
|
||||
buyViewModel.selectedProvider = null;
|
||||
buyViewModel.isShowProviderButtons = false;
|
||||
} else {
|
||||
buyViewModel.isShowProviderButtons = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
static const _amountPattern = '^([0-9]+([.\,][0-9]{0,2})?|[.\,][0-9]{1,2})\$';
|
||||
|
||||
final List<String> dummyProductsExamples = [
|
||||
"20 month of virtual phone service with 240 SMS",
|
||||
"500 additional SMS",
|
||||
];
|
||||
|
||||
final BuyViewModel buyViewModel;
|
||||
final FocusNode _amountFocus;
|
||||
final TextEditingController _amountController;
|
||||
|
||||
@override
|
||||
String get title => S.current.add_balance;
|
||||
|
||||
@override
|
||||
Color get titleColor => Colors.white;
|
||||
|
||||
@override
|
||||
bool get resizeToAvoidBottomInset => false;
|
||||
|
||||
@override
|
||||
bool get extendBodyBehindAppBar => true;
|
||||
|
||||
@override
|
||||
AppBarStyle get appBarStyle => AppBarStyle.transparent;
|
||||
|
||||
@override
|
||||
Widget body(BuildContext context) {
|
||||
return KeyboardActions(
|
||||
config: KeyboardActionsConfig(
|
||||
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
|
||||
keyboardBarColor: Theme.of(context).accentTextTheme.body2.backgroundColor,
|
||||
nextFocus: false,
|
||||
actions: [
|
||||
KeyboardActionsItem(
|
||||
focusNode: _amountFocus,
|
||||
toolbarButtons: [(_) => KeyboardDoneButton()],
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Container(
|
||||
height: 0,
|
||||
color: Theme.of(context).backgroundColor,
|
||||
child: ScrollableWithBottomSection(
|
||||
contentPadding: EdgeInsets.only(bottom: 24),
|
||||
content: Observer(
|
||||
builder: (_) => Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
|
||||
gradient: LinearGradient(colors: [
|
||||
Theme.of(context).primaryTextTheme.subhead.color,
|
||||
Theme.of(context).primaryTextTheme.subhead.decorationColor,
|
||||
], begin: Alignment.topLeft, end: Alignment.bottomRight),
|
||||
),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(top: 100, bottom: 65),
|
||||
child: Center(
|
||||
child: Container(
|
||||
width: 210,
|
||||
child: BaseTextFormField(
|
||||
focusNode: _amountFocus,
|
||||
controller: _amountController,
|
||||
keyboardType: TextInputType.numberWithOptions(signed: false, decimal: true),
|
||||
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(_amountPattern))],
|
||||
prefixIcon: GestureDetector(
|
||||
onTap: () {
|
||||
showPopUp<void>(
|
||||
context: context,
|
||||
builder: (_) => Picker(
|
||||
hintText: S.current.search_currency,
|
||||
items: FiatCurrency.currenciesAvailableToBuyWith,
|
||||
selectedAtIndex:
|
||||
FiatCurrency.currenciesAvailableToBuyWith.indexOf(buyViewModel.fiatCurrency),
|
||||
onItemSelected: (FiatCurrency selectedCurrency) {
|
||||
buyViewModel.buyAmountViewModel.fiatCurrency = selectedCurrency;
|
||||
},
|
||||
images: FiatCurrency.currenciesAvailableToBuyWith
|
||||
.map((e) => Image.asset("assets/images/flags/${e.countryCode}.png"))
|
||||
.toList(),
|
||||
isGridView: true,
|
||||
matchingCriteria: (FiatCurrency currency, String searchText) {
|
||||
return currency.title.toLowerCase().contains(searchText) ||
|
||||
currency.fullName.toLowerCase().contains(searchText);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(top: 2),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.keyboard_arrow_down, color: Colors.white),
|
||||
Text(
|
||||
buyViewModel.fiatCurrency.title + ': ',
|
||||
style: TextStyle(
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
hintText: '0.00',
|
||||
borderColor: Theme.of(context).primaryTextTheme.body2.decorationColor,
|
||||
borderWidth: 0.5,
|
||||
textStyle: TextStyle(fontSize: 36, fontWeight: FontWeight.w500, color: Colors.white),
|
||||
placeholderTextStyle: TextStyle(
|
||||
color: Theme.of(context).primaryTextTheme.headline.decorationColor,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 36,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(top: 38, bottom: 18),
|
||||
child: Text(
|
||||
"${S.of(context).cake_phone_products_example}:",
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).primaryTextTheme.title.color,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
child: Column(
|
||||
children: dummyProductsExamples
|
||||
.map((e) => Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(16),
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).accentTextTheme.caption.backgroundColor,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
children: [
|
||||
TextSpan(
|
||||
text: e,
|
||||
style: TextStyle(fontWeight: FontWeight.w700),
|
||||
),
|
||||
TextSpan(text: " ${S.of(context).forwards}"),
|
||||
],
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: Theme.of(context).primaryTextTheme.title.color,
|
||||
),
|
||||
),
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
|
||||
bottomSection: Observer(
|
||||
builder: (_) {
|
||||
return LoadingPrimaryButton(
|
||||
onPressed: () {},
|
||||
text: S.of(context).buy,
|
||||
color: Theme.of(context).accentTextTheme.body2.color,
|
||||
textColor: Colors.white,
|
||||
isLoading: buyViewModel.isRunning,
|
||||
isDisabled: _amountController.text.isEmpty || buyViewModel.isDisabled);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -591,5 +591,8 @@
|
|||
"update": "Update",
|
||||
"auto_renew_term_description": "Optionally auto-renew your phone number if a sufficient balance is available. We will attempt to pay the balance a day before the service is set to expire.",
|
||||
"awaiting_payment_confirmation": "Awaiting Payment Confirmation",
|
||||
"transaction_sent_popup_info": "Your transaction was sent. \n\nIf the screen doesn’t proceed after 1 minute, check a block explorer and your email."
|
||||
"transaction_sent_popup_info": "Your transaction was sent. \n\nIf the screen doesn’t proceed after 1 minute, check a block explorer and your email.",
|
||||
"cake_phone_products_example": "Example independent uses",
|
||||
"add_balance": "Add Balance",
|
||||
"forwards": "forwards"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue