Merge pull request #144 from MostroP2P/improve-cancel

fix: resolve cancel button loading state and improve  cancel dialog UX

Author: grunch

lib/features/trades/screens/trade_detail_screen.dart

@@ -284,33 +284,40 @@ class TradeDetailScreen extends ConsumerWidget {
             cancelMessage = S.of(context)!.areYouSureCancel;
           }
 
+          final buttonController = MostroReactiveButtonController();
           widgets.add(_buildNostrButton(
             S.of(context)!.cancel.toUpperCase(),
             action: action,
             backgroundColor: AppTheme.red1,
-            onPressed: () {
-              showDialog(
+            controller: buttonController,
+            onPressed: () async {
+              final result = await showDialog<bool>(
                 context: context,
                 builder: (context) => AlertDialog(
                   title: Text(S.of(context)!.cancelTradeDialogTitle),
                   content: Text(cancelMessage),
                   actions: [
                     TextButton(
-                      onPressed: () => context.pop(),
-                      child: Text(S.of(context)!.cancel),
+                      onPressed: () => context.pop(false),
+                      child: Text(S.of(context)!.no),
                     ),
                     ElevatedButton(
                       onPressed: () {
-                        context.pop();
+                        context.pop(true);
                         ref
                             .read(orderNotifierProvider(orderId).notifier)
                             .cancelOrder();
                       },
-                      child: Text(S.of(context)!.confirm),
+                      child: Text(S.of(context)!.yes),
                     ),
                   ],
                 ),
               );
+              
+              // Reset loading state if dialog was cancelled
+              if (result != true) {
+                buttonController.resetLoading();
+              }
             },
           ));
           break;
@@ -490,8 +497,11 @@ class TradeDetailScreen extends ConsumerWidget {
     required actions.Action action,
     required VoidCallback? onPressed,
     Color? backgroundColor,
+    Key? key,
+    MostroReactiveButtonController? controller,
   }) {
     return MostroReactiveButton(
+      key: key,
       label: label,
       buttonStyle: ButtonStyleType.raised,
       orderId: orderId,
@@ -500,6 +510,7 @@ class TradeDetailScreen extends ConsumerWidget {
       onPressed: onPressed ?? () {}, // Provide empty function when null
       showSuccessIndicator: true,
       timeout: const Duration(seconds: 30),
+      controller: controller,
     );
   }
 

lib/l10n/intl_en.arb

@@ -203,6 +203,8 @@
   "cooperativeCancelMessage": "If you confirm, you will start a cooperative cancellation with your counterparty.",
   "acceptCancelMessage": "If you confirm, you will accept the cooperative cancellation initiated by your counterparty.",
   "confirm": "Confirm",
+  "yes": "Yes",
+  "no": "No",
   "buy": "BUY",
   "sell": "SELL",
   "buying": "BUYING",

lib/l10n/intl_es.arb

@@ -164,6 +164,8 @@
   "cooperativeCancelMessage": "Si confirmas, iniciarás una cancelación cooperativa con tu contraparte.",
   "acceptCancelMessage": "Si confirmas, aceptarás la cancelación cooperativa iniciada por tu contraparte.",
   "confirm": "Confirmar",
+  "yes": "Sí",
+  "no": "No",
   "buy": "COMPRAR",
   "sell": "VENDER",
   "buying": "COMPRANDO",

lib/l10n/intl_it.arb

@@ -164,6 +164,8 @@
   "cooperativeCancelMessage": "Se confermi, inizierai un annullamento cooperativo con la tua controparte.",
   "acceptCancelMessage": "Se confermi, accetterai l'annullamento cooperativo iniziato dalla tua controparte.",
   "confirm": "Conferma",
+  "yes": "Sì",
+  "no": "No",
   "buy": "COMPRA",
   "sell": "VENDI",
   "buying": "COMPRANDO",

lib/shared/widgets/mostro_reactive_button.dart

@@ -8,6 +8,23 @@ import 'package:mostro_mobile/core/app_theme.dart';
 
 enum ButtonStyleType { raised, outlined, text }
 
+/// Controller for managing MostroReactiveButton state externally
+class MostroReactiveButtonController {
+  _MostroReactiveButtonState? _state;
+  
+  void _attach(_MostroReactiveButtonState state) {
+    _state = state;
+  }
+  
+  void _detach() {
+    _state = null;
+  }
+  
+  void resetLoading() {
+    _state?.resetLoading();
+  }
+}
+
 /// A button specially designed for reactive operations that shows loading state
 /// and handles the unique event-based nature of the mostro protocol.
 class MostroReactiveButton extends ConsumerStatefulWidget {
@@ -21,6 +38,7 @@ class MostroReactiveButton extends ConsumerStatefulWidget {
   final bool showSuccessIndicator;
 
   final Color? backgroundColor;
+  final MostroReactiveButtonController? controller;
 
   const MostroReactiveButton({
     super.key,
@@ -32,6 +50,7 @@ class MostroReactiveButton extends ConsumerStatefulWidget {
     this.timeout = const Duration(seconds: 30),
     this.showSuccessIndicator = false,
     this.backgroundColor,
+    this.controller,
   });
 
   @override
@@ -45,12 +64,27 @@ class _MostroReactiveButtonState extends ConsumerState<MostroReactiveButton> {
   Timer? _timeoutTimer;
   dynamic _lastSeenAction;
 
+  @override
+  void initState() {
+    super.initState();
+    widget.controller?._attach(this);
+  }
+
   @override
   void dispose() {
+    widget.controller?._detach();
     _timeoutTimer?.cancel();
     super.dispose();
   }
 
+  void resetLoading() {
+    setState(() {
+      _loading = false;
+      _showSuccess = false;
+    });
+    _timeoutTimer?.cancel();
+  }
+
   void _startOperation() {
     setState(() {
       _loading = true;