Wire up longs tab to account from route

delvtech · Jan 29, 2025 · 79ad001 · 79ad001
1 parent d59a102
commit 79ad001
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 26 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
@@ -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();

diff --git a/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx b/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.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

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
@@ -17,19 +17,19 @@ export function Portfolio(): ReactElement {
   const activeTab = position ?? "longs";
 
   const { address: connectedAccount } = useAccount();
-  const account = accountFromRoute ?? connectedAccount;
+  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 account={account as Address} />,
+      content: <OpenLongsContainer account={account} />,
       label: "Long",
       onClick: () => {
         navigate({
-          search: () => ({ position: "longs" }),
+          search: (prev) => ({ ...prev, position: "longs" }),
         });
       },
     },
@@ -39,7 +39,7 @@ export function Portfolio(): ReactElement {
       label: "Short",
       onClick: () => {
         navigate({
-          search: () => ({ position: "shorts" }),
+          search: (prev) => ({ ...prev, position: "shorts" }),
         });
       },
     },
@@ -49,7 +49,7 @@ export function Portfolio(): ReactElement {
       label: "LP",
       onClick: () => {
         navigate({
-          search: () => ({ position: "lp" }),
+          search: (prev) => ({ ...prev, position: "lp" }),
         });
       },
     },
@@ -61,7 +61,7 @@ export function Portfolio(): ReactElement {
       label: "Rewards",
       onClick: () => {
         navigate({
-          search: () => ({ position: "rewards" }),
+          search: (prev) => ({ ...prev, position: "rewards" }),
         });
       },
     });

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx
@@ -14,7 +14,7 @@ import { OpenLongsTableDesktop } from "./OpenLongsTable/OpenLongsTableDesktop";
 export function OpenLongsContainer({
   account,
 }: {
-  account?: Address;
+  account: Address | undefined;
 }): ReactElement {
   const appConfig = useAppConfigForConnectedChain();
   const { openLongPositions, openLongPositionsStatus } = usePortfolioLongsData({
@@ -73,7 +73,11 @@ export function OpenLongsContainer({
     <PositionContainer className="mt-10">
       {Object.entries(hyperdrivesByChainAndYieldSource).map(
         ([key, hyperdrives]) => (
-          <OpenLongsTableDesktop hyperdrives={hyperdrives} key={key} />
+          <OpenLongsTableDesktop
+            key={key}
+            hyperdrives={hyperdrives}
+            account={account}
+          />
         ),
       )}
     </PositionContainer>

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.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={{

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue.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,

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts b/apps/hyperdrive-trading/src/ui/portfolio/longs/usePortfolioLongsData.ts
@@ -8,23 +8,20 @@ import { makeQueryKey, makeQueryKey2 } from "src/base/makeQueryKey";
 import { getDrift } from "src/drift/getDrift";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { Address } from "viem";
-import { useAccount } from "wagmi";
 
 export type OpenLongPositionsData = {
   hyperdrive: HyperdriveConfig;
   openLongs: OpenLongPositionReceived[];
 }[];
 
 export function usePortfolioLongsData({
-  account: accountFromProps,
+  account,
 }: {
-  account?: Address;
+  account: Address | undefined;
 }): {
   openLongPositions: OpenLongPositionsData | undefined;
   openLongPositionsStatus: "error" | "success" | "loading";
 } {
-  const { address: connectedAccount } = useAccount();
-  const account = accountFromProps ?? connectedAccount;
   const appConfigForConnectedChain = useAppConfigForConnectedChain();
   const queryEnabled = !!account && !!appConfigForConnectedChain;
 
@@ -70,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(
@@ -111,6 +111,7 @@ export function usePortfolioLongsDataFromHyperdrives(
                     }),
                   })),
                 );
+                console.log("openLongs", openLongs);
 
                 return openLongs;
               }),