Fix bug in ReadHyperdrive.getClosedLpShares

apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx

@@ -84,12 +84,12 @@ export function TransactionTable({
 
   return (
     <div className="max-h-96 overflow-y-scroll">
-      <table className="daisy-table mt-5">
+      <table className="daisy-table-zebra daisy-table daisy-table-lg mt-2">
         <thead>
           {tableInstance.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th className="text-lg font-thin" key={header.id}>
+                <th key={header.id}>
                   {header.isPlaceholder ? null : (
                     <>
                       <div
@@ -115,7 +115,7 @@ export function TransactionTable({
                               key={filter}
                               className={`${
                                 header.column.getFilterValue() !== filter
-                                  ? "daisy-tab text-lg"
+                                  ? "daisy-tab text-lg font-normal"
                                   : "daisy-tab daisy-tab-active text-lg"
                               }`}
                               onClick={() =>
@@ -137,7 +137,7 @@ export function TransactionTable({
         <tbody>
           {tableInstance.getRowModel().rows.map((row) => (
             <tr
-              className="h-16 grid-cols-4 items-center text-sm even:bg-base-300/5 md:text-h6"
+              className="h-16 grid-cols-4 items-center text-sm md:text-h6"
               key={row.id}
             >
               {row.getVisibleCells().map((cell) => {

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

@@ -34,45 +34,47 @@ export function ClosedLpTable({
   if (closedLpShares) {
     rows.push(
       ...closedLpShares.map(
-        ({ lpAmount, baseAmount, closedTimestamp, withdrawalShareAmount }) => [
-          <span
-            key="type"
-            className="font-semibold uppercase italic text-primary"
-          >
-            LP
-          </span>,
-          <span key="shares" className="italic">
-            {formatBalance({
-              balance: lpAmount,
-              decimals: hyperdrive.baseToken.decimals,
-            })}
-          </span>,
-          <span key="value" className="italic">
-            {`${formatBalance({
-              balance: baseAmount,
-              decimals: hyperdrive.baseToken.decimals,
-            })} ${hyperdrive.baseToken.symbol}`}
-          </span>,
-          <span key="withdrawalShares" className="italic">
-            {`${formatBalance({
-              balance: withdrawalShareAmount,
-              decimals: hyperdrive.baseToken.decimals,
-            })}`}
-          </span>,
-          <span key="closed-on" className="italic">
-            {new Date(Number(closedTimestamp * 1000n)).toLocaleDateString()}
-          </span>,
-        ],
+        ({ lpAmount, baseAmount, closedTimestamp, withdrawalShareAmount }) => {
+          return [
+            <span
+              key="type"
+              className="font-semibold uppercase italic text-primary"
+            >
+              LP
+            </span>,
+            <span key="shares" className="italic">
+              {formatBalance({
+                balance: lpAmount,
+                decimals: hyperdrive.baseToken.decimals,
+              })}
+            </span>,
+            <span key="value" className="italic">
+              {`${formatBalance({
+                balance: baseAmount,
+                decimals: hyperdrive.baseToken.decimals,
+              })}`}
+            </span>,
+            <span key="withdrawalShares" className="italic">
+              {`${formatBalance({
+                balance: withdrawalShareAmount,
+                decimals: hyperdrive.baseToken.decimals,
+              })}`}
+            </span>,
+            <span key="closed-on" className="italic">
+              {new Date(Number(closedTimestamp * 1000n)).toLocaleDateString()}
+            </span>,
+          ];
+        },
       ),
     );
   }
 
   if (redeemedWithdrawalShares) {
     rows.push(
       ...redeemedWithdrawalShares.map(
-        ({ baseAmount, timestamp, withdrawalShareAmount }) => [
+        ({ baseAmount, redeemedTimestamp, withdrawalShareAmount }) => [
           <span key="type" className="font-semibold uppercase italic">
-            Pending Withdrawal
+            Withdrawal shares
           </span>,
           <span key="shares" className="italic">
             {`${formatBalance({
@@ -90,7 +92,7 @@ export function ClosedLpTable({
             0
           </span>,
           <span key="closed-on" className="italic">
-            {new Date(Number(timestamp * 1000n)).toLocaleDateString()}
+            {new Date(Number(redeemedTimestamp * 1000n)).toLocaleDateString()}
           </span>,
         ],
       ),
@@ -114,14 +116,14 @@ export function ClosedLpTable({
           cell: (
             <CellWithTooltip
               tooltip="LP's proportionate stake in the liquidity pool."
-              content="Shares"
+              content="Shares closed"
             />
           ),
         },
         {
           cell: (
             <CellWithTooltip
-              content="Value received"
+              content={`Amount received (${hyperdrive.baseToken.symbol})`}
               tooltip="Total assets collected upon closing the position."
             />
           ),

packages/hyperdrive-sdk/src/hyperdrive/ReadHyperdrive.ts

@@ -979,18 +979,22 @@ export class ReadHyperdrive implements IReadHyperdrive {
         ...options,
       },
     );
-    return removeLiquidityEvents.map(({ data, args }) => {
-      const { baseAmount, lpAmount, withdrawalShareAmount } = args;
-      return {
-        hyperdriveAddress: this.contract.address,
-        lpAmount,
-        baseAmount,
-        withdrawalShareAmount,
-        closedTimestamp: decodeAssetFromTransferSingleEventData(
-          data as `0x${string}`,
-        ).timestamp,
-      };
-    });
+    return Promise.all(
+      removeLiquidityEvents.map(async ({ blockNumber, data, args }) => {
+        const { baseAmount, lpAmount, withdrawalShareAmount } = args;
+        return {
+          hyperdriveAddress: this.contract.address,
+          lpAmount,
+          baseAmount,
+          withdrawalShareAmount,
+          closedTimestamp: (
+            await this.network.getBlock({
+              blockNumber,
+            })
+          ).timestamp,
+        };
+      }),
+    );
   }
 
   async getWithdrawalShares({
@@ -1024,15 +1028,14 @@ export class ReadHyperdrive implements IReadHyperdrive {
     );
 
     return Promise.all(
-      redeemedWithdrawalShareEvents.map(async ({ data, args }) => {
+      redeemedWithdrawalShareEvents.map(async ({ blockNumber, args }) => {
         const { withdrawalShareAmount, baseAmount } = args;
         return {
           hyperdriveAddress: this.contract.address,
           withdrawalShareAmount,
           baseAmount,
-          timestamp: decodeAssetFromTransferSingleEventData(
-            data as `0x${string}`,
-          ).timestamp,
+          redeemedTimestamp: (await this.network.getBlock({ blockNumber }))
+            .timestamp,
         };
       }),
     );

packages/hyperdrive-sdk/src/withdrawalShares/RedeemedWithdrawalShares.ts

@@ -4,5 +4,5 @@ export interface RedeemedWithdrawalShares {
   hyperdriveAddress: Address;
   withdrawalShareAmount: bigint;
   baseAmount: bigint;
-  timestamp: bigint;
+  redeemedTimestamp: bigint;
 }