Polish modals, add empty states on tables

apps/hyperdrive-trading/src/ui/base/components/NonIdealState.tsx

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+
+export function NonIdealState(): ReactElement {
+  return (
+    <div className="rounded-b-lg bg-base-200 p-10 text-center">
+      <p className="text-lg">Nothing to show.</p>
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx

@@ -15,7 +15,7 @@ export function GridTableHeader({
   return (
     <div
       className={classNames(
-        "grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 text-sm font-light md:text-lg [&>*]:text-ellipsis [&>*]:p-4",
+        "grid auto-cols-fr grid-flow-col items-center rounded-t-md [&>*]:text-ellipsis [&>*]:p-4",
         className,
       )}
     >

apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { ReactElement, ReactNode, useState } from "react";
 import Skeleton from "react-loading-skeleton";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { GridTableHeader } from "src/ui/base/components/tables/GridTableHeader";
 import { GridTableRow } from "src/ui/base/components/tables/GridTableRow";
 import { GridTableRowLink } from "src/ui/base/components/tables/GridTableRowLink";
@@ -53,7 +54,7 @@ export function SortableGridTable<K extends string>({
   rows,
   onSort,
   headingRowClassName,
-  emptyTableElement = <DefaultEmptyTableElement />,
+  emptyTableElement = <NonIdealState />,
   showSkeleton,
   bodyRowClassName,
   defaultSortOptions,
@@ -204,14 +205,6 @@ function nextSortDirection(
   }
 }
 
-function DefaultEmptyTableElement() {
-  return (
-    <div className="rounded-b-lg bg-base-200 p-10 text-center">
-      <p className="text-lg">Nothing to show.</p>
-    </div>
-  );
-}
-
 interface CellWithTooltipProps {
   content: ReactNode;
   tooltip: string;
@@ -223,7 +216,9 @@ export function CellWithTooltip({
 }: CellWithTooltipProps): ReactElement {
   return (
     <span className="daisy-tooltip" data-tip={tooltip}>
-      {content}
+      <span className="text-sm font-bold text-black text-opacity-60">
+        {content}
+      </span>
     </span>
   );
 }

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx

@@ -129,6 +129,7 @@ export function OpenLongForm({
             />
           </div>
         </Well>
+
         <p className="text-center text-body">
           Please note: 1 hy{hyperdrive.baseToken.symbol} is always worth 1{" "}
           {hyperdrive.baseToken.symbol} at maturity, however its value may

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx

@@ -37,9 +37,9 @@ export function OpenLongModalButton({
               {hyperdrive.baseToken.symbol}
             </p>
             <p className="daisy-label-text">
-              1 hy{hyperdrive.baseToken.symbol} is worth 1{" "}
-              {hyperdrive.baseToken.symbol} at maturity, giving you a
-              predictable fixed rate yield.
+              1 hy{hyperdrive.baseToken.symbol} is always worth 1{" "}
+              {hyperdrive.baseToken.symbol} at maturity. It&apos;s a predictable
+              fixed rate yield.
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2">
               <ChecklistItem checked readOnly>

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx

@@ -31,21 +31,40 @@ export function OpenLongPreview({
 
       <div className="flex justify-between">
         <p>Fixed rate</p>
-        <p>
-          {long.bondAmount > 0
-            ? `${calculateAnnualizedPercentageChange({
+        <p className="flex items-center">
+          {long.bondAmount > 0 ? (
+            <>
+              <div
+                className={
+                  "daisy-badge daisy-badge-md inline-flex text-success"
+                }
+              >
+                <span>{long.bondAmount > long.baseAmountPaid ? "+" : ""}</span>
+                {long.baseAmountPaid
+                  ? `${formatBalance({
+                      balance: long.bondAmount - long.baseAmountPaid,
+                      decimals: hyperdrive.baseToken.decimals,
+                      places: 4,
+                    })} ${hyperdrive.baseToken.symbol}`
+                  : undefined}
+              </div>
+              {calculateAnnualizedPercentageChange({
                 amountBefore: long.baseAmountPaid,
                 amountAfter: long.bondAmount,
                 days: numDays,
-              })}`
-            : "0"}
+              })}
+            </>
+          ) : (
+            "0"
+          )}
           % APR
         </p>
       </div>
       <div className="flex justify-between">
         <p className="">Matures in</p>
         <p className="">
-          7 days, {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
+          {convertMillisecondsToDays(hyperdrive.termLengthMS)} days,{" "}
+          {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
         </p>
       </div>
     </div>

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx

@@ -1,10 +1,9 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ReactElement } from "react";
-import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
 import { parseUnits } from "src/base/parseUnits";
+import { Well } from "src/ui/base/components/Well/Well";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { AddLiquidityPreview } from "src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview";
@@ -71,22 +70,8 @@ export function AddLiquidityForm({
   });
 
   return (
-    <div className="flex flex-col gap-10">
-      <div className="text-base-content">
-        <h5>Add liquidity</h5>
-        <div className="flex flex-col items-start">
-          <p>Earn trading fees when users open long or shorts</p>
-          <Link
-            className="flex cursor-pointer flex-row items-center text-sm"
-            to={
-              "https://www.notion.so/delv-tech/LP-Profitability-0acf6928b88c4a33875221aa15ca62d2?pvs=4"
-            }
-          >
-            Learn More
-            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
-          </Link>
-        </div>
-      </div>
+    <div className="flex flex-col gap-4">
+      <h5 className="font-bold">Add liquidity</h5>
       <TokenInput
         token={market.baseToken}
         value={amount ?? ""}
@@ -105,43 +90,56 @@ export function AddLiquidityForm({
       />
 
       {/* New Position Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Position preview</h5>
-        <AddLiquidityPreview hyperdrive={market} lpShares={lpSharesOut || 0n} />
-      </div>
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            <AddLiquidityPreview
+              hyperdrive={market}
+              lpShares={lpSharesOut || 0n}
+            />
+          </div>
+        </Well>
 
-      {account ? (
-        needsApproval ? (
-          // Approval button
-          <button
-            disabled={!approve}
-            className="daisy-btn-warning daisy-btn"
-            onClick={(e) => {
-              // Do this so we don't close the modal
-              e.preventDefault();
-              approve?.();
-            }}
-          >
-            Approve {market.baseToken.symbol}
-          </button>
+        <p className="text-center text-body">
+          Note: You can withdraw liquidity at any time. If you&apos;re backing
+          open positions, you&apos;ll receive Withdrawal Shares for later
+          redemption.
+        </p>
+
+        {account ? (
+          needsApproval ? (
+            // Approval button
+            <button
+              disabled={!approve}
+              className="daisy-btn-warning daisy-btn"
+              onClick={(e) => {
+                // Do this so we don't close the modal
+                e.preventDefault();
+                approve?.();
+              }}
+            >
+              Approve {market.baseToken.symbol}
+            </button>
+          ) : (
+            // Trade button
+            <button
+              disabled={!addLiquidity || addLiquidityStatus === "loading"}
+              className="daisy-btn-primary daisy-btn"
+              onClick={() => addLiquidity?.()}
+            >
+              Add liquidity
+            </button>
+          )
         ) : (
-          // Trade button
           <button
-            disabled={!addLiquidity || addLiquidityStatus === "loading"}
             className="daisy-btn-primary daisy-btn"
-            onClick={() => addLiquidity?.()}
+            onClick={() => openConnectModal?.()}
           >
-            Add liquidity
+            Connect wallet
           </button>
-        )
-      ) : (
-        <button
-          className="daisy-btn-primary daisy-btn"
-          onClick={() => openConnectModal?.()}
-        >
-          Connect wallet
-        </button>
-      )}
+        )}
+      </div>
     </div>
   );
 }

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import { Pill } from "src/ui/base/components/Pill";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 
 interface AddLiquidityPreviewProps {
@@ -13,25 +12,17 @@ export function AddLiquidityPreview({
   lpShares,
 }: AddLiquidityPreviewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-y-4 rounded border border-neutral-content bg-transparent p-4">
-      <div className="flex items-center">
-        <h5 className="mr-4 font-bold">{hyperdrive.name}</h5>
-        <Pill className="h-6">LP</Pill>
-      </div>
-
-      <div className="flex flex-col gap-y-1 tracking-wide">
-        <div className="flex">
-          <p className="mr-auto">LP Shares Received</p>
-          <p className="font-semibold tracking-wide">
-            {formatBalance({
-              balance: lpShares,
-              decimals: hyperdrive.baseToken.decimals,
-              places: 4,
-              includeCommas: false,
-            })}{" "}
-            LP
-          </p>
-        </div>
+    <div className="flex flex-col gap-1">
+      <div className="flex justify-between">
+        <p>You receive</p>
+        <p className="font-bold">
+          {formatBalance({
+            balance: lpShares,
+            decimals: hyperdrive.baseToken.decimals,
+            places: 4,
+          })}{" "}
+          LP
+        </p>
       </div>
     </div>
   );