- );
-}
-
export function OpenLongsTableDesktop({
hyperdrive,
openLongs,
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/TotalOpenLongsValue.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue.tsx
similarity index 100%
rename from apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/TotalOpenLongsValue.tsx
rename to apps/hyperdrive-trading/src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue.tsx
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts b/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts
index 28ca65d92..b35e99c4a 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts
+++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts
@@ -9,7 +9,7 @@ import { getDrift } from "src/drift/getDrift";
import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
import { useAccount } from "wagmi";
-type OpenLongPositionsData = {
+export type OpenLongPositionsData = {
hyperdrive: HyperdriveConfig;
openLongs: OpenLongPositionReceived[];
}[];
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx
new file mode 100644
index 000000000..15ed190e0
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx
@@ -0,0 +1,123 @@
+import { appConfig } from "@delvtech/hyperdrive-appconfig";
+import { Link } from "@tanstack/react-router";
+import { ReactElement } from "react";
+import { ExternalLink } from "src/ui/analytics/ExternalLink";
+import LoadingState from "src/ui/base/components/LoadingState";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
+import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
+import { OpenLpTableDesktop } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable";
+import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue";
+import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
+import { useAccount } from "wagmi";
+
+export function LpAndWithdrawalSharesContainer(): ReactElement {
+ const { openLpPositions, openLpPositionStatus } = usePortfolioLpData();
+ const { address: account } = useAccount();
+ if (!account) {
+ return (
+
+ }
+ />
+
+ );
+ }
+
+ if (openLpPositionStatus === "loading") {
+ return (
+
+
+
+ );
+ }
+ if (openLpPositionStatus === "error") {
+ return (
+
+
+
+ );
+ }
+
+ const hasOpenPositions = openLpPositions?.some(
+ (position) => position.lpShares > 0n || position.withdrawalShares > 0n,
+ );
+
+ if (!hasOpenPositions) {
+ return (
+
+
+ Visit the{" "}
+
+ documentation
+ {" "}
+ or explore pools to open your first LP position.
+
+ }
+ action={
+
+ View Pools
+
+ }
+ />
+
+ );
+ }
+
+ return (
+
+ {appConfig.hyperdrives.map((hyperdrive) => {
+ const openLpPosition = openLpPositions?.find(
+ (position) =>
+ position.hyperdrive.address === hyperdrive.address &&
+ position.hyperdrive.chainId === hyperdrive.chainId,
+ ) ?? {
+ lpShares: 0n,
+ withdrawalShares: 0n,
+ };
+
+ // Check if this hyperdrive pool has open positions before rendering
+ if (
+ openLpPosition.lpShares === 0n &&
+ openLpPosition.withdrawalShares === 0n
+ ) {
+ return null;
+ }
+
+ return (
+
+ }
+ hyperdriveName={
+ // This regex removes the term (eg: "30d") from the hyperdrive
+ // name since it's already shown in the table.
+ // https://regex101.com/r/f4A3th/1
+ hyperdrive.name.replace(/\d{1,3}d/, "")
+ }
+ />
+
+
+ );
+ })}
+
+ );
+}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
index aaafc3d2d..1e22484ca 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
@@ -4,7 +4,6 @@ import {
getBaseToken,
HyperdriveConfig,
} from "@delvtech/hyperdrive-appconfig";
-import { Link } from "@tanstack/react-router";
import {
createColumnHelper,
flexRender,
@@ -17,135 +16,12 @@ 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 { AssetStack } from "src/ui/markets/AssetStack";
import { LpCurrentValueCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell";
import { ManageLpAndWithdrawalSharesButton } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton";
import { SizeAndPoolShareCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/SizeAndPoolShareCell";
-import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue";
import { WithdrawalQueueCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell";
-import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData";
import { useAccount } from "wagmi";
-export function LpAndWithdrawalSharesContainer(): ReactElement {
- const { openLpPositions, openLpPositionStatus } = usePortfolioLpData();
- const { address: account } = useAccount();
- if (!account) {
- return (
-
- {/*
- This regex removes the term from the hyperdrive name since it's already shown in the table.
- It matches:
- - \d{1,3}: 1 to 3 digits
- - d: Followed by the letter 'd'
- */}
- {hyperdrive.name.replace(/\d{1,3}d/, "")}
-
-
-
-
-
-
- );
- })}
-
- );
-}
-
export function OpenLpTableDesktop({
hyperdrive,
openLpPosition,
@@ -159,7 +35,7 @@ export function OpenLpTableDesktop({
const columns = useMemo(
() => getColumns({ hyperdrive, appConfig }),
- [hyperdrive, appConfig],
+ [hyperdrive],
);
const data = useMemo(() => [openLpPosition], [openLpPosition]);
const tableInstance = useReactTable({
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
index f1b42c4fb..a3f957edf 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
@@ -2,12 +2,10 @@ import {
AppConfig,
appConfig,
getBaseToken,
- getToken,
HyperdriveConfig,
} from "@delvtech/hyperdrive-appconfig";
import { OpenShort } from "@delvtech/hyperdrive-js";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
-import { Link } from "@tanstack/react-router";
import {
createColumnHelper,
flexRender,
@@ -18,7 +16,6 @@ import {
} from "@tanstack/react-table";
import classNames from "classnames";
import { ReactElement } from "react";
-import LoadingState from "src/ui/base/components/LoadingState";
import { NonIdealState } from "src/ui/base/components/NonIdealState";
import { Pagination } from "src/ui/base/components/Pagination";
import { formatBalance } from "src/ui/base/formatting/formatBalance";
@@ -29,127 +26,8 @@ import { CloseShortModalButton } from "src/ui/hyperdrive/shorts/CloseShortModalB
import { CurrentShortsValueCell } from "src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell";
import { ManageShortButton } from "src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton";
import { ShortRateAndSizeCell } from "src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell";
-import { TotalOpenShortValue } from "src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue";
-import { usePortfolioShortsData } from "src/ui/portfolio/shorts/usePortfolioShortsData";
import { useAccount } from "wagmi";
-export function OpenShortsContainer(): ReactElement {
- const { openShortPositions, openShortPositionsStatus } =
- usePortfolioShortsData();
- const { address: account } = useAccount();
- if (!account) {
- return (
-
- 
-