diff --git a/assets/images/wallet_connect_step_icons/step1_power.svg b/assets/images/wallet_connect_step_icons/step1_power.svg
new file mode 100644
index 000000000..52e733d89
--- /dev/null
+++ b/assets/images/wallet_connect_step_icons/step1_power.svg
@@ -0,0 +1,5 @@
+
diff --git a/assets/images/wallet_connect_step_icons/step2_connect.svg b/assets/images/wallet_connect_step_icons/step2_connect.svg
new file mode 100644
index 000000000..cd81e9db0
--- /dev/null
+++ b/assets/images/wallet_connect_step_icons/step2_connect.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/images/wallet_connect_step_icons/step3_unlock.svg b/assets/images/wallet_connect_step_icons/step3_unlock.svg
new file mode 100644
index 000000000..fe63f32af
--- /dev/null
+++ b/assets/images/wallet_connect_step_icons/step3_unlock.svg
@@ -0,0 +1,8 @@
+
diff --git a/assets/images/wallet_connect_step_icons/step4_select.svg b/assets/images/wallet_connect_step_icons/step4_select.svg
new file mode 100644
index 000000000..66e505317
--- /dev/null
+++ b/assets/images/wallet_connect_step_icons/step4_select.svg
@@ -0,0 +1,5 @@
+
diff --git a/lib/src/screens/connect_device/connect_device_page.dart b/lib/src/screens/connect_device/connect_device_page.dart
index 00b5356be..2122db44a 100644
--- a/lib/src/screens/connect_device/connect_device_page.dart
+++ b/lib/src/screens/connect_device/connect_device_page.dart
@@ -319,10 +319,14 @@ class ConnectDevicePageBodyState extends State {
builder: (BuildContext bottomSheetContext) => InfoStepsBottomSheet(
titleText: S.of(context).how_to_connect,
steps: [
- InfoStep('${S.of(context).step} 1', S.of(context).connect_hw_info_step_1),
- InfoStep('${S.of(context).step} 2', S.of(context).connect_hw_info_step_2),
- InfoStep('${S.of(context).step} 3', S.of(context).connect_hw_info_step_3),
- InfoStep('${S.of(context).step} 4', S.of(context).connect_hw_info_step_4),
+ InfoStep('assets/images/wallet_connect_step_icons/step1_power.svg',
+ S.of(context).connect_hw_info_step_1),
+ InfoStep('assets/images/wallet_connect_step_icons/step2_connect.svg',
+ S.of(context).connect_hw_info_step_2),
+ InfoStep('assets/images/wallet_connect_step_icons/step3_unlock.svg',
+ S.of(context).connect_hw_info_step_3),
+ InfoStep('assets/images/wallet_connect_step_icons/step4_select.svg',
+ S.of(context).connect_hw_info_step_4),
],
),
);
diff --git a/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart b/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart
index 6dbc3ee5a..1e78e4170 100644
--- a/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart
+++ b/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart
@@ -2,14 +2,15 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/themes/core/theme_extension.dart';
import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
import 'base_bottom_sheet_widget.dart';
class InfoStep {
- final String title;
+ final String iconPath;
final String description;
- const InfoStep(this.title, this.description);
+ const InfoStep(this.iconPath, this.description);
}
class InfoStepsBottomSheet extends BaseBottomSheet {
@@ -26,77 +27,89 @@ class InfoStepsBottomSheet extends BaseBottomSheet {
maxHeight: 900);
@override
- Widget contentWidget(BuildContext context) => SizedBox(
- height: 500,
- child: Column(
+ Widget contentWidget(BuildContext context) => SafeArea(
+ child: Container(
+ constraints: BoxConstraints(
+ maxHeight: MediaQuery.of(context).size.height * 0.7,
+ ),
+ child: SingleChildScrollView(
+ child: Column(
children: [
- Expanded(
- child: SingleChildScrollView(
- child: Column(
- children: steps
- .map((step) => Container(
- margin: EdgeInsets.only(bottom: 15, left: 20, right: 20),
- padding: EdgeInsets.all(10),
- alignment: Alignment.center,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(10),
- color: Theme.of(context).cardColor,
- ),
- child: Row(
- mainAxisSize: MainAxisSize.max,
- mainAxisAlignment: MainAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Expanded(
- child: Padding(
- padding: EdgeInsets.only(left: 16),
- child: Column(
- mainAxisSize: MainAxisSize.max,
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- step.title,
- style: Theme.of(context).textTheme.bodyMedium!.copyWith(
- fontSize: 20,
- fontWeight: FontWeight.w500,
- color: context.currentTheme.colorScheme.onSurface,
- ),
- ),
- Padding(
- padding: EdgeInsets.only(top: 5),
- child: Text(
- step.description,
- style: Theme.of(context).textTheme.bodyMedium!.copyWith(
- color: context
- .currentTheme.colorScheme.onSurfaceVariant,
- ),
- ),
- )
- ],
- ),
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 28.0),
+ child: Column(
+ children: steps
+ .map((step) => Column(
+ children: [
+ Container(
+ padding: EdgeInsets.all(10),
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(15),
+ color: Theme.of(context).colorScheme.surfaceContainer,
),
- )
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.center,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Expanded(
+ child: Padding(
+ padding: EdgeInsets.all(10),
+ child: Column(
+ spacing: 10.0,
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SvgPicture.asset(
+ step.iconPath,
+ colorFilter: ColorFilter.mode(
+ Theme.of(context).colorScheme.onSurfaceVariant,
+ BlendMode.srcIn),
+ ),
+ Text(
+ step.description,
+ style: Theme.of(context)
+ .textTheme
+ .bodyMedium!
+ .copyWith(
+ color: context
+ .currentTheme.colorScheme.onSurface,
+ fontWeight: FontWeight.w400),
+ )
+ ],
+ ),
+ ),
+ )
+ ],
+ ),
+ ),
+ if (step != steps.last)
+ Container(
+ width: 5,
+ height: 10,
+ decoration: BoxDecoration(
+ color: Theme.of(context).colorScheme.surfaceContainer),
+ )
],
- ),
- ))
- .toList(),
- ),
- ),
+ ))
+ .toList(),
+ ),
),
Padding(
padding: const EdgeInsets.all(16),
child: PrimaryButton(
text: S.of(context).close,
color: context.currentTheme.colorScheme.primary,
- textColor: context.currentTheme.isDark
- ? context.currentTheme.colorScheme.onSurfaceVariant
- : context.currentTheme.colorScheme.onPrimary,
- onPressed: () => Navigator.of(context).pop(),
+ textColor: context.currentTheme.colorScheme.onPrimary,
+ onPressed: () => Navigator.of(context).pop(),
),
)
],
),
+ ),
+ ),
);
@override
diff --git a/pubspec_base.yaml b/pubspec_base.yaml
index 274a97201..46bc79a4b 100644
--- a/pubspec_base.yaml
+++ b/pubspec_base.yaml
@@ -222,6 +222,7 @@ flutter:
- assets/images/crypto/
- assets/images/stocks/
- assets/images/main_actions/
+ - assets/images/wallet_connect_step_icons/
- assets/node_list.yml
- assets/haven_node_list.yml
- assets/bitcoin_electrum_server_list.yml