Integrate Merkl.xyz for displaying miles

apps/hyperdrive-trading/package.json

@@ -26,7 +26,7 @@
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "gen:version": "bash ./scripts/generate-version.sh",
     "gen:walletconnect": "bash ./scripts/generate-walletconnect.sh",
-    "gen:rewards-swagger": "bash ./scripts/generate-rewards-swagger.sh"
+    "gen:swagger": "bash ./scripts/generate-swagger.sh"
   },
   "dependencies": {
     "@delvtech/drift": "^0.0.1-beta.11",
@@ -47,6 +47,7 @@
     "@types/d3-format": "^3.0.4",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.sortby": "^4.7.9",
+    "@merkl/api": "^0.10.412",
     "@types/lodash.uniqby": "^4.7.9",
     "@uniswap/token-lists": "^1.0.0-beta.34",
     "@uniswap/v3-sdk": "^3.19.0",

apps/hyperdrive-trading/scripts/generate-swagger.sh

@@ -0,0 +1,44 @@
+#!/bin/bash
+
+# Function to generate Swagger client
+generate_swagger_client() {
+    local url="$1"
+    local output_dir="$2"
+    local swagger_filename="$3"  
+    local api_class_name="$4"
+    local custom_config="$5"
+
+    local swagger_file="$output_dir/$swagger_filename"
+    local types_file="$api_class_name.ts"
+
+    # Create the directory if it doesn't exist
+    mkdir -p "$output_dir"
+
+    # Download the file
+    curl -o "$swagger_file" "$url"
+
+    # Check if the download was successful
+    if [ $? -eq 0 ]; then
+        echo "File downloaded successfully and saved to $swagger_file"
+    else
+        echo "Failed to download the file from $url"
+        exit 1
+    fi
+
+    # Generate TypeScript API client
+    npx swagger-typescript-api \
+      -p "$swagger_file" \
+      -o "$output_dir" \
+      -n "$types_file" \
+      --api-class-name "$api_class_name" \
+      --custom-config "$custom_config" \
+      --unwrap-response-data
+}
+
+# Call the function with different inputs
+generate_swagger_client "https://rewards.hyperdrive.box/swagger.json" "src/rewards/generated" "swagger.json" "HyperdriveRewardsApi" "src/rewards/config.js"
+
+# Merkl has a swagger spec, but it fails validation and therefore cannot be used
+# at the moment. We've reached out to them and maybe able to enable this once
+# it's fixed. In this event, we can remove the @merkl/api package 
+# generate_swagger_client "https://api.merkl.xyz/docs/json" "src/rewards/generated/merkl" "swagger.json" "MerklApi" "src/rewards/config.js"

apps/hyperdrive-trading/src/rewards/config.js

@@ -7,7 +7,7 @@ module.exports = {
       TypeField: ({ key, value, readonly, optional }) => {
         let fieldValue = value;
         // Convert vanilla string to the appropriate address type
-        if (key.endsWith("Address")) {
+        if (key.toLowerCase().endsWith("address")) {
           fieldValue = "`0x${string}`";
         }
 

apps/hyperdrive-trading/src/rewards/generated/RewardsClient.ts → apps/hyperdrive-trading/src/rewards/generated/HyperdriveRewardsApi.ts

@@ -301,7 +301,7 @@ export class HttpClient<SecurityDataType = unknown> {
  *
  * API documentation for Hyperdrive Rewards
  */
-export class RewardsApi<
+export class HyperdriveRewardsApi<
   SecurityDataType extends unknown,
 > extends HttpClient<SecurityDataType> {
   get = {

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

@@ -11,7 +11,7 @@ import {
 import classNames from "classnames";
 import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
-import { Reward } from "src/rewards/generated/RewardsClient";
+import { Reward } from "src/rewards/generated/HyperdriveRewardsApi";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { Pagination } from "src/ui/base/components/Pagination";
 import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";

apps/hyperdrive-trading/src/ui/rewards/hooks/useClaimReward.tsx

@@ -8,7 +8,7 @@ import { getToken } from "@delvtech/hyperdrive-appconfig";
 import { hyperdriveRewardsAbi } from "@delvtech/hyperdrive-js";
 import { useCallback, useState } from "react";
 import { QueryStatusWithIdle } from "src/base/queryStatus";
-import { Reward } from "src/rewards/generated/RewardsClient";
+import { Reward } from "src/rewards/generated/HyperdriveRewardsApi";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { SUCCESS_TOAST_DURATION } from "src/ui/base/toasts";
 import TransactionToast from "src/ui/transactions/TransactionToast";

apps/hyperdrive-trading/src/ui/rewards/hooks/useClaimableRewards.ts

@@ -1,7 +1,13 @@
+import { MerklApi } from "@merkl/api";
 import { useQuery } from "@tanstack/react-query";
 import { makeQueryKey2 } from "src/base/makeQueryKey";
-import { Reward, RewardsApi } from "src/rewards/generated/RewardsClient";
-import { Address } from "viem";
+import {
+  HyperdriveRewardsApi,
+  Reward,
+} from "src/rewards/generated/HyperdriveRewardsApi";
+import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
+import { Address, Hash } from "viem";
+import { base, gnosis, linea, mainnet } from "viem/chains";
 import { usePublicClient } from "wagmi";
 
 export function useClaimableRewards({
@@ -14,31 +20,22 @@ export function useClaimableRewards({
 } {
   const publicClient = usePublicClient();
   const queryEnabled = !!account && !!publicClient;
+  const appConfig = useAppConfigForConnectedChain();
+  const chainIds = Object.keys(appConfig.chains).map(Number);
   const { data: rewards, status: rewardsStatus } = useQuery({
     queryKey: makeQueryKey2({
       namespace: "rewards",
       queryId: "unclaimedRewards",
-      params: { account },
+      params: { account, chainIds },
     }),
     enabled: queryEnabled,
     queryFn: queryEnabled
       ? async () => {
-          const rewardsApi = new RewardsApi({
-            baseUrl: import.meta.env.VITE_REWARDS_BASE_URL,
-          });
-
-          try {
-            const response = await rewardsApi.get.rewardsStubDetail(account);
-            return response.rewards;
-          } catch (error: any) {
-            // This throws a 404 if the account does not have any rewards, which
-            // is fine, just return an empty array and display no rewards
-            if (error.error.error === "No rewards found for this address") {
-              return [];
-            }
-            // There are no other well-known errors we can catch, so re-throw
-            throw error;
-          }
+          const hyperdriveRewards = await fetchHyperdriveRewardApi(account);
+          // TODO: Add mile rewards
+          // const mileRewards = await fetchMileRewards(account, chainIds);
+          const allRewards = [...hyperdriveRewards];
+          return allRewards;
         }
       : undefined,
   });
@@ -48,3 +45,89 @@ export function useClaimableRewards({
     rewardsStatus,
   };
 }
+/**
+ * Rewards that come from the Hyperdrive Rewards API server. This server also
+ * defines the shape used for rewards everywhere else in the app.
+ */
+async function fetchHyperdriveRewardApi(account: Address): Promise<Reward[]> {
+  const rewardsApi = new HyperdriveRewardsApi({
+    baseUrl: import.meta.env.VITE_REWARDS_BASE_URL,
+  });
+
+  try {
+    const response = await rewardsApi.get.rewardsStubDetail(account);
+    return response.rewards;
+  } catch (error: any) {
+    // This throws a 404 if the account does not have any rewards, which
+    // is fine, just return an empty array and display no rewards
+    if (error.error.error === "No rewards found for this address") {
+      return [];
+    }
+    // There are no other well-known errors we can catch, so re-throw
+    throw error;
+  }
+}
+/**
+ *
+ * Rewards that come from the Merkl.xyz API server. This server
+ * @param account
+ */
+const merkl = MerklApi("https://api.merkl.xyz").v4;
+
+/**
+ * Merkl Distributor is the contract that you can claim rewards from in the
+ * Merkl.xyz ecosystem.
+ * See: https://app.merkl.xyz/status
+ */
+const MerklDistributorsByChain: Record<number, Address> = {
+  [mainnet.id]: "0x3Ef3D8bA38EBe18DB133cEc108f4D14CE00Dd9Ae",
+  [gnosis.id]: "0x3Ef3D8bA38EBe18DB133cEc108f4D14CE00Dd9Ae",
+  [base.id]: "0x3Ef3D8bA38EBe18DB133cEc108f4D14CE00Dd9Ae",
+  [linea.id]: "0x3Ef3D8bA38EBe18DB133cEc108f4D14CE00Dd9Ae",
+};
+
+async function fetchMileRewards(
+  account: Address,
+  chainIds: number[],
+): Promise<Reward[]> {
+  // Request miles earned on each chain. We have to call this once per chain
+  // since the merkl api is buggy, despite accepting an array of chain ids. If
+  // this gets fixed, we can remove the Promise.all and simplify this logic.
+  const mileRewards = (
+    await Promise.all(
+      chainIds.map(async (chainId) => {
+        const { data } = await merkl
+          .users({
+            address: account,
+          })
+          .rewards.get({
+            query: {
+              chainId: [chainId],
+            },
+          });
+
+        return { data, chainId };
+      }),
+    )
+  )
+    .filter(({ data }) => data?.length)
+    .map(({ data, chainId }) => {
+      // since we only use a single chain id, we can just grab the first data item
+      const rewards = data![0].rewards.find(
+        (d) => d.token.symbol === "Miles" && !!Number(d.pending),
+      );
+      return {
+        chainId,
+        merkleProof: rewards?.proofs as Hash[],
+        claimableAmount: rewards?.amount.toString() || "0",
+        pendingAmount: rewards?.pending.toString() || "0",
+        merkleProofLastUpdated: 0,
+        rewardTokenAddress: rewards?.token.address as `0x${string}`,
+        // TODO: This won't use the same abi as the hyperdrive rewards api, so
+        // we'll need to account for this somehow
+        claimContractAddress: MerklDistributorsByChain[chainId],
+      };
+    })
+    .flat();
+  return mileRewards;
+}

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

@@ -23,6 +23,7 @@ interface RewardsQueryKeys {
    */
   unclaimedRewards: {
     account: Address | undefined;
+    chainIds: number[];
   };
 
   // TODO: We may not need these as these queries are just list wrappers around