replace Multiple TextSpan for bold words by Markdown widget in onboarding

assets/translations/en.json

@@ -49,7 +49,9 @@
     "validate": "Validate",
     "confirm": "Confirm",
     "confirmPayment": "Confirm payment",
-    "clickHereToConfirmIdentity": "Click here to confirm\nyour new identity"
+    "clickHereToConfirmIdentity": "Click here to confirm\nyour new identity",
+    "geckoGenerateYourWalletFromMnemonic": "Gecko builds your wallet from a **restoration sentence**. It is a bit like the blueprint that builds your wallet.",
+    "keepThisMnemonicSecure": "Keep this sentence carefully, because without it Gecko will not be able to rebuild your wallets the day you change your phone."
    
 
 }

assets/translations/fr.json

@@ -50,6 +50,7 @@
     "validate": "Valider",
     "confirm": "Confirmer",
     "confirmPayment": "Confirmer le paiement",
-    "clickHereToConfirmIdentity": "Cliquez ici pour confirmer\nvotre nouvelle identité"
+    "clickHereToConfirmIdentity": "Cliquez ici pour confirmer\nvotre nouvelle identité",
-
+    "geckoGenerateYourWalletFromMnemonic": "Gecko fabrique votre portefeuille à partir d’une **phrase de restauration**. Elle est un peu comme le plan qui permet de construire votre portefeuille.",
+    "keepThisMnemonicSecure": "Conservez cette phrase précieusement, car sans elle Gecko ne pourra pas reconstruire vos portefeuilles le jour où vous changez de téléphone."
 }

lib/screens/common_elements.dart

@@ -1,5 +1,6 @@
 import 'package:dots_indicator/dots_indicator.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
 import 'package:provider/provider.dart';
@@ -29,25 +30,50 @@ class CommonElements {
         child: Image.asset('assets/onBoarding/$assetName', width: imageWidth));
   }
 
