[#650] Layout changes for the send screen (#651)

- adding/editing memo proposed to be in a sheet popover
This commit is contained in:
Lukas Korba 2023-03-13 08:50:32 +01:00 committed by GitHub
parent bae3ec974b
commit 09380a169d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 23 deletions

View File

@ -17,11 +17,12 @@ struct SendFlowReducer: ReducerProtocol {
struct State: Equatable {
enum Destination: Equatable {
case done
case failure
case inProgress
case memo
case scanQR
case success
case failure
case done
}
var addMemoState: Bool
@ -294,7 +295,14 @@ extension SendFlowViewStore {
embed: { _ in SendFlowReducer.State.Destination.failure }
)
}
var bindingForMemo: Binding<Bool> {
self.destinationBinding.map(
extract: { $0 == .memo },
embed: { _ in SendFlowReducer.State.Destination.memo }
)
}
var bindingForScanQR: Binding<Bool> {
self.destinationBinding.map(
extract: {

View File

@ -10,12 +10,35 @@ import ComposableArchitecture
struct SendFlowView: View {
let store: SendFlowStore
@FocusState private var isFocused: Bool
var body: some View {
WithViewStore(store) { viewStore in
isFocused = true
return WithViewStore(store) { viewStore in
CreateTransaction(store: store)
.onAppear { viewStore.send(.onAppear) }
.onDisappear { viewStore.send(.onDisappear) }
.sheet(
isPresented: viewStore.bindingForMemo,
onDismiss: {
viewStore.send(.updateDestination(nil))
},
content: {
VStack {
MultipleLineTextField(
store: store.memoStore(),
title: L10n.Send.memoPlaceholder,
titleAccessoryView: {},
isFocused: _isFocused
)
.frame(height: 200)
.padding()
Spacer()
}
}
)
.navigationLinkEmpty(
isActive: viewStore.bindingForInProgress,
destination: { TransactionSendingView(viewStore: viewStore) }

View File

@ -8,18 +8,18 @@ struct CreateTransaction: View {
UITextView.appearance().backgroundColor = .clear
return WithViewStore(store) { viewStore in
VStack {
VStack(spacing: 5) {
VStack(spacing: 0) {
Text(L10n.Balance.available(viewStore.shieldedBalance.data.total.decimalString(), TargetConstants.tokenName))
.font(.system(size: 32))
.font(.system(size: 26))
.fontWeight(.bold)
.multilineTextAlignment(.center)
.minimumScaleFactor(0.5)
Text(L10n.Send.fundsInfo)
.font(.system(size: 16))
.font(.system(size: 14))
}
.foregroundColor(Asset.Colors.Mfp.fontDark.color)
.padding()
.padding(.horizontal)
TransactionAddressTextField(
store: store.scope(
@ -27,7 +27,8 @@ struct CreateTransaction: View {
action: SendFlowReducer.Action.transactionAddressInput
)
)
.padding()
.padding(.horizontal)
.padding(.bottom, 5)
TransactionAmountTextField(
store: store.scope(
@ -35,16 +36,20 @@ struct CreateTransaction: View {
action: SendFlowReducer.Action.transactionAmountInput
)
)
.padding()
.padding(.horizontal)
Button {
viewStore.send(.updateDestination(.memo))
} label: {
Text(
viewStore.memoState.textLength > 0 ?
L10n.Send.editMemo
: L10n.Send.includeMemo
)
.foregroundColor(Asset.Colors.Mfp.fontDark.color)
}
.padding(.top, 10)
MultipleLineTextField(
store: store.memoStore(),
title: L10n.Send.memoPlaceholder,
titleAccessoryView: {}
)
.frame(height: 200)
.padding()
Button(
action: { viewStore.send(.sendPressed) },
label: { Text(L10n.General.send) }
@ -52,10 +57,10 @@ struct CreateTransaction: View {
.activeButtonStyle
.disabled(viewStore.isValidForm)
.opacity(viewStore.isValidForm ? 1.0 : 0.5)
.padding(.top, 10)
Spacer()
}
.keyboardAdaptive()
.navigationTitle(L10n.Send.title)
.navigationBarTitleDisplayMode(.inline)
.padding()

View File

@ -454,10 +454,14 @@ internal enum L10n {
internal static func amount(_ p1: Any) -> String {
return L10n.tr("Localizable", "send.amount", String(describing: p1), fallback: "amount: %@")
}
/// Memo included. Tap to edit.
internal static let editMemo = L10n.tr("Localizable", "send.editMemo", fallback: "Memo included. Tap to edit.")
/// Sending transaction failed
internal static let failed = L10n.tr("Localizable", "send.failed", fallback: "Sending transaction failed")
/// Aditional funds may be in transit
internal static let fundsInfo = L10n.tr("Localizable", "send.fundsInfo", fallback: "Aditional funds may be in transit")
/// Want to include memo? Tap here.
internal static let includeMemo = L10n.tr("Localizable", "send.includeMemo", fallback: "Want to include memo? Tap here.")
/// memo: %@
internal static func memo(_ p1: Any) -> String {
return L10n.tr("Localizable", "send.memo", String(describing: p1), fallback: " memo: %@")

View File

@ -110,6 +110,8 @@
"send.amount" = "amount: %@";
"send.address" = " address: %@";
"send.memo" = " memo: %@";
"send.includeMemo" = "Want to include memo? Tap here.";
"send.editMemo" = "Memo included. Tap to edit.";
// MARK: - Settings
"settings.crashReporting" = "Enable Crash Reporting";

View File

@ -14,6 +14,7 @@ struct MultipleLineTextField<TitleAccessoryContent>: View
let title: String
@ViewBuilder let titleAccessoryView: TitleAccessoryContent
@FocusState public var isFocused: Bool
var body: some View {
WithViewStore(store) { viewStore in
@ -30,6 +31,7 @@ struct MultipleLineTextField<TitleAccessoryContent>: View
Asset.Colors.Text.activeButtonText.color,
Asset.Colors.TextField.multilineOutline.color
)
.focused($isFocused)
if viewStore.isCharLimited {
HStack {

View File

@ -44,12 +44,11 @@ struct SingleLineTextField<TitleAccessoryContent, InputPrefixContent, InputAcces
inputAccessoryView
}
.frame(maxHeight: 50)
.frame(maxHeight: 40)
.overlay(
Rectangle()
.stroke(Asset.Colors.Mfp.primary.color, lineWidth: 2)
)
.padding(.vertical, 5)
}
}
}

View File

@ -29,7 +29,7 @@ struct TransactionAddressTextField: View {
} label: {
Image(Asset.Assets.Icons.qrCode.name)
.resizable()
.frame(width: 30, height: 30)
.frame(width: 25, height: 25)
}
.padding(.trailing, 10)
}