[ABW-3562] Third party deposits UI updates (#1226)

radixdlt · Jul 30, 2024 · de827c1 · de827c1
1 parent 74c6cf2
commit de827c1
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 124 deletions.
diff --git a/RadixWallet/Core/DesignSystem/Components/AppTextField.swift b/RadixWallet/Core/DesignSystem/Components/AppTextField.swift
@@ -192,7 +192,7 @@ public struct AppTextField<FocusValue: Hashable, Accessory: View, InnerAccessory
 			.app.gray1
 		case .error:
 			.app.red1
-		case .warning:
+		case .warning, .detail:
 			.app.alert
 		}
 	}

diff --git a/RadixWallet/Core/DesignSystem/Components/Hint.swift b/RadixWallet/Core/DesignSystem/Components/Hint.swift
@@ -1,4 +1,3 @@
-
 // MARK: - Hint
 public struct Hint: View, Equatable {
 	public struct ViewState: Equatable {
@@ -20,6 +19,7 @@ public struct Hint: View, Equatable {
 		case info
 		case error
 		case warning
+		case detail
 	}
 
 	public let viewState: ViewState
@@ -64,29 +64,40 @@ public struct Hint: View, Equatable {
 				}
 				text
 					.lineSpacing(0)
-					.textStyle(.body2HighImportance)
+					.textStyle(textStyle)
 			}
 			.foregroundColor(foregroundColor)
 		}
 	}
+}
 
