refactor(tangle-dapp): Progress on useTypedSearchParams

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<BN | null>(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(

apps/tangle-dapp/hooks/useTypedSearchParams.ts

@@ -1,34 +1,46 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
 
 const useTypedSearchParams = <T extends object>(parsers: {
   [Key in keyof T]: (value: string) => T[Key] | undefined;
 }): Partial<T> => {
   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<T> = {};
-
-  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<T> = {};
+
+    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;