From 65f6f0a237c86862e5472b66f477c93204bb008f Mon Sep 17 00:00:00 2001 From: poka Date: Fri, 17 Jun 2022 21:34:47 +0200 Subject: [PATCH] replace Multiple TextSpan for bold words by Markdown widget in onboarding --- assets/translations/en.json | 4 +- assets/translations/fr.json | 5 +- lib/screens/common_elements.dart | 51 +++++++++++++++---- lib/screens/home.dart | 1 + lib/screens/myWallets/show_seed.dart | 7 +-- lib/screens/onBoarding/1.dart | 25 ++++----- lib/screens/onBoarding/10.dart | 8 +-- .../onBoarding/11_congratulations.dart | 8 +-- lib/screens/onBoarding/2.dart | 7 +-- lib/screens/onBoarding/3.dart | 11 +--- lib/screens/onBoarding/4.dart | 18 ++----- lib/screens/onBoarding/5.dart | 7 +-- lib/screens/onBoarding/6.dart | 16 +----- lib/screens/onBoarding/7.dart | 6 +-- lib/screens/onBoarding/8.dart | 16 ++---- lib/screens/onBoarding/9.dart | 15 +----- pubspec.lock | 42 +++++---------- pubspec.yaml | 2 +- 18 files changed, 96 insertions(+), 153 deletions(-) diff --git a/assets/translations/en.json b/assets/translations/en.json index b77c5c0..3b26486 100644 --- a/assets/translations/en.json +++ b/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." } \ No newline at end of file diff --git a/assets/translations/fr.json b/assets/translations/fr.json index 4841f12..ab71c0e 100644 --- a/assets/translations/fr.json +++ b/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." } \ No newline at end of file diff --git a/lib/screens/common_elements.dart b/lib/screens/common_elements.dart index ca12fa7..cfd738e 100644 --- a/lib/screens/common_elements.dart +++ b/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 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( - textAlign: TextAlign.justify, - text: TextSpan( + child: Text(text, + textAlign: TextAlign.justify, style: TextStyle( fontSize: isTall ? size : size * 0.9, color: Colors.black, - letterSpacing: 0.3), - children: text, - ), - ), + letterSpacing: 0.3)), ); } + 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 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( diff --git a/lib/screens/home.dart b/lib/screens/home.dart index 7a7ad59..d2d2210 100644 --- a/lib/screens/home.dart +++ b/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'; diff --git a/lib/screens/myWallets/show_seed.dart b/lib/screens/myWallets/show_seed.dart index 5bd355a..56e8a89 100644 --- a/lib/screens/myWallets/show_seed.dart +++ b/lib/screens/myWallets/show_seed.dart @@ -66,12 +66,7 @@ class ShowSeed extends StatelessWidget { children: [ Column(children: [ common.buildText( - [ - 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.'), - ], - ), + '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), diff --git a/lib/screens/onBoarding/1.dart b/lib/screens/onBoarding/1.dart index 9d84922..d725e9e 100644 --- a/lib/screens/onBoarding/1.dart +++ b/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, - [ - const TextSpan( - text: 'Gecko fabrique votre portefeuille à partir d’une '), - const TextSpan( - text: 'phrase de restauration', - style: TextStyle(fontWeight: FontWeight.bold)), - const TextSpan( - text: - '. Elle est un peu comme le plan qui permet de construire votre portefeuille.'), - ], - 'fabrication-de-portefeuille.png', - '>', - const OnboardingStepTwo(), - 0), + context, + '', + 'fabrication-de-portefeuille.png', + '>', + const OnboardingStepTwo(), + 0, + textMd: 'geckoGenerateYourWalletFromMnemonic'.tr(), + ), ), ); } diff --git a/lib/screens/onBoarding/10.dart b/lib/screens/onBoarding/10.dart index 7b321c6..ce08c80 100644 --- a/lib/screens/onBoarding/10.dart +++ b/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( - 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)) - ]), + common.buildText( + "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é."), SizedBox(height: isTall ? 80 : 20), Visibility( visible: _generateWalletProvider.scanedWalletNumber != -1, diff --git a/lib/screens/onBoarding/11_congratulations.dart b/lib/screens/onBoarding/11_congratulations.dart index cd92ba5..64dc12e 100644 --- a/lib/screens/onBoarding/11_congratulations.dart +++ b/lib/screens/onBoarding/11_congratulations.dart @@ -32,12 +32,8 @@ class OnboardingStepEleven extends StatelessWidget { body: SafeArea( child: Column(children: [ const SizedBox(height: 40), - common.buildText([ - const TextSpan( - text: - "Top !\n\nVotre coffre votre premier portefeuille ont été créés avec un immense succès.\n\nFélicitations !", - ) - ]), + common.buildText( + "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', diff --git a/lib/screens/onBoarding/2.dart b/lib/screens/onBoarding/2.dart index 03c2bf8..dd1cc79 100644 --- a/lib/screens/onBoarding/2.dart +++ b/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, - [ - 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.'), - ], + 'keepThisMnemonicSecure'.tr(), 'fabrication-de-portefeuille-impossible-sans-phrase.png', '>', const OnboardingStepThree(), diff --git a/lib/screens/onBoarding/3.dart b/lib/screens/onBoarding/3.dart index 663f1ee..1f581a4 100644 --- a/lib/screens/onBoarding/3.dart +++ b/lib/screens/onBoarding/3.dart @@ -29,15 +29,8 @@ class OnboardingStepThree extends StatelessWidget { ), extendBodyBehindAppBar: true, body: SafeArea( - child: common.infoIntro( - context, - [ - TextSpan(text: 'warningForgotPassword'.tr()), - ], - 'forgot_password.png'.tr(), - '>', - const OnboardingStepFor(), - 2), + child: common.infoIntro(context, 'warningForgotPassword'.tr(), + 'forgot_password.png'.tr(), '>', const OnboardingStepFor(), 2), ), ); } diff --git a/lib/screens/onBoarding/4.dart b/lib/screens/onBoarding/4.dart index 5b5d7d4..e1fb0b4 100644 --- a/lib/screens/onBoarding/4.dart +++ b/lib/screens/onBoarding/4.dart @@ -28,20 +28,10 @@ class OnboardingStepFor extends StatelessWidget { ), extendBodyBehindAppBar: true, body: SafeArea( - child: common.infoIntro( - context, - [ - const TextSpan(text: 'Il est temps de vous munir d’'), - 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), + child: common.infoIntro(context, '', 'gecko-oublie-aussi.png', '>', + const OnboardingStepFive(), 3, + textMd: + 'Il est temps de vous munir d’**un papier et d’un crayon** afin de pouvoir noter votre phrase de restauration.'), ), ); } diff --git a/lib/screens/onBoarding/5.dart b/lib/screens/onBoarding/5.dart index 266234b..e0381f9 100644 --- a/lib/screens/onBoarding/5.dart +++ b/lib/screens/onBoarding/5.dart @@ -53,12 +53,7 @@ class _ChooseChestState extends State { common.buildProgressBar(4), SizedBox(height: isTall ? 40 : 20), common.buildText( - [ - 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.'), - ], - ), + '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), diff --git a/lib/screens/onBoarding/6.dart b/lib/screens/onBoarding/6.dart index 832019a..f2009ed 100644 --- a/lib/screens/onBoarding/6.dart +++ b/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( - [ - 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)), - ], + common.buildTextMd( + "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 :", ), SizedBox(height: isTall ? 70 : 20), Text('${_generateWalletProvider.nbrWord + 1}', diff --git a/lib/screens/onBoarding/7.dart b/lib/screens/onBoarding/7.dart index 71c3c99..1c7b6ee 100644 --- a/lib/screens/onBoarding/7.dart +++ b/lib/screens/onBoarding/7.dart @@ -30,11 +30,7 @@ class OnboardingStepSeven extends StatelessWidget { body: SafeArea( child: common.infoIntro( context, - [ - 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.'), - ], + '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), diff --git a/lib/screens/onBoarding/8.dart b/lib/screens/onBoarding/8.dart index 0b6555f..e85c6e7 100644 --- a/lib/screens/onBoarding/8.dart +++ b/lib/screens/onBoarding/8.dart @@ -30,21 +30,13 @@ class OnboardingStepEight extends StatelessWidget { body: SafeArea( child: common.infoIntro( context, - [ - 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.'), ), ); } diff --git a/lib/screens/onBoarding/9.dart b/lib/screens/onBoarding/9.dart index 16dbda0..ea06ac4 100644 --- a/lib/screens/onBoarding/9.dart +++ b/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( - [ - 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."), - ], - ), + common.buildTextMd( + "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 SizedBox(height: 100), Stack( alignment: Alignment.centerRight, diff --git a/pubspec.lock b/pubspec.lock index 113d714..e88a7fb 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index ab75df1..2a5fc61 100644 --- a/pubspec.yaml +++ b/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