Wire up rewards claim button

apps/hyperdrive-trading/src/chains/isForkChain.ts

@@ -1,12 +1,13 @@
 import { cloudChain } from "src/chains/cloudChain";
 import { gnosisFork } from "src/chains/gnosisFork";
+import { rewardsFork } from "src/chains/rewardsFork";
 
 /**
  * Checks if the given chain ID corresponds to a fork chain.
  * @param chainId - The chain ID to check.
  * @returns True if the chain ID corresponds to a fork chain, false otherwise.
  */
 export function isForkChain(chainId: number): boolean {
-  const forkChainIds = [cloudChain.id, gnosisFork.id];
+  const forkChainIds = [cloudChain.id, gnosisFork.id, rewardsFork.id];
   return forkChainIds.includes(chainId);
 }

apps/hyperdrive-trading/src/chains/rewardsFork.ts

@@ -0,0 +1,18 @@
+import { Chain } from "viem";
+
+const { VITE_REWARDS_FORK_NODE_RPC_URL, VITE_REWARDS_FORK_CHAIN_ID } =
+  import.meta.env;
+
+export const rewardsFork: Chain = {
+  id: +VITE_REWARDS_FORK_CHAIN_ID,
+  name: "RewardsFork",
+  nativeCurrency: {
+    decimals: 18,
+    name: "Ether",
+    symbol: "ETH",
+  },
+  rpcUrls: {
+    public: { http: [VITE_REWARDS_FORK_NODE_RPC_URL] },
+    default: { http: [VITE_REWARDS_FORK_NODE_RPC_URL] },
+  },
+};

apps/hyperdrive-trading/src/network/wagmiClient.ts

@@ -8,6 +8,7 @@
 } from "@rainbow-me/rainbowkit/wallets";
 import { cloudChain } from "src/chains/cloudChain";
 import { gnosisFork } from "src/chains/gnosisFork";
+import { rewardsFork } from "src/chains/rewardsFork";
 import { CreateWalletFn } from "src/wallets/CreateWalletFn";
 import { capsuleWallet } from "src/wallets/capsule";
 import { Chain, http, Transport } from "viem";
@@ -17,6 +18,8 @@
   VITE_LOCALHOST_NODE_RPC_URL,
   VITE_CUSTOM_CHAIN_NODE_RPC_URL,
   VITE_CUSTOM_CHAIN_CHAIN_ID,
+  VITE_REWARDS_FORK_NODE_RPC_URL,
+  VITE_REWARDS_FORK_CHAIN_ID,
   VITE_WALLET_CONNECT_PROJECT_ID,
   VITE_SEPOLIA_RPC_URL,
   VITE_MAINNET_RPC_URL,
@@ -54,46 +57,56 @@
 *   }
 */
 
-const chainConfigs: Record<string, WagmiClientConfig> = {
-  // mainnet chains
-  mainnet: {
-    rpcUrl: VITE_MAINNET_RPC_URL,
-    chain: mainnet,
-    wallets: [capsuleWallet],
-  },
-  gnosis: {
-    rpcUrl: VITE_GNOSIS_NODE_RPC_URL,
-    chain: gnosis,
-  },
-  linea: {
-    rpcUrl: VITE_LINEA_RPC_URL,
-    chain: linea,
-  },
-  base: {
-    rpcUrl: VITE_BASE_RPC_URL,
-    chain: base,
-  },
-  // testnet chains
-  foundry: {
-    rpcUrl: VITE_LOCALHOST_NODE_RPC_URL,
-    chain: foundry,
-  },
-  gnosisFork: {
-    rpcUrl: VITE_GNOSIS_FORK_NODE_RPC_URL,
-    chain: gnosisFork,
-    chainId: VITE_GNOSIS_FORK_CHAIN_ID,
-  },
-  cloudChain: {
-    rpcUrl: VITE_CUSTOM_CHAIN_NODE_RPC_URL,
-    chain: cloudChain,
-    chainId: VITE_CUSTOM_CHAIN_CHAIN_ID,
-  },
-  sepolia: {
-    rpcUrl: VITE_SEPOLIA_RPC_URL,
-    chain: sepolia,
-    wallets: [capsuleWallet],
-  },
-};
+const chainConfigs: Record<string, WagmiClientConfig> = Object.fromEntries(
+  Object.entries({
+    // mainnet chains
+    mainnet: {
+      rpcUrl: VITE_MAINNET_RPC_URL,
+      chain: mainnet,
+      wallets: [capsuleWallet],
+    },
+    gnosis: {
+      rpcUrl: VITE_GNOSIS_NODE_RPC_URL,
+      chain: gnosis,
+    },
+    linea: {
+      rpcUrl: VITE_LINEA_RPC_URL,
+      chain: linea,
+    },
+    base: {
+      rpcUrl: VITE_BASE_RPC_URL,
+      chain: base,
+    },
+    // testnet chains
+    foundry: {
+      rpcUrl: VITE_LOCALHOST_NODE_RPC_URL,
+      chain: foundry,
+    },
+    gnosisFork: {
+      rpcUrl: VITE_GNOSIS_FORK_NODE_RPC_URL,
+      chain: gnosisFork,
+      chainId: VITE_GNOSIS_FORK_CHAIN_ID,
+    },
+    cloudChain: {
+      rpcUrl: VITE_CUSTOM_CHAIN_NODE_RPC_URL,
+      chain: cloudChain,
+      chainId: VITE_CUSTOM_CHAIN_CHAIN_ID,
+    },
+    rewardsFork: {
+      rpcUrl: VITE_REWARDS_FORK_NODE_RPC_URL,
+      chain: rewardsFork,
+      chainId: VITE_REWARDS_FORK_CHAIN_ID,
+    },
+    sepolia: {
+      rpcUrl: VITE_SEPOLIA_RPC_URL,
+      chain: sepolia,
+      wallets: [capsuleWallet],
+    },
+  }).filter(
+    // Remove configs that don't have a proper RPC URL defined in the .env
+    ([_, config]) => config.rpcUrl !== undefined,
+  ),
+);
 
 const chains: Chain[] = [];
 const transports: Record<string, Transport> = {};

apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts

@@ -111,7 +111,6 @@ export function usePortfolioLongsDataFromHyperdrives({
                     }),
                   })),
                 );
-                console.log("openLongs", openLongs);
 
                 return openLongs;
               }),

apps/hyperdrive-trading/src/ui/portfolio/queryKeys.ts

@@ -14,9 +14,6 @@ interface PortfolioQueryKeys {
       | (OpenLongPositionReceived & { hyperdrive: HyperdriveConfig })[]
       | undefined;
   };
-  unclaimedRewards: {
-    account: Address | undefined;
-  };
   openShortPositions: {
     account: Address | undefined;
     hyperdrives: HyperdriveConfig[];

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

@@ -8,16 +8,23 @@ import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PortfolioTableHeading } from "src/ui/portfolio/PortfolioTableHeading";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
 import { RewardsTableDesktop } from "src/ui/portfolio/rewards/RewardsTableDesktop";
-import { usePortfolioRewardsData } from "src/ui/portfolio/rewards/useRewardsData";
+import { useClaimableRewards } from "src/ui/rewards/hooks/useClaimableRewards";
 import { Address } from "viem";
 
 export function RewardsContainer({
   account,
 }: {
   account: Address | undefined;
 }): ReactElement {
-  const { rewards, rewardsStatus } = usePortfolioRewardsData({ account });
-  const appConfig = useAppConfigForConnectedChain({ strict: false });
+  const { rewards, rewardsStatus } = useClaimableRewards({ account });
+
+  const appConfig = useAppConfigForConnectedChain({
+    // Set this to false so that we can reference mainnet token configs from the
+    // rewards endpoint on a mainnet fork. This `strict` flag can be removed
+    // once we're live.
+    strict: false,
+  });
+
   if (!account) {
     return <NoWalletConnected />;
   }

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

@@ -10,11 +10,16 @@ import {
 } from "@tanstack/react-table";
 import classNames from "classnames";
 import { ReactElement } from "react";
+import Skeleton from "react-loading-skeleton";
 import { Reward } from "src/rewards/generated/RewardsClient";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { Pagination } from "src/ui/base/components/Pagination";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { useClaimReward } from "src/ui/rewards/hooks/useClaimReward";
+import { useClaimedRewards } from "src/ui/rewards/hooks/useClaimedRewards";
 import { Address } from "viem";
+import { useChainId } from "wagmi";
 
 export function RewardsTableDesktop({
   account,
@@ -25,7 +30,7 @@ export function RewardsTableDesktop({
 }): ReactElement {
   const appConfig = useAppConfigForConnectedChain({ strict: false });
   const tableInstance = useReactTable({
-    columns: getColumns(appConfig),
+    columns: getColumns({ account, appConfig }),
     data: rewards || [],
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -85,7 +90,7 @@ export function RewardsTableDesktop({
             const isLastRow =
               index === tableInstance.getRowModel().rows.length - 1;
             return (
-              <tr key={row.id} className="h-32 !border-b-0 font-dmMono">
+              <tr key={row.id} className="h-32 !border-b-0">
                 {row.getVisibleCells().map((cell, cellIndex) => (
                   <td
                     className={classNames(
@@ -134,11 +139,18 @@ export function RewardsTableDesktop({
 
 const columnHelper = createColumnHelper<Reward>();
 
-function getColumns(appConfig: AppConfig) {
+function getColumns({
+  account,
+  appConfig,
+}: {
+  account: Address | undefined;
+  appConfig: AppConfig;
+}) {
   return [
     columnHelper.display({
       id: "asset",
       header: "Asset",
+      size: 200,
       cell: ({ row }) => {
         const token = getToken({
           appConfig,
@@ -156,35 +168,124 @@ function getColumns(appConfig: AppConfig) {
     columnHelper.display({
       id: "claimable",
       header: "Claimable",
+      size: 200,
       cell: ({ row }) => {
-        const token = getToken({
-          appConfig,
-          chainId: row.original.chainId,
-          tokenAddress: row.original.rewardTokenAddress,
-        })!;
-        return (
-          <div className="flex flex-col">
-            <span className="flex font-dmMono text-neutral-content">
-              {formatBalance({
-                balance: BigInt(row.original.claimableAmount) || 0n,
-                decimals: token.decimals,
-                places: token.places,
-              })}{" "}
-              {token.symbol}
-            </span>
-          </div>
-        );
+        return <ClaimableAmount account={account} reward={row.original} />;
       },
     }),
     columnHelper.display({
       id: "claim",
+      size: 200,
+      header: "Actions",
       cell: ({ row }) => {
-        return (
-          <button className="daisy-btn daisy-btn-ghost rounded-full bg-gray-600 font-inter hover:bg-gray-700">
-            Claim Rewards
-          </button>
-        );
+        return <ClaimRewardsButton account={account} reward={row.original} />;
       },
     }),
   ];
 }
+function ClaimRewardsButton({
+  account,
+  reward,
+}: {
+  account: Address | undefined;
+  reward: Reward;
+}): ReactElement {
+  const connectedChainId = useChainId();
+  const { claimed } = useClaimedRewards({
+    rewardTokenAddress: reward.rewardTokenAddress,
+    claimContractAddress: reward.claimContractAddress,
+    account,
+  });
+  const appConfig = useAppConfigForConnectedChain({ strict: false });
+
+  const { claim, pendingWalletSignatureStatus, isTransactionMined } =
+    useClaimReward({
+      account,
+      reward,
+    });
+
+  if (connectedChainId !== reward.chainId) {
+    return (
+      <SwitchNetworksButton
+        wide={false}
+        targetChainId={reward.chainId}
+        targetChainName={appConfig.chains[reward.chainId].name}
+      />
+    );
+  }
+
+  // If the reward is already claimed, disable the button
+  if (BigInt(reward.claimableAmount) === claimed) {
+    return (
+      <button
+        disabled
+        className="daisy-btn daisy-btn-disabled daisy-btn-ghost rounded-full bg-gray-600 font-inter"
+      >
+        Claim Reward
+      </button>
+    );
+  }
+
+  // If the tx is pending a signature or is still being mined, disable the button
+  if (
+    pendingWalletSignatureStatus === "loading" ||
+    (pendingWalletSignatureStatus === "success" && !isTransactionMined)
+  ) {
+    return (
+      <button
+        disabled
+        className="daisy-btn daisy-btn-disabled daisy-btn-ghost rounded-full bg-gray-600 font-inter"
+      >
+        Claiming...
+      </button>
+    );
+  }
+
+  return (
+    <button
+      className={classNames(
+        "daisy-btn daisy-btn-ghost rounded-full bg-gray-600 font-inter hover:bg-gray-700",
+      )}
+      onClick={claim}
+    >
+      Claim Reward
+    </button>
+  );
+}
+
+function ClaimableAmount({
+  account,
+  reward,
+}: {
+  account: Address | undefined;
+  reward: Reward;
+}): ReactElement {
+  const appConfig = useAppConfigForConnectedChain({ strict: false });
+  const token = getToken({
+    appConfig,
+    chainId: reward.chainId,
+    tokenAddress: reward.rewardTokenAddress,
+  })!;
+
+  const { claimed, status } = useClaimedRewards({
+    rewardTokenAddress: reward.rewardTokenAddress,
+    claimContractAddress: reward.claimContractAddress,
+    account,
+  });
+
+  return (
+    <div className="flex flex-col">
+      <span className="flex font-dmMono text-neutral-content">
+        {status === "loading" ? (
+          <Skeleton className="w-24" />
+        ) : (
+          `${formatBalance({
+            balance: BigInt(reward.claimableAmount) - (claimed || 0n)!,
+            decimals: token.decimals,
+            places: token.places,
+          })} ${token.symbol}`
+        )}
+      </span>
+    </div>
+  );
+}