ABW-1671 Info Buttons and Sheet

RadixWallet/Clients/OverlayWindowClient/InfoLink.swift

@@ -0,0 +1,131 @@
+import Foundation
+
+// MARK: - OverlayWindowClient.GlossaryItem
+extension OverlayWindowClient {
+	public enum GlossaryItem: String, Sendable {
+		case tokens
+		case nfts
+		case networkstaking
+		case personas
+		case dapps
+		case guarantees
+		case badges
+		case poolunits
+		case gateways
+		case radixconnect
+		case transactionfee
+		case behaviors
+		case claimnfts
+		case liquidstakeunits
+		case radixnetwork
+		case accounts
+		case radixwallet
+		case transactions
+		case dex
+		case validators
+		case radixconnector
+		case connectbutton
+		case xrd
+		case web3
+		case transfers
+		case dashboard
+		case bridging
+		case payingaccount
+	}
+}
+
+extension OverlayWindowClient.GlossaryItem {
+	private static let fieldName = "glossaryAnchor"
+
+	public init?(url: URL) {
+		guard url.scheme == nil, url.host == nil, url.pathComponents.isEmpty, let query = url.query() else {
+			return nil
+		}
+
+		let parts = query.split(separator: "=")
+		guard parts.count == 2, String(parts[0]) == Self.fieldName else { return nil }
+
+		guard let item = Self(rawValue: String(parts[1])) else { return nil }
+		self = item
+	}
+
+	var image: ImageAsset? {
+		switch self {
+		case .nfts:
+			AssetResource.nft
+		case .networkstaking:
+			AssetResource.stakes
+		case .badges:
+			AssetResource.iconPackageOwnerBadge
+		case .poolunits:
+			AssetResource.poolUnits
+		case .radixnetwork:
+			AssetResource.fungibleTokens
+		case .xrd:
+			AssetResource.xrd
+		default:
+			nil
+		}
+	}
+
+	var string: String {
+		switch self {
+		case .tokens:
+			L10n.InfoLink.Glossary.tokens
+		case .nfts:
+			L10n.InfoLink.Glossary.nfts
+		case .networkstaking:
+			L10n.InfoLink.Glossary.networkstaking
+		case .personas:
+			L10n.InfoLink.Glossary.personas
+		case .dapps:
+			L10n.InfoLink.Glossary.dapps
+		case .guarantees:
+			L10n.InfoLink.Glossary.guarantees
+		case .badges:
+			L10n.InfoLink.Glossary.badges
+		case .poolunits:
+			L10n.InfoLink.Glossary.poolunits
+		case .gateways:
+			L10n.InfoLink.Glossary.gateways
+		case .radixconnect:
+			L10n.InfoLink.Glossary.radixconnect
+		case .transactionfee:
+			L10n.InfoLink.Glossary.transactionfee
+		case .behaviors:
+			L10n.InfoLink.Glossary.behaviors
+		case .claimnfts:
+			L10n.InfoLink.Glossary.claimnfts
+		case .liquidstakeunits:
+			L10n.InfoLink.Glossary.liquidstakeunits
+		case .radixnetwork:
+			L10n.InfoLink.Glossary.radixnetwork
+		case .accounts:
+			L10n.InfoLink.Glossary.accounts
+		case .radixwallet:
+			L10n.InfoLink.Glossary.radixwallet
+		case .transactions:
+			L10n.InfoLink.Glossary.transactions
+		case .dex:
+			L10n.InfoLink.Glossary.dex
+		case .validators:
+			L10n.InfoLink.Glossary.validators
+		case .radixconnector:
+			L10n.InfoLink.Glossary.radixconnector
+		case .connectbutton:
+			L10n.InfoLink.Glossary.connectbutton
+		case .xrd:
+			L10n.InfoLink.Glossary.xrd
+		case .web3:
+			L10n.InfoLink.Glossary.web3
+		case .transfers:
+			L10n.InfoLink.Glossary.transfers
+		case .dashboard:
+			L10n.InfoLink.Glossary.dashboard
+		case .bridging:
+			L10n.InfoLink.Glossary.bridging
+		case .payingaccount:
+			L10n.InfoLink.Glossary.payingaccount
+		}
+	}
+}

RadixWallet/Clients/OverlayWindowClient/OverlayWindowClient+Interface.swift

