Skip to content

Commit

Permalink
Fix LP table rendering at bottom (#1711)
Browse files Browse the repository at this point in the history 
* Move animation to parent

* Fix lp table rendering at the bottom
  • Loading branch information
@DannyDelott
DannyDelott authored Jan 5, 2025
1 parent b4e9f5e commit 7be2a40
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 119 deletions.
201 changes: 97 additions & 104 deletions apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
import { ClockIcon } from "@heroicons/react/16/solid";
import { useNavigate } from "@tanstack/react-router";
import { ReactElement } from "react";
import { Fade } from "react-awesome-reveal";
import { isTestnetChain } from "src/chains/isTestnetChain";
import { getDepositAssets } from "src/hyperdrive/getDepositAssets";
import { Well } from "src/ui/base/components/Well/Well";
Expand Down Expand Up @@ -67,116 +66,110 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
});

return (
<Fade triggerOnce duration={500}>
<Well
as="div"
block
onClick={() => {
navigate({
to: MARKET_DETAILS_ROUTE,
resetScroll: true,
params: {
address: hyperdrive.address,
chainId: hyperdrive.chainId.toString(),
},
});
}}
>
<div className="flex flex-col justify-between gap-6 pt-2 sm:pt-0 lg:flex-row lg:gap-4">
{/* Left side */}
<div className="flex shrink-0 flex-col items-center sm:flex-row sm:gap-6 lg:w-[440px]">
<div
className={
// Set a fixed width so pools with one or two asset icons still
// line up
"w-16"
}
>
<AssetStack
hyperdriveAddress={hyperdrive.address}
hyperdriveChainId={hyperdrive.chainId}
/>
</div>
<div className="flex flex-col gap-1.5">
<h4 className="mb-4 text-center text-h4 sm:mb-0 sm:text-left">
{yieldSource.shortName}
</h4>
<div className="flex flex-col gap-2 border-y border-gray-600 p-4 sm:gap-1.5 sm:border-none sm:p-0">
<div className="flex flex-wrap justify-center gap-5 gap-y-2 sm:justify-start">
<div className="flex items-center gap-1.5 text-sm">
<ClockIcon className="size-4 text-gray-400/60" />{" "}
<span className="text-neutral-content">
{formatTermLength2(
Number(hyperdrive.poolConfig.positionDuration * 1000n),
)}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">TVL</span>{" "}
<span className="font-dmMono text-neutral-content">
{tvlLabel}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<img
className="size-4 rounded-full"
src={chainInfo.iconUrl}
/>
<span className="text-neutral-content">
{chainInfo.name}
</span>
</div>
<Well
as="div"
block
onClick={() => {
navigate({
to: MARKET_DETAILS_ROUTE,
resetScroll: true,
params: {
address: hyperdrive.address,
chainId: hyperdrive.chainId.toString(),
},
});
}}
>
<div className="flex flex-col justify-between gap-6 pt-2 sm:pt-0 lg:flex-row lg:gap-4">
{/* Left side */}
<div className="flex shrink-0 flex-col items-center sm:flex-row sm:gap-6 lg:w-[440px]">
<div
className={
// Set a fixed width so pools with one or two asset icons still
// line up
"w-16"
}
>
<AssetStack
hyperdriveAddress={hyperdrive.address}
hyperdriveChainId={hyperdrive.chainId}
/>
</div>
<div className="flex flex-col gap-1.5">
<h4 className="mb-4 text-center text-h4 sm:mb-0 sm:text-left">
{yieldSource.shortName}
</h4>
<div className="flex flex-col gap-2 border-y border-gray-600 p-4 sm:gap-1.5 sm:border-none sm:p-0">
<div className="flex flex-wrap justify-center gap-5 gap-y-2 sm:justify-start">
<div className="flex items-center gap-1.5 text-sm">
<ClockIcon className="size-4 text-gray-400/60" />{" "}
<span className="text-neutral-content">
{formatTermLength2(
Number(hyperdrive.poolConfig.positionDuration * 1000n),
)}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">TVL</span>{" "}
<span className="font-dmMono text-neutral-content">
{tvlLabel}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<img
className="size-4 rounded-full"
src={chainInfo.iconUrl}
/>
<span className="text-neutral-content">{chainInfo.name}</span>
</div>
</div>
<div className="flex flex-wrap justify-center gap-5 gap-y-2 sm:justify-start">
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">Deposit</span>{" "}
<span className="text-neutral-content">
{getDepositAssets(hyperdrive)
.map(({ symbol }) => symbol)
.join(", ")}
</span>
</div>
<div className="flex flex-wrap justify-center gap-5 gap-y-2 sm:justify-start">
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">Deposit</span>{" "}
<span className="text-neutral-content">
{getDepositAssets(hyperdrive)
.map(({ symbol }) => symbol)
.join(", ")}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">Withdraw</span>{" "}
<span className="text-neutral-content">
{(() => {
// TODO: Make a getWithdrawAssets util
const withdrawTokens = [];
if (
hyperdrive.withdrawOptions
.isBaseTokenWithdrawalEnabled
) {
withdrawTokens.push(baseToken.symbol);
}
if (
hyperdrive.withdrawOptions
.isShareTokenWithdrawalEnabled
) {
withdrawTokens.push(sharesToken?.symbol);
}
return withdrawTokens.join(", ");
})()}
</span>
</div>
<div className="flex items-center gap-1.5 text-sm">
<span className="text-gray-400/60">Withdraw</span>{" "}
<span className="text-neutral-content">
{(() => {
// TODO: Make a getWithdrawAssets util
const withdrawTokens = [];
if (
hyperdrive.withdrawOptions.isBaseTokenWithdrawalEnabled
) {
withdrawTokens.push(baseToken.symbol);
}
if (
hyperdrive.withdrawOptions.isShareTokenWithdrawalEnabled
) {
withdrawTokens.push(sharesToken?.symbol);
}
return withdrawTokens.join(", ");
})()}
</span>
</div>
</div>
</div>
</div>
</div>

{/* Right side */}
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-12 lg:items-end lg:justify-start">
<div className="w-full lg:w-[112px]">
<FixedAprCta hyperdrive={hyperdrive} />
</div>
<div className="w-full lg:w-[181px]">
<VariableApyCta hyperdrive={hyperdrive} />
</div>
<div className="w-full lg:w-[122px]">
<LpApyCta hyperdrive={hyperdrive} />
</div>
{/* Right side */}
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-12 lg:items-end lg:justify-start">
<div className="w-full lg:w-[112px]">
<FixedAprCta hyperdrive={hyperdrive} />
</div>
<div className="w-full lg:w-[181px]">
<VariableApyCta hyperdrive={hyperdrive} />
</div>
<div className="w-full lg:w-[122px]">
<LpApyCta hyperdrive={hyperdrive} />
</div>
</div>
</Well>
</Fade>
</div>
</Well>
);
}
19 changes: 11 additions & 8 deletions apps/hyperdrive-trading/src/ui/markets/PoolsList/PoolsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { ArrowUpIcon } from "@heroicons/react/24/outline";
import { useNavigate, useSearch } from "@tanstack/react-router";
import classNames from "classnames";
import { ReactElement, ReactNode } from "react";
import { Fade } from "react-awesome-reveal";
import LoadingState from "src/ui/base/components/LoadingState";
import { MultiSelect } from "src/ui/base/components/MultiSelect";
import { NonIdealState } from "src/ui/base/components/NonIdealState";
Expand Down Expand Up @@ -209,14 +210,16 @@ export function PoolsList(): ReactElement {
)}
</Well>
) : (
pools.map((hyperdrive) => (
<PoolRow
// Combine address and chainId for a unique key, as addresses may
// overlap across chains (e.g. cloudchain and mainnet)
key={`${hyperdrive.address}-${hyperdrive.chainId}`}
hyperdrive={hyperdrive}
/>
))
<Fade triggerOnce damping={0} duration={500}>
{pools.map((hyperdrive) => (
<PoolRow
// Combine address and chainId for a unique key, as addresses may
// overlap across chains (e.g. cloudchain and mainnet)
key={`${hyperdrive.address}-${hyperdrive.chainId}`}
hyperdrive={hyperdrive}
/>
))}
</Fade>
)}
</>
) : null}
Expand Down
8 changes: 1 addition & 7 deletions ...ive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import classNames from "classnames";
import { ReactElement, useMemo } from "react";
import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
import { NonIdealState } from "src/ui/base/components/NonIdealState";
import { TableSkeleton } from "src/ui/base/components/TableSkeleton";
import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
import { LpCurrentValueCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell";
import { ManageLpAndWithdrawalSharesButton } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton";
Expand All @@ -31,8 +30,7 @@ export function OpenLpTableDesktop({
hyperdrives: HyperdriveConfig[];
}): ReactElement | null {
const { address: account } = useAccount();
const { openLpPositions, openLpPositionStatus } =
usePortfolioLpDataFromHyperdrives(hyperdrives);
const { openLpPositions } = usePortfolioLpDataFromHyperdrives(hyperdrives);

const columns = useMemo(
() => getColumns({ hyperdrives, appConfig }),
Expand Down Expand Up @@ -65,10 +63,6 @@ export function OpenLpTableDesktop({
);
}

if (openLpPositionStatus === "loading" || !openLpPositions) {
return <TableSkeleton numColumns={columns.length} numRows={5} />;
}

// Check if there is no data after filtering
if (tableData.length === 0) {
return null;
Expand Down

0 comments on commit 7be2a40

Please sign in to comment.