From b67ecdf03956bcda227847a63fd23e1b99688aa2 Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Sat, 20 Apr 2024 17:24:22 +0530
Subject: [PATCH 1/2] separate market impact and term

---
 .../OpenShortPreview/OpenShortPreview.tsx     | 82 ++++++++++---------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
index 2fe4cf3b7..1db603383 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
@@ -91,44 +91,52 @@ export function OpenShortPreview({
           </span>
         }
       />
-      <LabelValue
-        label="Fixed APR after open"
-        value={
-          <span
-            className={classNames(
-              "daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
-              { "border-b border-dashed border-current": spotRateAfterOpen },
-            )}
-            data-tip="The market fixed rate after opening the short."
-          >
-            {spotRateAfterOpen ? `${formatRate(spotRateAfterOpen)}% APR` : "-"}
-          </span>
-        }
-      />
-      <LabelValue
-        label="Fixed APR impact"
-        value={
-          <span
-            className={classNames(
-              "daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help  before:border",
-              {
-                "border-b border-dashed border-success text-success":
-                  spotRateAfterOpen,
-              },
-            )}
-            data-tip={`The net market impact on the fixed rate after opening the short.`}
-          >
-            {getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
-          </span>
-        }
-      />
+      <div className="flex flex-col gap-3">
+        <h6 className="font-medium">Market Impact</h6>
+        <LabelValue
+          label="Fixed APR after open"
+          value={
+            <span
+              className={classNames(
+                "daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
+                { "border-b border-dashed border-current": spotRateAfterOpen },
+              )}
+              data-tip="The market fixed rate after opening the short."
+            >
+              {spotRateAfterOpen
+                ? `${formatRate(spotRateAfterOpen)}% APR`
+                : "-"}
+            </span>
+          }
+        />
+        <LabelValue
+          label="Fixed APR impact"
+          value={
+            <span
+              className={classNames(
+                "daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help  before:border",
+                {
+                  "border-b border-dashed border-success text-success":
+                    spotRateAfterOpen,
+                },
+              )}
+              data-tip={`The net market impact on the fixed rate after opening the short.`}
+            >
+              {getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
+            </span>
+          }
+        />
+      </div>
 
-      <LabelValue
-        label="Matures in"
-        value={`${convertMillisecondsToDays(termLengthMS)} days, ${formatDate(
-          Date.now() + termLengthMS,
-        )}`}
-      />
+      <div className="flex flex-col gap-3">
+        <h6 className="font-medium">Term</h6>
+        <LabelValue
+          label="Matures in"
+          value={`${convertMillisecondsToDays(termLengthMS)} days, ${formatDate(
+            Date.now() + termLengthMS,
+          )}`}
+        />
+      </div>
     </div>
   );
 }

From e98f8c6ed929cec1eae10d6a33f1aa19822b937e Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Mon, 22 Apr 2024 16:40:14 +0530
Subject: [PATCH 2/2] Split maturity into two

---
 .../shorts/OpenShortPreview/OpenShortPreview.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
index 1db603383..da46e593c 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
@@ -132,9 +132,12 @@ export function OpenShortPreview({
         <h6 className="font-medium">Term</h6>
         <LabelValue
           label="Matures in"
-          value={`${convertMillisecondsToDays(termLengthMS)} days, ${formatDate(
-            Date.now() + termLengthMS,
-          )}`}
+          value={`${convertMillisecondsToDays(termLengthMS)} days
+          `}
+        />
+        <LabelValue
+          label="Matures on"
+          value={`${formatDate(Date.now() + termLengthMS)}`}
         />
       </div>
     </div>