-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cleanup portfolio components (#1658)
* Cleanup portfolio components * Unnest, link to regex101 in comment, switch to ExternalLink
- Loading branch information
1 parent
92676c9
commit 9a4e691
Showing
12 changed files
with
402 additions
and
372 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
apps/hyperdrive-trading/src/ui/portfolio/PositionContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import classNames from "classnames"; | ||
| import { PropsWithChildren, ReactElement } from "react"; | ||
|
|
||
| export function PositionContainer({ | ||
| className, | ||
| children, | ||
| }: PropsWithChildren<{ className?: string }>): ReactElement { | ||
| return ( | ||
| <div className={classNames("flex w-[1036px] flex-col gap-10", className)}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
29 changes: 29 additions & 0 deletions
29
apps/hyperdrive-trading/src/ui/portfolio/PositionTableHeading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig"; | ||
| import { ReactElement, ReactNode } from "react"; | ||
| import { AssetStack } from "src/ui/markets/AssetStack"; | ||
|
|
||
| export function PositionTableHeading({ | ||
| hyperdrive, | ||
| hyperdriveName, | ||
| rightElement, | ||
| }: { | ||
| hyperdrive: HyperdriveConfig; | ||
| /** | ||
| * Optional name to override the name from the hyperdrive | ||
| */ | ||
| hyperdriveName?: string; | ||
| rightElement: ReactNode; | ||
| }): ReactElement { | ||
| return ( | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-1 font-chakraPetch text-h4"> | ||
| <AssetStack | ||
| hyperdriveAddress={hyperdrive.address} | ||
| hyperdriveChainId={hyperdrive.chainId} | ||
| /> | ||
| <p className="text-h4">{hyperdriveName ?? hyperdrive.name}</p> | ||
| </div> | ||
| {rightElement} | ||
| </div> | ||
| ); | ||
| } |
114 changes: 114 additions & 0 deletions
114
apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { appConfig, HyperdriveConfig } 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 { OpenLongsTableDesktop } from "src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop"; | ||
| import { TotalOpenLongsValue } from "src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue"; | ||
| import { | ||
| OpenLongPositionsData, | ||
| usePortfolioLongsData, | ||
| } from "src/ui/portfolio/longs/usePortfolioLongsData"; | ||
| import { PositionContainer } from "src/ui/portfolio/PositionContainer"; | ||
| import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading"; | ||
| import { useAccount } from "wagmi"; | ||
|
|
||
| export function OpenLongsContainer(): ReactElement { | ||
| const { address: account } = useAccount(); | ||
| const { openLongPositions, openLongPositionsStatus } = | ||
| usePortfolioLongsData(); | ||
| if (!account) { | ||
| return ( | ||
| <PositionContainer className="my-28"> | ||
| <NonIdealState | ||
| heading="No wallet connected" | ||
| action={<ConnectWalletButton />} | ||
| /> | ||
| </PositionContainer> | ||
| ); | ||
| } | ||
|
|
||
| if (openLongPositionsStatus === "loading") { | ||
| return ( | ||
| <PositionContainer> | ||
| <LoadingState | ||
| heading="Loading your Longs..." | ||
| text="Searching for Long events, calculating current value and PnL..." | ||
| /> | ||
| </PositionContainer> | ||
| ); | ||
| } | ||
|
|
||
| if (openLongPositions?.every((position) => !position.openLongs.length)) { | ||
| return ( | ||
| <PositionContainer className="my-28"> | ||
| <NonIdealState | ||
| heading="No Longs found" | ||
| text={ | ||
| <p className="max-w-xl"> | ||
| Visit the{" "} | ||
| <ExternalLink | ||
| href="https://docs.hyperdrive.box/hyperdrive-overview/position-types/longs-fixed-rates" | ||
| newTab | ||
| > | ||
| documentation | ||
| </ExternalLink>{" "} | ||
| or explore pools to open your first Long position. | ||
| </p> | ||
| } | ||
| action={ | ||
| <Link className="daisy-btn daisy-btn-primary rounded-full" to="/"> | ||
| View Pools | ||
| </Link> | ||
| } | ||
| /> | ||
| </PositionContainer> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <PositionContainer className="mt-10"> | ||
| {openLongPositions && | ||
| appConfig.hyperdrives | ||
| .filter((hyperdrive) => { | ||
| const openLongs = findOpenLongs( | ||
| openLongPositions, | ||
| hyperdrive, | ||
| )?.openLongs; | ||
| // Ensure this hyperdrive pool has open positions before rendering. | ||
| return openLongPositionsStatus === "success" && openLongs?.length; | ||
| }) | ||
| .map((hyperdrive) => { | ||
| const openLongs = findOpenLongs( | ||
| openLongPositions, | ||
| hyperdrive, | ||
| )?.openLongs; | ||
| return ( | ||
| <div className="flex flex-col gap-6" key={hyperdrive.address}> | ||
| <PositionTableHeading | ||
| hyperdrive={hyperdrive} | ||
| rightElement={<TotalOpenLongsValue hyperdrive={hyperdrive} />} | ||
| /> | ||
| <OpenLongsTableDesktop | ||
| hyperdrive={hyperdrive} | ||
| openLongs={openLongs} | ||
| /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </PositionContainer> | ||
| ); | ||
| } | ||
|
|
||
| function findOpenLongs( | ||
| openLongPositions: OpenLongPositionsData, | ||
| hyperdrive: HyperdriveConfig, | ||
| ) { | ||
| return openLongPositions.find( | ||
| (position) => | ||
| position.hyperdrive.address === hyperdrive.address && | ||
| position.hyperdrive.chainId === hyperdrive.chainId, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.