separate market impact and term (#999)

* separate market impact and term * Split maturity into two
delvtech · Apr 22, 2024 · 3896c66 · 3896c66
1 parent d6983f4
commit 3896c66
Showing 1 changed file with 48 additions and 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
@@ -91,44 +91,55 @@ 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
+          `}
+        />
+        <LabelValue
+          label="Matures on"
+          value={`${formatDate(Date.now() + termLengthMS)}`}
+        />
+      </div>
     </div>
   );
 }