Skip to content

Add Manage dropdown for longs #1590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 25, 2024
Merged

Add Manage dropdown for longs #1590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd1f04f
manage longs button dropdown added
jackburrus Oct 21, 2024
8880ada
Merge branch 'main' into update-manage-buttons
jackburrus Oct 21, 2024
c2eb535
rename open longs table component
jackburrus Oct 21, 2024
b217f65
fix per comments
jackburrus Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/ManageLongsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
import { Cog8ToothIcon } from "@heroicons/react/20/solid";
import { Link } from "@tanstack/react-router";
import { ReactElement, useRef, useState } from "react";
import { useClickAway } from "react-use";
import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";

export function ManageLongsButton({
hyperdrive,
assetId,
}: {
hyperdrive: HyperdriveConfig;
assetId: bigint;
}): ReactElement {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
useClickAway(dropdownRef, () => setIsOpen(false));
return (
<div
className="relative flex w-full items-center font-inter"
ref={dropdownRef}
>
<button
onClick={() => setIsOpen(!isOpen)}
className="daisy-btn daisy-btn-ghost rounded-full bg-gray-600 hover:bg-gray-700"
>
<Cog8ToothIcon className="h-5" />
Manage
</button>
{isOpen && (
<ul className="absolute right-6 top-full z-50 mt-4 w-[300px] rounded-box border border-neutral-content/20 bg-neutral px-4 py-1">
<button
className="m-0 flex h-[52px] w-full flex-row items-center justify-start border-b-2 border-b-neutral-content/20 p-0 text-start hover:bg-neutral hover:text-neutral-content"
onClick={() => {
const modalId = `${assetId}`;
(
document.getElementById(modalId) as HTMLDialogElement
).showModal();
}}
>
Close Long
Copy link
Contributor

@DannyDelott DannyDelott Oct 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like this should be above "Go to pool" as it's the primary management action for an open position

</button>
<Link
className="m-0 flex h-[52px] w-full flex-row items-center justify-start p-0 text-start hover:bg-neutral hover:text-neutral-content"
to={MARKET_DETAILS_ROUTE}
params={{
chainId: hyperdrive.chainId.toString(),
address: hyperdrive.address,
}}
search={{ position: "longs" }}
>
Go to pool
</Link>
</ul>
)}
</div>
);
}
41 changes: 16 additions & 25 deletions ...enLongsTable/OpenLongsTableDesktopTwo.tsx → .../OpenLongsTable/OpenLongsTableDesktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
calculateAprFromPrice,
OpenLongPositionReceived,
} from "@delvtech/hyperdrive-viem";
import { Cog8ToothIcon } from "@heroicons/react/20/solid";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
import { Link } from "@tanstack/react-router";
import {
Expand Down Expand Up @@ -37,6 +36,7 @@ import { StatusCell } from "src/ui/hyperdrive/longs/OpenLongsTable/StatusCell";
import { TotalOpenLongsValue } from "src/ui/hyperdrive/longs/OpenLongsTable/TotalOpenLongsValue";
import { usePortfolioLongsData } from "src/ui/portfolio/usePortfolioLongsData";
import { useAccount } from "wagmi";
import { ManageLongsButton } from "./ManageLongsButton";

export function OpenLongsContainer(): ReactElement {
const { address: account } = useAccount();
Expand Down Expand Up @@ -99,7 +99,7 @@ export function OpenLongsContainer(): ReactElement {
const openLongs = openLongPositions?.find(
(position) =>
position.hyperdrive.address === hyperdrive.address &&
position.hyperdrive.chainId === hyperdrive.chainId,
position.hyperdrive.chainId === hyperdrive.chainId
)?.openLongs;
const baseToken = findBaseToken({
hyperdriveChainId: hyperdrive.chainId,
Expand Down Expand Up @@ -142,7 +142,7 @@ export function OpenLongsContainer(): ReactElement {
</div>
<TotalOpenLongsValue hyperdrive={hyperdrive} />
</div>
<OpenLongsTableDesktopTwo
<OpenLongsTableDesktop
hyperdrive={hyperdrive}
openLongs={openLongs}
/>
Expand All @@ -153,7 +153,7 @@ export function OpenLongsContainer(): ReactElement {
);
}

export function OpenLongsTableDesktopTwo({
export function OpenLongsTableDesktop({
hyperdrive,
openLongs,
}: {
Expand Down Expand Up @@ -217,7 +217,7 @@ export function OpenLongsTableDesktopTwo({
<th
key={header.id}
className={classNames(
"relative z-10 text-sm font-normal text-neutral-content/70",
"relative z-10 text-sm font-normal text-neutral-content/70"
)}
>
<div
Expand All @@ -230,7 +230,7 @@ export function OpenLongsTableDesktopTwo({
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
header.getContext()
)}
{{
asc: <ChevronUpIcon height={15} />,
Expand All @@ -248,7 +248,7 @@ export function OpenLongsTableDesktopTwo({
"left-0 right-0":
headerIndex !== 0 &&
headerIndex !== headerGroup.headers.length - 1, // Full-width border for other header cells
},
}
)}
/>
</th>
Expand All @@ -274,7 +274,7 @@ export function OpenLongsTableDesktopTwo({
"rounded-br-box":
isLastRow &&
cellIndex === row.getVisibleCells().length - 1,
},
}
)}
key={cell.id}
>
Expand All @@ -291,7 +291,7 @@ export function OpenLongsTableDesktopTwo({
"left-0 right-0":
cellIndex !== 0 &&
cellIndex !== row.getVisibleCells().length - 1, // Full width border for other cells
},
}
)}
/>
)}
Expand Down Expand Up @@ -365,14 +365,14 @@ function getColumns({
amountBefore: rowA.original.details?.baseAmountPaid || 0n,
amountAfter: rowA.original.details?.bondAmount || 0n,
days: convertMillisecondsToDays(
Number(hyperdrive.poolConfig.positionDuration * 1000n),
Number(hyperdrive.poolConfig.positionDuration * 1000n)
),
});
const bFixedRate = calculateAnnualizedPercentageChange({
amountBefore: rowB.original.details?.baseAmountPaid || 0n,
amountAfter: rowB.original.details?.bondAmount || 0n,
days: convertMillisecondsToDays(
Number(hyperdrive.poolConfig.positionDuration * 1000n),
Number(hyperdrive.poolConfig.positionDuration * 1000n)
),
});
return aFixedRate - bFixedRate;
Expand Down Expand Up @@ -412,20 +412,11 @@ function getColumns({
id: "go-to-market",
cell: ({ row }) => {
return (
<div className="flex w-full items-center font-inter">
<button
className="daisy-btn daisy-btn-ghost rounded-full bg-gray-600 hover:bg-gray-700"
onClick={() => {
const modalId = `${row.original.assetId}`;
(
document.getElementById(modalId) as HTMLDialogElement
).showModal();
}}
>
<Cog8ToothIcon className="h-5" />
Manage
</button>
</div>
<ManageLongsButton
assetId={row.original.assetId}
hyperdrive={hyperdrive}
key={row.original.assetId}
/>
);
},
}),
Expand Down
22 changes: 11 additions & 11 deletions ...ve-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
import LoadingState from "src/ui/base/components/LoadingState";
import { NonIdealState } from "src/ui/base/components/NonIdealState";
import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
import { LpCurrentValueCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell";
import { ManageLpAndWithdrawalSharesButton } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton";
import { SizeAndPoolShareCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/SizeAndPoolShareCell";
import { WithdrawalQueueCell } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell";
import { AssetStack } from "src/ui/markets/AssetStack";
import { usePortfolioLpData } from "src/ui/portfolio/usePortfolioLpData";
import { useAccount } from "wagmi";
import { LpCurrentValueCell } from "./LpCurrentValueCell";
import { ManageLpAndWithdrawalSharesButton } from "./ManageLpAndWithdrawalSharesButton";
import { SizeAndPoolShareCell } from "./SizeAndPoolShareCell";
import { WithdrawalQueueCell } from "./WithdrawalQueueCell";

export function LpAndWithdrawalSharesContainer(): ReactElement {
const { openLpPositions, openLpPositionStatus } = usePortfolioLpData();
Expand Down Expand Up @@ -61,7 +61,7 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
}

const hasOpenPositions = openLpPositions?.some(
(position) => position.lpShares > 0n || position.withdrawalShares > 0n,
(position) => position.lpShares > 0n || position.withdrawalShares > 0n
);

if (!hasOpenPositions) {
Expand Down Expand Up @@ -99,7 +99,7 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
const openLpPosition = openLpPositions?.find(
(position) =>
position.hyperdrive.address === hyperdrive.address &&
position.hyperdrive.chainId === hyperdrive.chainId,
position.hyperdrive.chainId === hyperdrive.chainId
) ?? {
lpShares: 0n,
withdrawalShares: 0n,
Expand Down Expand Up @@ -154,7 +154,7 @@ export function OpenLpTableDesktop({

const columns = useMemo(
() => getColumns({ hyperdrive, appConfig }),
[hyperdrive, appConfig],
[hyperdrive, appConfig]
);
const data = useMemo(() => [openLpPosition], [openLpPosition]);
const tableInstance = useReactTable({
Expand Down Expand Up @@ -195,7 +195,7 @@ export function OpenLpTableDesktop({
<th
key={header.id}
className={classNames(
"relative z-10 text-sm font-normal text-neutral-content/70",
"relative z-10 text-sm font-normal text-neutral-content/70"
)}
>
<div
Expand All @@ -207,7 +207,7 @@ export function OpenLpTableDesktop({
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
header.getContext()
)}
</div>
{/* Custom border with inset for the first and last header cells */}
Expand All @@ -221,7 +221,7 @@ export function OpenLpTableDesktop({
"left-0 right-0":
headerIndex !== 0 &&
headerIndex !== headerGroup.headers.length - 1, // Full-width border for other header cells
},
}
)}
/>
</th>
Expand Down Expand Up @@ -289,7 +289,7 @@ function getColumns({
cell: () => (
<div>
{convertMillisecondsToDays(
Number(hyperdrive.poolConfig.positionDuration * 1000n),
Number(hyperdrive.poolConfig.positionDuration * 1000n)
)}
{"-"}Day
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useNavigate, useSearch } from "@tanstack/react-router";
import { ReactElement } from "react";
import { TabsTwo } from "src/ui/base/components/Tabs/TabsTwo";
import { OpenLongsContainer } from "src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktopTwo";
import { OpenLongsContainer } from "src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop";
import { LpAndWithdrawalSharesContainer } from "src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable";
import { OpenShortsContainer } from "src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo";
import { PORTFOLIO_ROUTE } from "./routes";
import { PORTFOLIO_ROUTE } from "src/ui/portfolio/routes";

export function Portfolio(): ReactElement {
const { position } = useSearch({ from: PORTFOLIO_ROUTE });
Expand Down
Loading