From 5264eed642f46644e5274348bb6ce62db4d9bab9 Mon Sep 17 00:00:00 2001 From: Robert Malikowski Date: Tue, 30 Jun 2026 21:07:00 +0200 Subject: [PATCH] new buy/sell flow (wip) --- .../buy_sell/buy_sell_selector_modal.dart | 94 +++++++++++++++++++ .../widgets/coins_page/cards/cards_view.dart | 5 +- res/pictures/plus.svg | 3 + res/pictures/sell.svg | 3 + res/values/strings_en.arb | 6 ++ 5 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 lib/new-ui/widgets/buy_sell/buy_sell_selector_modal.dart create mode 100644 res/pictures/plus.svg create mode 100644 res/pictures/sell.svg diff --git a/lib/new-ui/widgets/buy_sell/buy_sell_selector_modal.dart b/lib/new-ui/widgets/buy_sell/buy_sell_selector_modal.dart new file mode 100644 index 000000000..88ddcf986 --- /dev/null +++ b/lib/new-ui/widgets/buy_sell/buy_sell_selector_modal.dart @@ -0,0 +1,94 @@ +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/new-ui/modal_navigator.dart'; +import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart'; +import 'package:cake_wallet/src/widgets/cake_image_widget.dart'; +import 'package:cake_wallet/themes/core/theme_extension.dart'; +import 'package:flutter/material.dart'; + +enum BuySellPageMode { buy, sell } + +class BuySellSelectorModal extends StatelessWidget { + const BuySellSelectorModal({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.vertical(top: Radius.circular(18)), + gradient: LinearGradient( + colors: [ + Theme.of(context).colorScheme.surface, + Theme.of(context).colorScheme.surfaceDim, + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + ), + ), + child: SafeArea( + top: false, + child: Column(spacing:24, mainAxisSize: MainAxisSize.min, children: [ + SizedBox.shrink(), + Text(S.of(context).buy_or_sell, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),), + Text(S.of(context).buy_or_sell_desc, style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.onSurfaceVariant),), + Padding( + padding: EdgeInsets.symmetric(horizontal: 18.0), + child: Column(spacing: 12,children: [ + BuySellSelectorModalButton(title: S.of(context).buy_crypto, description: S.of(context).buy_crypto_desc, iconPath: "assets/new-ui/plus.svg", onTap: ()=>openBuySellPage(context, BuySellPageMode.buy),), + BuySellSelectorModalButton(title: S.of(context).sell_crypto, description: S.of(context).sell_crypto_desc, iconPath: "assets/new-ui/sell.svg", onTap: ()=>openBuySellPage(context, BuySellPageMode.sell)) + ],), + ), + SizedBox.shrink() + ]) + ) + ); + } + + void openBuySellPage(BuildContext context, BuySellPageMode mode) { + Navigator.of(context).pop(); + // showModalBottomSheet(context: context, builder: ModalNavigator(rootPage: ,)) + } +} + + +class BuySellSelectorModalButton extends StatelessWidget { + const BuySellSelectorModalButton({super.key, required this.title, required this.description, required this.iconPath, required this.onTap}); + + final String title; + final String description; + final String iconPath; + final VoidCallback onTap; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(16), + border: Border.all( + width: 1, color: Theme.of(context).colorScheme.surfaceContainerHigh, + + ), + gradient: LinearGradient( + colors: [ + context.customColors.cardGradientColorPrimary, + context.customColors.cardGradientColorSecondary + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + ), + ), + child: Padding(padding: EdgeInsets.all(24), child: Row(spacing: 20, children: [ + + CakeImageWidget(imageUrl: iconPath, width: 55, height: 55, colorFilter: ColorFilter.mode(Theme.of(context).colorScheme.onSurfaceVariant,BlendMode.srcIn),), + Column(spacing: 8, crossAxisAlignment: CrossAxisAlignment.start,children: [ + Text(title, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),), + Text(description, style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.onSurfaceVariant),) + ],) + + ],),), + + ), + ); + } +} diff --git a/lib/new-ui/widgets/coins_page/cards/cards_view.dart b/lib/new-ui/widgets/coins_page/cards/cards_view.dart index 238f20502..ca6cb6bb8 100644 --- a/lib/new-ui/widgets/coins_page/cards/cards_view.dart +++ b/lib/new-ui/widgets/coins_page/cards/cards_view.dart @@ -7,6 +7,7 @@ import 'package:cake_wallet/entities/bitcoin_amount_display_mode.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/new-ui/modal_navigator.dart'; import 'package:cake_wallet/new-ui/pages/send_page.dart'; +import 'package:cake_wallet/new-ui/widgets/buy_sell/buy_sell_selector_modal.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/utils/feature_flag.dart'; import 'package:cake_wallet/utils/payment_request.dart'; @@ -177,7 +178,9 @@ class _CardsViewState extends State { label: S.current.buy, icon: Icons.arrow_forward_ios_rounded, iconSize: 12, - onTap: () => Navigator.of(context).pushNamed(Routes.buySellPage), + onTap: () { + showModalBottomSheet(context: context, builder: (context)=>BuySellSelectorModal()); + }, ) ] : []; diff --git a/res/pictures/plus.svg b/res/pictures/plus.svg new file mode 100644 index 000000000..e6b5f64e3 --- /dev/null +++ b/res/pictures/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/pictures/sell.svg b/res/pictures/sell.svg new file mode 100644 index 000000000..50c8271e7 --- /dev/null +++ b/res/pictures/sell.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/values/strings_en.arb b/res/values/strings_en.arb index 1debd0a8f..8cf1c7835 100644 --- a/res/values/strings_en.arb +++ b/res/values/strings_en.arb @@ -135,7 +135,11 @@ "buy": "Buy", "buy_alert_content": "Currently we only support the purchase of Bitcoin, Ethereum, Litecoin, and Monero. Please create or switch to your Bitcoin, Ethereum, Litecoin, or Monero wallet.", "buy_bitcoin": "Buy Bitcoin", + "buy_crypto": "Buy Crypto", + "buy_crypto_desc": "Fund your wallet with fiat", "buy_now": "Buy Now", + "buy_or_sell": "Buy or Sell", + "buy_or_sell_desc": "Exchange fiat for crypto thanks to our providers", "buy_provider_unavailable": "Provider currently unavailable.", "buy_sell_pair_is_not_supported_warning": "This currency pair isn’t supported by any provider for the selected payment method. Please choose a different pair or try changing the payment method.", "buy_with": "Buy with", @@ -988,6 +992,8 @@ "selected_trocador_provider": "selected Trocador provider", "sell": "Sell", "sell_alert_content": "We currently only support the sale of Bitcoin, Ethereum and Litecoin. Please create or switch to your Bitcoin, Ethereum or Litecoin wallet.", + "sell_crypto": "Sell Crypto", + "sell_crypto_desc": "Get fiat for your crypto", "sell_monero_com_alert_content": "Selling Monero is not supported yet", "send": "Send", "send_address": "${cryptoCurrency} address",