Actually fix the pool header

Synthetixio · Nov 26, 2024 · a7d7871 · a7d7871
1 parent 16485f3
commit a7d7871
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git 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
@@ -1,22 +1,28 @@
 import { Flex, Heading, Text } from '@chakra-ui/react';
-import { FC } from 'react';
 import { NetworkIcon, useNetwork } from '@snx-v3/useBlockchain';
-import { useNavigate } from 'react-router-dom';
-import { TokenIcon } from '../TokenIcon';
 import { useCollateralType } from '@snx-v3/useCollateralTypes';
-import { usePool } from '@snx-v3/usePoolsList';
 import { useParams } from '@snx-v3/useParams';
+import { usePool } from '@snx-v3/usePoolsList';
+import { useNavigate } from 'react-router-dom';
+import { TokenIcon } from '../TokenIcon';
 
-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 +60,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 +80,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
@@ -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
@@ -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';