feat: add tutorial about dragAndDrop wallets tules transactions

assets/translations/en.json

@@ -218,5 +218,7 @@
     "thisIdentityAlreadyExist": "This identity already exists",
     "removedFromcontacts": "Removed from contacts",
     "addedToContacts": "Added to contacts",
-    "certificationsOf": "Certifications of {}"
+    "certificationsOf": "Certifications of {}",
+    "explainDraggableWallet": "Drag and drop a tile onto another to make a transaction, by holding down the tile.",
+    "skip": "Skip"
 }
\ No newline at end of file

assets/translations/es.json

@@ -219,5 +219,7 @@
     "thisIdentityAlreadyExist": "Esta identidad ya existe",
     "removedFromcontacts": "Removed from contacts",
     "addedToContacts": "Added to contacts",
-    "certificationsOf": "Certifications of {}"
+    "certificationsOf": "Certifications of {}",
+    "explainDraggableWallet": "Drag and drop a tile onto another to make a transaction, by holding down the tile.",
+    "skip": "Skip"
 }
\ No newline at end of file

assets/translations/fr.json

@@ -218,5 +218,7 @@
     "thisIdentityAlreadyExist": "Cette identité existe déjà",
     "removedFromcontacts": "Retiré des contact",
     "addedToContacts": "Ajouté au contacts",
-    "certificationsOf": "Certifications de {}"
+    "certificationsOf": "Certifications de {}",
+    "explainDraggableWallet": "Faites glisser et déposez une tuile sur une autre pour effectuer une transaction, avec un appui long.",
+    "skip": "Passer"
 }
\ No newline at end of file

lib/screens/myWallets/wallets_home.dart

@@ -24,6 +24,7 @@ import 'package:gecko/widgets/commons/smooth_transition.dart';
 import 'package:gecko/widgets/name_by_address.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
 // import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';
 
 class WalletsHome extends StatefulWidget {
@@ -34,9 +35,6 @@ class WalletsHome extends StatefulWidget {
 }
 
 class _WalletsHomeState extends State<WalletsHome> {
-  final safeKey = GlobalKey();
-  // List<TargetFocus> targets = [];
-
   @override
   void initState() {
     super.initState();
@@ -227,6 +225,8 @@ class _WalletsHomeState extends State<WalletsHome> {
     final bool isWalletsExists = myWalletProvider.checkIfWalletExist();
     final sub = Provider.of<SubstrateSdk>(context, listen: false);
 
+    final keyDragAndDrop = GlobalKey(debugLabel: 'keyDragAndDrop');
+
     if (!isWalletsExists) {
       return const Text('');
     }
@@ -259,13 +259,45 @@ class _WalletsHomeState extends State<WalletsHome> {
     } else {
       nTule = 2;
     }
-    // Offset followDragAnchorStrategy(
-    //     Draggable<Object> d, BuildContext context, Offset point) {
-    //   return Offset(d.feedbackOffset.dx - 30, d.feedbackOffset.dy - 0);
-    // }
 
-    // showTutorial();
-    // Future.delayed(const Duration(seconds: 1), showTutorial);
+    final tutorialCoachMark = TutorialCoachMark(
+      targets: [
+        TargetFocus(
+          identify: "drag_and_drop",
+          keyTarget: keyDragAndDrop,
+          contents: [
+            TargetContent(
+                child: Column(
+              children: [
+                Image.asset('assets/drag-and-drop.png', height: 140),
+                const SizedBox(height: 15),
+                Text(
+                  'explainDraggableWallet'.tr(),
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                      fontSize: 22, fontWeight: FontWeight.w500),
+                ),
+              ],
+            ))
+          ],
+          alignSkip: Alignment.bottomRight,
+          enableOverlayTab: true,
+        ),
+      ],
+      colorShadow: orangeC,
+      textSkip: "skip".tr(),
+      paddingFocus: 10,
+      opacityShadow: 0.8,
+    );
+
+    // configBox.delete('showDraggableTutorial');
+    final bool showDraggableTutorial =
+        configBox.get('showDraggableTutorial') ?? true;
+
+    if (listWallets.length > 1 && showDraggableTutorial) {
+      tutorialCoachMark.show(context: context);
+      configBox.put('showDraggableTutorial', false);
+    }
 
     return CustomScrollView(slivers: <Widget>[
       const SliverToBoxAdapter(child: SizedBox(height: 20)),
@@ -343,6 +375,10 @@ class _WalletsHomeState extends State<WalletsHome> {
                               ),
                             );
                           },
+                          child: SizedBox(
+                            key: repository.number == 1
+                                ? keyDragAndDrop
+                                : const Key('nothing'),
                             child: ClipOvalShadow(
                               shadow: const Shadow(
                                 color: Colors.transparent,
@@ -374,7 +410,8 @@ class _WalletsHomeState extends State<WalletsHome> {
                                                 repository.imageCustomPath == ''
                                             ? Image.asset(
                                                 'assets/avatars/${repository.imageDefaultPath}',
-                                              alignment: Alignment.bottomCenter,
+                                                alignment:
+                                                    Alignment.bottomCenter,
                                                 scale: 0.5,
                                               )
                                             : Container(
@@ -397,7 +434,8 @@ class _WalletsHomeState extends State<WalletsHome> {
                                         isDefault: repository.address ==
                                             defaultWallet.address),
                                     Row(
-                                    mainAxisAlignment: MainAxisAlignment.center,
+                                      mainAxisAlignment:
+                                          MainAxisAlignment.center,
                                       children: [
                                         Column(
                                           children: [
@@ -407,7 +445,8 @@ class _WalletsHomeState extends State<WalletsHome> {
                                                 child: NameByAddress(
                                                   wallet: repository,
                                                   size: 20,
-                                                color: defaultWallet.address ==
+                                                  color:
+                                                      defaultWallet.address ==
                                                               repository.address
                                                           ? Colors.white
                                                           : Colors.black,
@@ -423,6 +462,7 @@ class _WalletsHomeState extends State<WalletsHome> {
                               ),
                             ),
                           ),
+                        ),
                       );
                     }),
               ),

pubspec.yaml

@@ -64,7 +64,7 @@ dependencies:
   graphql: ^5.1.1
   hive_generator: ^2.0.0
   riverpod: ^2.1.1
-  tutorial_coach_mark: ^1.2.4
+  tutorial_coach_mark: ^1.2.8
   confetti: ^0.7.0
 
 dev_dependencies: