Skip to content

Commit

Permalink
Send confirmation UI
Browse files Browse the repository at this point in the history
  • Loading branch information
Gerardo Guijarro committed Jul 7, 2023
1 parent 5c1f1a2 commit 368a287
Show file tree
Hide file tree
Showing 8 changed files with 258 additions and 92 deletions.
5 changes: 3 additions & 2 deletions lib/design/background/hypha_half_background.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@ class HyphaHalfBackground extends StatelessWidget {
final Color? backgroundColor;
final Widget? child;
final bool showTopBar;
final double? height;

const HyphaHalfBackground({super.key, this.backgroundColor, this.child, required this.showTopBar});
const HyphaHalfBackground({super.key, this.backgroundColor, this.child, required this.showTopBar, this.height});

@override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: 170,
height: height ?? 170,
width: double.infinity,
decoration: BoxDecoration(
color: backgroundColor,
Expand Down
63 changes: 63 additions & 0 deletions lib/ui/send/components/send_memo_field.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:get/get.dart';
import 'package:hypha_wallet/design/hypha_card.dart';
import 'package:hypha_wallet/design/hypha_colors.dart';
import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart';
import 'package:hypha_wallet/ui/send/interactor/send_bloc.dart';
import 'package:hypha_wallet/ui/shared/components/text_request_bottom_sheet.dart';
import 'package:hypha_wallet/ui/shared/ui_constants.dart';

class SendMemoField extends StatelessWidget {
const SendMemoField({super.key});

@override
Widget build(BuildContext context) {
return BlocBuilder<SendBloc, SendState>(
buildWhen: (previous, current) => previous.memo != current.memo,
builder: (context, state) {
return GestureDetector(
onTap: () {
showModalBottomSheet(
isScrollControlled: true,
clipBehavior: Clip.hardEdge,
context: context,
builder: (modelContext) => FractionallySizedBox(
heightFactor: UIConstants.bottomSheetHeightFraction,
child: TextRequestBottomSheet(
title: 'Enter Memo',
initialText: state.memo ?? '',
onPressed: (String? text) {
context.read<SendBloc>().add(SendEvent.onMemoEntered(text));
Get.back();
}),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
),
);
},
child: HyphaCard(
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Text(
state.memo ?? 'Memo (optional)',
style: context.hyphaTextTheme.regular
.copyWith(color: state.memo == null ? HyphaColors.midGrey : null),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
state.memo == null ? const SizedBox.shrink() : const Icon(Icons.edit)
],
),
),
),
);
},
);
}
}
123 changes: 123 additions & 0 deletions lib/ui/send/components/send_review_bottom_sheet.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hypha_wallet/design/avatar_image/hypha_avatar_image.dart';
import 'package:hypha_wallet/design/background/hypha_half_background.dart';
import 'package:hypha_wallet/design/background/hypha_page_background.dart';
import 'package:hypha_wallet/design/buttons/button_type.dart';
import 'package:hypha_wallet/design/buttons/hypha_app_button.dart';
import 'package:hypha_wallet/design/hypha_card.dart';
import 'package:hypha_wallet/design/hypha_colors.dart';
import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart';
import 'package:hypha_wallet/ui/send/components/send_to_user_row.dart';
import 'package:hypha_wallet/ui/send/interactor/send_bloc.dart';

class SendReviewBottomSheet extends StatelessWidget {
const SendReviewBottomSheet({super.key});

@override
Widget build(BuildContext context) {
return HyphaPageBackground(
withGradient: true,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
children: [
const HyphaHalfBackground(showTopBar: true, height: 120),
Padding(
padding: const EdgeInsets.only(top: 60, left: 24, right: 24, bottom: 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return HyphaAvatarImage(
imageRadius: 50,
imageFromUrl: state.tokenData.image,
name: state.tokenData.name,
);
},
),
const SizedBox(height: 12),
BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return Text(
state.formattedAmount,
style: context.hyphaTextTheme.popsExtraLargeAndLight,
);
},
),
BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return Text(
state.tokenData.name,
style: context.hyphaTextTheme.ralMediumBody.copyWith(height: 0),
);
},
),
const SizedBox(height: 24),
const SendToUserRow(imageRadius: 30),
const SizedBox(height: 16),
BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return state.memo == null
? const SizedBox.shrink()
: HyphaCard(
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Text(
state.memo ?? 'Memo (optional)',
style: context.hyphaTextTheme.regular
.copyWith(color: state.memo == null ? HyphaColors.midGrey : null),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
),
),
);
},
),
const SizedBox(height: 16),
HyphaCard(
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Text(
'Always free and instant!',
style: context.hyphaTextTheme.regular.copyWith(color: HyphaColors.midGrey),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
const SizedBox(height: 100),
HyphaAppButton(
title: 'Edit',
buttonType: ButtonType.secondary,
onPressed: () {},
),
const SizedBox(height: 16),
HyphaAppButton(
title: 'Send',
onPressed: () {},
),
],
),
),
],
),
],
),
);
}
}
40 changes: 40 additions & 0 deletions lib/ui/send/components/send_to_user_row.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hypha_wallet/design/avatar_image/hypha_avatar_image.dart';
import 'package:hypha_wallet/design/hypha_card.dart';
import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart';
import 'package:hypha_wallet/ui/send/interactor/send_bloc.dart';

class SendToUserRow extends StatelessWidget {
final double imageRadius;

const SendToUserRow({super.key, required this.imageRadius});

@override
Widget build(BuildContext context) {
return BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return ListTile(
contentPadding: EdgeInsets.zero,
leading: HyphaAvatarImage(
imageRadius: imageRadius,
name: state.receiverUser.userName,
imageFromUrl: state.receiverUser.userImage,
),
title: Text(
state.receiverUser.userName ?? state.receiverUser.accountName,
style: context.hyphaTextTheme.smallTitles,
),
subtitle: Text('@${state.receiverUser.accountName}', style: context.hyphaTextTheme.ralMediumBody),
trailing: HyphaCard(
borderRadius: BorderRadius.circular(10),
child: const Padding(
padding: EdgeInsets.all(12),
child: Text('To'),
),
),
);
},
);
}
}
106 changes: 20 additions & 86 deletions lib/ui/send/components/send_view.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import 'package:hypha_wallet/design/buttons/hypha_app_button.dart';
import 'package:hypha_wallet/design/hypha_card.dart';
import 'package:hypha_wallet/design/hypha_colors.dart';
import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart';
import 'package:hypha_wallet/ui/send/components/send_memo_field.dart';
import 'package:hypha_wallet/ui/send/components/send_review_bottom_sheet.dart';
import 'package:hypha_wallet/ui/send/components/send_to_user_row.dart';
import 'package:hypha_wallet/ui/send/data/amount_percentage.dart';
import 'package:hypha_wallet/ui/send/data/keypad_key.dart';
import 'package:hypha_wallet/ui/send/interactor/send_bloc.dart';
Expand All @@ -33,7 +36,21 @@ class SendView extends StatelessWidget {
builder: (context, state) {
return HyphaSafeBottomNavigationBar(
child: HyphaAppButton(
onPressed: () {},
onPressed: () {
// GERE
showModalBottomSheet(
isScrollControlled: true,
clipBehavior: Clip.hardEdge,
context: context,
builder: (childContext) => BlocProvider.value(
value: BlocProvider.of<SendBloc>(context),
child: const SendReviewBottomSheet(),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
),
);
},
title: 'Send',
buttonType: ButtonType.primary,
isActive: state.isSubmitEnabled,
Expand All @@ -56,9 +73,9 @@ class SendView extends StatelessWidget {
},
),
const _AvailableBalanceWidget(),
const _ToUserRow(),
const SendToUserRow(imageRadius: 20),
const SizedBox(height: 24),
const _MemoField(),
const SendMemoField(),
const SizedBox(height: 24),
const _PercentagesWidget(),
const SizedBox(height: 24),
Expand Down Expand Up @@ -146,89 +163,6 @@ class _PercentagesWidget extends StatelessWidget {
}
}

class _MemoField extends StatelessWidget {
const _MemoField();

@override
Widget build(BuildContext context) {
return BlocBuilder<SendBloc, SendState>(
buildWhen: (previous, current) => previous.memo != current.memo,
builder: (context, state) {
return GestureDetector(
onTap: () {
showModalBottomSheet(
isScrollControlled: true,
clipBehavior: Clip.hardEdge,
context: context,
builder: (modelContext) => FractionallySizedBox(
heightFactor: UIConstants.bottomSheetHeightFraction,
child: TextRequestBottomSheet(
title: 'Enter Memo',
initialText: state.memo ?? '',
onPressed: (String? text) {
context.read<SendBloc>().add(SendEvent.onMemoEntered(text));
Get.back();
}),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
),
);
},
child: HyphaCard(
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: Text(
state.memo ?? 'Memo (optional)',
style: context.hyphaTextTheme.regular
.copyWith(color: state.memo == null ? HyphaColors.midGrey : null),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
state.memo == null ? const SizedBox.shrink() : const Icon(Icons.edit)
],
),
),
),
);
},
);
}
}

class _ToUserRow extends StatelessWidget {
const _ToUserRow();

@override
Widget build(BuildContext context) {
return BlocBuilder<SendBloc, SendState>(
builder: (context, state) {
return ListTile(
contentPadding: EdgeInsets.zero,
leading: HyphaAvatarImage(
imageRadius: 20,
name: state.receiverUser.userName,
imageFromUrl: state.receiverUser.userImage,
),
title: Text(state.receiverUser.userName ?? state.receiverUser.accountName),
subtitle: Text(state.receiverUser.accountName),
trailing: HyphaCard(
borderRadius: BorderRadius.circular(10),
child: const Padding(
padding: EdgeInsets.all(12),
child: Text('To'),
),
),
);
},
);
}
}

class _AvailableBalanceWidget extends StatelessWidget {
const _AvailableBalanceWidget();

Expand Down
1 change: 1 addition & 0 deletions lib/ui/send/interactor/send_bloc.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:bloc/bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hypha_wallet/core/network/models/user_profile_data.dart';
import 'package:hypha_wallet/ui/architecture/interactor/page_states.dart';
import 'package:hypha_wallet/core/extension/scope_functions.dart';
import 'package:hypha_wallet/ui/send/data/amount_percentage.dart';
import 'package:hypha_wallet/ui/send/data/keypad_key.dart';
import 'package:hypha_wallet/ui/wallet/data/wallet_token_data.dart';
Expand Down
Loading

0 comments on commit 368a287

Please sign in to comment.