From 3a7b0d13ed39ce8dd26725b93d871db2e27cac4f Mon Sep 17 00:00:00 2001
From: mike-dydx <mike@dydx.exchange>
Date: Mon, 24 Jun 2024 11:58:05 -0400
Subject: [PATCH] fix layout for isolated/non-isolated stats row

---
 .../dydxMarketPositionViewPresenter.swift     |   6 +
 .../Position/dydxMarketPositionView.swift     | 158 ++++++++++++------
 2 files changed, 116 insertions(+), 48 deletions(-)

diff --git a/dydx/dydxPresenters/dydxPresenters/_v4/MarketInfo/Components/dydxMarketPositionViewPresenter.swift b/dydx/dydxPresenters/dydxPresenters/_v4/MarketInfo/Components/dydxMarketPositionViewPresenter.swift
index 9186b388a..0bc53ee61 100644
--- a/dydx/dydxPresenters/dydxPresenters/_v4/MarketInfo/Components/dydxMarketPositionViewPresenter.swift
+++ b/dydx/dydxPresenters/dydxPresenters/_v4/MarketInfo/Components/dydxMarketPositionViewPresenter.swift
@@ -107,6 +107,12 @@ class dydxMarketPositionViewPresenter: HostedViewPresenter<dydxMarketPositionVie
         viewModel?.unrealizedPNLAmount = sharedOrderViewModel.unrealizedPnl
         viewModel?.unrealizedPNLPercent = sharedOrderViewModel.unrealizedPnlPercent
         viewModel?.realizedPNLAmount = SignedAmountViewModel(amount: position.realizedPnl.current?.doubleValue, displayType: .dollar, coloringOption: .allText)
+
+        if let margin = position.equity.current?.doubleValue, let marginMode = position.marginMode {
+            viewModel?.marginMode = DataLocalizer.shared?.localize(path: "APP.GENERAL.\(marginMode.rawValue.uppercased())", params: nil)
+            viewModel?.margin = dydxFormatter.shared.dollar(number: NSNumber(value: margin), digits: 2)
+        }
+
         viewModel?.liquidationPrice = dydxFormatter.shared.dollar(number: position.liquidationPrice.current?.doubleValue, digits: configs.displayTickSizeDecimals?.intValue ?? 0)
 
         viewModel?.leverage = sharedOrderViewModel.leverage
diff --git a/dydx/dydxViews/dydxViews/_v4/MarketInfo/Components/Position/dydxMarketPositionView.swift b/dydx/dydxViews/dydxViews/_v4/MarketInfo/Components/Position/dydxMarketPositionView.swift
index 6c3cfb37a..59470742e 100644
--- a/dydx/dydxViews/dydxViews/_v4/MarketInfo/Components/Position/dydxMarketPositionView.swift
+++ b/dydx/dydxViews/dydxViews/_v4/MarketInfo/Components/Position/dydxMarketPositionView.swift
@@ -19,6 +19,8 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
     @Published public var unrealizedPNLAmount: SignedAmountViewModel?
     @Published public var unrealizedPNLPercent: SignedAmountViewModel?
     @Published public var realizedPNLAmount: SignedAmountViewModel?
+    @Published public var marginMode: String?
+    @Published public var margin: String?
     @Published public var leverage: String?
     @Published public var leverageIcon: LeverageRiskModel?
     @Published public var liquidationPrice: String?
@@ -52,6 +54,8 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
         vm.unrealizedPNLAmount = .previewValue
         vm.unrealizedPNLPercent = .previewValue
         vm.realizedPNLAmount = .previewValue
+        vm.marginMode = "Cross"
+        vm.margin = "$10"
         vm.leverage = "$12.00"
         vm.leverageIcon = .previewValue
         vm.liquidationPrice = "$12.00"
@@ -99,8 +103,84 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
         }
     }
 
