diff --git a/apps/tangle-dapp/app/liquid-staking/page.tsx b/apps/tangle-dapp/app/liquid-staking/page.tsx index d6812958a..3f98607a4 100644 --- a/apps/tangle-dapp/app/liquid-staking/page.tsx +++ b/apps/tangle-dapp/app/liquid-staking/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { FC } from 'react'; +import { FC, useEffect } from 'react'; import { LsValidatorTable } from '../../components/LiquidStaking/LsValidatorTable'; import LsStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsStakeCard'; @@ -8,8 +8,11 @@ import LsUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsUnst import UnstakeRequestsTable from '../../components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable'; import { LsSearchParamKey } from '../../constants/liquidStaking/types'; import LsPoolsTable from '../../containers/LsPoolsTable'; +import useNetworkStore from '../../context/useNetworkStore'; import { useLsStore } from '../../data/liquidStaking/useLsStore'; +import useNetworkSwitcher from '../../hooks/useNetworkSwitcher'; import useSearchParamState from '../../hooks/useSearchParamState'; +import getLsTangleNetwork from '../../utils/liquidStaking/getLsTangleNetwork'; import isLsParachainChainId from '../../utils/liquidStaking/isLsParachainChainId'; import TabListItem from '../restake/TabListItem'; import TabsList from '../restake/TabsList'; @@ -28,10 +31,22 @@ const LiquidStakingTokenPage: FC = () => { value ? SearchParamAction.STAKE : SearchParamAction.UNSTAKE, }); - const { selectedProtocolId } = useLsStore(); + const { selectedProtocolId, selectedNetworkId } = useLsStore(); + const { network } = useNetworkStore(); + const { switchNetwork } = useNetworkSwitcher(); + const lsTangleNetwork = getLsTangleNetwork(selectedNetworkId); const isParachainChain = isLsParachainChainId(selectedProtocolId); + // Sync the network with the selected liquid staking network on load. + // It might differ initially if the user navigates to the page and + // the active network differs from the default liquid staking network. + useEffect(() => { + if (lsTangleNetwork !== null && lsTangleNetwork.id !== network.id) { + switchNetwork(lsTangleNetwork, false); + } + }, [lsTangleNetwork, network.id, selectedNetworkId, switchNetwork]); + return (