Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-12-24 04:19:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new wallet recovery phrase warning and dialog popup

Browse source
This commit is contained in:
julian 2022-11-29 08:38:15 -06:00
parent 692a71f94e
commit 7918a034ed
2 changed files with 313 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

249
lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
View file

@ -2,13 +2,16 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart'; import 'package:stackwallet/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart';
import 'package:stackwallet/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/recovery_phrase_explanation_dialog.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart'; import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart';
import 'package:stackwallet/providers/global/secure_store_provider.dart'; import 'package:stackwallet/providers/global/secure_store_provider.dart';
import 'package:stackwallet/providers/providers.dart'; import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/services/coins/coin_service.dart'; import 'package:stackwallet/services/coins/coin_service.dart';
import 'package:stackwallet/services/coins/manager.dart'; import 'package:stackwallet/services/coins/manager.dart';
import 'package:stackwallet/services/transaction_notification_tracker.dart'; import 'package:stackwallet/services/transaction_notification_tracker.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/default_nodes.dart'; import 'package:stackwallet/utilities/default_nodes.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart';
@ -20,6 +23,7 @@ import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
import 'package:stackwallet/widgets/loading_indicator.dart'; import 'package:stackwallet/widgets/loading_indicator.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
@ -74,6 +78,31 @@ class _NewWalletRecoveryPhraseWarningViewState
) )
: AppBar( : AppBar(
leading: const AppBarBackButton(), leading: const AppBarBackButton(),
actions: [
Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 10,
),
child: AppBarIconButton(
icon: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
onPressed: () async {
await showDialog<void>(
context: context,
builder: (context) => const RecoveryPhraseExplanationDialog(),
);
},
),
)
],
), ),
body: Padding( body: Padding(
padding: EdgeInsets.all(isDesktop ? 0 : 16), padding: EdgeInsets.all(isDesktop ? 0 : 16),
@ -113,18 +142,183 @@ class _NewWalletRecoveryPhraseWarningViewState
height: isDesktop ? 32 : 16, height: isDesktop ? 32 : 16,
), ),
RoundedWhiteContainer( RoundedWhiteContainer(
padding: isDesktop padding: const EdgeInsets.all(32),
? const EdgeInsets.all(32)
: const EdgeInsets.all(12),
width: isDesktop ? 480 : null, width: isDesktop ? 480 : null,
child: Text( child: isDesktop
"On the next screen you will see $_numberOfPhraseWords words that make up your recovery phrase.\n\nPlease write it down. Keep it safe and never share it with anyone. Your recovery phrase is the only way you can access your funds if you forget your PIN, lose your phone, etc.\n\nStack Wallet does not keep nor is able to restore your recover phrase. Only you have access to your wallet.", ? Text(
style: isDesktop "On the next screen you will see $_numberOfPhraseWords words that make up your recovery phrase.\n\nPlease write it down. Keep it safe and never share it with anyone. Your recovery phrase is the only way you can access your funds if you forget your PIN, lose your phone, etc.\n\nStack Wallet does not keep nor is able to restore your recover phrase. Only you have access to your wallet.",
? STextStyles.desktopTextMediumRegular(context) style: isDesktop
: STextStyles.subtitle(context).copyWith( ? STextStyles.desktopTextMediumRegular(context)
fontSize: 12, : STextStyles.subtitle(context).copyWith(
), fontSize: 12,
), ),
)
: Column(
children: [
Text(
"Important",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
const SizedBox(
height: 24,
),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
style: STextStyles.desktopH3(context)
.copyWith(fontSize: 18),
children: [
TextSpan(
text: "On the next screen you will be given ",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
fontSize: 18,
),
),
TextSpan(
text: "12 words",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
fontSize: 18,
),
),
TextSpan(
text: ". They are your ",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
fontSize: 18,
),
),
TextSpan(
text: "recovery phrase",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
fontSize: 18,
),
),
TextSpan(
text: ".",
style: STextStyles.desktopH3(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
fontSize: 18,
),
),
],
),
),
const SizedBox(
height: 40,
),
Column(
children: [
Row(
children: [
SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
radiusMultiplier: 20,
padding: const EdgeInsets.all(9),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: SvgPicture.asset(
Assets.svg.pencil,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
),
),
const SizedBox(
width: 20,
),
Text(
"Write them down.",
style: STextStyles.navBarTitle(context),
),
],
),
const SizedBox(
height: 30,
),
Row(
children: [
SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
radiusMultiplier: 20,
padding: const EdgeInsets.all(8),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: SvgPicture.asset(
Assets.svg.lock,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
),
),
const SizedBox(
width: 20,
),
Text(
"Keep them safe.",
style: STextStyles.navBarTitle(context),
),
],
),
const SizedBox(
height: 30,
),
Row(
children: [
SizedBox(
width: 32,
height: 32,
child: RoundedContainer(
radiusMultiplier: 20,
padding: const EdgeInsets.all(8),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
child: SvgPicture.asset(
Assets.svg.eyeSlash,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
),
),
const SizedBox(
width: 20,
),
Text(
"Do not show them to anyone.",
style: STextStyles.navBarTitle(context),
),
],
),
],
)
],
),
), ),
if (!isDesktop) const Spacer(), if (!isDesktop) const Spacer(),
if (isDesktop) if (isDesktop)
@ -150,27 +344,30 @@ class _NewWalletRecoveryPhraseWarningViewState
child: Container( child: Container(
color: Colors.transparent, color: Colors.transparent,
child: Row( child: Row(
crossAxisAlignment: isDesktop crossAxisAlignment: CrossAxisAlignment.start,
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [ children: [
Checkbox( SizedBox(
materialTapTargetSize: width: 24,
MaterialTapTargetSize.shrinkWrap, height: 24,
value: ref child: Checkbox(
.watch(checkBoxStateProvider.state) materialTapTargetSize:
.state, MaterialTapTargetSize.shrinkWrap,
onChanged: (newValue) { value: ref
ref.read(checkBoxStateProvider.state).state = .watch(checkBoxStateProvider.state)
newValue!; .state,
}, onChanged: (newValue) {
ref
.read(checkBoxStateProvider.state)
.state = newValue!;
},
),
), ),
SizedBox( SizedBox(
width: isDesktop ? 14 : 4, width: isDesktop ? 20 : 10,
), ),
Flexible( Flexible(
child: Text( child: Text(
"I understand that if I lose my recovery phrase, I will not be able to access my funds.", "I understand that Stack Wallet does not keep and cannot restore your recovery phrase, and If I lose my recovery phrase, I will not be able to access my funds.",
style: isDesktop style: isDesktop
? STextStyles.desktopTextMedium(context) ? STextStyles.desktopTextMedium(context)
: STextStyles.baseXS(context), : STextStyles.baseXS(context),

90
lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/recovery_phrase_explanation_dialog.dart Normal file
View file

@ -0,0 +1,90 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/stack_dialog.dart';
class RecoveryPhraseExplanationDialog extends StatelessWidget {
const RecoveryPhraseExplanationDialog({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return StackDialogBase(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: MediaQuery.of(context).size.height -
16 -
16 -
24 -
24 -
24 -
76,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Recovery phrase explained",
style: STextStyles.titleBold12(context),
),
const SizedBox(
height: 12,
),
Text(
"The car analogy.",
style: STextStyles.titleBold12(context).copyWith(
fontSize: 14,
),
),
const SizedBox(
height: 8,
),
Text(
"You can drive your car when your have your car keys. If you lose your car keys, you can’t drive you car. If someone steals your car keys, they can steal your car. If someone copies your car keys, they can also steal your car.",
style: STextStyles.baseXS(context),
),
const SizedBox(
height: 8,
),
Text(
"Cryptocurrency works the same way. These recovery phrase words we’re about to show you are like the car keys in the metaphor above.",
style: STextStyles.baseXS(context),
),
const SizedBox(
height: 8,
),
Text(
"If you lose these words, you can’t access your money. If someone steals these words, they can access and steal your money. If someone copies these words, they can access and steal your money.",
style: STextStyles.baseXS(context),
),
const SizedBox(
height: 8,
),
Text(
"If your funds are lost or stolen because of you don’t write down your recovery phrase or keep it safe, then NOBODY, NOT EVEN US, can help you recover your money.",
style: STextStyles.baseXS(context),
),
],
),
),
),
const SizedBox(
height: 24,
),
Row(
children: [
const Spacer(),
Expanded(
child: SecondaryButton(
label: "Close",
onPressed: Navigator.of(context).pop,
),
),
],
),
],
),
);
}
}