Wire up remaining portfolio components to account from route (#1746)

* Wire up shorts tab to account from route * Don't show close position menu item when in spy mode * Read account from route in LP tab * Cleanup remaining deps on useAccount in portfolio * Update apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx Co-authored-by: Ryan Goree <[email protected]> --------- Co-authored-by: Ryan Goree <[email protected]>
delvtech · Jan 29, 2025 · a378abe · a378abe
1 parent 1dcf172
commit a378abe
Show file tree

Hide file tree

Showing 18 changed files with 153 additions and 77 deletions.
diff --git 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<HTMLButtonElement>) => void;
 }
 
 export function CloseShortForm({
   hyperdrive,
+  account,
   short,
 }: CloseShortFormProps): ReactElement {
-  const { address: account } = useAccount();
   const connectedChainId = useChainId();
   const defaultItems = [];
   const appConfig = useAppConfigForConnectedChain();

diff --git a/...perdrive-trading/src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton.tsx b/...perdrive-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={
         <CloseShortForm
+          account={account}
           hyperdrive={hyperdrive}
           short={short}
           onCloseShort={(e) => {

diff --git 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: <OpenShortsContainer />,
+      content: <OpenShortsContainer account={account} />,
       label: "Short",
       onClick: () => {
         navigate({
@@ -45,7 +45,7 @@ export function Portfolio(): ReactElement {
     },
     {
       id: "lp",
-      content: <LpAndWithdrawalSharesContainer />,
+      content: <LpAndWithdrawalSharesContainer account={account} />,
       label: "LP",
       onClick: () => {
         navigate({
@@ -57,7 +57,7 @@ export function Portfolio(): ReactElement {
   if (isPortfolioRewardsFeatureFlagEnabled) {
     tabs.push({
       id: "rewards",
-      content: <RewardsContainer />,
+      content: <RewardsContainer account={account} />,
       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
@@ -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<HTMLDivElement>(null);
   useClickAway(dropdownRef, () => setIsOpen(false));
   return (
@@ -29,17 +34,19 @@ export function ManageLongsButton({
       </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
-          </button>
+          {accountFromProps !== connectedAccount ? null : (
+            <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
+            </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}

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
@@ -50,8 +50,8 @@ export function OpenLongsTableDesktop({
 
   const appConfig = useAppConfigForConnectedChain();
   const columns = useMemo(() => {
-    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 (
           <ManageLongsButton
             assetId={getValue()}
+            account={account}
             hyperdrive={row.original.hyperdrive}
             key={getValue()}
           />

diff --git 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 {
     <PositionContainer className="mt-10">
       {Object.entries(hyperdrivesByChainAndYieldSource).map(
         ([key, hyperdrives]) => (
-          <OpenLpTableDesktop hyperdrives={hyperdrives} key={key} />
+          <OpenLpTableDesktop
+            account={account}
+            hyperdrives={hyperdrives}
+            key={key}
+          />
         ),
       )}
     </PositionContainer>

diff --git a/...ive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable.tsx b/...ive-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={
           <TotalLpValue
+            account={account}
             hyperdrive={hyperdrives[0]}
             openLpPositions={openLpPositions}
           />
@@ -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 }) => (
         <LpCurrentValueCell
+          account={account}
           hyperdrive={row.original.hyperdrive}
           lpShares={row.original.lpShares}
         />
@@ -224,13 +232,17 @@ function getColumns({
       id: "withdrawalQueue",
       header: `Withdrawal Queue`,
       cell: ({ row }) => (
-        <WithdrawalQueueCell hyperdrive={row.original.hyperdrive} />
+        <WithdrawalQueueCell
+          account={account}
+          hyperdrive={row.original.hyperdrive}
+        />
       ),
     }),
     columnHelper.display({
       id: "manage",
       cell: ({ row }) => (
         <ManageLpAndWithdrawalSharesButton
+          account={account}
           hyperdrive={row.original.hyperdrive}
         />
       ),

diff --git a/.../hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx b/.../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/...ding/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/ManageLpAndWithdrawalSharesButton.tsx b/...ding/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<HTMLDivElement>(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
@@ -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/...hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/WithdrawalQueueCell.tsx b/...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,