feat: ramp updates (#1161)

espresso-cash · Dec 19, 2023 · dee328a · dee328a
1 parent 83b1c8f
commit dee328a
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 122 deletions.
diff --git a/packages/espressocash_app/lib/features/activities/widgets/off_ramp_tile.dart b/packages/espressocash_app/lib/features/activities/widgets/off_ramp_tile.dart
@@ -1,5 +1,4 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 
 import '../../../core/presentation/format_amount.dart';
@@ -22,16 +21,7 @@ class OffRampTile extends StatelessWidget {
   Widget build(BuildContext context) => OffRampOrderDetails(
         orderId: activity.id,
         builder: (context, order) => CpActivityTile(
-          title: order?.amount.let(
-                (amount) => context.l10n.activities_lblSoldToken(
-                  amount.format(
-                    context.locale,
-                    maxDecimals: 2,
-                    roundInteger: true,
-                  ),
-                ),
-              ) ??
-              '',
+          title: context.l10n.activities_lblWithdraw,
           incomingAmount: order?.receiveAmount?.format(
             context.locale,
             maxDecimals: 2,

diff --git a/packages/espressocash_app/lib/features/activities/widgets/on_ramp_tile.dart b/packages/espressocash_app/lib/features/activities/widgets/on_ramp_tile.dart
@@ -1,5 +1,4 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:dfunc/dfunc.dart';
 import 'package:flutter/widgets.dart';
 
 import '../../../core/presentation/format_amount.dart';
@@ -22,18 +21,7 @@ class OnRampTile extends StatelessWidget {
   Widget build(BuildContext context) => OnRampOrderDetails(
         orderId: activity.id,
         builder: (context, order) => CpActivityTile(
-          title: context.l10n.activities_lblBoughtToken(
-            order?.amount?.let(
-                  (amount) => amount.value != 0
-                      ? amount.format(
-                          context.locale,
-                          maxDecimals: 2,
-                          roundInteger: true,
-                        )
-                      : order.amount?.currency.symbol,
-                ) ??
-                '',
-          ),
+          title: context.l10n.activities_lblAddCash,
           icon: Assets.icons.paymentIcon.svg(),
           status: switch (order?.status) {
             OnRampOrderStatus.failure => CpActivityTileStatus.failure,

diff --git a/packages/espressocash_app/lib/features/ramp/screens/on_ramp_order_screen.dart b/packages/espressocash_app/lib/features/ramp/screens/on_ramp_order_screen.dart
@@ -96,15 +96,24 @@ class OnRampOrderScreenContent extends StatelessWidget {
       OnRampOrderStatus.completed => context.l10n.onRampDepositSuccess,
     };
 
+    final String? statusSubtitle =
+        order.status == OnRampOrderStatus.waitingForPartner
+            ? context.l10n.onRampAwaitingFunds
+            : null;
+
     final CpTimelineStatus timelineStatus = switch (order.status) {
       OnRampOrderStatus.waitingForPartner => CpTimelineStatus.inProgress,
       OnRampOrderStatus.failure => CpTimelineStatus.failure,
       OnRampOrderStatus.completed => CpTimelineStatus.success,
     };
 
+    final animated = timelineStatus == CpTimelineStatus.inProgress;
+
     final int activeItem = switch (order.status) {
-      OnRampOrderStatus.waitingForPartner => 0,
-      OnRampOrderStatus.failure || OnRampOrderStatus.completed => 1,
+      OnRampOrderStatus.waitingForPartner ||
+      OnRampOrderStatus.failure ||
+      OnRampOrderStatus.completed =>
+        1,
     };
 
     final depositInitiated = CpTimelineItem(
@@ -128,7 +137,22 @@ class OnRampOrderScreenContent extends StatelessWidget {
       title: context.l10n.onRampDepositTitle.toUpperCase(),
       statusType: statusType,
       statusTitle: statusTitle?.let(Text.new),
-      statusContent: Text(statusContent),
+      statusContent: Column(
+        children: [
+          Text(statusContent),
+          if (statusSubtitle != null) ...[
+            const SizedBox(height: 8),
+            Text(
+              statusSubtitle,
+              style: const TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+                letterSpacing: 0.23,
+              ),
+            ),
+          ],
+        ],
+      ),
       content: CpContentPadding(
         child: Column(
           children: [
@@ -137,7 +161,7 @@ class OnRampOrderScreenContent extends StatelessWidget {
               status: timelineStatus,
               items: items,
               active: activeItem,
-              animated: false,
+              animated: animated,
             ),
             const Spacer(flex: 4),
             SizedBox(

diff --git a/packages/espressocash_app/lib/features/ramp/src/widgets/off_ramp_confirmation.dart b/packages/espressocash_app/lib/features/ramp/src/widgets/off_ramp_confirmation.dart
@@ -7,12 +7,14 @@ import '../../../../core/currency.dart';
 import '../../../../core/fee_label.dart';
 import '../../../../core/presentation/format_amount.dart';
 import '../../../../di.dart';
+import '../../../../gen/assets.gen.dart';
 import '../../../../l10n/device_locale.dart';
 import '../../../../l10n/l10n.dart';
 import '../../../../ui/app_bar.dart';
 import '../../../../ui/back_button.dart';
 import '../../../../ui/button.dart';
 import '../../../../ui/chip.dart';
+import '../../../../ui/colors.dart';
 import '../../../../ui/content_padding.dart';
 import '../../../../ui/info_widget.dart';
 import '../../../../ui/theme.dart';
@@ -41,40 +43,52 @@ class OffRampConfirmation extends StatelessWidget {
               onPressed: () => context.router.popUntilRoot(),
             ),
           ),
-          body: CpContentPadding(
-            child: _TokenCreateLinkContent(
-              withdrawAmount: order.amount,
-              receiveAmount: order.receiveAmount,
-              fee: Amount.fromDecimal(
-                // TODO(KB): Replace with fee from backend.
-                value: Decimal.parse('0.1'),
-                currency: Currency.usdc,
+          body: Stack(
+            children: [
+              SizedBox(
+                height: double.infinity,
+                child:
+                    Assets.icons.logoBg.svg(alignment: Alignment.bottomCenter),
               ),
-            ),
-          ),
-          bottomNavigationBar: SafeArea(
-            child: Padding(
-              padding: const EdgeInsets.all(24.0),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  const FeeLabel(type: FeeType.splitKey()),
-                  const SizedBox(height: 21),
-                  CpButton(
-                    width: double.infinity,
-                    onPressed: () => sl<OffRampOrderService>().retry(order.id),
-                    text: context.l10n.ramp_btnContinue,
+              _Content(
+                withdrawAmount: order.amount,
+                receiveAmount: order.receiveAmount,
+                fee: Amount.fromDecimal(
+                  // TODO(KB): Replace with fee from backend.
+                  value: Decimal.parse('0.1'),
+                  currency: Currency.usdc,
+                ),
+              ),
+              Align(
+                alignment: Alignment.bottomCenter,
+                child: SafeArea(
+                  child: Padding(
+                    padding: const EdgeInsets.all(24.0),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        const FeeLabel(type: FeeType.splitKey()),
+                        const SizedBox(height: 21),
+                        CpButton(
+                          size: CpButtonSize.big,
+                          width: double.infinity,
+                          onPressed: () =>
+                              sl<OffRampOrderService>().retry(order.id),
+                          text: context.l10n.ramp_btnContinue,
+                        ),
+                      ],
+                    ),
                   ),
-                ],
+                ),
               ),
-            ),
+            ],
           ),
         ),
       );
 }
 
-class _TokenCreateLinkContent extends StatelessWidget {
-  const _TokenCreateLinkContent({
+class _Content extends StatelessWidget {
+  const _Content({
     required this.withdrawAmount,
     required this.fee,
     this.receiveAmount,
@@ -85,22 +99,25 @@ class _TokenCreateLinkContent extends StatelessWidget {
   final Amount fee;
 
   @override
-  Widget build(BuildContext context) => Column(
-        children: [
-          const SizedBox(height: 60),
-          _AmountView(
-            withdrawAmount: withdrawAmount,
-            receiveAmount: receiveAmount,
-          ),
-          Padding(
-            padding: const EdgeInsets.all(16),
-            child: CpInfoWidget(
-              message: Text(context.l10n.offRampWithdrawNotice),
-              variant: CpInfoVariant.black,
+  Widget build(BuildContext context) => CpContentPadding(
+        child: Column(
+          children: [
+            const SizedBox(height: 16),
+            _AmountView(
+              withdrawAmount: withdrawAmount,
+              receiveAmount: receiveAmount,
             ),
-          ),
-          const Spacer(),
-        ],
+            const SizedBox(height: 24),
+            Padding(
+              padding: const EdgeInsets.all(16),
+              child: CpInfoWidget(
+                message: Text(context.l10n.offRampWithdrawNotice),
+                variant: CpInfoVariant.black,
+              ),
+            ),
+            const Spacer(),
+          ],
+        ),
       );
 }
 
@@ -120,6 +137,7 @@ class _AmountView extends StatelessWidget {
 
     final formattedReceiveAmount = receiveAmount?.format(
       locale,
+      skipSymbol: true,
       maxDecimals: withdrawAmount.currency.decimals,
     );
 
@@ -135,32 +153,54 @@ class _AmountView extends StatelessWidget {
             ),
           ),
         ),
-        Container(
-          margin: const EdgeInsets.symmetric(vertical: 24),
-          child: CpChip(
-            // TODO(KB): Check if needed
-            // ignore: avoid-single-child-column-or-row
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                if (formattedReceiveAmount != null)
-                  FittedBox(
-                    child: Text(
-                      context.l10n
-                          .offRampReceiveAmount(formattedReceiveAmount)
-                          .toUpperCase(),
-                      maxLines: 1,
-                      style: const TextStyle(
-                        fontSize: 15,
-                        fontWeight: FontWeight.bold,
-                      ),
+        const SizedBox(height: 40),
+        if (formattedReceiveAmount != null)
+          _ReceiveChip(
+            child: Text.rich(
+              TextSpan(
+                children: [
+                  TextSpan(
+                    text: context.l10n
+                        .offRampReceiveAmount(
+                          formattedReceiveAmount,
+                        )
+                        .toUpperCase(),
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 15,
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                  TextSpan(
+                    text:
+                        ' ${receiveAmount?.currency.symbol.toUpperCase() ?? ''}',
+                    style: const TextStyle(
+                      color: CpColors.yellowColor,
+                      fontSize: 15,
+                      fontWeight: FontWeight.w700,
                     ),
                   ),
-              ],
+                ],
+              ),
+              textAlign: TextAlign.center,
             ),
           ),
-        ),
       ],
     );
   }
 }
+
+class _ReceiveChip extends StatelessWidget {
+  const _ReceiveChip({required this.child});
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) => SizedBox(
+        height: 55,
+        child: CpChip(
+          padding: CpChipPadding.normal,
+          backgroundColor: Colors.black,
+          child: child,
+        ),
+      );
+}
diff --git a/packages/espressocash_app/lib/l10n/intl_en.arb b/packages/espressocash_app/lib/l10n/intl_en.arb
@@ -8,14 +8,6 @@
       }
     }
   },
-  "activities_lblSoldToken": "Sold {amount}",
-  "@activities_lblSoldToken": {
-    "placeholders": {
-      "amount": {
-        "type": "String"
-      }
-    }
-  },
   "activities_lblCanceled": "Canceled",
   "@activities_lblCanceled": {},
   "activities_lblFailure": "Failure",
@@ -26,6 +18,10 @@
   "@activities_lblSuccess": {},
   "activities_lblTitle": "Activity",
   "@activities_lblTitle": {},
+  "activities_lblAddCash": "Add Cash",
+  "@activities_lblAddCash": {},
+  "activities_lblWithdraw": "Cash Out",
+  "@activities_lblWithdraw": {},
   "appLock_lblAutoLock": "Auto-Lock",
   "@appLock_lblAutoLock": {},
   "appLock_lblAutoLockDescription": "Require passcode to access the app",
@@ -940,6 +936,8 @@
       }
     }
   },
+  "onRampAwaitingFunds": "Hang tight. Your order is being processed.",
+  "@onRampAwaitingFunds": {},
   "incomingUsdcFeeNotice": "You were charged a one time $0.10 fee for your first incoming transaction.",
   "@incomingUsdcFeeNotice": {}
 }
diff --git a/packages/espressocash_app/lib/l10n/intl_es.arb b/packages/espressocash_app/lib/l10n/intl_es.arb
@@ -14,14 +14,6 @@
   "@activities_lblFailure": {},
   "activities_lblInProgress": "En curso",
   "@activities_lblInProgress": {},
-  "activities_lblSoldToken": "{amount} Vendido",
-  "@activities_lblSoldToken": {
-    "placeholders": {
-      "amount": {
-        "type": "String"
-      }
-    }
-  },
   "activities_lblSuccess": "Éxito",
   "@activities_lblSuccess": {},
   "activities_lblTitle": "Actividad",

diff --git a/packages/espressocash_app/lib/l10n/intl_fr.arb b/packages/espressocash_app/lib/l10n/intl_fr.arb
@@ -14,14 +14,6 @@
   "@activities_lblFailure": {},
   "activities_lblInProgress": "En cours",
   "@activities_lblInProgress": {},
-  "activities_lblSoldToken": "{amount} Vendu",
-  "@activities_lblSoldToken": {
-    "placeholders": {
-      "amount": {
-        "type": "String"
-      }
-    }
-  },
   "activities_lblSuccess": "Succès",
   "@activities_lblSuccess": {},
   "activities_lblTitle": "Activité",