From b34ac2c6fdc2bf0b40d05186a28da55c17fa9d0a Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Mon, 16 Dec 2024 17:13:11 -0800
Subject: [PATCH] Update RewardsTooltip to show multiplier based rewards

---
 .../src/ui/rewards/RewardsTooltip.tsx            | 16 +++++++++++-----
 .../hyperdrive-appconfig/src/rewards/etherfi.ts  |  6 +++---
 .../src/rewards/gyroscope.ts                     |  5 +++--
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/rewards/RewardsTooltip.tsx b/apps/hyperdrive-trading/src/ui/rewards/RewardsTooltip.tsx
index a0efb79c7..d35c03dd2 100644
--- a/apps/hyperdrive-trading/src/ui/rewards/RewardsTooltip.tsx
+++ b/apps/hyperdrive-trading/src/ui/rewards/RewardsTooltip.tsx
@@ -1,4 +1,4 @@
-import { fixed } from "@delvtech/fixed-point-wasm";
+import { fixed, parseFixed } from "@delvtech/fixed-point-wasm";
 import {
   appConfig,
   getHyperdriveConfig,
@@ -38,10 +38,13 @@ export function RewardsTooltip({
     hyperdriveAddress: hyperdrive.address,
   });
 
-  const multiplierLabel =
+  const multiplier =
     longPriceStatus === "success" && longPrice
-      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 1 })}x`
-      : undefined;
+      ? calculateMarketYieldMultiplier(longPrice)
+      : null;
+  const multiplierLabel = multiplier
+    ? `${multiplier.format({ decimals: 1 })}x`
+    : undefined;
 
   if (!appConfigRewards?.length && multiplierLabel && (!netRate || !baseRate)) {
     return (
@@ -200,7 +203,10 @@ export function RewardsTooltip({
 
                       <div className="grid justify-items-end">
                         <p className="flex items-center gap-1">
-                          +{reward.pointMultiplier.toString()}x
+                          {multiplier
+                            ?.mul(parseFixed(reward.pointMultiplier))
+                            .format({ decimals: 0 })}
+                          x
                         </p>
                       </div>
                     </div>
diff --git a/packages/hyperdrive-appconfig/src/rewards/etherfi.ts b/packages/hyperdrive-appconfig/src/rewards/etherfi.ts
index 0ef01459f..39bac4ec8 100644
--- a/packages/hyperdrive-appconfig/src/rewards/etherfi.ts
+++ b/packages/hyperdrive-appconfig/src/rewards/etherfi.ts
@@ -4,10 +4,10 @@ import { EETH_ICON_URL } from "src/tokens/tokenIconsUrls";
 export const fetchEtherfiRewards: RewardsResolver = async () => {
   return [
     {
-      type: "info",
+      type: "pointMultiplier",
       iconUrl: EETH_ICON_URL,
-      message:
-        "eEther.fi loyalty points earned in this pool will be boosted 2x.",
+      pointMultiplier: 2n,
+      pointTokenLabel: "Ether.fi Loyalty Points",
     },
   ];
 };
diff --git a/packages/hyperdrive-appconfig/src/rewards/gyroscope.ts b/packages/hyperdrive-appconfig/src/rewards/gyroscope.ts
index 5c6b31463..43ff6e85a 100644
--- a/packages/hyperdrive-appconfig/src/rewards/gyroscope.ts
+++ b/packages/hyperdrive-appconfig/src/rewards/gyroscope.ts
@@ -4,9 +4,10 @@ import { GYD_ICON_URL } from "src/tokens/tokenIconsUrls";
 export const fetchGyroscopeRewards: RewardsResolver = async () => {
   return [
     {
-      type: "info",
-      message: "This pool is eligible for 2x SPIN Rewards",
+      type: "pointMultiplier",
       iconUrl: GYD_ICON_URL,
+      pointMultiplier: 2n,
+      pointTokenLabel: "SPIN Rewards",
     },
   ];
 };