TRCL-3441 : Add Tooltip to Rewards History (#51)

* add tooltip popover * remove unnecessary import
dydxprotocol · Aug 21, 2024 · 61b6dbf · 61b6dbf
1 parent d9be8a2
commit 61b6dbf
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 4 deletions.
diff --git a/PlatformUI/PlatformUI/DesignSystem/Theme/ThemeViewModifiers.swift b/PlatformUI/PlatformUI/DesignSystem/Theme/ThemeViewModifiers.swift
@@ -526,6 +526,15 @@ public extension AttributedString {
         }
         return string
     }
+
+    func dottedUnderline(foreground: ThemeColor.SemanticColor, for range: Range<AttributedString.Index>? = nil) -> Self {
+        var string = self
+        let range = range ?? string.startIndex..<string.endIndex
+        let underlineStyle = NSUnderlineStyle.single.union(.patternDot)
+        string[range].underlineStyle = underlineStyle
+        string[range].underlineColor = UIColor(ThemeSettings.shared.themeConfig.themeColor.color(of: foreground))
+        return string
+    }
 }
 
 // MARK: Keyboard Accessory

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/Components/dydxTitledCardView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/Components/dydxTitledCardView.swift
@@ -12,14 +12,22 @@ import Utilities
 public class dydxTitledCardViewModel: PlatformViewModel {
 
     public let title: String
+    public let tooltip: String?
     public let verticalContentPadding: CGFloat
     public let horizontalContentPadding: CGFloat
     @Published public var tapAction: (() -> Void)?
+    @Published private var isTooltipPresented: Bool = false
+    private lazy var isTooltipPresentedBinding = Binding(
+        get: { [weak self] in self?.isTooltipPresented == true },
+        set: { [weak self] in self?.isTooltipPresented = $0 }
+    )
 
     public init(title: String,
+                tooltip: String? = nil,
                 verticalContentPadding: CGFloat = 16,
                 horizontalContentPadding: CGFloat = 16) {
         self.title = title
+        self.tooltip = tooltip
         self.verticalContentPadding = verticalContentPadding
         self.horizontalContentPadding = horizontalContentPadding
         super.init()
@@ -34,6 +42,45 @@ public class dydxTitledCardViewModel: PlatformViewModel {
         AnyView(PlatformView.nilView)
     }
 
+    /// creates the title text view. If tooltip is non-nil, the title will be hyperlinked and underlined such that tapping displays the tooltip text.
+    func createTitleTextView() -> AnyView? {
+        let attributedTitle = AttributedString(self.title)
+            .themeFont(fontSize: .small)
+            .themeColor(foreground: .textSecondary)
+        if let tooltip = tooltip {
+            return Text(attributedTitle.dottedUnderline(foreground: .textSecondary))
+                .onTapGesture { [weak self] in
+                    self?.isTooltipPresented.toggle()
+                }
+                .popover(present: self.isTooltipPresentedBinding, attributes: {
+                    $0.position = .absolute(
+                          originAnchor: .top,
+                          popoverAnchor: .bottom
+                      )
+                    $0.sourceFrameInset = .init(top: 0, left: 0, bottom: -16, right: 0)
+                    $0.presentation.animation = .none
+                    $0.blocksBackgroundTouches = true
+                    $0.onTapOutside = {
+                        self.isTooltipPresented = false
+                    }
+                }, view: {
+                    Text(tooltip)
+                        .padding(.vertical, 10)
+                        .padding(.horizontal, 12)
+                        .themeFont(fontType: .text, fontSize: .small)
+                        .themeColor(foreground: .textSecondary)
+                        .themeColor(background: .layer5)
+                        .borderAndClip(style: .cornerRadius(8), borderColor: .layer6, lineWidth: 1)
+                        .environmentObject(ThemeSettings.shared)
+                })
+                .wrappedInAnyView()
+        } else {
+            return Text(attributedTitle)
+                .wrappedInAnyView()
+        }
+
+    }
+
     /// defaults to a right facing chevron. override if you want a different accessory view or no accessory view at all
     func createTitleAccessoryView(parentStyle: ThemeStyle = ThemeStyle.defaultStyle, styleKey: String? = nil) -> AnyView? {
         PlatformIconViewModel(type: .system(name: "chevron.right"),
@@ -49,9 +96,7 @@ public class dydxTitledCardViewModel: PlatformViewModel {
 
             let view = VStack(spacing: 0) {
                 HStack(spacing: 0) {
-                    Text(self.title)
-                        .themeFont(fontSize: .small)
-                        .themeColor(foreground: .textSecondary)
+                    self.createTitleTextView()
                     Spacer(minLength: 16)
                     self.createTitleAccessoryView(parentStyle: parentStyle)
                 }

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/Components/dydxRewardsHistoryView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/Components/dydxRewardsHistoryView.swift
@@ -28,7 +28,8 @@ public class dydxRewardsHistoryViewModel: dydxTitledCardViewModel {
     // MARK: impl
 
     public init() {
-        super.init(title: DataLocalizer.shared?.localize(path: "APP.GENERAL.REWARD_HISTORY", params: nil) ?? "")
+        super.init(title: DataLocalizer.shared?.localize(path: "APP.GENERAL.REWARD_HISTORY", params: nil) ?? "",
+                   tooltip: DataLocalizer.shared?.localize(path: "TRADE.REWARD_HISTORY.BODY", params: nil) ?? "")
     }
 
     public override func createTitleAccessoryView(parentStyle: ThemeStyle = ThemeStyle.defaultStyle, styleKey: String? = nil) -> AnyView? {