Minor UI polish (#1030)

* Cleanup tailwind classes * Add skeleton * Update label + tooltip * commify formatRate
delvtech · May 3, 2024 · 209662d · 209662d
1 parent 6c1db10
commit 209662d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/apps/hyperdrive-trading/src/base/formatRate.ts b/apps/hyperdrive-trading/src/base/formatRate.ts
@@ -5,6 +5,6 @@ export function formatRate(rate: bigint, decimals = 18): string {
   // 0.049999999999999996 * 100 = 5, we just take the first 10 characters after
   // the decimal, and format those to a percent, eg: 0.0499999999 * 100 = 4.99.
   const truncatedAPR = +formatUnits(rate, decimals).slice(0, 10);
-  const formatted = `${(100 * truncatedAPR).toFixed(2)}`;
+  const formatted = `${Number((100 * truncatedAPR).toFixed(2)).toLocaleString()}`;
   return formatted;
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketStats/LiquidityStats.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketStats/LiquidityStats.tsx
@@ -36,7 +36,7 @@ export function LiquidityStats({
   return (
     <Well transparent>
       <div className="space-y-8">
-        <h5 className="flex items-center gap-2 text-gray-400">Liquidity</h5>
+        <h5 className="flex text-neutral-content">Liquidity</h5>
         <div className="flex gap-16">
           <Stat
             label={`Total (${baseToken.symbol})`}

diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketStats/YieldStats.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketStats/YieldStats.tsx
@@ -60,7 +60,7 @@ export function YieldStats({
     <Well transparent>
       <div className="space-y-8">
         <div className="flex justify-between gap-20">
-          <h5 className="flex items-center gap-2 text-gray-400">Yield</h5>
+          <h5 className="flex text-neutral-content">Yield</h5>
           <div className="font-dmMono text-neutral-content">
             {vaultRateStatus === "loading" && vaultRate === undefined ? (
               <Skeleton className="w-20" />
@@ -91,9 +91,18 @@ export function YieldStats({
           {isImpliedYieldFeatureFlagEnabled ? (
             <Animated isActive={position === "Shorts"}>
               <Stat
-                label="Implied Variable Rate"
-                value={`${formattedRate}%`}
-                description={`The yield source backing the hy${baseToken.symbol} in this pool.`}
+                label="Variable APY"
+                value={
+                  impliedRateStatus === "loading" &&
+                  impliedRate === undefined ? (
+                    <Skeleton className="w-20" />
+                  ) : (
+                    <span className={classNames("flex items-center gap-1.5")}>
+                      {formattedRate}%
+                    </span>
+                  )
+                }
+                description="Resulting rate of return that a Short position accrues, taking into consideration the fixed rate paid to open the Short, the variable rate being earned (on full face value), and the maximum loss on capital."
                 tooltipPosition={"right"}
               />
             </Animated>

diff --git a/apps/hyperdrive-trading/src/ui/markets/YourBalanceWell/YourBalanceWell.tsx b/apps/hyperdrive-trading/src/ui/markets/YourBalanceWell/YourBalanceWell.tsx
@@ -44,7 +44,7 @@ export function YourBalanceWell({
   return (
     <Well elevation="flat">
       <div className="flex flex-col">
-        <p className="mb-2 text-sm text-neutral-content">Available Assets</p>
+        <h5 className="mb-2 text-neutral-content">Available Assets</h5>
         <div className="flex flex-col gap-2">
           <AvailableAsset token={baseToken} spender={hyperdrive.address} />
           {hyperdrive.depositOptions.isShareTokenDepositsEnabled && (