new buy/sell flow (wip)

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 00000000..88ddcf98
--- /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 238f2050..ca6cb6bb 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<CardsView> {
                           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 00000000..e6b5f64e
--- /dev/null
+++ b/res/pictures/plus.svg
@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M25.7826 29.2188H12.6055V25.7813H25.7826V12.6042H29.2201V25.7813H42.3971V29.2188H29.2201V42.3959H25.7826V29.2188Z" fill="white"/>
+</svg>
diff --git a/res/pictures/sell.svg b/res/pictures/sell.svg
new file mode 100644
index 00000000..50c8271e
--- /dev/null
+++ b/res/pictures/sell.svg
@@ -0,0 +1,3 @@
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M25.7921 47.5522V42.7574C23.7972 42.4018 22.0793 41.6225 20.6382 40.4194C19.1971 39.2162 18.1328 37.5336 17.4453 35.3714L20.6273 34.0491C21.2441 35.8236 22.1232 37.181 23.2644 38.1214C24.4061 39.0613 25.9302 39.5313 27.8369 39.5313C29.4911 39.5313 30.9507 39.1377 32.2157 38.3506C33.4803 37.563 34.1126 36.3142 34.1126 34.6042C34.1126 33.1204 33.6375 31.9356 32.6872 31.0499C31.7365 30.1641 29.7703 29.2395 26.7884 28.2758C23.6653 27.2885 21.4962 26.1339 20.2813 24.812C19.0663 23.4897 18.4588 21.8267 18.4588 19.823C18.4588 17.5168 19.2683 15.7018 20.8874 14.378C22.5061 13.0546 24.141 12.3193 25.7921 12.1723V7.448H29.2296V12.1723C30.9778 12.4045 32.4468 12.973 33.6365 13.8778C34.8267 14.7827 35.7521 15.9594 36.4129 17.4082L33.2756 18.8445C32.7729 17.7399 32.0721 16.882 31.173 16.2709C30.2743 15.6598 29.0918 15.3542 27.6255 15.3542C25.901 15.3542 24.5149 15.7744 23.4672 16.6147C22.4199 17.4549 21.8963 18.5244 21.8963 19.823C21.8963 21.1567 22.4326 22.2233 23.5051 23.0227C24.5772 23.8218 26.5705 24.659 29.4852 25.5344C32.1939 26.3571 34.2153 27.5295 35.5495 29.0515C36.8832 30.5732 37.5501 32.4006 37.5501 34.5338C37.5501 37.0397 36.7444 38.9846 35.133 40.3684C33.5215 41.7525 31.5538 42.5724 29.2296 42.8279V47.5522H25.7921Z" fill="white"/>
+</svg>
diff --git a/res/values/strings_en.arb b/res/values/strings_en.arb
index 1debd0a8..8cf1c783 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",