Update columns in Longs table

apps/hyperdrive-trading/src/base/calculateAnnualizedPercentageChange.ts

@@ -0,0 +1,25 @@
+/**
+ * Calculates the annualized profit or loss percentage.
+ * @param amountBefore The amount paid.
+ * @param amountAfter The amount received.
+ * @param days The number of days the investment was held.
+ * @returns The calculated annualized profit or loss percentage.
+ */
+export function calculateAnnualizedPercentageChange({
+  amountBefore,
+  amountAfter,
+  days,
+}: {
+  amountBefore: bigint;
+  amountAfter: bigint;
+  days: number;
+}): string {
+  if (amountBefore === 0n) {
+    return "0"; // Prevent division by zero
+  }
+
+  const profitOrLoss =
+    Number(amountAfter - amountBefore) / Number(amountBefore);
+  const annualizedProfitOrLoss = ((1 + profitOrLoss) ** (365 / days) - 1) * 100;
+  return annualizedProfitOrLoss.toFixed(2);
+}

apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx

@@ -7,9 +7,9 @@ export function Navbar(): ReactElement {
       <div className="daisy-navbar-start ml-2">
         <a className="inline-flex items-center gap-2 font-lato text-h6 font-extrabold uppercase tracking-widest">
           <div className="inline-flex w-full">
-            <div className="h-4 w-2.5 -skew-x-12 bg-primary"></div>
-            <div className="h-4 w-2.5 -skew-x-12 bg-secondary"></div>
-            <div className="h-4 w-2.5 -skew-x-12 bg-accent"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-[#007eed]"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-[#522dae]"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-[#f40000]"></div>
           </div>
           Hyperdrive
         </a>

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

@@ -19,9 +19,6 @@ export function CloseLongModalButton({
     (window as any)[modalId].close();
   }
 
-  const maturity = new Date(Number(long.maturity * 1000n));
-  const hasMatured = maturity < new Date();
-
   return (
     <Modal
       modalId={modalId}
@@ -31,10 +28,7 @@ export function CloseLongModalButton({
             className="daisy-btn-ghost daisy-btn-sm daisy-btn-circle daisy-btn absolute right-4 top-4"
             onClick={closeModal}
           >
-            <XMarkIcon
-              className="w-6 text-white opacity-70 hover:opacity-100 focus:opacity-100"
-              title="Close position"
-            />
+            <XMarkIcon className="w-6 " title="Close position" />
           </button>
           <h3 className="text-h6 font-thin text-base-content">
             Close position
@@ -51,18 +45,6 @@ export function CloseLongModalButton({
           />
         </div>
       }
-    >
-      {({ showModal }) => (
-        <button
-          onClick={showModal}
-          tabIndex={0}
-          className={`${
-            hasMatured ? "daisy-btn-primary" : "daisy-btn-secondary"
-          } daisy-btn-sm daisy-btn`}
-        >
-          {hasMatured ? "Redeem" : "Close"}
-        </button>
-      )}
-    </Modal>
+    />
   );
 }

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

@@ -28,23 +28,25 @@ export function OpenLongModalButton({
           onClick={() => {
             setSearchParams({
               ...searchParams,
-              position: "Longs",
+              position: "Buys",
               openOrClosed: "Open",
             });
             showModal();
           }}
         >
           <div className="flex h-full w-[300px] flex-col justify-between gap-2 p-3">
             <ClockIcon className="mb-2 h-16" />
-            <p className="text-h5 ">Buy hy{hyperdrive.baseToken.symbol}</p>
+            <p className="text-h5 font-bold">
+              Buy hy{hyperdrive.baseToken.symbol}
+            </p>
             <p className="font-bold">
               Earn <span>{fixedAPR?.formatted || "-"}% APR</span> on{" "}
               {hyperdrive.baseToken.symbol}
             </p>
             <p className="daisy-label-text">
-              1 hy{hyperdrive.baseToken.symbol} is always worth one{" "}
-              {hyperdrive.baseToken.symbol} at maturity. It{"'"}s a predictable
-              fixed rate.
+              1 hy{hyperdrive.baseToken.symbol} is worth 1{" "}
+              {hyperdrive.baseToken.symbol} at maturity, giving you 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/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx

@@ -34,7 +34,7 @@ export function AddLiquidityModalButton({
         >
           <div className="flex h-full w-[300px] flex-col justify-between gap-2 p-3">
             <SquaresPlusIcon className="mb-2 h-16" />
-            <p className="text-h5">Add Liquidity</p>
+            <p className="text-h5 font-bold">Add Liquidity</p>
             <p className="font-bold">
               Earn trading fees <span>and</span> interest
             </p>
@@ -47,10 +47,10 @@ export function AddLiquidityModalButton({
                 Single-sided deposit with {hyperdrive.baseToken.symbol}
               </ChecklistItem>
               <ChecklistItem checked readOnly>
-                Idle capital earns yield source rate
+                Idle liquidity earns yield source rate
               </ChecklistItem>
               <ChecklistItem checked readOnly>
-                No terms or rollovers, easy-to-use
+                No terms or manual LP rollovers
               </ChecklistItem>
             </div>
             {/* Using a div styled as a button here just as a visual cue. Don't

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx

@@ -28,10 +28,7 @@ export function CloseShortModalButton({
             className="daisy-btn-ghost daisy-btn-sm daisy-btn-circle daisy-btn absolute right-4 top-4"
             onClick={closeModal}
           >
-            <XMarkIcon
-              className="w-6 text-white opacity-70 hover:opacity-100 focus:opacity-100"
-              title="Close position"
-            />
+            <XMarkIcon className="w-6" title="Close position" />
           </button>
           <h3 className="text-h6 font-thin text-base-content">
             Close position

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx

@@ -38,16 +38,18 @@ export function OpenShortModalButton({
         >
           <div className="flex h-full w-[300px] flex-col justify-between gap-2 p-3">
             <BoltIcon className="mb-2 h-16" />
-            <p className="text-h5">Short hy{hyperdrive.baseToken.symbol}</p>
+            <p className="text-h5 font-bold">
+              Short hy{hyperdrive.baseToken.symbol}
+            </p>
             <p className="font-bold">
               Earn <span>{vaultRate?.formatted}% APY</span> on{" "}
               {hyperdrive.baseToken.symbol}
             </p>
             <p className="daisy-label-text">
-              Profit when the price of hy{hyperdrive.baseToken.symbol} drops,
-              and also earn the yield source rate.
+              Profit when hy{hyperdrive.baseToken.symbol} price drops, while
+              maximizing exposure to the yield source.
             </p>
-            <div className="mt-4 ml-2 flex flex-col gap-2 ">
+            <div className="mt-4 ml-2 flex flex-col gap-2">
               <ChecklistItem readOnly checked>
                 Fixed rate up, hy{hyperdrive.baseToken.symbol} price down
               </ChecklistItem>