Regenerate swagger with required types, update UI

delvtech · Dec 11, 2024 · 495ca9d · 495ca9d
1 parent 0fe1d78
commit 495ca9d
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 92 deletions.
diff --git a/apps/hyperdrive-trading/package.json b/apps/hyperdrive-trading/package.json
@@ -42,7 +42,7 @@
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-router": "^1.87.7",
     "@tanstack/router-devtools": "^1.87.7",
-    "@tanstack/react-table": "^8.10.3",
+    "@tanstack/react-table": "^8.20.5",
     "@tanstack/query-core": "^4.36.1",
     "@types/d3-format": "^3.0.4",
     "@types/lodash.sortby": "^4.7.9",

diff --git a/apps/hyperdrive-trading/src/rewards/config.js b/apps/hyperdrive-trading/src/rewards/config.js
@@ -7,13 +7,7 @@ module.exports = {
       TypeField: ({ key, value, readonly, optional }) => {
         let fieldValue = value;
         // Convert vanilla string to the appropriate address type
-        // NOTE: Matt will standardize all address fields in swagger.json to use
-        // the -Address suffix
-        if (
-          key.endsWith("Address") ||
-          key.endsWith("Contract") ||
-          key.endsWith("Token")
-        ) {
+        if (key.endsWith("Address")) {
           fieldValue = "`0x${string}`";
         }
 

diff --git a/apps/hyperdrive-trading/src/rewards/generated/RewardsClient.ts b/apps/hyperdrive-trading/src/rewards/generated/RewardsClient.ts
@@ -14,35 +14,37 @@ export interface RewardsResponse {
    * The user's blockchain address.
    * @example "0x1234567890abcdef1234567890abcdef12345678"
    */
-  userAddress?: `0x${string}`;
-  rewards?: {
-    /** @example 1 */
-    chainId?: number;
-    /**
-     * Address of the claim contract.
-     * @example "0x0000000000000000000000000000000000000000"
-     */
-    claimContract?: `0x${string}`;
-    /**
-     * Amount of tokens claimable.
-     * @example "1000000000000000000"
-     */
-    claimable?: string;
-    /**
-     * Token address of the reward.
-     * @example "0xBAa5CC21fd487B8Fcc2F632f3F4E8D37262a0842"
-     */
-    rewardToken?: `0x${string}`;
-    /** @example ["0xProof1","0xProof2","0xProof3"] */
-    merkleProof?: `0x${string}`[];
-    /**
-     * Timestamp of the last merkle proof update.
-     * @example 123892327
-     */
-    merkleProofLastUpdated?: number;
-  }[];
+  userAddress: `0x${string}`;
+  rewards: Rewards;
 }
 
+export type Rewards = {
+  /** @example 1 */
+  chainId: number;
+  /**
+   * Address of the claim contract.
+   * @example "0x0000000000000000000000000000000000000000"
+   */
+  claimContractAddress: `0x${string}`;
+  /**
+   * Amount of tokens claimable.
+   * @example "1000000000000000000"
+   */
+  claimable: string;
+  /**
+   * Token address of the reward.
+   * @example "0xBAa5CC21fd487B8Fcc2F632f3F4E8D37262a0842"
+   */
+  rewardTokenAddress: `0x${string}`;
+  /** @example ["0xProof1","0xProof2","0xProof3"] */
+  merkleProof: `0x${string}`[];
+  /**
+   * Timestamp of the last merkle proof update.
+   * @example 123892327
+   */
+  merkleProofLastUpdated: number;
+}[];
+
 export type QueryParamsType = Record<string | number, any>;
 export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
 

diff --git a/apps/hyperdrive-trading/src/rewards/generated/rewards-swagger.json b/apps/hyperdrive-trading/src/rewards/generated/rewards-swagger.json
@@ -16,41 +16,51 @@
             "description": "The user's blockchain address.",
             "example": "0x1234567890abcdef1234567890abcdef12345678"
           },
-          "rewards": {
-            "type": "array",
-            "items": {
-              "type": "object",
-              "properties": {
-                "chainId": { "type": "integer", "example": 1 },
-                "claimContract": {
-                  "type": "string",
-                  "description": "Address of the claim contract.",
-                  "example": "0x0000000000000000000000000000000000000000"
-                },
-                "claimable": {
-                  "type": "string",
-                  "description": "Amount of tokens claimable.",
-                  "example": "1000000000000000000"
-                },
-                "rewardToken": {
-                  "type": "string",
-                  "description": "Token address of the reward.",
-                  "example": "0xBAa5CC21fd487B8Fcc2F632f3F4E8D37262a0842"
-                },
-                "merkleProof": {
-                  "type": "array",
-                  "items": { "type": "string" },
-                  "nullable": true,
-                  "example": ["0xProof1", "0xProof2", "0xProof3"]
-                },
-                "merkleProofLastUpdated": {
-                  "type": "integer",
-                  "description": "Timestamp of the last merkle proof update.",
-                  "example": 123892327
-                }
-              }
+          "rewards": { "$ref": "#/components/schemas/Rewards" }
+        },
+        "required": ["userAddress", "rewards"]
+      },
+      "Rewards": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "chainId": { "type": "integer", "example": 1 },
+            "claimContractAddress": {
+              "type": "string",
+              "description": "Address of the claim contract.",
+              "example": "0x0000000000000000000000000000000000000000"
+            },
+            "claimable": {
+              "type": "string",
+              "description": "Amount of tokens claimable.",
+              "example": "1000000000000000000"
+            },
+            "rewardTokenAddress": {
+              "type": "string",
+              "description": "Token address of the reward.",
+              "example": "0xBAa5CC21fd487B8Fcc2F632f3F4E8D37262a0842"
+            },
+            "merkleProof": {
+              "type": "array",
+              "items": { "type": "string" },
+              "nullable": true,
+              "example": ["0xProof1", "0xProof2", "0xProof3"]
+            },
+            "merkleProofLastUpdated": {
+              "type": "integer",
+              "description": "Timestamp of the last merkle proof update.",
+              "example": 123892327
             }
-          }
+          },
+          "required": [
+            "chainId",
+            "claimContractAddress",
+            "claimable",
+            "rewardTokenAddress",
+            "merkleProof",
+            "merkleProofLastUpdated"
+          ]
         }
       }
     }

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx
@@ -63,7 +63,9 @@ export function RewardsContainer(): ReactElement {
     );
   }
 