-  Widget buildText(List<TextSpan> text, [double size = 20]) {
+  Widget buildText(String text, [double size = 20]) {
     return Container(
       padding: const EdgeInsets.all(12),
       width: 440,
       decoration: BoxDecoration(
           color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
-      child: RichText(
+      child: Text(text,
-        textAlign: TextAlign.justify,
+          textAlign: TextAlign.justify,
-        text: TextSpan(
           style: TextStyle(
               fontSize: isTall ? size : size * 0.9,
               color: Colors.black,
-              letterSpacing: 0.3),
+              letterSpacing: 0.3)),
-          children: text,
-        ),
-      ),
     );
   }
 
+  Widget buildTextMd(String text, [double size = 20]) {
+    final style = MarkdownStyleSheet(
+      p: TextStyle(
+          fontSize: isTall ? size : size * 0.9,
+          color: Colors.black,
+          letterSpacing: 0.3),
+      textAlign: WrapAlignment.spaceBetween,
+    );
+
+    return Container(
+        padding: const EdgeInsets.all(12),
+        width: 440,
+        decoration: BoxDecoration(
+            color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
+        child: MarkdownBody(data: text, styleSheet: style));
+
+    //   RichText(
+    //     textAlign: TextAlign.justify,
+    //     text: TextSpan(
+    //       style: TextStyle(
+    //           fontSize: isTall ? size : size * 0.9,
+    //           color: Colors.black,
+    //           letterSpacing: 0.3),
+    //       children: text,
+    //     ),
+    //   ),
+    // );
+  }
+
   Widget nextButton(
       BuildContext context, String text, nextScreen, bool isFast) {
     return SizedBox(
@@ -85,11 +111,12 @@ class CommonElements {
 
   Widget infoIntro(
     BuildContext context,
-    List<TextSpan> text,
+    String text,
     String assetName,
     String buttonText,
     nextScreen,
     double pagePosition, {
+    String? textMd,
     bool isFast = false,
     double boxHeight = 440,
     double imageWidth = 350,
@@ -100,7 +127,11 @@ class CommonElements {
       buildProgressBar(pagePosition),
       SizedBox(height: isTall ? 40 : 20),
 
-      buildText(text, textSize),
+      if (textMd == null)
+        buildText(text, textSize)
+      else
+        buildTextMd(textMd, textSize),
+
       buildImage(assetName, boxHeight, imageWidth),
       Expanded(
         child: Align(

lib/screens/home.dart

@@ -1,6 +1,7 @@
 import 'package:bubble/bubble.dart';
 import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/stateful_wrapper.dart';
 import 'package:gecko/providers/chest_provider.dart';

lib/screens/myWallets/show_seed.dart

@@ -66,12 +66,7 @@ class ShowSeed extends StatelessWidget {
                       children: [
                         Column(children: [
                           common.buildText(
-                            <TextSpan>[
+                              'Tâchez de garder cette phrase bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.'),
-                              const TextSpan(
-                                  text:
-                                      'Tâchez de garder cette phrase bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.'),
-                            ],
-                          ),
                           SizedBox(height: 35 * ratio),
                           sentanceArray(context, _seed.data!.split(' ')),
                           const SizedBox(height: 20),

lib/screens/onBoarding/1.dart

@@ -1,6 +1,8 @@
 // ignore_for_file: file_names
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/onBoarding/2.dart';
@@ -27,21 +29,14 @@ class OnboardingStepOne extends StatelessWidget {
       extendBodyBehindAppBar: true,
       body: SafeArea(
         child: common.infoIntro(
-            context,
+          context,
-            <TextSpan>[
+          '',
-              const TextSpan(
+          'fabrication-de-portefeuille.png',
-                  text: 'Gecko fabrique votre portefeuille à partir d’une '),
+          '>',
-              const TextSpan(
+          const OnboardingStepTwo(),
-                  text: 'phrase de restauration',
+          0,
-                  style: TextStyle(fontWeight: FontWeight.bold)),
+          textMd: 'geckoGenerateYourWalletFromMnemonic'.tr(),
-              const TextSpan(
+        ),
-                  text:
-                      '. Elle est un peu comme le plan qui permet de construire votre portefeuille.'),
-            ],
-            'fabrication-de-portefeuille.png',
-            '>',
-            const OnboardingStepTwo(),
-            0),
       ),
     );
   }

lib/screens/onBoarding/10.dart

@@ -53,12 +53,8 @@ class OnboardingStepTen extends StatelessWidget {
             SizedBox(height: isTall ? 40 : 20),
             common.buildProgressBar(9),
             SizedBox(height: isTall ? 40 : 20),
-            common.buildText(<TextSpan>[
+            common.buildText(
-              TextSpan(
+                "Gecko va vérifier avec vous si vous avez bien mémorisé votre code secret.\n\nTapez votre code secret dans le champ ci-dessous pour vérifier que vous l’avez bien noté."),
-                  text:
-                      "Gecko va vérifier avec vous si vous avez bien mémorisé votre code secret.\n\nTapez votre code secret dans le champ ci-dessous pour vérifier que vous l’avez bien noté.",
-                  style: TextStyle(fontSize: 16 * ratio))
-            ]),
             SizedBox(height: isTall ? 80 : 20),
             Visibility(
               visible: _generateWalletProvider.scanedWalletNumber != -1,

lib/screens/onBoarding/11_congratulations.dart

@@ -32,12 +32,8 @@ class OnboardingStepEleven extends StatelessWidget {
         body: SafeArea(
           child: Column(children: <Widget>[
             const SizedBox(height: 40),
-            common.buildText(<TextSpan>[
+            common.buildText(
-              const TextSpan(
+                "Top !\n\nVotre coffre votre premier portefeuille ont été créés avec un immense succès.\n\nFélicitations !"),
-                text:
-                    "Top !\n\nVotre coffre votre premier portefeuille ont été créés avec un immense succès.\n\nFélicitations !",
-              )
-            ]),
             SizedBox(height: isTall ? 20 : 10),
             Image.asset(
               'assets/onBoarding/gecko-clin.gif',

lib/screens/onBoarding/2.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: file_names
 
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
@@ -30,11 +31,7 @@ class OnboardingStepTwo extends StatelessWidget {
       body: SafeArea(
         child: common.infoIntro(
             context,
-            <TextSpan>[
+            'keepThisMnemonicSecure'.tr(),
-              const TextSpan(
-                  text:
-                      'Conservez cette phrase précieusement, car sans elle Gecko ne pourra pas reconstruire vos portefeuilles le jour où vous changez de téléphone.'),
-            ],
             'fabrication-de-portefeuille-impossible-sans-phrase.png',
             '>',
             const OnboardingStepThree(),

lib/screens/onBoarding/3.dart

@@ -29,15 +29,8 @@ class OnboardingStepThree extends StatelessWidget {
       ),
       extendBodyBehindAppBar: true,
       body: SafeArea(
-        child: common.infoIntro(
+        child: common.infoIntro(context, 'warningForgotPassword'.tr(),
-            context,
+            'forgot_password.png'.tr(), '>', const OnboardingStepFor(), 2),
-            <TextSpan>[
-              TextSpan(text: 'warningForgotPassword'.tr()),
-            ],
-            'forgot_password.png'.tr(),
-            '>',
-            const OnboardingStepFor(),
-            2),
       ),
     );
   }

lib/screens/onBoarding/4.dart

@@ -28,20 +28,10 @@ class OnboardingStepFor extends StatelessWidget {
       ),
       extendBodyBehindAppBar: true,
       body: SafeArea(
-        child: common.infoIntro(
+        child: common.infoIntro(context, '', 'gecko-oublie-aussi.png', '>',
-            context,
+            const OnboardingStepFive(), 3,
-            <TextSpan>[
+            textMd:
-              const TextSpan(text: 'Il est temps de vous munir d’'),
+                'Il est temps de vous munir d’**un papier et d’un crayon** afin de pouvoir noter votre phrase de restauration.'),
-              const TextSpan(
-                  text: 'un d’un papier et d’un crayon',
-                  style: TextStyle(fontWeight: FontWeight.bold)),
-              const TextSpan(
-                  text: ' afin de pouvoir noter votre phrase de restauration.'),
-            ],
-            'gecko-oublie-aussi.png',
-            '>',
-            const OnboardingStepFive(),
-            3),
       ),
     );
   }

lib/screens/onBoarding/5.dart

@@ -53,12 +53,7 @@ class _ChooseChestState extends State<OnboardingStepFive> {
           common.buildProgressBar(4),
           SizedBox(height: isTall ? 40 : 20),
           common.buildText(
-            <TextSpan>[
+              'Gecko a généré votre phrase de restauration ! Tâchez de la garder bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.'),
-              const TextSpan(
-                  text:
-                      'Gecko a généré votre phrase de restauration ! Tâchez de la garder bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.'),
-            ],
-          ),
           SizedBox(height: 35 * ratio),
           sentanceArray(context),
           SizedBox(height: 17 * ratio),

lib/screens/onBoarding/6.dart

@@ -56,20 +56,8 @@ class OnboardingStepSix extends StatelessWidget {
               SizedBox(height: isTall ? 40 : 20),
               common.buildProgressBar(5),
               SizedBox(height: isTall ? 40 : 20),
-              common.buildText(
+              common.buildTextMd(
-                <TextSpan>[
+                "Avez-vous bien noté votre phrase de restauration ?\n\nPour en être sûr, veuillez taper dans le champ ci-dessous le **${_generateWalletProvider.nbrWord + 1}ème mot** de votre phrase de restauration :",
-                  TextSpan(
-                      text:
-                          "Avez-vous bien noté votre phrase de restauration ?\n\nPour en être sûr, veuillez taper dans le champ ci-dessous le ",
-                      style: TextStyle(fontSize: 16 * ratio)),
-                  TextSpan(
-                      text: '${_generateWalletProvider.nbrWord + 1}ème mot',
-                      style: TextStyle(
-                          fontWeight: FontWeight.bold, fontSize: 16 * ratio)),
-                  TextSpan(
-                      text: " de votre phrase de restauration :",
-                      style: TextStyle(fontSize: 16 * ratio)),
-                ],
               ),
               SizedBox(height: isTall ? 70 : 20),
               Text('${_generateWalletProvider.nbrWord + 1}',

lib/screens/onBoarding/7.dart

@@ -30,11 +30,7 @@ class OnboardingStepSeven extends StatelessWidget {
       body: SafeArea(
         child: common.infoIntro(
             context,
-            <TextSpan>[
+            'Gecko va maintenant générer pour vous un code secret court qui vous permettra d’accéder rapidement à vos portefeuilles, sans avoir à taper votre phrase de restauration à chaque fois.',
-              const TextSpan(
-                  text:
-                      'Gecko va maintenant générer pour vous un code secret court qui vous permettra d’accéder rapidement à vos portefeuilles, sans avoir à taper votre phrase de restauration à chaque fois.'),
-            ],
             'coffre-fort-code-secret-dans-telephone.png',
             '>',
             OnboardingStepEight(scanDerivation: scanDerivation),

lib/screens/onBoarding/8.dart

@@ -30,21 +30,13 @@ class OnboardingStepEight extends StatelessWidget {
       body: SafeArea(
         child: common.infoIntro(
             context,
-            <TextSpan>[
+            '',
-              const TextSpan(
-                  text:
-                      'Ce code secret protège vos portefeuilles dans un coffre-fort '),
-              const TextSpan(
-                  text: 'dont vous seul possédez le code',
-                  style: TextStyle(fontWeight: FontWeight.bold)),
-              const TextSpan(
-                  text:
-                      ', de sorte que vos portefeuilles seront inutilisables par d’autres.'),
-            ],
             'coffre-fort-protege-les-portefeuilles.png',
             '>',
             OnboardingStepNine(scanDerivation: scanDerivation),
-            7),
+            7,
+            textMd:
+                'Ce code secret protège vos portefeuilles dans un coffre-fort **dont vous seul possédez le code**, de sorte que vos portefeuilles seront inutilisables par d’autres.'),
       ),
     );
   }

lib/screens/onBoarding/9.dart

@@ -44,19 +44,8 @@ class OnboardingStepNine extends StatelessWidget {
             SizedBox(height: isTall ? 40 : 20),
             common.buildProgressBar(8),
             SizedBox(height: isTall ? 40 : 20),
-            common.buildText(
+            common.buildTextMd(
-              <TextSpan>[
+                "Et voilà votre code secret !\n\nMémorisez-le ou notez-le, car il vous sera demandé **à chaque fois** que vous voudrez effectuer un paiement sur cet appareil."),
-                const TextSpan(
-                    text:
-                        "Et voilà votre code secret !\n\nMémorisez-le ou notez-le, car il vous sera demandé "),
-                const TextSpan(
-                    text: 'à chaque fois',
-                    style: TextStyle(fontWeight: FontWeight.bold)),
-                const TextSpan(
-                    text:
-                        " que vous voudrez effectuer un paiement sur cet appareil."),
-              ],
-            ),
             const SizedBox(height: 100),
             Stack(
               alignment: Alignment.centerRight,

pubspec.lock

@@ -274,13 +274,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
-  csslib:
-    dependency: transitive
-    description:
-      name: csslib
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.17.2"
   dart_style:
     dependency: transitive
     description:
@@ -396,13 +389,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.18.4"
-  flutter_html:
-    dependency: "direct main"
-    description:
-      name: flutter_html
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "3.0.0-alpha.5"
   flutter_inappwebview:
     dependency: transitive
     description:
@@ -429,6 +415,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.6"
+  flutter_markdown:
+    dependency: "direct main"
+    description:
+      name: flutter_markdown
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.10+2"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:
@@ -584,13 +577,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.3"
-  html:
-    dependency: transitive
-    description:
-      name: html
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.15.0"
   http:
     dependency: "direct main"
     description:
@@ -778,6 +764,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.2"
+  markdown:
+    dependency: transitive
+    description:
+      name: markdown
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.0.0"
   matcher:
     dependency: transitive
     description:
@@ -848,13 +841,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.6.0+1"
-  numerus:
-    dependency: transitive
-    description:
-      name: numerus
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.1.1"
   package_config:
     dependency: transitive
     description:

pubspec.yaml

@@ -73,7 +73,7 @@ dependencies:
   connectivity_plus: ^2.3.3
   image_cropper: ^2.0.3
   easy_localization: ^3.0.1
-  flutter_html: ^3.0.0-alpha.5
+  flutter_markdown: ^0.6.10+2
 
 dev_dependencies:
   # flutter_launcher_icons: ^0.9.2