From 66e76226aab8c2dc83765ba6b08a6ec6ef5d2d8d Mon Sep 17 00:00:00 2001 From: jackburrus Date: Tue, 17 Oct 2023 15:34:23 -0600 Subject: [PATCH 01/10] start setup for react-table --- .../src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx index f08248d4f..e0fa35b8b 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx @@ -1,4 +1,5 @@ import { multiplyBigInt } from "@hyperdrive/sdk"; +import { createColumnHelper } from "@tanstack/react-table"; import { ReactElement } from "react"; import Skeleton from "react-loading-skeleton"; import { Hyperdrive } from "src/appconfig/types"; @@ -21,6 +22,13 @@ interface OpenOrdersTableProps { hyperdrive: Hyperdrive; } +const columnHelper = createColumnHelper(); +function getColumns( + hyperdrive: Hyperdrive, + lpShares: bigint, + withdrawalShares: bigint, +) {} + export function OpenLpPosition({ hyperdrive, }: OpenOrdersTableProps): ReactElement { @@ -30,6 +38,7 @@ export function OpenLpPosition({ hyperdriveAddress: hyperdrive.address, account, }); + console.log("lpShares", lpShares); const { withdrawalShares, withdrawalSharesStatus } = useWithdrawalShares({ hyperdriveAddress: hyperdrive.address, From cfe7f8fba60eb5e70ec6a68234194d7ba82339d5 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 08:56:57 -0600 Subject: [PATCH 02/10] open lp position refactor started --- .../OpenLpPosition/OpenLpPosition.tsx | 232 +++++++++++++----- .../PositionsSection/PositionsSection.tsx | 4 +- 2 files changed, 168 insertions(+), 68 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx index e0fa35b8b..aa8627097 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx @@ -1,50 +1,143 @@ import { multiplyBigInt } from "@hyperdrive/sdk"; -import { createColumnHelper } from "@tanstack/react-table"; -import { ReactElement } from "react"; -import Skeleton from "react-loading-skeleton"; -import { Hyperdrive } from "src/appconfig/types"; import { - CellWithTooltip, Row, - SortableGridTable, -} from "src/ui/base/components/tables/SortableGridTable"; + createColumnHelper, + flexRender, + getCoreRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { ReactElement, useMemo } from "react"; +import Skeleton from "react-loading-skeleton"; +import { Hyperdrive } from "src/appconfig/types"; +import { NonIdealState } from "src/ui/base/components/NonIdealState"; +import { CellWithTooltip } from "src/ui/base/components/tables/SortableGridTable"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; +import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton"; +import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton"; import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares"; import { usePreviewRedeemWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/usePreviewRedeemWithdrawalShares"; import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity"; import { useWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/useWithdrawalShares"; -import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton"; -import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton"; import { useAccount } from "wagmi"; interface OpenOrdersTableProps { hyperdrive: Hyperdrive; + lpShares?: bigint; + withdrawalShares?: bigint; } -const columnHelper = createColumnHelper(); -function getColumns( - hyperdrive: Hyperdrive, - lpShares: bigint, - withdrawalShares: bigint, -) {} +type LpRowType = { + withdrawalShares: bigint | undefined; + lpShares: bigint | undefined; +}; -export function OpenLpPosition({ +const columnHelper = createColumnHelper(); +function getColumns(hyperdrive: Hyperdrive) { + return [ + columnHelper.accessor("lpShares", { + header: () => ( + + ), + cell: ({ getValue, row }) => { + const lpShares = getValue(); + const withdrawalShares = row.original.withdrawalShares; + + return ( + + {lpShares ? "LP" : "Pending withdrawal"} + + ); + }, + }), + columnHelper.accessor("withdrawalShares", { + header: () => ( + + ), + cell: ({ getValue, row }) => { + const withdrawalShares = getValue(); + const lpShares = row.original.lpShares; + + return formatBalance({ + balance: withdrawalShares ? withdrawalShares || 0n : lpShares || 0n, + decimals: hyperdrive.baseToken.decimals, + }); + }, + }), + columnHelper.accessor("lpShares", { + header: () => ( + + ), + cell: ({ getValue, row }) => { + return ; + }, + }), + ]; +} + +function CurrentValueCell({ + row, hyperdrive, -}: OpenOrdersTableProps): ReactElement { +}: { + hyperdrive: Hyperdrive; + row: Row; +}): any { + const lpShares = row.original.lpShares; + const withdrawalShares = row.original.withdrawalShares; + const poolInfo = usePoolInfo(hyperdrive.address); +} + +export function OpenLpTable({ + hyperdrive, +}: { + hyperdrive: Hyperdrive; +}): JSX.Element { const { address: account } = useAccount(); - const { lpShares, lpSharesStatus } = useLpShares({ + const { lpShares } = useLpShares({ hyperdriveAddress: hyperdrive.address, account, }); - console.log("lpShares", lpShares); - const { withdrawalShares, withdrawalSharesStatus } = useWithdrawalShares({ + const { withdrawalShares } = useWithdrawalShares({ hyperdriveAddress: hyperdrive.address, account, }); + return ( + + ); +} + +function OpenLpPosition({ + hyperdrive, + lpShares, + withdrawalShares, +}: OpenOrdersTableProps): ReactElement { + const { address: account } = useAccount(); + const memoizedData = useMemo(() => { + return [ + { + lpShares: lpShares || 0n, + }, + { + withdrawalShares: withdrawalShares || 0n, + }, + ]; + }, [lpShares, withdrawalShares]); const { baseAmountOut: lpBaseWithdrawable } = usePreviewRemoveLiquidity({ market: hyperdrive, lpSharesIn: lpShares, @@ -62,7 +155,13 @@ export function OpenLpPosition({ const { poolInfo } = usePoolInfo(hyperdrive.address); - const rows: Row[] = []; + const tableInstance = useReactTable({ + columns: getColumns(hyperdrive), + data: memoizedData as LpRowType[], + getCoreRowModel: getCoreRowModel(), + }); + + const rows: any[] = []; if (lpShares) { rows.push([ @@ -148,51 +247,52 @@ export function OpenLpPosition({ , ]); } - + const rowsLen = tableInstance.getRowModel().rows; + console.log(rowsLen, "len"); return ( - - ), - }, - { - cell: ( - - ), - }, - { - cell: ( - - ), - }, - { - cell: ( - - ), - }, - { cell:
}, - ]} - rows={rows} - showSkeleton={ - lpSharesStatus === "loading" || withdrawalSharesStatus === "loading" - } - /> +
+ + + {tableInstance.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {tableInstance.getRowModel().rows.map((row) => { + return ( + + <> + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + + ); + })} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+ {!lpShares || !withdrawalShares ? : null} +
); } diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx index 0b9f85088..c78e66c45 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx @@ -7,7 +7,7 @@ import { ClosedLongsTable } from "src/ui/portfolio/ClosedLongsTable/ClosedLongsT import { ClosedLpTable } from "src/ui/portfolio/ClosedLpTable/ClosedLpTable"; import { ClosedShortsTable } from "src/ui/portfolio/ClosedShortsTable/ClosedShortsTable"; import { OpenLongsTable } from "src/ui/portfolio/OpenLongsTable/OpenLongsTable"; -import { OpenLpPosition } from "src/ui/portfolio/OpenLpPosition/OpenLpPosition"; +import { OpenLpTable } from "src/ui/portfolio/OpenLpPosition/OpenLpPosition"; import { OpenShortsTable } from "src/ui/portfolio/OpenShortsTable/OpenShortsTable"; import { PositionTab, @@ -99,7 +99,7 @@ export function PositionsSection({ } case "LP": if (activeOpenOrClosedTab === "Open") { - return ; + return ; } return ; default: From b7e8c635418c56e2f7cdb2eb90699d122ec25f1d Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 09:09:59 -0600 Subject: [PATCH 03/10] open table done --- .../OpenLpPosition/OpenLpPosition.tsx | 84 +++++++++++++++++-- 1 file changed, 79 insertions(+), 5 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx index aa8627097..8a1c9f9d7 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx @@ -71,14 +71,51 @@ function getColumns(hyperdrive: Hyperdrive) { }, }), columnHelper.accessor("lpShares", { + id: "currentValue", header: () => ( ), - cell: ({ getValue, row }) => { - return ; + cell: ({ row }) => { + return ( + + ); + }, + }), + columnHelper.accessor("withdrawalShares", { + id: "withdrawable", + header: () => ( + + ), + cell: ({ row }) => { + const withdrawalShares = row.original.withdrawalShares; + const lpShares = row.original.lpShares; + if (lpShares) { + return ( + + + + ); + } else if (withdrawalShares) { + return ( + + + + ); + } }, }), ]; @@ -90,10 +127,49 @@ function CurrentValueCell({ }: { hyperdrive: Hyperdrive; row: Row; -}): any { +}): JSX.Element { + const { address: account } = useAccount(); const lpShares = row.original.lpShares; const withdrawalShares = row.original.withdrawalShares; const poolInfo = usePoolInfo(hyperdrive.address); + const { baseAmountOut: withdrawalSharesBaseWithdrawable } = + usePreviewRedeemWithdrawalShares({ + market: hyperdrive, + withdrawalSharesIn: withdrawalShares, + minBaseAmountOutPerShare: 1n, // TODO: slippage, + destination: account, + }); + if (lpShares) { + return ( + + {!!poolInfo ? ( + `${formatBalance({ + balance: multiplyBigInt( + [lpShares, poolInfo.poolInfo?.lpSharePrice || 0n], + hyperdrive.baseToken.decimals, + ), + decimals: hyperdrive.baseToken.decimals, + places: 4, + })} ${hyperdrive.baseToken.symbol}` + ) : ( + + )} + + ); + } else { + return ( + + {withdrawalSharesBaseWithdrawable !== undefined ? ( + `${formatBalance({ + balance: withdrawalSharesBaseWithdrawable, + decimals: hyperdrive.baseToken.decimals, + })} ${hyperdrive.baseToken.symbol}` + ) : ( + + )} + + ); + } } export function OpenLpTable({ @@ -247,8 +323,6 @@ function OpenLpPosition({ , ]); } - const rowsLen = tableInstance.getRowModel().rows; - console.log(rowsLen, "len"); return (
From 8a9769fbab3357e6243db4c7a5bc14efec3929e6 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 09:19:18 -0600 Subject: [PATCH 04/10] fix lpshareswithdrawable --- .../OpenLpPosition/OpenLpPosition.tsx | 39 ++++++------------- .../PositionsSection/PositionsSection.tsx | 4 +- 2 files changed, 13 insertions(+), 30 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx index 8a1c9f9d7..6ef4e993a 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx @@ -139,17 +139,19 @@ function CurrentValueCell({ minBaseAmountOutPerShare: 1n, // TODO: slippage, destination: account, }); + const { baseAmountOut: lpBaseWithdrawable } = usePreviewRemoveLiquidity({ + market: hyperdrive, + lpSharesIn: lpShares, + minBaseAmountOut: 1n, // TODO: slippage, + destination: account, + }); if (lpShares) { return ( - - {!!poolInfo ? ( + + {lpBaseWithdrawable !== undefined ? ( `${formatBalance({ - balance: multiplyBigInt( - [lpShares, poolInfo.poolInfo?.lpSharePrice || 0n], - hyperdrive.baseToken.decimals, - ), + balance: lpBaseWithdrawable, decimals: hyperdrive.baseToken.decimals, - places: 4, })} ${hyperdrive.baseToken.symbol}` ) : ( @@ -172,13 +174,10 @@ function CurrentValueCell({ } } -export function OpenLpTable({ +export function OpenLpPosition({ hyperdrive, -}: { - hyperdrive: Hyperdrive; -}): JSX.Element { +}: OpenOrdersTableProps): ReactElement { const { address: account } = useAccount(); - const { lpShares } = useLpShares({ hyperdriveAddress: hyperdrive.address, account, @@ -188,22 +187,6 @@ export function OpenLpTable({ hyperdriveAddress: hyperdrive.address, account, }); - - return ( - - ); -} - -function OpenLpPosition({ - hyperdrive, - lpShares, - withdrawalShares, -}: OpenOrdersTableProps): ReactElement { - const { address: account } = useAccount(); const memoizedData = useMemo(() => { return [ { diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx index c78e66c45..0b9f85088 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx @@ -7,7 +7,7 @@ import { ClosedLongsTable } from "src/ui/portfolio/ClosedLongsTable/ClosedLongsT import { ClosedLpTable } from "src/ui/portfolio/ClosedLpTable/ClosedLpTable"; import { ClosedShortsTable } from "src/ui/portfolio/ClosedShortsTable/ClosedShortsTable"; import { OpenLongsTable } from "src/ui/portfolio/OpenLongsTable/OpenLongsTable"; -import { OpenLpTable } from "src/ui/portfolio/OpenLpPosition/OpenLpPosition"; +import { OpenLpPosition } from "src/ui/portfolio/OpenLpPosition/OpenLpPosition"; import { OpenShortsTable } from "src/ui/portfolio/OpenShortsTable/OpenShortsTable"; import { PositionTab, @@ -99,7 +99,7 @@ export function PositionsSection({ } case "LP": if (activeOpenOrClosedTab === "Open") { - return ; + return ; } return ; default: From 9c93638769dfdbd30366467ca5f631393b7624a5 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 09:22:43 -0600 Subject: [PATCH 05/10] cleanup --- .../OpenLpPosition/OpenLpPosition.tsx | 109 +----------------- 1 file changed, 1 insertion(+), 108 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx index 6ef4e993a..f1f541bdc 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx @@ -1,4 +1,3 @@ -import { multiplyBigInt } from "@hyperdrive/sdk"; import { Row, createColumnHelper, @@ -12,7 +11,6 @@ import { Hyperdrive } from "src/appconfig/types"; import { NonIdealState } from "src/ui/base/components/NonIdealState"; import { CellWithTooltip } from "src/ui/base/components/tables/SortableGridTable"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; -import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton"; import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton"; import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares"; @@ -42,9 +40,8 @@ function getColumns(hyperdrive: Hyperdrive) { content="Position" /> ), - cell: ({ getValue, row }) => { + cell: ({ getValue }) => { const lpShares = getValue(); - const withdrawalShares = row.original.withdrawalShares; return ( @@ -131,7 +128,6 @@ function CurrentValueCell({ const { address: account } = useAccount(); const lpShares = row.original.lpShares; const withdrawalShares = row.original.withdrawalShares; - const poolInfo = usePoolInfo(hyperdrive.address); const { baseAmountOut: withdrawalSharesBaseWithdrawable } = usePreviewRedeemWithdrawalShares({ market: hyperdrive, @@ -197,115 +193,12 @@ export function OpenLpPosition({ }, ]; }, [lpShares, withdrawalShares]); - const { baseAmountOut: lpBaseWithdrawable } = usePreviewRemoveLiquidity({ - market: hyperdrive, - lpSharesIn: lpShares, - minBaseAmountOut: 1n, // TODO: slippage, - destination: account, - }); - - const { baseAmountOut: withdrawalSharesBaseWithdrawable } = - usePreviewRedeemWithdrawalShares({ - market: hyperdrive, - withdrawalSharesIn: withdrawalShares, - minBaseAmountOutPerShare: 1n, // TODO: slippage, - destination: account, - }); - - const { poolInfo } = usePoolInfo(hyperdrive.address); - const tableInstance = useReactTable({ columns: getColumns(hyperdrive), data: memoizedData as LpRowType[], getCoreRowModel: getCoreRowModel(), }); - const rows: any[] = []; - if (lpShares) { - rows.push([ - - LP - , - formatBalance({ - balance: lpShares, - decimals: (hyperdrive as Hyperdrive).baseToken.decimals, - places: 4, - }), - - {!!poolInfo ? ( - `${formatBalance({ - balance: multiplyBigInt( - [lpShares, poolInfo.lpSharePrice], - hyperdrive.baseToken.decimals, - ), - decimals: hyperdrive.baseToken.decimals, - places: 4, - })} ${hyperdrive.baseToken.symbol}` - ) : ( - - )} - , - - {lpBaseWithdrawable !== undefined ? ( - `${formatBalance({ - balance: lpBaseWithdrawable, - decimals: hyperdrive.baseToken.decimals, - })} ${hyperdrive.baseToken.symbol}` - ) : ( - - )} - , - - - , - ]); - } - - if (withdrawalShares) { - rows.push([ - - Pending withdrawal - , - formatBalance({ - balance: withdrawalShares, - decimals: hyperdrive.baseToken.decimals, - }), - - {!!poolInfo ? ( - `${formatBalance({ - balance: multiplyBigInt( - [withdrawalShares, poolInfo.lpSharePrice], - hyperdrive.baseToken.decimals, - ), - decimals: hyperdrive.baseToken.decimals, - })} ${hyperdrive.baseToken.symbol}` - ) : ( - - )} - , - - {withdrawalSharesBaseWithdrawable !== undefined ? ( - `${formatBalance({ - balance: withdrawalSharesBaseWithdrawable, - decimals: hyperdrive.baseToken.decimals, - })} ${hyperdrive.baseToken.symbol}` - ) : ( - - )} - , - - - , - ]); - } return (
From 691fd7460d90abc7863133d5e12e1d4ff5f09e84 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 15:26:19 -0600 Subject: [PATCH 06/10] finally organized --- .../ui/portfolio/OpenLpTable/OpenLpTable.tsx | 85 ++++++++++++++++--- 1 file changed, 74 insertions(+), 11 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx index cfe8cd140..d7590a085 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx @@ -1,3 +1,4 @@ +import { multiplyBigInt } from "@hyperdrive/sdk"; import { Row, createColumnHelper, @@ -11,6 +12,7 @@ import { Hyperdrive } from "src/appconfig/types"; import { NonIdealState } from "src/ui/base/components/NonIdealState"; import { CellWithTooltip } from "src/ui/base/components/tables/SortableGridTable"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; +import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton"; import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton"; import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares"; @@ -57,14 +59,25 @@ function getColumns(hyperdrive: Hyperdrive) { content="Shares" /> ), - cell: ({ getValue, row }) => { - const withdrawalShares = getValue(); - const lpShares = row.original.lpShares; - return formatBalance({ - balance: withdrawalShares ? withdrawalShares || 0n : lpShares || 0n, - decimals: hyperdrive.baseToken.decimals, - }); + cell: ({ row, getValue }) => { + const withdrawalShares = getValue(); + if (withdrawalShares) { + return ( + + {formatBalance({ + balance: withdrawalShares, + decimals: hyperdrive.baseToken.decimals, + })} + + ); + } else { + return formatBalance({ + balance: row.original.lpShares || 0n, + decimals: (hyperdrive as Hyperdrive).baseToken.decimals, + places: 4, + }); + } }, }), columnHelper.accessor("lpShares", { @@ -76,9 +89,7 @@ function getColumns(hyperdrive: Hyperdrive) { /> ), cell: ({ row }) => { - return ( - - ); + return ; }, }), columnHelper.accessor("withdrawalShares", { @@ -89,6 +100,12 @@ function getColumns(hyperdrive: Hyperdrive) { content="Withdrawable" /> ), + cell: ({ row }) => { + return ; + }, + }), + columnHelper.display({ + id: "actions", cell: ({ row }) => { const withdrawalShares = row.original.withdrawalShares; const lpShares = row.original.lpShares; @@ -118,7 +135,53 @@ function getColumns(hyperdrive: Hyperdrive) { ]; } -function CurrentValueCell({ +function ValueCell({ + row, + hyperdrive, +}: { + row: Row; + hyperdrive: Hyperdrive; +}) { + const { poolInfo } = usePoolInfo(hyperdrive.address); + const lpShares = row.original.lpShares; + const withdrawalShares = row.original.withdrawalShares; + if (lpShares) { + return ( + + {!!poolInfo ? ( + `${formatBalance({ + balance: multiplyBigInt( + [lpShares, poolInfo.lpSharePrice], + hyperdrive.baseToken.decimals, + ), + decimals: hyperdrive.baseToken.decimals, + places: 4, + })} ${hyperdrive.baseToken.symbol}` + ) : ( + + )} + + ); + } else { + return ( + + {!!poolInfo && withdrawalShares ? ( + `${formatBalance({ + balance: multiplyBigInt( + [withdrawalShares, poolInfo.lpSharePrice], + hyperdrive.baseToken.decimals, + ), + decimals: hyperdrive.baseToken.decimals, + })} ${hyperdrive.baseToken.symbol}` + ) : ( + + )} + + ); + } +} + +function WithdrawableCell({ row, hyperdrive, }: { From e69439177ad63eca99ebaaecf8f2b40eb2d05f98 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 15:42:51 -0600 Subject: [PATCH 07/10] cleanup --- .../ui/portfolio/OpenLpTable/OpenLpTable.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx index d7590a085..2201842d0 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx @@ -44,7 +44,6 @@ function getColumns(hyperdrive: Hyperdrive) { ), cell: ({ getValue }) => { const lpShares = getValue(); - return ( {lpShares ? "LP" : "Pending withdrawal"} @@ -52,7 +51,8 @@ function getColumns(hyperdrive: Hyperdrive) { ); }, }), - columnHelper.accessor("withdrawalShares", { + columnHelper.accessor("lpShares", { + id: "shares", header: () => ( { - const withdrawalShares = getValue(); - if (withdrawalShares) { + const lpShares = getValue(); + if (lpShares) { return ( {formatBalance({ - balance: withdrawalShares, - decimals: hyperdrive.baseToken.decimals, + balance: lpShares || 0n, + decimals: (hyperdrive as Hyperdrive).baseToken.decimals, + places: 4, })} ); } else { - return formatBalance({ - balance: row.original.lpShares || 0n, - decimals: (hyperdrive as Hyperdrive).baseToken.decimals, - places: 4, - }); + return ( + + {formatBalance({ + balance: row.original.withdrawalShares || 0n, + decimals: hyperdrive.baseToken.decimals, + })} + + ); } }, }), columnHelper.accessor("lpShares", { - id: "currentValue", + id: "value", header: () => (
From cee418b8e9eef89006b28aeb84c2fc2b83a4d519 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 15:47:07 -0600 Subject: [PATCH 08/10] remove tooltip --- .../ui/portfolio/OpenLpTable/OpenLpTable.tsx | 29 +++---------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx index 2201842d0..b2b843c01 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx @@ -10,7 +10,6 @@ import { ReactElement, useMemo } from "react"; import Skeleton from "react-loading-skeleton"; import { Hyperdrive } from "src/appconfig/types"; import { NonIdealState } from "src/ui/base/components/NonIdealState"; -import { CellWithTooltip } from "src/ui/base/components/tables/SortableGridTable"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton"; @@ -36,12 +35,7 @@ const columnHelper = createColumnHelper(); function getColumns(hyperdrive: Hyperdrive) { return [ columnHelper.accessor("lpShares", { - header: () => ( - - ), + header: "Position", cell: ({ getValue }) => { const lpShares = getValue(); return ( @@ -53,12 +47,7 @@ function getColumns(hyperdrive: Hyperdrive) { }), columnHelper.accessor("lpShares", { id: "shares", - header: () => ( - - ), + header: "Shares", cell: ({ row, getValue }) => { const lpShares = getValue(); @@ -86,24 +75,14 @@ function getColumns(hyperdrive: Hyperdrive) { }), columnHelper.accessor("lpShares", { id: "value", - header: () => ( - - ), + header: "Value", cell: ({ row }) => { return ; }, }), columnHelper.accessor("withdrawalShares", { id: "withdrawable", - header: () => ( - - ), + header: "Withdrawable", cell: ({ row }) => { return ; }, From 74847466e1365ecc75f30a8defee8b4607173c39 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 15:49:04 -0600 Subject: [PATCH 09/10] remove unused keys --- .../src/ui/portfolio/OpenLpTable/OpenLpTable.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx index b2b843c01..b9f26c62b 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx @@ -94,7 +94,7 @@ function getColumns(hyperdrive: Hyperdrive) { const lpShares = row.original.lpShares; if (lpShares) { return ( - + + + {!!poolInfo ? ( `${formatBalance({ balance: multiplyBigInt( @@ -189,7 +189,7 @@ function WithdrawableCell({ }); if (lpShares) { return ( - + {lpBaseWithdrawable !== undefined ? ( `${formatBalance({ balance: lpBaseWithdrawable, @@ -202,7 +202,7 @@ function WithdrawableCell({ ); } else { return ( - + {withdrawalSharesBaseWithdrawable !== undefined ? ( `${formatBalance({ balance: withdrawalSharesBaseWithdrawable, From 44b93597b93be0da45023a2170295222a6b3d515 Mon Sep 17 00:00:00 2001 From: jackburrus Date: Wed, 18 Oct 2023 17:21:32 -0600 Subject: [PATCH 10/10] cleanup per comments --- .../src/ui/portfolio/OpenLpTable/OpenLpTable.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx index b9f26c62b..6057d52d6 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpTable/OpenLpTable.tsx @@ -39,8 +39,8 @@ function getColumns(hyperdrive: Hyperdrive) { cell: ({ getValue }) => { const lpShares = getValue(); return ( - - {lpShares ? "LP" : "Pending withdrawal"} + + {lpShares ? "LP" : "Withdrawal Shares"} ); }, @@ -67,6 +67,7 @@ function getColumns(hyperdrive: Hyperdrive) { {formatBalance({ balance: row.original.withdrawalShares || 0n, decimals: hyperdrive.baseToken.decimals, + places: 4, })} ); @@ -77,7 +78,7 @@ function getColumns(hyperdrive: Hyperdrive) { id: "value", header: "Value", cell: ({ row }) => { - return ; + return ; }, }), columnHelper.accessor("withdrawalShares", { @@ -147,7 +148,7 @@ function ValueCell({ ); } else { return ( - + {!!poolInfo && withdrawalShares ? ( `${formatBalance({ balance: multiplyBigInt( @@ -287,7 +288,7 @@ export function OpenLpTable({ })}
- {!lpShares || !withdrawalShares ? : null} + {!lpShares && !withdrawalShares ? : null}
); }