Scaffold Rewards tab

apps/hyperdrive-trading/src/ui/portfolio/NoWalletConnected.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
+import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+
+export function NoWalletConnected(): ReactElement {
+  return (
+    <PositionContainer className="my-28">
+      <NonIdealState
+        heading="No wallet connected"
+        action={<ConnectWalletButton />}
+      />
+    </PositionContainer>
+  );
+}

apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx

@@ -4,6 +4,7 @@ import { Tabs } from "src/ui/base/components/Tabs/Tabs";
 import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 import { OpenLongsContainer } from "src/ui/portfolio/longs/LongsContainer";
 import { LpAndWithdrawalSharesContainer } from "src/ui/portfolio/lp/LpAndWithdrawalSharesContainer";
+import { RewardsContainer } from "src/ui/portfolio/rewards/RewardsContainer";
 import { PORTFOLIO_ROUTE } from "src/ui/portfolio/routes";
 import { OpenShortsContainer } from "src/ui/portfolio/shorts/ShortsContainer";
 
@@ -48,7 +49,7 @@ export function Portfolio(): ReactElement {
   if (isPortfolioRewardsFeatureFlagEnabled) {
     tabs.push({
       id: "rewards",
-      content: <></>,
+      content: <RewardsContainer />,
       label: "Rewards",
       onClick: () => {
         navigate({

apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx

@@ -4,13 +4,13 @@ import { ReactElement } from "react";
 import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
-import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
 import { OpenLongsTableDesktop } from "src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop";
 import { TotalOpenLongsValue } from "src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue";
 import {
   OpenLongPositionsData,
   usePortfolioLongsData,
 } from "src/ui/portfolio/longs/usePortfolioLongsData";
+import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { useAccount } from "wagmi";
@@ -20,14 +20,7 @@ export function OpenLongsContainer(): ReactElement {
   const { openLongPositions, openLongPositionsStatus } =
     usePortfolioLongsData();
   if (!account) {
-    return (
-      <PositionContainer className="my-28">
-        <NonIdealState
-          heading="No wallet connected"
-          action={<ConnectWalletButton />}
-        />
-      </PositionContainer>
-    );
+    return <NoWalletConnected />;
   }
 
   if (openLongPositionsStatus === "loading") {

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

@@ -4,10 +4,10 @@ import { ReactElement } from "react";
 import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
-import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
 import { OpenLpTableDesktop } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable";
 import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue";
 import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData";
+import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { useAccount } from "wagmi";
@@ -16,14 +16,7 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
   const { openLpPositions, openLpPositionStatus } = usePortfolioLpData();
   const { address: account } = useAccount();
   if (!account) {
-    return (
-      <PositionContainer className="my-28">
-        <NonIdealState
-          heading="No wallet connected"
-          action={<ConnectWalletButton />}
-        />
-      </PositionContainer>
-    );
+    return <NoWalletConnected />;
   }
 
   if (openLpPositionStatus === "loading") {

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

@@ -0,0 +1,63 @@
+import { Link } from "@tanstack/react-router";
+import { ReactElement } from "react";
+import LoadingState from "src/ui/base/components/LoadingState";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
+import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+import { useRewardsData } from "src/ui/portfolio/rewards/useRewardsData";
+import { useAccount } from "wagmi";
+
+export function RewardsContainer(): ReactElement {
+  const { address: account } = useAccount();
+  const { rewards, rewardsStatus } = useRewardsData({ account });
+
+  if (!account) {
+    return <NoWalletConnected />;
+  }
+
+  if (rewardsStatus === "loading") {
+    return (
+      <PositionContainer>
+        <LoadingState
+          heading="Loading your Rewards..."
+          text="Searching for Rewards, calculating current value..."
+        />
+      </PositionContainer>
+    );
+  }
+
+  if (rewardsStatus === "error") {
+    return (
+      <PositionContainer className="my-28">
+        <NonIdealState
+          heading="Error loading your Rewards"
+          text="Please refresh the page and try again."
+        />
+      </PositionContainer>
+    );
+  }
+
+  const hasClaimableRewards = rewards?.some((reward) => reward);
+
+  if (!hasClaimableRewards) {
+    return (
+      <PositionContainer className="my-28">
+        <NonIdealState
+          heading="No Rewards"
+          text={
+            <p className="max-w-xl">
+              Open a position in Hyperdrive to begin earning rewards.
+            </p>
+          }
+          action={
+            <Link className="daisy-btn daisy-btn-primary rounded-full" to="/">
+              View Pools
+            </Link>
+          }
+        />
+      </PositionContainer>
+    );
+  }
+
+  return <PositionContainer className="mt-10">TODO</PositionContainer>;
+}

apps/hyperdrive-trading/src/ui/portfolio/rewards/useRewardsData.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { Address } from "viem";
+
+export function useRewardsData({ account }: { account: Address | undefined }): {
+  rewards: unknown[] | undefined;
+  rewardsStatus: "error" | "success" | "loading";
+} {
+  const queryEnabled = !!account;
+  const { data: rewards, status: rewardsStatus } = useQuery({
+    queryKey: makeQueryKey("rewards", { account }),
+    queryFn: queryEnabled
+      ? async () => {
+          // TODO: Fetch rewards from server
+          return [];
+        }
+      : undefined,
+    enabled: queryEnabled,
+  });
+
+  return {
+    rewards,
+    rewardsStatus,
+  };
+}

apps/hyperdrive-trading/src/ui/portfolio/shorts/ShortsContainer.tsx

@@ -4,7 +4,7 @@ import { ReactElement } from "react";
 import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
-import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
+import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { OpenShortsTableDesktop } from "src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop";
@@ -20,14 +20,7 @@ export function OpenShortsContainer(): ReactElement {
     usePortfolioShortsData();
   const { address: account } = useAccount();
   if (!account) {
-    return (
-      <PositionContainer className="my-28">
-        <NonIdealState
-          heading="No wallet connected"
-          action={<ConnectWalletButton />}
-        />
-      </PositionContainer>
-    );
+    return <NoWalletConnected />;
   }
 
   if (openShortPositionsStatus === "loading") {