Add description to CTA cards, update bullet points (#428)

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

@@ -35,16 +35,21 @@ export function OpenLongModalButton({
             showModal();
           }}
         >
-          <div className="flex w-[272px] flex-col gap-2 p-4">
+          <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 ">Open a long</p>
+            <p className="text-h5 ">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.
+            </p>
             <div className="mt-4 ml-4 flex flex-col gap-2">
               <ChecklistItem checked readOnly>
-                Guaranteed fixed rate yield
+                Fixed rate included in the price
               </ChecklistItem>
               <ChecklistItem checked readOnly>
                 Minimal risk and maintenance
@@ -57,7 +62,9 @@ export function OpenLongModalButton({
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
             <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
-              <span className="ml-4 flex-1 text-center">Open long</span>
+              <span className="ml-4 flex flex-1 flex-col gap-1 text-center">
+                Buy
+              </span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
           </div>

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

@@ -33,21 +33,25 @@ export function AddLiquidityModalButton({
             return showModal();
           }}
         >
-          <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
+          <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="font-bold">
               Earn trading fees <span>and</span> interest
             </p>
+            <p className="daisy-label-text">
+              Take the other side of every Buy and Short. Earn fees and the
+              yield source rate.
+            </p>
             <div className="mt-4 ml-4 flex flex-col gap-2 ">
               <ChecklistItem checked readOnly>
-                Deposit {hyperdrive.baseToken.symbol} to back trades
+                Single-sided deposit with {hyperdrive.baseToken.symbol}
               </ChecklistItem>
               <ChecklistItem checked readOnly>
-                Idle capital accrues vault APY
+                Idle capital earns yield source rate
               </ChecklistItem>
               <ChecklistItem checked readOnly>
-                No rollovers, easy-to-use
+                No terms or rollovers, easy-to-use
               </ChecklistItem>
             </div>
             {/* Using a div styled as a button here just as a visual cue. Don't

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

@@ -37,19 +37,23 @@ export function OpenShortModalButton({
             return showModal();
           }}
         >
-          <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
+          <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">Open a short</p>
+            <p className="text-h5">Short hy{hyperdrive.baseToken.symbol}</p>
             <p className="font-bold">
               Earn <span>{vaultRate?.formatted}% APY</span> on{" "}
               {hyperdrive.baseToken.symbol}
             </p>
-            <div className="mt-4 ml-4 flex flex-col gap-2 ">
+            <p className="daisy-label-text">
+              Profit when the price of hy{hyperdrive.baseToken.symbol} drops,
+              and also earn the yield source rate.
+            </p>
+            <div className="mt-4 ml-2 flex flex-col gap-2 ">
               <ChecklistItem readOnly checked>
-                Variable rate yield
+                Fixed rate up, hy{hyperdrive.baseToken.symbol} price down
               </ChecklistItem>
               <ChecklistItem readOnly checked>
-                Profit from rising fixed rates
+                Maximize exposure to yield source
               </ChecklistItem>
               <ChecklistItem readOnly checked>
                 Redeemable before term ends
@@ -59,7 +63,7 @@ export function OpenShortModalButton({
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
             <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
-              <span className="ml-4 flex-1 text-center">Open short</span>
+              <span className="ml-4 flex-1 text-center">Short</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
           </div>

apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx

@@ -120,6 +120,15 @@ function PriceBadges({
 }) {
   return (
     <div className="flex gap-4">
+      <div className="daisy-badge daisy-badge-ghost daisy-badge-lg border border-base-300/5">
+        1 hy{hyperdrive.baseToken.symbol} ≈{" "}
+        {formatBalance({
+          balance: longPrice.price,
+          decimals: hyperdrive.baseToken.decimals,
+          places: 6,
+        })}{" "}
+        {hyperdrive.baseToken.symbol}
+      </div>
       <div className="daisy-badge daisy-badge-ghost daisy-badge-lg border border-base-300/5">
         1 {hyperdrive.baseToken.symbol} ≈{" "}
         {formatBalance({
@@ -134,15 +143,6 @@ function PriceBadges({
         })}{" "}
         hy{hyperdrive.baseToken.symbol}
       </div>
-      <div className="daisy-badge daisy-badge-ghost daisy-badge-lg border border-base-300/5">
-        1 hy{hyperdrive.baseToken.symbol} ≈{" "}
-        {formatBalance({
-          balance: longPrice.price,
-          decimals: hyperdrive.baseToken.decimals,
-          places: 6,
-        })}{" "}
-        {hyperdrive.baseToken.symbol}
-      </div>
     </div>
   );
 }