From 455074fe02eaba5fea490f49db8ee5597de752f2 Mon Sep 17 00:00:00 2001
From: Noisekit <noisekit@proton.me>
Date: Tue, 26 Nov 2024 15:14:57 +1100
Subject: [PATCH] Actually fix the pool header

---
 liquidity/lib/usePoolsList/usePoolsList.ts    |  2 +-
 .../src/components/Manage/PositionTitle.tsx   | 25 +++++++++++++------
 .../ui/src/components/Pools/PoolHeader.tsx    | 13 ++++++----
 liquidity/ui/src/pages/Pool.tsx               | 18 +++++++------
 4 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/liquidity/lib/usePoolsList/usePoolsList.ts b/liquidity/lib/usePoolsList/usePoolsList.ts
index cf9b9221..d042257d 100644
--- a/liquidity/lib/usePoolsList/usePoolsList.ts
+++ b/liquidity/lib/usePoolsList/usePoolsList.ts
@@ -25,7 +25,7 @@ export function usePoolsList() {
   });
 }
 
-export function usePool(networkId: number, poolId: string) {
+export function usePool(networkId?: number, poolId?: string) {
   const { data, isPending } = usePoolsList();
 
   // TODO: In the future if we have multiple pools per network filter by poolId also
diff --git a/liquidity/ui/src/components/Manage/PositionTitle.tsx b/liquidity/ui/src/components/Manage/PositionTitle.tsx
index 219ef299..c481e01c 100644
--- a/liquidity/ui/src/components/Manage/PositionTitle.tsx
+++ b/liquidity/ui/src/components/Manage/PositionTitle.tsx
@@ -7,16 +7,23 @@ import { useCollateralType } from '@snx-v3/useCollateralTypes';
 import { usePool } from '@snx-v3/usePoolsList';
 import { useParams } from '@snx-v3/useParams';
 
-export const PositionTitle: FC<{
+export function PositionTitle({
+  collateralSymbol,
+  isOpen,
+}: {
   collateralSymbol?: string;
   isOpen: boolean;
-}> = ({ collateralSymbol, isOpen }) => {
-  const { poolId, networkId } = useParams();
-  const { data: pool } = usePool(Number(networkId), String(poolId));
-  const { data: collateral } = useCollateralType(collateralSymbol);
+}) {
+  const params = useParams();
+
   const { network } = useNetwork();
-  const navigate = useNavigate();
+  const { data: pool } = usePool(network?.id, String(params.poolId));
+
   const poolName = pool?.poolInfo?.[0]?.pool?.name ?? '';
+
+  const navigate = useNavigate();
+  const { data: collateral } = useCollateralType(collateralSymbol);
+
   return (
     <Flex alignItems="center">
       <Flex
@@ -54,7 +61,9 @@ export const PositionTitle: FC<{
           alignItems="center"
           _hover={{ cursor: 'pointer' }}
           onClick={
-            poolId && networkId ? () => navigate(`/pools/${network?.id}/${poolId}`) : undefined
+            params.poolId && network?.id
+              ? () => navigate(`/pools/${network?.id}/${params.poolId}`)
+              : undefined
           }
         >
           <Text mr={2}>{poolName}</Text>
@@ -72,4 +81,4 @@ export const PositionTitle: FC<{
       </Flex>
     </Flex>
   );
-};
+}
diff --git a/liquidity/ui/src/components/Pools/PoolHeader.tsx b/liquidity/ui/src/components/Pools/PoolHeader.tsx
index 5c3aaa53..2ab77ae0 100644
--- a/liquidity/ui/src/components/Pools/PoolHeader.tsx
+++ b/liquidity/ui/src/components/Pools/PoolHeader.tsx
@@ -1,12 +1,15 @@
 import { Flex, Heading, Skeleton, Tag, Text } from '@chakra-ui/react';
-import { ARBITRUM, MAINNET, NetworkIcon, NETWORKS } from '@snx-v3/useBlockchain';
+import { ARBITRUM, MAINNET, NetworkIcon, NETWORKS, useNetwork } from '@snx-v3/useBlockchain';
 import { useParams } from '@snx-v3/useParams';
 import { usePool } from '@snx-v3/usePoolsList';
 
 export function PoolHeader() {
-  const { poolId, networkId } = useParams();
-  const { data: pool, isPending } = usePool(Number(networkId), String(poolId));
-  const network = NETWORKS.find((n) => n.id === Number(networkId));
+  const params = useParams();
+
+  const { network: connectedNetwork } = useNetwork();
+  const networkId = params.networkId ? Number(params.networkId) : connectedNetwork?.id;
+  const { data: pool, isPending } = usePool(networkId, String(params.poolId));
+  const network = NETWORKS.find((n) => n.id === networkId);
 
   const poolName = pool?.poolInfo?.[0]?.pool?.name ?? '';
   const networkName = network?.name ?? '';
@@ -19,7 +22,7 @@ export function PoolHeader() {
             {poolName ? poolName : 'Unknown Pool'}
           </Heading>
         </Skeleton>
-        {Number(networkId) === MAINNET.id || Number(networkId) === ARBITRUM.id ? (
+        {networkId === MAINNET.id || networkId === ARBITRUM.id ? (
           <Tag size="sm" bg="purple.500" mr="auto" color="white" height="fit-content">
             Borrow Interest-Free
           </Tag>
diff --git a/liquidity/ui/src/pages/Pool.tsx b/liquidity/ui/src/pages/Pool.tsx
index 282a9fce..bd4b27bf 100644
--- a/liquidity/ui/src/pages/Pool.tsx
+++ b/liquidity/ui/src/pages/Pool.tsx
@@ -1,16 +1,20 @@
 import { Box, Divider, Flex, Heading, Link } from '@chakra-ui/react';
-import { Helmet } from 'react-helmet';
-import { PoolHeader, CollateralSection } from '../components';
-import { useParams } from '@snx-v3/useParams';
 import { HomeLink } from '@snx-v3/HomeLink';
+import { NETWORKS, useNetwork } from '@snx-v3/useBlockchain';
+import { useParams } from '@snx-v3/useParams';
 import { usePool } from '@snx-v3/usePoolsList';
-import { NETWORKS } from '@snx-v3/useBlockchain';
+import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
+import { CollateralSection, PoolHeader } from '../components';
 
 export const Pool = () => {
-  const { poolId, networkId } = useParams();
-  const { data: pool, isPending } = usePool(Number(networkId), String(poolId));
-  const network = NETWORKS.find((n) => n.id === Number(networkId));
+  const params = useParams();
+
+  const { network: connectedNetwork } = useNetwork();
+  const networkId = params.networkId ? Number(params.networkId) : connectedNetwork?.id;
+  const { data: pool, isPending } = usePool(networkId, String(params.poolId));
+  const network = NETWORKS.find((n) => n.id === networkId);
+
   const title = pool
     ? `Pool #${pool.poolInfo?.[0]?.pool?.id} / ${pool.poolInfo?.[0]?.pool?.name}`
     : 'Pool';