@@ -15,6 +15,10 @@ public struct OverlayWindowClient: Sendable {
 	/// Usually to be called from the Main Window.
 	public var scheduleHUD: ScheduleHUD
 
+	/// Schedule a sheet to be shown in the Overlay Window.
+	/// Usually to be called from the Main Window.
+	public var scheduleSheet: ScheduleSheet
+
 	/// Schedule a FullScreen to be shown in the Overlay Window.
 	/// Usually to be called from the Main Window.
 	public var scheduleFullScreen: ScheduleFullScreen
@@ -33,6 +37,7 @@ public struct OverlayWindowClient: Sendable {
 		scheduleAlert: @escaping ScheduleAlert,
 		scheduleAlertAndIgnoreAction: @escaping ScheduleAlertAndIgnoreAction,
 		scheduleHUD: @escaping ScheduleHUD,
+		scheduleSheet: @escaping ScheduleSheet,
 		scheduleFullScreen: @escaping ScheduleFullScreen,
 		sendAlertAction: @escaping SendAlertAction,
 		sendFullScreenAction: @escaping SendFullScreenAction,
@@ -43,6 +48,7 @@ public struct OverlayWindowClient: Sendable {
 		self.scheduleAlert = scheduleAlert
 		self.scheduleAlertAndIgnoreAction = scheduleAlertAndIgnoreAction
 		self.scheduleHUD = scheduleHUD
+		self.scheduleSheet = scheduleSheet
 		self.scheduleFullScreen = scheduleFullScreen
 		self.sendAlertAction = sendAlertAction
 		self.sendFullScreenAction = sendFullScreenAction
@@ -58,6 +64,7 @@ extension OverlayWindowClient {
 	public typealias ScheduleAlert = @Sendable (Item.AlertState) async -> Item.AlertAction
 	public typealias ScheduleAlertAndIgnoreAction = @Sendable (Item.AlertState) -> Void
 	public typealias ScheduleHUD = @Sendable (Item.HUD) -> Void
+	public typealias ScheduleSheet = @Sendable (SheetOverlayCoordinator.Root.State, SheetBehavior) -> Void
 	public typealias ScheduleFullScreen = @Sendable (FullScreenOverlayCoordinator.State) async -> FullScreenAction
 	public typealias SendAlertAction = @Sendable (Item.AlertAction, Item.AlertState.ID) -> Void
 	public typealias SendFullScreenAction = @Sendable (FullScreenAction, FullScreenID) -> Void
@@ -83,24 +90,6 @@ extension OverlayWindowClient {
 			public let text: String
 			public let icon: Icon?
 
-			public struct Icon: Hashable, Sendable {
-				public enum Kind: Hashable, Sendable {
-					case asset(ImageAsset)
-					case system(String)
-				}
-
-				public let kind: Kind
-				public let foregroundColor: Color
-
-				public init(
-					kind: Kind,
-					foregroundColor: Color = .app.green1
-				) {
-					self.kind = kind
-					self.foregroundColor = foregroundColor
-				}
-			}
-
 			public init(
 				text: String,
 				icon: Icon? = Icon(
@@ -113,10 +102,34 @@ extension OverlayWindowClient {
 			}
 		}
 
+		public struct Icon: Hashable, Sendable {
+			public enum Kind: Hashable, Sendable {
+				case asset(ImageAsset)
+				case system(String)
+			}
+
+			public let kind: Kind
+			public let foregroundColor: Color
+
+			public init(
+				kind: Kind,
+				foregroundColor: Color = .app.green1
+			) {
+				self.kind = kind
+				self.foregroundColor = foregroundColor
+			}
+		}
+
 		case hud(HUD)
 		case alert(AlertState)
+		case sheet(SheetOverlayCoordinator.Root.State, SheetBehavior)
 		case fullScreen(FullScreenOverlayCoordinator.State)
 	}
+
+	public enum SheetBehavior: Sendable {
+		case enqueue
+		case replace
+	}
 }
 
 extension DependencyValues {

RadixWallet/Clients/OverlayWindowClient/OverlayWindowClient+Live.swift

@@ -19,11 +19,11 @@ extension OverlayWindowClient: DependencyKey {
 				return Item.alert(.init(
 					title: { TextState(L10n.Common.errorAlertTitle) },
 					actions: {
-						let buttons: [ButtonState<OverlayWindowClient.Item.AlertAction>] = [
-							.init(role: .cancel, action: .dismissed, label: { TextState(L10n.Common.cancel) }),
-							.init(action: .emailSupport(additionalInfo: error.localizedDescription), label: { TextState(L10n.Error.emailSupportButtonTitle) }),
-						]
-						return buttons
+						ButtonState(role: .cancel, action: .dismissed) {
+							TextState(L10n.Common.cancel)
+						}
+						ButtonState(action: .emailSupport(additionalInfo: error.localizedDescription)) { TextState(L10n.Error.emailSupportButtonTitle)
+						}
 					},
 					message: { TextState(message) }
 				))
@@ -50,6 +50,7 @@ extension OverlayWindowClient: DependencyKey {
 			},
 			scheduleAlertAndIgnoreAction: scheduleAlertAndIgnoreAction,
 			scheduleHUD: { items.send(.hud($0)) },
+			scheduleSheet: { items.send(.sheet($0, $1)) },
 			scheduleFullScreen: { fullScreen in
 				items.send(.fullScreen(fullScreen))
 				return await fullScreenActions.first { $0.id == fullScreen.id }?.action ?? .dismiss
@@ -62,6 +63,12 @@ extension OverlayWindowClient: DependencyKey {
 	}()
 }
 
+extension OverlayWindowClient {
+	public func showInfoLink(_ item: GlossaryItem) {
+		scheduleSheet(.infoLink(.init(image: item.image, text: item.string)), .replace)
+	}
+}
+
 extension OverlayWindowClient.Item.HUD {
 	public static let updatedAccount = Self(text: L10n.AccountSettings.updatedAccountHUDMessage)
 	public static let copied = Self(text: L10n.AddressAction.copiedToClipboard)

RadixWallet/Clients/OverlayWindowClient/OverlayWindowClient+Test.swift

@@ -6,6 +6,7 @@ extension OverlayWindowClient: TestDependencyKey {
 		scheduleAlert: unimplemented("\(Self.self).scheduleAlert"),
 		scheduleAlertAndIgnoreAction: unimplemented("\(Self.self).scheduleAlertAndIgnoreAction"),
 		scheduleHUD: unimplemented("\(Self.self).scheduleHUD"),
+		scheduleSheet: unimplemented("\(Self.self).scheduleSheet"),
 		scheduleFullScreen: unimplemented("\(Self.self).scheduleFullScreen"),
 		sendAlertAction: unimplemented("\(Self.self).sendAlertAction"),
 		sendFullScreenAction: unimplemented("\(Self.self).sendFullScreenAction"),

RadixWallet/Core/DesignSystem/Components/CloseButton.swift

@@ -8,9 +8,9 @@ public struct CloseButtonBar: View {
 
 	public var body: some View {
 		HStack {
-			Spacer()
 			CloseButton(action: action)
 				.padding(.small2)
+			Spacer()
 		}
 	}
 }

RadixWallet/Core/DesignSystem/Components/InfoButton.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+
+public struct InfoButton: View {
+	public let item: OverlayWindowClient.GlossaryItem
+	public let label: String?
+
+	public init(_ item: OverlayWindowClient.GlossaryItem, label: String? = nil) {
+		self.item = item
+		self.label = label
+	}
+
+	public var body: some View {
+		Button(action: showInfo) {
+			if let label {
+				Text(label)
+			}
+		}
+		.buttonStyle(.info)
+	}
+
+	private func showInfo() {
+		@Dependency(\.overlayWindowClient) var overlayWindowClient
+		overlayWindowClient.showInfoLink(item)
+	}
+}

RadixWallet/Core/DesignSystem/Measure+Position.swift

@@ -1,11 +1,15 @@
 import Foundation
 
 extension View {
-	public func measurePosition(_ id: AnyHashable, coordSpace: String) -> some View {
+	public func measurePosition(_ id: AnyHashable?, coordSpace: String) -> some View {
 		background {
-			GeometryReader { proxy in
+			if let id {
+				GeometryReader { proxy in
+					Color.clear
+						.preference(key: PositionsPreferenceKey.self, value: [id: proxy.frame(in: .named(coordSpace))])
+				}
+			} else {
 				Color.clear
-					.preference(key: PositionsPreferenceKey.self, value: [id: proxy.frame(in: .named(coordSpace))])
 			}
 		}
 	}

RadixWallet/Core/DesignSystem/Styles/InfoButtonStyle.swift

@@ -12,7 +12,7 @@ public struct InfoButtonStyle: ButtonStyle {
 			configuration.label
 				.textStyle(.body1StandaloneLink)
 		} icon: {
-			Image(asset: AssetResource.info)
+			Image(.info)
 		}
 		.labelStyle(.titleAndIcon)
 		.foregroundColor(.app.blue2)