Merge pull request #333 from pendulum-chain/321-add-prefill-form-url

add fromAmount and showFees url params

src/pages/swap/index.tsx

@@ -37,6 +37,7 @@ import { FeeComparison } from '../../components/FeeComparison';
 
 import { SignInModal } from '../../components/SignIn';
 import { useSiweContext } from '../../contexts/siwe';
+import { useSwapUrlParams } from './useSwapUrlParams';
 
 const Arrow = () => (
   <div className="flex justify-center w-full my-5">
@@ -110,6 +111,8 @@ export const SwapPage = () => {
     to,
   } = useSwapForm();
 
+  useSwapUrlParams({ form, setShowCompareFees });
+
   const fromToken = INPUT_TOKEN_CONFIG[from];
   const toToken = OUTPUT_TOKEN_CONFIG[to];
   const formToAmount = form.watch('toAmount');
@@ -393,7 +396,7 @@ export const SwapPage = () => {
             </p>
           )}
         </section>
-        <div className="flex mt-5 gap-3">
+        <div className="flex gap-3 mt-5">
           <button
             className="btn-vortex-secondary btn"
             style={{ flex: '1 1 calc(50% - 0.75rem/2)' }}

src/pages/swap/useSwapUrlParams.ts

@@ -0,0 +1,27 @@
+import { StateUpdater, useEffect } from 'preact/hooks';
+import { UseFormReturn } from 'react-hook-form';
+import { SwapFormValues } from '../../components/Nabla/schema';
+
+interface UseSwapUrlParamsProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: UseFormReturn<SwapFormValues, any, undefined>;
+  setShowCompareFees: StateUpdater<boolean>;
+}
+
+export const useSwapUrlParams = ({ form, setShowCompareFees }: UseSwapUrlParamsProps) => {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const fromAmountParam = params.get('fromAmount');
+    if (fromAmountParam) {
+      const parsedAmount = Number(fromAmountParam);
+      if (!isNaN(parsedAmount) && parsedAmount >= 0) {
+        form.setValue('fromAmount', parsedAmount.toFixed(2));
+      }
+    }
+
+    const showCompareFeesParam = params.get('showCompareFees');
+    if (showCompareFeesParam === 'true') {
+      setShowCompareFees(true);
+    }
+  }, [form, setShowCompareFees]);
+};