+    private var unrealizedView: AnyView {
+        VStack(alignment: .leading, spacing: 6) {
+            Text(DataLocalizer.localize(path: "APP.TRADE.UNREALIZED_PNL"))
+                .themeFont(fontType: .plus, fontSize: .small)
+                .themeColor(foreground: .textTertiary)
+            self.unrealizedPNLAmount?
+                .createView(parentStyle: .defaultStyle.themeFont(fontSize: .large))
+            self.unrealizedPNLPercent?
+                .createView(parentStyle: .defaultStyle.themeFont(fontSize: .smaller).themeColor(foreground: .textTertiary))
+        }
+        .wrappedInAnyView()
+    }
+
+    private var realizedView: AnyView {
+        VStack(alignment: .leading, spacing: 6) {
+            Text(DataLocalizer.localize(path: "APP.TRADE.REALIZED_PNL"))
+                .themeFont(fontType: .plus, fontSize: .small)
+                .themeColor(foreground: .textTertiary)
+            realizedPNLAmount?
+                .createView(parentStyle: .defaultStyle.themeFont(fontSize: .large))
+        }
+        .wrappedInAnyView()
+    }
+
+    private var marginView: AnyView? {
+        guard let marginMode = marginMode, let margin = margin else { return nil }
+        return VStack(alignment: .leading, spacing: 6) {
+            Text(DataLocalizer.localize(path: "APP.GENERAL.MARGIN_WITH_MODE", params: ["MODE": marginMode]))
+                .themeFont(fontType: .plus, fontSize: .small)
+                .themeColor(foreground: .textTertiary)
+            Text(margin)
+                .themeFont(fontSize: .medium)
+                .themeColor(foreground: .textSecondary)
+                .lineLimit(1)
+                .minimumScaleFactor(0.5)
+            Spacer(minLength: 0)
+        }
+        .wrappedInAnyView()
+    }
+
+    private var statsRow: some View {
+        let views = [unrealizedView, realizedView, marginView].compactMap { $0 }
+        return Group {
+            // left aligned
+            if views.count == 2 {
+                HStack(alignment: .top, spacing: 12) {
+                    ForEach(views.indices, id: \.self) { index in
+                        views[index]
+                            .fixedSize(horizontal: true, vertical: false)
+                            .padding(.vertical, 8)
+                        if index < views.count - 1 {
+                            DividerModel().createView()
+                        }
+                    }
+                    Spacer()
+                }
+            } else {
+                // even spacing
+                HStack(alignment: .top, spacing: 0) {
+                    ForEach(views.indices, id: \.self) { index in
+                        Spacer()
+                        views[index]
+                            .fixedSize(horizontal: true, vertical: false)
+                            .padding(.vertical, 8)
+                        Spacer()
+                        if index < views.count - 1 {
+                            DividerModel().createView()
+                        }
+                    }
+                }
+            }
+        }
+        .padding(.horizontal, 8)
+        .wrappedInAnyView()
+    }
+
     private func createCollection(parentStyle: ThemeStyle) -> some View {
-        VStack(spacing: 0) {
+        VStack(spacing: 12) {
             HStack {
                 createPositionTab(parentStyle: parentStyle)
 
@@ -121,38 +201,11 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
                 }
                 .frame(minWidth: 0, maxWidth: .infinity)
             }
-            .padding(.vertical, 8)
-
-            DividerModel().createView(parentStyle: parentStyle)
-                .padding(.top, 8)
 
-            HStack(alignment: .top, spacing: 0) {
-                let unrealizedValue = VStack(alignment: .leading) {
-                    unrealizedPNLAmount?
-                        .createView(parentStyle: parentStyle.themeFont(fontSize: .large))
-
-                    unrealizedPNLPercent?
-                        .createView(parentStyle: parentStyle.themeFont(fontSize: .smaller).themeColor(foreground: .textTertiary))
-                }.wrappedViewModel
-
-                let realizedValue = VStack(alignment: .leading) {
-                    realizedPNLAmount?
-                        .createView(parentStyle: parentStyle.themeFont(fontSize: .large))
-                    Spacer()
-                }.wrappedViewModel
-
-                self.createCollectionItem(parentStyle: parentStyle, title: DataLocalizer.localize(path: "APP.TRADE.UNREALIZED_PNL"), valueViewModel: unrealizedValue)
-                    .padding(.vertical, 16)
-                    .frame(height: 96)
-
-                DividerModel().createView(parentStyle: parentStyle)
-                    .frame(height: 82)
-
-                self.createCollectionItem(parentStyle: parentStyle, title: DataLocalizer.localize(path: "APP.TRADE.REALIZED_PNL"), valueViewModel: realizedValue)
-                    .padding(.vertical, 16)
-                    .frame(height: 96)
-            }
+            statsRow
         }
+        .padding(.bottom, 8)
+
     }
 
     private func createPositionTab(parentStyle: ThemeStyle) -> some View {
@@ -194,30 +247,39 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
     }
 
     private func createCollectionItem(parentStyle: ThemeStyle, title: String?, stringValue: String?) -> some View {
-        VStack(alignment: .leading) {
-            Text(title ?? "")
-                .themeFont(fontSize: .small)
-                .themeColor(foreground: .textTertiary)
-                .leftAligned()
+        VStack(spacing: 0) {
+            VStack(alignment: .leading, spacing: 6) {
+                Text(title ?? "")
+                    .themeFont(fontType: .plus, fontSize: .small)
+                    .themeColor(foreground: .textTertiary)
+                    .fixedSize(horizontal: true, vertical: false)
+                    .leftAligned()
+                Text(stringValue ?? "-")
+                    .themeFont(fontSize: .medium)
+                    .themeColor(foreground: .textSecondary)
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.5)
+            }
             Spacer()
-            Text(stringValue ?? "-")
-                .leftAligned()
-                .lineLimit(1)
-                .minimumScaleFactor(0.5)
         }
         .padding(.horizontal, 8)
     }
 
     private func createCollectionItem(parentStyle: ThemeStyle, title: String?, valueViewModel: PlatformViewModel?) -> some View {
-        VStack(alignment: .leading) {
-            Text(title ?? "")
-                .themeFont(fontSize: .small)
-                .themeColor(foreground: .textTertiary)
-                .leftAligned()
+        VStack(spacing: 0) {
+            VStack(alignment: .leading, spacing: 6) {
+                Text(title ?? "")
+                    .themeFont(fontType: .plus, fontSize: .small)
+                    .themeColor(foreground: .textTertiary)
+                    .fixedSize(horizontal: true, vertical: false)
+                    .leftAligned()
+                valueViewModel?.createView(parentStyle: parentStyle, styleKey: nil)
+                    .fixedSize(horizontal: true, vertical: false)
+                    .leftAligned()
+            }
             Spacer()
-            valueViewModel?.createView(parentStyle: parentStyle, styleKey: nil)
-                .leftAligned()
         }
+
         .padding(.horizontal, 8)
     }
 
@@ -230,7 +292,7 @@ public class dydxMarketPositionViewModel: PlatformViewModel {
             let content = HStack {
                 Spacer()
                 Text(DataLocalizer.localize(path: "APP.TRADE.CLOSE_POSITION"))
-                    .themeFont(fontSize: .medium)
+                    .themeFont(fontType: .plus, fontSize: .medium)
                     .themeColor(foreground: ThemeSettings.negativeColor)
                 Spacer()
             }