-	private var foregroundColor: Color {
+private extension Hint {
+	var foregroundColor: Color {
 		switch viewState.kind {
 		case .info:
 			.app.gray2
 		case .error:
 			.app.red1
-		case .warning:
+		case .warning, .detail:
 			.app.alert
 		}
 	}
 
-	private var iconResource: ImageResource? {
+	var iconResource: ImageResource? {
 		switch viewState.kind {
-		case .info:
+		case .info, .detail:
 			nil
 		case .error, .warning:
 			.error
 		}
 	}
+
+	var textStyle: TextStyle {
+		switch viewState.kind {
+		case .info, .error, .warning:
+			.body2Regular
+		case .detail:
+			.body1Regular
+		}
+	}
 }
diff --git a/RadixWallet/Core/DesignSystem/Components/PlainListRow.swift b/RadixWallet/Core/DesignSystem/Components/PlainListRow.swift
@@ -1,29 +1,42 @@
 // MARK: - PlainListRow
-struct PlainListRow<Icon: View>: View {
+struct PlainListRow<Icon: View, Accessory: View>: View {
 	struct ViewState {
-		let accessory: ImageResource?
+		let accessory: Accessory?
 		let rowCoreViewState: PlainListRowCore.ViewState
 		let icon: Icon?
 		let hints: [Hint.ViewState]
 
 		init(
 			rowCoreViewState: PlainListRowCore.ViewState,
-			accessory: ImageResource? = .chevronRight,
+			hints: [Hint.ViewState] = [],
+			@ViewBuilder accessory: () -> Accessory,
 			@ViewBuilder icon: () -> Icon
 		) {
-			self.accessory = accessory
+			self.rowCoreViewState = rowCoreViewState
+			self.hints = hints
+			self.accessory = accessory()
+			self.icon = icon()
+		}
+
+		init(
+			rowCoreViewState: PlainListRowCore.ViewState,
+			accessory: ImageResource? = .chevronRight,
+			hints: [Hint.ViewState] = [],
+			@ViewBuilder icon: () -> Icon
+		) where Accessory == Image {
+			self.accessory = accessory.map { Image($0) }
 			self.rowCoreViewState = rowCoreViewState
 			self.icon = icon()
-			self.hints = []
+			self.hints = hints
 		}
 
 		init(
 			_ content: AssetIcon.Content?,
 			rowCoreViewState: PlainListRowCore.ViewState,
 			accessory: ImageResource? = .chevronRight,
 			hints: [Hint.ViewState]
-		) where Icon == AssetIcon {
-			self.accessory = accessory
+		) where Icon == AssetIcon, Accessory == Image {
+			self.accessory = accessory.map { Image($0) }
 			self.rowCoreViewState = rowCoreViewState
 			self.icon = content.map { AssetIcon($0) }
 			self.hints = hints
@@ -43,7 +56,7 @@ struct PlainListRow<Icon: View>: View {
 		subtitle: String? = nil,
 		accessory: ImageResource? = .chevronRight,
 		@ViewBuilder icon: () -> Icon
-	) {
+	) where Accessory == Image {
 		self.viewState = ViewState(rowCoreViewState: .init(title: title, subtitle: subtitle), accessory: accessory, icon: icon)
 	}
 
@@ -52,12 +65,12 @@ struct PlainListRow<Icon: View>: View {
 		title: String?,
 		subtitle: String? = nil,
 		accessory: ImageResource? = .chevronRight
-	) where Icon == AssetIcon {
+	) where Icon == AssetIcon, Accessory == Image {
 		self.viewState = ViewState(content, rowCoreViewState: .init(title: title, subtitle: subtitle), accessory: accessory, hints: [])
 	}
 
 	var body: some View {
-		VStack(alignment: .leading) {
+		VStack(alignment: .leading, spacing: .small1) {
 			top
 			hints
 		}
@@ -106,7 +119,7 @@ struct PlainListRow<Icon: View>: View {
 	@ViewBuilder
 	private var accessoryView: some View {
 		if let accessory = viewState.accessory {
-			Image(accessory)
+			accessory
 		}
 	}
 }
@@ -120,7 +133,7 @@ struct PlainListRowCore: View {
 		let detail: String?
 
 		init(
-			context: Context = .general,
+			context: Context = .settings,
 			title: String?,
 			subtitle: String? = nil,
 			detail: String? = nil
@@ -140,7 +153,7 @@ struct PlainListRowCore: View {
 		self.viewState = viewState
 	}
 
-	init(context: ViewState.Context = .general, title: String?, subtitle: String?) {
+	init(context: ViewState.Context = .settings, title: String?, subtitle: String?) {
 		self.viewState = ViewState(context: context, title: title, subtitle: subtitle)
 	}
 
@@ -178,7 +191,7 @@ struct PlainListRowCore: View {
 private extension PlainListRowCore.ViewState {
 	var titleTextStyle: TextStyle {
 		switch context {
-		case .general, .toggle:
+		case .toggle:
 			.secondaryHeader
 		case .settings:
 			.body1Header
@@ -187,7 +200,7 @@ private extension PlainListRowCore.ViewState {
 
 	var subtitleTextStyle: TextStyle {
 		switch context {
-		case .general, .toggle:
+		case .toggle:
 			.body2Regular
 		case .settings:
 			detail == nil ? .body1Regular : .body2Regular
@@ -196,7 +209,7 @@ private extension PlainListRowCore.ViewState {
 
 	var subtitleForegroundColor: Color {
 		switch context {
-		case .general, .toggle:
+		case .toggle:
 			.app.gray2
 		case .settings:
 			.app.gray1
@@ -205,7 +218,7 @@ private extension PlainListRowCore.ViewState {
 
 	var titleLineLimit: Int? {
 		switch context {
-		case .general, .settings:
+		case .settings:
 			1
 		case .toggle:
 			nil
@@ -214,7 +227,7 @@ private extension PlainListRowCore.ViewState {
 
 	var subtitleLineLimit: Int {
 		switch context {
-		case .general, .toggle:
+		case .toggle:
 			2
 		case .settings:
 			3
@@ -223,7 +236,7 @@ private extension PlainListRowCore.ViewState {
 
 	var verticalPadding: CGFloat {
 		switch context {
-		case .general, .toggle:
+		case .toggle:
 			.zero
 		case .settings:
 			.medium1
@@ -234,7 +247,6 @@ private extension PlainListRowCore.ViewState {
 // MARK: - PlainListRowCore.ViewState.Context
 extension PlainListRowCore.ViewState {
 	enum Context {
-		case general
 		case settings
 		case toggle
 	}

diff --git a/...allet/Features/AccountPreferencesFeature/Children/ThirdPartyDeposits/AddAssets+View.swift b/...allet/Features/AccountPreferencesFeature/Children/ThirdPartyDeposits/AddAssets+View.swift
@@ -49,29 +49,29 @@ extension AddAsset {
 
 		public var body: some SwiftUI.View {
 			WithViewStore(store, observe: \.viewState, send: Action.view) { viewStore in
-				VStack {
-					CloseButton { viewStore.send(.closeTapped) }
-						.flushedLeft
-
-					ScrollView {
-						VStack(spacing: .medium1) {
-							titleView(viewStore.mode.title)
-							instructionsView(viewStore.mode.instructions)
-
-							resourceAddressView(viewStore)
-							if case .allowDenyAssets = viewStore.mode {
-								depositListSelectionView(viewStore)
-							}
-							addAssetButton(viewStore)
+				VStack(spacing: .zero) {
+					VStack(spacing: .medium3) {
+						titleView(viewStore.mode.title)
+						instructionsView(viewStore.mode.instructions)
+
+						resourceAddressView(viewStore)
+						if case .allowDenyAssets = viewStore.mode {
+							depositListSelectionView(viewStore)
 						}
-						.padding([.horizontal, .bottom], .medium1)
 					}
-					.scrollIndicators(.hidden)
+					Spacer()
 				}
+				.padding(.horizontal, .medium3)
+				.footer {
+					addAssetButton(viewStore)
+				}
+				.withNavigationBar {
+					viewStore.send(.closeTapped)
+				}
+				.presentationDetents([.fraction(viewStore.mode.detentsFraction)])
+				.presentationDragIndicator(.visible)
+				.presentationBackground(.blur)
 			}
-			.presentationDetents([.fraction(0.75)])
-			.presentationDragIndicator(.visible)
-			.presentationBackground(.blur)
 		}
 	}
 }
@@ -126,7 +126,7 @@ extension AddAsset.View {
 
 	@ViewBuilder
 	func depositExceptionSelectionView(_ exception: ResourcesListMode.ExceptionRule, _ viewStore: ViewStoreOf<AddAsset>) -> some SwiftUI.View {
-		HStack {
+		HStack(spacing: .small3) {
 			RadioButton(
 				appearance: .dark,
 				state: viewStore.mode.allowDenyAssets == exception ? .selected : .unselected
@@ -164,7 +164,7 @@ extension ResourcesListMode.ExceptionRule {
 	}
 }
 
-extension ResourcesListMode {
+private extension ResourcesListMode {
 	var allowDenyAssets: ResourcesListMode.ExceptionRule? {
 		guard case let .allowDenyAssets(type) = self else {
 			return nil
@@ -189,4 +189,13 @@ extension ResourcesListMode {
 			L10n.AccountSettings.ThirdPartyDeposits.addDepositorSubtitle
 		}
 	}
+
+	var detentsFraction: CGFloat {
+		switch self {
+		case .allowDenyAssets:
+			0.6
+		case .allowDepositors:
+			0.55
+		}
+	}
 }