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 (
navigate(`/pools/${network?.id}/${poolId}`) : undefined
+ params.poolId && network?.id
+ ? () => navigate(`/pools/${network?.id}/${params.poolId}`)
+ : undefined
}
>
{poolName}
@@ -72,4 +81,4 @@ export const PositionTitle: FC<{
);
-};
+}
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'}
- {Number(networkId) === MAINNET.id || Number(networkId) === ARBITRUM.id ? (
+ {networkId === MAINNET.id || networkId === ARBITRUM.id ? (
Borrow Interest-Free
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';