Add reward banner to portfolio Short and LP tabs (#1826)

* Add reward banner to portfolio

* Make pool rewards banner dynamic

Author: DannyDelott

apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx

@@ -1,5 +1,6 @@
 import {
   AppConfig,
+  getAddLiquidityRewardConfigs,
   getBaseToken,
   HyperdriveConfig,
 } from "@delvtech/hyperdrive-appconfig";
@@ -22,6 +23,7 @@ import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/Tot
 import { WithdrawalQueueCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell";
 import { usePortfolioLpDataFromHyperdrives } from "src/ui/portfolio/lp/usePortfolioLpData";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
+import { PoolHasRewardsBanner } from "src/ui/portfolio/rewards/PoolHasRewardsBanner";
 import { Address } from "viem";
 
 export function OpenLpTableDesktop({
@@ -72,6 +74,15 @@ export function OpenLpTableDesktop({
     return null;
   }
 
+  const poolHasRewards = hyperdrives.some((hyperdrive) => {
+    const rewardConfigs = getAddLiquidityRewardConfigs({
+      appConfig,
+      chainId: hyperdrive.chainId,
+      hyperdriveAddress: hyperdrive.address,
+    });
+    return !!rewardConfigs?.length;
+  });
+
   return (
     <div className="flex flex-col gap-6">
       <PositionTableHeading
@@ -91,6 +102,7 @@ export function OpenLpTableDesktop({
           hyperdrives[0].name.replace(/\d{1,3}d/, "")
         }
       />
+      {poolHasRewards ? <PoolHasRewardsBanner /> : null}
       <div className="daisy-card overflow-x-clip rounded-box bg-gray-750 pt-3">
         <table className="daisy-table daisy-table-lg">
           <thead>

apps/hyperdrive-trading/src/ui/portfolio/rewards/PoolHasRewardsBanner.tsx

@@ -0,0 +1,22 @@
+import { Link } from "@tanstack/react-router";
+import { ReactElement, ReactNode } from "react";
+import { PORTFOLIO_ROUTE } from "src/ui/portfolio/routes";
+
+export function PoolHasRewardsBanner({
+  message = "You are earning rewards in this pool.",
+}: {
+  message?: ReactNode;
+}): ReactElement {
+  return (
+    <div className="flex items-center justify-between rounded-full bg-hypervue-pink/10 p-2 pl-8">
+      <span className="text-hypervue-pink">{message}</span>
+      <Link
+        to={PORTFOLIO_ROUTE}
+        className="daisy-btn daisy-btn-ghost daisy-btn-sm rounded-full"
+        search={(prev) => ({ ...prev, position: "rewards" })}
+      >
+        View rewards
+      </Link>
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx

@@ -1,6 +1,7 @@
 import {
   AppConfig,
   getBaseToken,
+  getOpenShortRewardConfigs,
   HyperdriveConfig,
 } from "@delvtech/hyperdrive-appconfig";
 import { OpenShort } from "@delvtech/hyperdrive-js";
@@ -24,6 +25,7 @@ import { StatusCell } from "src/ui/hyperdrive/longs/StatusCell";
 import { MaturesOnCell } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell";
 import { CloseShortModalButton } from "src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
+import { PoolHasRewardsBanner } from "src/ui/portfolio/rewards/PoolHasRewardsBanner";
 import { CurrentShortsValueCell } from "src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell";
 import { ManageShortButton } from "src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton";
 import { ShortRateAndSizeCell } from "src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell";
@@ -61,6 +63,14 @@ export function OpenShortsTableDesktop({
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
   });
+  const poolHasRewards = hyperdrives.some((hyperdrive) => {
+    const rewardConfigs = getOpenShortRewardConfigs({
+      appConfig,
+      chainId: hyperdrive.chainId,
+      hyperdriveAddress: hyperdrive.address,
+    });
+    return !!rewardConfigs?.length;
+  });
 
   if (!account) {
     return (
@@ -97,6 +107,7 @@ export function OpenShortsTableDesktop({
           hyperdrives[0].name.replace(/\d{1,3}d/, "")
         }
       />
+      {poolHasRewards ? <PoolHasRewardsBanner /> : null}
       <div className="daisy-card overflow-x-clip rounded-box bg-gray-750 pt-3">
         {/* Modal needs to be rendered outside of the table so that dialog can be used. Otherwise react throws a dom nesting error */}
         {tableInstance.getRowModel().rows.map((row) => {

apps/hyperdrive-trading/src/ui/rewards/MilesBanner.tsx

@@ -19,11 +19,9 @@ export function MilesBanner(): ReactElement | null {
           <div className="flex w-full justify-between">
             <div className="flex w-full flex-1 items-center justify-center gap-4">
               <img src={HyperVueMilesIconUrl} className="size-8 rounded-full" />
-              <span className="drop-shadow-glow">
-                You can now earn Miles by{" "}
-                <strong className="">providing liquidity</strong> or{" "}
-                <strong className="">opening a short</strong>! Learn more about
-                the{" "}
+              <span>
+                You can now earn Miles by <strong>providing liquidity</strong>{" "}
+                or <strong>opening a short</strong>! Learn more about the{" "}
                 <ExternalLink
                   newTab
                   href="https://mirror.xyz/0xdB081d7cedeDB2cFb4fff2330D9a31f54A025E38/qVENDIYTfUiZw6QZroXBpNxF8UjTGV8YkVq0lOaTznU"