diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx index 7bcfa6481..320379f0f 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx @@ -24,21 +24,22 @@ import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance"; import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; import { TokenInput } from "src/ui/token/TokenInput"; import { TokenChoice, TokenPicker } from "src/ui/token/TokenPicker"; -import { formatUnits, parseUnits } from "viem"; -import { useAccount, useChainId } from "wagmi"; +import { Address, formatUnits, parseUnits } from "viem"; +import { useChainId } from "wagmi"; interface CloseShortFormProps { hyperdrive: HyperdriveConfig; // TODO: Refactor this to only need the positionSize and maturity time short: OpenShort; + account: Address | undefined; onCloseShort?: (e: MouseEvent) => void; } export function CloseShortForm({ hyperdrive, + account, short, }: CloseShortFormProps): ReactElement { - const { address: account } = useAccount(); const connectedChainId = useChainId(); const defaultItems = []; const appConfig = useAppConfigForConnectedChain(); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx index ca2b59622..636fca0e6 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx @@ -10,15 +10,18 @@ import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForC import { Modal } from "src/ui/base/components/Modal/Modal"; import { ModalHeader } from "src/ui/base/components/Modal/ModalHeader"; import { CloseShortForm } from "src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm"; +import { Address } from "viem"; export interface CloseShortModalButtonProps { modalId: string; hyperdrive: HyperdriveConfig; + account: Address | undefined; short: OpenShort; } export function CloseShortModalButton({ modalId, short, + account, hyperdrive, }: CloseShortModalButtonProps): ReactElement { const appConfig = useAppConfigForConnectedChain(); @@ -44,6 +47,7 @@ export function CloseShortModalButton({ modalId={modalId} modalContent={ { diff --git a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx index 37b665527..b6ed56ee1 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx @@ -35,7 +35,7 @@ export function Portfolio(): ReactElement { }, { id: "shorts", - content: , + content: , label: "Short", onClick: () => { navigate({ @@ -45,7 +45,7 @@ export function Portfolio(): ReactElement { }, { id: "lp", - content: , + content: , label: "LP", onClick: () => { navigate({ @@ -57,7 +57,7 @@ export function Portfolio(): ReactElement { if (isPortfolioRewardsFeatureFlagEnabled) { tabs.push({ id: "rewards", - content: , + content: , label: "Rewards", onClick: () => { navigate({ diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx index 96df93d96..72b9e2805 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx @@ -4,15 +4,20 @@ 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"; +import { Address } from "viem"; +import { useAccount } from "wagmi"; export function ManageLongsButton({ hyperdrive, assetId, + account: accountFromProps, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; assetId: bigint; }): ReactElement { const [isOpen, setIsOpen] = useState(false); + const { address: connectedAccount } = useAccount(); const dropdownRef = useRef(null); useClickAway(dropdownRef, () => setIsOpen(false)); return ( @@ -29,17 +34,19 @@ export function ManageLongsButton({ {isOpen && (
    - + {accountFromProps !== connectedAccount ? null : ( + + )} { - return getColumns({ hyperdrives, appConfig }); - }, [hyperdrives]); + return getColumns({ account, hyperdrives, appConfig }); + }, [hyperdrives, account]); const tableInstance = useReactTable({ columns: columns, data: openLongPositions || [], @@ -236,9 +236,11 @@ const columnHelper = createColumnHelper< function getColumns({ hyperdrives, + account, appConfig, }: { hyperdrives: HyperdriveConfig[]; + account: Address | undefined; appConfig: AppConfig; }) { const baseToken = getBaseToken({ @@ -339,6 +341,7 @@ function getColumns({ return ( diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx index 8d3a3ff1e..def7229c1 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx @@ -9,10 +9,15 @@ import { OpenLpTableDesktop } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTab import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData"; import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected"; import { PositionContainer } from "src/ui/portfolio/PositionContainer"; -import { useAccount } from "wagmi"; -export function LpAndWithdrawalSharesContainer(): ReactElement { - const { openLpPositions, openLpPositionStatus } = usePortfolioLpData(); - const { address: account } = useAccount(); +import { Address } from "viem"; +export function LpAndWithdrawalSharesContainer({ + account, +}: { + account: Address | undefined; +}): ReactElement { + const { openLpPositions, openLpPositionStatus } = usePortfolioLpData({ + account, + }); const appConfig = useAppConfigForConnectedChain(); const hyperdrivesByChainAndYieldSource = groupBy( appConfig.hyperdrives, @@ -80,7 +85,11 @@ export function LpAndWithdrawalSharesContainer(): ReactElement { {Object.entries(hyperdrivesByChainAndYieldSource).map( ([key, hyperdrives]) => ( - + ), )} 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 28862a5c0..c15dcc4ef 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx @@ -22,19 +22,23 @@ import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/Tot import { WithdrawalQueueCell } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell"; import { usePortfolioLpDataFromHyperdrives } from "src/ui/portfolio/lp/usePortfolioLpData"; import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; export function OpenLpTableDesktop({ hyperdrives, + account, }: { hyperdrives: HyperdriveConfig[]; + account: Address | undefined; }): ReactElement | null { - const { address: account } = useAccount(); - const { openLpPositions } = usePortfolioLpDataFromHyperdrives(hyperdrives); + const { openLpPositions } = usePortfolioLpDataFromHyperdrives({ + hyperdrives, + account, + }); const appConfig = useAppConfigForConnectedChain(); const columns = useMemo( - () => getColumns({ hyperdrives, appConfig }), - [hyperdrives], + () => getColumns({ account, hyperdrives, appConfig }), + [hyperdrives, account], ); const tableData = useMemo( @@ -75,6 +79,7 @@ export function OpenLpTableDesktop({ hyperdrive={hyperdrives[0]} rightElement={ @@ -173,9 +178,11 @@ const columnHelper = createColumnHelper<{ function getColumns({ hyperdrives, + account, appConfig, }: { hyperdrives: HyperdriveConfig[]; + account: Address | undefined; appConfig: AppConfig; }) { const baseToken = getBaseToken({ @@ -215,6 +222,7 @@ function getColumns({ header: `Value (${baseToken?.symbol})`, cell: ({ row }) => ( @@ -224,13 +232,17 @@ function getColumns({ id: "withdrawalQueue", header: `Withdrawal Queue`, cell: ({ row }) => ( - + ), }), columnHelper.display({ id: "manage", cell: ({ row }) => ( ), diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx index 303741308..f5ab14208 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx @@ -10,16 +10,17 @@ import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip"; import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { useOpenLpPosition } from "src/ui/hyperdrive/lp/hooks/useOpenLpPosition"; import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; export function LpCurrentValueCell({ hyperdrive, + account, lpShares, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; lpShares: bigint; }): ReactElement { - const { address: account } = useAccount(); const appConfig = useAppConfigForConnectedChain(); const baseToken = getBaseToken({ hyperdriveAddress: hyperdrive.address, diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton.tsx index fb0fb6a36..1a8bec6a3 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton.tsx @@ -19,17 +19,18 @@ import { usePreviewRedeemWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/use import { useWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/useWithdrawalShares"; import { RedeemWithdrawalSharesForm } from "src/ui/hyperdrive/withdrawalShares/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm"; import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; export function ManageLpAndWithdrawalSharesButton({ hyperdrive, + account, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; }): ReactElement { // This is a controlled component because the default daisy-ui dropdown classes seem to interfere with focus elements in manage position modals. const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); useClickAway(dropdownRef, () => setIsOpen(false)); - const { address: account } = useAccount(); const appConfig = useAppConfigForConnectedChain(); const baseToken = getBaseToken({ hyperdriveChainId: hyperdrive.chainId, diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx index c31f967fb..e0bf583ad 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue.tsx @@ -7,14 +7,16 @@ import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForC import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { useTotalOpenLpPositions } from "src/ui/hyperdrive/lp/hooks/useTotalOpenLpPositions"; import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; import { sepolia } from "wagmi/chains"; export function TotalLpValue({ hyperdrive, + account, openLpPositions, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; openLpPositions: | { hyperdrive: HyperdriveConfig; @@ -23,7 +25,6 @@ export function TotalLpValue({ }[] | undefined; }): ReactElement { - const { address: account } = useAccount(); const { totalOpenLpPositions, isLoading: isLoadingTotalOpenLpPositions } = useTotalOpenLpPositions({ account, diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell.tsx index ea8b6089b..92e19a588 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell.tsx @@ -5,14 +5,15 @@ import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo"; import { usePreviewRedeemWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/usePreviewRedeemWithdrawalShares"; import { useWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/useWithdrawalShares"; import { getWithdrawalSharesCurrentValue } from "src/ui/hyperdrive/withdrawalShares/getWithdrawalSharesCurrentValue"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; export function WithdrawalQueueCell({ hyperdrive, + account, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; }): JSX.Element { - const { address: account } = useAccount(); const appConfig = useAppConfigForConnectedChain(); const baseToken = getBaseToken({ hyperdriveChainId: hyperdrive.chainId, diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/usePortfolioLpData.ts b/apps/hyperdrive-trading/src/ui/portfolio/lp/usePortfolioLpData.ts index 6fe33ddd9..399e35d17 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/lp/usePortfolioLpData.ts +++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/usePortfolioLpData.ts @@ -4,7 +4,7 @@ import { useQuery } from "@tanstack/react-query"; import { makeQueryKey } from "src/base/makeQueryKey"; import { getDrift } from "src/drift/getDrift"; import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; type LpPosition = { hyperdrive: HyperdriveConfig; @@ -12,13 +12,16 @@ type LpPosition = { withdrawalShares: bigint; }; -export function usePortfolioLpDataFromHyperdrives( - hyperdrives: HyperdriveConfig[], -): { +export function usePortfolioLpDataFromHyperdrives({ + hyperdrives, + account, +}: { + hyperdrives: HyperdriveConfig[]; + account: Address | undefined; +}): { openLpPositions: LpPosition[] | undefined; openLpPositionStatus: "error" | "success" | "loading"; } { - const { address: account } = useAccount(); const queryEnabled = !!account && !!hyperdrives.length; const { data, status } = useQuery({ queryKey: makeQueryKey("portfolioLp", { @@ -63,11 +66,14 @@ export function usePortfolioLpDataFromHyperdrives( } // TODO: This eventually will need to be removed but it's currently being used at the top level of the LP Portfolio container to determine if there are any LP positions to display. -export function usePortfolioLpData(): { +export function usePortfolioLpData({ + account, +}: { + account: Address | undefined; +}): { openLpPositions: LpPosition[] | undefined; openLpPositionStatus: "error" | "success" | "loading"; } { - const { address: account } = useAccount(); const appConfigForConnectedChain = useAppConfigForConnectedChain(); const queryEnabled = !!account && !!appConfigForConnectedChain.hyperdrives.length; diff --git a/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx index b1e6fc27a..1847e1259 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/rewards/RewardsContainer.tsx @@ -9,10 +9,13 @@ import { PortfolioTableHeading } from "src/ui/portfolio/PortfolioTableHeading"; import { PositionContainer } from "src/ui/portfolio/PositionContainer"; import { RewardsTableDesktop } from "src/ui/portfolio/rewards/RewardsTableDesktop"; import { usePortfolioRewardsData } from "src/ui/portfolio/rewards/useRewardsData"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; -export function RewardsContainer(): ReactElement { - const { address: account } = useAccount(); +export function RewardsContainer({ + account, +}: { + account: Address | undefined; +}): ReactElement { const { rewards, rewardsStatus } = usePortfolioRewardsData({ account }); const appConfig = useAppConfigForConnectedChain(); if (!account) { diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx index fee6f389e..661a4a338 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx @@ -4,15 +4,20 @@ 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"; +import { Address } from "viem"; +import { useAccount } from "wagmi"; export function ManageShortButton({ hyperdrive, + account: accountFromProps, assetId, }: { hyperdrive: HyperdriveConfig; + account: Address | undefined; assetId: bigint; }): ReactElement { const [isOpen, setIsOpen] = useState(false); + const { address: connectedAccount } = useAccount(); const dropdownRef = useRef(null); useClickAway(dropdownRef, () => setIsOpen(false)); return ( @@ -29,17 +34,19 @@ export function ManageShortButton({ {isOpen && (
      - + {accountFromProps === connectedAccount && ( + + )} 0; - const columns = getColumns({ hyperdrives, appConfig }); + const columns = getColumns({ account, hyperdrives, appConfig }); const tableInstance = useReactTable({ columns, data: openShortPositions || [], @@ -87,6 +88,7 @@ export function OpenShortsTableDesktop({ hyperdrive={hyperdrives[0]} rightElement={ @@ -105,6 +107,7 @@ export function OpenShortsTableDesktop({ return ( (); function getColumns({ + account, hyperdrives, appConfig, }: { + account: Address | undefined; hyperdrives: HyperdriveConfig[]; appConfig: AppConfig; }) { @@ -292,6 +297,7 @@ function getColumns({ cell: ({ row }) => { return ( diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue.tsx index 3626ce0ca..10434815b 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue.tsx @@ -6,18 +6,19 @@ import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForC import { formatBalance } from "src/ui/base/formatting/formatBalance"; import { useTotalOpenShortsValue } from "src/ui/hyperdrive/shorts/hooks/useTotalOpenShortsValue"; import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice"; +import { Address } from "viem"; import { sepolia } from "viem/chains"; -import { useAccount } from "wagmi"; export function TotalOpenShortsValue({ + account, hyperdrives, openShorts, }: { hyperdrives: HyperdriveConfig[]; + account: Address | undefined; openShorts: (OpenShort & { hyperdrive: HyperdriveConfig })[] | undefined; }): ReactElement { const appConfig = useAppConfigForConnectedChain(); - const { address: account } = useAccount(); const { totalOpenShortsValue, isLoading } = useTotalOpenShortsValue({ account, diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/ShortsContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/ShortsContainer.tsx index baf6dbb9e..237fc881a 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/ShortsContainer.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/ShortsContainer.tsx @@ -9,12 +9,15 @@ import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected"; import { PositionContainer } from "src/ui/portfolio/PositionContainer"; import { OpenShortsTableDesktop } from "src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop"; import { usePortfolioShortsData } from "src/ui/portfolio/shorts/usePortfolioShortsData"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; -export function OpenShortsContainer(): ReactElement | null { - const { address: account } = useAccount(); +export function OpenShortsContainer({ + account, +}: { + account: Address | undefined; +}): ReactElement | null { const { openShortPositions, openShortPositionsStatus } = - usePortfolioShortsData(); + usePortfolioShortsData({ account }); const appConfig = useAppConfigForConnectedChain(); const hyperdrivesByChainAndYieldSource = groupBy( appConfig.hyperdrives, @@ -70,7 +73,11 @@ export function OpenShortsContainer(): ReactElement | null { {Object.entries(hyperdrivesByChainAndYieldSource).map( ([key, hyperdrives]) => ( - + ), )} diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/usePortfolioShortsData.ts b/apps/hyperdrive-trading/src/ui/portfolio/shorts/usePortfolioShortsData.ts index b12b699d0..bff0a786a 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/usePortfolioShortsData.ts +++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/usePortfolioShortsData.ts @@ -4,18 +4,21 @@ import { useQuery } from "@tanstack/react-query"; import { makeQueryKey, makeQueryKey2 } from "src/base/makeQueryKey"; import { getDrift } from "src/drift/getDrift"; import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain"; -import { useAccount } from "wagmi"; +import { Address } from "viem"; export type OpenShortPositionsData = { hyperdrive: HyperdriveConfig; openShorts: OpenShort[]; }[]; -export function usePortfolioShortsData(): { +export function usePortfolioShortsData({ + account, +}: { + account: Address | undefined; +}): { openShortPositions: OpenShortPositionsData | undefined; openShortPositionsStatus: "error" | "success" | "loading"; } { - const { address: account } = useAccount(); const appConfigForConnectedChain = useAppConfigForConnectedChain(); const queryEnabled = !!account && !!appConfigForConnectedChain; @@ -49,15 +52,18 @@ export function usePortfolioShortsData(): { }; } -export function usePortfolioShortsDataFromHyperdrives( - hyperdrives: HyperdriveConfig[], -): { +export function usePortfolioShortsDataFromHyperdrives({ + hyperdrives, + account, +}: { + hyperdrives: HyperdriveConfig[]; + account: Address | undefined; +}): { openShortPositions: | (OpenShort & { hyperdrive: HyperdriveConfig })[] | undefined; openShortPositionsStatus: "error" | "success" | "loading"; } { - const { address: account } = useAccount(); const queryEnabled = !!account && !!hyperdrives.length; const { data: openShortPositions, status: openShortPositionsStatus } = useQuery({