diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx index 433d0ef1ca..380dab36cd 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx @@ -30,6 +30,7 @@ import useParachainBalances from '../../../data/liquidStaking/useParachainBalanc import useApi from '../../../hooks/useApi'; import useApiRx from '../../../hooks/useApiRx'; import { TxStatus } from '../../../hooks/useSubstrateTx'; +import useTypedSearchParams from '../../../hooks/useTypedSearchParams'; import DetailItem from './DetailItem'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import LiquidStakingInput from './LiquidStakingInput'; @@ -40,12 +41,16 @@ import UnstakePeriodDetailItem from './UnstakePeriodDetailItem'; const LiquidStakeCard: FC = () => { const [fromAmount, setFromAmount] = useState(null); - const { selectedChainId, setSelectedChainId } = useLiquidStakingStore(); - const { execute: executeMintTx, status: mintTxStatus } = useMintTx(); const { nativeBalances } = useParachainBalances(); + const searchParams = useTypedSearchParams({ + amount: (value) => new BN(value), + }); + + // TODO: Must set the amount ONCE, if it is provided in the URL search params and parsed correctly. Setting the value once might prove difficult unless a useMemo is given to the `useTypedSearchParams` hook to maintain 'stability'. + const selectedChain = PARACHAIN_CHAIN_MAP[selectedChainId]; const exchangeRate = useExchangeRate( diff --git a/apps/tangle-dapp/hooks/useTypedSearchParams.ts b/apps/tangle-dapp/hooks/useTypedSearchParams.ts index 0bc8c00865..8dd36d31c1 100644 --- a/apps/tangle-dapp/hooks/useTypedSearchParams.ts +++ b/apps/tangle-dapp/hooks/useTypedSearchParams.ts @@ -1,34 +1,46 @@ 'use client'; import { useSearchParams } from 'next/navigation'; +import { useMemo } from 'react'; const useTypedSearchParams = (parsers: { [Key in keyof T]: (value: string) => T[Key] | undefined; }): Partial => { const searchParams = useSearchParams(); - const entries = Object.keys(parsers).map((stringKey) => { - // TODO: Find a way to avoid casting here. - const key = stringKey as keyof T; - const parser = parsers[key]; - const paramValue = searchParams.get(stringKey); - const parsedValue = paramValue !== null ? parser(paramValue) : undefined; - - return [stringKey, parsedValue] as const; - }); - - const result: Partial = {}; - - for (const [stringKey, value] of entries) { - // TODO: Find a way to avoid casting here. - const key = stringKey as keyof T; - - if (value !== undefined) { - result[key] = value; + const entries = useMemo(() => { + return Object.keys(parsers).map((stringKey) => { + // TODO: Find a way to avoid casting here. + const key = stringKey as keyof T; + const parser = parsers[key]; + const paramValue = searchParams.get(stringKey); + let parsedValue: T[keyof T] | undefined; + + // Try parsing the value. If it fails, ignore the value. + try { + parsedValue = paramValue !== null ? parser(paramValue) : undefined; + } catch { + parsedValue = undefined; + } + + return [stringKey, parsedValue] as const; + }); + }, [parsers, searchParams]); + + return useMemo(() => { + const result: Partial = {}; + + for (const [stringKey, value] of entries) { + // TODO: Find a way to avoid casting here. + const key = stringKey as keyof T; + + if (value !== undefined) { + result[key] = value; + } } - } - return result; + return result; + }, [entries]); }; export default useTypedSearchParams;