-  const rewardsByChain = groupBy(rewards, (reward) => reward.chainId);
+  const rewardsByChain = rewards
+    ? groupBy(rewards, (reward) => reward.chainId)
+    : [];
 
   return (
     <PositionContainer className="mt-10">

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsTableDesktop.tsx
@@ -10,7 +10,7 @@ import {
 } from "@tanstack/react-table";
 import classNames from "classnames";
 import { ReactElement } from "react";
-import { RewardsResponse } from "src/rewards/generated/RewardsClient";
+import { Rewards } from "src/rewards/generated/RewardsClient";
 import { Pagination } from "src/ui/base/components/Pagination";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { Address } from "viem";
@@ -20,11 +20,11 @@ export function RewardsTableDesktop({
   rewards,
 }: {
   account: Address;
-  rewards: RewardsResponse | undefined;
+  rewards: Rewards;
 }): ReactElement {
   const tableInstance = useReactTable({
     columns: getColumns(),
-    data: rewards?.rewards || [],
+    data: rewards || [],
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -130,7 +130,9 @@ export function RewardsTableDesktop({
   );
 }
 
-const columnHelper = createColumnHelper<RewardsResponse["rewards"]>();
+// TODO: Remove this type once the swagger is defined properly
+type Reward = NonNullable<Rewards[number]>;
+const columnHelper = createColumnHelper<Reward>();
 
 function getColumns() {
   return [
@@ -141,7 +143,7 @@ function getColumns() {
         const token = getToken({
           appConfig,
           chainId: row.original.chainId,
-          tokenAddress: row.original.rewardToken,
+          tokenAddress: row.original.rewardTokenAddress,
         })!;
         return (
           <div className="flex items-center gap-2 font-inter">
@@ -158,13 +160,13 @@ function getColumns() {
         const token = getToken({
           appConfig,
           chainId: row.original.chainId,
-          tokenAddress: row.original.rewardToken,
+          tokenAddress: row.original.rewardTokenAddress,
         })!;
         return (
           <div className="flex flex-col">
             <span className="flex font-dmMono text-neutral-content">
               {formatBalance({
-                balance: row.original.claimable || 0n,
+                balance: BigInt(row.original.claimable) || 0n,
                 decimals: token.decimals,
                 places: token.places,
               })}{" "}

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/rewards/useRewardsData.ts b/apps/hyperdrive-trading/src/ui/portfolio/rewards/useRewardsData.ts
@@ -1,17 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
 import { makeQueryKey } from "src/base/makeQueryKey";
-import {
-  RewardsApi,
-  RewardsResponse,
-} from "src/rewards/generated/RewardsClient";
+import { Rewards, RewardsApi } from "src/rewards/generated/RewardsClient";
 import { Address } from "viem";
 
 export function usePortfolioRewardsData({
   account,
 }: {
   account: Address | undefined;
 }): {
-  rewards: RewardsResponse | undefined;
+  rewards: Rewards | undefined;
   rewardsStatus: "error" | "success" | "loading";
 } {
   const queryEnabled = !!account;
@@ -22,7 +19,8 @@ export function usePortfolioRewardsData({
           const rewardsApi = new RewardsApi({
             baseUrl: import.meta.env.VITE_REWARDS_BASE_URL,
           });
-          return rewardsApi.get.rewardsDetail(account);
+          const response = await rewardsApi.get.rewardsDetail(account);
+          return response.rewards;
         }
       : undefined,
     enabled: queryEnabled,

diff --git a/yarn.lock b/yarn.lock
@@ -4617,12 +4617,12 @@
     "@tanstack/store" "0.6.0"
     use-sync-external-store "^1.2.2"
 
-"@tanstack/react-table@^8.10.3":
-  version "8.15.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.15.0.tgz#668ceb9f396d33409165d5b9bee7734b657061c6"
-  integrity sha512-8K4RSROUtXUtfiezV6Ehl8z99axFrkQnxXi0vjWBJv3Tsm5x4EyrgXI7d2tOOMoANykKZLB6S1sGZGemoMRt7Q==
+"@tanstack/react-table@^8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.20.5.tgz#19987d101e1ea25ef5406dce4352cab3932449d8"
+  integrity sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==
   dependencies:
-    "@tanstack/table-core" "8.14.0"
+    "@tanstack/table-core" "8.20.5"
 
 "@tanstack/react-virtual@^3.8.1":
   version "3.10.7"
@@ -4685,10 +4685,10 @@
   resolved "https://registry.yarnpkg.com/@tanstack/store/-/store-0.6.0.tgz#f73d711c6e53f2f91c0f0af0771583095d449f67"
   integrity sha512-+m2OBglsjXcLmmKOX6/9v8BDOCtyxhMmZLsRUDswOOSdIIR9mvv6i0XNKsmTh3AlYU8c1mRcodC8/Vyf+69VlQ==
 
-"@tanstack/table-core@8.14.0":
-  version "8.14.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.14.0.tgz#4c9fe8b74949bb0ffe4ac8b1937beaff1f3a19de"
-  integrity sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==
+"@tanstack/table-core@8.20.5":
+  version "8.20.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.20.5.tgz#3974f0b090bed11243d4107283824167a395cf1d"
+  integrity sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==
 
 "@tanstack/[email protected]":
   version "3.10.7"