Move account address into route for portfolio page (#1744)

* Move account address into route for portfolio page

* Wire up longs tab to account from route

Author: DannyDelott

apps/hyperdrive-trading/src/routeTree.gen.ts

@@ -36,21 +36,22 @@ import {
   ZapsTokenPicker,
 } from "src/ui/token/TokenPicker";
 import { useTokenList } from "src/ui/tokenlist/useTokenList";
-import { formatUnits, parseUnits } from "viem";
-import { useAccount, useChainId } from "wagmi";
+import { Address, formatUnits, parseUnits } from "viem";
+import { useChainId } from "wagmi";
 
 interface CloseLongFormProps {
   hyperdrive: HyperdriveConfig;
   long: Long;
+  account: Address | undefined;
   onCloseLong?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
 export function CloseLongForm({
   hyperdrive,
+  account,
   long,
   onCloseLong,
 }: CloseLongFormProps): ReactElement {
-  const { address: account } = useAccount();
   const connectedChainId = useChainId();
   const defaultItems: TokenConfig[] = [];
   const appConfig = useAppConfigForConnectedChain();

apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.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 { CloseLongForm } from "src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm";
+import { Address } from "viem";
 
 export interface CloseLongModalButtonProps {
   modalId: string;
   hyperdrive: HyperdriveConfig;
+  account: Address | undefined;
   long: Long;
 }
 export function CloseLongModalButton({
   modalId,
   long,
+  account,
   hyperdrive,
 }: CloseLongModalButtonProps): ReactElement {
   const appConfig = useAppConfigForConnectedChain();
@@ -45,6 +48,7 @@ export function CloseLongModalButton({
         <div>
           <CloseLongForm
             hyperdrive={hyperdrive}
+            account={account}
             long={long}
             onCloseLong={(e) => {
               // preventDefault since we don't want to close the modal while the

apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { Navigate, useNavigate, useSearch } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { Tabs } from "src/ui/base/components/Tabs/Tabs";
 import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
@@ -7,21 +7,29 @@ import { LpAndWithdrawalSharesContainer } from "src/ui/portfolio/lp/LpAndWithdra
 import { RewardsContainer } from "src/ui/portfolio/rewards/RewardsContainer";
 import { PORTFOLIO_ROUTE } from "src/ui/portfolio/routes";
 import { OpenShortsContainer } from "src/ui/portfolio/shorts/ShortsContainer";
+import { Address } from "viem";
+import { useAccount } from "wagmi";
 
 export function Portfolio(): ReactElement {
-  const { position } = useSearch({ from: PORTFOLIO_ROUTE });
-  const navigate = useNavigate({ from: PORTFOLIO_ROUTE });
+  const { position, account: accountFromRoute } = useSearch({
+    from: PORTFOLIO_ROUTE,
+  });
   const activeTab = position ?? "longs";
+
+  const { address: connectedAccount } = useAccount();
+  const account = (accountFromRoute ?? connectedAccount) as Address | undefined;
+  const navigate = useNavigate({ from: PORTFOLIO_ROUTE });
+
   const { isFlagEnabled: isPortfolioRewardsFeatureFlagEnabled } =
     useFeatureFlag("portfolio-rewards");
   const tabs = [
     {
       id: "longs",
-      content: <OpenLongsContainer />,
+      content: <OpenLongsContainer account={account} />,
       label: "Long",
       onClick: () => {
         navigate({
-          search: () => ({ position: "longs" }),
+          search: (prev) => ({ ...prev, position: "longs" }),
         });
       },
     },
@@ -31,7 +39,7 @@ export function Portfolio(): ReactElement {
       label: "Short",
       onClick: () => {
         navigate({
-          search: () => ({ position: "shorts" }),
+          search: (prev) => ({ ...prev, position: "shorts" }),
         });
       },
     },
@@ -41,7 +49,7 @@ export function Portfolio(): ReactElement {
       label: "LP",
       onClick: () => {
         navigate({
-          search: () => ({ position: "lp" }),
+          search: (prev) => ({ ...prev, position: "lp" }),
         });
       },
     },
@@ -53,13 +61,19 @@ export function Portfolio(): ReactElement {
       label: "Rewards",
       onClick: () => {
         navigate({
-          search: () => ({ position: "rewards" }),
+          search: (prev) => ({ ...prev, position: "rewards" }),
         });
       },
     });
   }
   return (
     <div className="flex w-full flex-col items-center bg-base-100 py-8">
+      {!accountFromRoute && connectedAccount ? (
+        <Navigate
+          from={PORTFOLIO_ROUTE}
+          search={(prev) => ({ ...prev, account })}
+        />
+      ) : null}
       <Tabs activeTabId={activeTab} tabs={tabs} />
     </div>
   );

apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx

@@ -8,14 +8,19 @@ import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { usePortfolioLongsData } from "src/ui/portfolio/longs/usePortfolioLongsData";
 import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
-import { useAccount } from "wagmi";
+import { Address } from "viem";
 import { OpenLongsTableDesktop } from "./OpenLongsTable/OpenLongsTableDesktop";
 
-export function OpenLongsContainer(): ReactElement {
-  const { address: account } = useAccount();
-  const { openLongPositions, openLongPositionsStatus } =
-    usePortfolioLongsData();
+export function OpenLongsContainer({
+  account,
+}: {
+  account: Address | undefined;
+}): ReactElement {
   const appConfig = useAppConfigForConnectedChain();
+  const { openLongPositions, openLongPositionsStatus } = usePortfolioLongsData({
+    account,
+  });
+
   const hyperdrivesByChainAndYieldSource = groupBy(
     appConfig.hyperdrives,
     (hyperdrive) => `${hyperdrive.chainId}-${hyperdrive.yieldSource}`,
@@ -68,7 +73,11 @@ export function OpenLongsContainer(): ReactElement {
     <PositionContainer className="mt-10">
       {Object.entries(hyperdrivesByChainAndYieldSource).map(
         ([key, hyperdrives]) => (
-          <OpenLongsTableDesktop hyperdrives={hyperdrives} key={key} />
+          <OpenLongsTableDesktop
+            key={key}
+            hyperdrives={hyperdrives}
+            account={account}
+          />
         ),
       )}
     </PositionContainer>

apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx

@@ -33,16 +33,17 @@ import { ManageLongsButton } from "src/ui/portfolio/longs/OpenLongsTable/ManageL
 import { TotalOpenLongsValue } from "src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue";
 import { usePortfolioLongsDataFromHyperdrives } from "src/ui/portfolio/longs/usePortfolioLongsData";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
-import { useAccount } from "wagmi";
+import { Address } from "viem";
 
 export function OpenLongsTableDesktop({
   hyperdrives,
+  account,
 }: {
   hyperdrives: HyperdriveConfig[];
+  account: Address | undefined;
 }): ReactElement | null {
-  const { address: account } = useAccount();
   const { openLongPositions, openLongPositionsStatus } =
-    usePortfolioLongsDataFromHyperdrives(hyperdrives);
+    usePortfolioLongsDataFromHyperdrives({ hyperdrives, account });
   const openLongPositionsExist = openLongPositions?.some(
     (position) => position.details !== undefined,
   );
@@ -94,6 +95,7 @@ export function OpenLongsTableDesktop({
         hyperdrive={hyperdrives[0]}
         rightElement={
           <TotalOpenLongsValue
+            account={account}
             hyperdrives={hyperdrives}
             openLongs={openLongPositions}
           />
@@ -112,6 +114,7 @@ export function OpenLongsTableDesktop({
           return (
             <CloseLongModalButton
               key={modalId}
+              account={account}
               hyperdrive={original.hyperdrive}
               modalId={modalId}
               long={{

apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx

@@ -7,19 +7,19 @@ import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForC
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useTotalOpenLongsValueTwo } from "src/ui/hyperdrive/longs/hooks/useTotalOpenLongsValue";
 import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
-import { useAccount } from "wagmi";
+import { Address } from "viem";
 
 export function TotalOpenLongsValue({
   hyperdrives,
   openLongs,
+  account,
 }: {
   hyperdrives: HyperdriveConfig[];
+  account: Address | undefined;
   openLongs:
     | (OpenLongPositionReceived & { hyperdrive: HyperdriveConfig })[]
     | undefined;
 }): ReactElement {
-  const { address: account } = useAccount();
-
   const { totalOpenLongsValue, isLoading } = useTotalOpenLongsValueTwo({
     account,
     longs: openLongs,

apps/hyperdrive-trading/src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue.tsx

@@ -7,18 +7,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 OpenLongPositionsData = {
   hyperdrive: HyperdriveConfig;
   openLongs: OpenLongPositionReceived[];
 }[];
 
-export function usePortfolioLongsData(): {
+export function usePortfolioLongsData({
+  account,
+}: {
+  account: Address | undefined;
+}): {
   openLongPositions: OpenLongPositionsData | undefined;
   openLongPositionsStatus: "error" | "success" | "loading";
 } {
-  const { address: account } = useAccount();
   const appConfigForConnectedChain = useAppConfigForConnectedChain();
   const queryEnabled = !!account && !!appConfigForConnectedChain;
 
@@ -44,7 +47,7 @@ export function usePortfolioLongsData(): {
                     ...long,
                     details: await readHyperdrive.getOpenLongDetails({
                       assetId: long.assetId,
-                      account: account,
+                      account,
                     }),
                   })),
                 );
@@ -64,15 +67,18 @@ export function usePortfolioLongsData(): {
   };
 }
 
-export function usePortfolioLongsDataFromHyperdrives(
-  hyperdrives: HyperdriveConfig[],
-): {
+export function usePortfolioLongsDataFromHyperdrives({
+  hyperdrives,
+  account,
+}: {
+  hyperdrives: HyperdriveConfig[];
+  account: Address | undefined;
+}): {
   openLongPositions:
     | (OpenLongPositionReceived & { hyperdrive: HyperdriveConfig })[]
     | undefined;
   openLongPositionsStatus: "error" | "success" | "loading";
 } {
-  const { address: account } = useAccount();
   const queryEnabled = !!account && !!hyperdrives.length;
 
   const { data: openLongPositions, status: openLongPositionsStatus } = useQuery(
@@ -105,6 +111,7 @@ export function usePortfolioLongsDataFromHyperdrives(
                     }),
                   })),
                 );
+                console.log("openLongs", openLongs);
 
                 return openLongs;
               }),

apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts

@@ -11,5 +11,6 @@ export const Route = createFileRoute(PORTFOLIO_ROUTE)({
   ),
   validateSearch: z.object({
     position: z.enum(["longs", "shorts", "lp", "rewards"]).optional(),
+    account: z.string().optional(),
   }),
 });